*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --edge: 28px;
      --t: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      /* Emil Kowalski custom easing curves: stronger than CSS defaults */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* enter, ui interactions */
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* on-screen movement */
      --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);       /* iOS-like drawer feel */
      --bg: #fff;
      --ink: #000;
      --muted: #555;       /* #555 on white = 7.0:1 ✓ */
      --light: #767676;    /* FIX: was #999 (2.85:1 fail) → #767676 = 4.54:1 ✓ */
      --border: #e0e0e0;
      --surface: #f5f5f5;
      /* z-index scale */
      --z-loading: 9000;
      --z-hero-ui: 10;
      --z-vignette: 2;
      --z-header: 500;
      --z-mobile-nav: 600;
    }

    /* scroll-behavior: smooth removed · was fighting the JS rAF smooth-scroll
       and creating laggy / wrong-target jumps. JS handles smoothness now. */
    html { scroll-behavior: auto; font-size: 16px; scroll-padding-top: 60px; }
    /* Sections with anchor IDs get a default top margin when scrolled to */
    section[id], div[id] { scroll-margin-top: 60px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: 'Instrument Sans', system-ui, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1,h2,h3,h4 { font-family: 'Instrument Serif', Georgia, serif; }
    h2 { font-weight: 500; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; background: none; border: none; cursor: pointer; padding: 0; }
    /* Emil polish: every pressable button feels responsive when pressed */
    button, .btn, .ctrl, .card-cta--unlock, .header-cta-btn,
    .a24-btn, .pricing-contact-btn, .gi-start-btn, .menu-badge,
    .dossier-btn-primary, .dossier-btn-secondary, .eg-submit, .nl-submit, .ep-btn {
      transition: transform 160ms var(--ease-out), background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }
    button:active:not(:disabled), .btn:active, .ctrl:active,
    .card-cta--unlock:active, .header-cta-btn:active,
    .a24-btn:active, .pricing-contact-btn:active, .gi-start-btn:active,
    .menu-badge:active, .dossier-btn-primary:active, .dossier-btn-secondary:active,
    .eg-submit:active, .nl-submit:active, .ep-btn:active {
      transform: scale(0.97);
    }
    /* Hover effects only on devices with hover capability (avoid sticky touch-hover) */
    @media (hover: hover) and (pointer: fine) {
      .card { will-change: transform; }
    }
    svg { display: block; }

    /* Text selection color ·matches the progress bar gradient (cool palette) */
    ::selection      { background: #5d8cff; color: #fff; text-shadow: none; }
    ::-moz-selection { background: #5d8cff; color: #fff; text-shadow: none; }
    /* Dark backgrounds: use lighter cyan accent */
    .hero ::selection,
    .cinematic-vr ::selection,
    .energy-section ::selection,
    .singularity-section ::selection,
    .pixel-trail-section ::selection,
    .language-section ::selection,
    .game-section-fw ::selection,
    .neural-section ::selection,
    .a24-section ::selection,
    footer ::selection { background: #00e5ff; color: #000; }

    /* FIX 4  - Focus-visible: clear ring on light and dark contexts */
    :focus-visible {
      outline: 2px solid #000;
      outline-offset: 3px;
      border-radius: 2px;
    }
    .hero-ui :focus-visible {
      outline-color: rgba(255,255,255,.85);
    }

    /* ─── LOADING SCREEN ─────────────────────────────── */
    .loading {
      position: fixed; inset: 0;
      background: #0d0d0d;
      display: flex; align-items: center; justify-content: center;
      z-index: var(--z-loading);
      animation: loading-fade 0.7s ease 2.8s forwards;
    }
    .loading-inner {
      display: flex; flex-direction: column; align-items: center;
      gap: 0; text-align: center;
    }
    .loading-logo {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      font-style: italic;
      letter-spacing: 0.22em;
      color: #fff;
      margin-bottom: 36px;
      line-height: 1;
    }
    .loading-bar-wrap {
      width: min(80%, 320px); height: 3px;
      background: rgba(255,255,255,.12);
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
      border-radius: 2px;
    }
    .loading-bar-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: #fff;
      width: 0%;
      border-radius: 2px;
    }
    .loading-pct {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 1.1rem; letter-spacing: 0.12em;
      color: rgba(255,255,255,.7); font-weight: 700;
      margin-bottom: 0;
      font-variant-numeric: tabular-nums;
    }
    .loading-fine {
      position: absolute; bottom: 40px; left: 50%;
      transform: translateX(-50%);
      font-family: 'Instrument Sans', sans-serif;
      font-size: .8rem; letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.75);
      white-space: nowrap; line-height: 1.9;
      text-align: center;
    }
    @keyframes loading-fade {
      to { opacity: 0; pointer-events: none; visibility: hidden; }
    }

    /* ─── HERO ───────────────────────────────────────── */
    .hero {
      position: relative;
      width: 100vw;
      height: 100svh;
      overflow: hidden;
      background: #111;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 70% 50%, #2a2a2a 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 20% 30%, #1a1a1a 0%, transparent 70%),
        #0d0d0d;
      z-index: 0;
    }
    .hero-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .hero-grain {
      position: absolute; inset: 0; z-index: 3; pointer-events: none;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: overlay;
    }
    .hero-vignette {
      position: absolute; inset: 0; z-index: var(--z-vignette);
      background:
        linear-gradient(to right,  rgba(0,0,0,.45) 0%, transparent 38%),
        linear-gradient(to bottom, rgba(0,0,0,.3)  0%, transparent 25%),
        linear-gradient(to top,    rgba(0,0,0,.3)  0%, transparent 25%),
        linear-gradient(to left,   rgba(0,0,0,.2)  0%, transparent 25%);
      pointer-events: none;
    }

    /* ─── HERO UI LAYER ──────────────────────────────── */
    .hero-ui {
      position: absolute; inset: 0; z-index: var(--z-hero-ui);
      pointer-events: none;
    }
    .hero-ui > * { pointer-events: auto; }

    /* TOP-RIGHT ·Saucer-in-badge (single button, replaces old saucer-cluster) */
    .menu-badge {
      position: absolute;
      top: var(--edge); right: var(--edge);
      z-index: 12;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 7px 14px 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(8,12,28,.55);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      color: rgba(255,255,255,.92);
      cursor: pointer;
      transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
      animation: fade-in-down .6s ease 3.2s both;
      pointer-events: auto;
    }
    .menu-badge-saucer {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 22px;
      color: rgba(255,255,255,.95);
      transition: transform .35s var(--ease-out), filter .35s var(--ease-out);
    }
    .menu-badge:hover .menu-badge-saucer {
      transform: translateY(-1px) rotate(-6deg);
      filter: drop-shadow(0 0 6px rgba(0,229,255,.6));
    }
    .menu-badge:hover {
      border-color: rgba(0,229,255,.6);
      background: rgba(8,12,28,.85);
      transform: translateY(-1px);
    }
    .menu-badge:hover .menu-badge-chevron { transform: translateX(2px); }
    .menu-badge-dot-wrap {
      position: relative;
      width: 10px; height: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .menu-badge-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #00e5ff;
      position: relative;
      box-shadow: 0 0 8px rgba(0,229,255,.7);
    }
    .menu-badge-dot::before,
    .menu-badge-dot::after {
      content: '';
      position: absolute; inset: -2px;
      border-radius: 50%;
      background: rgba(0,229,255,.55);
      animation: menu-dot-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
    }
    .menu-badge-dot::after {
      animation-delay: 0.55s;
    }
    @keyframes menu-dot-ping {
      0%   { transform: scale(1);   opacity: .7; }
      80%, 100% { transform: scale(2.4); opacity: 0; }
    }
    .menu-badge-divider {
      width: 1px; height: 11px;
      background: rgba(255,255,255,.22);
    }
    .menu-badge-chevron {
      width: 11px; height: 11px;
      stroke: rgba(255,255,255,.65);
      stroke-width: 2;
      fill: none;
      transition: transform .2s ease;
    }
    /* Animated trail SVG above the badge (light spark traveling) */
    .menu-badge-trail {
      position: absolute;
      bottom: 100%; left: 0; right: 0;
      width: 100%; height: 36px;
      pointer-events: none;
      opacity: .9;
    }
    .menu-badge-trail circle {
      offset-path: path('M 5 32 Q 30 32 30 18 Q 30 4 60 4 Q 95 4 95 22');
      offset-rotate: 0deg;
      animation: menu-trail-travel 3.2s linear infinite;
    }
    @keyframes menu-trail-travel {
      0%   { offset-distance: 0%;   opacity: 0; }
      10%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }
    @media (max-width: 768px) {
      /* Mobile: circular UFO menu button with the pulsing dot stacked below */
      .menu-badge {
        flex-direction: column;
        gap: 5px;
        width: 60px;
        height: 60px;
        padding: 0;
        border-radius: 50%;
        top: 16px; right: 16px;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(255,255,255,.28);
        background: rgba(8,12,28,.6);
      }
      .menu-badge-trail { display: none; }
      .menu-badge-divider { display: none; }
      .menu-badge-chevron { display: none; }
      .menu-badge-saucer {
        width: 32px; height: 22px;
        margin-top: 4px;
      }
      .menu-badge-saucer svg { width: 30px; height: 22px; }
      .menu-badge-dot-wrap {
        order: 2;
        width: 8px; height: 8px;
      }
      .menu-badge-dot { width: 4px; height: 4px; }
      .menu-badge-dot::before, .menu-badge-dot::after {
        inset: -1px;
      }
    }
    .saucer-btn:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.75);
      transform: translateY(-3px) rotate(-8deg);
      box-shadow: 0 0 24px rgba(0,229,255,.25), 0 8px 20px rgba(0,0,0,.4);
    }
    .saucer-btn:hover svg { filter: drop-shadow(0 0 4px rgba(0,229,255,.6)); }
    .saucer-btn { transition: background .25s, border-color .25s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
    .saucer-ring {
      position: absolute;
      width: 86px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.2);
      pointer-events: none;
    }
    .saucer-ring::after {
      content: '';
      position: absolute;
      width: 5px; height: 5px;
      background: #fff;
      border-radius: 50%;
      top: 50%; right: -2.5px;
      transform: translateY(-50%);
      box-shadow: 0 0 7px 1px rgba(180,220,255,.9);
    }
    .saucer-ring--a { animation: saucer-orbit-a 3.6s linear infinite; }
    .saucer-ring--b { animation: saucer-orbit-b 5.4s linear infinite; }
    @keyframes saucer-orbit-a {
      from { transform: rotate(-40deg); }
      to   { transform: rotate(320deg); }
    }
    @keyframes saucer-orbit-b {
      from { transform: rotate(40deg); }
      to   { transform: rotate(400deg); }
    }
    .saucer-btn:hover .saucer-ring { border-color: rgba(255,255,255,.4); }

    /* TOP-CENTER  - logo: left:0/right:0 avoids transform conflict */
    .hero-logo {
      position: absolute;
      top: var(--edge);
      left: 0; right: 0;
      text-align: center;
      pointer-events: none;
      animation: fade-in-down .6s ease 3.2s both;
    }
    .hero-logo-name {
      display: block;
    }
    .hero-logo-name img {
      height: 52px;
      width: auto;
    }
    /* FIX 7  - min 13px = 0.87rem on 15px base */
    .hero-logo-sub {
      display: block;
      font-size: 0.87rem;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,.28);
      text-transform: uppercase;
      margin-top: 3px;
      animation: fci-shimmer 5s ease-in-out infinite;
    }

    /* TOP-LEFT  - EasyTask Studio badge */
    .easytask-badge {
      position: absolute; top: var(--edge); left: calc(var(--edge) + 90px);
      display: flex; align-items: center; gap: 6px;
      text-decoration: none; color: rgba(255,255,255,.4);
      font-family: 'Instrument Sans', sans-serif;
      font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 4px; padding: 6px 10px;
      background: rgba(4,4,8,.45); backdrop-filter: blur(8px);
      transition: color .2s, border-color .2s;
      animation: fade-in-down .6s ease 3.2s both;
    }
    .easytask-badge:hover { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }

    /* TOP LEFT: Circular shader badge */
    .hero-shader-badge {
      position: absolute; top: var(--edge); left: var(--edge);
      width: 100px; height: 100px;
      display: flex; align-items: center; justify-content: center;
      animation: fade-in-down .6s ease 3.2s both;
      z-index: 2; overflow: visible;
    }
    .hero-shader-canvas {
      position: absolute;
      width: 60px; height: 60px;
      border-radius: 50%; overflow: hidden;
    }
    .hero-shader-canvas canvas { width: 60px; height: 60px; display: block; }
    .hero-shader-text-svg {
      position: absolute;
      width: 100px; height: 100px;
      top: 0; left: 0;
      animation: hero-shader-spin 20s linear infinite;
      overflow: visible;
    }
    .hero-shader-text {
      font-size: 10.5px; fill: rgba(255,255,255,0.65);
      font-family: 'Instrument Sans', sans-serif; font-weight: 500; letter-spacing: .05em;
    }
    @keyframes hero-shader-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* BOTTOM-LEFT  - info text */
    .hero-info {
      position: absolute;
      bottom: var(--edge); left: var(--edge);
      animation: fade-in-up .6s ease 3.4s both;
    }
    .hero-info p {
      font-size: 0.87rem;
      color: rgba(255,255,255,.6);
      line-height: 1.8;
      max-width: 240px;
    }
    .hero-info-shop {
      display: inline-block;
      margin-top: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(0,229,255,.7);
      border-bottom: 1px solid rgba(0,229,255,.3);
      letter-spacing: .05em;
      transition: color .2s, border-color .2s;
      cursor: pointer;
    }
    .hero-info-shop:hover { color: rgba(0,229,255,1); border-color: rgba(0,229,255,.7); }
    .hero-info strong { color: rgba(255,255,255,.9); font-weight: 600; }

    /* BOTTOM-RIGHT  - all hero bottom controls */
    .hero-bottom-right {
      position: absolute;
      bottom: var(--edge); right: var(--edge);
      display: flex; gap: 10px; align-items: center;
    }
    /* Scroll-hint as ctrl-style icon button */
    .scroll-hint-ctrl {
      order: -1; /* desktop: appear before skip + audio */
      width: 44px; height: 44px; border-radius: 6px;
      border: 1.5px solid rgba(255,255,255,.45);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 2px;
      transition: border-color var(--t), background var(--t);
      cursor: default;
    }
    .scroll-hint-ctrl .scroll-hint-track {
      width: 14px; height: 22px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 7px;
      position: relative; display: flex; justify-content: center; padding-top: 4px;
    }
    .scroll-hint-ctrl .scroll-hint-dot {
      width: 2px; height: 5px; background: rgba(255,255,255,.8); border-radius: 1px;
    }
    /* Color states: white=ready, green=playing, red=muted/stopped */
    #audioBtn { border-color: rgba(220,55,55,.65); color: rgba(220,55,55,.9); }
    #audioBtn.audio-on { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.9); }
    /* Play button: white when paused (ready), green when playing, red when stopped/ended */
    #playBtn { border-color: rgba(255,255,255,.55); color: rgba(255,255,255,.95); }
    #playBtn.playing { border-color: rgba(60,220,100,.75); color: rgba(60,220,100,1); }
    #playBtn.stopped { border-color: rgba(220,55,55,.7); color: rgba(220,55,55,.95); }
    #hideUiBtn { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.9); }
    body.ui-hidden #hideUiBtn { border-color: rgba(220,55,55,.65); color: rgba(220,55,55,.9); }
    /* Smooth morph between play triangle ↔ pause bars (21dev style) */
    #playBtn svg #play-icon,
    #playBtn svg #pause-icon {
      transform-origin: 12px 12px;
      transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .2s ease;
    }
    #playBtn:not(.playing) #pause-icon { transform: scale(.5); opacity: 0; }
    #playBtn.playing #play-icon { transform: scale(.5); opacity: 0; }
    #playBtn.playing #play-icon { fill: currentColor; }
    /* When playing, the triangle hides; ensure pause shows full size */
    #playBtn #pause-icon { transform: scale(1); }
    #playBtn:not(.playing) #play-icon {
      transform: scale(1);
      opacity: 1 !important;
      fill: currentColor;
    }
    /* Audio button: smooth mute-line slide-in */
    #audioBtn svg #vol-mute-line {
      transition: stroke-dashoffset .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
      stroke-dasharray: 32;
      stroke-dashoffset: 0;
    }
    #audioBtn.audio-on svg #vol-mute-line {
      stroke-dashoffset: 32;
      opacity: 0;
    }
    /* Eye (hide-UI) button: smooth slash toggle */
    #hideUiBtn svg .hui-eye-slash {
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
      transition: stroke-dashoffset .35s cubic-bezier(.32,.72,0,1);
    }
    body.ui-hidden #hideUiBtn svg .hui-eye-slash { stroke-dashoffset: 0; }
    body.ui-hidden #hideUiBtn svg .hui-eye-line { opacity: .4; transition: opacity .3s ease; }
    .hero-controls {
      display: flex; gap: 10px; align-items: center;
      animation: fade-in-up .6s ease 3.4s both;
    }
    /* FIX 2  - touch targets minimum 44px */
    .ctrl {
      width: 44px; height: 44px;
      border-radius: 6px;
      border: 1.5px solid rgba(255,255,255,.45);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--t), border-color var(--t), transform var(--t);
    }
    .ctrl:hover {
      background-color: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.85);
      transform: translateY(-2px);
    }
    .ctrl-text {
      width: auto; min-width: 44px; height: 44px;
      padding: 0 10px; gap: 6px;
    }
    .ctrl-text .t-icon { font-weight: 700; font-size: 1rem; }
    .ctrl-text .t-adj {
      display: flex; flex-direction: column; gap: 1px;
      border-left: 1px solid rgba(255,255,255,.3);
      padding-left: 6px;
    }
    /* FIX 2  - +/- buttons: min 22px each so combined ≈44px vertical */
    .ctrl-text .t-adj button {
      color: #fff; font-size: 0.9rem; font-weight: 700;
      line-height: 1; padding: 4px 5px;
      border-radius: 2px; min-height: 22px;
      transition: background var(--t);
    }
    .ctrl-text .t-adj button:hover { background: rgba(255,255,255,.2); }

    /* CENTER-RIGHT  - nav dots
       FIX 2  - 44px hit area via button size; visual dot via ::after */
    .side-nav {
      position: absolute;
      top: 50%; right: var(--edge);
      transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 4px;
      animation: side-nav-in .6s ease 3.4s both;
    }
    .nav-dot {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: transform var(--t);
    }
    .nav-dot::after {
      content: '';
      width: 10px; height: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.55);
      transition: all var(--t);
    }
    .nav-dot::before {
      content: attr(data-label);
      position: absolute; right: calc(100% - 4px); top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      font-size: 0.87rem;
      color: rgba(255,255,255,.65);
      opacity: 0;
      transition: opacity var(--t);
      pointer-events: none;
      background: rgba(0,0,0,.35);
      padding: 3px 8px;
      border-radius: 3px;
    }
    .nav-dot:hover::before, .nav-dot.active::before { opacity: 1; }
    .nav-dot:hover::after  { background: rgba(255,255,255,.5); border-color: #fff; }
    .nav-dot.active::after { background: #fff; border-color: #fff; }

    /* ─── CHAPTER PANEL ──────────────────────────────── */
    .scroll-text-positioner {
      position: absolute;
      left: var(--edge);
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    /* Decorative line extending right from panel, fades to nothing */
    .scroll-text-positioner::after {
      content: '';
      position: absolute;
      left: 100%; top: 50%;
      margin-top: -0.5px;
      width: 80px; height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, transparent 100%);
      pointer-events: none;
    }
    .scroll-text {
      width: 400px;
      background: rgba(8,8,12,.55);
      backdrop-filter: blur(36px) saturate(1.4);
      -webkit-backdrop-filter: blur(36px) saturate(1.4);
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.14);
      min-height: 200px;
      position: relative;
      overflow: hidden;
      pointer-events: auto;
      animation: fade-in-right .6s ease 3.4s both;
      box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
      transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    }
    /* When collapsed, slide the text out to the left AND let the toggle button
       follow it leftward by collapsing the flex slot via negative margin-left.
       The toggle stays visible because it stops at the viewport edge. */
    .scroll-text-positioner .scroll-text {
      transition: transform .4s cubic-bezier(.4,0,.2,1),
                  margin-left .4s cubic-bezier(.4,0,.2,1),
                  opacity .3s ease,
                  visibility 0s linear 0s;
    }
    .scroll-text-positioner.collapsed .scroll-text {
      transform: translateX(calc(-100% - var(--edge) - 8px));
      margin-left: calc(-1 * (400px + 8px)); /* collapse the flex slot so the toggle slides left */
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: transform .4s cubic-bezier(.4,0,.2,1),
                  margin-left .4s cubic-bezier(.4,0,.2,1),
                  opacity .3s ease,
                  visibility 0s linear .3s;
    }
    .scroll-text-positioner .panel-toggle {
      transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    .scroll-text-positioner.collapsed::after { opacity: 0; transition: opacity .3s; }
    .panel-toggle {
      flex-shrink: 0;
      width: 30px; height: 30px;
      background: rgba(8,8,12,.65);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 7px;
      color: rgba(255,255,255,.55);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      margin-top: 18px;
      pointer-events: auto;
      transition: background .2s, border-color .2s, color .2s;
    }
    .panel-toggle:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.3); }
    .panel-toggle .icon-closed { display: none; }
    .scroll-text-positioner.collapsed .panel-toggle .icon-open { display: none; }
    .scroll-text-positioner.collapsed .panel-toggle .icon-closed { display: block; }
    .scroll-section {
      position: absolute;
      inset: 0;
      padding: 22px 22px 28px;
      opacity: 0;
      transition: opacity .55s ease;
      pointer-events: none;
      display: flex;
      flex-direction: column;
    }
    .scroll-section.active {
      opacity: 1;
      pointer-events: auto;
    }
    /* Chapter number */
    .scroll-section-label {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
      font-weight: 600;
      margin-bottom: 10px;
      flex-shrink: 0;
      transition: color .55s ease;
    }
    .scroll-section.active .scroll-section-label {
      color: rgba(0,229,255,.75);
      animation: chapter-label-pulse 3.5s ease-in-out infinite;
    }
    @keyframes chapter-label-pulse {
      0%, 100% { color: rgba(0,229,255,.75); }
      50%       { color: rgba(0,229,255,.28); }
    }
    /* Chapter name */
    .scroll-section h3 {
      font-family: 'Instrument Serif', serif;
      font-size: 1.75rem;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.01em;
      color: rgba(255,255,255,.92);
      text-transform: none;
      line-height: 1.3;
      margin-bottom: 14px;
      flex-shrink: 0;
    }
    .scroll-section.active h3 {
      animation: chapter-flash .65s ease forwards;
    }
    @keyframes chapter-flash {
      0%   { color: #00e5ff; text-shadow: 0 0 28px rgba(0,229,255,.9), 0 0 8px rgba(0,229,255,.6); }
      55%  { color: #00e5ff; text-shadow: 0 0 28px rgba(0,229,255,.9), 0 0 8px rgba(0,229,255,.6); }
      100% { color: rgba(255,255,255,.92); text-shadow: none; }
    }
    .scroll-section h3::after {
      content: '';
      display: block;
      width: 24px; height: 1px;
      background: rgba(255,255,255,.18);
      margin-top: 12px;
    }
    .scroll-section p {
      font-size: 0.92rem;
      color: rgba(255,255,255,.5);
      line-height: 1.85;
      flex: 1;
      padding-bottom: 8px;
    }

    /* First Contact Initiative shimmer */
    @keyframes fci-shimmer {
      0%, 100% { color: rgba(255,255,255,.28); letter-spacing: 0.22em; }
      40%       { color: rgba(255,255,255,.9);  letter-spacing: 0.26em; }
      65%       { color: rgba(100,210,255,.85); letter-spacing: 0.24em; }
    }

    /* FIX 1  - Scroll-hint: same pattern, positioner handles translateX */
    .scroll-hint-positioner {
      position: absolute;
      bottom: var(--edge);
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
    .scroll-hint {
      display: flex; flex-direction: column;
      align-items: center; gap: 6px;
      opacity: 0;
      transition: opacity .5s ease;
    }
    .scroll-hint span {
      font-size: 0.87rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
    .scroll-hint svg { animation: bounce .9s ease-in-out infinite; }
    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(5px); }
    }

    /* ─── ENTRANCE KEYFRAMES ─────────────────────────── */
    @keyframes fade-in-down  { from { opacity:0; transform: translateY(-16px); } to { opacity:1; transform: translateY(0); } }
    @keyframes fade-in-up    { from { opacity:0; transform: translateY(16px);  } to { opacity:1; transform: translateY(0); } }
    @keyframes fade-in-right { from { opacity:0; transform: translateX(-16px); } to { opacity:1; transform: translateX(0); } }
    @keyframes fade-in-left  { from { opacity:0; transform: translateX(16px);  } to { opacity:1; transform: translateX(0); } }
    @keyframes side-nav-in   { from { opacity:0; transform: translateY(-50%) translateX(16px); } to { opacity:1; transform: translateY(-50%) translateX(0); } }

    /* ─── SITE HEADER ────────────────────────────────── */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; width: 100%;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 0 40px;
      height: 60px;
      display: flex; align-items: center;
      justify-content: space-between;
      z-index: var(--z-header);
      box-shadow: 0 2px 6px rgba(0,0,0,.04);
      opacity: 0; pointer-events: none;
      transition: opacity .5s ease;
    }
    .site-header.visible { opacity: 1; pointer-events: auto; }

    .site-logo {
      display: flex;
      align-items: center;
    }
    .site-logo img {
      height: 28px;
      width: auto;
      display: block;
    }

    .site-nav { display: flex; gap: 48px; }
    .site-nav a {
      font-size: 0.93rem; font-weight: 500;
      position: relative; padding: 4px 0;
    }
    .site-nav a::after {
      content: '';
      position: absolute; bottom: 0; left: 0;
      width: 0; height: 1.5px;
      background: var(--ink);
      transition: width var(--t);
    }
    .site-nav a:hover::after { width: 100%; }

    .site-right {
      display: flex; align-items: center; gap: 10px;
    }
    .header-cta-btn {
      display: inline-flex; align-items: center;
      font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 6px 16px; border-radius: 20px;
      border: 1.5px solid rgba(0,0,0,0.18);
      color: var(--ink); text-decoration: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .header-cta-btn:hover {
      background: var(--ink); color: #fff; border-color: var(--ink);
    }

    /* FIX 8  - Mobile nav toggle (hidden on desktop) */
    .mobile-nav-toggle {
      display: none;
      width: 44px; height: 44px;
      align-items: center; justify-content: center;
      border-radius: 4px;
      color: var(--ink);
      transition: background var(--t);
    }
    .mobile-nav-toggle:hover { background: var(--surface); }
    /* Animated notification bell ·used after email signup success */
    .bell-anim svg {
      transform-origin: 20px 6px;
      animation: bell-ring 0.7s cubic-bezier(.32,.72,0,1) 0.1s 1;
      color: #000;
    }
    .bell-anim .bell-dot {
      transform-origin: 28px 10px;
      animation: bell-dot-pop 0.45s cubic-bezier(.32,.72,0,1) 0.5s 1 backwards;
    }
    @keyframes bell-ring {
      0%   { transform: rotate(0); }
      20%  { transform: rotate(11deg); }
      40%  { transform: rotate(-9deg); }
      60%  { transform: rotate(6deg); }
      80%  { transform: rotate(-4deg); }
      100% { transform: rotate(0); }
    }
    @keyframes bell-dot-pop {
      0%   { transform: scale(0); opacity: 0; }
      60%  { transform: scale(1.3); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Animated hamburger to X morph */
    .hamburger-svg line {
      transform-origin: 12px 12px;
      transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .2s ease, y .35s cubic-bezier(.32,.72,0,1);
    }
    .mobile-nav-toggle[aria-expanded="true"] .hb-top { transform: translateY(5px) rotate(45deg); }
    .mobile-nav-toggle[aria-expanded="true"] .hb-mid { opacity: 0; transform: scaleX(0); }
    .mobile-nav-toggle[aria-expanded="true"] .hb-bot { transform: translateY(-5px) rotate(-45deg); }

    /* Mobile nav panel */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 60px; left: 0; right: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 16px 20px 24px;
      z-index: var(--z-mobile-nav);
      flex-direction: column; gap: 4px;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      transform: translateY(-8px);
      opacity: 0;
      transition: opacity .25s ease, transform .25s ease;
      pointer-events: none;
    }
    .mobile-nav.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .mobile-nav a {
      padding: 14px 8px;
      font-size: 1rem; font-weight: 500;
      border-bottom: 1px solid var(--border);
      display: block;
    }
    .mobile-nav a:last-child { border-bottom: none; }

    /* ─── TICKER ─────────────────────────────────────── */
    .ticker {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 13px 40px;
      margin-top: 0;
      display: flex; align-items: center; gap: 20px;
      overflow: hidden;
    }
    .ticker-tag {
      font-size: 0.87rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      white-space: nowrap; flex-shrink: 0;
      padding: 3px 9px;
      border: 1px solid var(--ink);
      border-radius: 2px;
    }
    .ticker-track {
      flex: 1; overflow: hidden; position: relative;
    }
    .ticker-track::before,
    .ticker-track::after {
      content: '';
      position: absolute; top: 0; bottom: 0;
      width: 40px; z-index: 1;
    }
    .ticker-track::before { left: 0;  background: linear-gradient(to right, var(--surface), transparent); }
    .ticker-track::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent); }
    .ticker-text {
      display: inline-block;
      font-size: 0.93rem;
      color: var(--muted);
      white-space: nowrap;
      animation: ticker-scroll 60s linear infinite;
      will-change: transform;
    }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── ANATOMY WIRE TICKER (whitehouse.gov/wire style) ── */
    .wire-ticker {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      background: #f7f5f0;
      border-top: 1px solid rgba(0,0,0,.08);
      border-bottom: 1px solid rgba(0,0,0,.08);
      padding: 0;
      min-height: 300px;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-bottom: 0;
      position: relative;
    }
    /* Live Feed badge removed ·text alone carries the section */
    .wire-ticker-badge { display: none; }
    .wire-ticker-divider { display: none; }
    .wire-ticker-track {
      flex: 1;
      overflow: hidden;
      position: relative;
      padding: 0 40px;
    }
    .wire-ticker-track::before,
    .wire-ticker-track::after {
      content: '';
      position: absolute; top: 0; bottom: 0;
      width: 80px; z-index: 1;
      pointer-events: none;
    }
    .wire-ticker-track::before { left: 0; background: linear-gradient(to right, #f7f5f0, transparent); }
    .wire-ticker-track::after  { right: 0; background: linear-gradient(to left,  #f7f5f0, transparent); }
    .wire-ticker-text {
      display: inline-block;
      font-family: 'Instrument Serif', serif;
      font-size: clamp(4rem, 9vw, 7.5rem);
      font-weight: 500;
      font-style: italic;
      letter-spacing: -0.01em;
      text-transform: none;
      color: #0e0e10;
      white-space: nowrap;
      animation: wire-scroll 140s linear infinite;
      will-change: transform;
      padding-left: 24px;
      line-height: 1;
    }
    .wire-ticker:hover .wire-ticker-text { animation-play-state: paused; }
    .wire-ticker:hover { cursor: default; }
    /* Wire links: red accent, no underline by default */
    .wire-ticker-text a {
      color: #c8261c;
      text-decoration: none;
      border-bottom: 1px solid rgba(200,38,28,.35);
      padding-bottom: 2px;
      transition: color .2s ease, border-color .2s ease;
    }
    .wire-ticker-text a:hover {
      color: #8a1a13;
      border-bottom-color: rgba(138,26,19,.85);
    }
    .wire-ticker-text .wt-sep {
      color: rgba(14,14,16,.22);
      margin: 0 28px;
      font-style: normal;
      font-size: 0.55em;
      vertical-align: middle;
    }
    @keyframes wire-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @media (max-width: 768px) {
      .wire-ticker { min-height: 200px; }
      .wire-ticker-text { font-size: clamp(2.6rem, 11vw, 4.2rem); }
    }

    /* ─── CONTENT ────────────────────────────────────── */
    /* FIX 6  - using <main> instead of <div> */
    .content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 96px 40px 40px;
    }
    .section { margin-bottom: 150px; }
    .section-heading {
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 20px;
    }
    .section-lead {
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 680px;
      line-height: 1.8;
      margin-bottom: 40px;
    }

    /* ─── CARDS ──────────────────────────────────────── */

    /* Editorial 3-col grid:
       col 1-2 = featured card (tall), col 3 = two stacked smalls
       last card spans full width as horizontal feature */
    .editorial {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: start;
    }
    .editorial .card:nth-child(1) {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    .editorial .card:nth-child(1) .card-thumb { height: 360px; }
    .editorial .card:nth-child(2) .card-thumb,
    .editorial .card:nth-child(3) .card-thumb { height: 164px; }
    .card-wide {
      grid-column: 1 / 4 !important;
      grid-row: auto !important;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }
    .card-wide .card-thumb {
      width: 42%; flex-shrink: 0;
      min-height: 280px;
      align-self: stretch;
    }
    .card-wide .card-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 2.5rem 3rem;
    }
    @media (max-width: 900px) {
      .editorial { grid-template-columns: 1fr 1fr; }
      .editorial .card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
      .editorial .card:nth-child(1) .card-thumb { height: 260px; }
      .editorial .card:nth-child(2) .card-thumb,
      .editorial .card:nth-child(3) .card-thumb { height: 180px; }
      .card-wide { grid-column: 1 / 3 !important; }
    }
    @media (max-width: 600px) {
      .editorial { grid-template-columns: 1fr; }
      .editorial .card:nth-child(1) { grid-column: 1; }
      .editorial .card:nth-child(1) .card-thumb { height: 220px; }
      .card-wide { flex-direction: column; grid-column: 1 !important; }
      .card-wide .card-thumb { width: 100%; height: 220px !important; }
      .card-wide .card-body { padding: 1.5rem; }
    }

    /* FIX  - cursor pointer on card */
    .card {
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow var(--t), transform var(--t), border-color var(--t);
    }
    .card:hover {
      box-shadow: 0 16px 40px rgba(0,0,0,.1);
      transform: translateY(-3px);
      border-color: #bbb;
    }
    .card-wide:hover { transform: none; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
    .card-thumb { overflow: hidden; background: #e8e8e8; position: relative; }
    .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .card:hover .card-thumb img { transform: scale(1.04); }

    /* Image-cycle: hover/touch reveals additional images of the same category */
    .img-cycle { position: relative; }
    .img-cycle .cyc-alt {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .6s ease;
      pointer-events: none;
      z-index: 1;
    }
    .img-cycle .cyc-alt.cyc-show { opacity: 1; }
    .card:hover .img-cycle .cyc-alt.cyc-show { transform: scale(1.04); }
    /* Tiny dot indicators in bottom-right of cycling thumbs */
    .img-cycle::after {
      content: '';
      position: absolute; right: 10px; bottom: 10px;
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,.7);
      box-shadow: 0 0 0 1px rgba(0,0,0,.3), 10px 0 0 rgba(255,255,255,.4), 20px 0 0 rgba(255,255,255,.4);
      z-index: 2; pointer-events: none;
      opacity: .7;
      transition: opacity .3s ease;
    }
    .img-cycle:hover::after { opacity: 1; }
    .card-body { padding: 26px 24px 22px; min-height: 96px; }
    /* Safety: card never touches the next one ·fallback margin if grid gap fails */
    .editorial > .card + .card,
    .evo-grid > .card + .card { margin-top: 0; }
    /* FIX 7  - eyebrow min 13px */
    .card-eyebrow {
      font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--light);
      margin-bottom: 10px;
    }
    .card h3 {
      font-size: 1.65rem; font-weight: 400;
      letter-spacing: -0.01em;
      margin-bottom: 12px; line-height: 1.25;
    }
    .card p { font-size: 1rem; color: var(--muted); line-height: 1.75; margin-bottom: 20px; }
    .card-cta {
      font-size: 0.87rem; font-weight: 500;
      display: inline-flex; align-items: center; gap: 6px;
      border-bottom: 1px solid transparent;
      transition: border-color var(--t);
    }
    .card-cta:hover { border-bottom-color: var(--ink); }
    .card-cta svg { transition: transform var(--t); }
    .card-cta:hover svg { transform: translateX(3px); }

    /* ─── CLASSIFIED / SUSPENSE SYSTEM ─────────────────── */
    .card-redacted {
      display: block;
      font-family: 'DM Mono', 'Courier New', monospace;
      font-size: 0.78rem;
      letter-spacing: .05em;
      color: rgba(0,0,0,.18);
      user-select: none;
      pointer-events: none;
      margin: 6px 0 10px;
      line-height: 1.6;
    }
    .card-classified-tag {
      font-size: 0.6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(180,30,30,.7);
      font-family: 'DM Mono', 'Courier New', monospace;
      display: inline-block;
      margin-left: 4px;
    }
    .card-cta--unlock {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 2px;
      padding: 7px 12px;
      cursor: pointer;
      background: none;
      color: var(--ink);
      font-family: inherit;
      transition: background var(--t), border-color var(--t);
    }
    .card-cta--unlock:hover { background: var(--surface); border-color: var(--ink); }

    /* ─── FOOTER ─────────────────────────────────────── */
    footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 64px 40px 40px;
    }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px; margin-bottom: 48px;
    }
    .footer-brand .brand-name {
      font-family: 'Instrument Serif', serif;
      font-size: 1.2rem; font-style: italic;
      margin-bottom: 14px;
    }
    .footer-brand p { font-size: 0.93rem; color: var(--muted); line-height: 1.75; max-width: 280px; }
    .footer-col h5 {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.87rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 18px; color: var(--ink);
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 10px; }
    .footer-col a { font-size: 0.93rem; color: var(--muted); transition: color var(--t); }
    .footer-col a:hover { color: var(--ink); }
    /* Site stats strip (above footer-bottom) */
    .site-stats {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 56px;
      padding: 28px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
    .site-stat {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
    }
    .site-stat-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: 0.85;
      color: var(--muted);
    }
    .site-stat-num {
      font-family: 'Instrument Serif', serif;
      font-style: italic; font-weight: 500;
      font-size: clamp(1.3rem, 2.4vw, 1.8rem);
      color: var(--ink);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .site-stat-sub {
      font-size: 0.72rem;
      color: var(--light);
      font-variant-numeric: tabular-nums;
      margin-left: 2px;
    }
    @media (max-width: 600px) {
      .site-stats { gap: 28px; padding: 22px 0; }
      .site-stat-num { font-size: 1.2rem; }
      .site-stat-icon { width: 18px; height: 18px; }
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 32px;
      display: flex; justify-content: space-between; align-items: center;
      /* FIX 7  - min 13px */
      font-size: 0.87rem; color: var(--light);
    }
    .social-row { display: flex; gap: 24px; }
    .social-row a { color: var(--muted); transition: color var(--t); }
    .social-row a:hover { color: var(--ink); }

    /* ─── RESPONSIVE ─────────────────────────────────── */
    /* Nav collapse breakpoint: at <1150px the desktop nav is too cramped,
       move all primary nav items into the hamburger menu */
    @media (max-width: 1150px) {
      .site-nav { display: none; }
      .site-right .header-cta-btn { display: none; }
      .mobile-nav-toggle { display: flex; }
      .mobile-nav { display: flex; }
    }
    @media (max-width: 768px) {
      .site-header { padding: 0 20px; }
      .content { padding: 60px 20px 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
      .hero-info, .scroll-text-positioner, .hero-shader-badge { display: none; }
      .hero-controls { gap: 8px; }
      /* Mobile: hero controls span full width, skip+audio left / scroll+ui+play right */
      .hero-bottom-right { left: var(--edge); }
      .hero-controls { width: 100%; }
      .scroll-hint-ctrl { order: 0; margin-left: auto; }
      #scrollHintCenter { display: none; }
      /* Mobile layout breathing room */
      .section { margin-bottom: 80px; }
      .section-lead { max-width: 100%; font-size: 0.95rem; margin-bottom: 40px; }
      .side-nav { display: none; }
      .ticker { padding: 10px 20px; }
      footer { padding: 48px 20px 32px; }
      .shop-grid { gap: 24px; }
      .game-section-fw { padding: 60px 24px; }
      .pricing-section { padding: 60px 0; }
      .pricing-card { padding: 36px 24px; min-height: unset; }
      #booklet-cta { padding: 48px 24px !important; }
      .booklet-cta h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
      .content-header { margin-bottom: 40px; }
      .hero-controls { flex-wrap: wrap; }
      .hero-btn { min-width: 44px; min-height: 44px; padding: 10px; }
      .mobile-nav { padding: 16px 0; }
      .mobile-nav a { padding: 14px 20px; font-size: 1rem; }
      /* Full-bleed section spacing on mobile */
      .language-section { margin-bottom: 0; }
      .singularity-section { margin-bottom: 0; }
      .fashion-section { margin-top: 48px; margin-bottom: 48px; }
      .cinematic-vr + .section { margin-top: 60px; }
      .pixel-trail-section + .section { margin-top: 40px; }
      .wave-path-section { display: none; }
    }

    @media (max-width: 480px) {
      .content { padding: 80px 16px 20px; }
      .section { margin-bottom: 60px; }
      .section-heading { font-size: clamp(1.75rem, 7vw, 2.5rem); }
      .section-lead { font-size: 0.9rem; margin-bottom: 28px; }
      .card-body { padding: 16px 16px 14px; }
      .card h3 { font-size: 1.25rem; }
      .editorial .card:nth-child(1) .card-thumb { height: 180px; }
      .shop-grid { grid-template-columns: 1fr; gap: 20px; }
      .shop-cta-banner { flex-direction: column; align-items: flex-start; padding: 20px 16px; gap: 16px; }
      .shop-cta-left { flex-wrap: wrap; }
      .game-section-fw { padding: 48px 16px; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
      footer { padding: 40px 16px 24px; }
      .footer-inner { padding: 40px 16px 24px; }
      .neural-visual { min-height: 280px; }
      .neural-content { padding: 28px 16px; }
      .language-content { margin: 12px; padding: 28px 20px; }
      .language-stats { flex-direction: column; gap: 20px; align-items: center; }
      .language-stat { text-align: center; }
      #booklet-cta { padding: 40px 16px !important; }
      .singularity-inner { padding: 60px 20px; }
      .singularity-stats { gap: 24px; }
      .singularity-stat { min-width: 100px; }
      .content .wave-path-section { margin-left: -16px; width: calc(100% + 32px); }
      .fashion-section { margin-top: 32px; margin-bottom: 32px; }
    }

    /* ── WAVE PATH DIVIDER ──────────────────────────── */
    .wave-path-section {
      width: 100%; min-height: 80vh; position: relative;
      overflow: hidden; cursor: auto;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-bottom: 0;
    }
    /* Full-bleed breakout ·true 100vw from inside max-width container */
    .content .wave-path-section {
      width: 100vw;
      margin-left: calc(50% - 50vw);
    }
    .wave-path-svg { width: 100%; height: 100%; position: absolute; inset: 0; }
    /* Static TRANSMISSION text ·centered, not connected to mouse animation */
    .wave-path-static-text {
      position: absolute; left: 0; right: 0; top: 38%;
      transform: translateY(-50%);
      text-align: center;
      font-family: 'Instrument Serif', serif;
      font-style: italic; font-weight: 400;
      font-size: clamp(2.6rem, 9vw, 8rem);
      letter-spacing: 0.04em;
      color: rgba(15,15,25,0.18);
      pointer-events: none;
      white-space: nowrap;
      line-height: 1;
      z-index: 0;
    }

    /* ── PIXEL TRAIL SECTION ── */
    .pixel-trail-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 0;
    }
    .pixel-trail-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      opacity: 0.35;
    }
    .pixel-trail-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 60%, rgba(0,4,20,.5) 0%, rgba(0,2,12,.92) 100%);
      z-index: 1;
    }
    .pixel-trail-grid {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
    .pixel-trail-text {
      position: relative;
      z-index: 10;
      text-align: center;
      max-width: 680px;
      padding: 60px 32px;
      pointer-events: none;
    }
    .pixel-trail-eyebrow {
      font-size: 0.65rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(0,229,255,.6);
      margin-bottom: 28px;
      font-family: 'DM Mono', 'Courier New', monospace;
    }
    .pixel-trail-heading {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 300;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 32px;
      letter-spacing: -.01em;
    }
    .pixel-trail-heading em {
      font-style: italic;
      color: rgba(0,229,255,.9);
    }
    .pixel-trail-sub {
      font-size: 0.8rem;
      color: rgba(255,255,255,.35);
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    @media (max-width: 768px) {
      .pixel-trail-heading { font-size: clamp(1.6rem, 7vw, 2.4rem); }
      .pixel-trail-text { padding: 60px 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* sections after full-viewport cinematic blocks need breathing room */
    .cinematic-vr + .section { margin-top: 120px; }
    .section { margin-top: 60px; }
    /* Pixel-trail is a full-bleed section ·Evolution follows with proper breathing room above the heading */
    .pixel-trail-section + .section { margin-top: 96px; }

    /* ─── CINEMA MODE ────────────────────────────────── */
    body.cinema-mode .site-header,
    body.cinema-mode .ticker,
    body.cinema-mode .content,
    body.cinema-mode footer { display: none; }
    body.cinema-mode .hero { height: 100vh !important; }

    /* ─── CARD IMAGES ───────────────────────────────── */
    .card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .card-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f5f5f5; }

    /* ─── VIDEO PROGRESS BAR ─────────────────────────── */
    .video-progress-wrap {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 3px; background: rgba(255,255,255,.12); z-index: 12;
    }
    .video-progress-fill {
      height: 100%; width: 0;
      background: linear-gradient(to right, rgba(255,255,255,.5), #fff);
      transition: width .1s linear;
    }

    /* ─── AUDIO BUTTON PULSE (when muted = audio available) ─── */
    @keyframes audio-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
      70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    }
    .ctrl#audioBtn.has-audio { animation: audio-pulse 2s ease-out infinite; }

    /* ─── SCROLL HINT ENHANCED ───────────────────────── */
    .scroll-hint span { color: rgba(255,255,255,.65) !important; font-size: 0.78rem !important; letter-spacing: .2em !important; }
    .scroll-hint-track {
      width: 24px; height: 40px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 12px;
      position: relative; display: flex; justify-content: center; padding-top: 6px;
    }
    .scroll-hint-dot {
      width: 4px; height: 8px; background: rgba(255,255,255,.7); border-radius: 2px;
      animation: scroll-wheel 1.4s ease-in-out infinite;
    }
    @keyframes scroll-wheel {
      0%   { transform: translateY(0); opacity: 1; }
      80%  { transform: translateY(14px); opacity: 0; }
      100% { transform: translateY(0); opacity: 0; }
    }

    /* ─── EVOLUTION SECTION GRID ─────────────────── */
    /* 2×2 staggered layout: tall-short / short-tall ·breaks repetition */
    .evo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }
    .evo-grid .card:nth-child(1) .card-thumb { height: 380px; }
    .evo-grid .card:nth-child(2) .card-thumb { height: 220px; }
    .evo-grid .card:nth-child(3) .card-thumb { height: 220px; }
    .evo-grid .card:nth-child(4) .card-thumb { height: 380px; }
    @media (max-width: 768px) {
      .evo-grid { grid-template-columns: 1fr; }
      .evo-grid .card .card-thumb { height: 220px !important; }
    }

    /* ─── ANT COMPANION SECTION (Zephyrian's best friend, cosmic-link theory) ─── */
    .ant-section {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 140px 24px;
      background: #0e0d0a;
      color: rgba(255,255,255,.85);
      position: relative;
      overflow: hidden;
    }
    .ant-section::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 50% 35%, rgba(220,160,80,.06), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(180,90,40,.04), transparent 70%);
      pointer-events: none;
    }
    .ant-inner {
      position: relative; z-index: 2;
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center;
    }
    .ant-image-wrap {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: 12px;
      overflow: hidden;
      background: #07060a;
    }
    .ant-image-wrap img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .ant-section:hover .ant-image-wrap img { transform: scale(1.02); }
    .ant-image-wrap::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(14,13,10,.5) 0%, transparent 50%);
      pointer-events: none;
    }
    .ant-content { padding: 0; }
    .ant-eyebrow {
      font-size: .68rem; font-weight: 700;
      letter-spacing: .32em; text-transform: uppercase;
      color: rgba(220,160,80,.85);
      margin-bottom: 22px;
      display: inline-block;
    }
    .ant-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-style: italic; font-weight: 500;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 28px;
      max-width: 14ch;
    }
    .ant-title em { color: rgba(220,160,80,.95); font-style: italic; }
    .ant-body p {
      font-size: 1rem;
      color: rgba(255,255,255,.62);
      line-height: 1.85;
      margin-bottom: 16px;
    }
    .ant-body p strong { color: rgba(220,160,80,.95); font-weight: 500; }
    .ant-stats {
      display: flex; flex-wrap: wrap;
      gap: 28px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .ant-stat {
      display: flex; flex-direction: column; gap: 4px;
    }
    .ant-stat-num {
      font-family: 'Instrument Serif', serif;
      font-size: 1.8rem;
      font-style: italic;
      color: rgba(220,160,80,.95);
      line-height: 1;
    }
    .ant-stat-label {
      font-size: .58rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      font-weight: 700;
    }
    @media (max-width: 768px) {
      .ant-section { padding: 96px 20px; }
      .ant-inner { grid-template-columns: 1fr; gap: 40px; }
      .ant-image-wrap { aspect-ratio: 4/3; }
    }

    /* ─── OTHER SPECIES ·heavily redacted reveal ──────────────── */
    .other-species {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: 0; margin-bottom: 0;
      padding: 140px 24px;
      background:
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(180,40,30,.06), transparent 60%),
        #07060a;
      position: relative;
      overflow: hidden;
      color: rgba(255,255,255,.85);
    }
    .other-species::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,.014) 3px, rgba(255,255,255,.014) 4px);
      pointer-events: none;
    }
    .other-species-inner {
      position: relative; z-index: 2;
      max-width: 1100px; margin: 0 auto;
    }
    .other-species-eyebrow {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .38em;
      text-transform: uppercase;
      color: rgba(220,55,55,.78);
      margin-bottom: 24px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .other-species-eyebrow::before {
      content: '◉';
      font-size: .6em;
      color: rgba(220,55,55,1);
      animation: os-rec 1.6s ease-in-out infinite;
    }
    @keyframes os-rec {
      0%, 100% { opacity: 1; }
      50%      { opacity: .35; }
    }
    .other-species-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.6rem, 6vw, 4.6rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 32px;
      max-width: 12ch;
    }
    .other-species-title em { color: rgba(220,55,55,.85); font-style: italic; }
    .other-species-lead {
      font-size: 1.05rem;
      line-height: 1.85;
      color: rgba(255,255,255,.55);
      max-width: 660px;
      margin-bottom: 80px;
    }
    .other-species-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .os-card {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: #0a0a14;
      cursor: default;
      border: 1px solid rgba(255,255,255,.05);
    }
    .os-card-img-wrap {
      position: absolute; inset: 0;
      filter: blur(18px) brightness(0.45) saturate(0.5);
      transition: filter .9s cubic-bezier(0.23, 1, 0.32, 1), transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .os-card-img-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .os-card:hover .os-card-img-wrap {
      filter: blur(0) brightness(0.95) saturate(1);
      transform: scale(1.03);
    }
    .os-card-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(7,6,10,.92) 0%, rgba(7,6,10,.4) 50%, rgba(7,6,10,.55) 100%);
      pointer-events: none; z-index: 2;
    }
    .os-card-stamp {
      position: absolute; top: 16px; left: 16px; z-index: 3;
      font-size: .56rem; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase;
      color: rgba(220,55,55,.9);
      border: 1px solid rgba(220,55,55,.35);
      padding: 4px 9px;
      background: rgba(220,55,55,.08);
      backdrop-filter: blur(4px);
    }
    .os-card-meta {
      position: absolute; left: 22px; right: 22px; bottom: 22px;
      z-index: 3;
    }
    .os-card-class {
      font-size: .58rem; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase;
      color: rgba(255,255,255,.4);
      margin-bottom: 8px;
    }
    .os-card-name {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      font-style: italic;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 12px;
    }
    .os-card-redact {
      display: block;
      height: 6px;
      background: rgba(220,55,55,.18);
      border-radius: 1px;
      margin-bottom: 4px;
    }
    .os-card-redact:nth-child(2) { width: 80%; }
    .os-card-redact:nth-child(3) { width: 55%; }
    .os-card-hint {
      font-size: .68rem;
      color: rgba(255,255,255,.4);
      margin-top: 14px;
      letter-spacing: .04em;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .35s cubic-bezier(0.23, 1, 0.32, 1), transform .35s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .os-card:hover .os-card-hint {
      opacity: 1;
      transform: translateY(0);
    }
    .other-species-footer {
      margin-top: 80px;
      display: flex; align-items: center; gap: 18px;
      font-size: .72rem; letter-spacing: .14em;
      color: rgba(255,255,255,.32);
      text-transform: uppercase;
      flex-wrap: wrap;
    }
    .other-species-footer .os-divider { width: 28px; height: 1px; background: rgba(255,255,255,.18); }
    @media (max-width: 768px) {
      .other-species { padding: 96px 20px; }
      .other-species-grid { grid-template-columns: 1fr; }
      .other-species-lead { margin-bottom: 48px; }
      .other-species-footer { margin-top: 48px; }
    }

    /* ─── FASHION SECTION ──────────────────────────── */
    .fashion-section {
      display: grid;
      grid-template-columns: 65fr 35fr;
      min-height: min(88vh, 940px);
      border-radius: 12px;
      overflow: hidden;
      background: #05050e;
      margin-top: 80px;
      margin-bottom: 80px;
    }
    .fashion-left {
      position: relative;
      overflow: hidden;
    }
    .fashion-video-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; opacity: 0.9;
    }
    .fashion-image-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to right, transparent 75%, rgba(5,5,14,0.55) 100%);
      z-index: 1;
    }
    .fashion-right {
      position: relative; z-index: 2;
      padding: 64px 48px;
      display: flex; flex-direction: column; justify-content: center;
      color: #fff;
    }
    .fashion-eyebrow {
      font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
      color: rgba(255,255,255,.4); margin-bottom: 24px;
    }
    .fashion-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.1; color: #fff;
      margin-bottom: 24px;
    }
    .fashion-body {
      font-size: .95rem; color: rgba(255,255,255,.55);
      line-height: 1.8; margin-bottom: 36px;
    }
    .fashion-detail-row {
      display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 40px;
    }
    .fashion-detail {
      border-left: 1.5px solid rgba(255,255,255,.15); padding-left: 14px;
    }
    .fashion-detail-label {
      font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.3); display: block; margin-bottom: 4px;
    }
    .fashion-detail-val {
      font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.85);
    }
    .fashion-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: #000;
      font-size: .75rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; padding: 13px 28px;
      border-radius: 2px; border: none; cursor: pointer;
      transition: background .2s, color .2s;
    }
    .fashion-cta:hover { background: rgba(255,255,255,.85); }
    .fashion-portrait {
      position: absolute; bottom: 0; right: -20px;
      height: 90%; width: auto;
      object-fit: contain; opacity: .15; z-index: 0;
      pointer-events: none;
    }
    @media (max-width: 768px) {
      .fashion-section { grid-template-columns: 1fr; }
      .fashion-left { min-height: 320px; }
      .fashion-right { padding: 40px 24px; }
      .fashion-portrait { display: none; }
    }

    /* ─── SHOP SECTION ──────────────────────────────── */
    /* Shop: tighter spacing between lead and grid */
    #shop .section-lead { margin-bottom: 32px; }
    .shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 40px;
    }
    .shop-card { cursor: default; }
    .shop-card .card-thumb {
      aspect-ratio: 1/1; overflow: hidden;
      border-radius: 6px; background: #fff;
      position: relative;
    }
    .shop-card .card-thumb img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      transition: transform .6s cubic-bezier(.4,0,.2,1);
      display: block;
    }
    .shop-card:hover .card-thumb img { transform: scale(1.05); }
    .shop-card-badge {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      background: var(--ink); color: #fff;
      font-size: 0.65rem; font-weight: 700; letter-spacing: .15em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 2px;
    }
    .shop-card-badge.sold-out { background: #aaa; }
    .shop-card-badge.limited-special {
      background: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
      color: #fff;
      font-size: 0.56rem;
      letter-spacing: 0.2em;
    }

    /* Size selector */
    .size-select {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
    }
    .size-btn {
      width: 38px; height: 38px; border-radius: 4px;
      border: 1.5px solid var(--border);
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.75rem; font-weight: 600; letter-spacing: .03em;
      color: var(--muted); background: none; cursor: pointer;
      transition: border-color .18s, background .18s, color .18s;
      display: flex; align-items: center; justify-content: center;
    }
    .size-btn:hover { border-color: #aaa; color: var(--ink); }
    .size-btn.active { border-color: var(--ink); background: var(--ink); color: #fff; }

    .price-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border);
    }
    .price { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
    .price-note { font-size: 0.78rem; color: var(--light); margin-top: 2px; }

    .btn-order {
      display: inline-flex; align-items: center; gap: 8px;
      color: #fff;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.8rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; padding: 11px 20px;
      border-radius: 4px; border: 1.5px solid var(--ink); cursor: pointer;
      background: linear-gradient(to right, #fff 50%, var(--ink) 50%);
      background-size: 200% 100%;
      background-position: 100% 0;
      transition: background-position .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1);
    }
    .btn-order:hover { background-position: 0% 0; color: var(--ink); }
    .btn-order:active { opacity: .85; }
    .btn-buy {
      display: inline-block; background: var(--ink); color: var(--bg);
      font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; padding: .6rem 1.3rem;
      border-radius: 2px; transition: background var(--t), transform var(--t);
    }
    .btn-buy:hover { background: #333; transform: translateY(-1px); }

    /* ─── EMAIL GATE MODAL ───────────────────────────── */
    #emailGate {
      display: none; position: fixed; inset: 0; z-index: 800;
      background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
      align-items: center; justify-content: center; padding: 2rem;
    }
    #emailGate.open { display: flex; }
    .eg-box {
      background: #fff; border-radius: 6px; padding: 3rem;
      max-width: 480px; width: 100%; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,.3);
    }
    .eg-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: background var(--t); color: #888; }
    .eg-close:hover { background: var(--surface); }
    .eg-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .25em; color: var(--light);
      text-transform: uppercase; margin-bottom: 1rem; }
    .eg-title { font-family: 'Instrument Serif', serif; font-size: 1.9rem; line-height: 1.15;
      margin-bottom: .75rem; }
    .eg-sub { font-size: .93rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.8rem; }
    .eg-form { display: flex; flex-direction: column; gap: .75rem; }
    .eg-input {
      width: 100%; padding: .85rem 1rem; border: 1px solid var(--border);
      border-radius: 3px; font-family: inherit; font-size: .93rem;
      transition: border-color var(--t);
    }
    .eg-input:focus { outline: none; border-color: var(--ink); }
    .eg-submit {
      background: var(--ink); color: var(--bg); padding: .9rem;
      border-radius: 3px; font-size: .87rem; font-weight: 700; letter-spacing: .15em;
      text-transform: uppercase; cursor: pointer; border: none; font-family: inherit;
      transition: background var(--t);
    }
    .eg-submit:hover { background: #333; }
    .eg-submit:disabled { opacity: .45; cursor: not-allowed; }
    .eg-fine { font-size: .72rem; color: var(--light); text-align: center; margin-top: .5rem; }
    /* GDPR consent checkbox · shared by both popups */
    .gdpr-consent {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: .76rem; color: var(--muted); line-height: 1.5;
      margin-top: 6px; cursor: pointer; user-select: none;
    }
    .gdpr-consent input[type="checkbox"] {
      flex-shrink: 0; margin-top: 2px;
      width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink);
    }
    .gdpr-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
    .gdpr-consent a:hover { color: var(--muted); }
    .gdpr-error { color: #c63; font-size: .72rem; margin-top: 6px; display: none; }
    .gdpr-error.show { display: block; }
    /* Honeypot anti-spam · visually hidden, bots fill it in, humans don't */
    .hp-field {
      position: absolute; left: -9999px; top: -9999px;
      height: 1px; width: 1px; opacity: 0;
      overflow: hidden; pointer-events: none; tab-index: -1;
    }

    /* ── CLASSIFIED BRIEFINGS  - ProjectShowcase ──────── */
    .briefings-header {
      font-size: .68rem; font-weight: 700; letter-spacing: .32em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 2.2rem;
    }
    .briefings-container { position: relative; }
    .report-item {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 1.5rem; padding: 1.35rem 0; border-top: 1px solid var(--border);
      cursor: pointer; text-decoration: none; color: inherit;
      position: relative;
    }
    .report-item-bg {
      position: absolute; inset: 0 -1rem;
      background: var(--surface); border-radius: 4px;
      opacity: 0; scale: .97;
      transition: opacity .22s ease, scale .22s ease;
      pointer-events: none;
    }
    .report-item:hover .report-item-bg { opacity: 1; scale: 1; }
    .report-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
    .report-title-row { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
    .report-title {
      font-size: 1.12rem; font-weight: 500; color: var(--ink);
      letter-spacing: -.01em; position: relative;
    }
    .report-title::after {
      content: ''; position: absolute; left: 0; bottom: -1px;
      height: 1px; width: 0; background: var(--ink);
      transition: width .3s ease;
    }
    .report-item:hover .report-title::after,
    .report-item.chapter-active .report-title::after { width: 100%; }
    .report-item.chapter-active .report-title { font-weight: 600; }
    .report-arrow {
      width: 15px; height: 15px; flex-shrink: 0; color: var(--muted);
      opacity: 0; transform: translate(-5px, 5px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .report-item:hover .report-arrow { opacity: 1; transform: translate(0,0); }
    .report-desc {
      font-size: .88rem; color: var(--muted); line-height: 1.65;
      transition: color .22s ease;
    }
    .report-item:hover .report-desc { color: rgba(0,0,0,.6); }
    .report-year {
      font-size: .72rem; font-family: 'Instrument Sans', sans-serif;
      font-weight: 400; color: var(--muted); white-space: nowrap;
      padding-top: .25rem; position: relative; z-index: 1;
    }
    .report-year.live { color: #c0392b; font-weight: 600; letter-spacing: .08em; }
    .reports-end-border { border-top: 1px solid var(--border); }
    /* Floating image preview */
    .report-preview {
      position: fixed; z-index: 9999; pointer-events: none;
      width: 380px; height: 252px; top: 0; left: 0;
      border-radius: 8px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
      opacity: 0; scale: .88;
      transition: opacity .28s cubic-bezier(.4,0,.2,1), scale .28s cubic-bezier(.4,0,.2,1);
      will-change: transform;
    }
    .report-preview.visible { opacity: 1; scale: 1; }
    .report-preview img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: 0; scale: 1.08;
      filter: blur(8px);
      transition: opacity .42s ease, scale .42s ease, filter .42s ease;
    }
    .report-preview img.rp-active { opacity: 1; scale: 1; filter: none; }
    .report-preview-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.18), transparent);
      pointer-events: none;
    }

    /* ─── MODE SELECTION POPUP ──────────────────────── */
    .mode-popup {
      position: fixed; inset: 0; z-index: 8950;
      background: rgba(0,0,0,0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: flex; align-items: center; justify-content: center;
      animation: fade-in .5s ease 3.3s both;
    }
    .mode-popup.dismissed {
      opacity: 0; pointer-events: none; visibility: hidden;
      transition: opacity .55s ease .1s, visibility .55s ease .1s;
    }
    .mode-popup-inner {
      text-align: center; color: #fff;
      max-width: 560px; width: 90%; padding: 64px 40px;
      transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
    }
    .mode-popup.dismissed .mode-popup-inner {
      transform: scale(.9) translateY(32px);
      opacity: 0;
    }
    .mode-popup-logo {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2rem, 6vw, 3rem);
      font-style: italic;
      letter-spacing: 0.14em;
      margin-bottom: 6px;
    }
    .mode-popup-sub {
      font-size: 0.7rem; letter-spacing: 0.28em;
      color: rgba(255,255,255,.4); text-transform: uppercase;
      margin-bottom: 44px;
    }
    .mode-popup-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 400;
      color: #fff;
      margin-bottom: 40px;
    }
    .mode-choices {
      display: flex; gap: 14px;
    }
    /* Mobile: stack vertically so each choice is wider */
    @media (max-width: 600px) {
      .mode-choices { flex-direction: column; gap: 12px; }
      .mode-choice { padding: 22px 18px; }
    }
    .mode-choice {
      flex: 1; padding: 28px 18px;
      border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 10px; color: #fff;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      cursor: pointer;
      transition: background .25s, border-color .25s, transform .28s cubic-bezier(.4,0,.2,1);
      will-change: transform;
    }
    .mode-choice:hover {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.65);
      transform: translateY(-4px);
    }
    .mode-choice-icon {
      width: 52px; height: 52px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      transition: border-color .25s, box-shadow .25s;
    }
    .mode-choice:hover .mode-choice-icon {
      border-color: rgba(255,255,255,.75);
      box-shadow: 0 0 18px rgba(255,255,255,.18);
    }
    .mode-choice strong {
      display: block; font-size: 1.1rem; font-weight: 600;
      letter-spacing: 0.02em; margin-bottom: 6px;
    }
    .mode-choice span {
      font-size: 0.88rem; color: rgba(255,255,255,.75); line-height: 1.6;
    }
    .mode-info-note {
      margin-top: 28px;
      font-size: 0.82rem; color: rgba(255,255,255,.5);
      line-height: 1.65; text-align: center; max-width: 360px; margin-inline: auto;
    }
    .mode-info-note strong { color: rgba(255,255,255,.65); font-weight: 600; }

    /* ─── NEWSLETTER POPUP (White House style) ───────── */
    .nl-popup {
      position: fixed; bottom: 0; left: 0;
      width: 300px;
      background: #fff;
      z-index: 7500;
      border-radius: 4px 4px 0 0;
      box-shadow: 0 -8px 48px rgba(0,0,0,.28), 2px 0 24px rgba(0,0,0,.12);
      overflow: hidden;
      transform: translateX(-110%);
      transition: transform .55s cubic-bezier(.25,0,.2,1);
    }
    .nl-popup.phase1 { transform: translateX(0); }
    .nl-body {
      padding: 28px 24px 0;
      position: relative; z-index: 1;
    }
    .nl-close {
      position: absolute; top: 14px; right: 14px;
      width: 28px; height: 28px; border-radius: 50%;
      border: none; background: #f0f0f0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: #666;
      transition: background .2s;
    }
    .nl-close:hover { background: #e0e0e0; }
    .nl-logo {
      font-family: 'Instrument Serif', serif;
      font-size: 1.4rem; font-style: italic;
      letter-spacing: 0.1em; color: #000;
      text-align: center; margin-bottom: 4px;
    }
    .nl-label {
      font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: #999; text-align: center; margin-bottom: 18px;
    }
    .nl-heading {
      font-family: 'Instrument Serif', serif;
      font-size: 1.35rem; font-weight: 400;
      line-height: 1.25; text-align: center;
      color: #000; margin-bottom: 10px;
    }
    .nl-sub {
      font-size: 0.8rem; color: #666; line-height: 1.6;
      text-align: center; margin-bottom: 18px;
    }
    .nl-input {
      width: 100%; padding: 10px 14px;
      border: 1.5px solid #ddd; border-radius: 50px;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.85rem; color: #000;
      outline: none; margin-bottom: 10px;
      transition: border-color .2s;
    }
    .nl-input:focus { border-color: #000; }
    .nl-submit {
      width: 100%; padding: 12px;
      background: #000; color: #fff;
      border: none; border-radius: 50px;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.8rem; font-weight: 700; letter-spacing: .15em;
      text-transform: uppercase; cursor: pointer;
      transition: background .2s;
    }
    .nl-submit:hover { background: #222; }
    .nl-image-wrap {
      height: 180px; overflow: hidden;
      transform: translateY(100%);
      transition: transform .5s cubic-bezier(.25,0,.2,1) .35s;
    }
    .nl-popup.phase2 .nl-image-wrap { transform: translateY(0); }
    .nl-image-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: center top; display: block;
    }

    /* ─── CTRL ENTRANCE ANIMATION ────────────────────── */
    @keyframes ctrl-entrance {
      0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
      42%  { transform: scale(1.22); box-shadow: 0 0 22px 5px rgba(255,255,255,.28); }
      72%  { transform: scale(0.95); box-shadow: 0 0 8px 2px rgba(255,255,255,.1); }
      100% { transform: scale(1); box-shadow: none; }
    }
    /* Bottom-right controls entrance */
    #audioBtn  { animation: ctrl-entrance     .7s cubic-bezier(.4,0,.4,1) 4.0s both; }
    #hideUiBtn { animation: ctrl-entrance     .7s cubic-bezier(.4,0,.4,1) 4.45s both; }
    #playBtn   { animation: ctrl-entrance-red .7s cubic-bezier(.4,0,.4,1) 4.9s both; }
    /* Nav dots staggered entrance */
    .side-nav .nav-dot:nth-child(1) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.1s both; }
    .side-nav .nav-dot:nth-child(2) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.25s both; }
    .side-nav .nav-dot:nth-child(3) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.4s both; }
    .side-nav .nav-dot:nth-child(4) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.55s both; }
    .side-nav .nav-dot:nth-child(5) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.7s both; }
    .side-nav .nav-dot:nth-child(6) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 4.85s both; }
    .side-nav .nav-dot:nth-child(7)  { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 5.0s both; }
    .side-nav .nav-dot:nth-child(8)  { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 5.1s both; }
    .side-nav .nav-dot:nth-child(9)  { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 5.2s both; }
    .side-nav .nav-dot:nth-child(10) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 5.3s both; }
    .side-nav .nav-dot:nth-child(11) { animation: ctrl-entrance .6s cubic-bezier(.4,0,.4,1) 5.4s both; }
    /* Saucer button entrance pulse */
    .saucer-btn { animation: fade-in-down .6s ease 3.2s both, ctrl-entrance .7s cubic-bezier(.4,0,.4,1) 3.9s both; }

    /* ─── SKIP INTRO ·ctrl-style button ────────────── */
    .skip-ctrl {
      height: 44px; width: auto; padding: 0 13px;
      border-radius: 6px; border: 1.5px solid rgba(255,255,255,.4);
      background: transparent; color: rgba(255,255,255,.65);
      font-family: 'Instrument Sans', sans-serif;
      font-size: .6rem; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 5px;
      cursor: pointer; flex-shrink: 0;
      transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
    }
    .skip-ctrl:hover {
      background-color: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.8);
      color: #fff; transform: translateY(-2px);
    }

    /* ─── PROMINENT SKIP-VIDEO PROMPT (appears when user scrolls through video frames) ─── */
    /* Anchored to bottom-center, same vertical line as the hero-controls icons */
    .skip-video-prompt {
      position: fixed;
      bottom: var(--edge);
      left: 50%;
      transform: translateX(-50%) translateY(8px) scale(0.95);
      z-index: 50;
      height: 44px;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 0 22px;
      background: rgba(0,229,255,0.95);
      color: #000;
      border-radius: 999px;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.74rem; font-weight: 800;
      letter-spacing: 0.22em; text-transform: uppercase;
      box-shadow: 0 18px 40px -8px rgba(0,229,255,.55), 0 0 0 4px rgba(0,229,255,.18);
      cursor: pointer;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s var(--ease-out, cubic-bezier(.23,1,.32,1)),
                  transform .35s var(--ease-out, cubic-bezier(.23,1,.32,1));
    }
    .skip-video-prompt.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
      pointer-events: auto;
      animation: skip-pulse 2s ease-in-out infinite;
    }
    .skip-video-prompt:hover {
      background: #fff;
      box-shadow: 0 20px 50px -8px rgba(0,229,255,.7), 0 0 0 4px rgba(255,255,255,.3);
    }
    .skip-video-prompt svg { width: 14px; height: 14px; flex-shrink: 0; }
    @keyframes skip-pulse {
      0%, 100% { box-shadow: 0 18px 40px -8px rgba(0,229,255,.55), 0 0 0 4px rgba(0,229,255,.18); }
      50%      { box-shadow: 0 22px 50px -8px rgba(0,229,255,.75), 0 0 0 12px rgba(0,229,255,0); }
    }
    @media (max-width: 600px) {
      .skip-ctrl { display: none; }
      .skip-video-prompt {
        height: 40px;
        font-size: 0.66rem; padding: 0 18px; letter-spacing: 0.18em;
        gap: 8px;
      }
      .skip-video-prompt.is-visible {
        background: #00e5ff;
        color: #000;
        border-color: #00e5ff;
        box-shadow: 0 18px 40px -8px rgba(0,229,255,.85), 0 0 0 4px rgba(0,229,255,.3);
      }
    }

    /* ─── CINEMATIC FULL-VIEWPORT VIDEO SECTIONS ─────── */
    .cinematic-vr {
      width: 100vw;
      height: 100vh;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      /* Fallback: dark bg + poster image so the section never shows
         a white flash when video/poster is still loading */
      background: #05050a;
      background-size: cover;
      background-position: center;
    }
    #cvrSection1 { background-image: url('/images/Anatomy (back).webp'); }
    #cvrSection2 { background-image: url('/images/Hand-black-whole.webp'); }
    /* Ensure the wire ticker is flush against the cinematic-vr below */
    .wire-ticker + .cinematic-vr { margin-top: 0; }
    .cinematic-vr video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    .cinematic-vr-overlay {
      position: relative; z-index: 2;
      text-align: center; color: #fff;
      padding: 40px 20px; max-width: 720px;
    }
    .cinematic-vr-eyebrow {
      font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
      color: rgba(0,229,255,.85); margin-bottom: 20px;
      font-weight: 600;
      /* Typewriter setup: hidden by default, animate when in view */
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      border-right: 2px solid rgba(0,229,255,.85);
    }
    .cinematic-vr-eyebrow.tw-play {
      animation:
        tw-type 1.6s steps(40, end) 0.3s forwards,
        tw-cursor 0.7s step-end 0.3s 4 forwards;
      width: 0;
    }
    @keyframes tw-type {
      from { width: 0; }
      to   { width: 100%; }
    }
    @keyframes tw-cursor {
      from, to { border-right-color: transparent; }
      50%      { border-right-color: rgba(0,229,255,.85); }
    }
    .cinematic-vr-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.8rem, 7vw, 5.5rem);
      font-weight: 400; font-style: italic;
      line-height: 1.05; color: #fff;
      text-shadow: 0 2px 40px rgba(0,0,0,.6);
    }
    .cinematic-vr-sub {
      margin-top: 20px;
      font-size: .93rem; color: rgba(255,255,255,.55);
      line-height: 1.7; max-width: 500px; margin-inline: auto;
    }
    .cinematic-vr-dim {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.55) 100%);
    }
    /* ─── CINEMATIC-VR variant: editorial dossier (cvr--levitate) ─── */
    .cvr--levitate {
      align-items: stretch;
      justify-content: stretch;
      /* Match the video's natural aspect · never crop it.
         Falls back to viewport height on very tall portrait screens. */
      height: auto;
      min-height: 80vh;
      aspect-ratio: 16 / 9;
      background: #1a1a1a;
    }
    /* On the levitate variant, show the whole video frame (no crop) */
    .cvr--levitate video {
      object-fit: contain;
      object-position: center center;
      background: #1a1a1a;
    }
    .cvr--levitate .cinematic-vr-dim {
      background: linear-gradient(110deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.55) 100%);
    }
    @media (max-width: 768px) {
      .cvr--levitate {
        aspect-ratio: 4 / 5;
        min-height: 70vh;
      }
      .cvr--levitate video {
        object-fit: cover;
      }
    }
    /* Top-left live tag */
    .cvr-tag {
      position: absolute; z-index: 3;
      top: 32px; left: 36px;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 14px;
      border: 1px solid rgba(232,196,128,.55);
      border-radius: 999px;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(232,196,128,0.95);
      background: rgba(0,0,0,.4);
      backdrop-filter: blur(6px);
    }
    .cvr-tag-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #e8c480;
      box-shadow: 0 0 8px rgba(232,196,128,.9);
      animation: cvr-tag-pulse 1.6s ease-in-out infinite;
    }
    @keyframes cvr-tag-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.4; transform: scale(0.7); }
    }
    /* Bottom-left editorial block */
    .cvr-block {
      position: absolute; z-index: 3;
      bottom: 56px; left: 36px;
      max-width: 540px;
      color: #f0e6d2;
      text-align: left;
      padding-left: 18px;
      border-left: 1px solid rgba(232,196,128,.4);
    }
    .cvr-block-meta {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(232,196,128,0.85);
      margin-bottom: 18px; font-weight: 600;
    }
    .cvr-block-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.1rem, 4.6vw, 3.6rem);
      font-style: normal; font-weight: 400;
      line-height: 1.05;
      color: #f4ead4;
      margin-bottom: 22px;
      text-shadow: 0 2px 30px rgba(0,0,0,.5);
    }
    .cvr-block-title em {
      font-style: italic;
      color: #e8c480;
    }
    .cvr-block-body {
      font-size: 0.92rem;
      color: rgba(240,230,210,0.7);
      line-height: 1.7;
      max-width: 460px;
      margin-bottom: 28px;
    }
    .cvr-block-stats {
      display: flex; gap: 32px;
      padding-top: 18px;
      border-top: 1px solid rgba(232,196,128,.18);
    }
    .cvr-stat { display: flex; flex-direction: column; gap: 4px; }
    .cvr-stat-num {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-size: clamp(1.4rem, 2.2vw, 1.8rem);
      color: #e8c480;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .cvr-stat-label {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(240,230,210,0.55);
      font-weight: 600;
    }
    /* Bottom-right footer hairline */
    .cvr-foot {
      position: absolute; z-index: 3;
      bottom: 36px; right: 36px;
      display: inline-flex; align-items: center; gap: 12px;
    }
    .cvr-foot-line {
      width: 32px; height: 1px;
      background: rgba(232,196,128,.5);
    }
    .cvr-foot-text {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(232,196,128,0.6); font-weight: 600;
    }
    @media (max-width: 768px) {
      .cvr-tag { top: 20px; left: 20px; font-size: 0.56rem; padding: 6px 11px; }
      .cvr-block {
        bottom: 40px; left: 20px; right: 20px;
        max-width: none;
        padding-left: 14px;
      }
      .cvr-block-title { font-size: clamp(1.7rem, 7.5vw, 2.6rem); }
      .cvr-block-body { font-size: 0.85rem; margin-bottom: 22px; }
      .cvr-block-stats { gap: 18px; }
      .cvr-stat-num { font-size: 1.2rem; }
      .cvr-stat-label { font-size: 0.54rem; letter-spacing: 0.18em; }
      .cvr-foot { display: none; }
    }
    /* Gooey particle layer (mouse-driven) */
    .cvr-particles {
      position: absolute; inset: 0; z-index: 1;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.9;
    }
    .cvr-particles svg { width: 100%; height: 100%; }
    /* Audio buttons on non-hero videos hidden per user request */
    .cinematic-vr-audio { display: none; }
    .cinematic-vr-audio--legacy {
      position: absolute; bottom: 24px; right: 24px; z-index: 3;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .cinematic-vr-audio:hover { background: rgba(255,255,255,.22); }

    /* ─── EASYTASK ATTRIBUTION ───────────────────────── */
    .easytask-link {
      color: inherit; font-size: 0.82rem;
      border-bottom: 1px solid rgba(0,0,0,.2);
      transition: border-color var(--t);
    }
    .easytask-link:hover { border-color: var(--ink); }

    /* ─── DISCLAIMER BADGE ───────────────────────────── */
    .disclaimer-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,.28); margin-top: 16px;
    }
    .footer-bottom .disclaimer-badge {
      font-size: 0.62rem; color: var(--muted);
      display: flex; align-items: center; gap: 6px;
      letter-spacing: 0.14em;
    }

    /* ─── NUTRITION CARD ─────────────────────────────── */
    .nutrition-section { margin-bottom: 120px; }
    .nutrition-hero {
      position: relative; width: 100%; height: clamp(360px, 50vw, 640px);
      border-radius: 12px; overflow: hidden; margin-bottom: 64px;
      background: #0a0a0f;
    }
    /* Field documentation video gallery */
    .nutrition-clips {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 56px;
    }
    .nutrition-clip {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: 10px;
      overflow: hidden;
      background: #0a0a14;
      cursor: pointer;
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    }
    .nutrition-clip:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
    .nutrition-clip video, .nutrition-clip img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 1.6s cubic-bezier(.16,1,.3,1);
    }
    .nutrition-clip:hover video, .nutrition-clip:hover img { transform: scale(1.06); }
    .nutrition-clip-grad {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
      pointer-events: none;
      z-index: 1;
    }
    .nutrition-clip-meta {
      position: absolute; left: 16px; right: 16px; bottom: 14px;
      color: #fff; z-index: 2;
    }
    .nutrition-clip-eyebrow {
      font-size: .58rem; font-weight: 700;
      letter-spacing: .26em; text-transform: uppercase;
      color: rgba(0,229,255,.85); margin-bottom: 6px;
    }
    .nutrition-clip-title {
      font-family: 'Instrument Serif', serif;
      font-size: 1.05rem; line-height: 1.2;
      font-style: italic;
    }
    .nutrition-clip-tag {
      position: absolute; top: 12px; right: 12px;
      background: rgba(0,0,0,.6);
      color: rgba(255,255,255,.85);
      font-size: .54rem; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 4px 9px; border-radius: 3px;
      backdrop-filter: blur(4px);
      z-index: 2;
    }
    @media (max-width: 768px) {
      .nutrition-clips { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
    }
    @media (max-width: 480px) {
      .nutrition-clips { grid-template-columns: 1fr; }
    }
    .nutrition-hero img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 1.4s cubic-bezier(.16,1,.3,1);
      filter: contrast(1.05) saturate(.85);
    }
    .nutrition-hero:hover img { transform: scale(1.04); }
    .nutrition-hero-grad {
      position: absolute; inset: 0;
      background: linear-gradient(120deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.55) 100%);
      pointer-events: none;
    }
    .nutrition-hero-caption {
      position: absolute; left: clamp(20px, 4vw, 40px); bottom: clamp(20px, 3vw, 32px);
      max-width: 460px; color: #fff; z-index: 2;
    }
    .nutrition-hero-eyebrow {
      font-size: .62rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
      color: rgba(255,255,255,.55); margin-bottom: 10px;
    }
    .nutrition-hero-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.6rem, 3.4vw, 2.4rem);
      font-style: italic; line-height: 1.1; color: #fff;
    }
    .nutrition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
    @media (max-width: 768px) {
      .nutrition-grid { grid-template-columns: 1fr; }
      .nutrition-hero { height: 240px; margin-bottom: 32px; }
    }
    .nutrition-card {
      background: #fff; border: 1px solid var(--border); border-radius: 8px;
      padding: 32px; box-shadow: 0 2px 12px rgba(0,0,0,.05);
      transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
    }
    .nutrition-card:hover {
      box-shadow: 0 12px 36px rgba(0,0,0,.09);
      transform: translateY(-2px);
      border-color: rgba(0,0,0,.15);
    }
    .nutrition-card-header {
      display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px;
    }
    .nutrition-card-label { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
    .nutrition-main-val { font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; font-family: 'Instrument Serif', serif; font-style: italic; }
    .nutrition-delta { font-size: .82rem; font-weight: 600; color: #16a34a; margin-top: 6px; letter-spacing: .02em; }
    .nutrition-bar-wrap { position: relative; height: 6px; background: var(--surface); border-radius: 3px; margin: 18px 0 6px; overflow: hidden; }
    .nutrition-bar-fill {
      position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px;
      background: linear-gradient(to right, #00e5ff, #5d8cff);
      width: 0;
      transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }
    .nutrition-bar-marker {
      position: absolute; top: -5px; width: 2px; height: 16px;
      background: var(--ink); border-radius: 1px;
    }
    .nutrition-bar-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 4px; }
    .nutrition-competitors { margin: 24px 0; }
    .nutrition-comp-title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .nutrition-comp-row {
      display: flex; align-items: center; gap: 12px; padding: 10px 8px;
      border-bottom: 1px solid var(--border);
      border-radius: 4px;
      transition: background .25s ease, padding-left .25s ease, transform .25s ease;
      cursor: default;
    }
    .nutrition-comp-row:last-child { border-bottom: none; }
    .nutrition-comp-row:hover {
      background: linear-gradient(to right, rgba(0,229,255,.06), transparent);
      padding-left: 14px;
    }
    .nutrition-comp-row:hover .nutrition-comp-icon { transform: rotate(8deg) scale(1.12); }
    .nutrition-comp-icon {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--surface);
      display: flex; align-items: center; justify-content: center;
      font-size: .92rem; flex-shrink: 0;
      transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    }
    .nutrition-comp-name { flex: 1; font-size: .92rem; color: var(--ink); }
    .nutrition-comp-val { font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
    .nutrition-levels { margin-top: 20px; }
    .nutrition-levels-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
    .nutrition-levels-bar span { display: block; }
    .nutrition-levels-labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--light); }
    .nutrition-info { font-size: .8rem; color: var(--muted); line-height: 1.7; }
    .nutrition-info strong { color: var(--ink); font-weight: 600; }

    /* ─── ALIEN LANGUAGE SECTION ────────────────────── */
    .language-section {
      width: 100vw;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
      min-height: 100vh;
      border-radius: 0;
      margin-bottom: 80px;
      display: flex;
      align-items: center;
      background: #050510;
    }
    .language-video-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.22; z-index: 0;
    }
    .language-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .language-content {
      position: relative;
      z-index: 2;
      padding: 56px 48px;
      max-width: 600px;
      margin: 40px;
      background: rgba(5,5,16,.65);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 6px;
    }
    .language-stats {
      display: flex;
      gap: 40px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
    .lang-stat { display: flex; flex-direction: column; gap: 5px; }
    .lang-stat-num {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 400;
      color: #fff;
      line-height: 1;
    }
    .lang-stat-label {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      font-weight: 600;
    }
    @media (max-width: 600px) {
      .language-content { margin: 20px; padding: 36px 28px; }
      .language-stats { gap: 28px; }
    }

    /* ─── A24 COVER SECTION ──────────────────────────── */
    .a24-section {
      margin-bottom: 0; position: relative; height: 100vh; overflow: hidden;
      width: 100vw; left: 50%; transform: translateX(-50%);
    }
    .a24-cover {
      position: relative; width: 100%; height: 100%;
      display: flex; align-items: flex-end; overflow: hidden;
      border-radius: 0;
    }
    .a24-bg {
      position: absolute; inset: 0;
      background-image: url('/images/Aliens-not-Gov-Mini-Series.webp');
      background-size: cover; background-position: center 20%;
    }
    .a24-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.15) 100%);
    }
    .a24-content {
      position: relative; z-index: 2;
      padding: 60px 60px 56px; width: 100%;
      display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
    }
    .a24-text { flex: 1; min-width: 260px; }
    .a24-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; }
    .a24-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.4rem, 6vw, 5rem);
      font-style: italic; font-weight: 400; line-height: 1.05;
      color: #fff; margin-bottom: 16px; letter-spacing: -.02em;
    }
    .a24-sub { font-size: .95rem; color: rgba(255,255,255,.5); max-width: 420px; line-height: 1.7; }
    .a24-cta-block { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
    .a24-cta-amount {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 400; font-style: italic;
      color: #fff; line-height: 1; letter-spacing: -.03em;
    }
    .a24-cta-amount sup { font-size: .45em; vertical-align: super; color: rgba(255,255,255,.6); }
    .a24-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: #000;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      padding: 14px 28px; border-radius: 2px; border: none; cursor: pointer;
      transition: background .2s, transform .2s;
      text-decoration: none;
    }
    .a24-btn:hover { background: #e8e8e8; transform: translateY(-2px); }
    .a24-btn-label { font-size: .65rem; color: rgba(255,255,255,.4); letter-spacing: .14em; text-transform: uppercase; }
    .a24-amount-ctrl { display: flex; align-items: center; gap: 14px; }
    .a24-amt-btn {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
      color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
      transition: background .2s, transform .15s;
      display: flex; align-items: center; justify-content: center;
    }
    .a24-amt-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.1); }
    .a24-cta-amount input[type="number"] {
      background: none; border: none; outline: none;
      font-family: 'Instrument Serif', serif;
      font-size: inherit; font-style: inherit;
      color: inherit; letter-spacing: inherit;
      width: 3.5ch; text-align: center;
      -moz-appearance: textfield;
      caret-color: rgba(255,255,255,.6);
    }
    .a24-cta-amount input[type="number"]::-webkit-inner-spin-button,
    .a24-cta-amount input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* ─── BOOKLET TITLE ANIMATION ────────────────────── */
    @keyframes booklet-color-loop {
      0%, 100% { color: var(--muted); }
      20%       { color: #c0392b; }
      40%       { color: #7c3aed; }
      60%       { color: #0369a1; }
      80%       { color: #065f46; }
    }
    .booklet-animated-title {
      font-style: italic;
      animation: booklet-color-loop 7s ease-in-out infinite;
    }

    /* ─── UNICORN PRELUDE ·full-bleed section above dossier ── */
    /* ─── ANTIGRAVITY PRELUDE ·Portal video bg + animated circuit SVG ─── */
    .ag-prelude {
      position: relative;
      width: 100vw;
      height: 100vh;
      margin-left: calc(50% - 50vw);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: #000;
    }
    .ag-prelude-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.6;
      z-index: 0;
    }
    .ag-prelude-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.7)),
        linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.65) 100%);
      pointer-events: none;
    }
    .ag-prelude-grid {
      position: absolute; inset: 0; z-index: 1;
      background-image:
        linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
      pointer-events: none;
    }
    .ag-prelude-inner {
      position: relative; z-index: 3;
      width: 100%; max-width: 1200px;
      padding: 0 32px;
      display: flex; flex-direction: column; align-items: center; gap: 32px;
    }
    .ag-prelude-eyebrow {
      font-family: 'Instrument Sans', sans-serif;
      font-size: .68rem;
      letter-spacing: .38em; text-transform: uppercase;
      color: rgba(0,229,255,.85);
      font-weight: 700;
    }
    .ag-prelude-svg-wrap {
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      filter: drop-shadow(0 0 24px rgba(0,229,255,.18));
      overflow: visible;
    }
    .ag-prelude-svg {
      width: 100%; height: auto;
      color: rgba(0,229,255,.55);
      overflow: visible;
    }
    /* Full-bleed circuit lines: extend off-screen on left and right */
    .ag-svg .ag-paths path { stroke: rgba(0,229,255,.4); stroke-width: 0.25; }

    /* ─── ALIEN-TERM tooltips: + icon next to invented jargon, opens dossier-style popup ─── */
    .alien-term {
      position: relative;
      cursor: pointer;
      border-bottom: 1px dotted rgba(0,229,255,.4);
      padding-bottom: 1px;
      transition: border-color .2s var(--ease-out), color .2s ease;
    }
    .alien-term:hover { border-bottom-color: rgba(0,229,255,.85); }
    .alien-term-info {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 14px; height: 14px;
      margin-left: 4px;
      border-radius: 50%;
      background: rgba(0,229,255,.12);
      color: rgba(0,229,255,.95);
      font-size: 0.62rem;
      font-weight: 700;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid rgba(0,229,255,.3);
      transition: background .2s var(--ease-out), transform .2s var(--ease-out);
      user-select: none;
    }
    .alien-term-info::before {
      content: '+';
      line-height: 1;
      transform: translateY(-1px);
    }
    .alien-term:hover .alien-term-info,
    .alien-term-info:hover {
      background: rgba(0,229,255,.25);
      transform: scale(1.15);
    }
    /* Tooltip overlay (positioned relative to .alien-term) */
    .alien-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(6px) scale(0.96);
      width: 280px; max-width: 90vw;
      padding: 18px 20px;
      background: rgba(8,12,28,.96);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0,229,255,.18);
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
      color: rgba(255,255,255,.85);
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.82rem;
      line-height: 1.6;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      font-style: normal;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
      z-index: 200;
    }
    .alien-tooltip[data-open="true"] {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
      pointer-events: auto;
    }
    .alien-tooltip-eyebrow {
      font-size: 0.56rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(0,229,255,.85);
      margin-bottom: 6px;
      font-weight: 700;
    }
    .alien-tooltip-title {
      font-family: 'Instrument Serif', serif;
      font-size: 1.05rem;
      font-style: italic;
      color: #fff;
      margin-bottom: 8px;
      line-height: 1.25;
    }
    .alien-tooltip-body {
      font-size: 0.78rem;
      color: rgba(255,255,255,.65);
      line-height: 1.65;
    }
    .alien-tooltip::before {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border-width: 8px 8px 0 8px;
      border-style: solid;
      border-color: rgba(8,12,28,.96) transparent transparent transparent;
    }
    @media (max-width: 480px) {
      .alien-tooltip { width: 240px; padding: 14px 16px; font-size: 0.78rem; }
    }

    /* HTML label overlay positioned over the SVG center node */
    .ag-prelude-svg-wrap { position: relative; }
    .ag-prelude-label {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Instrument Sans', sans-serif;
      font-size: clamp(0.92rem, 1.6vw, 1.35rem);
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(0,229,255,.95);
      padding: 14px 28px;
      background: linear-gradient(135deg, rgba(0,229,255,.06) 0%, rgba(0,229,255,.02) 100%);
      border-radius: 4px;
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 0 20px rgba(0,229,255,.6);
      animation: ag-label-pulse 3s var(--ease-in-out) infinite;
    }
    @keyframes ag-label-pulse {
      0%, 100% { opacity: 0.85; text-shadow: 0 0 20px rgba(0,229,255,.5); }
      50%      { opacity: 1;    text-shadow: 0 0 30px rgba(0,229,255,.85); }
    }
    .ag-prelude-tagline {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.2rem, 2.4vw, 1.85rem);
      font-style: italic; line-height: 1.3;
      color: rgba(255,255,255,.65);
      text-align: center;
      max-width: 720px;
    }
    .ag-prelude-tagline em { color: rgba(0,229,255,.95); font-style: italic; }
    .ag-prelude-meta {
      display: flex; gap: 28px;
      font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
      color: rgba(255,255,255,.35); font-weight: 600;
    }
    .ag-prelude-meta span::before { content: '●'; color: rgba(0,229,255,.5); margin-right: 6px; font-size: .6rem; }
    @media (max-width: 768px) {
      .ag-prelude-meta { flex-wrap: wrap; gap: 14px; justify-content: center; }
      .ag-prelude-inner { gap: 24px; padding: 0 20px; }
    }
    /* Game DotLoader pixel widget */
    .gi-dotloader {
      display: inline-flex; align-items: center; gap: 14px;
      padding: 10px 18px;
      background: rgba(0,229,255,.04);
      border: 1px solid rgba(0,229,255,.12);
      border-radius: 8px;
      color: rgba(255,255,255,.85);
      font-size: .68rem; font-weight: 600;
      letter-spacing: .2em; text-transform: uppercase;
      font-family: 'Instrument Sans', sans-serif;
    }
    /* Bare variant: dot grid only, no text/border (used next to Start button) */
    .gi-dotloader--bare {
      padding: 0;
      background: rgba(0,229,255,.06);
      border-color: rgba(0,229,255,.18);
      width: 56px; height: 56px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 12px;
      flex-shrink: 0;
    }
    .gi-dotgrid {
      display: grid;
      grid-template-columns: repeat(7, 6px);
      grid-template-rows: repeat(7, 6px);
      gap: 2px;
    }
    .gi-dotgrid > span {
      width: 6px; height: 6px;
      border-radius: 1.5px;
      background: rgba(0,229,255,.12);
      transition: background .15s ease;
    }
    .gi-dotgrid > span.active {
      background: #00e5ff;
      box-shadow: 0 0 4px rgba(0,229,255,.5);
    }

    /* Animated circuit paths inside the SVG */
    .ag-svg .ag-path-static {
      stroke: rgba(0,229,255,.35);
      stroke-width: 0.3;
      fill: none;
      stroke-dasharray: 100 100;
      stroke-dashoffset: 0;
      animation: ag-path-draw 1.4s ease-out forwards;
    }
    @keyframes ag-path-draw {
      from { stroke-dashoffset: 100; }
      to   { stroke-dashoffset: 0; }
    }
    .ag-spark {
      offset-rotate: 0deg;
      animation: ag-spark-travel 6s linear infinite;
    }
    .ag-spark-1 { offset-path: path('M -30 20 H 90 Q 95 20 95 25 V 55'); animation-duration: 5.5s; animation-delay: 0.4s; }
    .ag-spark-2 { offset-path: path('M 230 10 H 110 Q 105 10 105 15 V 45'); animation-duration: 6s; animation-delay: 1.0s; }
    .ag-spark-3 { offset-path: path('M 130 20 V 42 Q 130 47 125 47 H 110'); animation-duration: 4.5s; animation-delay: 0.2s; }
    .ag-spark-4 { offset-path: path('M 170 80 V 58 Q 170 53 165 53 H 115'); animation-duration: 5.5s; animation-delay: 0.7s; }
    .ag-spark-5 { offset-path: path('M -30 30 H 55 Q 60 30 60 35 V 42 Q 60 47 65 47 H 85'); animation-duration: 5s; animation-delay: 1.4s; }
    .ag-spark-6 { offset-path: path('M 95 -10 V 40'); animation-duration: 4.5s; animation-delay: 0.9s; }
    @keyframes ag-spark-travel {
      0%   { offset-distance: 0%;   opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }
    /* Animated text gradient on the central ANTIGRAVITY label */
    @keyframes ag-text-shimmer {
      0%   { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* ─── DOSSIER CTA ·CARD STACK ──────────────────── */
    .dossier-cta {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center;
      padding: 80px 60px;
      max-width: 1100px; margin: 0 auto 80px;
      background: var(--surface); border-radius: 8px;
    }
    .dossier-cards-wrap {
      position: relative; height: 360px;
      display: flex; align-items: center; justify-content: center;
    }
    .dossier-card-item {
      position: absolute; width: 220px; height: 300px;
      background: #0b0b16;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 5px; padding: 22px 18px;
      display: flex; flex-direction: column; gap: 10px;
      transition: transform .5s cubic-bezier(.34,1.4,.64,1), opacity .5s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
    }
    /* Manila folder layered behind ·warm aged paper tone */
    .dossier-card-item:nth-child(1) {
      transform: rotate(-5deg) translateX(-24px) translateY(12px);
      z-index: 1;
      background: linear-gradient(140deg, #d8c9a1 0%, #c4b48a 100%);
      border-color: rgba(110,80,30,.25);
      opacity: 0; transition-delay: .15s;
    }
    /* Mid: dark navy classified */
    .dossier-card-item:nth-child(2) {
      transform: rotate(3deg) translateX(18px) translateY(6px);
      z-index: 2;
      background: linear-gradient(140deg, #131826 0%, #0a0d18 100%);
      border-color: rgba(0,229,255,.12);
      opacity: 0; transition-delay: .07s;
    }
    /* Top: pure black classified ·front of stack */
    .dossier-card-item:nth-child(3) {
      transform: rotate(0deg);
      z-index: 3;
      background: linear-gradient(140deg, #050508 0%, #000 100%);
      border-color: rgba(220,55,55,.25);
      opacity: 0;
    }
    /* Manila folder uses dark text/redacts (light bg) */
    .dossier-card-item:nth-child(1) .dossier-card-stamp {
      color: rgba(155,28,28,.85);
      border-color: rgba(155,28,28,.5);
    }
    .dossier-card-item:nth-child(1) .dossier-card-title {
      color: rgba(40,30,15,.7);
    }
    .dossier-card-item:nth-child(1) .dossier-card-redact {
      background: rgba(40,30,15,.18);
    }
    .dossier-card-item:nth-child(1) .dossier-card-pg {
      color: rgba(40,30,15,.45);
    }
    .dossier-cards-wrap.visible .dossier-card-item { opacity: 1; }
    .dossier-cards-wrap:hover .dossier-card-item:nth-child(1) { transform: rotate(-10deg) translateX(-70px) translateY(6px); }
    .dossier-cards-wrap:hover .dossier-card-item:nth-child(2) { transform: rotate(5deg) translateX(60px) translateY(4px); }
    .dossier-cards-wrap:hover .dossier-card-item:nth-child(3) { transform: rotate(-1deg) translateY(-8px); }
    .dossier-card-stamp {
      font-size: .55rem; letter-spacing: .25em; text-transform: uppercase;
      color: rgba(220,55,55,.6); font-weight: 700;
      border: 1px solid rgba(220,55,55,.3); padding: 2px 7px;
      border-radius: 2px; align-self: flex-start;
    }
    .dossier-card-title {
      font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.55); font-weight: 600;
    }
    .dossier-card-redact {
      height: 8px; background: rgba(255,255,255,.08); border-radius: 2px;
      margin-top: 4px;
    }
    .dossier-card-redact.full { width: 100%; }
    .dossier-card-redact.half { width: 60%; }
    .dossier-card-redact.third { width: 35%; }
    .dossier-card-pg {
      margin-top: auto; font-size: .6rem; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(255,255,255,.2);
    }
    .dossier-content-col .section-eyebrow { margin-bottom: 16px; }
    .dossier-content-col h2 {
      font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 700; line-height: 1.15;
      margin-bottom: 16px;
    }
    .dossier-content-col p { font-size: 1rem; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
    .dossier-content-col .dossier-sub { font-size: .85rem; color: var(--light); margin-bottom: 32px; }
    .dossier-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .dossier-btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--ink); color: var(--bg);
      padding: 14px 28px; border-radius: 3px;
      font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      border: none; cursor: pointer; transition: background .2s;
    }
    .dossier-btn-primary:hover { background: #2a2a2a; }
    .dossier-btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1.5px solid var(--ink); color: var(--ink);
      padding: 14px 24px; border-radius: 3px;
      font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
      text-decoration: none; transition: border-color .2s, color .2s;
    }
    .dossier-btn-secondary:hover { border-color: rgba(0,229,255,.5); color: rgba(0,229,255,.8); }
    @media (max-width: 768px) {
      .dossier-cta { grid-template-columns: 1fr; padding: 48px 24px; gap: 40px; }
      .dossier-cards-wrap { height: 200px; }
      .dossier-card-item { width: 150px; height: 200px; }
    }

    /* Netflix hint tooltip */
    .netflix-hint { user-select: none; }
    .netflix-hint-tooltip {
      position: absolute; bottom: calc(100% + 8px); left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #111; color: rgba(255,255,255,.8);
      font-size: .65rem; letter-spacing: .03em; text-transform: none;
      white-space: normal; max-width: 220px; text-align: center;
      padding: 6px 12px; border-radius: 4px;
      pointer-events: none; opacity: 0;
      transition: opacity .2s, transform .2s;
    }
    .netflix-hint:hover .netflix-hint-tooltip {
      opacity: 1; transform: translateX(-50%) translateY(0);
    }

    /* ─── SCROLL PROGRESS BAR ────────────────────────── */
    .scroll-progress {
      position: fixed; top: 60px; left: 0; right: 0;
      height: 3px;
      background: rgba(0,0,0,.1);
      z-index: var(--z-header);
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
    }
    .scroll-progress.sp-visible { opacity: 1; pointer-events: auto; }
    .scroll-progress-fill {
      height: 100%;
      background: linear-gradient(to right, #00e5ff, #5d8cff 60%, #8a7cff);
      width: 0%;
      box-shadow: 0 0 8px rgba(0,229,255,.5);
    }
    .scroll-pin {
      position: absolute; top: -3px;
      width: 1px; height: 8px;
      background: rgba(0,0,0,.25);
      transform: translateX(-50%);
      cursor: pointer;
      pointer-events: auto;
    }
    .scroll-pin::after {
      content: attr(data-label);
      position: absolute; top: 12px; left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--ink); color: #fff;
      font-size: .55rem; letter-spacing: .08em;
      padding: 3px 8px; border-radius: 3px;
      white-space: nowrap;
      font-family: 'Instrument Sans', sans-serif;
      font-weight: 600;
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }
    .scroll-pin:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ─── SIGNAL INTERCEPT GAME FULL-WIDTH ───────────── */
    .game-section-fw {
      background: #050510;
      color: #fff;
      width: 100vw;
      min-height: 100vh;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 0;
      padding: 80px 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .game-section-fw::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 25% 60%, rgba(0,80,200,.07), transparent),
        radial-gradient(ellipse 60% 50% at 75% 40%, rgba(0,229,255,.05), transparent);
      pointer-events: none;
    }
    #gi-canvas {
      display: block;
      aspect-ratio: 1100 / 480;
      max-height: 70vh;
      background: #050510;
      touch-action: manipulation;
    }
    /* Game wrap: HUD frame + corner brackets + scanner sweep */
    .gi-wrap {
      position: relative; width: 100%; max-width: 1100px; margin: 0 auto;
      border-radius: 10px; overflow: hidden;
      box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 30px 80px -30px rgba(0,229,255,.18);
      background: #050510;
    }
    .gi-wrap::before, .gi-wrap::after {
      content: '';
      position: absolute; pointer-events: none; z-index: 5;
      width: 28px; height: 28px;
      border-color: rgba(0,229,255,.6);
      border-style: solid;
    }
    .gi-wrap::before {
      top: 12px; left: 12px;
      border-width: 1.5px 0 0 1.5px;
    }
    .gi-wrap::after {
      bottom: 12px; right: 12px;
      border-width: 0 1.5px 1.5px 0;
    }
    .gi-corner-tr, .gi-corner-bl {
      position: absolute; pointer-events: none; z-index: 5;
      width: 28px; height: 28px;
      border-color: rgba(0,229,255,.6);
      border-style: solid;
    }
    .gi-corner-tr { top: 12px; right: 12px; border-width: 1.5px 1.5px 0 0; }
    .gi-corner-bl { bottom: 12px; left: 12px; border-width: 0 0 1.5px 1.5px; }
    .gi-scanner {
      position: absolute; left: 0; right: 0; top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,229,255,.65), transparent);
      animation: gi-scan 4s linear infinite;
      pointer-events: none; z-index: 4;
      box-shadow: 0 0 8px rgba(0,229,255,.5);
    }
    @keyframes gi-scan {
      0%   { transform: translateY(0); opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { transform: translateY(calc(70vh)); opacity: 0; }
    }
    .gi-header-row {
      position: relative;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
      width: 100%; max-width: 1100px; margin: 0 auto 1.2rem;
      padding: 0 4px;
    }
    .gi-stat {
      text-align: center;
      padding: 8px 16px;
      border-radius: 6px;
      background: rgba(0,229,255,.04);
      border: 1px solid rgba(0,229,255,.1);
      min-width: 84px;
    }
    .gi-stat-label {
      font-size: .58rem; letter-spacing: .28em;
      color: rgba(0,229,255,.55); text-transform: uppercase;
      margin-bottom: .2rem; display: block;
      font-weight: 600;
    }
    .gi-stat-val {
      font-size: 1.7rem; font-weight: 400;
      color: #00e5ff;
      font-family: 'Instrument Serif', serif;
      font-style: italic; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .gi-start-btn {
      background: #00e5ff; color: #000; border: none;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .72rem; font-weight: 800;
      letter-spacing: .22em; text-transform: uppercase;
      padding: .95rem 2.4rem; border-radius: 3rem;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      box-shadow: 0 0 0 0 rgba(0,229,255,.5), 0 10px 30px -10px rgba(0,229,255,.6);
      position: relative;
      animation: gi-start-pulse 2.4s ease-in-out infinite;
    }
    .gi-start-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 4px rgba(0,229,255,.18), 0 16px 40px -10px rgba(0,229,255,.6);
    }
    @keyframes gi-start-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,.45), 0 10px 30px -10px rgba(0,229,255,.6); }
      50%      { box-shadow: 0 0 0 12px rgba(0,229,255,0), 0 10px 30px -10px rgba(0,229,255,.6); }
    }
    .gi-start-btn.gi-running { animation: none; }
    @media (max-width: 600px) {
      .gi-stat { padding: 6px 10px; min-width: 70px; }
      .gi-stat-val { font-size: 1.3rem; }
      .gi-stat-label { font-size: .52rem; letter-spacing: .22em; }
      .gi-start-btn { padding: .8rem 1.8rem; font-size: .65rem; letter-spacing: .18em; flex: 1; }
    }

    /* ─── DONATION POPUP ─────────────────────────────── */
    .donate-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.6);
      backdrop-filter: blur(6px); z-index: 8000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity .3s;
    }
    .donate-overlay.open { opacity: 1; pointer-events: auto; }
    .donate-box {
      background: #fff; border-radius: 8px; padding: 40px 36px;
      max-width: 400px; width: 90%; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,.3);
      transform: translateY(12px); transition: transform .3s;
    }
    .donate-overlay.open .donate-box { transform: translateY(0); }
    .donate-close {
      position: absolute; top: 16px; right: 16px;
      background: none; border: none; font-size: 1.2rem; cursor: pointer;
      color: var(--light); line-height: 1; padding: 4px 8px;
      transition: color .15s;
    }
    .donate-close:hover { color: var(--ink); }
    .donate-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--light); margin-bottom: 6px; }
    .donate-title { font-family: 'Instrument Serif', serif; font-size: 1.6rem; font-style: italic; margin-bottom: 28px; }
    .donate-amount-row { display: flex; align-items: center; gap: 0; margin-bottom: 10px; border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; }
    .donate-amount-btn {
      width: 48px; height: 56px; border: none; background: var(--surface);
      font-size: 1.4rem; font-weight: 300; cursor: pointer; color: var(--ink);
      transition: background .15s; flex-shrink: 0;
    }
    .donate-amount-btn:hover { background: #e8e8e8; }
    .donate-amount-input {
      flex: 1; border: none; text-align: center;
      font-family: 'Instrument Serif', serif; font-size: 2.4rem; font-style: italic;
      font-weight: 400; color: var(--ink); outline: none; min-width: 0;
      background: #fff;
    }
    .donate-amount-input::before { content: '€'; }
    .donate-currency { font-size: 1.2rem; color: var(--muted); padding-right: 12px; flex-shrink: 0; }
    .donate-presets { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
    .donate-preset {
      padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
      background: none; cursor: pointer; font-size: .82rem; color: var(--muted);
      transition: border-color .15s, color .15s, background .15s;
    }
    .donate-preset:hover, .donate-preset.active { border-color: var(--ink); color: var(--ink); background: var(--surface); }
    .donate-ok {
      width: 100%; padding: 16px; background: var(--ink); color: #fff;
      border: none; border-radius: 4px; font-family: 'Instrument Sans', sans-serif;
      font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      cursor: pointer; transition: background .2s; margin-bottom: 16px;
    }
    .donate-ok:hover { background: #222; }
    .donate-trust { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
    .donate-trust-item { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--light); }
    .donate-terms { text-align: center; font-size: .65rem; color: var(--light); }
    .donate-terms a { color: var(--light); text-decoration: underline; }

    .card {
      position: relative;
      background-color: #fff;
      background-image: radial-gradient(
        300px 300px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px),
        rgba(0,0,0,0.05) 0%, transparent 65%
      );
    }
    .card-thumb, .card-body, .shop-card-badge { position: relative; z-index: 1; }

    .ctrl {
      background-image: radial-gradient(
        70px 70px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px),
        rgba(255,255,255,0.18), transparent 70%
      );
      background-color: transparent;
    }
    .nav-dot {
      background-image: radial-gradient(
        55px 55px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px),
        rgba(255,255,255,0.12), transparent 70%
      );
      background-color: transparent;
    }

    /* ─── ENERGY SECTION (REDESIGN: tall narrow column + alien grid bg) ── */
    .energy-section {
      width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      max-width: none !important;
      padding: 140px 24px !important;
      border-radius: 0 !important;
      background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,100,.06), transparent 60%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,229,255,.03), transparent 70%),
        #050508 !important;
      position: relative;
      overflow: hidden;
    }
    /* Animated alien grid */
    .energy-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,200,100,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,200,100,.05) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 70% 100% at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 40%, black 30%, transparent 80%);
      animation: energy-grid-drift 24s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes energy-grid-drift {
      0%   { background-position: 0 0, 0 0; }
      100% { background-position: 64px 64px, 64px 64px; }
    }
    .energy-inner {
      position: relative; z-index: 2;
      max-width: 720px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 80px;
    }
    .energy-section .section-eyebrow {
      color: rgba(255,200,100,.65);
      font-size: .68rem; font-weight: 700;
      letter-spacing: .32em; text-transform: uppercase;
      display: block; margin-bottom: 18px;
    }
    .energy-section .section-heading {
      color: #fff;
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      line-height: 1.04;
      margin-bottom: 28px;
    }
    .energy-section .section-lead {
      color: rgba(255,255,255,.6);
      font-size: 1.05rem; line-height: 1.85;
      max-width: 100%;
      margin-bottom: 0;
    }
    /* Step-by-step process */
    .energy-steps {
      display: flex; flex-direction: column; gap: 56px;
      border-left: 1px solid rgba(255,200,100,.18);
      padding-left: 32px; position: relative;
    }
    .energy-step { position: relative; }
    .energy-step::before {
      content: ''; position: absolute;
      left: -42px; top: 6px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #050508;
      border: 1.5px solid rgba(255,200,100,.5);
      box-shadow: 0 0 0 4px #050508, 0 0 18px rgba(255,200,100,.2);
    }
    .energy-step-num {
      font-family: 'Instrument Serif', serif;
      font-size: 0.78rem; font-style: italic;
      color: rgba(255,200,100,.55);
      letter-spacing: .1em; margin-bottom: 10px;
      display: block;
    }
    .energy-step-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.4rem, 3vw, 1.85rem);
      color: #fff; line-height: 1.2;
      margin-bottom: 14px; font-weight: 400;
    }
    .energy-step-body {
      font-size: .95rem;
      color: rgba(255,255,255,.55);
      line-height: 1.8;
    }
    .energy-step-body strong { color: rgba(255,200,100,.9); font-weight: 500; }

    .energy-stats-row { display:flex; gap:40px; margin-bottom:0; flex-wrap:wrap; }
    .energy-stat-block {
      display:flex; flex-direction:column; gap:4px;
      border-left:2px solid rgba(255,200,100,.3); padding-left:20px;
    }
    .energy-big-num {
      font-family:'Instrument Serif',serif;
      font-size:clamp(2rem,5vw,3.5rem); font-style:italic;
      color:rgba(255,200,100,.95); line-height:1;
    }
    .energy-stat-label { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
    .energy-stat-sub { font-size:.78rem; color:rgba(255,255,255,.3); }

    .energy-chart-wrap {
      background-color: rgba(255,255,255,.03);
      background-image:
        radial-gradient(ellipse 70% 70% at 50% 50%, rgba(255,200,100,.05), transparent 70%),
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px),
        radial-gradient(300px 300px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px), rgba(255,255,255,.06), transparent 70%);
      background-size: auto, 20px 20px, 20px 20px, auto;
      border:1px solid rgba(255,255,255,.1); border-radius:8px;
      padding:28px 24px 16px; position:relative; overflow:hidden;
    }
    .energy-chart-header {
      display:flex; align-items:flex-start; justify-content:space-between;
      margin-bottom:24px; flex-wrap:wrap; gap:12px;
    }
    .energy-chart-title { font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.4); }
    .energy-toggle-group { display:flex; gap:2px; background:rgba(255,255,255,.07); border-radius:4px; padding:3px; }
    .etog {
      font-family:'Instrument Sans',sans-serif;
      font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      color:rgba(255,255,255,.35); padding:5px 14px; border-radius:3px;
      cursor:pointer; border:none; background:transparent;
      transition:background .2s, color .2s;
    }
    .etog--active { background:rgba(255,200,100,.18); color:rgba(255,200,100,.9); }
    .energy-bars {
      display:flex; gap:8px; align-items:flex-end; height:240px;
      margin-bottom:12px; position:relative;
    }
    @media (max-width: 600px) {
      .energy-bars { gap: 4px; height: 200px; }
      .energy-bar-val { font-size: .5rem !important; transform: rotate(-50deg); transform-origin: center bottom; padding-bottom: 16px; }
      .energy-xaxis { gap: 4px !important; }
      .energy-xaxis span { font-size: .5rem !important; transform: rotate(-30deg); transform-origin: top center; padding-top: 4px; }
      .energy-chart-wrap { padding: 24px 12px 28px !important; }
      .energy-toggle-row { flex-wrap: wrap; }
      .etog { font-size: .58rem !important; padding: 5px 10px !important; }
    }
    .energy-bars::after {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:1px; background:rgba(255,255,255,.15); pointer-events:none;
    }
    .energy-bar { flex:1; height:100%; position:relative; }
    .energy-bar-inner {
      position:absolute; bottom:0; left:0; right:0;
      height:var(--h, 10%);
      display:flex; flex-direction:column; justify-content:flex-start;
      transition:height .65s cubic-bezier(.4,0,.2,1);
    }
    .energy-bar-val {
      font-size:.58rem; font-weight:700; color:rgba(255,255,255,.45);
      text-align:center; padding-bottom:4px; white-space:nowrap; flex-shrink:0;
    }
    .energy-bar-fill {
      flex:1; border-radius:2px 2px 0 0;
      background:linear-gradient(to top, rgba(255,200,100,.85) 0%, rgba(255,255,255,.35) 100%);
      transition:background .5s ease;
    }
    .energy-bar--current .energy-bar-fill {
      background:linear-gradient(to top, rgba(255,200,100,1) 0%, rgba(255,255,255,.7) 100%);
      box-shadow:0 0 24px rgba(255,200,100,.25);
    }
    .energy-bar-marker {
      position:absolute; top:0; left:50%; transform:translateX(-50%);
      font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
      color:rgba(255,200,100,.7); white-space:nowrap; pointer-events:none;
    }
    #energyBars.bh-mode .energy-bar-fill {
      background:linear-gradient(to top, rgba(100,180,255,.85) 0%, rgba(200,230,255,.35) 100%);
    }
    #energyBars.bh-mode .energy-bar--current .energy-bar-fill {
      background:linear-gradient(to top, rgba(100,180,255,1) 0%, rgba(200,230,255,.7) 100%);
      box-shadow:0 0 24px rgba(100,180,255,.25);
    }
    .energy-xaxis { display:flex; gap:12px; margin-top:4px; }
    .energy-xaxis span { flex:1; text-align:center; font-size:.58rem; color:rgba(255,255,255,.3); letter-spacing:.06em; }
    .energy-xaxis--current { color:rgba(255,200,100,.6) !important; }

    .pricing-section { padding:0; margin-bottom:120px; margin-top:120px; }
    .pricing-split {
      display:grid; grid-template-columns:1.4fr 1fr;
      min-height:880px; border-radius:16px; overflow:hidden;
    }
    @media(max-width:768px) { .pricing-split { grid-template-columns:1fr; min-height:auto; } }
    .pricing-big {
      position:relative; overflow:hidden;
      background:#050510;
      display:flex; flex-direction:column; justify-content:flex-end; padding:64px;
      min-height:520px;
    }
    .pricing-big-video {
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position: center top; opacity:.62;
    }
    .pricing-big::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(5,5,16,.92) 0%, rgba(5,5,16,.25) 50%, rgba(5,5,16,.55) 100%);
      pointer-events: none;
    }
    .pricing-big-content { position:relative; z-index:2; }
    .pricing-section-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:rgba(0,229,255,.85); margin-bottom:1rem; display:block; }
    .pricing-section-lead {
      font-family:'Instrument Serif',serif; font-size:clamp(2rem,3.8vw,3.4rem);
      font-weight:500; margin-bottom:0; color:#fff; line-height:1.15; letter-spacing:-0.01em;
    }
    .pricing-small {
      position: relative;
      background: linear-gradient(160deg,#0a1628 0%,#0d2040 100%);
      display: flex; flex-direction: column;
      padding: 72px 56px; color: #fff;
      isolation: isolate;
      overflow: hidden;
    }
    /* Smooth bg gradient transition on hover: dark blue → dark+light blue blend */
    .pricing-small::before {
      content: '';
      position: absolute; inset: 0; z-index: 0;
      background: linear-gradient(160deg, #0a1628 0%, #1d4d8c 50%, #2e7cc7 100%);
      opacity: 0;
      transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1);
      pointer-events: none;
    }
    .pricing-small:hover::before { opacity: 1; }
    .pricing-small > * { position: relative; z-index: 1; }
    .pricing-card {
      width: 100%;
      background: transparent;
      position: relative;
      color: #fff; padding: 0;
      display: flex; flex-direction: column;
      flex: 1;
      min-height: 100%;
    }
    #pricingCard .pricing-card-inner {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      justify-content: space-between;
      gap: 32px;
      flex: 1;
      min-height: 100%;
    }
    /* Top group: eyebrow + heading + sub */
    #pricingCard .pricing-card-inner > .pricing-card-top { display: flex; flex-direction: column; gap: 18px; }
    /* Middle group: divider + price block */
    #pricingCard .pricing-card-inner > .pricing-card-mid { display: flex; flex-direction: column; gap: 16px; }
    /* Bottom group: button */
    #pricingCard .pricing-card-inner > .pricing-card-bot { display: flex; flex-direction: column; gap: 12px; }
    #pricingCard .pw { position: absolute; z-index: 1; width: 128px; }
    .pricing-eyebrow { font-size:.65rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom: 0; }
    .pricing-card-eyebrow { font-size:.65rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(0,229,255,.85); margin-bottom: 0; }
    .pricing-card-heading {
      font-family:'Instrument Serif',serif;
      font-size:clamp(2.3rem,5.6vw,3.6rem); font-weight:400; font-style:italic;
      line-height:1.05; color:#fff; margin-bottom: 0;
      letter-spacing: -0.01em;
    }
    .pricing-card-sub {
      font-size: 0.95rem; color: rgba(255,255,255,.62);
      line-height: 1.65; max-width: 380px;
    }
    .pricing-divider {
      height: 1px; width: 60px;
      background: rgba(255,255,255,.25);
      margin: 0;
    }
    .pricing-price-block { display:flex; align-items:baseline; gap:8px; margin-bottom:0; }
    .pricing-amount {
      font-family:'Instrument Serif',serif;
      font-size:clamp(2.6rem,6vw,4rem); font-weight:400; font-style:italic;
      color:rgba(255,255,255,.95); line-height:1;
    }
    .pricing-currency { font-size: 0.55em; color: rgba(255,255,255,.6); margin-right: 4px; vertical-align: top; }
    .pricing-suffix { font-size:1rem; color:rgba(255,255,255,.4); }
    .pricing-amount-note { font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.6; max-width:340px; margin-bottom: 0; }
    .pricing-desc { font-size:.88rem; color:rgba(255,255,255,.45); line-height:1.75; margin-bottom:2rem; max-width:300px; }
    .pricing-contact-btn {
      margin-top: 0;
      display:inline-flex; align-items:center; justify-content:center; gap: 8px;
      background:#fff; color:#000;
      font-family:'Instrument Sans',sans-serif;
      font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
      padding:16px 32px; border-radius:100px;
      transition:background .2s, transform .2s, box-shadow .3s;
      align-self:flex-start; cursor:pointer; border:none;
    }
    .pricing-contact-btn:hover {
      background:#fff; transform:translateY(-2px);
      box-shadow: 0 12px 30px -6px rgba(255,255,255,.3);
    }

    .pricing-card-waves { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
    .pw { position:absolute; top:-106px; left:5%; opacity:1; animation:waves-scroll 6s linear infinite; }
    @keyframes waves-scroll {
      0%   { transform:translateY(-170px); }
      100% { transform:translateY(0); }
    }

    /* ─── AMBIENT LOOP ANIMATIONS ────────────────────── */

    /* Hero: slow drifting light orb */
    .hero::after {
      content: '';
      position: absolute; inset: 0; pointer-events: none; z-index: 3;
      background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(100,180,255,.06), transparent 70%);
      animation: hero-orb 12s ease-in-out infinite;
    }
    @keyframes hero-orb {
      0%,100% { background-position: 30% 40%; transform: scale(1); }
      33%      { background-position: 70% 30%; transform: scale(1.08); }
      66%      { background-position: 45% 70%; transform: scale(0.96); }
    }

    /* Energy section: slow scanning line */
    .energy-section::after {
      content: '';
      position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,200,100,.3) 50%, transparent 100%);
      pointer-events: none; z-index: 0;
      animation: energy-scan 6s linear infinite;
      top: 0;
    }
    .energy-section { position: relative; overflow: hidden; }
    @keyframes energy-scan {
      0%   { top: 0; opacity: 0; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    /* A24 cover: slow Ken Burns zoom */
    .a24-bg {
      animation: ken-burns 20s ease-in-out infinite alternate;
    }
    @keyframes ken-burns {
      0%   { transform: scale(1)    translate(0, 0); }
      100% { transform: scale(1.06) translate(-1%, -1%); }
    }

    /* Cards: subtle float on hover (already have translateY, add loop to wide card) */
    @keyframes card-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-2px); }
    }
    .card-wide { animation: card-float 7s ease-in-out infinite; }
    .card-wide:hover { animation: none; transform: translateY(-3px); }
    /* Extra top gap for card-wide inside editorial grid (matches horizontal gap = 24px, prevents touching cards above) */
    /* Card-wide vertical gap from the cards above (matches the section breathing room) */
    .editorial .card-wide { margin-top: 64px !important; }
    @media (max-width: 600px) {
      .editorial .card-wide { margin-top: 32px !important; }
    }
    /* Single card-wide section (no grid siblings) */
    .editorial--single { display: block; }
    .editorial--single .card-wide { margin-top: 0 !important; }

    /* Nutrition bar fill: pulse after animate-in */
    @keyframes bar-pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: .7; }
    }
    .nutrition-bar-fill { animation: bar-pulse 3s ease-in-out infinite; }

    /* ─── HERO NAV OVERLAY ───────────────────────────── */
    .hero-nav-overlay {
      position: fixed; inset: 32px;
      z-index: 8900;
      background: rgba(2,2,8,.97);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      display: flex; align-items: stretch;
      opacity: 0; pointer-events: none;
      transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 30px 100px rgba(0,0,0,.6);
      overflow: hidden;
      transform: scale(0.97);
    }
    .hero-nav-overlay.open { opacity: 1; pointer-events: auto; transform: scale(1); }
    .hero-nav-links-panel {
      flex: 1; display: flex; flex-direction: column; justify-content: center;
      padding: 48px 64px;
      min-height: 0;
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .hero-nav-overlay { inset: 12px; border-radius: 12px; }
      .hero-nav-links-panel {
        padding: 28px 28px 24px;
        gap: 0;
      }
      /* Hide the preview panel on mobile · there's no hover, no need */
      .hero-nav-preview-panel { display: none; }
      /* Bigger, white nav items so they fill the vertical space nicely */
      .hero-nav-link {
        font-size: clamp(2rem, 7.5vw, 3rem);
        color: #fff;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
      }
      /* Logo + Instagram footer for the mobile menu */
      .hero-nav-mobile-header {
        display: flex; align-items: center; justify-content: flex-start;
        margin-bottom: 16px;
      }
      .hero-nav-mobile-header img { height: 32px; width: auto; display: block; }
      .hero-nav-mobile-instagram {
        display: inline-flex; align-items: center; gap: 10px;
        margin-top: 24px;
        color: #fff;
        text-decoration: none;
        font-family: 'Instrument Sans', sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 12px 0;
        border-top: 1px solid rgba(255,255,255,.08);
        align-self: flex-start;
        transition: opacity .2s ease;
      }
      .hero-nav-mobile-instagram svg { width: 18px; height: 18px; }
      .hero-nav-mobile-instagram:hover { opacity: 0.7; }
    }
    @media (max-width: 480px) {
      .hero-nav-overlay { inset: 8px; border-radius: 10px; }
      .hero-nav-links-panel { padding: 24px 22px 20px; }
      .hero-nav-link { font-size: clamp(1.7rem, 7vw, 2.4rem); padding: 6px 0; }
    }
    /* Hide the mobile-only header + Instagram on desktop */
    .hero-nav-mobile-header,
    .hero-nav-mobile-instagram { display: none; }
    .hero-nav-eyebrow {
      font-size: .65rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
      color: rgba(255,255,255,.25); margin-bottom: 32px;
    }
    .hero-nav-link {
      display: block; text-decoration: none;
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.4rem, 3.6vw, 2.6rem); font-style: italic; font-weight: 400;
      color: rgba(255,255,255,.22); line-height: 1.15;
      padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
      transition: color .2s ease, letter-spacing .2s ease;
      cursor: pointer;
    }
    .hero-nav-link:last-child { border-bottom: none; }
    .hero-nav-link:hover { color: #fff; letter-spacing: .02em; }
    .hero-nav-link:focus-visible { outline: 2px solid rgba(100,200,255,.7); outline-offset: 4px; border-radius: 2px; }
    .hero-nav-preview-panel {
      width: 50%; max-width: 720px; position: relative; overflow: hidden; flex-shrink: 0;
    }
    .hero-nav-preview-panel img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: 0;
      transition: opacity .35s ease;
    }
    .hero-nav-preview-panel img.hnp-active { opacity: 1; }
    .hero-nav-close {
      position: absolute; top: 24px; right: 28px; z-index: 2;
      background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
      width: 40px; height: 40px; color: rgba(255,255,255,.55); font-size: 1.1rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: border-color .2s, color .2s;
    }
    .hero-nav-close:hover { border-color: #fff; color: #fff; }
    .hero-nav-close:focus-visible { outline: 2px solid rgba(100,200,255,.7); outline-offset: 3px; }

    /* ─── HIDE UI BUTTON ─────────────────────────────── */
    .hide-ui-btn {
      width: 44px; height: 44px; border-radius: 6px;
      border: 1.5px solid rgba(255,255,255,.45);
      background: transparent; color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background var(--t), border-color var(--t), transform var(--t);
      animation: fade-in-up .6s ease 4.9s both;
    }
    .hide-ui-btn:hover {
      background-color: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.85);
      transform: translateY(-2px);
    }
    .hide-ui-btn:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; }
    /* Skip ctrl entrance */
    .skip-ctrl { animation: fade-in-up .6s ease 3.5s both; }

    /* Body with hidden UI ·hide controls but keep hide-ui-btn visible */
    body.ui-hidden .side-nav,
    body.ui-hidden .scroll-text-positioner,
    body.ui-hidden .scroll-hint-positioner,
    body.ui-hidden .saucer-btn,
    body.ui-hidden .menu-badge,
    body.ui-hidden .hero-shader-badge,
    body.ui-hidden .ticker,
    body.ui-hidden .engage-popup,
    body.ui-hidden .newsletter-popup { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
    body.ui-hidden .site-header { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
    /* Hide every hero control child except the hide-ui-btn itself */
    body.ui-hidden .hero-controls > *:not(#hideUiBtn) { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
    body.ui-hidden .hide-ui-btn { opacity: 1 !important; pointer-events: auto !important; }
    body.ui-hidden .hero-logo { opacity: 1 !important; }
    .hide-ui-btn .hui-eye-line { transition: transform .2s; }
    body.ui-hidden .hui-eye-line { display: none; }
    body.ui-hidden .hui-eye-slash { display: block; }
    .hui-eye-slash { display: none; }

    /* ─── SAUCER BUTTON: UFO ICON ────────────────────── */
    .saucer-btn span { display: none; }
    .saucer-btn-icon { pointer-events: none; }

    /* ─── MOBILE NAV: ALIEN THEME ────────────────────── */
    .mobile-nav {
      background: rgba(2,2,8,.97) !important;
      border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
    .mobile-nav a {
      color: rgba(255,255,255,.6) !important;
      border-color: rgba(255,255,255,.07) !important;
      font-family: 'Instrument Serif', sans-serif;
      font-style: italic; font-size: 1.1rem;
    }
    .mobile-nav a:hover { color: #fff !important; }

    /* ─── SKIP TO CONTENT LINK ───────────────────────── */
    .skip-link {
      position: absolute; top: -100px; left: 20px; z-index: 99999;
      background: var(--ink); color: var(--bg);
      padding: 10px 18px; font-size: .85rem; font-weight: 700;
      border-radius: 0 0 4px 4px;
      transition: top .2s;
      text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    /* ─── GLOBAL FOCUS STYLES ────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .hero :focus-visible,
    .hero-controls :focus-visible { outline-color: rgba(255,255,255,.8); }

    /* ─── FRAME SCRUB INDICATOR ──────────────────────── */
    .frame-indicator {
      position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,.72); color: #fff;
      font-family: 'Instrument Sans', monospace; font-size: .72rem;
      letter-spacing: .14em; padding: 6px 18px; border-radius: 20px;
      pointer-events: none; z-index: 20;
      opacity: 0; transition: opacity .5s;
      white-space: nowrap;
    }
    .frame-indicator.visible { opacity: 1; }

    /* ─── CTRL TOOLTIPS ──────────────────────────────── */
    .ctrl { position: relative; }
    .ctrl[data-tooltip]::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 9px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      white-space: nowrap;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #000;
      background: rgba(255,255,255,.96);
      padding: 4px 10px;
      border-radius: 3px;
      box-shadow: 0 3px 14px rgba(0,0,0,.2);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .ctrl[data-tooltip]:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ─── PLAY BUTTON RED ACCENT ─────────────────────── */
    #playBtn {
      border-color: rgba(210, 50, 50, .55);
      color: rgba(255, 150, 150, 1);
    }
    #playBtn:hover {
      background: rgba(200, 40, 40, .16);
      border-color: rgba(220, 55, 55, .9);
      box-shadow: 0 0 18px rgba(200, 40, 40, .3);
      color: #fff;
    }
    @keyframes ctrl-entrance-red {
      0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,55,55,.5); }
      42%  { transform: scale(1.22); box-shadow: 0 0 22px 5px rgba(220,55,55,.28); }
      72%  { transform: scale(0.95); box-shadow: 0 0 8px 2px rgba(220,55,55,.1); }
      100% { transform: scale(1); box-shadow: none; }
    }

    /* ─── NAV DOTS: centered ─── */
    .nav-dot { justify-content: center; padding-right: 0; }
    .side-nav::before {
      content: '';
      position: absolute;
      top: 22px;
      bottom: 22px;
      right: 7px;
      width: 1px;
      background: rgba(255,255,255,.18);
      pointer-events: none;
    }

    /* ─── ENGAGEMENT POPUP (center-right) ────────────── */
    .engage-popup {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%) translateX(110%);
      width: 280px;
      background: #fff;
      z-index: 7500;
      border-radius: 4px 0 0 4px;
      box-shadow: -8px 0 48px rgba(0,0,0,.28), -2px 0 24px rgba(0,0,0,.12);
      overflow: visible;
      transition: transform .55s cubic-bezier(.25,0,.2,1);
    }
    .ep-clip {
      border-radius: 4px 0 0 4px;
      overflow: hidden;
    }
    .engage-popup.phase1 { transform: translateY(-50%) translateX(0); }
    .ep-body { padding: 28px 24px 20px; position: relative; }
    .ep-logo {
      font-family: 'Instrument Serif', serif;
      font-size: 1.4rem; font-style: italic;
      letter-spacing: 0.1em; color: #000;
      text-align: center; margin-bottom: 4px;
    }
    .ep-label {
      font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: #999; text-align: center; margin-bottom: 16px;
    }
    .ep-heading {
      font-family: 'Instrument Serif', serif;
      font-size: 1.3rem; font-weight: 400;
      line-height: 1.25; text-align: center;
      color: #000; margin-bottom: 8px;
    }
    .ep-sub {
      font-size: 0.78rem; color: #666; line-height: 1.6;
      text-align: center; margin-bottom: 16px;
    }
    .ep-cta {
      display: block; text-align: center;
      background: #000; color: #fff;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 0.72rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; padding: 12px;
      border-radius: 50px;
      transition: background .2s;
    }
    .ep-cta:hover { background: #222; }
    /* Star rating (replaces like+signin CTA) */
    .ep-rating {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      margin: 8px 0 4px;
    }
    .ep-star {
      width: 36px; height: 36px;
      padding: 4px;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: rgba(0,0,0,.18);
      transition: color .2s var(--ease-out, ease), transform .15s var(--ease-out, ease);
    }
    .ep-star svg { width: 100%; height: 100%; display: block; }
    .ep-star:hover { transform: scale(1.12); }
    .ep-star.is-hot,
    .ep-star.is-rated { color: #f5b400; }
    .ep-rating[data-locked="true"] .ep-star { cursor: default; }
    .ep-rating[data-locked="true"] .ep-star:hover { transform: none; }
    .ep-rating-meta {
      font-size: .72rem;
      color: var(--muted);
      text-align: center;
      margin-bottom: 14px;
      letter-spacing: .02em;
    }
    .ep-rating-meta strong { color: var(--ink); font-weight: 700; }
    .ep-instagram-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      background: var(--ink);
      color: #fff;
      padding: 12px 18px;
      border-radius: 4px;
      text-decoration: none;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: background .2s var(--ease-out, ease), transform .2s var(--ease-out, ease);
    }
    .ep-instagram-cta:hover { background: #2a2a2a; transform: translateY(-1px); }
    .ep-image-wrap {
      height: 160px; overflow: hidden;
      transform: translateY(100%);
      transition: transform .5s cubic-bezier(.25,0,.2,1) .35s;
    }
    .engage-popup.phase2 .ep-image-wrap { transform: translateY(0); }
    .ep-image-wrap img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: center top; display: block;
    }

    /* ─── SHOP CTA BANNER ───────────────────────────── */
    .shop-cta-banner {
      background: #0a0a0f;
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 40px;
      gap: 24px;
      flex-wrap: wrap;
    }
    .shop-cta-left {
      display: flex; align-items: center; gap: 16px;
    }
    .shop-cta-badge {
      font-size: .6rem; font-weight: 700; letter-spacing: .35em;
      text-transform: uppercase; color: rgba(0,229,255,.7);
      border: 1px solid rgba(0,229,255,.25); border-radius: 2px;
      padding: 4px 10px; white-space: nowrap;
    }
    .shop-cta-text {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: #fff; font-style: italic;
    }
    /* CTA right cluster: hoodie thumbnails + Collection button (same height) */
    .shop-cta-right {
      display: flex; align-items: stretch; gap: 10px;
    }
    .shop-cta-thumbs {
      display: flex; align-items: stretch; gap: 8px;
    }
    .shop-cta-thumb {
      width: 48px; height: 48px;
      border-radius: 6px;
      background: #fff;
      overflow: hidden;
      flex-shrink: 0;
      transition: transform .35s var(--ease-out, cubic-bezier(.23,1,.32,1));
    }
    .shop-cta-thumb img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      display: block;
    }
    .shop-cta-thumb:hover { transform: translateY(-2px) scale(1.05); }
    .shop-cta-btn { height: 48px; display: inline-flex; align-items: center; }
    @media (max-width: 768px) {
      .shop-cta-right { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
      .shop-cta-thumbs { flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 4px; }
      .shop-cta-thumb { width: 40px; height: 40px; }
      .shop-cta-btn { height: 40px; }
    }
    @media (max-width: 480px) {
      .shop-cta-thumbs { gap: 6px; }
      .shop-cta-thumb:nth-child(n+4) { display: none; }
    }
    .shop-cta-btn {
      background: #fff; color: #000;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .78rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      padding: 14px 28px; border: none; border-radius: 2px;
      cursor: pointer; white-space: nowrap;
      transition: background .2s, transform .2s;
    }
    .shop-cta-btn:hover { background: #e0e0e0; transform: translateY(-1px); }

    /* ─── SINGULARITY SECTION ──────────────────────── */
    .singularity-section {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      margin-left: calc(-50vw + 50%);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      /* Fallback bg = poster image (covers full section even if video stalls) */
      background:
        linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.05)),
        url('/images/creating orb.webp') center/cover #0a0a14;
    }
    .singularity-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 1;
      z-index: 0;
    }
    .singularity-overlay {
      position: absolute; inset: 0;
      /* Dark only at the bottom where text sits ·top stays clear, no black void */
      background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 32%, transparent 60%);
      z-index: 1;
    }
    .singularity-inner {
      position: relative; z-index: 2;
      max-width: 780px;
      width: 100%;
      padding: 0 40px 80px;
      text-align: left;
      color: #fff;
      align-self: flex-end;
    }
    .singularity-eyebrow {
      font-size: .63rem; letter-spacing: .3em; text-transform: uppercase;
      color: rgba(255,255,255,.45); margin-bottom: 20px;
      font-family: 'Instrument Sans', sans-serif;
    }
    .singularity-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: 1.04;
      color: #fff;
      margin-bottom: 28px;
      font-weight: 400;
    }
    .singularity-title em {
      font-style: italic;
      color: #fff;
    }
    .singularity-body {
      font-size: .92rem;
      color: rgba(255,255,255,.55);
      line-height: 1.7;
      margin-bottom: 0;
      max-width: 520px;
    }
    .singularity-body strong { color: rgba(255,255,255,.8); font-weight: 500; }
    .singularity-divider {
      width: 36px; height: 1px;
      background: rgba(255,255,255,.25);
      margin: 24px 0 28px;
    }
    .singularity-stats {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 32px 48px; margin: 40px auto 0; max-width: 420px;
    }
    .singularity-stat {
      border-top: 1px solid rgba(255,200,80,.2);
      padding-top: 16px; min-width: 140px;
      text-align: left;
    }
    .singularity-stat-num {
      display: block;
      font-family: 'Instrument Serif', serif;
      font-size: 2rem; color: rgba(255,200,80,.9);
      line-height: 1;
    }
    .singularity-stat-label {
      font-size: .65rem; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(255,255,255,.3);
      margin-top: 6px; display: block;
    }
    /* singularity title ·no animation, image carries the energy */

    /* ─── NEURAL RESONANCE SECTION ──────────────────── */
    .neural-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      background: #050510;
      overflow: hidden;
      margin-top: 100px;
    }
    .neural-visual {
      position: relative;
      min-height: 100vh;
    }
    .neural-visual > div {
      width: 100%; height: 100%;
      position: absolute; inset: 0;
    }
    .neural-content {
      display: flex; flex-direction: column; justify-content: center;
      padding: 80px 64px;
      color: #fff;
    }
    .neural-content .section-eyebrow { color: rgba(0,229,255,.6); margin-bottom: 18px; }
    .neural-content h2 {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.2rem, 3.5vw, 3rem);
      color: #fff; margin-bottom: 1.2rem; line-height: 1.1;
    }
    .neural-lead {
      font-size: 1rem; color: rgba(255,255,255,.55);
      line-height: 1.8; margin-bottom: 2.5rem; max-width: 480px;
    }
    .neural-stats { display: flex; flex-direction: column; }
    .neural-stat-item {
      display: grid; grid-template-columns: 44px 1fr; gap: 20px;
      padding: 22px 0; border-top: 1px solid rgba(255,255,255,.07);
      align-items: start;
    }
    .neural-stat-item:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
    .neural-stat-num {
      font-family: 'Instrument Sans', sans-serif;
      font-size: .65rem; font-weight: 700; letter-spacing: .2em;
      color: rgba(0,229,255,.35); padding-top: 7px; text-transform: uppercase;
    }
    .neural-stat-value {
      display: block; font-family: 'Instrument Serif', serif;
      font-size: 2rem; color: rgba(0,229,255,.95);
      line-height: 1; margin-bottom: 4px;
    }
    .neural-stat-label {
      display: block; font-size: .68rem; letter-spacing: .2em;
      text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 7px;
    }
    .neural-stat-desc {
      font-size: .85rem; color: rgba(255,255,255,.3); line-height: 1.6;
    }
    @media(max-width:860px) {
      .neural-section { grid-template-columns: 1fr; min-height: auto; }
      .neural-visual { min-height: 50vh; }
      .neural-content { padding: 40px 24px; }
    }


    /* ─── PRE-ORDER POPUP ──────────────────────────────── */
    .preorder-overlay {
      position: fixed; inset: 0; z-index: 9200;
      background: rgba(0,0,0,.88);
      backdrop-filter: blur(20px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
    }
    .preorder-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }
    .preorder-box {
      background: #0d0d14;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 8px;
      width: 100%; max-width: 780px;
      display: grid; grid-template-columns: 1fr 300px;
      overflow: hidden;
      position: relative;
      transform: translateY(20px);
      transition: transform .35s cubic-bezier(.22,.61,.36,1);
    }
    .preorder-overlay.open .preorder-box { transform: translateY(0); }
    .preorder-body { padding: 48px 44px; min-width: 0; }
    .preorder-image-wrap {
      position: relative; overflow: hidden; background: #0a0a12;
    }
    .preorder-image-wrap img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      display: block; transition: opacity .4s ease;
    }
    @media (max-width: 700px) {
      .preorder-box { grid-template-columns: 1fr; max-width: 440px; }
      .preorder-image-wrap { display: none; }
      .preorder-body { padding: 40px 28px; }
    }
    .preorder-close {
      position: absolute; top: 16px; right: 18px; z-index: 2;
      background: none; border: none; color: rgba(255,255,255,.4);
      font-size: 1.2rem; cursor: pointer; padding: 4px 8px;
      transition: color .2s;
    }
    .preorder-close:hover { color: #fff; }
    .preorder-eyebrow {
      font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
      color: rgba(0,229,255,.55); margin-bottom: 10px;
    }
    .preorder-box h2 {
      font-family: 'Instrument Serif', serif;
      font-size: 1.7rem; font-style: italic;
      color: #fff; margin-bottom: 18px; line-height: 1.2;
    }
    .preorder-question {
      font-size: 1.05rem; color: rgba(255,255,255,.75);
      line-height: 1.6; margin-bottom: 28px;
    }
    .preorder-btns { display: flex; flex-direction: column; gap: 10px; }
    .preorder-yes {
      background: #fff; color: #000;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      padding: 15px 28px; border: none; border-radius: 4px;
      cursor: pointer; transition: background .2s;
    }
    .preorder-yes:hover { background: #d8d8d8; }
    .preorder-no {
      background: none; border: 1px solid rgba(255,255,255,.15);
      color: rgba(255,255,255,.45);
      font-size: .8rem; padding: 12px 28px; border-radius: 4px;
      cursor: pointer; transition: border-color .2s, color .2s;
    }
    .preorder-no:hover { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7); }
    .preorder-sub {
      font-size: .93rem; color: rgba(255,255,255,.6); line-height: 1.65;
      margin-bottom: 24px;
    }
    .preorder-input {
      width: 100%; background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 4px; padding: 14px 16px;
      color: #fff; font-size: 1rem;
      font-family: 'Instrument Sans', sans-serif;
      transition: border-color .2s; outline: none;
      margin-bottom: 12px; display: block;
    }
    .preorder-input:focus { border-color: rgba(0,229,255,.55); }
    .preorder-input::placeholder { color: rgba(255,255,255,.2); }
    .preorder-submit {
      width: 100%; background: #fff; color: #000;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      padding: 15px; border: none; border-radius: 4px;
      cursor: pointer; transition: background .2s;
    }
    .preorder-submit:hover { background: #d8d8d8; }
    .preorder-fine {
      font-size: .75rem; color: rgba(255,255,255,.55);
      line-height: 1.65; margin-top: 14px;
    }
    .preorder-success-icon {
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(0,229,255,.12); border: 1px solid rgba(0,229,255,.3);
      display: flex; align-items: center; justify-content: center;
      color: rgba(0,229,255,.9); font-size: 1.4rem;
      margin-bottom: 20px;
    }
    .preorder-done {
      margin-top: 24px;
      background: #fff; color: #000;
      font-family: 'Instrument Sans', sans-serif;
      font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      padding: 14px 32px; border: none; border-radius: 4px;
      cursor: pointer; transition: background .2s;
    }
    .preorder-done:hover { background: #d8d8d8; }

    /* ─── CARD MODALS ──────────────────────────────── */
    .card-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(4,4,8,.95);
      z-index: 850;
      display: flex; align-items: stretch;
      opacity: 0; pointer-events: none;
      transition: opacity .35s ease;
      overflow-y: auto;
    }
    .card-modal-overlay.active { opacity: 1; pointer-events: auto; }
    .card-modal-close {
      position: fixed; top: 20px; right: 24px;
      width: 44px; height: 44px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.7); font-size: 1.3rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; background: rgba(0,0,0,.5);
      z-index: 851; transition: border-color .2s, color .2s, background .2s;
      font-family: inherit;
    }
    .card-modal-close:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
    .card-modal-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      width: 100%; min-height: 100vh;
    }
    .card-modal-image {
      position: sticky; top: 0; height: 100vh; overflow: hidden;
    }
    .card-modal-image img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      display: block;
    }
    .card-modal-content {
      padding: 80px 64px 80px 60px;
      display: flex; flex-direction: column; gap: 20px;
      color: rgba(255,255,255,.85);
    }
    .card-modal-eyebrow {
      font-family: 'DM Mono', 'Courier New', monospace;
      font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.35);
    }
    .card-modal-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1.1;
      color: #fff; margin: 0;
    }
    .card-modal-body { font-size: .9rem; line-height: 1.78; color: rgba(255,255,255,.68); }
    .card-modal-body p { margin-bottom: 16px; }
    .card-modal-body p:last-child { margin-bottom: 0; }
    .card-modal-stat {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 6px; overflow: hidden;
      margin-top: 4px;
    }
    .modal-stat-item {
      padding: 18px 12px; text-align: center;
      background: rgba(255,255,255,.03);
    }
    .modal-stat-value {
      font-family: 'Instrument Serif', serif;
      font-size: 1.55rem; color: #fff; display: block; line-height: 1;
    }
    .modal-stat-label {
      font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.35); margin-top: 6px; display: block;
      line-height: 1.3;
    }
    .card-modal-cta {
      margin-top: 12px; padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .card-modal-cta-text {
      font-size: .78rem; color: rgba(255,255,255,.35); margin-bottom: 14px;
      font-style: italic;
    }
    .card-modal-cta .card-cta--unlock {
      color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.25);
    }
    .card-modal-cta .card-cta--unlock:hover {
      background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7);
      color: #fff;
    }
    @media (max-width: 768px) {
      .card-modal-inner { grid-template-columns: 1fr; }
      .card-modal-image { height: 260px; position: relative; }
      .card-modal-content { padding: 36px 20px 60px; }
      .card-modal-stat { grid-template-columns: repeat(2, 1fr); }
    }

    /* ─── FAQ section · visible counterpart of the FAQPage schema ─── */
    .faq-section {
      background: var(--bg);
      padding: 96px 24px 110px;
      border-top: 1px solid rgba(0,0,0,.08);
    }
    .faq-inner { max-width: 820px; margin: 0 auto; }
    .faq-eyebrow {
      display: block;
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .faq-title {
      font-size: clamp(1.9rem, 4vw, 2.6rem);
      font-weight: 500;
      margin-bottom: 38px;
    }
    .faq-item { border-bottom: 1px solid rgba(0,0,0,.1); }
    .faq-item:first-child { border-top: 1px solid rgba(0,0,0,.1); }
    .faq-item summary {
      cursor: pointer;
      padding: 20px 40px 20px 0;
      font-family: 'Instrument Serif', Georgia, serif;
      font-size: 1.18rem;
      list-style: none;
      position: relative;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.35rem;
      font-family: 'Instrument Sans', system-ui, sans-serif;
      color: var(--muted);
      transition: transform .25s var(--ease-out);
    }
    .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
    .faq-item summary:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }
    .faq-item p {
      padding: 0 0 24px;
      color: var(--muted);
      font-size: .98rem;
      max-width: 68ch;
    }
    .faq-item a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    @media (max-width: 768px) {
      .faq-section { padding: 64px 18px 76px; }
      .faq-item summary { font-size: 1.06rem; }
    }