:root{--ink:#111;--dim:#6b6b6b;--faint:#b5b5b5;--line:#e8e8e6;--paper:#fff;--wash:#f7f7f5;--hdr:rgba(255,255,255,.86);--onink:#fff;--green:#00c805;--mag:#e4007c;--yel:#ffd100;--lime:#ccff00;--forest:#002a08;color-scheme:light}
:root[data-theme="dark"]{--ink:#f1f1ee;--dim:#9b9b97;--faint:#5c5c59;--line:#27272a;--paper:#0d0d0f;--wash:#151517;--hdr:rgba(13,13,15,.82);--onink:#0d0d0f;color-scheme:dark}
body{transition:background .25s,color .25s}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,canvas{display:block}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}
.eyebrow{font:12px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.eyebrow .g{color:var(--green)}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--hdr);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;text-decoration:none}
.mark{display:grid;grid-template-columns:repeat(3,6px);gap:1px}
.mark i{width:6px;height:6px;background:var(--green)}.mark i:nth-child(2){background:var(--ink)}.mark i:nth-child(4){background:var(--yel)}.mark i:nth-child(6){background:var(--mag)}.mark i:nth-child(8){background:var(--lime)}
nav.links{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--dim)}
nav.links a{text-decoration:none}nav.links a:hover,nav.links a.on{color:var(--ink)}
.pill{border:1px solid var(--ink);color:var(--ink)!important;padding:7px 15px;border-radius:999px;font-weight:500}
.pill:hover{background:var(--ink);color:var(--onink)!important}
@media (max-width:760px){nav.links .hide-s{display:none}nav.links{gap:14px}}

/* buttons */
.btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .1s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:var(--onink)}
.btn.green{background:var(--green);color:#fff}
.btn.line{border:1px solid var(--line)}.btn.line:hover{border-color:var(--ink)}
.btn[disabled]{background:#d7d7d7;cursor:default;transform:none}
.btn.green[disabled]{background:#cdeccd}
.arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(3px)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* section heads */
.sec{padding:110px 0 0}
.sec h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.05;margin:12px 0 14px;font-weight:700}
.sec p.sub{color:var(--dim);font-size:17px;max-width:620px;margin:0}
@media (max-width:640px){.sec{padding-top:72px}}

footer.bottom{border-top:1px solid var(--line);margin-top:110px}
footer.bottom .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;padding-bottom:28px;font-size:13px;color:var(--dim)}
footer.bottom nav{display:flex;gap:20px}
footer.bottom a{text-decoration:none}footer.bottom a:hover{color:var(--ink)}

/* theme toggle */
.theme{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink)}
.theme:hover{border-color:var(--ink)}
.theme svg{width:17px;height:17px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
.blk{background:#111;outline:1px solid var(--line)}
:root[data-theme="dark"] .btn[disabled]{background:#2c2c2f;color:#6d6d6d}
:root[data-theme="dark"] .btn.green[disabled]{background:#133d16;color:#5e8d61}
:root[data-theme="dark"] .blk{outline-color:#6a6a66}

/* keyboard users can see where they are */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.pill:focus-visible,.theme:focus-visible{outline-offset:3px}

/* ---------- header v2 ---------- */
header.top{transition:box-shadow .25s,background .25s}
header.top .wrap{height:68px;gap:18px;transition:height .25s}
header.top.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,0,0,.06)}
header.top.scrolled .wrap{height:56px}
:root[data-theme="dark"] header.top.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,0,0,.4)}
.brand{gap:11px;font-size:19px;letter-spacing:-.02em}
.hstatus{margin-right:auto;display:inline-flex;align-items:center;gap:8px;font:500 12px "JetBrains Mono",monospace;letter-spacing:.02em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.hstatus:hover{border-color:var(--ink);color:var(--ink)}
.hstatus i{width:8px;height:8px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 0 rgba(255,209,0,.6);animation:vc-ping 1.8s infinite}
.hstatus.live i{background:var(--green);box-shadow:0 0 0 0 rgba(0,200,5,.6)}
.hstatus.live{color:var(--ink)}
@keyframes vc-ping{0%{box-shadow:0 0 0 0 rgba(0,200,5,.5)}70%{box-shadow:0 0 0 7px rgba(0,200,5,0)}100%{box-shadow:0 0 0 0 rgba(0,200,5,0)}}
nav.links{gap:6px}
.navtext{display:flex;gap:4px;margin-right:6px}
.navtext a{padding:7px 11px;border-radius:999px;transition:background .2s,color .2s}
.navtext a:hover{background:var(--wash);color:var(--ink)}
.navtext a.on{color:var(--ink);background:var(--wash)}
nav.links .icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);transition:border-color .2s}
nav.links .icon:hover{border-color:var(--ink)}
nav.links .icon svg{width:15px;height:15px}
.connect{display:inline-flex;align-items:center;gap:8px;margin-left:4px}
.connect .cdot{display:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.connect.on{border-color:var(--line);background:var(--wash);font-family:"JetBrains Mono",monospace;font-size:13px}
.connect.on .cdot{display:inline-block}
.connect.on:hover{background:var(--ink)}
@media (max-width:980px){.navtext{display:none}}
@media (max-width:560px){.hstatus{display:none!important}.brand{font-size:17px;gap:9px}}
@media (max-width:640px){.hide-s{display:none}}
@media (max-width:420px){header.top .wrap{gap:8px}}

nav.links .icon.os svg{width:22px;height:22px}
@media (max-width:420px){nav.links{gap:5px}nav.links .icon,.theme{width:34px;height:34px}.connect{padding:7px 12px;margin-left:2px}}
@media (max-width:350px){nav.links .icon.os{display:none}}