/* ============ Reset (mirrors the artifact skeleton, needed on every sub-page) ============ */
:root{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  --bg:#09080a;
  --bg-alt:#0c0a10;
  --panel:#120f17;
  --panel-2:#17131e;
  --line:#2d2738;
  --line-soft:#1b1624;
  --bronze:#68558a;
  --bronze-dim:#473b5c;
  --gold:#a88cd9;
  --gold-bright:#ccb5f4;
  --red:#9c2424;
  --red-dark:#3d0f0f;
  --red-bright:#d1453f;
  --blue:#2b52ab;
  --blue-dark:#0d244f;
  --violet:#7c3fd1;
  --teal:#219478;
  --ink:#e1daec;
  --ink-dim:#958da4;
  --ink-faint:#635c6f;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
  --radius:14px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:"Exo 2",Georgia,serif;font-weight:700;margin:0;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:20px}
@media(min-width:900px){.wrap{padding-inline:5vw}}
section{padding-block:clamp(52px,8vw,104px)}
.eyebrow{
  font-family:"Chakra Petch",monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.num{font-family:"Chakra Petch",monospace;font-variant-numeric:tabular-nums}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:8px;font-family:"Chakra Petch",monospace;
  font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,#866ab8);
  color:#1b1624;box-shadow:0 10px 26px -10px rgba(168,140,217,.55),inset 0 1px 0 rgba(255,255,255,.4);
  border:1px solid #c8b1f0;
}
.btn-gold:hover{filter:brightness(1.08);box-shadow:0 14px 32px -10px rgba(168,140,217,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-outline{
  background:rgba(255,255,255,.02);
  border:1px solid var(--bronze);color:var(--gold-bright);
}
.btn-outline:hover{background:rgba(168,140,217,.08);border-color:var(--gold)}
.btn-sm{padding:10px 18px;font-size:.78rem}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ============ Header ============ */
#site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(9,8,10,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .2s ease,background .2s ease;
}
#site-header.scrolled{background:rgba(7,6,8,.95);border-bottom-color:var(--bronze-dim)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Exo 2",serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand .crest{width:34px;height:34px;flex:none}
.brand em{font-style:normal;color:var(--gold-bright)}
nav.primary{display:flex;gap:26px}
nav.primary a{
  font-size:.86rem;letter-spacing:.03em;color:var(--ink-dim);white-space:nowrap;
  padding-block:6px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--gold-bright);border-color:var(--bronze)}
.head-actions{display:flex;align-items:center;gap:14px}
.social-row{display:flex;gap:8px}
.social-btn{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--ink-faint);font-size:14px;transition:.15s ease;
}
.social-btn:hover{border-color:var(--bronze);color:var(--gold-bright)}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;align-items:center;justify-content:center;color:var(--ink)}
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:10px 20px 18px;border-top:1px solid var(--line-soft)}
.mobile-nav a{padding:12px 4px;font-size:.95rem;color:var(--ink-dim);border-bottom:1px solid var(--line-soft)}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{color:var(--gold-bright)}
@media(max-width:1200px){
  nav.primary,.head-actions .social-row,.head-actions .btn{display:none}
  .burger{display:flex}
  .mobile-nav.open{display:flex}
}

/* ============ Hero (home) ============ */
/* .hero is a CSS Grid with .hero-banner and .hero-inner both placed in the
   same cell (grid-area:1/1). .hero-banner sets the row's natural height via
   aspect-ratio (1672:941 = the source image's exact pixel ratio, so it is
   always shown whole — never cropped, never distorted).
   .hero is width-capped so the image can't grow arbitrarily tall on very
   wide screens (a full-bleed 1672:941 image at 2000px+ becomes a wall of
   empty sky with nothing on it before the content starts).
   .hero-inner starts at a fixed 25% margin-top — a PERCENTAGE, which CSS
   resolves against the containing block's *width*; since that width and the
   image's height are locked together by the same aspect-ratio, 25% of width
   always lands at the same ~44%-down point on the image (measured live in
   the browser — the baked-in tagline runs lower than it first looked) at
   any screen size — not "however much
   space happens to be left under a roughly-constant content height", which
   is what grew into a huge gap on wide viewports. If the content still runs
   taller than what's left of the image, the grid row grows to fit it and
   the tail spills onto the plain --bg the image's own gradient already
   fades into — no clipping, no hard seam either way. */
.hero{position:relative;display:grid;padding-block:0;max-width:1600px;margin-inline:auto}
.hero-banner{
  grid-area:1/1;align-self:start;position:relative;isolation:isolate;
  aspect-ratio:1672/941;
  background:
    linear-gradient(180deg,transparent 36%,rgba(7,6,8,.42) 60%,rgba(7,6,8,.84) 85%,var(--bg) 100%),
    url("assets/hero-banner.webp") center top / 100% 100% no-repeat;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#embers{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-inner{
  grid-area:1/1;align-self:start;position:relative;z-index:1;margin-top:25%;
  padding:0 20px clamp(40px,6vw,64px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vw,22px);
}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{
  border:1px solid var(--bronze-dim);background:rgba(7,6,8,.55);
  padding:6px 14px;border-radius:999px;font-family:"Chakra Petch",monospace;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);
  backdrop-filter:blur(2px);
}
.hero .sub{max-width:56ch;color:var(--ink-dim);font-size:clamp(1rem,1.6vw,1.15rem)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:12px;box-shadow:var(--shadow)}
.stat-tile{background:var(--panel);padding:20px 14px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.stat-orb{width:30px;height:30px;border-radius:50%;background-image:url("assets/orbs.png");background-size:200% 200%;box-shadow:0 0 0 1px var(--bronze-dim)}
.stat-orb.red{background-position:100% 0%}
.stat-orb.blue{background-position:100% 100%}
.stat-orb.green{background-position:0% 100%}
.stat-orb.grey{background-position:0% 0%}
.stat-tile .num{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--gold-bright)}
.stat-tile .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:700px){.stat-strip{grid-template-columns:repeat(2,1fr)}}

/* ============ Page banner (sub-pages) ============ */
/* Unlike .hero, this banner's own text (crumb+title+intro) is always short,
   so anchoring it to a fixed point on a full, uncropped, very tall image
   (as .hero does) leaves a lot of unused picture below the text before the
   next section starts. Sub-pages use a compact, FIXED-height strip instead
   (height, not min-height — it must not depend on the text, or long titles
   on narrow screens grow the box until cover stops cropping the logo out of
   it). The title is a normal sibling pulled up over the strip's lower edge
   with a negative margin, so it's never clipped and never pushed up past
   the strip's own top if it runs long — it just continues in flow onto the
   plain page background below, same graceful-overflow idea as .hero. */
.page-banner{position:relative;padding-block:0}
.page-banner-media{
  position:relative;
  height:clamp(260px,30vw,380px);
  background:
    linear-gradient(180deg,rgba(7,6,8,.3) 0%,rgba(7,6,8,.62) 55%,rgba(7,6,8,.93) 100%),
    url("assets/hero-banner.webp") center 68% / cover no-repeat;
}
.page-banner-inner{position:relative;z-index:1;margin-top:clamp(-112px,-9vw,-80px);width:100%;padding:0 20px clamp(28px,5vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.page-banner h1{font-size:clamp(2rem,4.6vw,3rem);background:linear-gradient(180deg,var(--gold-bright) 15%,var(--gold) 60%,#7d64a9);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-banner p{color:var(--ink-dim);max-width:56ch}
.crumb{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--ink-faint)}
.crumb a:hover{color:var(--gold-bright)}

/* ============ Section headers ============ */
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:44px;text-align:center;max-width:64ch;margin-inline:auto}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.sec-head p{color:var(--ink-dim)}

/* ============ Features ============ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card::before{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:140px;opacity:.4;mix-blend-mode:overlay;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:var(--bronze);box-shadow:var(--shadow)}
.card .ic{
  width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%,#201a2a,var(--panel-2));
  border:1px solid var(--bronze-dim);color:var(--gold-bright);font-size:22px;margin-bottom:16px;
}
.card h3{font-size:1.08rem;margin-bottom:8px;color:var(--ink)}
.card p{color:var(--ink-dim);font-size:.92rem}

/* ============ Teaser cards (home) ============ */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.teaser-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.teaser-grid{grid-template-columns:1fr}}
.teaser{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,border-color .2s ease;
}
.teaser:hover{transform:translateY(-4px);border-color:var(--bronze)}
.teaser h3{font-size:1rem}
.teaser p{color:var(--ink-dim);font-size:.86rem;flex:1}
.teaser .go{font-family:"Chakra Petch",monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright);display:flex;align-items:center;gap:6px}

/* ============ Rates / info scrolls ============ */
.rates-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rates-grid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:900px){.rates-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.rates-grid{grid-template-columns:1fr}}
.scroll-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.scroll-panel .sp-head{
  padding:16px 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(168,140,217,.08),transparent);
}
.scroll-panel .sp-head .ic{color:var(--gold-bright);font-size:18px}
.scroll-panel .sp-head h3{font-size:1.02rem;letter-spacing:.02em}
.rate-row{display:flex;justify-content:space-between;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.rate-row:last-child{border-bottom:0}
.rate-row .k{color:var(--ink-faint);letter-spacing:.02em}
.rate-row .v{color:var(--gold-bright);font-family:"Chakra Petch",monospace;text-align:right}

/* ============ HUD showcase ============ */
.hud-sec{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
@media(max-width:860px){.hud-sec{grid-template-columns:1fr}}
.swatch-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.swatch{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-dim)}
.swatch i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.15)}
.hud-frame{
  border:1px solid var(--bronze);border-radius:12px;padding:10px;background:var(--panel-2);
  box-shadow:var(--shadow);position:relative;
}
.hud-frame::before{content:"";position:absolute;inset:6px;border:1px solid var(--bronze-dim);border-radius:8px;pointer-events:none}
.hud-frame img{border-radius:6px;width:100%}
.hud-cap{margin-top:14px;font-size:.8rem;color:var(--ink-faint);text-align:center}

.token-table{width:100%;border-collapse:collapse;margin-top:14px}
.token-table th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding:10px 14px;border-bottom:1px solid var(--line)}
.token-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.token-table .sw{width:18px;height:18px;border-radius:5px;display:inline-block;vertical-align:-4px;margin-right:8px;border:1px solid rgba(255,255,255,.15)}

/* ============ Hall of Fame (home) ============ */
.hof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.hof-grid{grid-template-columns:1fr}}
.hof-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.hof-card::before{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:140px;opacity:.4;mix-blend-mode:overlay;pointer-events:none}
.hof-card:hover{transform:translateY(-4px);border-color:var(--bronze)}
.hof-card.g1{border-color:var(--bronze)}
.hof-rank{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:"Chakra Petch",monospace;font-size:1.1rem;font-weight:700;color:#181420;position:relative;z-index:1;
}
.hof-rank.g1{background:linear-gradient(180deg,#ccb5f4,#866ab8)}
.hof-rank.g2{background:linear-gradient(180deg,#e4e4e4,#9a9a9a)}
.hof-rank.g3{background:linear-gradient(180deg,#a48ccf,#66518a)}
.hof-info{position:relative;z-index:1;min-width:0}
.hof-name{font-family:"Exo 2",serif;font-weight:700;color:var(--ink);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hof-meta{color:var(--ink-faint);font-size:.78rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hof-meta .hof-guild{color:var(--gold-bright)}
.hof-stats{margin-top:8px;display:flex;gap:14px}
.hof-stats span{font-family:"Chakra Petch",monospace;font-size:.72rem;color:var(--ink-dim)}
.hof-stats b{color:var(--gold-bright);font-weight:700}
.hof-skeleton .hof-name,.hof-skeleton .hof-meta{background:var(--panel-2);border-radius:4px;color:transparent;animation:hofPulse 1.4s ease-in-out infinite}
.hof-skeleton .hof-name{width:70%;height:1em}
.hof-skeleton .hof-meta{width:50%;height:.9em;margin-top:6px}
@keyframes hofPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ============ News ============ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.news-grid{grid-template-columns:1fr}}
.news-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.news-card:hover{transform:translateY(-4px);border-color:var(--bronze)}
.news-ribbon{
  background-image:url("assets/scroll.png");background-size:cover;background-position:center;
  height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;
}
.news-ribbon .d{font-family:"Chakra Petch",monospace;font-size:.7rem;letter-spacing:.12em;color:#bcabd9;text-transform:uppercase}
.news-ribbon .t{font-family:"Exo 2",serif;font-weight:700;color:#ddcbfb;font-size:1rem;margin-top:4px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.news-body{padding:18px 20px 22px}
.news-body p{color:var(--ink-dim);font-size:.9rem;margin-bottom:14px}
.news-body a{font-size:.8rem;color:var(--gold-bright);letter-spacing:.04em}
.news-body a:hover{text-decoration:underline}

/* ============ Rankings ============ */
.tabs{display:flex;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.tab-btn{
  padding:10px 20px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  font-family:"Chakra Petch",monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);
}
.tab-btn.active{border-color:var(--gold);color:var(--gold-bright);background:rgba(168,140,217,.08)}
.rank-panel{display:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.rank-panel.active{display:block}
.rank-table{width:100%;border-collapse:collapse;overflow-x:auto;display:block}
.rank-table thead th{
  text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;
}
.rank-table td{padding:14px 20px;border-bottom:1px solid var(--line-soft);font-size:.9rem;white-space:nowrap}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table tbody tr:hover{background:rgba(168,140,217,.04)}
.rank-badge{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:"Chakra Petch",monospace;font-size:.75rem;font-weight:700;color:#181420;
}
.rank-badge.g1{background:linear-gradient(180deg,#ccb5f4,#866ab8)}
.rank-badge.g2{background:linear-gradient(180deg,#e4e4e4,#9a9a9a)}
.rank-badge.g3{background:linear-gradient(180deg,#a48ccf,#66518a)}
.rank-badge.g0{background:var(--panel-2);color:var(--ink-faint);border:1px solid var(--line)}
.rank-table .name{color:var(--ink);font-weight:600}
.rank-guild{
  margin-left:8px;font-family:"Chakra Petch",monospace;font-size:.68rem;letter-spacing:.04em;
  color:var(--gold-bright);border:1px solid var(--bronze-dim);border-radius:999px;padding:2px 8px;
}
.rank-table .cls{color:var(--ink-faint);font-size:.8rem}
.rank-table .val{font-family:"Chakra Petch",monospace;color:var(--gold-bright)}

/* ============ Steps (download page) ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .n{font-family:"Chakra Petch",monospace;font-size:.78rem;color:var(--gold);letter-spacing:.1em}
.step h3{margin-top:8px;font-size:1.02rem}
.step p{color:var(--ink-dim);font-size:.88rem;margin-top:8px}

/* ============ CTA band ============ */
.cta-band{
  background:
    radial-gradient(ellipse 70% 100% at 20% 0%,rgba(156,36,36,.28),transparent 60%),
    radial-gradient(ellipse 70% 100% at 85% 100%,rgba(168,140,217,.16),transparent 60%),
    var(--bg-alt);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.cta-grid{grid-template-columns:1fr}}
.req-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:20px}
.req-list div{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding-block:8px;border-bottom:1px solid var(--line-soft)}
.req-list .k{color:var(--ink-faint)}
.req-list .v{color:var(--ink)}
@media(max-width:560px){.req-list{grid-template-columns:1fr}}
.cta-side{background:var(--panel);border:1px solid var(--bronze-dim);border-radius:var(--radius);padding:30px;text-align:center;box-shadow:var(--shadow)}
.cta-side h3{font-size:1.3rem;margin-bottom:10px}
.cta-side p{color:var(--ink-dim);font-size:.88rem;margin-bottom:22px}
.cta-side .btn{width:100%;margin-bottom:12px}

/* ============ Footer ============ */
footer{background:#060507;border-top:1px solid var(--line-soft);padding-block:56px 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:"Chakra Petch",monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.foot-grid ul{display:flex;flex-direction:column;gap:10px}
.foot-grid a{font-size:.88rem;color:var(--ink-dim)}
.foot-grid a:hover{color:var(--gold-bright)}
.foot-brand p{color:var(--ink-faint);font-size:.86rem;max-width:34ch;margin-block:14px 18px}
.foot-bottom{border-top:1px solid var(--line-soft);padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.78rem;color:var(--ink-faint)}
.foot-bottom strong{color:var(--ink-dim)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}