
:root{ color-scheme: light dark }
.ss-landing{ font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.ss-dark{ color: var(--fg-dark); background: linear-gradient(180deg,#0a0f1b 0%, var(--bg) 60%); }
.ss-light{ color: var(--fg-light); background: linear-gradient(180deg,#ffffff 0%, #f5f8ff 100%); }
.ss-container{ margin:0 auto; padding:clamp(16px,2.5vw,28px); max-width:1200px }
.ss-header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.7) }
.ss-dark .ss-header{ background:linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.55)); border-color:rgba(255,255,255,.12) }
.ss-nav{ display:flex; align-items:center; justify-content:space-between }
.ss-brand{ display:flex; align-items:center; gap:12px; font-weight:800 }
.ss-brand-logo{ inline-size:42px; block-size:42px; border-radius:10px; background:conic-gradient(from 260deg, var(--brand), var(--brand2)) }
.ss-menu{ display:flex; gap:18px }
.ss-menu a{ text-decoration:none }
.ss-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,48px); align-items:center; padding: clamp(24px, 4vw, 64px) 0 }
.ss-hero h1{ font-size: clamp(36px,5.2vw,68px); line-height:1.03; letter-spacing:-.02em; margin:10px 0 12px; text-transform:uppercase }
.ss-gradient{ font-weight:900; background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.ss-lead{ font-size: clamp(18px,1.5vw,20px); opacity:.9 }
.ss-badge{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-size:14px; color:#00151a; font-weight:900; background:linear-gradient(120deg,var(--brand),var(--brand2)) }
.ss-card{ background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:clamp(16px,2vw,26px) }
.ss-dark .ss-card{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14) }
.ss-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:14px; font-weight:800; border:1px solid rgba(0,0,0,.1); background:#fff }
.ss-dark .ss-btn{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.14) }
.ss-primary{ background: linear-gradient(145deg, rgba(91,231,196,.35), rgba(110,168,255,.35)) }
.ss-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px }
.ss-countdown{ display:flex; gap:14px; margin-top:18px }
.ss-timebox{ min-inline-size:92px; text-align:center; padding:16px 12px; border-radius:16px; border:1px solid rgba(0,0,0,.08); background:rgba(0,0,0,.03) }
.ss-dark .ss-timebox{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06) }
.ss-timebox .num{ font-size:34px; font-weight:900 }
.ss-timebox .lbl{ font-size:12px; opacity:.75 }
.ss-overflow{ position:relative; overflow:hidden }
.ss-ribbon{ position:absolute; right:18px; top:18px; transform:rotate(2deg); padding:8px 12px; border-radius:12px; font-weight:800; background: linear-gradient(120deg,var(--brand),var(--brand2)); color:#00151a }
.ss-hero-img{ width:100%; height:auto; border-radius:12px; border:1px solid rgba(0,0,0,.08) }
.ss-dark .ss-hero-img{ border-color:rgba(255,255,255,.14) }
.ss-grid{ display:grid; gap:16px }
.ss-cols-3{ grid-template-columns:repeat(3,1fr) }
.ss-cols-2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:960px){ .ss-hero{ grid-template-columns:1fr } .ss-cols-3{ grid-template-columns:1fr } .ss-cols-2{ grid-template-columns:1fr } }
.ss-kpi{ display:flex; gap:14px; align-items:flex-start }
.ss-kpi .icon{ inline-size:42px; block-size:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg, rgba(91,231,196,.22), rgba(110,168,255,.22)) }
.ss-accent{ background:linear-gradient(145deg, rgba(91,231,196,.12), rgba(110,168,255,.12)); border:1px dashed rgba(0,0,0,.2) }
.ss-dark .ss-accent{ background:linear-gradient(145deg, rgba(91,231,196,.12), rgba(110,168,255,.12)); border-color:rgba(255,255,255,.25) }
.ss-pill{ display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.1) }
.ss-dark .ss-pill{ border-color:rgba(255,255,255,.14) }
.ss-faq details{ border:1px solid rgba(0,0,0,.1); border-radius:16px; padding:14px 16px; background:rgba(0,0,0,.03) }
.ss-dark .ss-faq details{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06) }
.ss-label{ display:block; margin-bottom:6px }
.ss-input{ width:100%; padding:14px; border-radius:12px; border:1px solid rgba(0,0,0,.1); background:#fff }
.ss-dark .ss-input{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:inherit }
.ss-note{ font-size:14px; opacity:.8 }
.ss-footer{ border-top:1px solid rgba(0,0,0,.08); padding:28px 0 }
.ss-dark .ss-footer{ border-color:rgba(255,255,255,.14) }
.ss-footer-row{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap }
