:root{
  --bg:#070B14;--panel-bg:#0E1626;--sidebar-bg:#0A0F1A;--border:#1B2942;--border-light:#2A3B5C;
  --text:#E8EDF6;--text-dim:#8B9BB8;--text-muted:#5B6B89;--primary:#3DA8FF;--primary-hover:#5DB8FF;
  --primary-bg:rgba(61,168,255,.1);--success:#5EEAD4;--glass:rgba(14,22,38,.68);
}
[data-theme="light"]{
  --bg:#f5f4f1;--panel-bg:#ffffff;--sidebar-bg:#eae7e0;--border:#d4d2c8;--border-light:#e0ded4;
  --text:#1a1c23;--text-dim:#555b6e;--text-muted:#7a8299;--primary:#0284c7;--primary-hover:#0369a1;
  --primary-bg:rgba(2,132,199,.1);--success:#059669;--glass:rgba(255,255,255,.72);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
.mono{font-family:'SF Mono','Consolas','Monaco',monospace}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.glass{background:var(--glass);border:1px solid color-mix(in srgb,var(--border-light) 60%,transparent);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}

/* top navigation */
.topbar{position:sticky;top:0;z-index:20;background:var(--sidebar-bg);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;row-gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:14.5px}
.brand img{width:22px;height:22px;border-radius:5px}
.topbar-links{display:flex;gap:22px}
.topbar-links a{font-size:13px;color:var(--text-dim)}
.topbar-links a:hover{color:var(--text)}
.topbar-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.topbar-actions .signin{font-size:13px;color:var(--text-dim)}
.topbar-actions .signin:hover{color:var(--text)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--border-light);background:var(--glass);color:var(--text-dim);cursor:pointer;flex-shrink:0}
.theme-toggle:hover{color:var(--text);border-color:var(--primary)}
.theme-toggle svg{width:15px;height:15px}

.content{padding:70px 56px 30px;max-width:900px;margin:0 auto}
section{padding-bottom:88px;scroll-margin-top:24px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--text-muted);margin-bottom:14px}

/* hero */
/* .hero-split is opt-in (index.html only) so this grid can't leak onto other pages' plain .hero sections, like blog/index.html's */
.hero.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(2rem,3.8vw,3rem);line-height:1.14;letter-spacing:-.02em;margin:0}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--primary),var(--success));-webkit-background-clip:text;color:transparent}
.hero p{max-width:520px;margin:20px 0 28px;color:var(--text-dim);font-size:15.5px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:12px;border:1px solid var(--border-light);font-weight:650;font-size:13.5px}
.btn.primary{background:var(--primary);color:#04141F;border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.secondary{background:var(--glass)}
.btn.secondary:hover{border-color:var(--primary)}
.btn.sm{height:38px;padding:0 16px;font-size:12.5px;border-radius:10px}

.hero-visual{width:100%}
.hero-visual svg{width:100%;height:auto;display:block}

h2{font-size:23px;letter-spacing:-.01em;margin:0}
.lead{color:var(--text-dim);font-size:13.5px;max-width:520px;margin:10px 0 24px}

.footer-inner{font-size:11px;color:var(--text-muted);display:flex;gap:14px;flex-wrap:wrap}
.footer-inner a:hover{color:var(--text-dim)}

@media(max-width:900px){
  .content{padding:40px 22px 10px;max-width:none}
  .hero.hero-split{grid-template-columns:1fr;gap:30px}
  .hero-visual{max-width:440px;margin:0 auto}
}
@media(max-width:680px){
  .topbar-links{display:none}
  .topbar-inner{padding:14px 20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}