/* ============================================================================
   VIRAL DRAMA — Ultra-Premium NEON RED on BLACK
   Design System & Global Styles  ·  single source of truth for the look
   ----------------------------------------------------------------------------
   — True-black base with layered neon-red glows (filmic, electric, premium).
   — ONE neon-red accent with glow halos; used with intent, not everywhere.
   — Editorial type scale; generous space; deliberate rhythm.
   — CSS-only motion; plays on every device (reduced-motion freeze intentionally removed).
   — Zero third-party requests: self-hosted everything, no CDN, no web fonts.
   — WCAG 2.1 AA: body/legal text and links kept at AA contrast on black.

   CANONICAL TEXT/DATA: see SITE-DATA.md
   This is the ONLY stylesheet — it styles the landing page AND the legal pages.
   =========================================================================== */

/* ----------------------------------------------------------------------------
   SELF-HOSTED FONTS — "Accord" (in /font/, served same-origin)
   ----------------------------------------------------------------------------
   Self-hosted from /font/ → zero third-party requests, no CDN, GDPR-safe.
   Each face lists .woff2 FIRST (smallest, ~30% under .woff), then .woff (covers
   any older browser), then .otf as a last-resort fallback. Browsers download only
   the first format they support, and only for weights actually used on the page.
   font-display:swap → text paints instantly in the system fallback, then swaps to
   Accord (no invisible-text flash).
   Relative url() paths resolve next to style.css, so they work on file://, the
   dev server, and cPanel alike. Remember to upload the /font/ folder.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Accord"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("font/Accord Light.woff2") format("woff2"), url("font/Accord Light.woff") format("woff"), url("font/Accord Light.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("font/Accord Regular.woff2") format("woff2"), url("font/Accord Regular.woff") format("woff"), url("font/Accord Regular.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("font/Accord Italic.woff2") format("woff2"), url("font/Accord Italic.woff") format("woff"), url("font/Accord Italic.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("font/Accord Medium.woff2") format("woff2"), url("font/Accord Medium.woff") format("woff"), url("font/Accord Medium.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("font/Accord Bold.woff2") format("woff2"), url("font/Accord Bold.woff") format("woff"), url("font/Accord Bold.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("font/Accord Bold Italic.woff2") format("woff2"), url("font/Accord Bold Italic.woff") format("woff"), url("font/Accord Bold Italic.otf") format("opentype");
}
@font-face {
  font-family: "Accord"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("font/Accord ExtraBold.woff2") format("woff2"), url("font/Accord ExtraBold.woff") format("woff"), url("font/Accord ExtraBold.otf") format("opentype");
}

/* ============================================================================
   DESIGN TOKENS
   =========================================================================== */
:root {
  /* — Color: pure-black base ——————————————————————————————————————— */
  --color-bg:            #000000;   /* true black                             */
  --color-bg-2:          #060608;   /* subtle alternating band                */
  --color-surface:       #0c0c0f;   /* cards / panels                         */
  --color-surface-2:     #141319;   /* elevated / hover                       */
  --color-light:         #0c0c0f;   /* alias used by legal pages (= surface)  */
  --color-border:        #2a121a;   /* dark-red hairline borders              */
  --color-divider:       #16090d;

  /* — Color: NEON RED accent ——————————————————————————————————————— */
  --color-accent:        #ff2147;   /* neon red — AA-safe on black (~5.5:1)   */
  --color-accent-light:  #ff5e74;
  --color-accent-deep:   #ff0033;   /* hot neon core for glow / selection     */
  --color-accent-dark:   #b3001f;   /* deep red for gradient end / borders    */
  --gradient-accent:     linear-gradient(135deg, #ff4d63 0%, #ff0033 55%, #b3001f 100%);
  --gradient-accent-soft:linear-gradient(135deg, rgba(255,33,71,0.20), rgba(179,0,31,0.06));
  --neon-red:            #ff1f3d;   /* glow colour                            */

  /* — Color: text ——————————————————————————————————————————————— */
  --color-text:          #f6f6f8;
  --color-text-secondary:#c7c7d2;
  --color-muted:         #8f8f9c;   /* AA on black                            */
  --color-link:          #ff5566;   /* inline links — AA-safe ~6.7:1          */

  /* — Typography ————————————————————————————————————————————————— */
  --font-display: "Accord", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Accord", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --type-display: clamp(2.75rem, 8.5vw, 6rem);
  --type-h1:      clamp(2.25rem, 6vw, 4rem);
  --type-h2:      clamp(1.85rem, 4.2vw, 3rem);
  --type-h3:      clamp(1.35rem, 2.6vw, 1.9rem);
  --type-h4:      clamp(1.1rem, 1.8vw, 1.3rem);
  --type-lead:    clamp(1.1rem, 1.8vw, 1.4rem);

  /* — Spacing (both naming schemes aliased) ——————————————————————— */
  --spacing-xs: 0.5rem;   --space-xs: 0.5rem;
  --spacing-sm: 0.75rem;  --space-sm: 0.75rem;
  --spacing-md: 1rem;     --space-md: 1rem;
  --spacing-lg: 1.5rem;   --space-lg: 1.5rem;
  --spacing-xl: 2rem;     --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* — Radius —————————————————————————————————————————————————————— */
  --radius:    0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* — Depth & neon glow ————————————————————————————————————————————— */
  --shadow:    0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-lg: 0 22px 60px rgba(0,0,0,0.75);
  --shadow-glow: 0 0 45px rgba(255,16,60,0.55);
  --neon-text: 0 0 10px rgba(255,40,70,0.55), 0 0 28px rgba(255,0,51,0.32);
  --neon-line: rgba(255,0,51,0.22);

  /* — Motion ——————————————————————————————————————————————————————— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms var(--ease);
  --t:      280ms var(--ease);
  --t-slow: 520ms var(--ease);

  /* — Layout ——————————————————————————————————————————————————————— */
  --maxw: 1200px;
  --maxw-prose: 880px;
}

/* ============================================================================
   RESET & BASE
   =========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  overflow-wrap: break-word; /* keep long emails / URLs from overflowing on narrow screens */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 650px at 76% -12%, rgba(255,0,51,0.22), transparent 60%),
    radial-gradient(900px 600px at 0% 4%, rgba(255,16,60,0.12), transparent 55%),
    radial-gradient(760px 520px at 50% 112%, rgba(179,0,31,0.18), transparent 60%),
    var(--color-bg);
  position: relative;
}

/* Fine filmic grain — same-origin data URI (CSP-safe), very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--color-accent-deep); color: #fff; }

/* ============================================================================
   ACCESSIBILITY — reduced motion & focus
   =========================================================================== */
/* NOTE: We intentionally do NOT freeze animations under prefers-reduced-motion.
   The brand's motion design (fades/slides, hero poster reel, neon ticker, aurora,
   shimmer) is part of the identity and must show on every device, including
   machines that have "reduce motion" enabled system-wide. reveal.js mirrors this
   (prefersReduced = false). To restore accessibility-respecting behaviour, re-add a
   @media (prefers-reduced-motion: reduce) block that zeroes animation/transition
   durations and forces .reveal { opacity:1; transform:none }. */

:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(255,0,51,0.25);
}

.skip-link {
  position: absolute;
  left: 0; top: -120%;
  background: var(--color-accent-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10000;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* ============================================================================
   LAYOUT UTILITIES
   =========================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 8vw, var(--space-4xl)); }
.section--alt {
  background: var(--color-bg-2);
  border-block: 1px solid var(--neon-line);
  box-shadow: inset 0 1px 0 rgba(255,0,51,0.12), inset 0 -1px 0 rgba(255,0,51,0.12);
}
.section__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section--center .section__head { margin-inline: auto; text-align: center; }
.section__head h2 { text-shadow: var(--neon-text); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
  text-shadow: var(--neon-text);
}
.eyebrow::before { content: "● "; color: var(--color-accent); font-size: 0.7em; vertical-align: middle; }

/* ============================================================================
   TYPOGRAPHY
   =========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text); font-weight: 800; }
h1 { font-size: var(--type-h1); margin-bottom: 1rem; }
h2 { font-size: var(--type-h2); margin-bottom: 1rem; }
h3 { font-size: var(--type-h3); margin-bottom: 0.75rem; line-height: 1.2; }
h4 { font-size: var(--type-h4); margin-bottom: 0.5rem; line-height: 1.3; letter-spacing: -0.01em; }

p { line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 1rem; }
.lead { font-size: var(--type-lead); color: var(--color-text-secondary); line-height: 1.6; }

a { color: var(--color-link); text-decoration: none; transition: color var(--t-fast), text-shadow var(--t-fast); }
a:hover { color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 10px rgba(255,40,70,0.5); }

strong { color: var(--color-text); font-weight: 700; }

.accent { color: var(--color-accent); }
.text-gradient {
  background: var(--gradient-accent);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,0,51,0.45));
  animation: shimmer 7s linear infinite;
}

/* ============================================================================
   SITE HEADER (sticky, translucent over the hero)
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--neon-line);
  box-shadow: 0 1px 0 rgba(255,0,51,0.18), 0 14px 40px -20px rgba(255,0,51,0.35);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.9rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--color-text); text-decoration: none;
}
.brand:hover { color: var(--color-text); text-decoration: none; }
.brand__logo { height: 56px; width: auto; display: block; }
.brand__word {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
}
.brand__word--v { color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,0.25); }
.brand__word--d { color: var(--color-accent-dark); text-shadow: 0 0 16px rgba(255,0,51,0.45); }
@media (max-width: 760px) {
  .brand__logo { height: 44px; }
  .brand__word { font-size: 1.2rem; }
}
@media (max-width: 380px) { .brand__word { font-size: 1.05rem; } }
.brand__mark {
  width: 1.85rem; height: 1.85rem; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--gradient-accent);
  box-shadow: var(--shadow-glow);
  color: #fff; font-size: 1rem;
  animation: neonPulse 3.4s ease-in-out infinite;
}
.brand__name b { color: var(--color-accent); font-weight: 800; text-shadow: 0 0 10px rgba(255,0,51,0.55); }

@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255,0,51,0.45); }
  50%      { box-shadow: 0 0 42px rgba(255,0,51,0.85); }
}

.site-nav { display: flex; align-items: center; gap: 0.35rem; }
.site-nav a {
  color: var(--color-text-secondary); font-weight: 600; font-size: 0.95rem;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.site-nav a:hover { color: var(--color-text); background: rgba(255,0,51,0.08); text-decoration: none; text-shadow: none; }
.site-nav .nav-cta { margin-left: 0.4rem; }

/* Mobile nav toggle — CSS-only hamburger (checkbox hack); CSP-safe, needs no JS.
   The checkbox is the focusable control (keyboard: Tab to it, Space to open);
   the <label> is the visible hamburger and toggles it on tap/click. */
.nav-toggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none; flex: none; position: relative; cursor: pointer;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--neon-line); background: rgba(255,0,51,0.06);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.nav-toggle:hover { background: rgba(255,0,51,0.12); border-color: var(--color-accent); }
.nav-toggle span {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: var(--color-text); border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) translateY(-6px); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) translateY(6px); }
.nav-toggle-cb:focus-visible ~ .nav-toggle {
  outline: 2px solid var(--color-accent-light); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(255,0,51,0.25);
}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header__inner { gap: 0.75rem; }
  .nav-toggle { display: block; }
  .site-nav { /* slide-down panel anchored to the sticky header */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    padding: 0.6rem clamp(1.25rem, 4vw, 2.5rem) 1.1rem;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--neon-line);
    box-shadow: 0 24px 50px -20px rgba(255,0,51,0.45);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: max-height var(--t-slow), opacity var(--t), transform var(--t), visibility var(--t-slow);
  }
  .nav-toggle-cb:checked ~ .site-nav {
    max-height: 85vh; overflow-y: auto; opacity: 1; visibility: visible; transform: none;
  }
  .site-nav a { padding: 0.85rem 1rem; font-size: 1rem; border-radius: 10px; }
  .site-nav .nav-cta { display: inline-flex; width: 100%; margin: 0.45rem 0 0; }
}

/* ============================================================================
   BUTTONS & STORE BADGES
   =========================================================================== */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1;
  color: #fff; text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
  border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #e11537, #9c001b);
  box-shadow: 0 0 26px rgba(255,0,51,0.5), var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t-fast);
}
.button:hover, .btn:hover {
  transform: translateY(-2px); text-decoration: none; color: #fff;
  box-shadow: 0 0 42px rgba(255,0,51,0.8), var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: brightness(1.08);
}
.button:active, .btn:active { transform: translateY(0); }
.button::after, .btn::after {
  content: ""; position: absolute; top: 0; left: -160%;
  width: 55%; height: 100%; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.40), transparent);
}
.button:hover::after, .btn:hover::after { animation: sheen 0.85s var(--ease); }

.button.secondary, .btn--ghost {
  background: rgba(255,0,51,0.05);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 18px rgba(255,0,51,0.25), inset 0 0 12px rgba(255,0,51,0.08);
  text-shadow: 0 0 8px rgba(255,31,61,0.45);
}
.button.secondary:hover, .btn--ghost:hover {
  background: rgba(255,0,51,0.12);
  border-color: var(--color-accent-light);
  color: #fff;
  box-shadow: 0 0 30px rgba(255,0,51,0.55), inset 0 0 16px rgba(255,0,51,0.12);
}

/* App-store badges (self-hosted, CSS-drawn — no third-party badge images) */
.badges { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1.25rem; min-width: 190px;
  background: #08080a; color: #fff; text-decoration: none;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast), box-shadow var(--t);
}
.store-badge:hover {
  transform: translateY(-2px); border-color: var(--color-accent); background: #0d0d11; color: #fff; text-decoration: none;
  box-shadow: 0 0 24px rgba(255,0,51,0.35);
}
.store-badge svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge small { font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.store-badge b { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============================================================================
   HERO
   =========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(4.5rem, 12vw, 9rem) clamp(3.5rem, 9vw, 7rem);
  text-align: center;
}
.hero__bg { /* glow + scrim layer that sits ABOVE the mosaic for readable text */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(820px 540px at 50% 6%, rgba(255,0,51,0.34), transparent 60%),
    radial-gradient(1000px 700px at 82% 100%, rgba(255,16,60,0.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.72));
}
.hero__bg::after { /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 30%, transparent 52%, rgba(0,0,0,0.82) 100%);
}
.hero__bg::before { /* slow rotating neon aurora */
  content: ""; position: absolute; inset: -25%;
  background: conic-gradient(from 90deg at 50% 45%, rgba(255,0,51,0) 0%, rgba(255,0,51,0.28) 18%, rgba(122,31,255,0.10) 40%, rgba(255,0,51,0) 62%);
  filter: blur(48px); opacity: 0.7;
  animation: auroraSpin 24s linear infinite;
}
.hero__inner { max-width: 920px; margin-inline: auto; position: relative; z-index: 2; }

/* Moving mosaic poster wall (decorative background) */
.hero__mosaic {
  position: absolute; inset: -12% -6%; z-index: 0; overflow: hidden; pointer-events: none;
  display: flex; gap: 0.8rem; justify-content: center;
  transform: rotate(-8deg) scale(1.45); transform-origin: center;
  opacity: 0.55;
}
.mosaic__col { flex: 0 0 clamp(110px, 12vw, 170px); }
.mosaic__col-inner { display: flex; flex-direction: column; gap: 0.8rem; animation: mosaicUp 34s linear infinite; will-change: transform; }
.mosaic__col:nth-child(even) .mosaic__col-inner { animation-direction: reverse; animation-duration: 42s; }
.mosaic__col:nth-child(3n)  .mosaic__col-inner { animation-duration: 50s; }
.mosaic__card {
  aspect-ratio: 2 / 3; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.hero h1 {
  font-size: var(--type-display);
  letter-spacing: -0.035em; line-height: 0.98;
  margin-bottom: 1.25rem;
  text-wrap: balance;
  text-shadow: var(--neon-text);
}
.hero .lead { max-width: 620px; margin: 0 auto 2.25rem; }
.hero .cta-buttons, .hero .badges { justify-content: center; }
.hero__note { margin-top: 1.5rem; font-size: 0.9rem; color: var(--color-muted); }

.hero__reel {
  margin-top: 3.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero__track {
  display: flex; gap: 1rem; width: max-content;
  animation: marquee 38s linear infinite;
}
.hero__reel:hover .hero__track { animation-play-state: paused; }
.hero__track .poster {
  width: clamp(96px, 14vw, 150px); flex: none;
  animation: bob 6s ease-in-out infinite;
}
.hero__track .poster:nth-child(3n)   { animation-delay: -1.5s; }
.hero__track .poster:nth-child(3n+1) { animation-delay: -3s; }

/* ============================================================================
   POSTER GRID & GENRE SHELVES (catalogue showcase)
   =========================================================================== */
.poster {
  position: relative; display: block;
  aspect-ratio: 2 / 3; border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* TODO(asset): each .poster is a premium gradient placeholder — swap for real key art. */
.poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.88) 100%);
}
.poster:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg), 0 0 36px rgba(255,0,51,0.5); border-color: var(--color-accent); text-decoration: none; color: #fff; }
.poster__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.9rem 1rem; }
.poster__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.15; }
.poster__meta { display: block; font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 0.25rem; }
.poster__badge {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.55rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.poster__badge--hot { background: var(--gradient-accent); border-color: transparent; box-shadow: 0 0 16px rgba(255,0,51,0.6); }

/* Gradient placeholder palettes — neon-tinted darks (fallback if a photo 404s) */
.pg-1 { background: linear-gradient(150deg, #1a0006, #ff0033 150%); }
.pg-2 { background: linear-gradient(150deg, #14001a, #7a1fff 150%); }
.pg-3 { background: linear-gradient(150deg, #001016, #00b3c4 160%); }
.pg-4 { background: linear-gradient(150deg, #1a0a00, #ff6a00 160%); }
.pg-5 { background: linear-gradient(150deg, #18000c, #ff1f6b 150%); }
.pg-6 { background: linear-gradient(150deg, #001208, #00c466 160%); }

/* Real artwork — self-hosted photos from /img (optimised from /fotot). Cover-crop
   so every card is filled; sits under the .poster::after gradient for caption legibility. */
.poster, .mosaic__card {
  background-color: var(--color-surface);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-1  { background-image: url("img/p1.jpg"); }
.ph-2  { background-image: url("img/p2.jpg"); }
.ph-3  { background-image: url("img/p3.jpg"); }
.ph-4  { background-image: url("img/p4.jpg"); }
.ph-5  { background-image: url("img/p5.jpg"); }
.ph-6  { background-image: url("img/p6.jpg"); }
.ph-7  { background-image: url("img/p7.jpg"); }
.ph-8  { background-image: url("img/p8.jpg"); }
.ph-9  { background-image: url("img/p9.jpg"); }
.ph-10 { background-image: url("img/p10.jpg"); }
.ph-11 { background-image: url("img/p11.jpg"); }

.poster-grid {
  display: grid; gap: clamp(0.9rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Auto-sliding mover — featured row + genre shelves (seamless, pause on hover) */
.mover {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mover__track {
  display: flex; gap: clamp(0.9rem, 2vw, 1.5rem); width: max-content;
  animation: marquee 48s linear infinite;
}
.mover:hover .mover__track { animation-play-state: paused; }
.mover__track .poster { width: clamp(150px, 20vw, 200px); flex: none; }
.mover--reverse .mover__track { animation-direction: reverse; animation-duration: 54s; }

.shelf { margin-top: 2.75rem; }
.shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.shelf__head h3 { margin: 0; }
.shelf__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 1rem; overflow-x: auto; padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--color-accent-dark) transparent;
}
.shelf__row .poster { scroll-snap-align: start; }
.shelf__row::-webkit-scrollbar { height: 8px; }
.shelf__row::-webkit-scrollbar-thumb { background: var(--color-accent-dark); border-radius: 999px; }

/* ============================================================================
   HOW IT WORKS — steps
   =========================================================================== */
.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: step; }
.step {
  position: relative; padding: 2rem 1.75rem 1.75rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.step:hover { border-color: var(--color-accent); transform: translateY(-4px); box-shadow: 0 0 30px rgba(255,0,51,0.25); }
.step__num {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff;
  border-radius: 50%; background: var(--gradient-accent); box-shadow: var(--shadow-glow);
}
.step h4 { color: var(--color-text); }
.step p { margin-bottom: 0; color: var(--color-text-secondary); }

/* ============================================================================
   FEATURE GRID
   =========================================================================== */
.features { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.75rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t), transform var(--t), background var(--t), box-shadow var(--t);
}
.feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
  box-shadow: 0 0 14px rgba(255,0,51,0.7);
}
.feature:hover { transform: translateY(-5px); border-color: var(--color-accent); background: var(--color-surface-2); box-shadow: 0 0 34px rgba(255,0,51,0.28); }
.feature:hover::before { transform: scaleX(1); }
.feature__icon {
  width: 3rem; height: 3rem; margin-bottom: 1.1rem;
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--gradient-accent-soft); border: 1px solid var(--color-border);
  color: var(--color-accent);
}
.feature__icon svg { width: 1.6rem; height: 1.6rem; stroke: currentColor; fill: none; }
.feature h4 { color: var(--color-text); }
.feature p { margin-bottom: 0; color: var(--color-text-secondary); font-size: 0.97rem; }
.feature ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.feature li { color: var(--color-text-secondary); }

/* Legal index grid — link lists grouped in cards */
.features--legal { margin-top: 2.5rem; }
.features--legal .feature ul { list-style: none; padding-left: 0; }
.features--legal .feature li { margin-bottom: 0.5rem; }
.features--legal .feature a { color: var(--color-text); font-weight: 600; }
.features--legal .feature a:hover { color: var(--color-accent); }

/* ============================================================================
   STATS BAND
   =========================================================================== */
.stats {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: center;
}
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; }
.stat__unit { font-size: 0.5em; }
.stat__label { margin-top: 0.6rem; color: var(--color-muted); font-size: 0.95rem; }

/* ============================================================================
   FINAL CTA BAND
   =========================================================================== */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,0,51,0.30), transparent 70%),
    var(--color-surface);
  border: 1px solid var(--color-accent-dark);
  box-shadow: 0 0 60px -20px rgba(255,0,51,0.5), inset 0 0 60px -40px rgba(255,0,51,0.4);
}
.cta-band h2 { margin-bottom: 0.75rem; text-shadow: var(--neon-text); }
.cta-band .lead { max-width: 540px; margin: 0 auto 2rem; }
.cta-band .badges { justify-content: center; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band::before { /* rotating neon ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-accent-deep) 55deg, rgba(255,94,116,0.9) 90deg, transparent 150deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events: none; z-index: 0;
  animation: spin 7s linear infinite;
}

/* ============================================================================
   DRAFT BANNER (legal pages) — amber on black
   =========================================================================== */
.draft-banner {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.45);
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  color: #fcd9a0;
}
.draft-banner strong { color: #fcd34d; }
.draft-banner a { color: #fcd34d; }

/* ============================================================================
   LONG-FORM CONTENT (legal pages) — kept crisp & high-contrast (no heavy glow)
   =========================================================================== */
.page-main { flex: 1; width: 100%; }
.prose { max-width: var(--maxw-prose); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem); }
.prose h1 { margin-bottom: 0.5rem; text-shadow: var(--neon-text); }
.prose .doc-meta { color: var(--color-muted); font-size: 0.95rem; margin-bottom: 2rem; }
.prose section { margin-bottom: 2.5rem; }
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0; margin-bottom: 1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--neon-line);
}
.prose h3 { font-size: 1.3rem; margin-top: 1.75rem; padding-left: 0.85rem; border-left: 3px solid var(--color-accent); }
.prose p, .prose li { color: var(--color-text-secondary); }
.prose ul, .prose ol { margin: 0 0 1rem 1.4rem; }
.prose li { margin-bottom: 0.5rem; line-height: 1.65; }
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-link); }

/* ----------------------------------------------------------------------------
   FAQ page — category jump nav + collapsible questions (native <details>)
   Mobile-first: large tap targets, deep-linkable answers.
   --------------------------------------------------------------------------- */
/* Offset anchored targets so they clear the sticky header. */
.prose section, .faq-item { scroll-margin-top: 96px; }

.faq-jump {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 2.25rem;
}
.faq-jump a {
  display: inline-flex; align-items: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  color: var(--color-text-secondary); text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.faq-jump a:hover, .faq-jump a:focus-visible {
  color: var(--color-text); border-color: var(--color-accent);
  background: var(--color-surface-2); text-decoration: none;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.85rem;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item[open] { border-color: var(--neon-line); }
.faq-item:hover { border-color: rgba(255,33,71,0.45); }

.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.15rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: -2px;
}
/* +/− indicator built from currentColor — no external assets, CSP-safe. */
.faq-item > summary::after {
  content: ""; flex: 0 0 auto;
  width: 0.72em; height: 0.72em; margin-top: 0.15em;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }

.faq-a {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid var(--color-divider);
  padding-top: 1rem;
}
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-a p, .faq-a li { color: var(--color-text-secondary); line-height: 1.65; }
.faq-a ul, .faq-a ol { margin: 0.5rem 0 1rem 1.4rem; }
.faq-a a { color: var(--color-link); }

.faq-contact { list-style: none; margin-left: 0; }
.faq-contact li { margin-bottom: 0.6rem; }

.todo {
  background: rgba(245,158,11,0.12); color: #fcd9a0;
  border: 1px dashed rgba(245,158,11,0.5); border-radius: var(--radius-sm);
  padding: 0.05em 0.45em; font-family: var(--font-mono); font-size: 0.85em;
}

code {
  background: var(--color-surface-2); color: var(--color-accent-light);
  padding: 0.15em 0.45em; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.88em;
  border: 1px solid var(--color-border);
}
pre {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1rem;
}
pre code { background: none; border: none; padding: 0; color: var(--color-text); }
blockquote {
  border-left: 4px solid var(--color-accent); background: var(--color-surface);
  padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin: 1rem 0; color: var(--color-text-secondary);
}

/* ============================================================================
   TABLES (data map etc.)
   =========================================================================== */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border-radius: var(--radius); border: 1px solid var(--color-border); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-divider); font-size: 0.92rem; vertical-align: top; }
th { background: var(--color-surface-2); color: var(--color-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; }
td { color: var(--color-text-secondary); }
tbody tr:hover { background: rgba(255,0,51,0.05); }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================================
   FOOTER
   =========================================================================== */
.site-footer { margin-top: auto; background: var(--color-bg-2); border-top: 1px solid var(--neon-line); box-shadow: 0 -1px 0 rgba(255,0,51,0.18); }
.site-footer__inner { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-top { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; margin-bottom: 2rem; }
.footer-brand { max-width: 360px; }
.footer-brand p { color: var(--color-muted); font-size: 0.9rem; margin-top: 0.75rem; margin-bottom: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a { color: var(--color-text-secondary); font-weight: 600; font-size: 0.95rem; }
.footer-links a:hover { color: var(--color-accent-light); }
.footer-bottom { border-top: 1px solid var(--color-divider); padding-top: 1.5rem; color: var(--color-muted); font-size: 0.85rem; }
.footer-bottom p { color: var(--color-muted); margin-bottom: 0.35rem; }

/* Right-hand footer column: links on top, then download badges + social */
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem; }
.footer-right .footer-links { justify-content: flex-end; margin: 0; }

/* Footer download badges + social buttons (right-aligned) */
.footer-cta { margin-top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }
.footer-cta .badges, .footer-cta .social { justify-content: flex-end; }
.badges--sm { gap: 0.6rem; }
.badges--sm .store-badge { min-width: 0; padding: 0.55rem 0.95rem; }
.badges--sm .store-badge svg { width: 22px; height: 22px; }
.badges--sm .store-badge small { font-size: 0.6rem; }
.badges--sm .store-badge b { font-size: 0.92rem; }

.social { list-style: none; display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 0; margin: 0; }
.social__btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; color: var(--color-text-secondary);
  background: rgba(255,0,51,0.05); border: 1px solid var(--color-border);
  transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.social__btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.social__btn:hover {
  color: #fff; transform: translateY(-3px); text-decoration: none;
  border-color: var(--color-accent); background: rgba(255,0,51,0.12);
  box-shadow: 0 0 22px rgba(255,0,51,0.45);
}

/* ============================================================================
   SCROLL-REVEAL (progressive enhancement only)
   =========================================================================== */
.reveal--armed .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal--armed .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 600px) {
  .footer-top { flex-direction: column; gap: 1.75rem; }
  /* footer stacks → left-align the right column to match the brand */
  .footer-right { align-items: stretch; gap: 1.4rem; }
  .footer-right .footer-links { justify-content: flex-start; }
  .footer-cta { align-items: flex-start; }
  .footer-cta .badges, .footer-cta .social { justify-content: flex-start; }
  .cta-buttons, .hero .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .button, .badges .store-badge { width: 100%; }
  .store-badge { justify-content: center; min-width: 0; }
  .hero__mosaic { opacity: 0.4; }            /* keep headline crisp on phones */
  .shelf__head { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  html { font-size: 15px; }
}

/* — Tablet & small laptops (≤960px) ————————————————————————————————— */
@media (max-width: 960px) {
  .section { padding-block: clamp(3rem, 7vw, 5rem); }
  .hero { padding-block: clamp(3.5rem, 10vw, 6rem) clamp(3rem, 7vw, 5rem); }
  .footer-top { gap: 1.75rem 2.5rem; }
}

/* — Large phones / small tablets (≤640px) ————————————————————————— */
@media (max-width: 640px) {
  .hero__mosaic { transform: rotate(-8deg) scale(2.1); }   /* fewer, larger tiles read better */
  .mover__track .poster { width: clamp(130px, 38vw, 165px); }
  .prose h3 { padding-left: 0.65rem; }
  .draft-banner { flex-direction: column; gap: 0.5rem; }
  .table-wrap { margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); border-radius: 0; border-left: none; border-right: none; }
}

/* — Small phones (≤480px) ——————————————————————————————————————— */
@media (max-width: 480px) {
  .badges, .footer-cta .badges { width: 100%; }
  .hero__track .poster { width: clamp(82px, 24vw, 116px); }
  .social__btn { width: 46px; height: 46px; }           /* comfortable tap targets */
  .step, .feature { padding: 1.5rem 1.35rem; }
  .cta-band { padding: clamp(2rem, 8vw, 2.75rem) clamp(1.1rem, 6vw, 1.75rem); }
  .prose { padding-block: clamp(2rem, 8vw, 3rem); }
}

/* — Very small phones (≤340px) ——————————————————————————————————— */
@media (max-width: 340px) {
  html { font-size: 14px; }
  .brand__logo { height: 38px; }
  .store-badge b { font-size: 0.85rem; }
}

/* — Large screens & 4K: let the layout breathe, cap line length ——————— */
@media (min-width: 1600px) {
  :root { --maxw: 1320px; }
  html { font-size: 17px; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1480px; }
  html { font-size: 18px; }
}

/* — Landscape phones (short viewport): trim the intro/hero height ———— */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { padding-block: 3rem 2.5rem; }
  .intro__logo { width: clamp(90px, 14vh, 130px); }
}

/* ============================================================================
   MOTION — keyframes, neon ticker, staggered reveals
   (play on every device — reduced-motion freeze intentionally removed)
   =========================================================================== */
@keyframes shimmer   { from { background-position: 0% center; } to { background-position: 220% center; } }
@keyframes sheen     { from { left: -160%; } to { left: 160%; } }
@keyframes marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes auroraSpin{ 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes mosaicUp  { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Neon genre ticker */
.ticker {
  overflow: hidden; padding-block: 0.9rem;
  background: var(--color-bg-2);
  border-block: 1px solid var(--neon-line);
  box-shadow: inset 0 1px 0 rgba(255,0,51,0.12), inset 0 -1px 0 rgba(255,0,51,0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee 32s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.95rem; color: var(--color-text); white-space: nowrap;
}
.ticker__track .dot { color: var(--color-accent); text-shadow: var(--neon-text); }

/* Staggered scroll reveals for grids */
.reveal--armed .features .reveal:nth-child(2),
.reveal--armed .steps .reveal:nth-child(2)    { transition-delay: 0.08s; }
.reveal--armed .features .reveal:nth-child(3),
.reveal--armed .steps .reveal:nth-child(3)    { transition-delay: 0.16s; }
.reveal--armed .features .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal--armed .features .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal--armed .features .reveal:nth-child(6) { transition-delay: 0.40s; }

/* ============================================================================
   CINEMATIC INTRO — CSS-only title card (homepage only)
   Plays once on load: black split-curtains hold while the logo lights up + a
   neon line draws and a tagline rises; then the curtains wipe apart (top up /
   bottom down) to reveal the hero, which itself rises in on a stagger.
   Pure CSS → CSP-safe, no JS, no third-party requests. fill:forwards leaves the
   overlay hidden + non-interactive after ~3.2s.
   =========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 100000; pointer-events: none;
  overflow: hidden;
  animation: introEnd 0.01s linear 3.2s forwards; /* fully remove after the wipe */
}
@keyframes introEnd { to { visibility: hidden; } }

/* Black curtains (the only opaque layer) — slide apart to reveal the page */
.intro__curtain {
  position: absolute; left: 0; right: 0; height: 50.5%; z-index: 1;
  background: #000;
}
.intro__curtain--t { top: 0;    animation: curtainUp   0.95s cubic-bezier(0.7,0,0.2,1) 2.25s forwards; }
.intro__curtain--b { bottom: 0; animation: curtainDown 0.95s cubic-bezier(0.7,0,0.2,1) 2.25s forwards; }
/* glowing neon seam on the inner edges */
.intro__curtain--t::after,
.intro__curtain--b::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--gradient-accent); box-shadow: 0 0 22px 2px rgba(255,0,51,0.85);
  opacity: 0; animation: seamGlow 2.25s ease forwards;
}
.intro__curtain--t::after { bottom: 0; }
.intro__curtain--b::after { top: 0; }
@keyframes seamGlow { 0%{opacity:0} 35%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
@keyframes curtainUp   { to { transform: translateY(-101%); } }
@keyframes curtainDown { to { transform: translateY(101%); } }

/* Neon glow wash behind the logo */
.intro__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(55vmax 55vmax at 50% 46%, rgba(255,0,51,0.32), transparent 62%);
  opacity: 0;
  animation: glowIn 1s var(--ease) 0.2s forwards, fadeFast 0.55s var(--ease) 1.95s forwards;
}
@keyframes glowIn { to { opacity: 1; } }
@keyframes fadeFast { to { opacity: 0; } }

/* Centered logo + line + tagline; whole core lifts & blurs out before the wipe */
.intro__core {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 1.15rem;
  text-align: center;
  animation: coreOut 0.6s var(--ease) 1.95s forwards;
}
@keyframes coreOut { to { opacity: 0; transform: scale(1.16); filter: blur(7px); } }

.intro__halo {
  position: absolute; top: 50%; left: 50%; width: 42vmin; height: 42vmin;
  transform: translate(-50%, -62%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,31,61,0.45), transparent 70%);
  filter: blur(14px); opacity: 0;
  animation: haloPulse 1.6s ease 0.35s forwards;
}
@keyframes haloPulse { 0%{opacity:0; transform:translate(-50%,-62%) scale(0.6)} 55%{opacity:1} 100%{opacity:0.8; transform:translate(-50%,-62%) scale(1)} }

.intro__logo {
  width: clamp(130px, 24vw, 230px); height: auto; position: relative;
  opacity: 0; transform: scale(0.7);
  animation: logoIn 1.05s var(--ease) 0.25s forwards;
}
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(0.7);              filter: drop-shadow(0 0 0 rgba(255,0,51,0)); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1);                filter: drop-shadow(0 0 30px rgba(255,0,51,0.7)); }
}

/* A single light streak sweeping across the title */
.intro__sweep {
  position: absolute; top: 50%; left: 50%; width: 80vmax; height: 32vmax;
  transform: translate(-50%, -50%) rotate(22deg); pointer-events: none;
  mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.16) 50%, transparent 58%);
  animation: sweepGo 1.15s var(--ease) 0.85s;
}
@keyframes sweepGo {
  0%   { opacity: 0; transform: translate(-140%, -50%) rotate(22deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(60%, -50%) rotate(22deg); }
}

.intro__line {
  width: 0; height: 2px; border-radius: 2px;
  background: var(--gradient-accent); box-shadow: 0 0 16px rgba(255,0,51,0.85);
  animation: lineExpand 0.7s var(--ease) 0.95s forwards;
}
@keyframes lineExpand { to { width: min(280px, 62vw); } }

.intro__tag {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.42em; padding-left: 0.42em;
  font-size: clamp(0.68rem, 1.7vw, 0.95rem); font-weight: 700;
  color: var(--color-text-secondary);
  opacity: 0; transform: translateY(10px);
  animation: tagIn 0.8s var(--ease) 1.25s forwards;
}
@keyframes tagIn { to { opacity: 1; transform: none; } }

/* Hero rises in as the curtains open (timed just after the wipe begins) */
.hero .eyebrow { animation: heroRise 0.85s var(--ease) 2.30s both; }
.hero h1       { animation: heroRise 0.95s var(--ease) 2.45s both; }
.hero .lead    { animation: heroRise 0.95s var(--ease) 2.62s both; }
.hero .badges  { animation: heroRise 0.95s var(--ease) 2.78s both; }
.hero__note    { animation: heroRise 0.95s var(--ease) 2.94s both; }
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }