:root{
  --bg:#0a0e13; --bg-2:#0d1219; --surface:#121922; --surface-2:#161f2a; --surface-3:#1c2733;
  --border:#233040; --border-soft:#1a2430;
  --text:#e7eef6; --text-dim:#aab7c6; --text-mute:#6b7a8d;
  --accent:#2ee6a6; --accent-2:#13c4c4; --accent-ink:#052b20; --glow:rgba(46,230,166,.16);
  --danger:#ff6b6b; --warn:#ffc15a;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:14px; --r-sm:10px; --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative; min-height:100vh;
}
/* atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, rgba(46,230,166,.14), transparent 60%),
    radial-gradient(48vw 44vh at 8% 4%, rgba(19,196,196,.10), transparent 62%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120vw 100vh at 50% -10%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120vw 100vh at 50% -10%, #000 30%, transparent 78%);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600}
h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.05}
.muted{color:var(--text-dim)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; height:44px; padding:0 20px; border-radius:var(--r-sm);
  font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 6px 24px -8px var(--glow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 30px -8px var(--glow)}
.btn-ghost{background:rgba(255,255,255,.02); border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-sm{height:38px; padding:0 16px; font-size:13.5px}

/* header */
header.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(10,14,19,.72); border-bottom:1px solid var(--border-soft)}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:-.02em}
.brand .mark{width:34px; height:34px; flex:none}
.brand b{background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
nav.main{display:flex; gap:26px; margin-left:14px}
nav.main a{font-size:14px; color:var(--text-dim); transition:.15s}
nav.main a:hover{color:var(--text)}
.topbar .actions{margin-left:auto; display:flex; gap:10px; align-items:center}

/* faq */
.faq{display:flex; flex-direction:column; gap:10px; max-width:760px}
details.acc{border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); overflow:hidden}
details.acc summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:600; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+"; font-family:var(--font-mono); color:var(--accent); font-size:18px; transition:.2s}
details.acc[open] summary::after{transform:rotate(45deg)}
details.acc .body{padding:0 18px 16px; color:var(--text-dim); font-size:14px}

/* cta band */
.cta-band{margin:0 auto; max-width:var(--maxw); }
.cta-inner{background:linear-gradient(135deg,rgba(46,230,166,.10),rgba(19,196,196,.05)); border:1px solid var(--border);
  border-radius:18px; padding:42px; text-align:center}
.cta-inner h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-inner p{color:var(--text-dim); margin:12px auto 24px; max-width:48ch}
.cta-inner .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--border-soft); padding:40px 0; color:var(--text-mute); font-size:13px}
footer .wrap{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
footer nav{display:flex; gap:20px; flex-wrap:wrap}
footer a:hover{color:var(--text)}


section.block{padding:64px 0; border-top:1px solid var(--border-soft)}
.card{background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--border); border-radius:var(--r); padding:22px}

/* ---- content pages (docs / compare / learn) ---- */
:root{--readw:780px}
.doc-hero{padding:56px 0 28px}
.doc-hero .wrap{max-width:var(--readw)}
.doc-hero .crumbs{font-family:var(--font-mono); font-size:12px; color:var(--text-mute); margin-bottom:18px}
.doc-hero .crumbs a:hover{color:var(--accent)}
.doc-hero .crumbs span{margin:0 8px; opacity:.5}
.doc-hero h1{font-size:clamp(2rem,4.6vw,3.1rem); margin:14px 0 0; max-width:22ch}
.doc-hero .lead{color:var(--text-dim); font-size:1.1rem; margin-top:16px; max-width:60ch}
.doc-hero .updated{margin-top:18px; font-family:var(--font-mono); font-size:12px; color:var(--text-mute)}
.doc-hero .updated b{color:var(--text-dim); font-weight:500}
article.doc{max-width:var(--readw); margin:0 auto; padding:8px 24px 48px}
article.doc h2{font-size:1.5rem; margin:44px 0 0; scroll-margin-top:84px; padding-top:24px; border-top:1px solid var(--border-soft)}
article.doc h2:first-child{border-top:0; padding-top:0; margin-top:8px}
article.doc h3{font-size:1.12rem; margin:28px 0 0; color:var(--text)}
article.doc p{margin-top:14px; color:var(--text-dim)}
article.doc p b,article.doc li b,article.doc strong{color:var(--text)}
article.doc a{color:var(--accent); border-bottom:1px solid rgba(46,230,166,.35)}
article.doc a:hover{border-bottom-color:var(--accent)}
article.doc ul,article.doc ol{margin:14px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px}
article.doc li{position:relative; padding-left:26px; color:var(--text-dim); font-size:14.8px}
article.doc ul li::before{content:""; position:absolute; left:3px; top:.6em; width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg,var(--accent),var(--accent-2))}
article.doc ol{counter-reset:li}
article.doc ol li{counter-increment:li}
article.doc ol li::before{content:counter(li); position:absolute; left:0; top:1px; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--accent); width:19px; height:19px; line-height:19px; text-align:center; border-radius:5px; background:rgba(46,230,166,.1)}
article.doc ol.steps li{padding:14px 16px 14px 44px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface)}
article.doc ol.steps li::before{left:14px; top:15px}
article.doc code{font-family:var(--font-mono); font-size:.88em; color:var(--accent); background:rgba(46,230,166,.08); border:1px solid var(--border); border-radius:5px; padding:1px 6px; white-space:nowrap}
article.doc pre{margin-top:14px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--text)}
article.doc pre code{background:none; border:0; padding:0; white-space:pre; color:inherit}
article.doc .note{margin-top:16px; padding:14px 16px; border-left:3px solid var(--accent); background:rgba(46,230,166,.06); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-dim); font-size:14.5px}
article.doc .note.warn{border-left-color:var(--warn); background:rgba(255,193,90,.07)}
article.doc .note b{color:var(--text)}
article.doc .addr{margin-top:16px; display:grid; gap:10px}
article.doc .addr div{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-2); font-size:14px}
article.doc .addr span{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); min-width:150px}
article.doc .tablewrap{overflow-x:auto; margin-top:16px; border:1px solid var(--border); border-radius:var(--r)}
article.doc table{width:100%; border-collapse:collapse; font-size:13.8px; min-width:560px}
article.doc th,article.doc td{text-align:left; padding:11px 14px; vertical-align:top; border-bottom:1px solid var(--border-soft)}
article.doc thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); background:var(--bg-2)}
article.doc tbody tr:last-child td{border-bottom:0}
article.doc td:first-child{color:var(--text); font-weight:600}
article.doc td{color:var(--text-dim)}
article.doc td.y{color:var(--accent)} article.doc td.n{color:var(--text-mute)}
article.doc .faq{margin-top:16px; max-width:none}
article.doc details.acc summary{font-size:14.5px}
article.doc .cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px}
article.doc .cards a.card{display:block; padding:18px 20px; border-bottom:0; color:var(--text)}
article.doc .cards a.card:hover{border-color:var(--accent)}
article.doc .cards a.card h3{margin:0; font-size:1.02rem}
article.doc .cards a.card p{margin-top:6px; font-size:13.5px}
article.doc .cards a.card .eyebrow{display:block; margin-bottom:8px; font-size:10px}
article.doc .verdict{margin-top:18px; padding:20px 22px; border:1px solid var(--accent); border-radius:var(--r); background:linear-gradient(135deg,rgba(46,230,166,.10),rgba(19,196,196,.04))}
article.doc .verdict h3{margin:0}
article.doc .related{margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft)}
article.doc .related h2{border:0; padding:0; margin:0; font-size:1.1rem}
.cta-block{padding-top:0; border-top:0}
@media (max-width:900px){nav.main{display:none}}
@media (max-width:640px){article.doc .cards{grid-template-columns:1fr} .topbar .actions .ghost-cta{display:none} article.doc .addr span{min-width:100%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}