:root{
  --bg:#0a0e0d;
  --bg-2:#0f1513;
  --surface:#131c19;
  --line:#1f2b27;
  --line-2:#2c3d37;
  --text:#e8ede9;
  --muted:#93a39c;
  --dim:#64746d;
  --green:#2ee6a6;
  --green-2:#5cf0bd;
  --green-ink:#04130d;
  --green-wash:rgba(46,230,166,.10);
  --amber:#f2b33d;
  --red:#ff6b5e;
  --display:"Bricolage Grotesque", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap:1120px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--green);color:var(--green-ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(10,14,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-14deg) scale(1.08)}
.brand small{font:500 11px var(--mono);color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{text-decoration:none;color:var(--muted);font-size:14px;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav nav a:hover{color:var(--text)}
.nav nav a:hover::after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;border-radius:9px;padding:13px 20px;font-size:15px;border:0;cursor:pointer;font-family:var(--sans);transition:transform .18s var(--ease),background .18s,box-shadow .25s,border-color .18s;position:relative;overflow:hidden}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--green);color:var(--green-ink);box-shadow:0 0 0 0 rgba(46,230,166,.35)}
.btn-primary:hover{background:var(--green-2);box-shadow:0 8px 28px -8px rgba(46,230,166,.55);transform:translateY(-1px)}
.btn-primary .arrow{transition:transform .2s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-ghost{color:var(--text);background:transparent;border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--muted)}

/* legal / simple pages */
.page{padding:72px 0 96px}
.page h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,5vw,56px);letter-spacing:-.03em;line-height:1;margin:0 0 12px}
.page .updated{font:13px var(--mono);color:var(--dim);margin:0 0 40px}
.page .prose{max-width:68ch}
.page .prose h2{font-family:var(--display);font-size:22px;letter-spacing:-.01em;margin:40px 0 8px}
.page .prose p,.page .prose li{color:var(--muted)}
.page .prose strong{color:var(--text);font-weight:600}
.page .prose a{color:var(--green)}

footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--dim);font-size:13px}
footer .wrap{display:grid;gap:16px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}