/* =========================================================================
   BanterBox — base tokens and landing page styles.
   Palette mirrors the app: deep violet background, near white ink, gold
   accent, magenta secondary. The app itself runs a purple to gold fog
   gradient, so the hero glow echoes that.
   ========================================================================= */

:root {
  --bg: #150E28;
  --surface: rgba(21, 14, 40, 0.82);
  --surface-strong: #100A1E;
  --ink: #F6F2FF;
  --ink-70: rgba(246, 242, 255, 0.72);
  --ink-50: rgba(246, 242, 255, 0.5);
  --ink-35: rgba(246, 242, 255, 0.35);
  --accent: #FFC93C;
  --accent-2: #EC6EAD;
  --frost: rgba(246, 242, 255, 0.06);
  --frost-strong: rgba(246, 242, 255, 0.12);
  --display: "Avenir Next", Avenir, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Avenir Next", Avenir, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.25, 0.8, 0.35, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); }

/* ---------------------------- Wordmark -------------------------------- */
/* Brand lockup: type only. The real app icon appears as .hero-icon above the
   hero wordmark and as the favicon; header and footer stay pure type. */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------ Landing ------------------------------- */
/* landing main: fill viewport height so the footer pins to the bottom */
.page-main { flex: 1 0 auto; }

.hero {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 44px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  max-width: 120%;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(236, 110, 173, 0.28), rgba(255, 201, 60, 0.12) 45%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero .hero-icon {
  display: block;
  width: clamp(84px, 14vw, 112px);
  height: auto;
  margin: 0 auto 18px;
  border-radius: 22.37%;
}
.hero .hero-wordmark {
  font-size: clamp(44px, 8vw, 76px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  margin: 0 0 14px;
}
.hero .tagline {
  max-width: 560px;
  margin: 0 auto 30px;
  color: var(--ink-70);
  font-size: 18px;
}
/* Apple's official badge artwork (assets/app-store-badge.svg, black variant
   with the grey keyline so it holds up on the dark background). Per Apple's
   marketing guidelines the artwork itself must not be recoloured or redrawn,
   so style only the link wrapper. */
.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.store-badge img {
  display: block;
  width: 180px;
  height: auto;
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.hero-proof {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-50);
}

/* ---------------------------- Stats (gag) ----------------------------- */
/* Sits directly under the hero CTA (user's call). These are jokes, not
   inventory counts, so they read as voice rather than as a spec sheet. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  /* wide enough that "gasp moments per session" stays on one line */
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 24px 8px;
}
.stat {
  flex: 1 1 180px;
  max-width: 240px;
  min-width: 0;
  padding: 16px 12px;
  border-radius: 16px;
  background: var(--frost);
  border: 1px solid rgba(246, 242, 255, 0.1);
  text-align: center;
}
.stat .num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--accent);
}
/* the infinity glyph sits small and low next to the digits */
.stat .num.sym { font-size: 34px; line-height: 0.85; }
.stat .label {
  font-size: 13px;
  color: var(--ink-50);
}
/* four tiles read as 2x2 rather than 3 plus an orphan on narrow screens */
@media (max-width: 620px) {
  .stat { flex: 1 1 calc(50% - 12px); max-width: none; }
}

/* ------------------------------ Showcase ------------------------------ */
/* Alternating media + copy rows. Each screenshot is already a composed store
   frame with its own device mockup, so no extra phone chrome here. */
.showcase {
  max-width: 1060px;
  margin: 0 auto;
  padding: 64px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}
.showcase-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 72px;
}
.showcase-row:nth-child(even) { flex-direction: row-reverse; }
.showcase-media {
  flex: 0 0 44%;
  display: flex;
  justify-content: center;
}
.showcase-media img {
  width: 270px;
  height: auto;
  display: block;
  border-radius: 29px;
}
.showcase-copy { flex: 1 1 0; }
.showcase-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.showcase-title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 40px;
  line-height: 1.14;
  font-weight: 700;
  color: var(--ink);
}
.showcase-copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
}
/* Stack on narrow screens; the nth-child flip must be undone or the order
   reads inconsistently down the column. */
@media (max-width: 820px) {
  .showcase { gap: 60px; padding-top: 40px; }
  .showcase-row,
  .showcase-row:nth-child(even) {
    flex-direction: column;
    gap: 26px;
    text-align: center;
  }
  .showcase-media { flex: 0 0 auto; }
  .showcase-media img { width: 240px; }
  .showcase-title { font-size: 30px; }
}

/* ------------------------------- Games -------------------------------- */
.games {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 32px);
  text-align: center;
  margin: 0 0 6px;
}
.section-sub {
  text-align: center;
  color: var(--ink-50);
  font-size: 15px;
  margin: 0 0 28px;
}
.game-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .game-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  /* ten games leave one on its own row: centre it instead of left aligning */
  .game-grid .game:last-child { grid-column: 2; }
}
.game {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px;
  border-radius: 18px;
  background: var(--frost);
  border: 1px solid rgba(246, 242, 255, 0.1);
}
.game .glyph {
  font-size: 22px;
  line-height: 1.2;
}
.game h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.game p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-70);
}

/* ------------------------------ Features ------------------------------ */
.notes {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}
.note {
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--frost);
  border: 1px solid rgba(246, 242, 255, 0.1);
  text-align: left;
}
.note h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}
.note p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-70);
}

.honest-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-50);
}