
:root{
  --ink:#05070d;        /* page night */
  --night:#0b1220;      /* deep panel */
  --slate:rgba(96,112,150,.20);   /* deck's translucent card */
  --slate-line:rgba(148,168,210,.22);
  --sky:#a7c4ff;        /* deck headline blue */
  --sky-deep:#6f9bf0;
  --gold:#e8b64c;       /* deck category gold */
  --paper:#e9edf5;
  --muted:#98a3b8;
  --radius:14px;
  --disp:'Sora',sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* ── starfield: two ultra-subtle layers, deck texture without noise ── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(200,215,255,.5),transparent 55%),
    radial-gradient(1px 1px at 78% 8%,rgba(232,182,76,.55),transparent 55%),
    radial-gradient(1.5px 1.5px at 88% 62%,rgba(200,215,255,.4),transparent 55%),
    radial-gradient(1px 1px at 32% 82%,rgba(200,215,255,.35),transparent 55%),
    radial-gradient(1px 1px at 55% 38%,rgba(232,182,76,.35),transparent 55%),
    radial-gradient(1.2px 1.2px at 8% 65%,rgba(200,215,255,.3),transparent 55%),
    radial-gradient(1px 1px at 66% 88%,rgba(200,215,255,.35),transparent 55%),
    radial-gradient(900px 500px at 85% -10%,rgba(60,90,170,.16),transparent 70%),
    radial-gradient(700px 500px at -10% 110%,rgba(60,90,170,.10),transparent 70%);
}
main,header,footer{position:relative;z-index:1}

/* ── verification seal: the signature ── */
.seal{position:relative;width:64px;height:64px;flex:none}
.seal .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--gold) 0 12%,transparent 12% 22%,var(--gold) 22% 34%,transparent 34% 44%,var(--gold) 44% 56%,transparent 56% 66%,var(--gold) 66% 78%,transparent 78% 88%,var(--gold) 88% 100%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);
  animation:spin 26s linear infinite}
.seal .tri{position:absolute;inset:14px;background:linear-gradient(160deg,var(--sky) 0%,var(--sky-deep) 55%,#33529c 100%);
  clip-path:polygon(50% 6%,96% 90%,4% 90%)}
.seal .tri::after{content:"";position:absolute;inset:0;background:var(--ink);
  clip-path:polygon(50% 34%,74% 78%,26% 78%)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal .ring{animation:none}}

/* ── nav ── */
header{position:sticky;top:0;background:rgba(5,7,13,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(148,168,210,.14)}
.nav{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.brand .seal{width:38px;height:38px}
.brand .seal .tri{inset:8px}
.wordmark{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.12em}
.wordmark b{color:var(--sky);font-weight:800}
.wordmark small{display:block;font-family:var(--body);font-weight:600;font-size:8.5px;letter-spacing:.34em;color:var(--gold);margin-top:1px}
nav.links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:8px 11px;border-radius:8px;letter-spacing:.01em}
nav.links a:hover{color:var(--paper);background:rgba(148,168,210,.10)}
nav.links a.active{color:var(--gold)}
nav.links a.cta{color:var(--ink);background:var(--gold);margin-left:6px}
nav.links a.cta:hover{background:#f2c766;color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--slate-line);
  color:var(--paper);border-radius:8px;padding:8px 12px;font-size:16px;cursor:pointer}
@media(max-width:940px){
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(5,7,13,.97);
    flex-direction:column;padding:10px 18px 18px;border-bottom:1px solid rgba(148,168,210,.14)}
  nav.links.open{display:flex}
  nav.links a{padding:12px;font-size:15px}
  .burger{display:block}
}

/* ── layout atoms ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
section.page{display:block;padding:0 0 90px}
section.page.show{display:block;animation:pagein .35s ease}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){section.page.show{animation:none}}
.eyebrow{font-weight:700;font-size:11.5px;letter-spacing:.30em;color:var(--gold);text-transform:uppercase}
h1{font-family:var(--disp);font-weight:800;color:var(--sky);line-height:1.12;
  font-size:clamp(34px,5.4vw,58px);letter-spacing:-.01em;margin:14px 0 18px}
h2{font-family:var(--disp);font-weight:700;color:var(--sky);font-size:clamp(24px,3.2vw,34px);margin:0 0 14px}
h3{font-family:var(--disp);font-weight:600;color:var(--gold);font-size:17px;margin:0 0 6px;letter-spacing:.01em}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--paper);max-width:64ch}
.sub{color:var(--muted);max-width:70ch}
.card{background:var(--slate);border:1px solid var(--slate-line);border-radius:var(--radius);padding:22px 24px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g2,.g3,.g4{grid-template-columns:1fr}}
.btn{display:inline-block;font-weight:700;font-size:15px;text-decoration:none;border-radius:10px;
  padding:14px 24px;letter-spacing:.01em;cursor:pointer;border:0}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:#f2c766}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--slate-line)}
.btn.ghost:hover{border-color:var(--sky);color:var(--sky)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(232,182,76,.4);
  padding:5px 11px;border-radius:99px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
ul.tick{list-style:none}
ul.tick li{padding:5px 0 5px 26px;position:relative;color:var(--paper)}
ul.tick li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:9px;
  background:var(--gold);clip-path:polygon(50% 0,100% 90%,0 90%)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--slate-line),transparent);margin:54px 0}
.pagehead{padding:74px 0 40px}
.note{font-size:12.5px;color:var(--muted);border-left:3px solid var(--gold);padding:8px 12px;background:rgba(232,182,76,.06);border-radius:0 8px 8px 0}

/* ── hero ── */
.hero{padding:92px 0 70px;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
@media(max-width:940px){.hero{grid-template-columns:1fr;padding-top:56px}}
.hero .seal{width:min(300px,64vw);height:min(300px,64vw);margin:0 auto}
.hero .seal .tri{inset:16%}
.hero .eyebrow,.hero h1,.hero .lede,.hero .ctas{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
.hero h1{animation-delay:.12s}.hero .lede{animation-delay:.24s}.hero .ctas{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .eyebrow,.hero h1,.hero .lede,.hero .ctas{opacity:1;transform:none;animation:none}}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.statline{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;color:var(--muted);font-size:13.5px}
.statline b{display:block;font-family:var(--disp);color:var(--paper);font-size:20px;font-weight:700}

/* ── steps (genuine sequence → numbers earn their place) ── */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(148,168,210,.12)}
.step:last-child{border-bottom:0}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--disp);font-weight:700;color:var(--gold);font-size:20px;padding-top:2px}

/* ── form ── */
form .grid{gap:14px}
label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;background:rgba(5,7,13,.6);border:1px solid var(--slate-line);
  border-radius:10px;color:var(--paper);padding:13px 14px;font-family:var(--body);font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:transparent}
textarea{min-height:130px;resize:vertical}
.formok{display:none;text-align:center;padding:40px 20px}
.formok .seal{margin:0 auto 18px}

/* ── footer ── */
footer{border-top:1px solid rgba(148,168,210,.14);padding:36px 0 46px;color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{color:var(--muted)}footer a:hover{color:var(--sky)}
a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
