:root{
  --bg:#0e0f11;
  --surface:#16181c;
  --elevated:#1e2128;
  --line:#2a2d35;
  --ink:#f0f1f3;
  --muted:#8b8f9a;
  --faint:#55596a;
  --inverse:#0e0f11;
  --accent:#3ecf68;
  --accent-hover:#5ad783;
  --accent-press:#2fb558;
  --accent-dim:rgba(62,207,104,.15);
  --accent-glow:rgba(62,207,104,.30);
  --warning:#f5a524;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:9999px;
  --maxw:1080px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--accent)}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--inverse)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:480px){.wrap{padding:0 16px}}
.eyebrow{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* header */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
@media(max-width:720px){.nav-links .opt{display:none}}
header{transition:box-shadow .25s}
header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);
     font-size:15px;font-weight:600;text-decoration:none;height:52px;padding:0 24px;border-radius:var(--r-lg);
     transition:background .15s,color .15s,box-shadow .15s,transform .1s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--inverse);box-shadow:0 0 24px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press);box-shadow:none}
.btn-ghost{border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{background:var(--elevated);color:var(--ink)}
.btn-sm{height:38px;padding:0 16px;font-size:13px;border-radius:var(--r-md)}
.btn[aria-disabled="true"]{pointer-events:none}

/* footer */
footer{padding:40px 0 52px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .legal{font-size:12px;color:var(--faint);letter-spacing:.03em}
.foot-links{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.foot-links a{font-size:13px;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}