/* ==========================================================================
   BONUS STUDIO — core.css
   Design system for creator casino-bonus pages.
   Every visual decision is driven by CSS custom properties so a single
   JSON theme block can restyle the entire page. No build step, no deps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- Brand accent (overwritten per creator by render.js) -- */
  --accent:        #4294f7;
  --accent-2:      #a855f7;
  --on-accent:     #05070c;

  /* Derived accent ramp. color-mix keeps every tint in lockstep with --accent,
     so changing one value in the editor recolours the whole page coherently. */
  --a-04:  color-mix(in oklab, var(--accent) 4%,  transparent);
  --a-08:  color-mix(in oklab, var(--accent) 8%,  transparent);
  --a-12:  color-mix(in oklab, var(--accent) 12%, transparent);
  --a-18:  color-mix(in oklab, var(--accent) 18%, transparent);
  --a-28:  color-mix(in oklab, var(--accent) 28%, transparent);
  --a-45:  color-mix(in oklab, var(--accent) 45%, transparent);
  --a-70:  color-mix(in oklab, var(--accent) 70%, transparent);
  --a-lift: color-mix(in oklab, var(--accent) 78%, #ffffff);
  --a-deep: color-mix(in oklab, var(--accent) 70%, #000000);

  /* -- Surfaces -- */
  --bg:        #08080b;
  --bg-2:      #0b0b11;
  --surface:   #101017;
  --surface-2: #15151e;
  --surface-3: #1b1b26;
  --line:      color-mix(in oklab, #ffffff 8%, transparent);
  --line-2:    color-mix(in oklab, #ffffff 14%, transparent);
  --line-3:    color-mix(in oklab, #ffffff 22%, transparent);

  /* -- Text -- */
  --text:    #f4f6fb;
  --text-2:  #c3c8d6;
  --muted:   #8b91a4;
  --muted-2: #6b7183;

  /* -- Semantic -- */
  --good: #37d67a;
  --warn: #ffc857;
  --bad:  #ff4d5e;
  --gold: #ffcf5c;

  /* -- Type -- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;

  /* Fluid type scale (1.250 minor third at the small end, 1.333 at the large) */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --t-xl:   clamp(1.5rem,  1.2vw + 1.1rem, 2rem);
  --t-2xl:  clamp(2rem,    2.4vw + 1.2rem, 3rem);
  --t-3xl:  clamp(2.5rem,  4.2vw + 1rem,   4.5rem);
  --t-hero: clamp(2.75rem, 5.6vw + 0.6rem, 6rem);

  /* -- Space (overridden by density) -- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(64px, 8vw, 120px);

  /* -- Shape -- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* -- Elevation -- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px -4px rgba(0,0,0,.5);
  --sh-3: 0 18px 48px -12px rgba(0,0,0,.65);
  --sh-4: 0 40px 90px -24px rgba(0,0,0,.8);

  /* -- Glow intensity (0–1, set from theme.glow) -- */
  --glow: 0.7;

  /* -- Layout -- */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 72px;

  /* -- Motion -- */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* ≈ gsap power3.out  */
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* ≈ gsap back.out(1.4) */
  --e-elastic: cubic-bezier(0.22, 1.61, 0.36, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 520ms;
  --motion-scale: 1;  /* 0 = subtle, 1 = standard, 1.6 = cinematic */
}

/* Density variants ------------------------------------------------------- */
:root[data-density="compact"]  { --section-y: clamp(44px, 5vw, 76px);  --maxw: 1120px; }
:root[data-density="spacious"] { --section-y: clamp(88px, 11vw, 176px); --maxw: 1280px; }

/* Motion tiers ----------------------------------------------------------- */
:root[data-motion="subtle"]    { --motion-scale: .45; --d-slow: 360ms; }
:root[data-motion="cinematic"] { --motion-scale: 1.5; --d-slow: 720ms; }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--a-45); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: var(--r-md); font-weight: 700;
  transition: top var(--d-base) var(--e-out);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. AMBIENT BACKGROUND — aurora mesh + grain + vignette
   Purely decorative, transform/opacity-only so it never touches layout.
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
.ambient::after { /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 30%, var(--bg) 100%);
}
.aurora {
  position: absolute;
  width: 68vmax; height: 68vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: calc(.26 * var(--glow));
  will-change: transform;
  mix-blend-mode: screen;
}
.aurora-1 { background: radial-gradient(circle, var(--accent) 0%, transparent 65%);   top: -26vmax; left: -14vmax; animation: drift-1 26s var(--e-inout) infinite; }
.aurora-2 { background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%); top: -10vmax; right: -22vmax; animation: drift-2 32s var(--e-inout) infinite; }
.aurora-3 { background: radial-gradient(circle, var(--accent) 0%, transparent 70%);   bottom: -34vmax; left: 24vmax; opacity: calc(.16 * var(--glow)); animation: drift-3 38s var(--e-inout) infinite; }

@keyframes drift-1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); } }
@keyframes drift-2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-14vmax, 12vmax, 0) scale(.92); } }
@keyframes drift-3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10vmax, -10vmax, 0) scale(1.2); } }

:root[data-aurora="off"] .aurora { display: none; }

/* Fine film grain — 1 tiny inline SVG, tiled. Adds perceived depth/quality. */
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 6s steps(6) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}
:root[data-grain="off"] .grain { display: none; }

/* Scroll progress bar ---------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--a-70);
  will-change: transform;
}

/* Cursor glow (desktop, fine pointer only) ------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .cursor-glow {
    position: fixed; z-index: 2; pointer-events: none;
    width: 480px; height: 480px; border-radius: 50%;
    left: 0; top: 0; margin: -240px 0 0 -240px;
    background: radial-gradient(circle, var(--a-12) 0%, transparent 62%);
    transform: translate3d(var(--cx, 50vw), var(--cy, 50vh), 0);
    opacity: 0; transition: opacity 600ms var(--e-out);
    will-change: transform;
  }
  .cursor-glow.on { opacity: calc(1 * var(--glow)); }
}
@media not all and (hover: hover) { .cursor-glow { display: none; } }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.site { position: relative; z-index: 3; }
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }

.section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.section-head.center { text-align: center; margin-inline: auto; max-width: 720px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--a-08);
  border: 1px solid var(--a-28);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse-dot 2.4s var(--e-inout) infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

.section-title { font-size: var(--t-2xl); }
.section-title .accent { color: var(--accent); }
.section-sub { color: var(--muted); font-size: var(--t-md); margin-top: var(--s-3); max-width: 62ch; }
.section-head.center .section-sub { margin-inline: auto; }

/* Gradient text ---------------------------------------------------------- */
.grad-text {
  background: linear-gradient(100deg, var(--text) 10%, var(--accent) 55%, var(--accent-2) 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: grad-pan 8s var(--e-inout) infinite alternate;
}
@keyframes grad-pan { to { background-position: 100% 0; } }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              background-color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px) scale(.985); }

/* Sweeping specular highlight on hover — pure transform, composited. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms var(--e-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary {
  background: linear-gradient(135deg, var(--a-lift), var(--accent) 55%, var(--a-deep));
  color: var(--on-accent);
  box-shadow: 0 8px 24px -8px var(--a-70), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px var(--a-70), 0 0 calc(34px * var(--glow)) var(--a-45),
              inset 0 1px 0 rgba(255,255,255,.34);
}

.btn-ghost {
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  color: var(--text);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: var(--a-45); background: var(--a-08); transform: translateY(-2px); }

.btn-outline { border: 1px solid var(--a-45); color: var(--accent); background: var(--a-04); }
.btn-outline:hover { background: var(--a-12); transform: translateY(-2px); }

.btn-lg { min-height: 56px; padding: 0 34px; font-size: var(--t-md); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* Slow breathing glow for the single most important CTA on screen */
.btn-pulse { animation: cta-breathe 2.6s var(--e-inout) infinite; }
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 8px 24px -8px var(--a-70), 0 0 0 0 var(--a-45); }
  50%      { box-shadow: 0 8px 24px -8px var(--a-70), 0 0 calc(30px * var(--glow)) 3px var(--a-45); }
}

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              backdrop-filter var(--d-base);
  border-bottom: 1px solid transparent;
}
.topbar.stuck {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
}
/* NB: no `width:100%` here — it would win over .wrap's clamped width and
   push the brand flush against the viewport edge. */
.topbar-in { display: flex; align-items: center; gap: var(--s-5); }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 38px; width: auto; max-height: calc(var(--nav-h) - 18px); object-fit: contain; }
footer .brand img { height: 56px; max-height: none; }
.brand-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.3rem; letter-spacing: -0.04em;
  background: linear-gradient(100deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: var(--t-base); font-weight: 500; color: var(--muted);
  transition: color var(--d-fast) var(--e-out);
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); }
.nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px var(--accent);
}

.topbar-right { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in oklab, var(--bad) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--bad) 42%, transparent);
  color: #ff8a95;
}
.live-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 8px var(--bad); animation: pulse-dot 1.6s var(--e-inout) infinite;
}

/* Language switcher ------------------------------------------------------ */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--text-2);
  font-size: var(--t-sm); font-weight: 600;
  transition: border-color var(--d-fast), background-color var(--d-fast);
}
.lang-btn:hover { border-color: var(--line-2); background: var(--a-04); }
.lang-btn svg.chev { width: 11px; height: 11px; opacity: .6; transition: transform var(--d-base) var(--e-out); }
.lang.open .lang-btn svg.chev { transform: rotate(180deg); }
.lang-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex: none; }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 158px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 6px; box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
  z-index: 10;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--text-2); text-align: left;
  transition: background-color var(--d-fast);
}
.lang-menu button:hover { background: var(--a-08); color: var(--text); }
.lang-menu button.active { color: var(--accent); background: var(--a-08); }

/* Burger ----------------------------------------------------------------- */
.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) var(--gutter) var(--s-6);
  display: grid; gap: 2px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-slow) var(--e-out);
}
.mobile-menu.open { clip-path: inset(0 0 0 0); }
.mobile-menu a {
  padding: 15px 12px; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600;
  color: var(--text-2);
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--e-out), transform 380ms var(--e-out), background-color var(--d-fast);
}
.mobile-menu.open a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 90ms); }
.mobile-menu a:hover { background: var(--a-08); color: var(--text); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.hero h1 {
  font-size: var(--t-hero);
  margin-bottom: var(--s-5);
}
.hero h1 .accent {
  position: relative; color: var(--accent);
  text-shadow: 0 0 calc(46px * var(--glow)) var(--a-70);
}
/* Underline that draws itself in once the headline has landed */
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .07em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px; transform: scaleX(0); transform-origin: 0 50%;
  animation: draw-underline 900ms var(--e-out) 900ms forwards;
}
@keyframes draw-underline { to { transform: scaleX(1); } }

.hero-copy { font-size: var(--t-md); color: var(--text-2); max-width: 54ch; margin-bottom: var(--s-3); }
.hero-note { font-size: var(--t-sm); color: var(--muted-2); max-width: 54ch; margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }

/* Stat strip ------------------------------------------------------------- */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.stat-v {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(120deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-l { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; letter-spacing: .04em; }

/* Promo carousel --------------------------------------------------------- */
.promo-stack {
  position: relative; height: 420px;
  perspective: 1400px;
  display: grid; place-items: center;
}
.promo-card {
  --pc: var(--accent);
  position: absolute; width: min(340px, 84vw); padding: 30px 26px 26px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--pc) 26%, transparent), transparent 62%),
    linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid color-mix(in oklab, var(--pc) 40%, transparent);
  box-shadow: var(--sh-4), 0 0 calc(60px * var(--glow)) color-mix(in oklab, var(--pc) 22%, transparent),
              inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
  transition: transform 780ms var(--e-out), opacity 780ms var(--e-out), filter 780ms var(--e-out);
  will-change: transform, opacity;
}
.promo-card[data-pos="0"]  { transform: translate3d(0,0,0) rotateY(0deg) scale(1);            opacity: 1;   z-index: 3; }
.promo-card[data-pos="1"]  { transform: translate3d(16%, 22px, -140px) rotateY(-16deg) scale(.9); opacity: .5; z-index: 2; filter: blur(1.5px); }
.promo-card[data-pos="-1"] { transform: translate3d(-16%, 22px, -140px) rotateY(16deg) scale(.9); opacity: .5; z-index: 2; filter: blur(1.5px); }
.promo-card[data-pos="hidden"] { transform: translate3d(0, 40px, -300px) scale(.82); opacity: 0; z-index: 1; pointer-events: none; }

.pc-logo {
  height: 46px; display: grid; place-items: center; margin-bottom: var(--s-4);
}
.pc-logo img { max-height: 46px; width: auto; }
.pc-logo .pc-logo-text {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -0.03em; color: var(--pc);
}
.pc-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-2);
}
.pc-big {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 2.9rem); letter-spacing: -0.045em; line-height: 1;
  color: #fff; text-shadow: 0 0 calc(40px * var(--glow)) color-mix(in oklab, var(--pc) 80%, transparent);
  word-break: break-word;
}
.pc-sub { font-size: var(--t-sm); color: var(--muted); margin: var(--s-3) 0 var(--s-5); }
.pc-cta {
  width: 100%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--pc) 82%, #fff), var(--pc));
  color: #08080b;
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--pc) 70%, transparent);
}
.pc-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px color-mix(in oklab, var(--pc) 70%, transparent); }

.promo-nav {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-3); z-index: 5;
}
.promo-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.promo-arrow:hover { border-color: var(--accent); transform: scale(1.1); }
.promo-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.promo-dots { display: flex; gap: 7px; }
.promo-dots button {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--line-3); transition: all var(--d-base) var(--e-out);
}
.promo-dots button.active { width: 22px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Portrait stage ---------------------------------------------------------
   Alternative to the promo carousel: the creator's own cut-out portrait,
   lit from behind. Used when hero.portrait.src is set.
   ------------------------------------------------------------------------ */
.portrait-stage {
  position: relative;
  display: grid; place-items: end center;
  min-height: clamp(420px, 50vw, 660px);
  isolation: isolate;
}

/* Key light behind the subject. Deliberately NOT blurred: a blur() here
   smeared the accent colour into a haze around the cut-out and made the whole
   corner read as out of focus. A plain radial gradient gives the same glow
   with hard-edged pixels. */
.portrait-glow {
  position: absolute; z-index: 0;
  left: 50%; top: 46%; translate: -50% -50%;
  /* Capped at 100% of the stage: any wider and the halo pushes the document
     past the viewport on narrow screens. */
  width: min(100%, 620px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in oklab, var(--accent) 26%, transparent) 0%,
              color-mix(in oklab, var(--accent) 12%, transparent) 34%,
              color-mix(in oklab, var(--accent-2) 5%, transparent) 56%,
              transparent 72%);
  opacity: calc(.7 * var(--glow));
  animation: portrait-breathe 7s var(--e-inout) infinite;
  will-change: scale, opacity;
}
/* These keyframes drive the independent `scale` / `translate` / `rotate`
   properties rather than `transform`, so the scroll-parallax engine — which
   writes `transform` — composes with them instead of overwriting them. */
@keyframes portrait-breathe {
  0%, 100% { scale: 1;    opacity: calc(.55 * var(--glow)); }
  50%      { scale: 1.09; opacity: calc(.78 * var(--glow)); }
}

/* Thin halo arc. The conic gradient is masked to a ring and spun slowly. */
.portrait-ring {
  position: absolute; z-index: 1;
  left: 50%; top: 44%; translate: -50% -50%;
  width: min(88%, 480px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
              transparent 0deg,
              color-mix(in oklab, var(--accent) 85%, transparent) 55deg,
              color-mix(in oklab, var(--accent-2) 70%, transparent) 90deg,
              transparent 150deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
  opacity: calc(.65 * var(--glow));
  animation: halo-spin 14s linear infinite;
  will-change: rotate;
}
@keyframes halo-spin { to { rotate: 360deg; } }

.portrait-img {
  position: relative; z-index: 2;
  height: clamp(380px, 46vw, 620px);
  width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  animation: portrait-float 8s var(--e-inout) infinite;
  will-change: translate;
  /* Extra bottom fade so she reads as emerging from the page, not pasted on. */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
@keyframes portrait-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-14px * var(--motion-scale)); }
}

/* Floating glass code chip. */
/* Two classes so this beats .code-box's `width:100%`, which is defined
   later in the file for the casino cards. */
.code-box.portrait-chip {
  position: absolute; z-index: 3;
  left: 0; bottom: clamp(24px, 6vw, 64px);
  width: auto; min-width: 172px;
  background: color-mix(in oklab, var(--surface-2) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  border-style: solid;
  box-shadow: var(--sh-3), 0 0 calc(40px * var(--glow)) var(--a-28);
  animation: chip-float 6.5s var(--e-inout) infinite;
}
@keyframes chip-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-9px * var(--motion-scale)); }
}
/* Hover uses `translate` too — `transform` is reserved for the mobile
   centering below, and the two must not fight. */
.portrait-chip:hover { animation-play-state: paused; translate: 0 -3px; }

/* A second, quieter chip for a proof point (rating, payouts, members…). */
.portrait-badge {
  position: absolute; z-index: 3;
  right: 0; top: clamp(20px, 6vw, 70px);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-2);
  animation: chip-float 6.5s var(--e-inout) 1.4s infinite;
}
.portrait-badge svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

@media (max-width: 900px) {
  .portrait-stage { min-height: 0; order: -1; margin-bottom: var(--s-4); }
  .portrait-img { height: clamp(300px, 62vw, 440px); }
  /* Must match the .code-box.portrait-chip specificity above, or `left:0`
     wins and translateX(-50%) drags the chip off the left edge. */
  .code-box.portrait-chip { left: 50%; transform: translateX(-50%); bottom: 6px; }
  .portrait-badge { right: 0; top: 0; font-size: var(--t-xs); padding: 8px 12px; }
}

/* --------------------------------------------------------------------------
   8. MARQUEE (partner ticker)
   -------------------------------------------------------------------------- */
/* The Nigerian flag rendered as a fixed band across the strip: white at the
   edges, green through the middle. The band never moves — the text scrolls
   through it, so each item lights up green as it crosses centre.
   --ng-green is the flag's official green. */
.marquee {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(16px, 2.2vw, 26px);
  border-block: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  background:
    linear-gradient(90deg, transparent, var(--a-08) 42%, var(--a-08) 58%, transparent),
    color-mix(in oklab, var(--surface) 40%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Accent core light behind the strip. A plain gradient, not a blend overlay:
   mix-blend-mode fights the edge mask above and washes the bar out to grey. */
.marquee::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 160% at 50% 50%, var(--a-28), transparent 70%);
  animation: marquee-pulse 4s var(--e-inout) infinite;
}
@keyframes marquee-pulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

.marquee-track {
  position: relative; z-index: 1;
  display: flex; align-items: center; width: max-content;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-inline: clamp(18px, 2.6vw, 38px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: .04em; text-transform: uppercase;
  color: #ffffff; white-space: nowrap;
  text-shadow: 0 0 calc(18px * var(--glow)) rgba(255, 255, 255, .18);
}
.marquee-item img { height: 26px; width: auto; }

/* White · accent · white, repeating. The colour band is static; the motion
   comes from the items travelling through it. */
.marquee-item:nth-child(3n + 2) {
  color: var(--accent);
  text-shadow: 0 0 calc(24px * var(--glow)) var(--a-70);
}

/* The "stop" between entries, in the secondary colour. */
.marquee-item + .marquee-item::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--accent-2); opacity: .9;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Travels left → right. The track holds the item list twice, so starting at
   -50% and easing to 0 lets items leave on the right and re-enter on the
   left with no visible seam. */
@keyframes marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   9. CASINO CARDS — the core conversion unit
   -------------------------------------------------------------------------- */
.casino-list { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.casino-card {
  --cc: var(--accent);
  position: relative; isolation: isolate;
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3vw, 38px);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line-2);
  overflow: hidden;
  transition: transform var(--d-slow) var(--e-out),
              box-shadow var(--d-slow) var(--e-out),
              border-color var(--d-base) var(--e-out);
  transform-style: preserve-3d;
}
.casino-card::before { /* accent wash */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(90% 130% at 100% 0%, color-mix(in oklab, var(--cc) 22%, transparent), transparent 58%);
  opacity: .85;
}
.casino-card::after { /* cursor spotlight, fed by --mx/--my from motion.js */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--cc) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--d-slow) var(--e-out);
}
.casino-card:hover::after { opacity: 1; }
.casino-card:hover {
  border-color: color-mix(in oklab, var(--cc) 55%, transparent);
  box-shadow: var(--sh-3), 0 0 calc(60px * var(--glow)) color-mix(in oklab, var(--cc) 18%, transparent);
}

.casino-card.featured {
  border-color: color-mix(in oklab, var(--cc) 50%, transparent);
  box-shadow: var(--sh-3), 0 0 calc(50px * var(--glow)) color-mix(in oklab, var(--cc) 16%, transparent);
}
/* Rotating conic border for the featured row. Uses @property so the
   gradient angle is genuinely animatable rather than snapping. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.casino-card.featured::before {
  background:
    conic-gradient(from var(--spin), transparent 0deg, color-mix(in oklab, var(--cc) 40%, transparent) 40deg, transparent 110deg, transparent 360deg),
    radial-gradient(90% 130% at 100% 0%, color-mix(in oklab, var(--cc) 20%, transparent), transparent 58%);
  animation: spin-border 7s linear infinite;
  opacity: .9;
}
@keyframes spin-border { to { --spin: 360deg; } }

.cc-grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 210px;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

/* Rank chip / ribbon ----------------------------------------------------- */
.cc-rank {
  position: absolute; top: 0; left: 0; z-index: 4;
  min-width: 46px; height: 40px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: 0 0 var(--r-lg) 0;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  background: linear-gradient(135deg, var(--cc), color-mix(in oklab, var(--cc) 60%, #000));
  color: var(--on-accent);
}
.cc-ribbon {
  position: absolute; top: 0; left: 0; z-index: 5;
  padding: 9px 20px 9px 18px;
  border-radius: 0 0 var(--r-lg) 0;
  background: linear-gradient(135deg, #ffe9a8, var(--gold) 48%, #d9971a);
  color: #3a2a00;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
  white-space: nowrap;
}
.cc-ribbon::after { /* glint */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform: translateX(-140%); animation: glint 4.2s var(--e-inout) infinite;
}
@keyframes glint { 0%, 62% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
.casino-card.has-ribbon .cc-rank { display: none; }

/* Logo tile -------------------------------------------------------------- */
.cc-logo {
  position: relative;
  aspect-ratio: 1; width: 100%; max-width: 168px;
  border-radius: var(--r-xl);
  display: grid; place-items: center; padding: 18px;
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--cc) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 calc(30px * var(--glow)) color-mix(in oklab, var(--cc) 20%, transparent);
  overflow: hidden;
  transition: transform var(--d-slow) var(--e-out);
}
.casino-card:hover .cc-logo { transform: scale(1.04) rotate(-1.2deg); }
.cc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cc-logo-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -0.04em;
  text-align: center; color: var(--cc); line-height: 1.1;
  text-shadow: 0 0 calc(28px * var(--glow)) color-mix(in oklab, var(--cc) 70%, transparent);
}
.cc-rating {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px;
}
.cc-rating svg { width: 12px; height: 12px; fill: var(--gold); }
.cc-rating svg.off { fill: var(--line-3); }

/* Offers ----------------------------------------------------------------- */
.cc-offers { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 52px); }
.cc-offer { min-width: 0; }
.o-label {
  font-size: var(--t-sm); font-weight: 700; color: var(--text-2);
  letter-spacing: .02em; margin-bottom: 4px;
}
.o-value { font-size: var(--t-base); color: var(--text-2); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.o-value b {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1;
  color: var(--cc);
  text-shadow: 0 0 calc(30px * var(--glow)) color-mix(in oklab, var(--cc) 55%, transparent);
}
.o-wager { display: inline-block; margin-top: 7px; font-size: var(--t-sm); color: var(--muted); }
.o-wager b { color: var(--text); font-weight: 700; }

.cc-checks { display: grid; gap: 9px; margin-top: var(--s-4); }
.cc-checks.two-col { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--s-6); row-gap: 9px; }
.cc-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-base); color: var(--text-2); line-height: 1.35; }
.cc-checks svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--cc); }

.cc-features {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.cc-pay {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-2);
}
.cc-pay > svg { width: 17px; height: 17px; fill: var(--cc); flex: none; }

.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-2);
}
.tag.hl { color: var(--cc); border-color: color-mix(in oklab, var(--cc) 50%, transparent); background: color-mix(in oklab, var(--cc) 10%, transparent); }

/* Side column: code + CTA ------------------------------------------------ */
.cc-side { display: grid; gap: var(--s-3); align-content: center; }

.code-box {
  position: relative; overflow: hidden;
  border: 1.5px dashed color-mix(in oklab, var(--cc) 55%, transparent);
  border-radius: var(--r-md); padding: 11px 14px;
  background: color-mix(in oklab, var(--cc) 6%, transparent);
  text-align: center; width: 100%;
  transition: background-color var(--d-base), border-color var(--d-base), transform var(--d-fast) var(--e-out);
}
.code-box:hover { background: color-mix(in oklab, var(--cc) 12%, transparent); transform: translateY(-1px); }
.code-box small {
  display: block; font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  color: var(--muted-2); text-transform: uppercase; margin-bottom: 3px;
}
.code-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 800;
  letter-spacing: .06em; color: var(--cc);
}
.code-line svg { width: 15px; height: 15px; fill: currentColor; opacity: .7; }
.code-box.copied { border-style: solid; border-color: var(--good); background: color-mix(in oklab, var(--good) 12%, transparent); }
.code-box.copied .code-line { color: var(--good); }
.code-box.copied::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--good) 35%, transparent), transparent 70%);
  animation: copy-ping 620ms var(--e-out) forwards;
}
@keyframes copy-ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.cc-play {
  background: linear-gradient(135deg, color-mix(in oklab, var(--cc) 80%, #fff), var(--cc) 55%, color-mix(in oklab, var(--cc) 65%, #000));
  color: var(--on-accent);
  box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--cc) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
.cc-play:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px color-mix(in oklab, var(--cc) 70%, transparent); }

.details-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t-sm); font-weight: 600; color: var(--muted); padding: 8px;
  border-radius: var(--r-sm); transition: color var(--d-fast), background-color var(--d-fast);
}
.details-toggle:hover { color: var(--text); background: var(--a-04); }
.details-toggle > svg { width: 15px; height: 15px; flex: none; }
.details-toggle .chev { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--d-base) var(--e-out); }
.details-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-2px); }

/* Details drawer — grid-rows trick animates height without layout thrash */
.cc-details {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out), margin-top var(--d-slow) var(--e-out);
  margin-top: 0;
}
.cc-details > div { overflow: hidden; min-height: 0; }
.cc-details.open { grid-template-rows: 1fr; margin-top: var(--s-6); }

.cc-details details {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden;
  transition: border-color var(--d-base);
}
.cc-details details[open] { border-color: color-mix(in oklab, var(--cc) 40%, transparent); }
.cc-details summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-base); color: var(--text-2);
  transition: background-color var(--d-fast);
}
.cc-details summary::-webkit-details-marker { display: none; }
.cc-details summary:hover { background: var(--a-04); }
.cc-details summary b { color: var(--text); font-family: var(--font-display); }
.cc-details summary .sum-chev {
  margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); transition: transform var(--d-base) var(--e-out);
}
.cc-details details[open] summary .sum-chev { transform: rotate(-135deg); }
.d-body {
  padding: 0 22px 20px; font-size: var(--t-base); color: var(--text-2);
  animation: fade-slide 400ms var(--e-out);
}
.d-body p { margin-bottom: 10px; }
.d-body strong { color: var(--text); }
@keyframes fade-slide { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------------------
   10. TRUST / FEATURE BENTO
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.bento-card {
  position: relative; overflow: hidden;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  transition: transform var(--d-slow) var(--e-out), border-color var(--d-base), box-shadow var(--d-slow) var(--e-out);
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--a-45);
  box-shadow: var(--sh-3), 0 0 calc(46px * var(--glow)) var(--a-18);
}
.bento-icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: var(--a-12); border: 1px solid var(--a-28); color: var(--accent);
}
.bento-icon svg { width: 22px; height: 22px; }
.bento-card h3 { font-size: var(--t-lg); margin-bottom: 8px; }
.bento-card p { font-size: var(--t-base); color: var(--muted); }

/* --------------------------------------------------------------------------
   11. COMMUNITY BANNER
   -------------------------------------------------------------------------- */
.community {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-2xl);
  background: linear-gradient(120deg, var(--surface-2), var(--surface) 55%, color-mix(in oklab, var(--accent-2) 14%, var(--surface)));
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}
.community::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 140% at 15% 0%, var(--a-18), transparent 60%);
}
.community > * { position: relative; z-index: 1; }
.community-mark { width: clamp(52px, 7vw, 84px); height: auto; color: var(--accent); filter: drop-shadow(0 0 calc(24px * var(--glow)) var(--a-70)); }
.community h2 { font-size: var(--t-xl); margin-bottom: 8px; }
.community p { color: var(--muted); font-size: var(--t-base); max-width: 52ch; }
.community-side { display: grid; gap: 10px; justify-items: center; }
.community-count { font-size: var(--t-sm); color: var(--muted); }
.community-count b { color: var(--text); font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   11a. GIVEAWAY  (entry-based prize draw)
   The loudest block on the page: it is the one thing a first-time visitor
   can act on without depositing anything.
   -------------------------------------------------------------------------- */
.giveaway {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(32px, 5vw, 64px) clamp(22px, 4vw, 56px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 120% at 50% -10%, var(--a-28), transparent 60%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: var(--sh-3), 0 0 calc(70px * var(--glow)) var(--a-18);
  text-align: center;
}
/* Slow sweep of light across the panel, so the block reads as "live". */
.giveaway::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--spin),
              transparent 0deg,
              color-mix(in oklab, var(--accent) 26%, transparent) 30deg,
              transparent 90deg, transparent 360deg);
  animation: spin-border 9s linear infinite;
  opacity: .55;
}

.gv-head { max-width: 780px; margin-inline: auto; }
.gv-pool {
  font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .95;
  background: linear-gradient(100deg, var(--text) 6%, var(--accent) 46%, var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(40px * var(--glow)) var(--a-45));
}
.gv-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); margin-top: var(--s-3); color: var(--text);
}
.gv-text { color: var(--muted); font-size: var(--t-md); margin-top: var(--s-3); }
.gv-head .countdown { margin-top: var(--s-5); }

/* Prize grid ------------------------------------------------------------ */
.gv-prizes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--s-3); margin-top: clamp(28px, 4vw, 48px);
}
.gv-prize {
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--surface-3) 55%, transparent);
  border: 1px solid var(--line);
  transition: transform var(--d-slow) var(--e-out), border-color var(--d-base), box-shadow var(--d-slow) var(--e-out);
}
.gv-prize:hover {
  transform: translateY(-5px);
  border-color: var(--a-45);
  box-shadow: var(--sh-2), 0 0 calc(40px * var(--glow)) var(--a-18);
}
.gv-ic {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center; margin: 0 auto var(--s-3);
  background: var(--a-12); border: 1px solid var(--a-28); color: var(--accent);
}
.gv-ic svg { width: 20px; height: 20px; }
.gv-val {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.035em; line-height: 1.1;
  color: var(--accent);
  text-shadow: 0 0 calc(26px * var(--glow)) var(--a-45);
}
.gv-t { font-size: var(--t-base); color: var(--text-2); margin-top: 6px; font-weight: 600; }
.gv-n { font-size: var(--t-xs); color: var(--muted-2); margin-top: 3px; }

/* Entry steps ----------------------------------------------------------- */
.gv-how { margin-top: clamp(30px, 4vw, 52px); }
.gv-how h3 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.gv-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3); text-align: left;
  counter-reset: gv;
}
.gv-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface-3) 40%, transparent);
  border: 1px solid var(--line);
}
.gv-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--a-lift), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 0 calc(20px * var(--glow)) var(--a-45);
}
.gv-steps b { display: block; font-size: var(--t-base); color: var(--text); }
/* Scoped to the text column: a bare `.gv-steps span` also matches .gv-num
   and, being more specific, would repaint the step digit muted grey and
   knock it out of its centred grid. */
.gv-steps li > div > span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 3px; line-height: 1.45; }

.gv-cta { margin-top: clamp(26px, 3.5vw, 42px); }
.gv-note {
  display: inline-flex; gap: 9px; align-items: flex-start; text-align: left;
  margin-top: var(--s-5); max-width: 62ch;
  font-size: var(--t-sm); color: var(--muted-2); line-height: 1.5;
}
.gv-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

@media (max-width: 620px) {
  .gv-steps { text-align: left; }
  .giveaway { text-align: center; }
}

/* --------------------------------------------------------------------------
   11a2. STORE  (the creator's retail brand)
   Reads as a second brand, not a sponsor banner: its own frame, its own
   rhythm, sitting between the giveaway and the trust cards.
   -------------------------------------------------------------------------- */
.store {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.st-tagline {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); color: var(--accent);
  margin-top: var(--s-2);
  text-shadow: 0 0 calc(26px * var(--glow)) var(--a-45);
}
.st-copy .section-sub { margin-top: var(--s-3); }

.st-points { display: grid; gap: 11px; margin: var(--s-5) 0; }
.st-points li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-base); color: var(--text-2); }
.st-points svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

.st-addr {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 15px; border-radius: var(--r-lg);
  background: var(--a-08); border: 1px solid var(--a-28);
  font-size: var(--t-sm); color: var(--text-2);
  margin-bottom: var(--s-5);
}
.st-addr svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

.st-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.st-visual {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3), 0 0 calc(60px * var(--glow)) var(--a-18);
  aspect-ratio: 4 / 5;
}
.st-visual img { width: 100%; height: 100%; object-fit: cover; }
.st-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--bg) 75%, transparent));
}

@media (max-width: 900px) {
  .store { grid-template-columns: 1fr; }
  .st-visual { order: -1; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   11b. PARTNERS  (B2B block — operators pitching for a deal)
   Visually distinct from the player-facing sections so an operator
   immediately recognises it as addressed to them.
   -------------------------------------------------------------------------- */
.partners {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(30px, 4.5vw, 60px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(90% 130% at 100% 0%, var(--a-18), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}
.partners::after { /* hairline top accent */
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .7;
}
.pt-copy .section-sub { margin-bottom: var(--s-5); }

.pt-points { display: grid; gap: 12px; margin-bottom: var(--s-5); }
.pt-points li { display: flex; gap: 12px; align-items: flex-start; }
.pt-points svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); }
.pt-points b { display: block; font-size: var(--t-base); color: var(--text); }
.pt-points span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }

/* The "don't waste our time" line. Warning-toned rather than accent-toned so
   it reads as a condition, not a feature. */
.pt-note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.5;
}
.pt-note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--warn); }

.pt-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.pt-stats { display: grid; gap: var(--s-3); }
.pt-stat {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--surface-3) 60%, transparent);
  border: 1px solid var(--line);
  transition: border-color var(--d-base), transform var(--d-slow) var(--e-out);
}
.pt-stat:hover { border-color: var(--a-45); transform: translateX(4px); }
.pt-v {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.045em;
  background: linear-gradient(120deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pt-l { font-size: var(--t-base); color: var(--text-2); margin-top: 8px; font-weight: 600; }
.pt-n { font-size: var(--t-xs); color: var(--muted-2); margin-top: 3px; }

@media (max-width: 900px) {
  .partners { grid-template-columns: 1fr; }
  .pt-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  overflow: hidden; transition: border-color var(--d-base), background-color var(--d-base);
}
.faq details[open] { border-color: var(--a-45); background: var(--surface-2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px; display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-ic {
  margin-left: auto; flex: none; position: relative; width: 14px; height: 14px;
}
.faq summary .q-ic::before, .faq summary .q-ic::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; border-radius: 2px;
  background: var(--accent); transform: translateY(-50%);
  transition: transform var(--d-base) var(--e-out);
}
.faq summary .q-ic::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary .q-ic::after { transform: translateY(-50%) rotate(0deg); }
.faq .a-body { padding: 0 22px 20px; color: var(--muted); animation: fade-slide 400ms var(--e-out); }

/* --------------------------------------------------------------------------
   12b. LEADERBOARD
   -------------------------------------------------------------------------- */
.lb-hero {
  text-align: center;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(32px, 5vw, 64px);
}
.lb-pool {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .95;
  background: linear-gradient(100deg, var(--text) 8%, var(--accent) 48%, var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(44px * var(--glow)) var(--a-45));
}
.lb-headline {
  font-size: var(--t-md); color: var(--text-2);
  max-width: 60ch; margin: var(--s-4) auto 0;
}

/* Countdown ------------------------------------------------------------- */
.countdown {
  display: inline-flex; align-items: flex-end; gap: 6px;
  margin-top: var(--s-6); padding: 14px 20px;
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--surface-2) 72%, transparent);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-2), 0 0 calc(40px * var(--glow)) var(--a-12);
}
.cd-cell { display: grid; justify-items: center; gap: 4px; min-width: 56px; }
.cd-v {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cd-v.flip { animation: cd-flip 420ms var(--e-out); }
@keyframes cd-flip {
  from { opacity: .2; transform: translateY(-38%) rotateX(58deg); }
  to   { opacity: 1;  transform: none; }
}
.cd-l {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}
.cd-sep {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--muted-2);
  padding-bottom: 18px;
  animation: pulse-dot 2s var(--e-inout) infinite;
}
.countdown.ended .cd-v { color: var(--muted-2); }

/* Podium ---------------------------------------------------------------- */
/* The hero already carries generous bottom padding — a full section rhythm
   on top of it leaves a dead band above the podium. */
#prizes { padding-top: clamp(20px, 2.5vw, 40px); }

.podium {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.podium-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-2xl);
  background: linear-gradient(168deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--line-2);
  transition: transform var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out), border-color var(--d-base);
}
.podium-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 120% at 50% 0%, var(--pm-glow, var(--a-28)), transparent 62%);
}
.podium-card:hover { box-shadow: var(--sh-3), 0 0 calc(54px * var(--glow)) var(--pm-glow, var(--a-28)); }

/* 1st is visually centred and taller on wide screens, but stays first in
   the DOM so tab order and screen readers follow the real ranking. */
.podium-card.place-1 { --pm: #ffd15a; --pm-glow: rgba(255, 209, 90, .3); border-color: rgba(255, 209, 90, .5); }
.podium-card.place-2 { --pm: #cfd8e6; --pm-glow: rgba(207, 216, 230, .22); border-color: rgba(207, 216, 230, .38); }
.podium-card.place-3 { --pm: #e0955a; --pm-glow: rgba(224, 149, 90, .22); border-color: rgba(224, 149, 90, .4); }
@media (min-width: 900px) {
  .podium { grid-template-columns: repeat(3, 1fr); align-items: center; }
  .podium-card.place-1 { order: 2; transform: scale(1.055); z-index: 2; }
  .podium-card.place-2 { order: 1; }
  .podium-card.place-3 { order: 3; }
  .podium-card.place-1:hover { transform: scale(1.075) translateY(-3px); }
}

.podium-rank {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.4rem, 7vw, 5.4rem); line-height: 1;
  padding: 4px 18px 0 0;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--pm) 55%, transparent);
  opacity: .5; pointer-events: none;
}
.podium-ic {
  width: 50px; height: 50px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: color-mix(in oklab, var(--pm) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--pm) 42%, transparent);
  color: var(--pm);
}
.podium-ic svg { width: 24px; height: 24px; }
.podium-card h3 {
  font-size: var(--t-lg); margin-bottom: var(--s-4);
  color: var(--pm);
}
.podium-list { display: grid; gap: 10px; margin-bottom: var(--s-5); flex: 1; }
.podium-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-base); color: var(--text-2); line-height: 1.4; }
.podium-list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--pm); }
.podium-cash {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.04em;
  color: var(--pm);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  text-shadow: 0 0 calc(28px * var(--glow)) color-mix(in oklab, var(--pm) 55%, transparent);
}

/* How to enter ---------------------------------------------------------- */
.lb-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.lb-step {
  display: flex; gap: 16px;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border: 1px solid var(--line);
  transition: border-color var(--d-base), transform var(--d-slow) var(--e-out);
}
.lb-step:hover { border-color: var(--a-45); transform: translateY(-3px); }
.lb-step .bento-icon { margin-bottom: 0; flex: none; width: 42px; height: 42px; }
.lb-step h3 { font-size: var(--t-base); margin-bottom: 5px; }
.lb-step p { font-size: var(--t-sm); color: var(--muted); }

/* Board ----------------------------------------------------------------- */
.lb-panel {
  border-radius: var(--r-2xl);
  background: linear-gradient(168deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.lb-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.lb-tab {
  flex: 1 1 200px; min-height: 62px; padding: 12px 20px;
  display: grid; gap: 2px; justify-items: start; align-content: center;
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700;
  color: var(--muted); position: relative;
  transition: color var(--d-base), background-color var(--d-base);
}
.lb-tab small { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 500; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
.lb-tab:hover { color: var(--text-2); background: var(--a-04); }
.lb-tab.active { color: var(--text); background: color-mix(in oklab, var(--tc) 9%, transparent); }
.lb-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--tc); box-shadow: 0 0 12px var(--tc);
}

.lb-legend, .lb-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(96px, 150px) minmax(110px, 210px);
  align-items: center; gap: 12px;
}
.lb-legend {
  padding: 12px clamp(16px, 2.4vw, 26px);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
  border-bottom: 1px solid var(--line);
}
.lb-legend span:nth-child(3), .lb-row .w { text-align: right; }
.lb-legend span:nth-child(4), .lb-row .p { text-align: right; }

.lb-rows { display: grid; }
.lb-row {
  position: relative; isolation: isolate;
  padding: 13px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid color-mix(in oklab, #fff 4%, transparent);
  font-size: var(--t-base);
  transition: background-color var(--d-fast);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--a-04); }

/* Wager bar. Scaled with transform, never width — animating width forces
   layout on every frame. */
.lb-bar {
  position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: 100%; transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, color-mix(in oklab, var(--tc) 16%, transparent), transparent);
  transition: transform 900ms var(--e-out);
}
.lb-row.in .lb-bar { transform: scaleX(var(--pct)); }

.lb-row .r {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lb-row .r svg { width: 14px; height: 14px; }
.lb-row .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.lb-row .w { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.lb-row .p { font-weight: 600; color: var(--tc); font-variant-numeric: tabular-nums; }
.lb-row .p.special {
  font-size: var(--t-sm); line-height: 1.25;
  color: var(--gold);
}

.lb-row.top-1 { background: linear-gradient(90deg, rgba(255,209,90,.10), transparent 60%); }
.lb-row.top-2 { background: linear-gradient(90deg, rgba(207,216,230,.08), transparent 60%); }
.lb-row.top-3 { background: linear-gradient(90deg, rgba(224,149,90,.08), transparent 60%); }
.lb-row.top-1 .r { color: #ffd15a; }
.lb-row.top-2 .r { color: #cfd8e6; }
.lb-row.top-3 .r { color: #e0955a; }
.lb-row.top-1 .u, .lb-row.top-2 .u, .lb-row.top-3 .u { color: var(--text); font-weight: 600; }

.lb-empty { padding: 48px 20px; text-align: center; color: var(--muted); }

.lb-disclaimer {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  overflow: hidden;
}
.lb-disclaimer summary {
  list-style: none; cursor: pointer;
  padding: 15px 20px; display: flex; align-items: center; gap: 11px;
  font-size: var(--t-sm); font-weight: 600; color: var(--muted);
}
.lb-disclaimer summary::-webkit-details-marker { display: none; }
.lb-disclaimer summary > svg { width: 16px; height: 16px; color: var(--warn); flex: none; }
.lb-disclaimer summary .sum-chev {
  margin-left: auto; flex: none; width: 8px; height: 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform var(--d-base) var(--e-out);
}
.lb-disclaimer[open] summary .sum-chev { transform: rotate(-135deg); }
.lb-disclaimer .d-body { padding: 0 20px 18px; font-size: var(--t-sm); color: var(--muted); }
.lb-disclaimer .d-body p + p { margin-top: 9px; }

@media (max-width: 760px) {
  .lb-legend, .lb-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  /* The prize column moves under the row rather than squeezing four
     columns into a phone width. */
  .lb-legend span:nth-child(4) { display: none; }
  .lb-row .p { grid-column: 2 / -1; text-align: left; font-size: var(--t-sm); padding-top: 2px; }
  .lb-step { flex-direction: column; gap: 12px; }
  .cd-cell { min-width: 44px; }
  .countdown { padding: 12px 14px; gap: 3px; }
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 5%, transparent));
  padding-block: var(--s-8) var(--s-5);
}
.foot-top {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: space-between;
  padding-bottom: var(--s-6); border-bottom: 1px solid var(--line);
}
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-social a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); font-size: var(--t-sm); font-weight: 600; color: var(--text-2);
  transition: all var(--d-base) var(--e-out);
}
.foot-social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); background: var(--a-08); }
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }

.foot-info {
  display: flex; gap: 14px; padding: var(--s-6) 0;
  font-size: var(--t-sm); color: var(--muted-2); line-height: 1.6;
}
.foot-info p + p { margin-top: 8px; }
.foot-info > svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; margin-top: 2px; }

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--muted-2);
}
.foot-bottom a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom a:hover { color: var(--accent); }
.age-chip {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--bad); color: var(--bad);
  font-size: 11px; font-weight: 800; letter-spacing: -0.02em; flex: none;
}
.foot-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. OVERLAYS — age gate + cookie bar
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in oklab, #000 78%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  animation: fade-in 400ms var(--e-out);
}
.age-gate[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }

.age-card {
  width: min(460px, 100%); text-align: center;
  padding: clamp(30px, 5vw, 48px) clamp(24px, 4vw, 40px);
  border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-4), 0 0 calc(80px * var(--glow)) var(--a-18);
  animation: gate-in 620ms var(--e-spring);
}
@keyframes gate-in { from { opacity: 0; transform: translateY(26px) scale(.94); } }
.age-badge {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; margin-bottom: var(--s-4);
  border: 2px solid var(--bad); color: var(--bad);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 0 calc(30px * var(--glow)) color-mix(in oklab, var(--bad) 45%, transparent);
}
.age-card h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.age-card p { color: var(--muted); font-size: var(--t-base); margin-bottom: var(--s-3); }
.age-card .hot { color: var(--bad); font-weight: 700; }
.age-actions { display: grid; gap: 10px; margin-top: var(--s-5); }
.age-leave { font-size: var(--t-sm); color: var(--muted-2); padding: 10px; }
.age-leave:hover { color: var(--text-2); }

.cookie-bar {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 250;
  max-width: 720px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-4);
  animation: cookie-in 620ms var(--e-out) 900ms backwards;
}
.cookie-bar[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(30px); } }
.cookie-bar p { flex: 1 1 260px; font-size: var(--t-sm); color: var(--muted); }
.cookie-bar p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   14b. STICKY ACTION BAR  (mobile only)
   The code is the product. On a phone it scrolls out of sight after the hero
   and there is no way back to it, so it rides along at the bottom instead.
   Appears only once the hero is out of view — showing it immediately would
   cover the headline in the first second, which reads as a popup.
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px; align-items: center;
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .55);
  transform: translateY(110%);
  transition: transform 420ms var(--e-out);
}
.action-bar.on { transform: none; }

@media (max-width: 900px) {
  .action-bar { display: grid; }
  /* Room so the last section and the legal text never sit under the bar. */
  footer { padding-bottom: calc(var(--s-8) + 72px); }
}

/* Code chip. Uses .code-box so the existing copy handler and the copied
   state animation apply unchanged. */
.action-bar .ab-code {
  width: auto; min-width: 104px;
  padding: 7px 13px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.action-bar .ab-code small { font-size: 8.5px; letter-spacing: .16em; margin-bottom: 1px; }
.action-bar .ab-code .code-line { font-size: .95rem; gap: 7px; }
.action-bar .ab-code .code-line svg { width: 13px; height: 13px; }

.action-bar .ab-cta {
  min-height: 46px; padding: 0 18px;
  font-size: var(--t-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The age gate owns the screen; nothing should peek out from under it. */
body.gate-open .action-bar { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .action-bar { transition: none; }
}

/* --------------------------------------------------------------------------
   15. TOAST
   -------------------------------------------------------------------------- */
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 400; display: grid; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-3) 94%, transparent);
  border: 1px solid var(--line-2); backdrop-filter: blur(14px);
  font-size: var(--t-sm); font-weight: 600; box-shadow: var(--sh-3);
  animation: toast-in 420ms var(--e-spring);
}
.toast svg { width: 16px; height: 16px; color: var(--good); }
.toast.out { animation: toast-out 300ms var(--e-out) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(10px) scale(.96); } }

/* --------------------------------------------------------------------------
   16. SCROLL-REVEAL + TEXT ANIMATION PRIMITIVES
   Driven by motion.js (IntersectionObserver). Values mirror the
   gsap "Scroll Reveal / Standard" and "Stagger List / Standard" presets.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, calc(26px * var(--motion-scale)), 0);
  transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal="left"]  { transform: translate3d(calc(-34px * var(--motion-scale)), 0, 0); }
[data-reveal="right"] { transform: translate3d(calc(34px * var(--motion-scale)), 0, 0); }
[data-reveal="scale"] { transform: scale(calc(1 - .07 * var(--motion-scale))) translate3d(0, calc(14px * var(--motion-scale)), 0); }
[data-reveal="blur"]  { filter: blur(calc(9px * var(--motion-scale))); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out), filter 700ms var(--e-out); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* Split-text headline: one span per character, rotated in on X. */
.split-char {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-55deg);
  transform-origin: 50% 100%;
  transition: opacity 620ms var(--e-out), transform 700ms var(--e-out);
  transition-delay: var(--d, 0ms);
}
.split-ready .split-char { opacity: 1; transform: none; }
.split-word { display: inline-block; }

/* Tilt target — motion.js writes --rx/--ry */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}

/* Parallax layers — motion.js writes --py */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Count-up numerals stay stable-width while ticking */
[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .cc-grid { grid-template-columns: 132px minmax(0, 1fr) 190px; gap: 24px; }
  .cc-logo { max-width: 132px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .topbar-right { margin-left: auto; }
  .live-pill { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .promo-stack { height: 380px; order: -1; }
  .community { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .community p { margin-inline: auto; }
}

@media (max-width: 760px) {
  .cc-grid { grid-template-columns: 1fr; gap: 22px; }
  .cc-logo { max-width: 108px; margin-inline: auto; }
  .cc-head { display: flex; align-items: center; gap: 16px; }
  .cc-offers { gap: 24px; }
  .cc-side { max-width: 420px; margin-inline: auto; width: 100%; }
  .cc-checks.two-col { grid-template-columns: 1fr; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .cookie-bar { flex-direction: column; align-items: stretch; }
  .cookie-bar .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* The header CTA drops to icon-only. It stays reachable as full text in
     the burger menu and as the hero's secondary button. */
  .topbar-in { gap: var(--s-3); }
  .topbar-right .btn-primary span { display: none; }
  .topbar-right .btn-primary { padding: 0 13px; }
}

@media (max-width: 480px) {
  :root { --nav-h: 62px; }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .promo-stack { height: 350px; }
  .promo-card { padding: 24px 20px 22px; }
  /* Flag only — the two-letter code and chevron are the first to go. */
  .lang-btn > span:not(.lang-flag), .lang-btn svg.chev { display: none; }
  .lang-btn { padding: 0 8px; }
  .brand img { height: 40px; }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION — hard opt-out, per WCAG 2.3.3 / skill rule `reduced-motion`
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .split-char { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aurora, .grain, .cursor-glow { display: none; }
  .marquee-track { animation: none; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .topbar, .cookie-bar, .age-gate, .ambient, .grain, .cursor-glow, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
}