/* ══════════════════════════════════════════════════
     RESET + TOKENS
  ══════════════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Keyboard focus — visible ring for all interactive els ── */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(255,20,40,.2);
  }

  :root {
    --red:       #ff1428;
    --red2:      #cc0f1f;
    --red-dark:  #6b0010;
    --red-glow:  rgba(255,20,40,.55);
    --red-faint: rgba(255,20,40,.07);
    --red-glass: rgba(255,20,40,.12);
    --bg:        #050507;
    --bg2:       #070709;
    --glass:     rgba(255,255,255,.035);
    --glass-b:   rgba(255,255,255,.07);
    --white:     #f0f0f5;
    --mid:       #8a8aa0;
    --muted:     #4a4a60;
    --blue:      #1a3fff;
    --head:      'Orbitron', sans-serif;
    --body:      'Space Grotesk', sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--body);
    overflow-x: hidden;
    cursor: none;
  }

  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: var(--bg2); }
  ::-webkit-scrollbar-thumb { background: var(--red-dark); border-radius: 2px; }

  /* ══════════════════════════════════════════════════
     THREE.JS CANVAS
  ══════════════════════════════════════════════════ */
  #bg-canvas {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
  }

  /* ══════════════════════════════════════════════════
     CURSOR  — left/top are 0; JS drives via transform
     so all cursor motion is compositor-only (GPU).
  ══════════════════════════════════════════════════ */
  #cur-dot {
    position: fixed; left: 0; top: 0;
    width: 8px; height: 8px;
    background: var(--red); border-radius: 50%;
    pointer-events: none; z-index: 999999;
    will-change: transform;
    box-shadow: 0 0 14px var(--red-glow);
    mix-blend-mode: screen;
    transition: width .2s, height .2s;
  }
  .cur-hover #cur-dot { width: 16px; height: 16px; }

  /* ══════════════════════════════════════════════════
     MOUSE SPOTLIGHT
  ══════════════════════════════════════════════════ */
  #spotlight {
    position: fixed; width: 600px; height: 600px;
    border-radius: 50%; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, rgba(255,20,40,.055) 0%, transparent 70%);
    transform: translate(-50%,-50%);
    transition: opacity .3s;
  }

  /* ══════════════════════════════════════════════════
     PROGRESS BAR — scaleX transform (GPU compositing,
     no layout reflow). JS writes transform:scaleX(n).
  ══════════════════════════════════════════════════ */
  #progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, var(--red-dark), var(--red), #ff8090);
    z-index: 9999; box-shadow: 0 0 12px var(--red-glow);
    will-change: transform;
  }

  /* ══════════════════════════════════════════════════
     SECTION INDICATOR
  ══════════════════════════════════════════════════ */
  #sec-ind {
    position: fixed; right: 2.5rem; top: 50%;
    transform: translateY(-50%);
    z-index: 500; display: flex; flex-direction: column;
    align-items: center; gap: .5rem;
  }
  #sec-ind .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted); transition: all .4s;
    cursor: pointer;
    border: none; padding: 0; appearance: none; -webkit-appearance: none;
  }
  #sec-ind .dot.active {
    background: var(--red); box-shadow: 0 0 8px var(--red-glow);
    transform: scale(1.5);
  }

  /* ══════════════════════════════════════════════════
     NAV
  ══════════════════════════════════════════════════ */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 1.1rem 2.5rem;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(5,5,7,.5); backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .4s, border-color .4s;
  }
  nav.solid { background: rgba(5,5,7,.92); border-bottom-color: rgba(255,20,40,.15); }

  .logo {
    font-family: var(--head); font-size: 1.25rem; font-weight: 900;
    letter-spacing: .22em; color: var(--white); text-decoration: none;
    position: relative; overflow: hidden; display: flex; align-items: center;
  }
  .logo span { color: var(--red); text-shadow: 0 0 20px var(--red-glow); }
  .logo::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 1px; background: linear-gradient(90deg, var(--red), transparent);
  }
  .nav-logo-img { height: 36px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 0 8px rgba(255,20,40,.5)); }

  .nav-links { display: flex; gap: 2.2rem; list-style: none; }
  .nav-links a {
    font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; transition: color .25s;
    position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: -3px; left: 0;
    width: 0; height: 1px; background: var(--red); transition: width .3s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width: 100%; }

  .nav-btn {
    font-family: var(--body); font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .52rem 1.4rem; border: 1px solid rgba(255,20,40,.35);
    background: var(--red-faint); color: var(--red);
    border-radius: 4px; text-decoration: none;
    transition: background .25s, border-color .25s, box-shadow .25s, color .25s;
  }
  .nav-btn:hover {
    background: var(--red); color: #fff;
    box-shadow: 0 0 28px var(--red-glow);
  }

  .hamburger {
    display: none; flex-direction: column; gap: 5px; cursor: pointer;
    padding: 6px; z-index: 1001; position: relative;
    /* reset <button> defaults */
    background: none; border: none; outline: none; appearance: none; -webkit-appearance: none;
  }
  .hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s ease; transform-origin: center; }

  /* Hide discord nav item on desktop — only revealed inside mobile overlay */
  .nav-discord-li { display: none; }
  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ══════════════════════════════════════════════════
     GLASS CARD BASE
  ══════════════════════════════════════════════════ */
  .gc {
    background: var(--glass); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-b); border-radius: 14px;
    position: relative; overflow: hidden;
  }
  .gc::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%);
    pointer-events: none;
  }

  /* ══════════════════════════════════════════════════
     BUTTONS
  ══════════════════════════════════════════════════ */
  .btn {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--body); font-weight: 700; font-size: .88rem;
    letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; padding: .88rem 2.2rem;
    border-radius: 6px; cursor: pointer; border: none;
    position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .3s;
  }
  .btn:hover { transform: translateY(-3px) scale(1.02); }

  /* Ripple */
  .btn .ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.25); transform: scale(0);
    animation: ripple-anim .55s linear; pointer-events: none;
  }
  @keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
  }

  /* Shimmer sweep */
  .btn::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transition: left .5s;
  }
  .btn:hover::after { left: 120%; }

  .btn-red {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
  }
  .btn-red:hover { box-shadow: 0 14px 44px rgba(255,20,40,.5), 0 0 60px rgba(255,20,40,.2); }

  .btn-glass {
    background: var(--glass); color: var(--white);
    border: 1px solid var(--glass-b); backdrop-filter: blur(10px);
  }
  .btn-glass:hover { border-color: rgba(255,20,40,.3); background: var(--red-glass); }

  .btn-discord {
    background: linear-gradient(135deg, #5865f2, #7c83ff); color: #fff;
  }
  .btn-discord:hover { box-shadow: 0 14px 44px rgba(88,101,242,.55); }

  /* Pulsing border on primary CTA */
  .btn-red-glow {
    animation: pulse-border 2.5s ease-in-out infinite;
  }
  @keyframes pulse-border {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,20,40,0), 0 6px 20px rgba(255,20,40,.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255,20,40,0), 0 6px 30px rgba(255,20,40,.45); }
  }

  /* ══════════════════════════════════════════════════
     UTILITY
  ══════════════════════════════════════════════════ */
  .container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }

  .label {
    font-size: .7rem; font-weight: 700; letter-spacing: .28em;
    text-transform: uppercase; color: var(--red);
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
  }
  .label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--red); }

  .h1 {
    font-family: var(--head);
    font-size: clamp(1.9rem,4.5vw,3.2rem);
    font-weight: 900; letter-spacing: .04em;
    line-height: 1.1; margin-bottom: 1.1rem;
    will-change: transform, opacity;
  }
  .h1 em { font-style: normal; color: var(--red); text-shadow: 0 0 30px var(--red-glow); }

  .body-text { font-size: .97rem; color: var(--mid); line-height: 1.85; overflow-wrap: break-word; word-break: break-word; max-width: 100%; }

  /* ══════════════════════════════════════════════════
     MARQUEE TICKER
  ══════════════════════════════════════════════════ */
  .ticker-wrap {
    overflow: hidden; position: relative; z-index: 2;
    border-top: 1px solid rgba(255,20,40,.12);
    border-bottom: 1px solid rgba(255,20,40,.12);
    padding: .65rem 0; background: rgba(5,5,7,.9);
    backdrop-filter: blur(10px);
  }
  .ticker-track {
    display: flex; white-space: nowrap; width: max-content;
    animation: ticker 22s linear infinite;
  }
  .ticker-track:hover { animation-play-state: paused; }
  @keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .ticker-item {
    font-family: var(--head); font-size: .68rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); padding: 0 2.5rem;
    display: inline-flex; align-items: center; gap: 2.5rem;
  }
  .ticker-item span { color: var(--red); font-size: .5rem; }

  /* ══════════════════════════════════════════════════
     HERO
  ══════════════════════════════════════════════════ */
  #hero {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center; text-align: center;
    padding: 10rem 2rem 6rem; position: relative; overflow: hidden;
  }

  /* grid */
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,20,40,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,20,40,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, black, transparent);
  }

  /* ambient orbs */
  .orb {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(90px); will-change: transform;
  }
  .orb-1 {
    width: 700px; height: 700px; top: -220px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,20,40,.12) 0%, transparent 70%);
  }
  .orb-2 {
    width: 450px; height: 450px; bottom: -100px; right: 3%;
    background: radial-gradient(circle, rgba(90,0,20,.18) 0%, transparent 70%);
  }
  .orb-3 {
    width: 350px; height: 350px; top: 20%; left: -100px;
    background: radial-gradient(circle, rgba(255,20,40,.06) 0%, transparent 70%);
  }

  /* animated light beam */
  .beam {
    position: absolute; width: 1px; pointer-events: none;
    top: 0; bottom: 0; opacity: .5;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,20,40,.6) 40%, rgba(255,20,40,.6) 60%, transparent 100%);
  }
  .beam-1 { left: 20%; animation: beam-drift 8s ease-in-out infinite; }
  .beam-2 { right: 25%; animation: beam-drift 10s ease-in-out infinite reverse; animation-delay: -3s; }
  @keyframes beam-drift {
    0%,100% { opacity: .15; transform: scaleY(.4) translateY(-30%); }
    50%      { opacity: .45; transform: scaleY(.8) translateY(10%); }
  }

  /* floating shards */
  .shard {
    position: absolute; pointer-events: none;
    border: 1px solid rgba(255,20,40,.12); opacity: .6;
    animation: shard-float ease-in-out infinite;
  }
  .s1 { width:70px;height:70px;top:14%;left:9%;  animation-duration:14s; transform:rotate(20deg); }
  .s2 { width:45px;height:45px;top:65%;left:5%;  animation-duration:18s; transform:rotate(55deg); }
  .s3 { width:110px;height:110px;top:18%;right:8%;animation-duration:12s; transform:rotate(-30deg); }
  .s4 { width:55px;height:55px;top:72%;right:11%;animation-duration:16s; transform:rotate(40deg); }
  @keyframes shard-float {
    0%,100% { transform: rotate(var(--r,20deg)) translateY(0); }
    50%      { transform: rotate(calc(var(--r,20deg) + 10deg)) translateY(-18px); }
  }

  .hero-content { position: relative; z-index: 2; max-width: 800px; }

  .hero-badge {
    display: inline-flex; align-items: center; gap: .7rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--mid); background: var(--glass); border: 1px solid var(--glass-b);
    padding: .5rem 1.4rem; border-radius: 2rem; margin-bottom: 2.2rem;
    backdrop-filter: blur(16px); opacity: 0; transform: translateY(20px);
  }
  .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 10px var(--red);
    animation: blink 2s infinite;
  }
  @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

  /* title char split */
  .hero-title {
    font-family: var(--head);
    font-size: clamp(4.5rem,15vw,11rem);
    font-weight: 900; letter-spacing: .12em; line-height: .92;
    margin-bottom: 1rem; display: block;
    background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.35) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-title .char {
    display: inline-block; overflow: hidden;
    vertical-align: top; line-height: 1;
  }
  .hero-title .char-inner {
    display: block; transform: translateY(110%) rotateX(60deg);
    transform-origin: bottom; will-change: transform;
  }

  .hero-sub {
    font-family: var(--head); font-size: clamp(.6rem,1.2vw,.8rem);
    font-weight: 400; letter-spacing: .55em; text-transform: uppercase;
    color: var(--red); margin-bottom: 1.8rem;
    text-shadow: 0 0 30px var(--red-glow);
    opacity: 0; transform: translateY(16px);
  }
  .hero-desc {
    font-size: clamp(.88rem,1.4vw,1rem); color: var(--mid);
    max-width: 520px; margin: 0 auto 2.8rem; line-height: 1.9;
    opacity: 0; transform: translateY(16px);
  }
  .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    opacity: 0; transform: translateY(16px); }


  /* ══════════════════════════════════════════════════
     FEATURES — HORIZONTAL PIN
  ══════════════════════════════════════════════════ */
  #features { background: var(--bg2); }

  .feat-pin {
    overflow: hidden;
    /* height set dynamically */
  }

  .feat-sticky {
    position: sticky; top: 0;
    height: 100vh; display: flex;
    flex-direction: column; justify-content: center;
    overflow: hidden;
  }

  .feat-header-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 3rem; margin-bottom: 2.8rem; flex-shrink: 0;
  }
  .feat-progress-bar {
    width: 160px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
  }
  .feat-progress-fill { height: 100%; background: var(--red); width: 0%; transition: width .1s; }

  .feat-track-outer { overflow: visible; padding: 0 3rem; perspective: 900px; }
  .feat-track {
    display: flex; gap: 1.6rem;
    width: max-content; will-change: transform;
  }

  .feat-card {
    width: 300px; flex-shrink: 0; padding: 2.2rem 1.8rem;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition: border-color .35s, box-shadow .35s;
    contain: layout style;
  }
  .feat-card:hover {
    border-color: rgba(255,20,40,.45);
    box-shadow:
      0 35px 80px rgba(0,0,0,.65),
      0 0 60px rgba(255,20,40,.15),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  .feat-num {
    font-family: var(--head); font-size: .65rem; font-weight: 700;
    letter-spacing: .25em; color: var(--muted); margin-bottom: 1.5rem;
  }
  .feat-top {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: 0; transition: opacity .3s;
  }
  .feat-card:hover .feat-top { opacity: 1; }

  /* Inner mouse-spotlight — follows cursor inside the card */
  .feat-card::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(
      300px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 20, 40, .12),
      transparent 65%
    );
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    z-index: 0;
  }
  .feat-card:hover::after { opacity: 1; }

  /* keep card content above the spotlight layer */
  .feat-card > * { position: relative; z-index: 1; }

  /* Icon badge */
  .icon-b {
    width: 60px; height: 60px; border-radius: 14px;
    background: var(--red-faint); border: 1px solid rgba(255,20,40,.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.3rem; transition: box-shadow .3s, border-color .3s;
  }
  .feat-card:hover .icon-b {
    box-shadow: 0 0 28px rgba(255,20,40,.2), inset 0 0 16px rgba(255,20,40,.05);
    border-color: rgba(255,20,40,.4);
  }
  .icon-b svg { width: 28px; height: 28px; }

  .feat-name {
    font-family: var(--head); font-size: .82rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: .6rem; color: var(--white);
  }
  .feat-desc { font-size: .83rem; color: var(--mid); line-height: 1.75; }
  .feat-pill {
    display: inline-block; font-size: .63rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    padding: .2rem .8rem; border-radius: 2rem;
    background: var(--red-glass); border: 1px solid rgba(255,20,40,.2);
    color: var(--red); margin-top: 1.1rem;
  }

  /* ── Features: vertical scroll side-pull (all viewports) ── */
  .feat-pin    { height: auto !important; }
  .feat-sticky { position: static !important; height: auto !important; overflow: visible !important; }
  .feat-track-outer { padding: 0 2rem !important; perspective: none !important; }
  .feat-track  {
    display: flex !important; flex-direction: column !important;
    gap: 1.4rem !important; width: 100% !important; max-width: 760px;
    margin: 0 auto;
  }
  .feat-card   { width: 100% !important; flex-shrink: unset !important; }
  .feat-progress-bar { display: none !important; }
  .feat-track-mobile { display: none !important; }

  /* ══════════════════════════════════════════════════
     WHY
  ══════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════
     SCENE LAYOUT — full-viewport storytelling
  ══════════════════════════════════════════════════ */

  /* Every story section fills the viewport and centres content */
  #why, #female, #community {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
  }
  #why .container,
  #female .container,
  #community .container {
    padding-top: 5rem;
    padding-bottom: 5rem;
    width: 100%;
  }

  /* Depth atmosphere — each scene has a unique ambient light */
  #why::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 50% at 15% 50%,  rgba(255,20,40,.04)  0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 85% 55%,  rgba(255,20,40,.05)  0%, transparent 70%);
  }
  #female::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 60% at 85% 50%,  rgba(255,20,40,.05)  0%, transparent 70%),
      radial-gradient(ellipse 40% 30% at 10% 80%,  rgba(100,0,20,.08)   0%, transparent 70%);
  }
  #community::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 90% 70% at 50% 80%,  rgba(255,20,40,.07)  0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 20%,  rgba(88,101,242,.04) 0%, transparent 70%);
  }

  /* Scene number badge — top-left of each story section */
  .scene-num {
    position: absolute;
    top: 2.5rem; left: 3rem;
    font-family: var(--head);
    font-size: .58rem; font-weight: 700;
    letter-spacing: .45em; text-transform: uppercase;
    color: rgba(255,20,40,.2);
    pointer-events: none; user-select: none;
  }

  /* Horizontal rule that sweeps in as each scene enters */
  .scene-rule {
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,20,40,.25), transparent);
    transform: scaleX(0); transform-origin: left;
  }

  /* Deep background layer — moves slower than content for parallax */
  .scene-depth-layer {
    position: absolute; inset: -20%; pointer-events: none;
    will-change: transform;
  }

  #why { }

  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }

  .why-items { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.5rem; }

  .why-row {
    display: flex; gap: 1.2rem; align-items: flex-start;
    padding: 1.3rem; border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
    will-change: transform, opacity;
    position: relative;
  }
  /* Left accent bar */
  .why-row::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, var(--red), rgba(255,20,40,.2));
    transform: scaleY(0); transform-origin: top;
    transition: transform .35s cubic-bezier(.23,1,.32,1);
  }
  .why-row:hover {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,20,40,.18);
    transform: translateX(8px);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 20px rgba(255,20,40,.06);
  }
  .why-row:hover::before { transform: scaleY(1); }

  .why-ico {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    background: var(--red-faint); border: 1px solid rgba(255,20,40,.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--red);
    transition: box-shadow .3s, border-color .3s, transform .3s;
  }
  .why-row:hover .why-ico {
    border-color: rgba(255,20,40,.4);
    box-shadow: 0 0 20px rgba(255,20,40,.25), inset 0 0 12px rgba(255,20,40,.06);
    transform: scale(1.1);
  }
  .why-ico svg { width: 20px; height: 20px; flex-shrink: 0; }
  .why-row > div:not(.why-ico) { min-width: 0; flex: 1; overflow-wrap: break-word; word-break: break-word; }
  .why-title { font-family: var(--head); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; overflow-wrap: break-word; word-break: break-word; }
  .why-desc  { font-size: .83rem; color: var(--mid); line-height: 1.7; overflow-wrap: break-word; word-break: break-word; }

  /* Stat panel */
  .stat-panel { padding: 2.5rem; }
  .stat-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .stat-cell {
    padding: 1.6rem 1.2rem; text-align: center;
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px; transition: border-color .3s, transform .3s;
  }
  .stat-cell:hover { border-color: rgba(255,20,40,.2); transform: translateY(-4px); }
  .stat-num {
    font-family: var(--head); font-size: 2.4rem; font-weight: 900;
    color: var(--red); text-shadow: 0 0 24px var(--red-glow);
    display: block; line-height: 1; margin-bottom: .4rem;
  }
  .stat-lbl { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

  /* ══════════════════════════════════════════════════
     FEMALE CONTENT
  ══════════════════════════════════════════════════ */
  #female { padding: 8rem 0; background: var(--bg2); position: relative; overflow: hidden; }

  .fem-glow {
    position: absolute; top: 50%; right: -10%; transform: translateY(-50%);
    width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,20,40,.07) 0%, transparent 70%);
    filter: blur(60px); pointer-events: none;
  }

  .fem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .fem-cards { display: flex; flex-direction: column; gap: 1rem; }

  .fc {
    display: flex; align-items: center; gap: 1.3rem; padding: 1.3rem 1.5rem;
    transition: transform .3s, border-color .3s; position: relative;
    will-change: transform, opacity;
  }
  .fc::after {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; background: var(--red); border-radius: 2px; transition: height .3s;
  }
  .fc:hover {
    transform: translateX(8px);
    border-color: rgba(255,20,40,.28);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 18px rgba(255,20,40,.07);
  }
  .fc:hover::after { height: 60%; }

  .fc-b {
    width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px;
    background: var(--red-faint); border: 1px solid rgba(255,20,40,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--red);
    transition: box-shadow .3s, border-color .3s, transform .3s;
  }
  .fc:hover .fc-b {
    border-color: rgba(255,20,40,.4);
    box-shadow: 0 0 20px rgba(255,20,40,.25), inset 0 0 10px rgba(255,20,40,.05);
    transform: scale(1.08);
  }
  .fc-b svg { width: 22px; height: 22px; flex-shrink: 0; }
  .fc > div:not(.fc-b) { min-width: 0; flex: 1; overflow-wrap: break-word; word-break: break-word; }
  .fc-title { font-family: var(--head); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; overflow-wrap: break-word; word-break: break-word; }
  .fc-sub   { font-size: .78rem; color: var(--mid); overflow-wrap: break-word; word-break: break-word; }

  .fem-hl { padding: 2.8rem 2.5rem; position: relative; }
  .fem-hl::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
  }
  .fem-hl::after {
    content: '♀'; position: absolute; bottom: -10px; right: 20px;
    font-size: 9rem; color: rgba(255,20,40,.04); line-height: 1; pointer-events: none;
  }
  .fem-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
  .fem-title { font-family: var(--head); font-size: clamp(1.2rem,2.4vw,1.8rem); font-weight: 900; line-height: 1.25; margin-bottom: 1.2rem; }
  .fem-title em { font-style: normal; color: var(--red); }
  .fem-body { font-size: .86rem; color: var(--mid); line-height: 1.85; margin-bottom: 1.5rem; }

  /* ══════════════════════════════════════════════════
     COMMUNITY
  ══════════════════════════════════════════════════ */
  #community { padding: 8rem 0; position: relative; overflow: hidden; }
  .com-glow {
    position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 600px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(255,20,40,.1) 0%, transparent 70%);
    filter: blur(60px);
  }
  .com-wrap { text-align: center; max-width: 760px; margin: 0 auto; }

  .discord-pill {
    display: inline-flex; align-items: center; gap: .7rem;
    background: rgba(88,101,242,.1); border: 1px solid rgba(88,101,242,.25);
    padding: .55rem 1.4rem; border-radius: 2rem; margin-bottom: 2rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: #8a91ff;
  }

  .perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin: 3rem 0; }
  .perk {
    padding: 1.8rem 1.2rem; text-align: center;
    transition: transform .3s cubic-bezier(.23,1,.32,1), border-color .35s, box-shadow .35s;
    will-change: transform, opacity;
    position: relative; overflow: hidden;
    transform-style: preserve-3d;
  }
  /* Inner radial spotlight — follows cursor */
  .perk::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,20,40,.13), transparent 65%);
    opacity: 0; transition: opacity .4s; pointer-events: none;
  }
  .perk:hover {
    transform: translateY(-8px);
    border-color: rgba(255,20,40,.3);
    box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 0 35px rgba(255,20,40,.14), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .perk:hover::after { opacity: 1; }
  .perk > * { position: relative; z-index: 1; }
  .perk-ico {
    width: 48px; height: 48px; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--red);
    filter: drop-shadow(0 0 12px rgba(255,20,40,.4));
    transition: filter .3s, transform .3s;
  }
  .perk:hover .perk-ico {
    transform: scale(1.18) translateZ(8px);
    filter: drop-shadow(0 0 22px rgba(255,20,40,.75));
  }
  .perk-ico svg { width: 28px; height: 28px; flex-shrink: 0; }
  .perk-lbl { font-family: var(--head); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

  .com-txt { font-size: .95rem; color: var(--mid); line-height: 1.9; margin-bottom: 2.5rem; }

  /* ══════════════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════════════ */
  footer {
    position: relative; z-index: 1;
    border-top: 1px solid rgba(255,20,40,.1);
    background: var(--bg2); padding: 2.5rem 2rem;
  }
  .foot-inner {
    max-width: 1160px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
  }
  .foot-center { text-align: center; }
  .foot-copy { font-size: .76rem; color: var(--muted); }
  .foot-made { font-size: .7rem; color: var(--muted); margin-top: .25rem; letter-spacing: .06em; }
  .foot-fx { color: var(--white); font-weight: 700; }
  .foot-links { display: flex; gap: 1.8rem; list-style: none; }
  .foot-links a { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .25s; }
  .foot-links a:hover { color: var(--red); }


  /* ══════════════════════════════════════════════════
     FOUNDERS SECTION
  ══════════════════════════════════════════════════ */
  #founders {
    position: relative; z-index: 1;
    padding: 7rem 0 6rem; overflow: hidden;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(26,63,255,.04) 50%, var(--bg) 100%);
  }
  #founders .founders-head { text-align: center; margin-bottom: 3.5rem; }
  #founders .founders-eyebrow {
    font-family: var(--head); font-size: .62rem; font-weight: 700;
    letter-spacing: .32em; text-transform: uppercase; color: var(--blue);
    margin-bottom: .9rem; display: flex; align-items: center; justify-content: center; gap: .8rem;
  }
  #founders .founders-eyebrow::before,
  #founders .founders-eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: var(--blue); }
  #founders .founders-title {
    font-family: var(--head); font-size: clamp(1.5rem,3.5vw,2.2rem);
    font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    background: linear-gradient(180deg,#fff 0%,#c8d0e0 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .founders-grid {
    display: flex; justify-content: center; gap: 4rem;
    flex-wrap: wrap; padding: 0 2rem;
  }
  .founder-card {
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    opacity: 0; transform: translateY(32px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .founder-card.visible { opacity: 1; transform: translateY(0); }
  .founder-avatar {
    width: 110px; height: 110px; border-radius: 50%;
    border: 2px solid rgba(26,63,255,.6);
    box-shadow: 0 0 0 4px rgba(26,63,255,.1), 0 0 28px rgba(26,63,255,.3);
    object-fit: cover; background: var(--bg2);
  }
  .founder-avatar-ph {
    width: 110px; height: 110px; border-radius: 50%;
    border: 2px solid rgba(26,63,255,.6);
    box-shadow: 0 0 0 4px rgba(26,63,255,.1), 0 0 28px rgba(26,63,255,.3);
    background: var(--bg2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-size: 2rem; font-weight: 900; color: var(--blue);
  }
  .founder-name {
    font-family: var(--head); font-size: .78rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--white);
  }
  .founder-rule {
    width: 24px; height: 1px; background: var(--blue); opacity: .5; margin: 0 auto;
  }

  /* ══════════════════════════════════════════════════
     REVIEWS SECTION
  ══════════════════════════════════════════════════ */
  #reviews {
    position: relative; z-index: 1;
    padding: 6rem 0 5rem; overflow: hidden;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(26,63,255,.03) 50%, var(--bg) 100%);
  }
  .reviews-head { text-align: center; margin-bottom: 3.5rem; padding: 0 2rem; }
  .reviews-head .label { display: block; margin-bottom: .6rem; }
  .reviews-head h2 { font-family: var(--head); font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
  .reviews-head h2 em { color: var(--red); font-style: normal; text-shadow: 0 0 24px var(--red-glow); }
  .reviews-track-wrap {
    position: relative; overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .reviews-track {
    display: flex; gap: 1.4rem;
    padding: .5rem 2rem;
    transition: transform .6s cubic-bezier(.23,1,.32,1);
    will-change: transform;
  }
  .rev-card {
    flex: 0 0 320px;
    background: var(--glass); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 1.4rem 1.6rem;
    backdrop-filter: blur(12px);
    transition: border-color .3s, box-shadow .3s;
    position: relative; overflow: hidden;
  }
  .rev-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 12px;
    background: linear-gradient(135deg, rgba(26,63,255,.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .rev-card:hover { border-color: rgba(26,63,255,.3); box-shadow: 0 0 24px rgba(26,63,255,.12); }
  .rev-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
  .rev-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--red-dark), var(--blue2, #0a2bcc));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-size: .75rem; font-weight: 700; color: var(--white);
    flex-shrink: 0; border: 1px solid rgba(255,255,255,.1);
  }
  .rev-meta { flex: 1; min-width: 0; }
  .rev-name { font-weight: 700; font-size: .88rem; color: var(--white); }
  .rev-role { font-size: .7rem; color: var(--muted); letter-spacing: .06em; }
  .rev-stars { display: flex; gap: 2px; margin-bottom: .75rem; }
  .rev-stars span { color: #ffd700; font-size: .85rem; }
  .rev-text { font-size: .84rem; color: var(--mid); line-height: 1.75; }
  .rev-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: .9rem; font-size: .62rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue); opacity: .7;
  }
  .rev-badge::before { content: '✦'; font-size: .55rem; }
  .reviews-dots {
    display: flex; justify-content: center; gap: .5rem;
    margin-top: 2rem;
  }
  .rev-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); transition: background .3s, transform .3s; cursor: pointer;
  }
  .rev-dot.active { background: var(--blue); transform: scale(1.4); }

  /* ══════════════════════════════════════════════════
     PARALLAX LAYERS
  ══════════════════════════════════════════════════ */
  [data-parallax] { will-change: transform; }

  /* ══════════════════════════════════════════════════
     MOBILE
  ══════════════════════════════════════════════════ */
  @media (max-width: 900px) {
    .why-grid, .fem-grid { grid-template-columns: 1fr; gap: 3rem; }
  }
  @media (max-width: 768px) {
    html { overflow-x: hidden; }

    nav { padding: 1rem 1.5rem; }
    .nav-links, .nav-btn { display: none; }
    .hamburger { display: flex; }

    /* ── Nav bar on mobile: always solid dark, no blur ── */
    nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #030305 !important; }

    /* ── Burger menu: full-screen solid overlay ── */
    .nav-links.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      /* SOLID black — no backdrop-filter (causes white bleed on mobile) */
      background: #030305;
      justify-content: center;
      align-items: center;
      gap: 0;
      /* z-index inside nav's stacking context — nav itself lifted to 10000 via JS */
      z-index: 999;
      padding: 4rem 0 3rem;
      animation: nav-overlay-in .25s ease both;
    }
    @keyframes nav-overlay-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* Red accent line at very top of overlay */
    .nav-links.open::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--red), transparent);
    }

    .nav-links.open li {
      width: 100%;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,.05);
      opacity: 0;
      animation: nav-item-in .4s cubic-bezier(.23,1,.32,1) both;
    }
    .nav-links.open li:first-child  { border-top: 1px solid rgba(255,255,255,.05); animation-delay: .06s; }
    .nav-links.open li:nth-child(2) { animation-delay: .12s; }
    .nav-links.open li:nth-child(3) { animation-delay: .18s; }
    @keyframes nav-item-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .nav-links.open a {
      display: block;
      font-family: var(--head);
      font-size: 1.3rem; letter-spacing: .3em; text-transform: uppercase;
      color: rgba(255,255,255,.8);
      padding: 1.6rem 2rem;
      transition: color .2s, background .2s;
    }
    .nav-links.open a:active { color: var(--red); background: rgba(255,20,40,.06); }

    /* Discord CTA row — shown inside mobile overlay only */
    .nav-links.open .nav-discord-li {
      display: block !important;
      border: none !important;
      margin-top: 2.5rem;
      padding: 0 2rem;
      animation-delay: .24s;
    }
    .nav-discord-li a {
      display: inline-flex !important;
      align-items: center !important;
      gap: .6rem !important;
      font-family: var(--head) !important;
      font-size: .8rem !important; letter-spacing: .18em !important;
      text-transform: uppercase !important;
      padding: .95rem 2.6rem !important;
      background: var(--red) !important;
      color: #fff !important;
      border-radius: 6px !important;
      border: none !important;
      box-shadow: 0 0 36px rgba(255,20,40,.45) !important;
      transition: box-shadow .2s, transform .2s !important;
      text-decoration: none !important;
    }
    .nav-discord-li a:active { transform: scale(.97) !important; }

    body { cursor: auto; }
    #cur-dot, #spotlight, #sec-ind { display: none; }
    .feat-sticky { height: auto; position: static; }
    .feat-pin { overflow: visible; }
    .feat-track { display: none; }
    .feat-track-mobile { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
    .feat-header-row { padding: 0; margin-bottom: 1.5rem; }
    .feat-progress-bar { display: none; }
    .perks { grid-template-columns: 1fr 1fr; }

    /* ── Global mobile text readability ── */
    p, .body-text, .why-desc, .feat-desc, .fc-sub, .fem-body, .com-txt, .rev-text {
      line-height: 1.7;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .container { padding-left: 20px !important; padding-right: 20px !important; }

    /* Hero mobile */
    .hero-content { padding: 0 20px; max-width: 100%; width: 100%; }
    .hero-desc { font-size: .95rem; line-height: 1.7; }
    .hero-btns { flex-wrap: wrap; gap: .75rem; }
    .hero-btns .btn { font-size: .82rem; padding: .75rem 1.5rem; }

    /* Hero badge — wrap on narrow screens */
    .hero-badge {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      max-width: calc(100vw - 40px);
      letter-spacing: .1em;
      font-size: .65rem;
    }

    /* Section headings mobile */
    .h1 {
      font-size: clamp(1.6rem, 6vw, 2.4rem);
      line-height: 1.2;
      overflow-wrap: break-word;
      word-break: break-word;
      letter-spacing: .02em;
    }
    .body-text { font-size: .95rem; line-height: 1.7; }
    .label { font-size: .62rem; letter-spacing: .18em; }

    /* Enter screen — reduce letter-spacing so text fits */
    .es-logo { letter-spacing: .1em; padding: 0 1rem; }
    .es-tagline { letter-spacing: .18em; padding: 0 2rem; text-align: center; }
    #enterBtn { padding: .9rem 2rem; letter-spacing: .18em; font-size: .75rem; }
    .es-hint { letter-spacing: .15em; font-size: .58rem; }

    /* Scene number */
    .scene-num { left: 1.2rem; letter-spacing: .28em; }

    /* Section vertical padding — consistent breathing room */
    #why, #female, #community, #vault { padding: 5rem 0; }
    #features { padding: 4rem 0; }

    /* Why / Female / Community mobile spacing */
    #why .container, #female .container, #community .container { padding: 0 20px; }
    .why-items { gap: .85rem; }
    .why-row { gap: .85rem; padding: 1.1rem; }
    .why-row::before { display: none; } /* accent bar doesn't read well on mobile */

    /* Stat grid tighter on mobile */
    .stat-num { font-size: 1.9rem; }
    .stat-cell { padding: 1.2rem .8rem; }

    /* Female cards tighter */
    .fc { padding: 1.1rem 1.2rem; gap: 1rem; }
    .fc-b { width: 44px; height: 44px; border-radius: 11px; }
    .fc-title { font-size: .74rem; }
    .fc-sub   { font-size: .74rem; }

    /* Hide floating widgets while mobile nav is open so nothing leaks above overlay */
    body.nav-open #music-player,
    body.nav-open #mp-reopen,
    body.nav-open #sound-toggle,
    body.nav-open .boost-popup,
    body.nav-open #now-playing-toast { opacity: 0 !important; pointer-events: none !important; }

    /* Why section — glassy card wrapper on mobile */
    .why-left {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      padding: 1.5rem 1.2rem;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    /* Why rows — always-on glass on mobile (no hover needed) */
    .why-row {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.09);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Stat panel — clear glass so it doesn't conflict with text above */
    .stat-panel {
      background: rgba(255,255,255,.04) !important;
      border: 1px solid rgba(255,255,255,.1) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      padding: 1.5rem;
      position: relative;
      z-index: 2;
    }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .stat-cell {
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.07);
    }
    .fem-cards { grid-template-columns: 1fr; gap: .75rem; }
    .fem-hl { padding: 1.5rem; }
    .com-wrap { padding: 0 20px; }

    /* Reviews mobile */
    .rev-card { min-width: 80vw; }

    /* Vault mobile */
    .vault-cta { padding: 0 20px; }

    /* Founders mobile */
    .founders-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

    /* Music player — smaller on mobile, bottom-center */
    #music-player {
      bottom: 1rem; left: 50%; transform: translateX(-50%) translateY(12px);
      min-width: 0; width: calc(100vw - 2rem); max-width: 320px;
      padding: .65rem .85rem .55rem;
    }
    #music-player.visible { transform: translateX(-50%) translateY(0); }
    #mp-reopen { bottom: 1rem; left: 50%; transform: translateX(-50%) scale(0.8); }
    #mp-reopen.visible { transform: translateX(-50%) scale(1); }

    /* Boost popup mobile */
    .boost-popup { right: 1rem; bottom: 4.5rem; max-width: calc(100vw - 2rem); min-width: 0; }

    /* ── Mobile GPU savings: reduce expensive blur passes ── */
    /* backdrop-filter blur is composited per-element — reduce on mobile */
    .gc { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    #music-player { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    #now-playing-toast { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  }
  @media (max-width: 500px) {
    .perks { grid-template-columns: 1fr; }
    .foot-inner { flex-direction: column; text-align: center; }
    .foot-links { justify-content: center; }
    .founders-grid { grid-template-columns: 1fr; }
    .h1 { font-size: clamp(1.4rem, 7vw, 2rem); letter-spacing: .01em; }

    /* Extra-small phones — tighten enter screen further */
    .es-logo { letter-spacing: .06em; font-size: clamp(2.2rem, 10vw, 3rem); }
    .es-tagline { letter-spacing: .12em; font-size: .65rem; }
    #enterBtn { padding: .85rem 1.6rem; letter-spacing: .12em; }

    /* Hero badge compact */
    .hero-badge { font-size: .6rem; letter-spacing: .08em; padding: .45rem 1rem; }

    /* Prevent any stray element from causing horizontal scroll */
    section, main, footer, nav { max-width: 100vw; overflow-x: hidden; }
  }

  /* ══════════════════════════════════════════════════
     LOGO HERO — glitch + chromatic aberration
  ══════════════════════════════════════════════════ */
  .logo-hero-wrap {
    position: relative;
    width: min(700px, 88vw);
    margin: 0 auto 2rem;
    cursor: pointer;
    user-select: none;
    will-change: filter;
  }
  .logo-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .logo-layer img,
  .logo-main-img img {
    width: 100%;
    display: block;
  }
  .logo-main-img { position: relative; z-index: 2; }
  .logo-main-img img {
    filter: brightness(0.88) contrast(1.06) saturate(0.92);
  }
  .logo-r { z-index: 3; }
  .logo-r img {
    filter: saturate(5) hue-rotate(0deg);
    mix-blend-mode: screen;
    opacity: 0;
  }
  .logo-b { z-index: 4; }
  .logo-b img {
    filter: saturate(5) hue-rotate(200deg);
    mix-blend-mode: screen;
    opacity: 0;
  }
  @keyframes glitch-r {
    0%,88%,100% { opacity:0; transform:none; clip-path:none; }
    89% { opacity:.65; transform:translate(-5px,0); clip-path:inset(14% 0 52% 0); }
    90% { opacity:.5;  transform:translate(4px,0);  clip-path:inset(62% 0 8% 0); }
    91% { opacity:0;   transform:none;              clip-path:none; }
    94% { opacity:.55; transform:translate(-3px,1px);clip-path:inset(30% 0 44% 0); }
    95% { opacity:0; }
  }
  @keyframes glitch-b {
    0%,88%,100% { opacity:0; transform:none; clip-path:none; }
    89% { opacity:.55; transform:translate(5px,0);  clip-path:inset(52% 0 14% 0); }
    90% { opacity:.4;  transform:translate(-4px,0); clip-path:inset(8% 0 62% 0); }
    91% { opacity:0;   transform:none;              clip-path:none; }
    94% { opacity:.45; transform:translate(3px,-1px);clip-path:inset(44% 0 30% 0); }
    95% { opacity:0; }
  }
  .logo-r { animation: glitch-r 10s steps(1) infinite 1.5s; }
  .logo-b { animation: glitch-b 10s steps(1) infinite 2s; }

  .logo-scan {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 3px,
      rgba(0,0,0,.065) 3px, rgba(0,0,0,.065) 4px
    );
  }
  .logo-vignette {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255,20,40,.2) 0%, transparent 68%);
    mix-blend-mode: screen;
  }
  /* pulse ring under the logo */
  .logo-ring {
    position: absolute;
    inset: -8px; z-index: 1;
    border-radius: 8px;
    border: 1px solid rgba(255,20,40,.2);
    animation: logo-ring-pulse 3s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes logo-ring-pulse {
    0%,100% { opacity:.4; transform:scale(1); }
    50%      { opacity:.1; transform:scale(1.015); }
  }
  .logo-hero-wrap.logo-explode {
    animation: logo-explode .12s steps(1) 8 alternate;
  }
  @keyframes logo-explode {
    0%   { filter:none; transform:scale(1); }
    25%  { filter:hue-rotate(90deg) invert(.25); transform:scale(1.05) skewX(4deg); }
    50%  { filter:hue-rotate(200deg) brightness(1.8); transform:scale(.97) skewX(-3deg); }
    75%  { filter:invert(.2) saturate(3); transform:scale(1.03) translateX(-4px); }
    100% { filter:none; transform:scale(1); }
  }

  /* ══════════════════════════════════════════════════
     SCENE 05 — THE VAULT
  ══════════════════════════════════════════════════ */
  #vault {
    min-height: 100vh;
    display: flex; align-items: center;
    position: relative; overflow: hidden;
  }
  #vault::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 55% 55% at 50% 50%,  rgba(255,20,40,.1)  0%, transparent 65%),
      radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255,20,40,.06) 0%, transparent 60%);
  }
  .vault-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: center;
    padding: 5rem 0; width: 100%;
  }
  .vault-door-wrap {
    display: flex; justify-content: center; align-items: center;
    perspective: 900px;
  }
  .vault-door {
    width: min(300px, 55vw); height: min(300px, 55vw);
    will-change: transform, opacity;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #1e0008, #07000295);
    border: 2px solid rgba(255,20,40,.6);
    position: relative;
    box-shadow:
      0 0 0 10px rgba(255,20,40,.05),
      0 0 90px rgba(255,20,40,.2),
      inset 0 0 60px rgba(0,0,0,.95);
    will-change: transform;
    transform-style: preserve-3d;
  }
  .vault-ring {
    position: absolute; border-radius: 50%; border: 1px solid;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
  }
  .vr1 { width:84%; height:84%; border-color:rgba(255,20,40,.48); }
  .vr2 { width:66%; height:66%; border-color:rgba(255,20,40,.28); }
  .vr3 { width:48%; height:48%; border-color:rgba(255,20,40,.15); }
  .vault-spokes {
    position: absolute; inset: 0; border-radius: 50%;
    animation: vault-rotate 20s linear infinite;
  }
  .vault-spoke {
    position: absolute;
    width: 1.5px; height: 50%;
    background: linear-gradient(to bottom, rgba(255,20,40,.65), transparent);
    top: 0; left: 50%; transform-origin: bottom center;
  }
  @keyframes vault-rotate { to { transform: rotate(360deg); } }
  .vault-core {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    text-align: center; z-index: 2;
  }
  .vault-core-logo {
    font-family: var(--head);
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 900; letter-spacing: .1em;
    color: var(--red);
    text-shadow: 0 0 40px var(--red-glow), 0 0 90px rgba(255,20,40,.3);
    line-height: 1;
  }
  .vault-core-sub {
    font-family: var(--head); font-size: clamp(.52rem, 1.2vw, .72rem);
    font-weight: 700; letter-spacing: .5em; color: rgba(255,255,255,.28);
    margin-top: .3rem;
  }
  .vault-cta { text-align: center; }
  .vault-cta .h1 { margin-bottom: .8rem; }

  /* ══════════════════════════════════════════════════
     SOUND TOGGLE
  ══════════════════════════════════════════════════ */
  #sound-toggle {
    position: fixed;
    bottom: 2.5rem; right: 2.5rem;
    z-index: 500;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--glass); border: 1px solid var(--glass-b);
    backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s, box-shadow .25s, color .25s;
    color: var(--muted);
  }
  #sound-toggle:hover {
    background: var(--red-glass);
    border-color: rgba(255,20,40,.35);
    box-shadow: 0 0 20px rgba(255,20,40,.2);
    color: var(--red);
  }
  #sound-toggle.active {
    background: var(--red-glass);
    border-color: rgba(255,20,40,.45);
    box-shadow: 0 0 26px rgba(255,20,40,.28);
    color: var(--red);
    animation: sound-pulse 2s ease-in-out infinite;
  }
  @keyframes sound-pulse {
    0%,100% { box-shadow: 0 0 26px rgba(255,20,40,.28); }
    50%      { box-shadow: 0 0 42px rgba(255,20,40,.45); }
  }
  #sound-toggle svg { width: 18px; height: 18px; pointer-events: none; }

  /* ══════════════════════════════════════════════════
     EASTER EGG OVERLAY (Konami code)
  ══════════════════════════════════════════════════ */
  #easter-egg {
    position: fixed; inset: 0;
    z-index: 9990;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    pointer-events: none; opacity: 0;
    background: rgba(5,5,7,.85); backdrop-filter: blur(8px);
    transition: opacity .2s;
  }
  #easter-egg.active { pointer-events: all; opacity: 1; }
  .egg-inner {
    font-family: var(--head);
    font-size: clamp(1.8rem, 6vw, 4rem);
    font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
    color: var(--red);
    text-shadow: 0 0 60px var(--red-glow), 0 0 120px rgba(255,20,40,.35);
    text-align: center;
    animation: egg-glitch .25s steps(1) infinite;
  }
  .egg-sub {
    font-size: clamp(.7rem, 1.6vw, 1rem); font-family: var(--head);
    letter-spacing: .4em; text-transform: uppercase;
    color: rgba(255,255,255,.35); margin-top: 1.2rem;
  }
  @keyframes egg-glitch {
    0%,100%{ opacity:1; transform:none; }
    25%    { opacity:.7; transform:skewX(2deg) translateX(2px); }
    75%    { opacity:.85; transform:skewX(-1.5deg) translateX(-1px); }
  }

  /* Global glitch (Konami) */
  @keyframes global-glitch {
    0%  { filter:none; }
    15% { filter:hue-rotate(90deg) invert(.1); transform:skewX(2deg); }
    30% { filter:hue-rotate(180deg) brightness(1.3); transform:skewX(-1.5deg) translateX(3px); }
    50% { filter:hue-rotate(270deg); transform:none; }
    70% { filter:invert(.08) hue-rotate(90deg); transform:skewX(1deg); }
    85% { filter:hue-rotate(360deg) brightness(1.1); }
    100%{ filter:none; transform:none; }
  }
  body.konami-active { animation: global-glitch .4s steps(1) 4; }

  /* Cursor idle */
  .cursor-idle #cur-dot { opacity: .18; }

  /* Vault mobile */
  @media (max-width: 900px) {
    .vault-inner { grid-template-columns: 1fr; gap: 3rem; }
    .vault-door  { width: 220px; height: 220px; }
    .vault-cta   { text-align: center; }
  }

  /* ══════════════════════════════════════════════════
     SCROLL WRAP — structural wrapper only, native scroll
  ══════════════════════════════════════════════════ */
  #scroll-wrap {
    position: relative;
  }

  /* ══════════════════════════════════════════════════
     NOW PLAYING TOAST
  ══════════════════════════════════════════════════ */
  #now-playing-toast {
    position: fixed;
    top: 5.5rem; left: 50%; transform: translateX(-50%) translateY(-8px);
    z-index: 9000;
    background: rgba(5,5,7,.92);
    border: 1px solid rgba(255,20,40,.35);
    backdrop-filter: blur(20px);
    padding: .55rem 1.4rem;
    border-radius: 2rem;
    font-family: var(--head); font-size: .68rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--red);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
    box-shadow: 0 0 24px rgba(255,20,40,.2);
  }

  /* ══════════════════════════════════════════════════
     LOGO-MATCHED PALETTE — red · blue · chrome
  ══════════════════════════════════════════════════ */
  :root {
    --blue:       #1a3fff;
    --blue2:      #0a2bcc;
    --blue-glow:  rgba(26,63,255,.55);
    --blue-faint: rgba(26,63,255,.07);
    --blue-glass: rgba(26,63,255,.13);
    --chrome:     linear-gradient(135deg,#e8eaf0 0%,#fff 35%,#b0b8cc 60%,#d8dce8 100%);
    --silver:     #c0c8d8;
  }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar-thumb { background: linear-gradient(var(--red-dark), var(--blue2)); }


  /* ── Spotlight → dual red+blue ── */
  #spotlight {
    background: radial-gradient(circle,
      rgba(26,63,255,.04) 0%,
      rgba(255,20,40,.03) 45%,
      transparent 70%);
  }

  /* ── Progress bar → red → blue ── */
  #progress {
    background: linear-gradient(90deg, var(--red-dark), var(--red), var(--blue), #6080ff);
    box-shadow: 0 0 12px var(--blue-glow);
  }

  /* ── Section indicator: active dot → blue ── */
  #sec-ind .dot.active {
    background: var(--blue);
    box-shadow: 0 0 10px var(--blue-glow);
  }

  /* ── Nav: D10 red, LEAKS blue ── */
  .logo span { color: var(--blue); text-shadow: 0 0 20px var(--blue-glow); }
  .logo::after { background: linear-gradient(90deg, var(--red), var(--blue), transparent); }
  .nav-links a::after { background: var(--blue); }
  .nav-links a:hover { color: #a0b8ff; }
  .nav-btn {
    border-color: rgba(26,63,255,.35);
    background: var(--blue-faint);
    color: #7090ff;
  }
  .nav-btn:hover {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 0 28px var(--blue-glow);
    border-color: var(--blue);
  }
  nav.solid { border-bottom-color: rgba(26,63,255,.2); }

  /* ── Scene rules: even=red, odd=blue ── */
  #why    .scene-rule,
  #vault  .scene-rule {
    background: linear-gradient(90deg, transparent, rgba(26,63,255,.35), transparent);
  }
  #female   .scene-rule,
  #community .scene-rule {
    background: linear-gradient(90deg, transparent, rgba(255,20,40,.25), var(--blue-glow), transparent);
  }

  /* ── Scene numbers: odd=blue ── */
  #why    .scene-num,
  #vault  .scene-num { color: var(--blue); text-shadow: 0 0 20px var(--blue-glow); }

  /* ── Chrome hero title ── */
  .hero-title {
    background: linear-gradient(180deg,#ffffff 0%,#c8d0e0 45%,#8090b0 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Section headings em → chrome ── */
  .h1 em {
    background: var(--chrome);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(26,63,255,.35));
  }

  /* ── Logo hero underline pulse ── */
  .logo-hero-wrap::before {
    content: '';
    position: absolute; bottom: -4px; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue), var(--red), var(--blue), transparent);
    opacity: .5; pointer-events: none;
    animation: logo-underline-pulse 3s ease-in-out infinite;
  }
  @keyframes logo-underline-pulse {
    0%,100% { opacity: .3; } 50% { opacity: .7; }
  }

  /* ── Feature cards: even → blue accent ── */
  .feat-card:nth-child(even) {
    border-color: rgba(26,63,255,.2);
  }
  .feat-card:nth-child(even):hover {
    border-color: rgba(26,63,255,.5);
    box-shadow: 0 35px 80px rgba(0,0,0,.65), 0 0 40px rgba(26,63,255,.12);
  }
  .feat-card:nth-child(even) .feat-top {
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
  }
  .feat-card:nth-child(even):hover .icon-b {
    box-shadow: 0 0 28px rgba(26,63,255,.25), inset 0 0 16px rgba(26,63,255,.07);
    border-color: rgba(26,63,255,.45);
  }
  .feat-card:nth-child(even) .feat-num { color: #5070e0; }
  .feat-pill:nth-child(odd) { background: var(--blue-glass); border-color: rgba(26,63,255,.25); color: #7090ff; }

  /* ── Stats: alternate stat number color ── */
  .stat-cell:nth-child(even) .stat-num {
    color: var(--blue);
    text-shadow: 0 0 24px var(--blue-glow);
  }
  .stat-cell:nth-child(even):hover { border-color: rgba(26,63,255,.25); }

  /* ── Music player → blue accent ── */
  #music-player { border-color: rgba(26,63,255,.25); }
  .mp-bar { background: linear-gradient(to top, var(--blue2), var(--blue)); }
  .mp-btn:hover { color: var(--blue); border-color: rgba(26,63,255,.4); background: var(--blue-faint); }
  .mp-prog-fill { background: linear-gradient(90deg, var(--blue2), var(--blue), #6080ff); }

  /* ── Sound toggle active → blue ── */
  #sound-toggle.active {
    background: var(--blue-glass);
    border-color: rgba(26,63,255,.45);
    color: var(--blue);
    animation: sound-pulse-blue 2s ease-in-out infinite;
  }
  @keyframes sound-pulse-blue {
    0%,100% { box-shadow: 0 0 26px rgba(26,63,255,.28); }
    50%      { box-shadow: 0 0 42px rgba(26,63,255,.5); }
  }

  /* ── Vault section → blue dominant ── */
  .vault-ring { border-color: rgba(26,63,255,.35) !important; }
  .vault-core { background: radial-gradient(circle, rgba(26,63,255,.15), transparent) !important; }
  .vault-core-logo { color: var(--blue) !important; text-shadow: 0 0 30px var(--blue-glow) !important; }

  /* ── Hero badge border ── */
  .hero-badge { border-color: rgba(26,63,255,.25); }

  /* ══════════════════════════════════════════════════
     SCROLL-BASED FEATURE CARDS — side-pull glass
  ══════════════════════════════════════════════════ */
  .feat-card {
    /* override old carousel width — full-row stacked */
    width: 100% !important;
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 2.2rem;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: start;
    gap: 1.4rem;
    transform-origin: left center;
  }
  /* even cards pull from right */
  .feat-card:nth-child(even) { transform-origin: right center; }

  .feat-card .feat-num {
    grid-column: 1 / -1;
  }
  .feat-card .icon-b {
    grid-row: 2;
    grid-column: 1;
    margin-bottom: 0;
  }
  .feat-card .feat-name,
  .feat-card .feat-desc,
  .feat-card .feat-pill {
    grid-row: auto;
    grid-column: 2;
  }
  .feat-card .feat-top {
    grid-column: 1 / -1;
  }

  /* ══════════════════════════════════════════════════
     ENTER OVERLAY
  ══════════════════════════════════════════════════ */
  #enter-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: #050507;
    transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
  }
  #enter-overlay.dismissed {
    opacity: 0; pointer-events: none; transform: scale(1.04);
  }
  /* full-screen scan lines */
  #enter-overlay::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 3px,
      rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px
    );
  }
  /* subtle red grid */
  #enter-overlay::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(rgba(255,20,40,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,20,40,.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black, transparent);
  }
  .enter-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 1.4rem;
    text-align: center;
    animation: enter-fade-in .8s ease both;
  }
  @keyframes enter-fade-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .enter-logo {
    width: min(520px, 82vw);
    display: block;
    filter: brightness(.82) contrast(1.1);
    animation: enter-logo-glitch 8s steps(1) infinite 3s;
  }
  /* fallback if no logo.png */
  .enter-logo-text {
    font-family: var(--head);
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: 900; letter-spacing: .14em;
    color: var(--white);
    text-shadow: 0 0 60px var(--red-glow);
    display: none;
  }
  .enter-logo[data-failed] { display: none; }
  .enter-logo[data-failed] ~ .enter-logo-text { display: block; }

  @keyframes enter-logo-glitch {
    0%,90%,100% { filter: brightness(.82) contrast(1.1); transform: none; }
    91%  { filter: brightness(.82) contrast(1.1) hue-rotate(8deg); transform: translateX(-3px); }
    92%  { filter: brightness(1.1) contrast(1.2) saturate(1.8); transform: translateX(2px); }
    93%  { filter: brightness(.82) contrast(1.1); transform: none; }
  }
  .enter-tagline {
    font-family: var(--head); font-size: clamp(.58rem, 1.2vw, .72rem);
    font-weight: 700; letter-spacing: .5em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
  }
  .enter-btn {
    font-family: var(--head); font-size: clamp(.8rem, 1.5vw, .92rem);
    font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    padding: 1rem 3rem; border-radius: 6px; cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255,20,40,.55);
    color: var(--red);
    transition: background .3s, border-color .3s, box-shadow .3s, transform .2s;
    position: relative; overflow: hidden;
    margin-top: .4rem;
  }
  .enter-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,20,40,.12), transparent);
    opacity: 0; transition: opacity .3s;
  }
  .enter-btn:hover {
    background: rgba(255,20,40,.1);
    border-color: var(--red);
    box-shadow: 0 0 40px rgba(255,20,40,.35), inset 0 0 20px rgba(255,20,40,.06);
    transform: translateY(-2px);
  }
  .enter-btn:hover::after { opacity: 1; }
  .enter-btn:active { transform: scale(.98); }
  .enter-audio-hint {
    font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
    color: rgba(255,255,255,.2);
  }
  /* pulsing red ring under button */
  .enter-ring {
    position: absolute;
    width: 200px; height: 200px; border-radius: 50%;
    border: 1px solid rgba(255,20,40,.15);
    pointer-events: none;
    animation: enter-ring-pulse 3s ease-in-out infinite;
  }
  .enter-ring:nth-child(2) { animation-delay: 1s; }
  .enter-ring:nth-child(3) { animation-delay: 2s; }
  @keyframes enter-ring-pulse {
    0%   { transform: scale(.5); opacity: .5; }
    100% { transform: scale(2.8); opacity: 0; }
  }
  .enter-rings {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; pointer-events: none;
  }

  /* ══════════════════════════════════════════════════
     ENTER SCREEN
  ══════════════════════════════════════════════════ */
  #enter-screen {
    position: fixed; inset: 0; z-index: 99999;
    background: #030305;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
    transition: opacity .8s cubic-bezier(.23,1,.32,1), visibility .8s;
  }
  #enter-screen.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
  }

  .es-grid {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    background-image:
      linear-gradient(rgba(26,63,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26,63,255,.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  }

  .es-glow-r {
    position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,20,40,.12) 0%, transparent 70%);
    top: 50%; left: 30%; transform: translate(-50%,-50%);
    pointer-events: none;
  }
  .es-glow-b {
    position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(26,63,255,.12) 0%, transparent 70%);
    top: 50%; left: 70%; transform: translate(-50%,-50%);
    pointer-events: none;
  }

  .es-logo-img {
    width: clamp(90px, 18vw, 160px);
    margin-bottom: 1.8rem;
    position: relative; z-index: 1;
    opacity: .92;
    filter: drop-shadow(0 0 24px rgba(255,20,40,.45)) drop-shadow(0 0 60px rgba(26,63,255,.25));
    animation: es-flicker 6s ease-in-out infinite;
  }

  .es-logo {
    font-family: var(--head); font-weight: 900;
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    letter-spacing: .25em; text-transform: uppercase;
    position: relative; z-index: 1; text-align: center;
    line-height: 1;
    animation: es-flicker 6s ease-in-out infinite;
  }
  .es-logo-d10  {
    color: var(--white);
    text-shadow: 0 0 60px rgba(255,20,40,.4), 0 0 120px rgba(255,20,40,.15);
  }
  .es-logo-leaks {
    color: var(--blue);
    text-shadow: 0 0 60px var(--blue-glow), 0 0 120px rgba(26,63,255,.2);
  }
  @keyframes es-flicker {
    0%,94%,96%,100% { opacity: 1; }
    95% { opacity: .7; }
  }

  .es-tagline {
    font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
    color: var(--mid); margin-top: 1rem; position: relative; z-index: 1;
  }

  .es-line {
    width: 80px; height: 1px; margin: 2.8rem auto;
    background: linear-gradient(90deg, transparent, var(--blue), var(--red), transparent);
    position: relative; z-index: 1;
  }

  #enterBtn {
    position: relative; z-index: 1;
    font-family: var(--head); font-size: .8rem; font-weight: 700;
    letter-spacing: .35em; text-transform: uppercase;
    padding: 1.1rem 3rem; border: 1px solid rgba(26,63,255,.5);
    background: rgba(26,63,255,.08);
    color: var(--white); cursor: pointer;
    border-radius: 4px;
    transition: background .3s, border-color .3s, box-shadow .3s, transform .2s;
    animation: es-pulse-btn 2.5s ease-in-out infinite;
  }
  #enterBtn:hover {
    background: rgba(26,63,255,.2);
    border-color: var(--blue);
    box-shadow: 0 0 40px var(--blue-glow), 0 0 80px rgba(26,63,255,.15);
    transform: scale(1.04);
    animation: none;
  }
  @keyframes es-pulse-btn {
    0%,100% { box-shadow: 0 0 20px rgba(26,63,255,.2); }
    50%      { box-shadow: 0 0 40px rgba(26,63,255,.45), 0 0 60px rgba(255,20,40,.1); }
  }

  .es-hint {
    position: absolute; bottom: 2.5rem;
    font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
    color: var(--muted); z-index: 1;
    display: flex; align-items: center; gap: .6rem;
  }
  .es-hint::before, .es-hint::after {
    content: ''; display: block; width: 20px; height: 1px;
    background: var(--muted); opacity: .5;
  }

  /* ══════════════════════════════════════════════════
     MUSIC PLAYER BAR
  ══════════════════════════════════════════════════ */
  #music-player {
    position: fixed;
    bottom: 2.5rem; left: 2.5rem;
    z-index: 500;
    min-width: 220px; max-width: 280px;
    background: rgba(5,5,7,.88);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,20,40,.18);
    border-radius: 12px;
    padding: .85rem 1rem .7rem;
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s, transform .5s;
    pointer-events: none;
  }
  #music-player.visible {
    opacity: 1; transform: translateY(0); pointer-events: all;
  }
  .mp-top {
    display: flex; align-items: center;
    justify-content: space-between; gap: .8rem;
    margin-bottom: .6rem;
  }
  .mp-info {
    display: flex; align-items: center; gap: .7rem;
    min-width: 0;
  }
  .mp-eq {
    flex-shrink: 0;
    display: flex; align-items: flex-end; gap: 2px; height: 16px;
  }
  .mp-bar {
    width: 3px; background: var(--red); border-radius: 2px;
    animation: eq-bounce .6s ease-in-out infinite alternate;
  }
  .mp-bar:nth-child(1) { height: 6px;  animation-delay:  0s; }
  .mp-bar:nth-child(2) { height: 12px; animation-delay: .12s; }
  .mp-bar:nth-child(3) { height: 8px;  animation-delay: .24s; }
  .mp-bar:nth-child(4) { height: 14px; animation-delay: .08s; }
  @keyframes eq-bounce {
    from { transform: scaleY(.4); }
    to   { transform: scaleY(1); }
  }
  #music-player.paused .mp-bar { animation-play-state: paused; }
  .mp-meta { min-width: 0; }
  .mp-title {
    font-family: var(--head); font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--white); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: block;
  }
  .mp-artist {
    font-size: .62rem; color: var(--muted);
    letter-spacing: .06em; display: block; margin-top: .1rem;
  }
  .mp-btns { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
  .mp-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: none; border: 1px solid rgba(255,255,255,.08);
    color: var(--mid); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .2s, border-color .2s, background .2s;
    font-size: .7rem;
  }
  .mp-btn:hover { color: var(--red); border-color: rgba(255,20,40,.35); background: var(--red-faint); }
  .mp-btn svg   { width: 12px; height: 12px; pointer-events: none; }
  .mp-close-btn {
    opacity: 0.5;
    transition: opacity .2s, color .2s, border-color .2s, background .2s;
  }
  .mp-close-btn:hover { opacity: 1; }

  /* progress bar */
  .mp-prog {
    height: 2px; background: rgba(255,255,255,.08);
    border-radius: 2px; overflow: hidden;
  }
  .mp-prog-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--red-dark), var(--red));
    border-radius: 2px; transition: width .25s linear;
  }

  /* Music reopen floating button */
  #mp-reopen {
    position: fixed;
    bottom: 2.5rem; left: 2.5rem;
    z-index: 500;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(5,5,7,.9);
    border: 1px solid rgba(255,20,40,.25);
    color: var(--mid);
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(16px);
    opacity: 0; transform: scale(0.8);
    transition: opacity .3s, transform .3s, color .2s, border-color .2s;
    pointer-events: none;
  }
  #mp-reopen svg { width: 16px; height: 16px; pointer-events: none; }
  #mp-reopen.visible {
    display: flex;
    opacity: 1; transform: scale(1);
    pointer-events: auto;
  }
  #mp-reopen:hover { color: var(--red); border-color: rgba(255,20,40,.5); }

/* --- logo fallback (moved from inline) --- */
      .logo-fallback { display:none!important; }
      .logo-fallback ~ h1.hero-title,
      .logo-fallback ~ .hero-sub { display:block!important; }
      h1.hero-title, .hero-sub { display:none; }

/* ══════════════════════════════════════════════════════
   DISCORD BOOST POPUP
══════════════════════════════════════════════════════ */
.boost-popup {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(8, 6, 18, 0.95);
  border: 1px solid rgba(244, 127, 255, 0.3);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(244, 127, 255, 0.08), 0 8px 40px rgba(0,0,0,0.5), 0 0 24px rgba(244,127,255,0.08);
  transform: translateX(calc(100% + 3rem));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: none;
  max-width: 290px;
  min-width: 230px;
}
.boost-popup.bp-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.bp-boost-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: #f47fff;
  filter: drop-shadow(0 0 6px rgba(244,127,255,0.6));
}
.bp-boost-icon svg { width: 100%; height: 100%; }
.bp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(244, 127, 255, 0.4);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(244,127,255,0.25);
}
.bp-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.bp-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-msg {
  font-size: 0.7rem;
  color: #f47fff;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
}
.bp-close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1rem 0 0.1rem 0.4rem;
  line-height: 1;
  transition: color 0.2s;
}
.bp-close:hover { color: rgba(255,255,255,0.8); }