/* ═══════════════════════════════════════════════════════════════
   Haptic Games — site styles
   Sections: tokens · reset · layout · header · hero · games ·
             studio · contact · footer · placeholders · motion
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Dark, theatrical base */
  --ink:        #07070a;
  --ink-2:      #0b0b10;
  --surface:    #121219;
  --surface-2:  #191922;
  --line:       rgba(255, 255, 255, .09);
  --line-strong:rgba(255, 255, 255, .18);

  --text:       #ece8e1;
  --text-dim:   #b3ada3;
  --muted:      #877f74;

  /* The Banishing Act — candle gold */
  --gold:       #d9a441;
  --gold-soft:  #f0c979;
  --gold-glow:  rgba(217, 164, 65, .22);

  /* SportSprint — track heat */
  --sprint:     #ff4d2e;
  --sprint-2:   #ffc93c;

  --radius:     14px;
  --radius-lg:  22px;

  --wrap:       1180px;
  --gutter:     clamp(20px, 5vw, 48px);
  --section-y:  clamp(80px, 12vw, 160px);

  --font-display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over the whole page — cheap, and it sells the mood. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--gold); color: #14100a; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10000;
  background: var(--gold); color: #14100a;
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow-sprint { color: var(--sprint-2); }

.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.lede { font-size: 1.12em; color: var(--text); }
p + p { margin-top: 1.05em; }
.game-copy p:not(.lede) { color: var(--text-dim); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: #16110a;
  box-shadow: 0 0 0 0 var(--gold-glow);
}
.btn-gold:hover { background: var(--gold-soft); box-shadow: 0 10px 32px -10px var(--gold-glow); }

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, .02);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

.btn-sm { padding: 9px 18px; font-size: .84rem; }

/* Not-yet-live button: same look, but no hover lift or pointer. */
.btn-soon,
.btn-soon:hover { cursor: default; transform: none; background: var(--gold); box-shadow: none; }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  transition: background-color .3s var(--ease), backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(7, 7, 10, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand, .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
/* Logo. Height drives the size; width follows the image's own aspect ratio,
   so swapping the files for differently-proportioned ones still works.

   The mark ships as three stacked layers on one shared 800×434 canvas —
   logo-body (the gamepad) plus logo-wave-1 / -2 (the inner and outer side
   arcs) — so hover can send the arcs travelling outward off a gamepad that
   stays put. Stacked and still, they render identically to logo.png. */
.brand-mark {
  position: relative;
  display: inline-flex;
  height: 34px;
  flex: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.brand-mark img { height: 100%; width: auto; }
.brand-wave {
  position: absolute;
  top: 0;
  left: 0;
  /* The arcs are centred on the gamepad's grips, not on the canvas, so a
     scale radiates them off the sides instead of just inflating the box. */
  transform-origin: 50% 40%;
  /* Eases the arcs home on mouse-out instead of snapping them mid-flight. */
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark,
.footer-brand:hover .brand-mark { opacity: .82; transform: scale(1.04); }

/* One pulse every 1.5s. Because a pulse is fully faded before the cycle
   restarts, only ever one is in the air — the printed arcs are the whole
   emitter, and no spare copy of them is needed. */
.brand:hover .brand-wave,
.brand:focus-visible .brand-wave,
.footer-brand:hover .brand-wave {
  animation: wave-travel 1.5s linear infinite;
}

/* Starts on the arc's own printed position at full strength, so the first
   frame of the hover is just the logo, then carries it outward and out. The
   fade is front-loaded so a wave is spent before it reaches the wordmark;
   it is gone by 85%, leaving a clear beat before the next one spawns. */
@keyframes wave-travel {
  0%        { transform: scale(1);    opacity: 1; }
  47%       { transform: scale(1.25); opacity: .35; }
  85%, 100% { transform: scale(1.46); opacity: 0; }
}

.footer-brand .brand-mark { height: 30px; }

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
.primary-nav > a:not(.btn) {
  font-size: .88rem;
  color: var(--text-dim);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.primary-nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.primary-nav > a:not(.btn):hover { color: var(--text); }
.primary-nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars i {
  display: block; height: 1.5px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle-bars i + i { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 120px;
  overflow: hidden;
  isolation: isolate;
}

.hero-stage { position: absolute; inset: 0; z-index: -1; }

/* A spotlight thrown onto an empty stage. */
.spotlight {
  position: absolute;
  top: -18%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 38%,
      rgba(217, 164, 65, .17) 0%,
      rgba(217, 164, 65, .07) 32%,
      transparent 62%);
  filter: blur(6px);
  animation: flicker 7s ease-in-out infinite;
}

.floor {
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(217, 164, 65, .07), transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, #000 20%, transparent 72%);
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  42%      { opacity: .84; }
  47%      { opacity: 1; }
  73%      { opacity: .9; }
}

.hero-inner { position: relative; text-align: center; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.1rem, 11vw, 8rem);
  line-height: .95;
  letter-spacing: -.015em;
  text-shadow: 0 0 70px rgba(217, 164, 65, .18);
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.hero-lede {
  max-width: 54ch;
  margin: clamp(22px, 3vw, 32px) auto 0;
  font-size: 1.1rem;
  color: var(--text-dim);
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 44px);
}

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.scroll-cue span {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
  0%       { opacity: 0; transform: translateY(0); }
  30%      { opacity: 1; }
  100%     { opacity: 0; transform: translateY(13px); }
}

/* ── Game sections ──────────────────────────────────────────── */
.game { padding-block: var(--section-y); position: relative; }

.game-dark {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(217, 164, 65, .06), transparent 70%),
    var(--ink-2);
  border-top: 1px solid var(--line);
}

.game-head { text-align: center; max-width: 780px; margin-inline: auto; }

.game-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.02em;
}

.game-tagline {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  color: var(--gold-soft);
}
.tagline-sprint { color: var(--sprint-2); }

.media { margin: clamp(40px, 6vw, 70px) 0 0; }
.media-wide { max-width: 1000px; margin-inline: auto; }
.media-caption {
  margin-top: .8rem;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* ── Trailer + screenshot gallery (The Banishing Act) ──────────
   Slides are stacked and cross-faded; js/main.js drives which one is
   .is-active. Arrows and thumbnails only appear once the script has
   taken over (.is-ready), so without JS you just get the trailer.   */
.gallery-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 70px -30px var(--gold-glow);
}

.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.gallery-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease);
}
.gallery-slide img,
.gallery-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-video { object-fit: contain; background: #000; }

/* A slow push-in so still shots don't feel static. */
.gallery-slide.is-active img { animation: gallery-drift 7s linear forwards; }
@keyframes gallery-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

.gallery-sound {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  font: 600 .78rem/1 var(--font-body);
  letter-spacing: .06em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.gallery-sound svg { width: 17px; height: 17px; }
.gallery-sound:hover { border-color: var(--gold); color: var(--gold-soft); }
.gallery-sound[hidden] { display: none; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.gallery-arrow svg { width: 20px; height: 20px; }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.gallery.is-ready .gallery-arrow { display: grid; }
.gallery-stage:hover .gallery-arrow,
.gallery-arrow:focus-visible { opacity: 1; }
.gallery-arrow:hover { border-color: var(--gold); color: var(--gold-soft); }
@media (hover: none) {
  .gallery-arrow { opacity: .85; }
}

/* Thin gold bar that fills while a screenshot is on screen. */
.gallery-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.gallery-progress.is-running {
  animation: gallery-progress var(--gallery-hold, 5s) linear forwards;
}
@keyframes gallery-progress { to { transform: scaleX(1); } }

.gallery-thumbs {
  position: relative;
  display: none;
  gap: 8px;
  margin-top: 12px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.gallery.is-ready .gallery-thumbs { display: flex; }
/* Centred when they fit, scrollable from the left edge when they don't. */
.gallery-thumb:first-child { margin-left: auto; }
.gallery-thumb:last-child  { margin-right: auto; }

.gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: clamp(68px, 8.4vw, 82px);
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--gold); }

/* Play triangle on the trailer's thumbnail. */
.gallery-thumb-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}

.game-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
  margin-top: clamp(52px, 8vw, 96px);
}

.feature-list { display: grid; gap: 26px; }
.feature-list li {
  padding-left: 22px;
  border-left: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.feature-list li:hover { border-left-color: var(--gold); }
.feature-list h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .4rem;
}
.feature-list p { color: var(--text-dim); font-size: .96rem; }

/* CTA band */
.cta-band {
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(217, 164, 65, .07), transparent 60%), var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.cta-kicker {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.cta-text { max-width: 46ch; color: var(--text-dim); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── SportSprint ────────────────────────────────────────────── */
.game-bright {
  background:
    radial-gradient(ellipse 70% 60% at 78% 30%, rgba(255, 77, 46, .13), transparent 68%),
    radial-gradient(ellipse 50% 50% at 12% 80%, rgba(255, 201, 60, .08), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Gradient text. Two things keep this from eating its own last letter:
   `width: max-content` guarantees the background box is at least as wide as
   the glyphs (a block box narrower than the text paints no gradient past its
   edge, and transparent glyphs with no gradient behind them are invisible),
   and the smaller clamp keeps the word inside its grid column in the first
   place. `color` is the fallback if background-clip: text isn't supported. */
.title-sprint {
  font-size: clamp(2.4rem, 5.6vw, 4.9rem);
  width: max-content;
  background-image: linear-gradient(100deg, var(--sprint-2), var(--sprint) 70%);
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--sprint-2);
  -webkit-text-fill-color: transparent;
  padding-right: .06em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 1.8rem;
}
.chips li {
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--text-dim);
}

/* App Store icon. The squircle lives in the PNG's alpha channel, so the
   drop-shadow traces the real silhouette instead of a square box — which a
   border-radius plus box-shadow could not do. */
.app-icon {
  width: clamp(76px, 8vw, 100px);
  height: auto;
  margin-bottom: 1.9rem;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5));
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 2rem;
}
.store-badge {
  display: block;
  width: 150px;
  transition: transform .18s var(--ease), filter .2s;
}
.store-badge:hover { transform: translateY(-2px); filter: brightness(1.12); }
.store-note { font-size: .84rem; color: var(--muted); }

/* Phone mockups */
.phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}
/* Negative margins overlap the phones — `gap` cannot go negative. */
.phones .phone-back  { margin-right: clamp(-46px, -3.5vw, -22px); }
.phones .phone-right { margin-right: 0; margin-left: clamp(-46px, -3.5vw, -22px); }
.phone {
  position: relative;
  width: clamp(140px, 20vw, 200px);
  aspect-ratio: 9 / 19.5;
  border-radius: 26px;
  padding: 7px;
  background: linear-gradient(160deg, #2c2c36, #101017);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .07) inset;
  transition: transform .45s var(--ease);
}
.phone-front { z-index: 2; transform: translateY(-14px); }
.phone-back  { z-index: 1; transform: rotate(-7deg) scale(.9) translateX(18px); }
.phone-right { transform: rotate(7deg) scale(.9) translateX(-18px); }
.phones:hover .phone-front { transform: translateY(-22px); }
.phones:hover .phone-back  { transform: rotate(-10deg) scale(.9) translateX(6px); }
.phones:hover .phone-right { transform: rotate(10deg) scale(.9) translateX(-6px); }

.phone-screen {
  width: 100%; height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The screenshots are 9:19.5 already, so cover crops nothing — it is here so
   a differently-proportioned screenshot still fills the bezel cleanly. */
img.phone-screen { display: block; object-fit: cover; }

/* ── Studio ─────────────────────────────────────────────────── */
.studio {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats > div { background: var(--surface); padding: 22px; }
.stats dt {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.stats dd {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold-soft);
}

/* ── Contact ────────────────────────────────────────────────── */
.contact {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.contact-card {
  display: block;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s, transform .25s var(--ease), background-color .25s;
}
.contact-card:hover {
  border-color: var(--gold);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.contact-card p { font-size: .93rem; color: var(--text-dim); margin-bottom: 1.1rem; }
.contact-link {
  font-size: .88rem;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-glow);
  padding-bottom: 2px;
}

.newsletter {
  margin-top: clamp(40px, 6vw, 64px);
  max-width: 560px;
}
.newsletter label {
  display: block;
  font-size: .9rem;
  color: var(--text-dim);
  margin-bottom: .8rem;
}
.newsletter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter input {
  flex: 1 1 240px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: border-color .2s;
}
.newsletter input::placeholder { color: var(--muted); }
.newsletter input:focus { border-color: var(--gold); }
.form-msg {
  margin-top: .8rem;
  font-size: .86rem;
  min-height: 1.2em;
  color: var(--gold-soft);
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 44px;
  background: var(--ink);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a {
  font-size: .87rem;
  color: var(--text-dim);
  transition: color .2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-legal { font-size: .8rem; color: var(--muted); width: 100%; }

/* ── Image placeholders ─────────────────────────────────────────
   Delete these rules once you swap in real art. Each one draws a
   stand-in so the layout reads as finished with zero assets.       */
.media-placeholder,
.phone-screen[class*="placeholder-"] {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
}
.media-placeholder { aspect-ratio: 16 / 9; }

.placeholder-occult {
  background:
    radial-gradient(circle at 50% 62%, rgba(217, 164, 65, .3), transparent 45%),
    radial-gradient(circle at 22% 22%, rgba(120, 60, 160, .22), transparent 52%),
    linear-gradient(160deg, #14101c, #06060a 70%);
}
.placeholder-label {
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .45);
  padding: 7px 13px;
  border-radius: 999px;
  text-align: center;
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .game-body,
  .split,
  .studio-grid { grid-template-columns: minmax(0, 1fr); }

  .split-media { order: -1; }
  .split-copy  { text-align: left; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }

  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: 64px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 26px;
    background: rgba(7, 7, 10, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav > a:not(.btn) {
    padding: 15px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .primary-nav > .btn { margin-top: 18px; }

  .cta-band { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .phones { gap: 6px; }
  .phone-back { display: none; }
  .phone { width: min(240px, 62vw); }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  body::after, .site-header, .scroll-cue, .newsletter { display: none; }
  body { background: #fff; color: #000; }
}