:root{
  --bg:#0b0f1a; --surface:#0f1526; --card:#121a30; --line:#1f2a44;
  --text:#e6edf7; --muted:#9aa7c2; --accent:#4fd1c5; --accent-weak:#2b3a5a;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px;
  --radius-1:6px; --radius-2:10px; --radius-3:16px;
  --font-base:18px;
  --font-body:"Space Grotesk", "Segoe UI", sans-serif;
  --font-display:"Source Serif 4", "Georgia", serif;
  --shadow-1: 0 8px 24px rgba(4,8,18,.45);
  --shadow-2: 0 18px 40px rgba(4,8,18,.55);
}

/* Light theme */
[data-theme="light"]{
  --bg:#f5f7fb; --surface:#ffffff; --card:#ffffff; --line:#d7ddea;
  --text:#0f172a; --muted:#475569; --accent:#0f766e; --accent-weak:#dbe3ef;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f5f7fb; --surface:#ffffff; --card:#ffffff; --line:#d7ddea;
    --text:#0f172a; --muted:#475569; --accent:#0f766e; --accent-weak:#dbe3ef;
  }
}
html{ text-size-adjust:100%; -webkit-text-size-adjust:100% }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-size:var(--font-base); line-height:1.6; font-family:var(--font-body);
  text-rendering:optimizeLegibility }
h1{font-size:46px;line-height:1.08;margin:0 0 var(--space-3);font-family:var(--font-display);letter-spacing:.01em}
h2{font-size:28px;line-height:1.3;margin:0 0 var(--space-2);font-family:var(--font-display)}
h3{font-size:19px;line-height:1.35;margin:0 0 var(--space-2);font-family:var(--font-body)}
@media (max-width:700px){ h1{font-size:34px} }
p{margin:0 0 var(--space-3)}
.small{font-size:12px} .muted{color:var(--muted)}
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus, .skip-link:focus-visible{ position:fixed; left:12px; top:12px; width:auto; height:auto; padding:8px 12px; z-index:99999; background:#0b1022; color:#e5e7eb; border:2px solid #93c5fd; border-radius:8px }

.container{ width:min(1100px, 92%); margin:0 auto }
.row{ display:flex; gap:var(--space-2) }
.row.center{ align-items:center }
.row.between{ justify-content:space-between }
.row.gap{ gap:var(--space-3) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3) }
@media (max-width:1100px){ .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .grid-3{ grid-template-columns:1fr } }

.module-stack{ display:grid; grid-template-columns:1fr; gap:var(--space-4) }
.module-card{ position:relative; padding:var(--space-5); background:
  linear-gradient(120deg, rgba(79,209,197,.12), rgba(15,23,42,0) 35%),
  linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,0) 60%),
  var(--card) }
.module-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, rgba(79,209,197,.85), rgba(79,209,197,.15));
  border-radius:var(--radius-3) 0 0 var(--radius-3);
}
.module-card:hover{ transform:none; box-shadow:var(--shadow-1) }
.module-card h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:0 0 var(--space-2);
}
.module-card h2{ font-size:22px; line-height:1.3; margin:0 0 var(--space-2) }
.module-card ul{ margin:0 0 var(--space-3) 18px }
.module-card li{ margin-bottom:6px }
.module-card .muted.small{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(11,15,26,.55);
}

[data-theme="light"] .module-card{
  background:linear-gradient(120deg, rgba(15,118,110,.12), rgba(248,250,252,0) 40%), var(--card);
}
[data-theme="light"] .module-card::before{
  background:linear-gradient(180deg, rgba(15,118,110,.75), rgba(15,118,110,.12));
}
[data-theme="light"] .module-card .muted.small{
  background:rgba(15,118,110,.08);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .module-card{
    background:linear-gradient(120deg, rgba(15,118,110,.12), rgba(248,250,252,0) 40%), var(--card);
  }
  :root:not([data-theme]) .module-card::before{
    background:linear-gradient(180deg, rgba(15,118,110,.75), rgba(15,118,110,.12));
  }
  :root:not([data-theme]) .module-card .muted.small{
    background:rgba(15,118,110,.08);
  }
}

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-3); padding:var(--space-4); box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease }
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2) }

.btn{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 var(--space-4);
  border-radius:var(--radius-2); border:1px solid transparent; cursor:pointer; text-decoration:none; color:#fff; transition:filter .15s ease, transform .05s ease }
.btn.primary{ background:var(--accent); color:#08131a }
.btn.secondary{ background:var(--accent-weak); color:var(--text) }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--accent-weak) }
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }

.site-header{ position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(4px) }
.site-header .container{ padding:var(--space-2) }
.brand{ text-decoration:none; color:inherit; gap:var(--space-2) }
.brand-logo{ max-height:56px; display:block }
.brand-text{ font-weight:600 }
.header-actions{ gap:var(--space-2); display:flex }
.theme-toggle,.nav-toggle{ height:36px; padding:0 var(--space-3); border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer }
.nav-toggle{ display:none }
.theme-toggle:hover,.nav-toggle:hover{ background:rgba(255,255,255,.04) }
.nav a{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px }
.nav a:hover{ background:rgba(255,255,255,.04) }

/* Mobile nav */
@media (max-width:900px){
  .header-actions{ display:flex }
  .nav-toggle{ display:inline-flex }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); padding:var(--space-3) 4% }
  .nav.open{ display:flex; flex-direction:column; gap:var(--space-2) }
  .nav a{ padding:12px 12px }
}

.hero{ padding:var(--space-9) 0 var(--space-7); background:
  radial-gradient(900px 360px at 65% -180px, rgba(79,209,197,.25), rgba(15,23,42,0) 60%),
  linear-gradient(140deg, rgba(37,99,235,.10), rgba(15,23,42,0) 45%), var(--bg) }
.hero .lead{ color:var(--muted); max-width:700px; font-size:20px }
.hero-inner{ display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:var(--space-5) }
@media (max-width:900px){ .hero-inner{ display:block } }
.cta-row{ margin-top:var(--space-3) }

.hero-statement{
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-3);
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(79,209,197,.08), rgba(15,23,42,0) 50%), var(--card);
  box-shadow:var(--shadow-1);
}
.hero-statement p{ margin-bottom:var(--space-2) }

.section{ padding:var(--space-7) 0; position:relative }
.section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(79,209,197,0), rgba(79,209,197,.35), rgba(79,209,197,0));
  opacity:.35;
}

.pricing{ display:grid; gap:var(--space-3) }
.price-row{ display:flex; gap:var(--space-2); align-items:baseline }
.price{ font-size:40px; font-weight:700 }

.site-footer{ border-top:1px solid var(--line); padding:var(--space-3) 0; margin-top:var(--space-6) }

/* FAQ */
details{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-2); padding:var(--space-3) }
details + details{ margin-top:var(--space-2) }
summary{ cursor:pointer; font-weight:600; outline:none }
summary:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; border-radius:6px }

@media (max-width: 480px){ .brand-logo{ max-height:40px } }

/* Features */
.feature{ display:flex; flex-direction:column }
.feature-icon{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:rgba(79,209,197,.18); color:var(--accent); margin-bottom:var(--space-2) }

/* Mock visual */
.mock{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow-1) }
.mock svg{ display:block; width:100%; height:auto }
.hero-shot{ display:block; width:100%; height:auto; border-radius:8px; background:var(--surface) }
.hero-visual.has-shot .mock svg{ display:none }

/* Hero rotator */
.hero-rotator{ position:relative; width:100%; aspect-ratio:520/340; border-radius:8px; overflow:hidden; background:var(--surface) }
.hero-rotator .hero-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .8s ease }
.hero-rotator .hero-1{ opacity:1 }
.hero-rotator.show-2 .hero-1{ opacity:0 }
.hero-rotator.show-2 .hero-2{ opacity:1 }
.hero-rotator{ cursor:zoom-in }
@media (prefers-reduced-motion: reduce){ .hero-rotator .hero-shot{ transition:none } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px }
.lightbox:not([hidden]){ display:flex }
.lightbox-img{ max-width:95vw; max-height:90vh; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,.55); background:#000 }
.lightbox-close{ position:absolute; top:16px; right:16px; height:40px; width:40px; border-radius:20px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:22px }
.lightbox-close:hover{ background:rgba(0,0,0,.65) }

/* Active nav */
.nav a[aria-current="page"]{ background:rgba(37,99,235,.15) }