:root{
  /* Base tokens */
  --bg: #0b0f14;
  --surface: #0f141b;
  --card: #121923;
  --line: #1f2a38;
  --text: #eaf1fb;
  --muted: #9fb2cc;
  --brand: #5b8dff;
  --brand-2: #66f2c8;
  --accent: #ffd166;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --container: min(1180px, 92vw);
  --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 36px; --space-6: 56px;
  --fs-xs:.9rem; --fs-s:1rem; --fs-m:1.125rem; --fs-l:clamp(1.3rem, 2.1vw, 1.6rem);
  --fs-h1: clamp(2.4rem, 5.6vw, 3.8rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.2rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.5rem);
  --focus: 0 0 0 3px rgba(91,141,255,.35);
}
/* Light theme */
:root.light{
  --bg: #f7fafc;
  --surface: #ffffff;
  --card: #ffffff;
  --line: #e6e9ee;
  --text: #0d1117;
  --muted: #5f6b7a;
  --brand: #2b6cff;
  --brand-2: #00c8a7;
  --accent: #dd9b00;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(800px 360px at 15% -120px, rgba(102,242,200,.12), transparent 60%),
    radial-gradient(900px 420px at 90% -120px, rgba(91,141,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
  line-height: 1.7;
}
.container{width:var(--container);margin-inline:auto}
img{max-width:100%;display:block}
.lead{color:var(--muted);font-size:var(--fs-m)}
h1{font-size:var(--fs-h1);letter-spacing:-.02em;margin:0 0 var(--space-2)}
h2{font-size:var(--fs-h2);letter-spacing:-.01em;margin:0 0 var(--space-2)}
h3{font-size:var(--fs-h3);margin:0 0 var(--space-1)}
/* Header */
.header{position:sticky;top:0;z-index:40;background:color-mix(in oklab, var(--bg) 85%, transparent);backdrop-filter: blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 2vw}
.brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-weight:800}
.brand__logo{width:28px;height:28px}
.nav__links{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav__links a{color:var(--text);text-decoration:none;opacity:.9}
.nav__links a:hover{opacity:1}
.nav__cta{display:flex;gap:10px}
.nav__toggle{display:none;background:transparent;border:0;cursor:pointer}
.nav__bar{width:22px;height:2px;background:color-mix(in oklab, var(--text) 80%, transparent);display:block;margin:5px 0}
@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:64px 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.25s;padding:var(--space-3) 4vw;flex-direction:column;align-items:flex-start}
  .nav__links.open{transform:translateY(0)}
}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:999px;padding:12px 18px;font-weight:800;box-shadow:var(--shadow);transform:translateZ(0)}
.btn--brand{background:linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 70%, #9cc3ff)) ;color:#061225}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:hover{transform:translateY(-1px)}
.btn--sm{padding:8px 12px;font-size:.95rem}
/* Hero */
.hero{padding:var(--space-6) 0 var(--space-4);}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-4);align-items:end}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.badges{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);list-style:none;margin:var(--space-2) 0 0;padding:0}
/* Social proof */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in oklab, var(--surface) 70%, transparent);}
.proof__row{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);align-items:center;padding:var(--space-3) 0}
.proof__logo{opacity:.8;filter:grayscale(100%);transition:.2s}
.proof__logo:hover{opacity:1;filter:none}
@media (max-width:900px){.proof__row{grid-template-columns:repeat(3,1fr)}}
/* Sections */
.section{padding:var(--space-6) 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.kpis{display:flex;gap:10px;flex-wrap:wrap}
.kpi{background:color-mix(in oklab, var(--brand) 15%, transparent);border:1px solid color-mix(in oklab, var(--brand) 30%, var(--line));padding:8px 10px;border-radius:999px;color:color-mix(in oklab, var(--brand) 80%, #fff)}
/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);background:var(--surface)}
.step__n{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg, var(--brand-2), var(--brand));color:#072036;font-weight:900;margin-bottom:var(--space-2)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
/* Content hub */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:var(--space-2) 0}
.chip{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}
.chip.is-active{outline:2px solid color-mix(in oklab, var(--brand) 70%, transparent)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media (max-width:1000px){.cards{grid-template-columns:1fr}}
/* Forms */
label{display:grid;gap:6px;margin:10px 0}
input, textarea, select{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:12px;border-radius:12px;outline:none}
input:focus, textarea:focus, select:focus{box-shadow:var(--focus);border-color:color-mix(in oklab, var(--brand) 60%, #2a4)}
.hint{color:var(--muted);font-size:.95rem}
/* Footer */
.footer{border-top:1px solid var(--line);background:color-mix(in oklab, var(--surface) 80%, transparent)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-3);padding:var(--space-4) 0}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{color:var(--text);text-decoration:none}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr}}

/* Theme toggle */
.theme-toggle{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 10px;cursor:pointer}
.theme-toggle input{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;outline:none}
.theme-toggle input::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.theme-toggle input:checked{background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.theme-toggle input:checked::after{left:19px}