/* Vis-Sol — prezentacja modułów VSA na stronie głównej.
 * Oficjalny widget jest stylowany wyłącznie przez https://srv.vis-sol.pl/widgets/vissol.js.
 */
.vsa-preview-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    color: #001018;
    font: 900 .82rem/1 Orbitron, Inter, sans-serif;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #00f0ff, #b7fbff 52%, #00ff9d);
    box-shadow: 0 0 24px rgba(0, 240, 255, .34);
}

/* Full VSA presentation on the home page */
.vsa-stage {
    background:
        radial-gradient(circle at 86% 18%, rgba(0, 240, 255, .15), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(0, 102, 255, .13), transparent 34%),
        linear-gradient(180deg, rgba(0, 240, 255, .025), rgba(0, 102, 255, .055));
    border-block: 1px solid var(--border, rgba(0, 240, 255, .18));
    overflow: hidden;
}
.vsa-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 32px;
    align-items: stretch;
}
.vsa-showcase-copy,
.vsa-showcase-console {
    border: 1px solid var(--border, rgba(0, 240, 255, .18));
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(10, 20, 40, .9), rgba(4, 10, 20, .78));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.vsa-showcase-copy { padding: clamp(30px, 5vw, 54px); }
.vsa-showcase-copy .lead { margin: 20px 0 26px; }
.vsa-benefits { display: grid; gap: 12px; margin: 24px 0 30px; }
.vsa-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(0, 240, 255, .12);
    border-radius: 16px;
    background: rgba(0, 240, 255, .035);
}
.vsa-benefit i {
    width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; color: var(--accent, #00f0ff);
    background: rgba(0, 240, 255, .08); border: 1px solid rgba(0, 240, 255, .14);
}
.vsa-benefit strong { display: block; color: #eefbff; margin-bottom: 2px; }
.vsa-benefit span { color: var(--muted, #91a9bc); font-size: .86rem; }

.vsa-showcase-console { padding: 18px; display: flex; flex-direction: column; min-height: 560px; position: relative; overflow: hidden; }
.vsa-showcase-console::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
    background-size: 32px 32px; pointer-events: none;
}
.vsa-console-bar { position: relative; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 4px 16px; }
.vsa-console-brand { display:flex; align-items:center; gap:10px; }
.vsa-console-brand .vsa-preview-mark { width:38px; height:38px; flex-basis:38px; border-radius:12px; }
.vsa-console-brand strong { display:block; font:800 .82rem Orbitron, sans-serif; }
.vsa-console-brand small { color:var(--muted, #91a9bc); }
.vsa-console-live { color:var(--success, #00ff9d); font-size:.76rem; display:flex; align-items:center; gap:7px; }
.vsa-console-live::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.vsa-console-screen {
    position: relative; flex:1; padding:22px; border-radius:22px;
    border:1px solid rgba(0,240,255,.15); background:rgba(1,8,17,.72);
    display:flex; flex-direction:column; gap:14px;
}
.vsa-preview-message { display:flex; gap:10px; align-items:flex-end; }
.vsa-preview-message.user { justify-content:flex-end; }
.vsa-preview-avatar { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 32px; color:#001018; background:linear-gradient(135deg,#00f0ff,#00ff9d); font:900 .6rem Orbitron; }
.vsa-preview-bubble { max-width:82%; padding:13px 15px; border-radius:17px 17px 17px 5px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:#d8ecf7; font-size:.86rem; line-height:1.55; }
.vsa-preview-message.user .vsa-preview-bubble { background:linear-gradient(135deg,#b0faff,#00f0ff); color:#001018; border:0; border-radius:17px 17px 5px 17px; font-weight:650; }
.vsa-preview-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; }
.vsa-preview-actions button { padding:12px; border-radius:14px; border:1px solid rgba(0,240,255,.18); background:rgba(0,240,255,.05); color:#dffaff; font-weight:750; text-align:left; cursor:pointer; }
.vsa-preview-actions button:hover { border-color:var(--accent, #00f0ff); background:rgba(0,240,255,.1); }
.vsa-preview-composer { margin-top:12px; padding:9px 10px 9px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(0,240,255,.18); border-radius:17px; color:#718a9d; background:rgba(255,255,255,.03); font-size:.82rem; }
.vsa-preview-composer i { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#001018; background:linear-gradient(135deg,#00f0ff,#00ff9d); }

.vsa-suite-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.vsa-suite-card { padding:22px; min-height:190px; border-radius:22px; border:1px solid var(--border, rgba(0,240,255,.18)); background:rgba(5,14,27,.72); }
.vsa-suite-card i { color:var(--accent, #00f0ff); font-size:1.35rem; margin-bottom:20px; }
.vsa-suite-card h3 { font-size:1rem; margin-bottom:8px; }
.vsa-suite-card p { color:var(--muted, #91a9bc); font-size:.86rem; }
.vsa-suite-card a { display:inline-flex; margin-top:15px; color:var(--accent, #00f0ff); text-decoration:none; font-weight:800; font-size:.82rem; }

@media (max-width: 1040px) {
    .vsa-showcase { grid-template-columns: 1fr; }
    .vsa-suite-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .vsa-showcase-copy { padding: 28px; }
    .vsa-showcase-console { min-height: 520px; }
    .vsa-preview-actions, .vsa-suite-grid { grid-template-columns: 1fr; }
    .vsa-preview-message .vsa-preview-bubble { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
    .vsa-showcase * { animation: none !important; transition: none !important; }
}