:root{
    --bg:#0B0B10; --bg2:#14141C; --panel:#15151F; --line:#24242F;
    --ink:#FFFFFF; --ink-dim:#A7A9B4; --ink-faint:#8085A0;   /* faint = 5.3:1 on --bg, clears 4.5:1 for small text */
    --blue:#3B8BFF; --purple:#8B5CF6; --orange:#FF7A1A;
    --blue-soft:#7FB3FF; --orange-soft:#FFB273;
    /* tile palette (drawn / animated floors) */
    --t-orange:#FF6A1A; --t-red:#FF3B3B; --t-green:#3DFF7A; --t-blue:#3B8BFF; --t-purple:#A855F7; --t-yellow:#FFD23B;
    --grad:linear-gradient(100deg,var(--blue) 0%,var(--purple) 50%,var(--orange) 100%);
    /* periodic version for sweeps: at background-size 300% the 0% and 100% positions both show blue->purple->orange */
    --grad-flow:linear-gradient(100deg,var(--blue) 0%,var(--purple) 16.7%,var(--orange) 33.3%,var(--purple) 50%,var(--blue) 66.7%,var(--purple) 83.3%,var(--orange) 100%);
    --font-body:"Inter","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
    --font-head:"Inter Tight","Inter","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
    --radius:16px;
    --nav-h:64px;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  @property --ring-a{syntax:'<angle>'; inherits:false; initial-value:0deg}   /* lets the conic border angle animate */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  html.lock{overflow:hidden}
  body{
    background:var(--bg); color:var(--ink);
    font:400 17px/1.65 var(--font-body);
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  ::selection{background:var(--orange);color:#141414}
  :focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}
  h1,h2,h3{font-family:var(--font-head)}
  .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .neon{height:1px; background:var(--blue); box-shadow:0 0 12px 1px rgba(59,139,255,.75); opacity:.7}

  /* ---------- buttons ---------- */
  .btn{
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border:0; cursor:pointer; text-decoration:none;
    font:600 15px/1 var(--font-body); letter-spacing:.02em;
    padding:14px 24px; border-radius:999px; color:var(--bg);
    background:var(--grad); background-size:200% 100%; background-position:0 0;
    box-shadow:0 6px 24px rgba(139,92,246,.28);
    transition:background-position .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .btn:hover{background-position:100% 0; transform:scale(1.02); box-shadow:0 8px 30px rgba(255,122,26,.35)}
  .btn:active{transform:scale(.99)}
  .btn-ghost{
    color:var(--ink); background:rgba(11,11,16,.28); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .btn-ghost::before{ /* gradient fill slides in on hover */
    content:""; position:absolute; inset:0; z-index:-1; background:var(--grad);
    transform:translateX(-101%); transition:transform .15s var(--ease);
  }
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px transparent; color:var(--bg)}
  .btn-ghost:hover::before{transform:none}
  .btn-sm{padding:11px 18px; font-size:14px}

  /* ---------- nav ---------- */
  .nav{
    position:fixed; inset:0 0 auto 0; z-index:50;
    display:flex; align-items:center; gap:22px;
    height:var(--nav-h); padding:0 clamp(16px,4vw,44px);
    background:transparent; border-bottom:1px solid transparent;
    transition:background .25s ease, border-color .25s ease;
  }
  .nav.scrolled{
    background:rgba(11,11,16,.9);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom-color:rgba(255,255,255,.06);
  }
  .wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto}
  .logo-img{display:block; height:30px; width:auto}
  .logo-img.logo-sm{height:24px}
  .nav-links{display:flex; gap:28px}
  .nav-links a{color:var(--ink-dim); text-decoration:none; font-weight:500; font-size:15px; letter-spacing:.01em; transition:color .15s}
  .nav-links a:hover{color:#fff}
  /* "Join the list": faint spinning gradient border once the nav has gone solid */
  .nav-cta{overflow:visible}
  .nav-cta::after{
    content:""; position:absolute; inset:-2px; z-index:-1; border-radius:999px; padding:2px;
    background:conic-gradient(from var(--ring-a), var(--blue), var(--purple), var(--orange), var(--blue));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .3s ease;
  }
  .nav.scrolled .nav-cta::after{opacity:.6; animation:ringspin 3s linear infinite}
  @keyframes ringspin{to{--ring-a:360deg}}
  .burger{display:none; position:relative; width:44px; height:44px; border:0; background:transparent; cursor:pointer; border-radius:10px}
  .burger span{position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px}
  .burger span:first-child{top:17px}
  .burger span:last-child{top:25px}

  .menu{
    position:fixed; inset:0; z-index:60;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
    background:rgba(11,11,16,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
  }
  .menu.open{opacity:1; visibility:visible}
  .menu-links{display:flex; flex-direction:column; align-items:center; gap:18px}
  .menu-links a{font:800 clamp(30px,8vw,44px)/1.15 var(--font-head); letter-spacing:-.02em; color:#fff; text-decoration:none}
  .menu-links a:hover{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .menu-close{
    position:absolute; top:12px; right:clamp(12px,3vw,32px); width:44px; height:44px;
    border:0; background:transparent; color:#fff; cursor:pointer; border-radius:10px; display:grid; place-items:center;
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative; isolation:isolate; overflow:hidden;
    min-height:100svh; display:flex; align-items:flex-end;
    padding:120px clamp(16px,5vw,64px) clamp(72px,10vh,110px);
  }
  .hero-media{position:absolute; inset:0; z-index:-1}
  .hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%}   /* LCP image; the video paints over it once it plays */
  .bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--bg)}
  .hero .bg-video{object-position:center 60%; transform-origin:50% 60%}
  .hero .bg-video.kb{animation:kenburns var(--kb-dur,9s) linear forwards}   /* duration + restart set from JS per loop */
  .hero .bg-video.kb-paused{animation-play-state:paused}
  @keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.06)}}
  .hero-tiles{ /* live LED layer across the bottom third, behind the copy */
    position:absolute; left:0; bottom:0; width:100%; height:34%; opacity:.35; pointer-events:none;   /* explicit width: a canvas is a replaced element */
    -webkit-mask-image:linear-gradient(to top, #000 55%, transparent 100%); mask-image:linear-gradient(to top, #000 55%, transparent 100%);
  }
  .hero-shade{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(11,11,16,.38) 0%, rgba(11,11,16,.06) 30%, rgba(11,11,16,.55) 65%, var(--bg) 100%),
      radial-gradient(70% 60% at 18% 85%, rgba(11,11,16,.55) 0%, transparent 70%);
  }
  .grain::after{ /* subtle film grain over video sections */
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
  }
  .hero-inner{position:relative; z-index:2; width:100%; max-width:900px; min-width:0}   /* min-width:0 — the ticker's long track must not stop this flex item shrinking on phones */
  .kicker{
    display:inline-flex; align-items:center; gap:8px;
    font:600 12.5px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--blue-soft);
    border:1px solid color-mix(in srgb,var(--blue) 40%, transparent);
    background:color-mix(in srgb,var(--blue) 12%, transparent);
    padding:9px 16px; border-radius:999px; margin-bottom:24px;
  }
  .kicker i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;animation:pulse 2.2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .hero-title{
    font-size:clamp(48px,9vw,128px); line-height:.95; font-weight:800; letter-spacing:-.025em;
    margin-bottom:22px; text-wrap:balance;
  }
  .hero-title .w{display:inline-block}
  .sub{color:var(--ink-dim); font-size:clamp(17px,2.2vw,20px); max-width:560px; margin:0 0 30px; text-wrap:pretty}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap}
  .opening{margin-top:26px; color:var(--ink-faint); font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
  .opening b{color:var(--ink-dim)}
  .scroll-cue{
    position:absolute; left:50%; bottom:20px; margin-left:-22px; z-index:2;
    width:44px; height:44px; display:grid; place-items:center; color:var(--ink-dim);
    animation:bob 1.8s ease-in-out infinite; transition:opacity .4s ease;
  }
  .scroll-cue.hide{opacity:0; pointer-events:none}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  .cue-tile{ /* a small glowing tile */
    width:14px; height:14px; border-radius:3px; background:var(--grad);
    animation:cueglow 2s ease-in-out infinite;
  }
  @keyframes cueglow{0%,100%{box-shadow:0 0 10px 1px rgba(59,139,255,.45)} 50%{box-shadow:0 0 18px 4px rgba(255,122,26,.6)}}

  /* "game.": slow gradient sweep every 4s (after its intro rise) */
  .hero-title .grad{background-image:var(--grad-flow); background-size:300% 100%; background-position:100% 0}
  .hero-title .w.grad{animation:rise .5s var(--ease) forwards, gradsweep 4s ease-in-out infinite; animation-delay:var(--d,0ms), calc(var(--d,0ms) + 900ms)}
  @keyframes gradsweep{0%{background-position:0% 0} 45%,100%{background-position:100% 0}}

  /* "Watch the film": soft pulsing ring behind the play icon, 2s cycle */
  .play-ico{position:relative; display:inline-grid; place-items:center; width:16px; height:16px}
  .play-ico::before{
    content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid currentColor;
    opacity:0; animation:ring 2s ease-out infinite;
  }
  @keyframes ring{0%{transform:scale(.6); opacity:.75} 100%{transform:scale(1.45); opacity:0}}

  /* ticker of the game names under the hero copy */
  .ticker{
    margin-top:22px; max-width:560px; overflow:hidden;
    color:var(--ink-faint); font:600 12.5px/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker-track{display:flex; width:max-content; animation:ticker 40s linear infinite; animation-play-state:paused}
  html.settled .ticker-track{animation-play-state:running}   /* starts 1.2s after load */
  .ticker-track span{white-space:nowrap}
  .ticker:hover .ticker-track, .ticker.offscreen .ticker-track{animation-play-state:paused}
  @keyframes ticker{to{transform:translateX(-50%)}}

  /* intro: eyebrow -> H1 words (60ms apart) -> paragraph -> buttons, all inside 1.2s */
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  .anim,.hero-title .w{opacity:0; animation:rise .5s var(--ease) forwards; animation-delay:var(--d,0ms)}

  /* scroll reveals: fade + 24px rise, 500ms ease-out, once */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .5s ease-out, transform .5s ease-out; transition-delay:var(--d,0ms)}
  .reveal.in{opacity:1; transform:none}
  /* section headers: the accent word gets a gradient sweep on first reveal, then settles on the brand gradient */
  .accent{
    background-image:var(--grad-flow);
    background-size:300% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .reveal.in .accent{animation:sweep 1.2s var(--ease) .1s both}
  @keyframes sweep{from{background-position:0% 0} to{background-position:100% 0}}
  .count{font-variant-numeric:tabular-nums}

  /* ---------- film lightbox ---------- */
  .film{
    position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
    margin:0; padding:0; border:0; background:transparent; color:#fff;
  }
  .film[open]{display:grid; place-items:center}
  .film::backdrop{background:rgba(11,11,16,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
  .film-stage{position:relative; display:grid}
  .film video{
    width:min(calc(100vw - 32px), calc((100vh - 110px) * 16 / 9)); aspect-ratio:16/9;
    background:#000; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  }
  .film-spinner{position:absolute; inset:0; display:none; place-items:center; pointer-events:none}
  .film.loading .film-spinner{display:grid}
  .film-spinner::before{
    content:""; width:54px; height:54px; border-radius:50%;
    border:3px solid rgba(255,255,255,.18); border-top-color:var(--orange);
    animation:spin .9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .film-close{
    position:fixed; top:14px; right:clamp(14px,3vw,32px); width:48px; height:48px;
    border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
    display:grid; place-items:center; transition:background .15s;
  }
  .film-close:hover{background:rgba(255,255,255,.16)}

  /* ---------- sections ---------- */
  section{padding:clamp(64px,9vw,110px) clamp(16px,4vw,44px)}
  main [id]{scroll-margin-top:var(--nav-h)}   /* anchored sections land below the fixed nav */
  .wrap{max-width:1060px; margin:0 auto}
  .sec-kicker{font:600 12.5px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin-bottom:14px}
  h2{font-size:clamp(30px,4.6vw,44px); line-height:1.12; font-weight:700; letter-spacing:-.01em; margin-bottom:14px; text-wrap:balance}
  .lede{color:var(--ink-dim); max-width:640px; font-size:clamp(16.5px,2vw,19px); margin-bottom:46px}

  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .card{
    background:linear-gradient(180deg,var(--panel) 0%, color-mix(in srgb,var(--panel) 60%, var(--bg)) 100%);
    border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
    transition:transform .2s ease, border-color .2s ease;
  }
  .card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--blue) 45%, var(--line))}
  .card .glyph{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px}
  .card:nth-child(1) .glyph{background:color-mix(in srgb,var(--blue) 16%, transparent)}
  .card:nth-child(2) .glyph{background:color-mix(in srgb,var(--orange) 15%, transparent)}
  .card:nth-child(3) .glyph{background:color-mix(in srgb,var(--blue) 16%, transparent)}
  .card h3{font-size:21px; margin-bottom:9px; letter-spacing:.02em}
  .card h3 em{font-style:normal}
  .card:nth-child(1) h3 em{color:var(--blue-soft)}
  .card:nth-child(2) h3 em{color:var(--orange-soft)}
  .card:nth-child(3) h3 em{color:var(--blue-soft)}
  .card p{color:var(--ink-dim); font-size:16px}

  /* ---------- "Step. Play. Connect." marquee ---------- */
  .marquee{padding:0; overflow:hidden}
  .marquee-inner{padding:clamp(22px,3.5vw,44px) 0}
  .marquee-track{display:flex; width:max-content; will-change:transform; animation:marquee 30s linear infinite}
  .marquee:hover .marquee-track, .marquee.offscreen .marquee-track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
  .mq{display:flex; flex:none}
  .mq b{
    position:relative; display:inline-block; white-space:nowrap; padding-right:.3em;
    font:800 clamp(56px,11vw,150px)/1.05 var(--font-head); letter-spacing:-.03em;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.5);
  }
  .mq b::after{ /* gradient-filled copy of the word; the three fade in one at a time */
    content:attr(data-w); position:absolute; inset:0; -webkit-text-stroke:0;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:0; animation:wordfill 6s ease-in-out infinite; animation-delay:calc(var(--i) * -2s);
  }
  .marquee.offscreen .mq b::after{animation-play-state:paused}
  @keyframes wordfill{0%,26%{opacity:1} 34%,92%{opacity:0} 100%{opacity:1}}

  /* ---------- how it works + interactive floor ---------- */
  .how-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,64px); align-items:center}
  .how .lede{margin-bottom:30px}
  .how .cards{grid-template-columns:1fr; gap:14px}
  .how .card{display:grid; grid-template-columns:46px 1fr; column-gap:18px; align-items:start; padding:22px 24px}
  .how .card .glyph{grid-row:1/3; margin:0}
  .how .card h3{margin:9px 0 5px}
  .floor{
    position:relative; aspect-ratio:3/2; border-radius:20px; overflow:hidden; background:#000;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(59,139,255,.12), 0 0 70px rgba(59,139,255,.14);
  }
  #tiles{display:block; width:100%; height:100%; touch-action:pan-y; cursor:crosshair}
  .floor-hint{margin-top:12px; text-align:center; color:var(--ink-faint); font:600 13px/1.4 var(--font-body); letter-spacing:.08em; text-transform:uppercase}
  .hint-touch{display:none}
  @media (hover:none){ .hint-pointer{display:none} .hint-touch{display:inline} }   /* touch-only devices */

  /* ---------- games: horizontal card row ---------- */
  .games{background:var(--bg2)}
  .games .lede{margin-bottom:30px}
  .games-row{
    display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:max(clamp(16px,4vw,44px), calc(50vw - 530px));
    margin-inline:calc(50% - 50vw);                       /* bleed to the viewport edges */
    padding:8px max(clamp(16px,4vw,44px), calc(50vw - 530px)) 24px;   /* first card aligns with .wrap */
    scrollbar-width:none; cursor:grab;
  }
  .games-row::-webkit-scrollbar{display:none}
  .games-row.dragging{scroll-snap-type:none; cursor:grabbing; user-select:none}
  .games-row:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:8px}
  .game{
    position:relative; flex:0 0 clamp(240px,24vw,300px); aspect-ratio:4/5; scroll-snap-align:start;
    border-radius:20px; overflow:hidden; background:var(--panel); border:1px solid var(--line);
    transition:transform .15s var(--ease), border-color .2s ease; will-change:transform;
  }
  .game:hover{border-color:rgba(255,255,255,.2)}
  .game-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,16,.05) 30%, rgba(11,11,16,.92) 100%)}
  .game-body{position:absolute; left:0; right:0; bottom:0; padding:20px 20px 22px}
  .game h3{font-size:22px; letter-spacing:-.01em; margin-bottom:6px}
  .game.hot h3{color:var(--orange-soft)}
  .game.cool h3{color:var(--blue-soft)}
  .game p{color:var(--ink-dim); font-size:14.5px; line-height:1.45}
  .games .note{margin-top:4px; color:var(--ink-faint); font-size:14.5px}

  /* ---------- full-width video break ---------- */
  .break{
    position:relative; isolation:isolate; overflow:hidden; padding:0;
    height:60vh; min-height:360px; display:grid; place-items:center;
  }
  .break-media{position:absolute; left:0; right:0; top:-70%; height:215%; z-index:-1; will-change:transform}   /* tall enough for the 0.6x parallax */
  .break-shade{position:absolute; inset:0; background:linear-gradient(180deg, var(--bg) 0%, rgba(11,11,16,.28) 22%, rgba(11,11,16,.28) 78%, var(--bg) 100%)}
  .break-line{
    position:relative; z-index:2; max-width:900px; margin:0 auto; padding:0 clamp(16px,4vw,44px);
    text-align:center; font:700 clamp(24px,3.6vw,42px)/1.2 var(--font-head); letter-spacing:-.02em; text-wrap:balance;
  }

  /* ---------- visit: pricing, parties panel, glass info cards ---------- */
  .visit-top{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch}
  .parties{
    position:relative; isolation:isolate; overflow:hidden; min-height:320px;
    display:flex; flex-direction:column; justify-content:flex-end; padding:30px;
    border-radius:var(--radius); border:1px solid var(--line);
  }
  .parties .bg-video{z-index:-2}
  .parties-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,11,16,.12) 0%, rgba(11,11,16,.9) 100%)}
  .parties .sec-kicker{color:var(--blue-soft)}
  .parties .big{font:700 clamp(20px,2.2vw,26px)/1.25 var(--font-head); letter-spacing:-.015em; margin-bottom:22px; max-width:26ch; text-wrap:balance}
  .parties .btn{align-self:flex-start}
  .info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
  .glass{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px 20px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .link{color:var(--blue-soft); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
  .link:hover{border-color:var(--blue-soft)}
  .price-card{
    border-radius:var(--radius); padding:34px 30px; position:relative; overflow:hidden;
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--blue) 22%, transparent) 0%, transparent 55%),
      radial-gradient(130% 150% at 100% 100%, color-mix(in srgb,var(--orange) 20%, transparent) 0%, transparent 55%),
      var(--panel);
    border:1px solid var(--line);
  }
  .price{display:flex; align-items:baseline; gap:10px; margin:6px 0 4px}
  .price .amt{font-size:64px; font-weight:800; letter-spacing:-.01em}
  .price .per{color:var(--ink-dim); font-size:17px}
  .price-card ul{list-style:none; margin-top:20px; display:grid; gap:12px}
  .price-card li{display:flex; gap:11px; align-items:flex-start; color:var(--ink-dim); font-size:16px}
  .tick{flex:none; width:20px; height:20px; border-radius:50%; margin-top:2px;
    background:color-mix(in srgb,var(--orange) 18%, transparent); display:grid; place-items:center}
  .tick::after{content:""; width:9px; height:5px; border-left:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:rotate(-45deg) translate(0,-1px)}
  .info-row h3{font:600 12.5px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px}
  .info-row p{color:var(--ink); font-size:17px}
  .info-row .soon{display:inline-block; margin-left:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--orange-soft); background:color-mix(in srgb,var(--orange) 14%, transparent);
    border:1px solid color-mix(in srgb,var(--orange) 40%, transparent); padding:3px 9px; border-radius:999px; vertical-align:2px}

  /* ---------- signup (loop-winners at 40% behind it) ---------- */
  .signup{position:relative; isolation:isolate; overflow:hidden; background:var(--bg2); border-top:1px solid var(--line); text-align:center}
  .signup .bg-video{z-index:-2; opacity:.4}
  .signup-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--bg) 0%, rgba(11,11,16,.5) 30%, rgba(11,11,16,.5) 70%, var(--bg2) 100%)}
  .signup .wrap{max-width:640px}
  .signup h2{margin-bottom:10px}
  .signup .lede{margin:0 auto 34px}
  form{display:flex; gap:10px; max-width:560px; margin:0 auto}
  input[type=email]{
    flex:1; min-width:0; padding:18px 24px; border-radius:999px; font:inherit; font-size:17px;
    background:rgba(11,11,16,.7); border:1.5px solid rgba(255,255,255,.14); color:var(--ink); outline:none;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:border-color .15s ease;
  }
  form .btn{padding:18px 26px; font-size:16px}
  input[type=email]::placeholder{color:var(--ink-faint)}
  input[type=email]:focus{border-color:var(--blue)}
  .form-note{margin-top:16px; color:var(--ink-faint); font-size:14px}
  .form-msg{margin-top:18px; font-weight:600; min-height:1.4em}
  .form-msg.ok{color:var(--orange-soft)}
  .form-msg.err{color:#ff7b7b}
  .hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}

  footer{padding:38px clamp(16px,4vw,44px); border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
  footer .wordmark{margin-right:0}
  footer p{color:var(--ink-faint); font-size:14.5px}
  footer a{color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line)}
  footer a:hover{color:var(--ink); border-color:var(--orange)}
  .social{display:flex; gap:6px}
  .social a{
    display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
    color:var(--ink-dim); border:1px solid transparent;
    transition:color .15s, border-color .15s, background .15s;
  }
  .social a:hover{color:#fff; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}

  @media (max-width:840px){
    .cards{grid-template-columns:1fr}
    .how-grid{grid-template-columns:1fr}
    .floor-wrap{order:-1}                 /* floor above the copy on small screens */
    .game{flex-basis:min(76vw,300px)}
    .break-media{top:0; height:100%}      /* no parallax on small screens */
    .visit-top{grid-template-columns:1fr}
    .info-grid{grid-template-columns:repeat(2,1fr)}
    .nav-links,.nav-cta{display:none}
    .burger{display:block}
  }
  @media (max-width:520px){
    form{flex-direction:column}
    form .btn{width:100%; padding:17px 22px}
    .info-grid{grid-template-columns:1fr}
    .hero{padding-bottom:88px}
    .kicker{font-size:11px; letter-spacing:.16em; padding:8px 13px; white-space:nowrap}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .kicker i{animation:none}
    .anim,.hero-title .w{opacity:1; animation:none}
    .reveal{opacity:1; transform:none; transition:none}
    .reveal.in .accent{animation:none}
    .scroll-cue,.cue-tile{animation:none}
    .hero .bg-video.kb{animation:none}
    .hero-title .w.grad{animation:none}
    .play-ico::before{animation:none; opacity:0}
    .ticker-track{animation:none}
    .nav.scrolled .nav-cta::after{animation:none}
    .film-spinner::before{animation:none}
    .marquee-track{animation:none}
    .mq b::after{animation:none}
    .mq b:nth-child(2)::after{opacity:1}
    .btn,.btn-ghost::before,.nav,.menu{transition:none}
  }