/* =========================================================================
   PlayPractices — style.css
   A dark, premium practice-matching platform for gamers.
   Signature motif: the "tactics board" — the radar grid, dotted rotation
   routes, and callout pins that players already sketch before a scrim.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Surfaces */
  --ink:        #0b0f1a;
  --ink-soft:   #0e1526;
  --panel:      #131a2e;
  --panel-2:    #171f38;
  --panel-border: rgba(236,239,246,0.09);
  --panel-border-strong: rgba(236,239,246,0.16);

  /* Text */
  --chalk:      #eceff6;
  --chalk-dim:  rgba(236,239,246,0.74);
  --slate:      #929bae;
  --slate-dim:  #828a9d;

  /* Accents */
  --gold:       #f2a93b;
  --gold-soft:  #ffd68a;
  --teal:       #4fd1c5;
  --violet:     #8b7cf6;
  --grad-signal: linear-gradient(135deg, var(--violet), var(--teal));
  --grad-gold:   linear-gradient(135deg, #f2a93b, #ffc873);

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1180px;
  --edge: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-s: .22s;
  --dur-m: .5s;
  --dur-l: 1.1s;

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
img, svg{ display:block; max-width:100%; }
input, textarea{ font:inherit; }

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

/* ---------- Base ---------- */
body{
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before{
  /* ambient radar-grid wash across the whole page, very low opacity */
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(139,124,246,0.10), transparent 40%),
    radial-gradient(circle at 85% 18%, rgba(79,209,197,0.08), transparent 38%),
    radial-gradient(circle at 50% 95%, rgba(242,169,59,0.06), transparent 45%);
  pointer-events: none;
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

section{ position: relative; padding-block: var(--section-pad); }
section.tight{ padding-block: clamp(3rem, 6vw, 5rem); }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background: var(--gold); color:#141018;
  padding:.75rem 1.25rem; border-radius: var(--radius-sm);
  font-weight:600; z-index:200; transition: top var(--dur-s) var(--ease);
}
.skip-link:focus{ top:1rem; }

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

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--chalk);
}
h1{ font-size: clamp(2.5rem, 3.4vw + 1.4rem, 4.4rem); line-height: 1.05; font-weight:800; }
h2{ font-size: clamp(1.9rem, 1.6vw + 1.4rem, 2.9rem); line-height: 1.12; }
h3{ font-size: clamp(1.2rem, .5vw + 1.05rem, 1.45rem); line-height: 1.3; }
h4{ font-size: 1.05rem; }

.lede{
  font-size: clamp(1.05rem, .4vw + 1rem, 1.2rem);
  color: var(--chalk-dim);
  max-width: 46ch;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.1rem;
}
.eyebrow-center{ justify-content:center; }
.eyebrow::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(242,169,59,0.18);
}

.section-head{
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top: 1rem; }

.mono-tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .98rem;
  white-space: nowrap;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.btn-primary{
  background: var(--grad-gold);
  color: #1a1409;
  box-shadow: 0 10px 30px -12px rgba(242,169,59,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(242,169,59,0.65); }
.btn-ghost{
  background: rgba(236,239,246,0.04);
  border: 1px solid var(--panel-border-strong);
  color: var(--chalk);
}
.btn-ghost:hover{ background: rgba(236,239,246,0.08); border-color: rgba(236,239,246,0.3); transform: translateY(-2px); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn svg{ width:18px; height:18px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(11,15,26,0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-m) var(--ease), background var(--dur-m) var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color: var(--panel-border);
  background: rgba(11,15,26,0.85);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.05rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display); font-weight:800; font-size:1.15rem;
  color: var(--chalk);
}
.brand-mark{ width:34px; height:34px; }
.brand small{
  display:block; font-family: var(--font-mono); font-weight:400;
  font-size:.62rem; letter-spacing:.12em; color: var(--slate); text-transform:uppercase;
}

.nav-links{
  display:flex; align-items:center; gap:2.1rem;
}
.nav-links a{
  position:relative; font-size:.94rem; color: var(--chalk-dim);
  padding-block:.3rem;
  transition: color var(--dur-s) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--grad-gold); border-radius:2px;
  transition: right var(--dur-m) var(--ease);
}
.nav-links a:hover{ color: var(--chalk); }
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius: var(--radius-sm);
  align-items:center; justify-content:center;
  border:1px solid var(--panel-border-strong);
  background: rgba(236,239,246,0.03);
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ---------- Hero ---------- */
.hero{
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items:center;
}
.hero-copy .lede{ margin-top: 1.4rem; }

.hero-trust{
  display:flex; flex-wrap:wrap; gap: .5rem 1.4rem;
  margin-top: 1.9rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--slate);
  letter-spacing:.02em;
}
.hero-trust span{ display:flex; align-items:center; gap:.5rem; }
.hero-trust span::before{
  content:""; width:5px; height:5px; border-radius:50%; background: var(--teal);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }

.hero-graphic{
  position:relative; width:100%; aspect-ratio: 1/1; max-width:560px; margin-inline:auto;
}
.hero-graphic svg{ width:100%; height:100%; }
.tag{
  position:absolute;
  display:flex; align-items:center; gap:.45rem;
  background: rgba(19,26,46,0.82);
  border:1px solid var(--panel-border-strong);
  backdrop-filter: blur(6px);
  padding:.42rem .75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.05em;
  color: var(--chalk-dim);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5);
  opacity:0;
  animation: tagIn .7s var(--ease) forwards;
}
.tag::before{ content:""; width:6px; height:6px; border-radius:50%; }
.tag-rotate{ top:6%; left:0; animation-delay: .9s; }
.tag-rotate::before{ background: var(--gold); }
.tag-comms{ bottom:22%; left:-4%; animation-delay: 1.05s; }
.tag-comms::before{ background: var(--teal); box-shadow:0 0 0 3px rgba(79,209,197,.2); }
.tag-vod{ top:38%; right:-6%; animation-delay: 1.2s; }
.tag-vod::before{ background: var(--violet); }
.tag-daily{ bottom:2%; right:8%; animation-delay: 1.35s; }
.tag-daily::before{ background: var(--gold); }

@keyframes tagIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.route-path{
  fill:none; stroke: url(#routeGrad); stroke-width:2; stroke-linecap:round;
  stroke-dasharray: 6 10;
  stroke-dashoffset: 900;
  animation: drawRoute 2.6s var(--ease) forwards .3s;
}
@keyframes drawRoute{ to{ stroke-dashoffset: 0; } }

.radar-ring{ fill:none; stroke: rgba(79,209,197,0.16); stroke-width:1; }
.radar-ring.spin{
  transform-origin: 280px 280px;
  animation: radarSpin 34s linear infinite;
}
@keyframes radarSpin{ to{ transform: rotate(360deg); } }

.node{ opacity:0; animation: nodeIn .5s var(--ease) forwards; }
.node-1{ animation-delay: .55s; } .node-2{ animation-delay: .8s; }
.node-3{ animation-delay: 1.05s; } .node-4{ animation-delay: 1.3s; }
.node-5{ animation-delay: 1.5s; }
@keyframes nodeIn{ from{ opacity:0; transform: scale(.4); } to{ opacity:1; transform: scale(1); } }

.node-pulse{
  animation: pulseRing 2.6s ease-out infinite;
  transform-origin: center;
}
.node-pulse-delay{ animation-delay: 1.1s; }
@keyframes pulseRing{
  0%{ opacity:.55; transform: scale(1); }
  100%{ opacity:0; transform: scale(2.3); }
}

/* ---------- Cards & grid basics ---------- */
.grid{ display:grid; gap: 1.4rem; }
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  transition: transform var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(242,169,59,0.35);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,0.6);
}
.card-icon{
  width:46px; height:46px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: rgba(139,124,246,0.12);
  color: var(--teal);
  margin-bottom: 1.1rem;
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.55rem; }
.card p{ color: var(--chalk-dim); font-size:.95rem; }

/* radar-ping bullet used across list-style content */
.ping-list li{ position:relative; padding-left:1.5rem; margin-bottom:.7rem; color:var(--chalk-dim); }
.ping-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%;
  background: var(--grad-signal);
}

/* ---------- About ---------- */
.about .container{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.about-copy p + p{ margin-top:1.1rem; }
.about-copy p{ color: var(--chalk-dim); }
.about-panel{
  background: linear-gradient(160deg, var(--panel), var(--ink-soft));
  border:1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.about-panel > .mono-tag{ color: var(--gold-soft); }
.about-ping-list{ margin-top: 1.1rem; }
.about-ping-list .mono-tag{ color: var(--chalk-dim); }
.community-ping-list{ margin-top: 1.6rem; }
.about-stat-row{ display:flex; gap:1.6rem; margin-top:1.5rem; flex-wrap:wrap; }
.about-stat b{ display:block; font-family:var(--font-display); font-size:1.7rem; }
.about-stat span{ font-size:.82rem; color: var(--slate); }

/* ---------- How it works ---------- */
.steps{
  display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute; top:34px; left:6%; right:6%; height:1px;
  background-image: linear-gradient(90deg, var(--panel-border-strong) 50%, transparent 50%);
  background-size: 14px 1px;
  z-index:0;
}
.step{ position:relative; z-index:1; }
.step-num{
  width:68px; height:68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:1.3rem; font-weight:500;
  background: var(--ink-soft); border:1px solid var(--panel-border-strong);
  color: var(--gold-soft);
  margin-bottom: 1.3rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ color: var(--chalk-dim); font-size:.94rem; }

/* ---------- Why practice ---------- */
.why-practice{ background: var(--ink-soft); }
.why-grid{ grid-template-columns: repeat(3, 1fr); }
.why-card .why-index{
  font-family: var(--font-mono); color: var(--slate-dim); font-size:.8rem; margin-bottom:.9rem; display:block;
}

/* ---------- Features ---------- */
.features-grid{ grid-template-columns: repeat(3, 1fr); }

/* ---------- Games ---------- */
.games-grid{ grid-template-columns: repeat(4, 1fr); }
.game-card{
  position:relative; overflow:hidden;
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.game-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(236,239,246,0.09) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity:.5;
  mask-image: radial-gradient(circle at 100% 0%, black, transparent 70%);
}
.game-card:hover{ border-color: rgba(79,209,197,0.4); transform: translateY(-3px); transition: all var(--dur-m) var(--ease); }
.game-icon{
  position:relative; z-index:1;
  width:46px; height:46px; flex-shrink:0; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,169,59,0.1);
  color: var(--gold-soft);
}
.game-icon svg{ width:24px; height:24px; }
.game-meta{ position:relative; z-index:1; }
.game-meta h3{ font-size:1.02rem; margin-bottom:.15rem; }
.game-meta span{ font-family: var(--font-mono); font-size:.72rem; color: var(--slate); text-transform:uppercase; letter-spacing:.04em; }
.games-note{ margin-top:2rem; color: var(--slate); font-size:.92rem; text-align:center; }

/* ---------- Categories ---------- */
.categories-grid{ grid-template-columns: repeat(4, 1fr); }
.cat-card{ text-align:left; }
.cat-card h3{ font-size:1.05rem; }

/* ---------- Community ---------- */
.community{ background: var(--ink-soft); }
.community .container{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem,5vw,4rem); align-items:center;
}
.community-visual{
  position:relative;
  aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--panel-2), var(--ink));
  border:1px solid var(--panel-border);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.community-visual svg{ width:78%; height:78%; }

/* ---------- Stories ---------- */
.stories-grid{ grid-template-columns: repeat(2, 1fr); }
.story-card{ display:flex; flex-direction:column; gap:1.1rem; }
.story-quote{ font-size:1.05rem; color: var(--chalk); line-height:1.6; }
.story-quote::before{ content:"\201C"; color: var(--gold); }
.story-quote::after{ content:"\201D"; color: var(--gold); }
.story-meta{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.story-avatar{
  width:42px; height:42px; border-radius:50%;
  background: var(--grad-signal);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#0b0f1a; font-size:.95rem;
}
.story-name{ font-weight:600; font-size:.92rem; }
.story-tag{ font-family: var(--font-mono); font-size:.72rem; color: var(--slate); text-transform:uppercase; }

/* ---------- Statistics ---------- */
.stats{
  background: linear-gradient(180deg, var(--ink) 0%, var(--panel) 100%);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}
.stats-grid{ grid-template-columns: repeat(4, 1fr); text-align:center; }
.stat-num{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  background: var(--grad-signal);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.stat-label{ margin-top:.7rem; color: var(--slate); font-size:.92rem; }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 800px; margin-inline:auto; }
.faq-item{
  border-bottom: 1px solid var(--panel-border);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.4rem 0; text-align:left; font-family: var(--font-display); font-weight:600; font-size:1.02rem;
}
.faq-q svg{ width:20px; height:20px; flex-shrink:0; transition: transform var(--dur-m) var(--ease); color: var(--gold); }
.faq-item[data-open="true"] .faq-q svg{ transform: rotate(45deg); }
.faq-a{
  display:grid; grid-template-rows: 0fr; opacity:0;
  transition: grid-template-rows var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
}
.faq-item[data-open="true"] .faq-a{ grid-template-rows: 1fr; opacity:1; }
.faq-a-inner{ overflow:hidden; }
.faq-a p{ padding-bottom:1.4rem; color: var(--chalk-dim); max-width:65ch; }

/* ---------- CTA ---------- */
.cta{
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.cta-panel{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(139,124,246,0.16), rgba(79,209,197,0.1)), var(--panel);
  border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align:center;
}
.cta-panel h2{ max-width: 24ch; margin-inline:auto; }
.cta-panel p{ margin-top:1rem; color: var(--chalk-dim); max-width:52ch; margin-inline:auto; }
.cta-panel .btn{ margin-top:1.8rem; }
.cta-grid-bg{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(circle, rgba(236,239,246,0.08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--panel-border);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--ink);
}
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--panel-border);
}
.footer-brand p{ color: var(--slate); font-size:.92rem; margin-top:1rem; max-width:32ch; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--panel-border-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--slate); transition: all var(--dur-s) var(--ease);
}
.footer-social a:hover{ color: var(--chalk); border-color: var(--gold); transform: translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }
.footer-col h4{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); margin-bottom:1.1rem; font-family:var(--font-mono); font-weight:500; }
.footer-col ul li{ margin-bottom:.75rem; }
.footer-col a{ color: var(--chalk-dim); font-size:.94rem; }
.footer-col a:hover{ color: var(--gold-soft); }
.footer-contact li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--chalk-dim); font-size:.9rem; margin-bottom:.85rem; }
.footer-contact svg{ width:17px; height:17px; flex-shrink:0; margin-top:.15rem; color: var(--teal); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.8rem; font-size:.82rem; color: var(--slate-dim);
}
.footer-legal-note{ max-width:70ch; font-size:.78rem; color: var(--slate-dim); margin-top:1rem; line-height:1.6; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-hero{ padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.legal-updated{ color: var(--slate); font-family: var(--font-mono); font-size:.82rem; margin-top:1rem; }
.legal-body{ max-width: 780px; margin-inline:auto; padding-bottom: 2rem; }
.legal-body h2{ font-size:1.4rem; margin-top:2.6rem; margin-bottom:1rem; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color: var(--chalk-dim); margin-bottom:1rem; }
.legal-body ul{ margin-bottom:1.2rem; }
.legal-body li{ position:relative; padding-left:1.4rem; color: var(--chalk-dim); margin-bottom:.6rem; }
.legal-body li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background: var(--teal); }
.legal-body a{ color: var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }
.legal-toc{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-md);
  padding: 1.6rem 1.8rem; margin-bottom: 2.5rem;
}
.legal-toc h2{ font-size:1rem; margin-bottom:.9rem; }
.legal-toc ol{ list-style:decimal; padding-left:1.2rem; }
.legal-toc li{ padding-left:.3rem; color: var(--chalk-dim); margin-bottom:.4rem; }
.legal-toc li::before{ display:none; }
.legal-toc a{ text-decoration:none; }
.legal-toc a:hover{ color: var(--gold-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .features-grid, .why-grid{ grid-template-columns: repeat(2,1fr); }
  .games-grid{ grid-template-columns: repeat(3,1fr); }
  .categories-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:2.2rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:2.2rem; }
}

@media (max-width: 860px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.nav-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background: var(--ink-soft); border-bottom:1px solid var(--panel-border);
    padding: 1rem var(--edge) 1.5rem;
  }
  .site-header.nav-open .nav-links a{ padding-block:.8rem; width:100%; border-bottom:1px solid var(--panel-border); }

  .hero .container{ grid-template-columns: 1fr; }
  .hero-graphic{ order:-1; max-width:400px; }
  .about .container, .community .container{ grid-template-columns: 1fr; }
  .community-visual{ order:-1; aspect-ratio: 16/10; }
  .steps{ grid-template-columns: 1fr 1fr; row-gap:2.5rem; }
  .steps::before{ display:none; }
  .stories-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .features-grid, .why-grid, .games-grid, .categories-grid{ grid-template-columns: 1fr 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .hero-ctas .btn{ width:100%; }
  .hero-ctas{ flex-direction:column; }
}

@media (max-width: 420px){
  .games-grid, .categories-grid, .features-grid, .why-grid{ grid-template-columns: 1fr; }
}