/* Base: design tokens, reset, headings, utilities */
:root{
  --bg:#070C14; --bg2:#0C1524; --panel:#101B2D; --line:#1E2C44; --line2:#2A3B58;
  --ink:#F3F6FA; --muted:#8E9BB2; --dim:#5A6884;
  --gold:#FFC400; --gold-hi:#FFE27A; --gold-lo:#D98200; --steel:#C3CCDA;
  --f-display:"Topo Sans","Arial Narrow",system-ui,sans-serif;
  --f-body:"Topo Sans",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg,canvas{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--bg)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}

/* headings: one definition per level */
h1{font-family:var(--f-display);font-weight:780;font-stretch:72%;font-size:clamp(34px,5.4vw,72px);line-height:.95;letter-spacing:.005em;margin:22px 0 24px;max-width:14ch;text-wrap:balance}
h2{font-family:var(--f-display);font-weight:820;font-stretch:72%;font-size:clamp(28px,3.7vw,48px);line-height:1;margin:14px 0 0;letter-spacing:.01em;text-wrap:balance}
h1,h2,.svc h3,.step h3{text-transform:uppercase}

/* page progress bar, safe-area cover, film grain */
#progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));transform-origin:0 50%;transform:scaleX(0);z-index:20}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.grain{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* utilities */
[hidden]{display:none!important}
@media (min-width:1600px){.wrap{max-width:1360px}}
html.menu-open,html.lock{overflow:hidden}
.sprite{position:absolute;width:0;height:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--gold);color:var(--bg);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:max(12px,env(safe-area-inset-top,0px))}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* cheaper painting on touch devices */
@media (pointer:coarse){.grain{display:none}}