/* Nakmuay — landing site.
   Palette and type come from the Claude Design mock; the visual treatment
   (ambient depth, glass nav, rounded gradient-edged cards, scroll reveals)
   is layered on top of it. Still one stylesheet, no build step. */

:root {
  --bg: #07070B;
  --bg-2: #0A0B11;
  --panel: rgba(255,255,255,.026);
  --panel-2: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --text: #F6F7FA;
  --body: #C0C5D2;
  --muted: #7D8496;
  --dim: #99A0B0;
  --grey: #4C5364;
  /* Marketing accents — page chrome, eyebrows, buttons. */
  --cyan: #00E5FF;
  --pink: #FF2D6F;
  --amber: #FFB020;

  /* Side colours, taken straight from the game (lib/moves.ts). Anything that
     draws a real target uses these, never the marketing accents — the whole
     rule a player learns is blue = left limb, red = right limb. */
  --limb-left: #3aa0ff;
  --limb-right: #ff4d5e;

  --display: 'Anton', Impact, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(16px, 5vw, 40px);
  --r: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

/* Safety net: no image may ever exceed its container. Every img on this page
   is larger than the box it sits in, so without this a single missing width
   rule crops the picture instead of scaling it. Class rules that set an
   explicit height (.logo) still win on specificity. */
img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: #E8E8EC;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--pink); }
:where(a, button, input):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 10px 16px; background: var(--cyan); color: #07070B; border-radius: 999px;
  font-family: var(--cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 12px; color: #07070B; }

/* ---------- ambient background ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow-cyan  { width: 55vw; height: 55vw; top: -18vw; left: -12vw; background: radial-gradient(circle, rgba(0,229,255,.20), transparent 68%); }
.glow-pink  { width: 48vw; height: 48vw; top: 42vh; right: -16vw; background: radial-gradient(circle, rgba(255,45,111,.16), transparent 68%); }
.glow-amber { width: 52vw; height: 52vw; bottom: -18vw; left: 22vw; background: radial-gradient(circle, rgba(255,176,32,.11), transparent 68%); }
/* Faint film grain — kills the banding a flat near-black plus blurred glows makes. */
.grain {
  position: absolute; inset: -50%; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(52px,8vw,110px) var(--pad); }
.sec-hero { padding: clamp(20px,4vw,44px) var(--pad) clamp(52px,8vw,96px); }
.sec-tight { padding-top: 0; padding-bottom: clamp(48px,7vw,90px); }
.sec-head { margin-bottom: clamp(26px,4vw,44px); }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.bar.is-stuck {
  background: rgba(7,7,11,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.bar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; gap: 16px;
  transition: padding .3s var(--ease);
}
.bar.is-stuck .bar-in { padding-top: 11px; padding-bottom: 11px; }
.wordmark { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-right: auto; }
.wordmark:hover { color: inherit; }
.logo { height: 38px; width: auto; display: block; }
.studio { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.bar-nav { display: flex; gap: 26px; }
.bar-nav a {
  position: relative; font-size: 14px; font-weight: 500; letter-spacing: .04em;
  color: var(--dim);
}
.bar-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  background: var(--cyan); transition: right .25s var(--ease);
}
.bar-nav a:hover { color: var(--text); }
.bar-nav a:hover::after { right: 0; }
@media (max-width: 1000px) { .bar-nav { display: none; } }
/* 26px was fine for a one-line wordmark. This lockup is two tiers and ARENA
   sits at about a quarter of the height, so it needs the extra few pixels. */
@media (max-width: 520px) { .logo { height: 32px; } .studio { display: none; } }

/* ---------- hero ---------- */
.hero-grid { display: grid; gap: clamp(24px,4vw,48px); align-items: center; }
.hero-art-wrap { position: relative; justify-self: center; width: 100%; max-width: 360px; }
/* A soft cyan bloom behind the key art so it sits in the scene, not on top of it. */
.hero-art-wrap::before {
  content: ''; position: absolute; inset: 6% 2% 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.22), rgba(255,45,111,.10) 45%, transparent 70%);
  filter: blur(46px);
}
.hero-art {
  position: relative; width: 100%; height: auto; display: block;
  /* The art is drawn on solid black, which against this page reads as an
     untrimmed box rather than as artwork. Keying the black out is not an option
     here the way it is for the lettering — her gloves and top ARE black, and
     would go transparent with it — so the square is made deliberate instead. */
  border-radius: 18px;
  animation: float 7s ease-in-out infinite;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0,1.32fr) minmax(0,.68fr); }
  .hero-art-wrap { max-width: 400px; justify-self: end; }
}

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px; padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid currentColor; background: rgba(255,255,255,.03);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.eyebrow-cyan { color: var(--cyan); }
.eyebrow-pink { color: var(--pink); }
.eyebrow-amber { color: var(--amber); }

/* Anton sets very tight by default; these open it back up so a three-line
   headline reads as three lines and not one block. */
.h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(38px,9.6vw,82px); line-height: 1.06; letter-spacing: .012em;
  text-transform: uppercase; color: var(--text); text-wrap: balance; max-width: 17ch;
}
/* One accent colour, not a ramp — a gradient across a multi-line heading gives
   each line a different hue and the whole thing reads as a flag. */
.accent { color: var(--cyan); text-shadow: 0 0 34px rgba(0,229,255,.28); }
.h2 {
  margin: 0 0 10px; font-family: var(--display); font-weight: 400;
  font-size: clamp(31px,6vw,56px); line-height: 1.04; letter-spacing: .012em;
  text-transform: uppercase; color: var(--text); text-wrap: balance;
}
.h3 {
  margin: 12px 0 8px; font-family: var(--cond); font-size: 23px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text);
}
.h3-big {
  margin: 0 0 10px; font-family: var(--display); font-size: clamp(26px,4vw,42px);
  line-height: 1; text-transform: uppercase;
}
.lede { margin: 24px 0 0; max-width: 52ch; font-size: clamp(16px,2.4vw,19px); line-height: 1.55; color: var(--body); }
.sub { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--body); }
.sub.wide { max-width: 54ch; }
.body { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--body); }
.body.narrow { max-width: 44ch; margin-bottom: 10px; font-size: 17px; }
.dim { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dim); }
.mono { font-family: var(--mono); }
.note { margin: 16px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.caption { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.tag { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; }
.cyan { color: var(--cyan); } .pink { color: var(--pink); }
.amber { color: var(--amber); } .muted { color: var(--muted); }
.ta-r { text-align: right; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--cond); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* Light sweep on hover — the one flourish every button shares. */
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: 14px; letter-spacing: .15em; padding: 10px 20px; }
.btn-lg { font-size: clamp(17px,3vw,21px); padding: 16px 34px; }

.btn-cyan {
  color: #06070A; background: linear-gradient(160deg, #7CF1FF, var(--cyan) 55%, #00B8CE);
  box-shadow: 0 6px 24px rgba(0,229,255,.28);
}
.btn-cyan:hover { color: #06070A; box-shadow: 0 10px 34px rgba(0,229,255,.45); }
.btn-amber {
  color: #0A0800; background: linear-gradient(160deg, #FFD37A, var(--amber) 55%, #E08C00);
  box-shadow: 0 6px 24px rgba(255,176,32,.26);
}
.btn-amber:hover { color: #0A0800; box-shadow: 0 10px 34px rgba(255,176,32,.42); }
.btn-ghost {
  color: var(--text); border-color: var(--line); background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(0,229,255,.6); background: rgba(0,229,255,.07); }
.btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); }

.full { display: block; width: 100%; text-align: center; margin: 6px 0 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link-cta {
  font-family: var(--cond); font-size: 15px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

/* ---------- stat band ---------- */
.stats {
  list-style: none; margin: clamp(30px,5vw,52px) 0 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--line-soft); overflow: hidden;
}
.stats li {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  padding: clamp(18px,3vw,28px) 12px; background: var(--bg-2);
}
.stat-n {
  font-family: var(--display); font-size: clamp(26px,4.6vw,44px); line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.stat-n i { font-style: normal; font-size: .55em; color: var(--muted); }
.stat-k { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line-soft); overflow: hidden; padding: 16px 0;
  background: linear-gradient(90deg, rgba(0,229,255,.05), rgba(255,45,111,.05));
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 26s linear infinite; }
.marquee-track span {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--display); font-size: clamp(20px,3.4vw,34px); line-height: 1;
  text-transform: uppercase; color: rgba(255,255,255,.12); white-space: nowrap;
}
.marquee-track i { font-style: normal; color: var(--cyan); opacity: .55; }

/* ---------- cards ---------- */
.card {
  position: relative; isolation: isolate; border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 22px 20px 24px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Hairline highlight along the top edge — cheap depth, no extra markup. */
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--line); }
.card-cyan:hover  { box-shadow: 0 16px 44px -18px rgba(0,229,255,.55); border-color: rgba(0,229,255,.35); }
.card-pink:hover  { box-shadow: 0 16px 44px -18px rgba(255,45,111,.55); border-color: rgba(255,45,111,.35); }
.card-amber:hover { box-shadow: 0 16px 44px -18px rgba(255,176,32,.5); border-color: rgba(255,176,32,.35); }

.num {
  font-family: var(--display); font-size: 46px; line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.steps .card { padding: 26px 24px 28px; overflow: hidden; }
/* The colour of each step reads off a bar across the top of the card. */
.steps .card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.step-cyan::after  { background: linear-gradient(90deg, var(--cyan), transparent 85%); }
.step-pink::after  { background: linear-gradient(90deg, var(--pink), transparent 85%); }
.step-amber::after { background: linear-gradient(90deg, var(--amber), transparent 85%); }
.step-cyan:hover  { box-shadow: 0 16px 44px -18px rgba(0,229,255,.5); }
.step-pink:hover  { box-shadow: 0 16px 44px -18px rgba(255,45,111,.5); }
.step-amber:hover { box-shadow: 0 16px 44px -18px rgba(255,176,32,.45); }

/* Six cards: an explicit ladder rather than auto-fit, which strands the sixth
   card alone on a row at desktop widths. */
.strikes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .strikes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .strikes { grid-template-columns: 1fr; } }
/* Real targets, drawn to the spec in ../instructions.md — outline = limb group,
   colour = side, white glyph = strike. Two per card: the left-limb version and
   the right-limb version of that family. */
.glyphs { display: flex; gap: 12px; margin-bottom: 4px; }
.glyph {
  width: 46px; height: 46px; display: block; overflow: visible;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.g-left  { color: var(--limb-left);  filter: drop-shadow(0 0 9px rgba(58,160,255,.45)); }
.g-right { color: var(--limb-right); filter: drop-shadow(0 0 9px rgba(255,77,94,.45)); }
/* The pair scales in sequence on hover, the way a beat arrives. */
.card:hover .glyph { transform: scale(1.08); }
.card:hover .g-right { transition-delay: .06s; }
.card:hover .g-left  { filter: drop-shadow(0 0 15px rgba(58,160,255,.7)); }
.card:hover .g-right { filter: drop-shadow(0 0 15px rgba(255,77,94,.7)); }

/* ---------- glyph legend ---------- */
.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 0 0 clamp(18px,3vw,26px); padding: 14px 18px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: rgba(255,255,255,.025);
  font-size: 13px; letter-spacing: .02em; color: var(--dim);
}
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.legend b { width: 13px; height: 13px; flex: none; border: 2px solid currentColor; }
.lg-circle { border-radius: 50%; color: var(--muted); }
.lg-square { border-radius: 2px; color: var(--muted); }
.lg-left  { border-radius: 50%; color: var(--limb-left);  background: rgba(58,160,255,.25); }
.lg-right { border-radius: 50%; color: var(--limb-right); background: rgba(255,77,94,.25); }
/* The note is a sentence, not an icon row. It has to opt out of the
   inline-flex above: as a flex container its <em> becomes a flex item, gapped
   9px from the words either side and broken onto its own line — which is what
   was happening to "travels" in the middle of the rule it is explaining.
   Given a full row of its own, so it reads as a caption under the swatches. */
/* Scoped to .legend so it outranks the `.legend span` inline-flex above —
   a bare .lg-note loses on specificity and the fix silently does nothing. */
.legend .lg-note {
  display: block;
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 12.5px;
}
.lg-note em { color: var(--body); font-style: normal; font-weight: 600; }

/* ---------- quote ---------- */
.quote {
  margin: 0; padding: clamp(30px,5vw,54px) clamp(24px,5vw,56px);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(0,229,255,.09), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  text-align: center;
}
.quote blockquote {
  margin: 0; font-family: var(--display); font-size: clamp(21px,3.6vw,37px);
  line-height: 1.24; letter-spacing: .012em;
  text-transform: uppercase; color: var(--text);
  max-width: 22ch; margin-inline: auto; text-wrap: balance;
}
.quote figcaption { margin-top: 18px; font-size: 11px; letter-spacing: .18em; color: var(--muted); }

/* ---------- gameplay still ----------
   The screenshot carries its own HUD and its own dark bezel, so the frame here
   stays out of its way: radius, a hairline, and a glow bed underneath. */
.shot { position: relative; margin: clamp(30px,5vw,54px) 0 0; }
/* Colour bleeding out from behind the frame, so it sits in the page rather
   than on it. Outside .shot-frame, which clips its own children. */
.shot::before {
  content: ''; position: absolute; inset: 12% 14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.3), rgba(255,45,111,.18) 55%, transparent 72%);
  filter: blur(64px);
}
.shot-frame {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(0,229,255,.18);
  box-shadow: 0 40px 90px -50px rgba(0,229,255,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.shot-frame img { display: block; width: 100%; height: auto; }

/* ---------- discipline panels ---------- */
.toggle {
  display: inline-flex; gap: 6px; margin-bottom: 22px; padding: 6px; flex-wrap: wrap;
  border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(255,255,255,.03);
}
.tg {
  font-family: var(--cond); font-size: 17px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 11px 28px; cursor: pointer;
  background: transparent; border: 0; border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tg-cyan { color: var(--cyan); }
.tg-cyan.is-on { background: var(--cyan); color: #06070A; box-shadow: 0 4px 20px rgba(0,229,255,.35); }
.tg-amber { color: var(--amber); }
.tg-amber.is-on { background: var(--amber); color: #0A0800; box-shadow: 0 4px 20px rgba(255,176,32,.32); }
.tg:not(.is-on):hover { background: rgba(255,255,255,.06); }

.panel {
  display: grid; gap: clamp(20px,3vw,32px); grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  align-items: center; border: 1px solid var(--line-soft); border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(16px,3vw,30px);
}
/* Grid items default to min-width:auto, which is the image's intrinsic 1446px
   — enough to push the column past its track. */
.panel > * { min-width: 0; }
/* `display:grid` above is an author rule and beats the UA's [hidden]{display:none},
   so the hidden panel would otherwise stay on screen. */
.panel[hidden] { display: none; }
.panel-amber { border-color: rgba(255,176,32,.16); background: linear-gradient(180deg, rgba(255,176,32,.06), rgba(255,176,32,.015)); }
/* Both discipline stills carry their own dark bezel and their own lighting, so
   the frame stays neutral — a tinted border here fights the photo. */
.panel-art {
  position: relative; overflow: hidden; border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
/* width + height:auto, never a fixed box — the two stills differ by 0.2% in
   ratio, so letting them set their own height keeps both uncropped. */
.panel-art img { display: block; width: 100%; height: auto; }

.mix { display: flex; height: 8px; margin: 6px 0 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.mix-fill { display: block; height: 100%; }
.mix-hands { background: linear-gradient(90deg, #7CF1FF, var(--cyan)); }
.mix-legs { background: linear-gradient(90deg, var(--amber), #FFD37A); }

/* ---------- privacy ---------- */
.privacy {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid rgba(255,45,111,.34);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(255,45,111,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,45,111,.07), rgba(255,45,111,.015));
  padding: clamp(28px,5vw,48px);
}
.privacy-h {
  margin: 0; font-family: var(--display); font-size: clamp(23px,4.3vw,42px);
  line-height: 1.18; letter-spacing: .012em;
  text-transform: uppercase; color: var(--text); max-width: 24ch; text-wrap: balance;
}
.privacy-b { margin: 18px 0 0; max-width: 56ch; }

/* ---------- leaderboard ---------- */
.board {
  border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.board-head, .board-row {
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 12px; padding: 15px 18px;
}
.board-head {
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.board-row {
  border-bottom: 1px solid rgba(255,255,255,.035); align-items: baseline;
  transition: background .2s var(--ease);
}
.board-row:hover { background: rgba(255,255,255,.035); }
.rank { font-family: var(--display); font-size: 18px; color: var(--muted); }
.rank.gold { color: var(--amber); text-shadow: 0 0 16px rgba(255,176,32,.55); }
.rank.silver { color: #D9DEE9; }
.rank.bronze { color: #E39C62; }
.who { font-family: var(--cond); font-size: 19px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.board .dim { font-size: 13px; }
.score { font-size: 15px; color: var(--body); text-align: right; min-width: 76px; font-variant-numeric: tabular-nums; }
.board-foot { padding: 15px 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.board-foot .mono { font-size: 12px; }

/* ---------- gyms / final / footer ---------- */
.gym-grid { display: grid; gap: clamp(24px,4vw,56px); grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); align-items: center; }
.gym-card { align-self: start; padding: clamp(22px,3vw,32px); }

.final {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(28px,5vw,52px);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.final-glow {
  position: absolute; left: 50%; top: -60%; width: 70%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,229,255,.22), transparent 62%); filter: blur(50px);
}
.final > :not(.final-glow) { position: relative; }
.final-h { margin: 0 0 8px; font-family: var(--display); font-size: clamp(28px,5vw,46px); line-height: 1; text-transform: uppercase; color: var(--text); }

.foot { border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.25); }
.foot-in {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(36px,5vw,56px) var(--pad) 40px;
  display: flex; flex-wrap: wrap; gap: 32px 56px; justify-content: space-between;
}
.foot-brand { max-width: 34ch; }
.foot .logo { height: 32px; margin-bottom: 16px; }
.copy { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.foot-nav { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.foot-col a { font-size: 15px; color: var(--body); }
.foot-col a:hover { color: var(--cyan); }

/* ---------- scroll reveal ----------
   Gated on the `js` class the inline head script sets, so a visitor with
   JavaScript off gets the page fully visible rather than a blank column. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ---------- animation ---------- */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { animation: none !important; opacity: 1 !important; }
  .hero-art { animation: none; }
  .btn:hover, .card:hover { transform: none; }
  .btn::after { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}