/* ============================================================
   GETJOGO — design tokens
   Brand: black / white / green #2A6436 (from logo)
   Type: Space Grotesk (display) + Inter (body)
   ============================================================ */
:root {
  /* color */
  --bg: #0C0F0D;
  --surface: #151A16;
  --surface-2: #1C231E;
  --fg: #F2F5F3;
  --muted: #A3B0A8;
  --border: rgba(255, 255, 255, 0.09);
  --accent: #2A6436;          /* brand green: 7:1 with white text */
  --accent-hover: #347C43;
  --accent-bright: #5FBE7B;   /* green text on dark: >= 4.5:1 */
  --light-bg: #FAFBFA;
  --light-surface: #FFFFFF;
  --light-fg: #10140F;
  --light-muted: #55645A;
  --light-border: #E2E8E3;
  --focus: #7FD79A;

  /* logo recolor (dark surfaces) */
  --logo-primary: #FFFFFF;
  --logo-secondary: #0C0F0D;
  --logo-accent: #4CA765;

  /* type scale (1.25 ratio, fluid) */
  --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  /* space (8pt scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --section-pad: clamp(64px, 8vw, 128px);

  /* shape + elevation */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(10, 14, 11, 0.06), 0 8px 24px rgba(10, 14, 11, 0.10);
  --shadow-card-hover: 0 2px 4px rgba(10, 14, 11, 0.08), 0 16px 40px rgba(10, 14, 11, 0.16);

  /* layout */
  --header-h: 72px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;
  --med: 280ms;
}

/* ============ reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;          /* keeps headings from dropping a lone word */
}
/* pull the last line up so no paragraph ends on a single-word line */
p, li, blockquote, figcaption, dd, dt, .spot-desc, .g-desc {
  text-wrap: pretty;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100%; left: var(--space-3);
  background: var(--accent); color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 200; transition: top var(--fast) var(--ease);
}
.skip-link:focus-visible { top: 0; }

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

.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 64px);
}

.section { padding-block: var(--section-pad); }
[id] { scroll-margin-top: 88px; }

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 0.9375rem; }
.btn-lg { min-height: 56px; padding: 14px 36px; font-size: 1.0625rem; }

/* ============ header ============ */
/* Over the hero the bar is only a soft scrim so the pixel sky reads through;
   once the page scrolls it becomes the solid blurred bar again. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;                   /* the hero shows straight through */
  transition: background var(--med) var(--ease), box-shadow var(--med) var(--ease),
              backdrop-filter var(--med) var(--ease);
}
.site-header.is-stuck {
  background: rgba(12, 15, 13, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 var(--border);  /* hairline without changing height */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; }
.logo-svg { height: 44px; width: auto; }
.lg-primary { fill: var(--logo-primary); }
.lg-secondary { fill: var(--logo-secondary); }
.lg-accent { fill: var(--logo-accent); }

.main-nav { display: flex; align-items: center; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-menu a:not(.btn) {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--fast) var(--ease);
}
.nav-menu a:not(.btn):hover { color: var(--fg); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--fg);
  border-radius: 2px;
  transition: transform var(--med) var(--ease), opacity var(--fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ hero ============ */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));    /* sit under the bar, no dark strip */
  padding-block: calc(var(--header-h) + clamp(56px, 7vw, 112px)) clamp(178px, 17.5vw, 258px);
  background: linear-gradient(180deg, #070A08 0%, #0A0F0B 45%, #0C120E 100%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 60% at 78% 30%, rgba(42, 100, 54, 0.34), transparent 70%),
    radial-gradient(40% 50% at 12% 85%, rgba(42, 100, 54, 0.16), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

/* ============ hero forest scene ============
   Rendered forest plate + 3D mascot sprites (generated via kie.ai).
   Motion is transform/opacity only and pauses while off-screen. */
.hero-scene {
  --px-unit: 4px;                     /* one art pixel */
  --px-floor: calc(var(--px-unit) * 24);
  --veil-x: linear-gradient(90deg, rgba(7, 12, 16, 0.74) 0%, rgba(7, 12, 16, 0.60) 34%, rgba(7, 12, 16, 0.26) 62%, rgba(7, 12, 16, 0.42) 100%);
  --veil-y: linear-gradient(180deg, rgba(7, 12, 16, 0.48) 0%, rgba(7, 12, 16, 0.10) 30%, rgba(7, 12, 16, 0.12) 56%, rgba(7, 12, 16, 0.34) 82%, rgba(7, 12, 16, 0.60) 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-scene > * { position: absolute; }

/* Generated 4K pixel-art backdrop, anchored so its forest meets the platform. */
.scene-bg {
  inset: 0 0 calc(var(--px-floor) - var(--px-unit) * 2) 0;
  background-color: #000132;                 /* matches the plate's top row */
  background-image: url("../public/px-bg.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  will-change: transform;
}

/* Seven distinct cloud sprites, each drifting at its own speed, split across
   two depth layers that parallax differently. Tones are sampled from the
   plate's sky so they read as part of the scene, not an overlay. */
.scene-clouds {
  inset: 0 0 var(--px-floor) 0;
  overflow: hidden;
  will-change: transform;
}
.cloud {
  --ci: 0;
  --cs: 1;
  position: absolute;
  left: 0;
  width: calc(var(--px-unit) * 64 * var(--cs));
  height: calc(var(--px-unit) * 26 * var(--cs));
  background-image: url("../public/px-clouds.png");
  background-size: calc(var(--px-unit) * 448 * var(--cs)) calc(var(--px-unit) * 26 * var(--cs));
  background-position: calc(var(--px-unit) * -64 * var(--cs) * var(--ci)) 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: cloudDrift linear infinite;
  will-change: transform;
}
@keyframes cloudDrift {
  from { transform: translate3d(-26vw, 0, 0); }
  to   { transform: translate3d(126vw, 0, 0); }
}
/* slightly different speeds so the sky never marches in step */
.clouds-far  .cloud:nth-child(1) { animation-duration: 245s; animation-delay: -60s; opacity: .62; }
.clouds-far  .cloud:nth-child(2) { animation-duration: 288s; animation-delay: -220s; opacity: .55; }
.clouds-far  .cloud:nth-child(3) { animation-duration: 268s; animation-delay: -170s; opacity: .6; }
.clouds-far  .cloud:nth-child(4) { animation-duration: 232s; animation-delay: -20s; opacity: .66; }
.clouds-near .cloud:nth-child(1) { animation-duration: 204s; animation-delay: -150s; opacity: .8; }
.clouds-near .cloud:nth-child(2) { animation-duration: 186s; animation-delay: -95s; opacity: .76; }
.clouds-near .cloud:nth-child(3) { animation-duration: 172s; animation-delay: -40s; opacity: .84; }

/* A soft pool of shade behind the left column only. Wide falloff so it
   never reads as a panel - it just calms the mountain detail under the copy. */
.scene-scrim {
  inset: 0;
  background: radial-gradient(62% 68% at 24% 46%,
    rgba(2, 6, 16, 0.54) 0%,
    rgba(2, 6, 16, 0.40) 34%,
    rgba(2, 6, 16, 0.19) 62%,
    rgba(2, 6, 16, 0) 100%);
}

/* the plate already carries an emerald glow, so dial the brand wash back */
.hero-scene .hero-glow { opacity: 0.5; }

/* keeps the white and green UI readable over the artwork */
.scene-veil {
  inset: 0;
  background: var(--veil-x), var(--veil-y);
}

/* fireflies: square pixels rather than dots, to rhyme with the 16-bit floor */
.scene-particles { inset: 0; bottom: var(--px-floor); }
.scene-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(226, 245, 150, 0.85);
  box-shadow: 0 0 6px rgba(198, 240, 120, 0.55);
  opacity: 0;
  animation: motePath 16s linear infinite;
}
.scene-particles span:nth-child(1)  { left: 6%;  bottom: 6%;  animation-duration: 17s; animation-delay: -1s; }
.scene-particles span:nth-child(2)  { left: 14%; bottom: 16%; animation-duration: 13s; animation-delay: -5s; }
.scene-particles span:nth-child(3)  { left: 23%; bottom: 3%;  animation-duration: 19s; animation-delay: -9s; }
.scene-particles span:nth-child(4)  { left: 31%; bottom: 22%; animation-duration: 14s; animation-delay: -3s; }
.scene-particles span:nth-child(5)  { left: 42%; bottom: 9%;  animation-duration: 18s; animation-delay: -12s; }
.scene-particles span:nth-child(6)  { left: 51%; bottom: 18%; animation-duration: 15s; animation-delay: -7s; }
.scene-particles span:nth-child(7)  { left: 59%; bottom: 5%;  animation-duration: 20s; animation-delay: -2s; }
.scene-particles span:nth-child(8)  { left: 68%; bottom: 20%; animation-duration: 13s; animation-delay: -11s; }
.scene-particles span:nth-child(9)  { left: 76%; bottom: 11%; animation-duration: 16s; animation-delay: -6s; }
.scene-particles span:nth-child(10) { left: 84%; bottom: 24%; animation-duration: 18s; animation-delay: -14s; }
.scene-particles span:nth-child(11) { left: 91%; bottom: 7%;  animation-duration: 14s; animation-delay: -4s; }
.scene-particles span:nth-child(12) { left: 97%; bottom: 17%; animation-duration: 17s; animation-delay: -8s; }
@keyframes motePath {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  10%  { opacity: 0.9; }
  50%  { opacity: 0.35; }
  75%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(38px, -170px, 0); }
}

/* ============ 16-bit floor ============
   A tribute layer along the base of the hero: tiling SNES-style platform,
   props and a sprite-sheet mascot. Everything above it stays modern. */
.px-world {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--px-floor) + var(--px-unit) * 60);
  z-index: 2;
}
.px-world > * { position: absolute; }
.px-ground, .px-props .prop, .hog-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.px-ground {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--px-floor);
  background: url("../public/px-ground.png") repeat-x top left;
  background-size: calc(var(--px-unit) * 64) var(--px-floor);
}

.px-props { left: 0; right: 0; bottom: 0; height: var(--px-floor); }
.px-props .prop {
  position: absolute;
  bottom: calc(var(--px-floor) - var(--px-unit) * 6);
  width: calc(var(--px-unit) * 32);
  height: calc(var(--px-unit) * 24);
  margin-left: calc(var(--px-unit) * -16);
  background-image: url("../public/px-props.png");
  background-size: calc(var(--px-unit) * 192) calc(var(--px-unit) * 24);
  transform-origin: 50% 100%;
  animation: tuftSway 4.6s ease-in-out infinite;
}
.p-tuft    { background-position: 0 0; animation-duration: 5.4s; }
.p-flowerA { background-position: calc(var(--px-unit) * -32) 0; animation-duration: 4.8s; animation-delay: -1.7s; }
.p-flowerB { background-position: calc(var(--px-unit) * -64) 0; animation-duration: 5.9s; animation-delay: -3.4s; }
.p-bush    { background-position: calc(var(--px-unit) * -96) 0; animation-duration: 6.1s; animation-delay: -3.1s; }
.p-mush    { background-position: calc(var(--px-unit) * -128) 0; animation: none; }
.p-rock    { background-position: calc(var(--px-unit) * -160) 0; animation: none; }
@keyframes tuftSway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}

/* mascot: one sprite sheet, driven frame by frame from main.js */
.hog-sprite {
  left: 0;
  bottom: calc(var(--px-floor) - var(--px-unit) * 5);
  width: calc(var(--px-unit) * 48);
  height: calc(var(--px-unit) * 34);
  margin-left: calc(var(--px-unit) * -24);
  background-image: url("../public/px-hog.png");
  background-size: calc(var(--px-unit) * 576) calc(var(--px-unit) * 136);
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform;
}

/* pause everything while the hero is off-screen */
.hero-scene.is-paused *,
.hero-scene.is-paused { animation-play-state: paused; }
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  margin-bottom: var(--space-3);
}
.eyebrow-dark { color: var(--accent); }
.accent-text { color: var(--accent-bright); }

.hero-sub {
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--step-1);
  margin-top: var(--space-4);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.proof-stat { display: grid; gap: 2px; }
.proof-stat strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--step-2);
  color: var(--fg);
}
.proof-stat span { font-size: 0.875rem; color: var(--muted); }

/* hero spotlight */
.hero-visual { display: none; }
.spot-card {
  position: relative;
  background: rgba(18, 24, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease),
              border-color 420ms var(--ease);
}
/* a quiet inner rule + four pixel corner ticks: a nod to the 16-bit world
   without turning a premium UI panel into a pixel-art sprite */
.spot-card::before,
.spot-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.spot-card::before {
  inset: 12px;
  border: 1px solid rgba(95, 190, 123, 0.14);
  border-radius: calc(var(--radius-lg) - 12px);
}
.spot-card::after {
  inset: 17px;
  background-image:
    linear-gradient(var(--accent-bright), var(--accent-bright)),
    linear-gradient(var(--accent-bright), var(--accent-bright)),
    linear-gradient(var(--accent-bright), var(--accent-bright)),
    linear-gradient(var(--accent-bright), var(--accent-bright));
  background-size: 4px 4px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  opacity: 0.5;
  transition: opacity 420ms var(--ease);
}
/* the mascot has stopped underneath and looked up */
.spot-card.is-noticed {
  transform: translateY(-8px);
  border-color: rgba(95, 190, 123, 0.5);
  animation: cardGlow 2.6s ease-in-out infinite;
}
.spot-card.is-noticed::after { opacity: 1; }
@keyframes cardGlow {
  0%, 100% {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(95, 190, 123, 0.18),
                0 0 26px rgba(95, 190, 123, 0.18);
  }
  50% {
    box-shadow: 0 34px 78px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(95, 190, 123, 0.38),
                0 0 46px rgba(95, 190, 123, 0.34);
  }
}

/* pixel sparkles: square, unantialiased, to rhyme with the 16-bit floor */
.spot-sparkles {
  position: absolute;
  inset: -14px;
  pointer-events: none;
}
.spot-sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-bright);
  box-shadow: 0 0 6px rgba(95, 190, 123, 0.7);
  opacity: 0;
  transform: scale(0.4);
}
.spot-sparkles i:nth-child(1) { left: 6%;  top: -2px; }
.spot-sparkles i:nth-child(2) { left: 38%; top: 2px; width: 3px; height: 3px; }
.spot-sparkles i:nth-child(3) { right: 10%; top: 12%; }
.spot-sparkles i:nth-child(4) { right: -2px; top: 48%; width: 3px; height: 3px; }
.spot-sparkles i:nth-child(5) { right: 22%; bottom: 3%; }
.spot-sparkles i:nth-child(6) { left: 16%; bottom: -2px; width: 3px; height: 3px; }
.spot-sparkles i:nth-child(7) { left: -2px; top: 34%; }
.spot-card.is-noticed .spot-sparkles i { animation: sparklePop 1.9s var(--ease) infinite; }
.spot-sparkles i:nth-child(2) { animation-delay: 0.22s; }
.spot-sparkles i:nth-child(3) { animation-delay: 0.46s; }
.spot-sparkles i:nth-child(4) { animation-delay: 0.7s; }
.spot-sparkles i:nth-child(5) { animation-delay: 0.94s; }
.spot-sparkles i:nth-child(6) { animation-delay: 1.18s; }
.spot-sparkles i:nth-child(7) { animation-delay: 1.42s; }
@keyframes sparklePop {
  0%       { opacity: 0; transform: scale(0.4) translateY(2px); }
  12%      { opacity: 1; transform: scale(1.25) translateY(-1px); }
  26%      { opacity: 0.9; transform: scale(1) translateY(-3px); }
  44%, 100% { opacity: 0; transform: scale(0.5) translateY(-6px); }
}
.g-buy.is-pulsing { animation: buyPulse 900ms var(--ease) 1; }
@keyframes buyPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 190, 123, 0.5); }
  45%  { transform: scale(1.035); box-shadow: 0 0 0 8px rgba(95, 190, 123, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 190, 123, 0); }
}
.spot-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
  margin-bottom: var(--space-3);
}
.spot-label svg { width: 14px; height: 14px; }
.spot-label { margin-bottom: var(--space-4); }
.spot-inner {
  display: grid;
  /* cover shrinks on narrow desktops so the text column keeps its measure */
  grid-template-columns: clamp(130px, 40%, 156px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
.spot-inner img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.spot-meta { display: grid; gap: 0; justify-items: start; }
.spot-title { line-height: 1.15; }
.spot-sub { margin-top: 10px; }
.spot-desc { margin-top: var(--space-3); }
.spot-title { font-size: var(--step-2); }
.spot-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
}
.spot-sub svg { width: 14px; height: 14px; color: var(--accent-bright); }
.spot-desc { color: var(--muted); font-size: 0.9375rem; }
/* the price now anchors the left column, centred under the cover art */
.spot-cover { display: grid; gap: var(--space-3); align-content: start; }
.spot-price {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.spot-price-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;          /* degrades cleanly if the figures ever run long */
  gap: var(--space-2);
}
.spot-price s { color: var(--muted); }
.spot-price strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--step-2);
}
.spot-card .g-buy { margin-top: var(--space-4); }
.spot-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}
.spot-verified svg { width: 14px; height: 14px; color: var(--accent-bright); }

/* ============ sections shared ============ */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-head-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-note { color: var(--light-muted); font-size: 0.9375rem; }
.section-light {
  background: var(--light-bg);
  color: var(--light-fg);
}
.section-light h2, .section-light h3 { color: var(--light-fg); }

/* ============ shelves ============ */
.shelf { padding-block: clamp(32px, 4vw, 56px); }
.shelf:first-of-type { padding-top: var(--space-6); }
.shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.shelf-nav { display: flex; gap: var(--space-2); }
.shelf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.shelf-btn:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.shelf-btn:active { background: var(--surface-2); }
.shelf-btn svg { width: 20px; height: 20px; }

.shelf-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(16px, 5vw, 64px);
  padding-block: var(--space-2) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.shelf-track .g-card {
  flex: 0 0 clamp(210px, 22vw, 252px);
  scroll-snap-align: start;
}

/* ============ storefront game card ============ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.g-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.g-card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 190, 123, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.section-light .g-card { box-shadow: var(--shadow-card); }
.section-light .g-card:hover { box-shadow: var(--shadow-card-hover); }

.g-cover-wrap {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.g-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--med) var(--ease);
}
.g-card:hover .g-cover-wrap img { transform: scale(1.04); }

.badge-save {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge-special {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  background: #fff;
  color: var(--light-fg);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.spot-price .badge-save { position: static; }

.g-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(180deg, rgba(12, 15, 13, 0.2), rgba(12, 15, 13, 0.94) 60%);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
@media (hover: hover) {
  .g-card:hover .g-overlay { opacity: 1; }
}
.g-cover-wrap:focus-visible .g-overlay { opacity: 1; }
.g-desc { font-size: 0.875rem; color: var(--fg); line-height: 1.5; }
.g-facts { display: grid; gap: 4px; }
.g-facts div { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.75rem; }
.g-facts dt { color: var(--muted); }
.g-facts dd { color: var(--fg); text-align: right; }

.g-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
}
.g-title {
  font-size: 1rem;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.pf-pc { color: #9DC4F5; border-color: rgba(157, 196, 245, 0.35); }
.pf-ps { color: #8FA7F0; border-color: rgba(143, 167, 240, 0.35); }
.pf-xbox { color: #8FD69B; border-color: rgba(143, 214, 155, 0.35); }
.pf-switch { color: #F0938F; border-color: rgba(240, 147, 143, 0.35); }
.chip-rating { color: var(--muted); }

.g-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent-bright);
}
.g-score svg { width: 13px; height: 13px; }

.g-sub { font-size: 0.8125rem; color: var(--muted); }
.g-verified {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.75rem;
  color: var(--muted);
}
.g-verified span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.g-verified svg { width: 12px; height: 12px; color: var(--accent-bright); flex-shrink: 0; }

.g-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.g-retail {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.875rem;
}
.g-price {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
}
.g-buy { width: 100%; }

/* light-section card text overrides (cards keep dark surface for contrast) */
.section-light .g-card { border-color: rgba(16, 20, 15, 0.08); }

/* ============ how it works ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.step-num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: var(--step-3);
  color: rgba(255, 255, 255, 0.07);
  line-height: 1;
}
.step-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--accent-bright);
  background: rgba(42, 100, 54, 0.18);
  border-radius: var(--radius-sm);
}
.step-card p { color: var(--muted); font-size: 0.9375rem; }

.step-card-light {
  background: var(--light-surface);
  border-color: var(--light-border);
  box-shadow: var(--shadow-card);
}
.step-card-light p { color: var(--light-muted); }
.step-card-light .step-num { color: rgba(16, 20, 15, 0.07); }
.step-icon-light { color: var(--accent); background: rgba(42, 100, 54, 0.10); }

/* ============ trust ============ */
/* six cards, so 3x2 on desktop and 2x3 on tablet - every row fills
   completely and nothing is left stranded at one end */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
}
@media (min-width: 640px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
.trust-card {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  box-shadow: var(--shadow-card);
}
.trust-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--accent);
  background: rgba(42, 100, 54, 0.10);
  border-radius: var(--radius-sm);
}
.trust-card p { color: var(--light-muted); font-size: 0.9375rem; }
.trust-cta { display: flex; justify-content: center; margin-top: var(--space-7); }

.trust-card-dark {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.trust-card-dark p { color: var(--muted); }
.trust-card-dark .trust-icon { color: var(--accent-bright); background: rgba(42, 100, 54, 0.18); }

/* ============ customer reviews ============ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.review-card {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  box-shadow: var(--shadow-card);
}
.rv-stars { display: flex; gap: 3px; }
.rv-star svg { width: 16px; height: 16px; color: var(--light-border); }
.rv-star.on svg { color: var(--accent); }
.review-card blockquote {
  color: var(--light-fg);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.review-card figcaption { display: grid; gap: 2px; }
.review-card figcaption strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9375rem;
}
.review-card figcaption span { font-size: 0.8125rem; color: var(--light-muted); }

/* ============ footer ============ */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-7) var(--space-5);
  background: #090C0A;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 34ch;
  margin-top: var(--space-3);
}
.footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--fast) var(--ease);
}
.footer-col a:hover { color: var(--accent-bright); }
.social-links { display: flex; gap: var(--space-3); }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.social-links a:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.social-links svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--fg); }

/* ============ reveal animation ============ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============ breakpoints ============ */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  /* both columns start on the same top line so the hero reads as one
     layout; the card gets enough width that its content is not cramped */
  .hero-inner {
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--space-8);
    align-items: start;
  }
  .hero-visual {
    display: block;
    justify-self: end;
    align-self: start;
    width: 100%;
    max-width: 480px;
    margin-top: clamp(4px, 1vw, 14px);
  }
}

@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) clamp(16px, 5vw, 64px) var(--space-4);
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a:not(.btn) { display: block; padding: var(--space-3) 0; font-size: 1.0625rem; }
  .nav-cta-item { margin-top: var(--space-3); }
  .nav-cta-item .btn { width: 100%; }
  .logo-svg { height: 38px; }
  .shelf-track .g-card { flex-basis: min(72vw, 240px); }
  .spot-inner { grid-template-columns: 128px 1fr; }
  /* lighter plate and no pollen on phones */
  .scene-particles { display: none; }
  .hero-scene { --px-unit: 3px; }
  .scene-bg { background-image: url("../public/px-bg-sm.webp"); }
  .scene-scrim { background: radial-gradient(90% 52% at 50% 34%, rgba(2, 6, 16, 0.5), rgba(2, 6, 16, 0) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  /* keep the forest plate, remove everything that moves */
  .hog-sprite, .scene-particles { display: none; }
  .px-props .prop { animation: none; }
}

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