:root{
  --bg:#070709;--bg2:#0c0d11;--surface:#101118;--line:#1b1d26;--line2:#272a36;
  --ink:#f6f7fb;--muted:#8a8fa0;--faint:#595d6e;
  --blue:#3d6bff;--blue2:#6e93ff;--bluedim:rgba(61,107,255,.14);--red:#ff5d6c;--green:#4ade80;
  --disp:"Clash Display","Space Grotesk",Georgia,serif;
  --body:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.blue{color:var(--blue2)}
.topline{height:3px;background:linear-gradient(90deg,var(--blue),var(--blue2))}

nav{position:sticky;top:0;z-index:50;background:rgba(7,7,9,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--ink);flex-shrink:0}
.brand svg{width:30px;height:30px;flex-shrink:0}
.navlinks{display:flex;align-items:center;gap:22px}
.navlinks a{font-size:14.5px;color:var(--muted);transition:color .15s;white-space:nowrap}
.navlinks a:hover,.navlinks a.on{color:var(--ink)}
.navlinks .cta{font-family:var(--disp);font-weight:600;font-size:14px;color:#fff!important;background:var(--blue);padding:10px 18px;border-radius:3px;box-shadow:0 6px 22px var(--bluedim)}
.navlinks .cta:hover{background:var(--blue2)}
.burger{display:none;width:44px;height:40px;border:1px solid var(--line2);background:none;border-radius:4px;align-items:center;justify-content:center;flex-shrink:0}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);transition:.2s}
.burger span{position:relative}.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
nav.open .burger span{background:transparent}
nav.open .burger span::before{top:0;transform:rotate(45deg)}
nav.open .burger span::after{top:0;transform:rotate(-45deg)}
@media(max-width:960px){
  .burger{display:inline-flex}
  .navlinks{position:fixed;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;background:#0a0a0d;border-bottom:1px solid var(--line);padding:8px 0 16px;transform:translateY(-145%);transition:transform .26s ease;z-index:49}
  nav.open .navlinks{transform:none}
  .navlinks a{padding:15px 28px;font-size:17px;color:var(--ink)}
  .navlinks .cta{margin:12px 28px 0;text-align:center}
}

section{padding:clamp(64px,9vw,110px) 0;border-bottom:1px solid var(--line)}
.seclabel{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.seclabel .num{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--blue2)}
.seclabel .ttl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
h1.hero-title{font-family:var(--disp);font-weight:700;font-size:clamp(42px,8vw,96px);line-height:.94;letter-spacing:-.02em;word-spacing:.05em;max-width:14ch}
h1.hero-title .b{color:var(--blue2)}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4.5vw,52px);line-height:1.06;letter-spacing:-.015em;word-spacing:.04em;max-width:22ch}
h2 .b{color:var(--blue2)}
h3{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.5vw,26px);margin-bottom:8px}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--muted);max-width:58ch}
.lede b,.lede strong{color:var(--ink);font-weight:500}
.btn,a.btn,button.btn{font-family:var(--disp);font-weight:600;font-size:15px;padding:14px 24px;border-radius:3px;border:1px solid transparent;transition:.16s;display:inline-flex;align-items:center;gap:8px;text-align:center}
.btn-fill{background:var(--blue);color:#fff!important;box-shadow:0 8px 26px var(--bluedim)}
.btn-fill:hover{background:var(--blue2);transform:translateY(-1px)}
.btn-line{background:transparent;border-color:var(--line2);color:var(--ink)!important}
.btn-line:hover{border-color:var(--blue2);color:var(--blue2)!important}

.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);padding:7px 14px;border-radius:999px;background:rgba(7,7,9,.55)}
.kick .pulse{width:7px;height:7px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 0 rgba(110,147,255,.6);animation:pp 2s infinite}
@keyframes pp{0%{box-shadow:0 0 0 0 rgba(110,147,255,.5)}70%{box-shadow:0 0 0 9px rgba(110,147,255,0)}100%{box-shadow:0 0 0 0 rgba(110,147,255,0)}}

.hero-home{position:relative;border-bottom:1px solid var(--line);overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:center}
.hero-home #grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;pointer-events:none}
.hero-home .glow{position:absolute;z-index:0;width:60vw;height:60vw;max-width:780px;max-height:780px;right:-12%;top:-18%;background:radial-gradient(circle,var(--bluedim),transparent 62%);pointer-events:none}
.hero-home .wrap{position:relative;z-index:2;padding:80px 28px}

.ticker{border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-block;padding:15px 0;animation:scroll 28s linear infinite}
.ticker span{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--muted);margin:0 24px}
.ticker .d{color:var(--blue2)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.doors{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:40px}
@media(max-width:900px){.doors{grid-template-columns:1fr}}
a.door{display:block;padding:clamp(28px,4vw,40px);background:var(--surface);transition:background .2s;color:inherit}
a.door:hover{background:var(--bg2)}
a.door+a.door{border-left:1px solid var(--line)}
@media(max-width:900px){a.door+a.door{border-left:none;border-top:1px solid var(--line)}}
.door .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);margin-bottom:14px}
.door p{color:var(--muted);font-size:16px;margin:12px 0 22px;max-width:36ch}
.door .arrow{color:var(--blue2);font-size:14px;font-weight:600}

.statusbar{border-bottom:1px solid var(--line);background:var(--bg2);padding:16px 0}
.statusbar .wrap{display:flex;flex-wrap:wrap;gap:20px 28px}
.statusbar .item{font-size:14px;color:var(--muted)}
.statusbar .item b{color:var(--ink);font-weight:500}

.phases{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:32px}
@media(max-width:900px){.phases{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.phases{grid-template-columns:1fr}}
.phase{padding:24px 22px;border-right:1px solid var(--line);background:var(--surface)}
.phase:last-child{border-right:none}
@media(max-width:900px){
  .phase{border-right:none;border-bottom:1px solid var(--line)}
  .phase:nth-child(2n){border-right:none}
  .phase:last-child{border-bottom:none}
}
.phase .ph{font-family:var(--mono);font-size:11px;color:var(--blue2);margin-bottom:8px}
.phase h3{font-size:18px;margin-bottom:6px}
.phase p{font-size:14.5px;color:var(--muted);line-height:1.45}
.phase.now{background:var(--bluedim)}

form.wl{display:flex;gap:10px;max-width:520px;flex-wrap:wrap;width:100%}
form.wl input{flex:1;min-width:220px;padding:15px 16px;border-radius:3px;border:1px solid var(--line2);background:#090a0e;color:var(--ink);font-family:var(--body);font-size:16px}
form.wl input:focus{outline:none;border-color:var(--blue)}
form.wl button[disabled]{opacity:.6}
.msg{margin-top:14px;font-weight:500;min-height:22px;font-size:15px;width:100%}
.msg.ok{color:var(--blue2)}.msg.err{color:var(--red)}

.codeblock{background:#090a0e;border:1px solid var(--line2);border-radius:4px;padding:18px 20px;font-family:var(--mono);font-size:13px;line-height:1.55;color:#c5c9d8;overflow-x:auto;margin:18px 0;white-space:pre-wrap}
.codeblock .cm{color:var(--faint)}

.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--disp);font-weight:600;font-size:clamp(17px,2.2vw,20px);padding:20px 0;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue2)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 22px;max-width:72ch;font-size:16px}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:5px;margin-top:24px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--bg2)}
tbody td:first-child{color:var(--muted)}
td.good{color:var(--blue2);font-weight:600}
td.no{color:var(--faint)}
tbody tr:last-child td{border-bottom:none}
th:last-child,td:last-child{background:var(--bluedim)}

.page-hero{padding:clamp(56px,8vw,100px) 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .glow{position:absolute;width:50vw;height:50vw;max-width:600px;right:-10%;top:-30%;background:radial-gradient(circle,var(--bluedim),transparent 65%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .lede{margin-top:20px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}}
.card{border:1px solid var(--line);border-radius:5px;padding:28px;background:var(--surface)}
.card p{color:var(--muted);font-size:16px;margin-top:8px}
.card h3{font-family:var(--disp)}

.steps{margin-top:24px}
.step{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:none}
.step .n{font-family:var(--disp);font-weight:700;color:var(--blue2);font-size:16px;min-width:28px;flex-shrink:0}
.step p{color:var(--muted);font-size:16px}.step p b{color:var(--ink);font-weight:500}

.chat-demo{border:1px solid var(--line);border-radius:5px;background:var(--bg2);padding:28px;display:flex;flex-direction:column;gap:12px}
.bubble{border:1px solid var(--line2);border-radius:4px;padding:13px 15px;font-size:15px;color:var(--muted);background:#090a0e;max-width:88%}
.bubble.me{border-color:var(--blue);color:var(--ink);align-self:flex-end}
.bubble.ai{align-self:flex-start}

.cta-band{text-align:center}
.cta-band h2{margin:0 auto;max-width:20ch}
.cta-band .lede{margin:16px auto 0}

.prose{color:var(--muted);font-size:17px;line-height:1.75;max-width:72ch;margin-top:28px}
.prose p{margin:0 0 1.25em}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.25em}
.prose li{margin-bottom:.55em}
.prose li:last-child{margin-bottom:0}
.prose h3{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);margin:36px 0 14px;line-height:1.25}
.prose h3:first-child{margin-top:0}
.prose strong,.prose b{color:var(--ink);font-weight:500}
.prose em{color:var(--faint)}
.prose code{font-family:var(--mono);font-size:.88em;color:var(--blue2);background:rgba(61,107,255,.08);padding:2px 6px;border-radius:3px}
.prose a{color:var(--blue2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(110,147,255,.35)}
.prose a:hover{text-decoration-color:var(--blue2)}

.doc-pills{margin-top:28px;border-top:1px solid var(--line)}
.doc-pill{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.doc-pill:last-child{border-bottom:none}
.doc-pill .idx{font-family:var(--disp);font-size:28px;color:var(--blue2);line-height:1}
.doc-pill h3{margin-bottom:0}
.doc-pill p{color:var(--muted);font-size:16px;margin-top:8px;line-height:1.55;max-width:62ch}
.doc-pill p b{color:var(--ink);font-weight:500}

.doc-toc-bar{padding:20px 0;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:72px;z-index:40}
.doc-toc-bar .wrap{display:flex;flex-wrap:wrap;gap:8px}
.doc-toc-bar a{font-size:13px;color:var(--muted);padding:8px 14px;border:1px solid var(--line2);border-radius:3px;transition:.15s;white-space:nowrap}
.doc-toc-bar a:hover,.doc-toc-bar a.on{color:var(--ink);border-color:var(--blue2)}
@media(max-width:960px){.doc-toc-bar{display:none}}

/* Doc hero + tabs only */
.doc-hero.page-hero{padding:clamp(44px,6vw,72px) 0}
.doc-hero .hero-title{max-width:20ch;font-size:clamp(34px,5.5vw,56px);line-height:1.02;margin-top:16px!important}
.doc-hero .lede{max-width:52ch;font-size:17px;line-height:1.65;margin-top:16px}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.doc-meta span{display:flex;align-items:center;gap:6px}
.doc-meta b{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.doc-tabs{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.doc-tabs a{padding:9px 18px;border:1px solid var(--line2);border-radius:3px;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted);transition:.15s}
.doc-tabs a:hover{color:var(--ink);border-color:var(--blue2)}
.doc-tabs a.on{background:var(--blue);border-color:var(--blue);color:#fff!important;box-shadow:0 6px 22px var(--bluedim)}
.doc-progress{position:fixed;top:72px;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue2));width:0;z-index:51;pointer-events:none}
.doc-cta-band{padding:clamp(64px,9vw,110px) 0;text-align:center;border-bottom:1px solid var(--line)}
.doc-cta-band h2{max-width:none;margin:0 auto}
.doc-cta-band .lede{margin:20px auto 0}
.doc-cta-band .actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.doc-cta-band .disc{margin-top:28px;font-size:12px;color:var(--faint);max-width:56ch;margin-left:auto;margin-right:auto}

footer{padding:56px 0 68px;border-top:1px solid var(--line)}
.footgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;align-items:flex-start}
.footcols{display:flex;gap:40px;flex-wrap:wrap}
.footcol h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.footcol a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:8px}
.footcol a:hover{color:var(--ink)}
.disc{margin-top:32px;color:var(--faint);font-size:12.5px;max-width:80ch;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .kick .pulse{animation:none}
  .ticker .run{animation:none}
  html{scroll-behavior:auto}
}
