/* === FONTS — MSU Design System ===
     System font: Roboto (UI body/labels)
     Point font:  Sofia Sans Condensed (display/decorative headings)
     Mono font:   Roboto Mono (code/tokens/timestamps) */

  :root {
    /* === Color — Palette (Primitive) === */
    /* Purple scale */
    --purple-050: #F3EAFF;
    --purple-100: #D8BCFF;
    --purple-200: #BD8FFF;
    --purple-300: #A361FF;
    --purple-400: #8632FB;
    --purple-500: #6D20D9;
    --purple-600: #5611B7;
    --purple-700: #420695;
    --purple-800: #300073;
    --purple-900: #220051;

    /* Cyan scale */
    --cyan-050: #ECFFFC;
    --cyan-100: #C1FFF6;
    --cyan-200: #98FFEF;
    --cyan-300: #6EFFE8;
    --cyan-400: #43FFE2;
    --cyan-500: #28E3D2;
    --cyan-600: #09C0BD;
    --cyan-700: #009898;

    /* Pink scale (used sparingly for legacy emphasis) */
    --pink-050: #FFECFC;
    --pink-400: #EC3BD1;

    /* Blue scale */
    --blue-050: #EFF4FF;
    --blue-400: #5C8FFA;
    --blue-500: #4675D8;
    --blue-600: #335EB6;

    /* Lightblue scale */
    --lightblue-400: #11CDF2;
    --lightblue-500: #00B8E5;
    --lightblue-600: #0093C4;

    /* Red */
    --red-050: #FEF2F2;
    --red-500: #FA4D56;
    --red-600: #DA1E28;

    /* Yellow */
    --yellow-400: #FFEB3B;
    --yellow-500: #FDD835;
    --yellow-600: #FBC02D;

    /* Green */
    --green-400: #34D399;
    --green-500: #10B981;
    --green-600: #059669;

    /* Neutral scale */
    --neutral-white: #FFFFFF;
    --neutral-025: #FAFBFC;
    --neutral-050: #F7F8F9;
    --neutral-100: #F0F2F4;
    --neutral-200: #E9ECEF;
    --neutral-300: #CFD5DB;
    --neutral-400: #ADB5BD;
    --neutral-500: #868E96;
    --neutral-600: #69717A;
    --neutral-700: #4C545B;
    --neutral-800: #343A3F;
    --neutral-900: #21272A;
    --neutral-black: #121619;

    /* === Color — Role Tokens (Light) === */
    /* Text & Icon */
    --text-icon-primary: var(--neutral-900);
    --text-icon-secondary: var(--neutral-600);
    --text-icon-tertiary: var(--neutral-500);
    --text-icon-weak: var(--neutral-400);
    --text-icon-weakest: var(--neutral-300);
    --text-icon-accent: var(--purple-400);

    /* Surface (cards/panels) */
    --surface-clear: var(--neutral-white);
    --surface-level-01: var(--neutral-050);
    --surface-level-02: var(--neutral-200);

    /* Background (page-wide) */
    --bg-default: var(--neutral-white);
    --bg-level-01: var(--neutral-050);
    --bg-level-02: var(--neutral-100);

    /* Border */
    --border-weakest: var(--neutral-100);
    --border-weaker: var(--neutral-200);
    --border-stronger: var(--neutral-400);
    --border-strongest: var(--neutral-600);
    --border-level-01: rgba(134, 142, 150, 0.10);
    --border-level-02: rgba(134, 142, 150, 0.20);
    --border-contrast: var(--neutral-black);
    --border-accent-primary: var(--purple-400);

    /* System */
    --color-accent: var(--purple-400);
    --system-positive: var(--green-500);

    /* Interactive */
    --interactive-accent-action: var(--purple-500);
    --interactive-accent-bg-active: rgba(134, 50, 251, 0.12);
    --interactive-accent-bg-hover: rgba(134, 50, 251, 0.06);
    --interactive-accent-bg-subtle: rgba(134, 50, 251, 0.10);
    --interactive-strongest-action: var(--neutral-black);

    /* Elevation */
    --elevation-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --elevation-swatch-hover: 0 6px 16px rgba(0, 0, 0, 0.10);
    --elevation-toast: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* === Brand — MSU === */
    --brand-msu-primary: var(--purple-400);
    --brand-msu-primary-action: var(--purple-500);
    --brand-msu-primary-weak: var(--purple-050);
    --brand-msu-primary-weakest: rgba(134, 50, 251, 0.05);
    --brand-msu-primary-overlay: rgba(134, 50, 251, 0.10);
    --brand-msu-secondary: var(--cyan-400);
    --brand-msu-secondary-action: var(--cyan-500);
    --brand-msu-secondary-weak: var(--cyan-050);
    --brand-msu-secondary-overlay: rgba(67, 255, 226, 0.10);

    /* === MapleStory Item Grade Colors === */
    --maplestory-web-normal: #CFD5DB;
    --maplestory-web-rare: #42D9D9;
    --maplestory-web-epic: #AF86FF;
    --maplestory-web-unique: #FFCC00;
    --maplestory-web-legendary: #B0DC00;

    /* === Typography === */
    --font-roboto: 'Roboto', sans-serif;
    --font-roboto-mono: 'Roboto Mono', monospace;
    --font-sofia-sans-condensed: 'Sofia Sans Condensed', sans-serif;

    /* Font weights */
    --fw-system-regular: 400;
    --fw-system-medium: 500;
    --fw-system-bold: 700;
    --fw-point-regular: 400;
    --fw-point-medium: 600;
    --fw-point-bold: 800;

    /* Font sizes — System */
    --fs-tiny: 11px;
    --fs-xs: 12px;
    --fs-s: 14px;
    --fs-m: 16px;
    --fs-l: 18px;
    --fs-xl: 20px;
    --fs-xxl: 24px;
    --fs-disp-s: 30px;
    --fs-disp-m: 34px;
    --fs-disp-l: 40px;
    --fs-disp-xl: 50px;
    --fs-disp-xxl: 80px;

    /* Font sizes — Point */
    --fs-point-s: 16px;
    --fs-point-m: 20px;
    --fs-point-l: 22px;
    --fs-point-xl: 24px;
    --fs-point-xxl: 29px;
    --fs-point-disp-s: 36px;
    --fs-point-disp-m: 41px;
    --fs-point-disp-l: 48px;
    --fs-point-disp-xl: 60px;
    --fs-point-disp-xxl: 96px;

    /* Line heights */
    --lh-none: 1;
    --lh-tight: 1.3;
    --lh-base: 1.4;
    --lh-wide: 1.6;
    --lh-point-s: 1;
    --lh-point-m: 1.1;

    /* Letter spacings */
    --ls-none: 0;
    --ls-point-body: -0.1px;
    --ls-point-heading: -0.2px;
    --ls-point-disp: -0.5px;

    /* === Legacy aliases — bridge old var() refs to MSU role tokens === */
    --color-primary: var(--brand-msu-primary);
    --color-primary-deep: var(--brand-msu-primary-action);
    --color-secondary: var(--purple-600);
    --color-tertiary: var(--lightblue-500);
    --color-success: var(--green-500);

    --bg-page: var(--bg-default);
    --bg-section-alt: var(--bg-level-02);
    --bg-card: var(--surface-clear);
    --bg-sky-tint: var(--cyan-100);

    --text-primary: var(--text-icon-primary);
    --text-secondary: var(--text-icon-secondary);
    --text-tertiary: var(--text-icon-tertiary);
    --text-on-color: var(--neutral-white);

    --border-subtle: var(--border-level-01);
    --border-default: var(--border-level-02);
    --border-strong: rgba(134, 142, 150, 0.40);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
    --shadow-glow-pink: 0 8px 32px rgba(134, 50, 251, 0.35);
    --shadow-glow-cyan: 0 8px 32px rgba(67, 255, 226, 0.30);

    --bg-base: var(--bg-default);
    --bg-soft: var(--bg-level-01);
    --text: var(--text-icon-primary);
    --text-soft: var(--text-icon-secondary);
    --line: var(--border-level-02);
    --orange: var(--brand-msu-primary);
    --orange-deep: var(--brand-msu-primary-action);
    --blue: var(--lightblue-500);
    --blue-deep: var(--lightblue-600);
    --pink: var(--purple-300);
    --magenta: var(--purple-600);
    --magenta-deep: var(--purple-700);
    --yellow: var(--yellow-500);
    --green: var(--green-500);
    --max: 1200px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Force the page scrollbar to always be present so that any height
     fluctuation (CLI animation, image loads, etc.) cannot toggle the
     scrollbar and shift right-aligned content horizontally.
     scroll-behavior: smooth softens every browser-driven scroll
     (anchor jumps, scroll-snap "settle" motion) so snap points glide
     instead of clicking into place.
     scroll-snap-type: proximity stays for the gentle magnet feel,
     but is only applied to the two thin marquee anchors below so the
     larger Shipping and FAQ sections scroll freely without pull. */
  html {
    overflow-y: scroll;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-snap-type: none;
      scroll-behavior: auto;
    }
  }
  body {
    font-family: var(--font-roboto);
    background: var(--bg-base); color: var(--text);
    line-height: 1.65; font-size: var(--fs-s); -webkit-font-smoothing: antialiased;
    letter-spacing: var(--ls-none);
    /* overflow-x: clip (not hidden) — clip prevents horizontal scroll
       without making body a scroll container, which would break the
       sticky behavior of nav.top above. */
    overflow-x: clip;
  }
  a { color: inherit; }
  img { max-width: 100%; display: block; }

  /* === Language toggle (EN only) === */
  .t-en { display: inline; }
  .t-ko { display: none; }

  /* === NAV === */
  nav.top {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 28px;
  }
  nav.top .inner {
    /* Full-width bar — left cluster (bento + MSU logo) flush left,
       right cluster (Build Now) flush right. The 28px padding on
       nav.top already provides edge breathing room. */
    max-width: none;
    margin: 0;
    width: 100%;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
  }
  nav.top .brand {
    position: relative;
    display: inline-block;
    font-family: var(--font-sofia-sans-condensed);
    font-weight: var(--fw-point-bold);
    font-size: 22px;
    line-height: var(--lh-point-s);
    letter-spacing: var(--ls-point-body);
    color: #21272A;
    padding-right: 4px;
  }
  nav.top .brand-sparkle {
    position: absolute;
    width: 0.34em;
    height: auto;
    left: 0.92em;
    top: 0.18em;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  nav.top .center { display: flex; gap: 22px; font-size: 14px; }
  nav.top .center a { color: var(--text-soft); text-decoration: none; font-weight: 500; }
  nav.top .center a:hover { color: var(--orange); }
  nav.top .right { display: flex; gap: 14px; align-items: center; }
  .lang-switch {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.6); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px;
  }
  .lang-switch button {
    background: none; border: 0; padding: 6px 12px;
    border-radius: 999px; cursor: pointer;
    font-family: var(--font-roboto); font-weight: 700; font-size: 12px;
    color: var(--text-soft); letter-spacing: 0.06em;
  }
  .lang-switch button.active { background: var(--text); color: #fff; }
  .lang-switch button:hover:not(.active) { color: var(--text); }
  nav.top .cta-btn {
    background: var(--orange); color: #fff;
    text-decoration: none; padding: 9px 18px;
    border-radius: 999px; font-weight: 700; font-size: 13px;
    box-shadow: 0 4px 12px rgba(134, 50, 251, 0.25);
    font-family: var(--font-roboto);
  }

  /* === GNB LEFT — Bento button + MSU horizontal logo + divider + Vibe Jam === */
  nav.top .gnb-left {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }
  nav.top .gnb-bento {
    width: 40px; height: 40px; padding: 8px;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--text-primary, #21272A);
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 8px;
  }
  nav.top .gnb-bento:hover { background: rgba(33, 39, 42, 0.08); }
  nav.top .gnb-bento[aria-expanded="true"] { background: rgba(33, 39, 42, 0.10); }
  nav.top .gnb-bento svg { display: block; }
  nav.top .gnb-msu-logo {
    display: inline-flex; align-items: center;
    margin: 0 12px 0 8px;
    text-decoration: none;
  }
  nav.top .gnb-msu-logo img { height: 40px; width: auto; display: block; }
  nav.top .gnb-divider {
    display: inline-block;
    width: 1px; height: 24px;
    background: rgba(33, 39, 42, 0.15);
    margin: 0 16px;
    align-self: center;
  }

  /* === BENTO DROPDOWN === */
  .bento-dropdown {
    position: absolute;
    top: 100%; left: 28px;
    margin-top: 6px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow:
      0 12px 40px rgba(33, 39, 42, 0.18),
      0 4px 12px rgba(33, 39, 42, 0.08);
    padding: 16px;
    z-index: 1000;
    display: flex; flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .bento-dropdown[aria-hidden="false"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  .bento-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  .bento-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.18s ease, visibility 0s linear 0s;
  }

  .bento-banners { display: flex; flex-direction: column; gap: 8px; }
  .bento-banner {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #FFFFFF;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .bento-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(33, 39, 42, 0.18);
  }
  .bento-banner__name { font-weight: 700; font-size: 16px; color: #FFFFFF; }
  .bento-banner__tag { font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.35; }
  .bento-banner--maple { background: linear-gradient(135deg, #FF6B35 0%, #FDD835 100%); }
  .bento-banner--market { background: linear-gradient(135deg, #7B61FF 0%, #00B8E5 100%); }

  .bento-services { display: flex; flex-direction: column; gap: 2px; }
  .bento-service {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
  }
  .bento-service:hover { background: rgba(33, 39, 42, 0.04); }
  .bento-service__main {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
  }
  .bento-service__title {
    font-weight: 700; font-size: 14px;
    color: var(--text-primary, #21272A);
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: 0.02em;
  }
  .bento-service__badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(163, 97, 255, 0.15);
    color: #A361FF;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.05em;
  }
  .bento-service__tag {
    font-weight: 400; font-size: 12px;
    color: rgba(33, 39, 42, 0.6);
    line-height: 1.4;
  }
  .bento-service__arrow {
    font-size: 16px;
    color: rgba(33, 39, 42, 0.35);
    flex-shrink: 0;
  }
  .bento-service:hover .bento-service__arrow { color: rgba(33, 39, 42, 0.7); }

  .bento-footer {
    border-top: 1px solid rgba(33, 39, 42, 0.08);
    padding-top: 12px;
    margin-top: 4px;
  }
  .bento-footer a {
    color: var(--color-primary, #8632FB);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
  }
  .bento-footer a:hover { text-decoration: underline; }

  /* Tablet */
  @media (max-width: 1279px) {
    nav.top .gnb-msu-logo img { height: 36px; }
    .bento-dropdown { width: 340px; }
  }

  /* Mobile — sheet-style dropdown with backdrop */
  @media (max-width: 767px) {
    nav.top .gnb-msu-logo { margin: 0 8px 0 4px; }
    nav.top .gnb-msu-logo img { height: 30px; }
    nav.top .gnb-divider { margin: 0 10px; height: 20px; }
    nav.top .gnb-bento { margin-right: 4px; width: 36px; height: 36px; padding: 6px; }
    .bento-dropdown {
      position: fixed;
      top: 56px; left: 0; right: 0;
      width: auto; max-width: none;
      margin-top: 0;
      border-radius: 0 0 16px 16px;
      max-height: calc(100vh - 56px);
    }
    .bento-backdrop { display: block; }
  }

  /* === HERO === */
  section.hero {
    position: relative;
    width: 100%;
    /* Aspect ratio is the PREFERRED cinematic 2.4:1 shape on wide
       viewports (≥1920px). On narrower viewports, the min-height floor
       prevents the height from collapsing along with the width, which
       was pushing overlay content (logo, headline, buttons) out of view.
       At narrow widths the aspect ratio is intentionally broken —
       width keeps shrinking, but height stays at 800px so overlay
       elements always have enough vertical space. */
    aspect-ratio: 2.4 / 1;
    min-height: 960px; /* +80px vs v3 — accommodates the v4 +18% Vibe Camp + full CTA stack with 40px+ clearance */
    max-height: 90vh;
    overflow: hidden;
    background-color: var(--bg-page);
    background-image:
      radial-gradient(
        ellipse at 50% 45%,
        rgba(10, 10, 26, 0.60) 0%,
        rgba(10, 10, 26, 0) 65%
      ),
      url('../assets/images/hero-banner.png');
    background-size: auto, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
  }
  /* Subtle side vignette — fades to transparent by ~18% from each edge */
  section.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to right,
        rgba(15, 20, 50, 0.30) 0%,
        rgba(15, 20, 50, 0.12) 10%,
        rgba(15, 20, 50, 0) 18%
      ),
      linear-gradient(
        to left,
        rgba(15, 20, 50, 0.30) 0%,
        rgba(15, 20, 50, 0.12) 10%,
        rgba(15, 20, 50, 0) 18%
      );
    pointer-events: none;
    z-index: 1;
  }
  /* Bottom soft fade into page background — top is hard edge against nav */
  /* Hero bottom fade (linear-gradient to --bg-page) removed per user
     request — the hero now butts cleanly into the next section without
     a soft transition band. ::before (side vignette) is kept. */

  /* WebGL aurora overlay. Sits above the hero background image and the
     side vignette ::before (z-index 1), below the hero-stack content
     (z-index 2+). mix-blend-mode: screen keeps it additive — it adds
     light to the busy galaxy bg without darkening or replacing pixels,
     which is how real auroras read against a night sky. opacity caps
     the overall intensity so it never dominates the wordmark. */
  .hero-aurora-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.90;
    mix-blend-mode: screen;
    display: block;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-aurora-bg { opacity: 0.60; }
  }

  .logo {
    position: relative;
    pointer-events: none;
  }
  .logo-hero {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: clamp(280px, 32vw, 560px);
  }
  /* Soft white halo behind the logo — lifts it off the busy illustration */
  .logo-hero::before {
    content: "";
    position: absolute;
    width: 130%;
    height: 160%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    z-index: -1;
    pointer-events: none;
  }
  .logo-svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
      drop-shadow(0 0 2px rgba(15, 20, 50, 0.95))
      drop-shadow(0 4px 8px rgba(15, 20, 50, 0.6))
      drop-shadow(0 12px 28px rgba(15, 20, 50, 0.45))
      drop-shadow(0 24px 56px rgba(15, 20, 50, 0.30));
  }
  .logo-svg .logo-line {
    font-family: var(--font-sofia-sans-condensed);
    font-weight: var(--fw-point-bold);
    font-size: 160px;
    letter-spacing: var(--ls-point-disp);
    fill: url(#vibe-jam-gradient);
    stroke: #FFFFFF;
    stroke-width: 10;
    stroke-linejoin: round;
    paint-order: stroke;
    vector-effect: non-scaling-stroke;
  }
  /* "Vibe Camp" is 9 chars vs the old "Vıbe / Jam" splits — drop the
     font-size so the wordmark fits within the SVG viewBox without
     overflowing past the MapleStory image above it. */
  .logo-svg .logo-line--camp {
    font-size: 128px;
  }
  /* MSU sparkle sits where the dot of "ı" in "Vıbe Camp" would be —
     stylized dot replacement, slightly larger than a typical font dot
     so it reads as the wordmark's signature accent. */
  .logo-hero .logo-sparkle {
    position: absolute;
    width: 7%;
    left: 27%;
    top: 56%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: block;
    line-height: 0;
  }
  .logo-hero .logo-sparkle img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }
  /* Shimmering glow behind MSU sparkle — wider spread, brighter colors, faster pulse */
  /* Shimmering glow — tighter spread (no longer covers Vibe Camp /
     MapleStory Universe), irregular asymmetric bright spots, multiple
     overlapping rotation cycles so the light feels like sun reflection
     wobbling rather than a uniform pulsing halo. */
  .logo-hero .logo-sparkle::before {
    content: "";
    position: absolute;
    inset: -55%;
    background:
      radial-gradient(ellipse 30% 40% at 22% 28%, rgba(255, 255, 255, 0.55), transparent 75%),
      radial-gradient(ellipse 25% 30% at 78% 22%, rgba(120, 220, 255, 0.45), transparent 75%),
      radial-gradient(ellipse 32% 24% at 28% 78%, rgba(253, 216, 53, 0.42), transparent 75%),
      radial-gradient(ellipse 26% 30% at 76% 70%, rgba(255, 150, 220, 0.45), transparent 75%);
    z-index: 0;
    pointer-events: none;
    filter: blur(7px);
    animation: sparkle-shimmer 3.6s ease-in-out infinite;
  }
  /* Irregular ray spikes — sparse narrow rays at varying angles drift
     slowly to mimic shimmering sun glints rather than a clean ray burst. */
  .logo-hero .logo-sparkle::after {
    content: "";
    position: absolute;
    inset: -45%;
    background:
      conic-gradient(from 12deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.35) 4deg,
        transparent 12deg,
        transparent 68deg,
        rgba(253, 216, 53, 0.30) 74deg,
        transparent 82deg,
        transparent 138deg,
        rgba(120, 220, 255, 0.32) 146deg,
        transparent 154deg,
        transparent 212deg,
        rgba(255, 255, 255, 0.26) 220deg,
        transparent 230deg,
        transparent 282deg,
        rgba(255, 150, 220, 0.30) 290deg,
        transparent 298deg,
        transparent 360deg
      );
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(3px);
    animation: sparkle-rotate 13s linear infinite;
  }
  /* Asymmetric shimmer — opacity AND tiny rotation wobble so each
     pulse looks slightly different, like light catching on water. */
  @keyframes sparkle-shimmer {
    0%   { opacity: 0.65; transform: scale(0.94) rotate(0deg); }
    27%  { opacity: 0.92; transform: scale(1.05) rotate(5deg); }
    52%  { opacity: 0.75; transform: scale(0.97) rotate(-3deg); }
    78%  { opacity: 1;    transform: scale(1.02) rotate(3deg); }
    100% { opacity: 0.65; transform: scale(0.94) rotate(0deg); }
  }
  @keyframes sparkle-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .hero-stack {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Bottom padding tightened (was 96-200px) so logo + headline + buttons
       fit within the hero's 800px min-height comfortably on intermediate
       viewports. Top padding stays similar. */
    padding: clamp(32px, 4vh, 60px) 24px clamp(48px, 8vh, 120px);
    pointer-events: none;
  }
  .hero-stack > * { pointer-events: auto; }
  .hero-text-group {
    margin-top: clamp(20px, 2.5vh, 36px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    /* Safe zone: never extend past the foreground characters baked into
       the hero illustration (~22% left, ~75% right). 46vw keeps text
       between them on all viewports; 720px caps growth on wide screens. */
    width: 100%;
    max-width: min(720px, 46vw);
    padding-left: clamp(16px, 2vw, 32px);
    padding-right: clamp(16px, 2vw, 32px);
    box-sizing: border-box;
  }
  /* Soft atmospheric darkening behind headline + subcopy only */
  .hero-text-group::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 180%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      ellipse at center,
      rgba(15, 20, 50, 0.45) 0%,
      rgba(15, 20, 50, 0) 70%
    );
    z-index: -1;
    pointer-events: none;
  }
  .hero-headline {
    margin: 0;
    font-family: var(--font-roboto);
    font-weight: 700;
    /* Lower min/max so the text shrinks more aggressively at intermediate
       viewports (1280-1700px) where it was overflowing into the
       character illustrations. */
    font-size: clamp(20px, 2.4vw, 38px);
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: #FFFFFF;
    text-shadow:
      0 0 1px rgba(15, 20, 50, 0.95),
      0 2px 4px rgba(15, 20, 50, 0.85),
      0 4px 16px rgba(15, 20, 50, 0.75),
      0 8px 32px rgba(15, 20, 50, 0.55);
    text-align: center;
    /* width is controlled by the parent .hero-text-group's safe zone */
    max-width: 100%;
    word-wrap: break-word;
    text-wrap: balance;
  }
  .hero-subcopy {
    margin: clamp(10px, 1.2vh, 16px) 0 0;
    font-family: var(--font-roboto);
    font-weight: 500;
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.5;
    color: #FFFFFF;
    text-shadow:
      0 0 1px rgba(15, 20, 50, 0.95),
      0 2px 4px rgba(15, 20, 50, 0.85),
      0 4px 14px rgba(15, 20, 50, 0.70);
    text-align: center;
    max-width: 680px;
  }
  .button-group {
    position: relative;
    z-index: 2;
    isolation: isolate;
    margin-top: clamp(24px, 3vh, 40px);
    display: flex; flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  /* Soft white halo grounding the buttons with the logo as one unit */
  .button-group::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 220%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0) 75%
    );
    z-index: -1;
    pointer-events: none;
  }
  .button-group .btn {
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .button-group .btn-primary {
    background: linear-gradient(135deg, #8632FB 0%, #6D20D9 100%);
    color: #fff;
    box-shadow:
      0 6px 20px rgba(134, 50, 251, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .button-group .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 10px 28px rgba(134, 50, 251, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  .button-group .btn-primary .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .button-group .btn-primary:hover .arrow {
    transform: translateX(4px);
  }
  .button-group .btn-secondary {
    background: #FFFFFF;
    border: 1.5px solid rgba(33, 39, 42, 0.15);
    color: #21272A;
    box-shadow: 0 4px 12px rgba(33, 39, 42, 0.08);
  }
  .button-group .btn-secondary:hover {
    background: #F7F8F9;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
  }
  .button-group .btn-tertiary {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #21272A;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
  }
  .button-group .btn-tertiary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    transform: translateY(-2px);
  }

  @media (max-width: 1279px) {
    .logo-hero { width: clamp(260px, 38vw, 460px); }
    .logo-svg .logo-line { stroke-width: 8; }
    .button-group .btn { font-size: 15px; padding: 13px 28px; }
    /* Background characters scale down with the image; safe zone can
       widen relative to viewport. */
    .hero-text-group { max-width: min(720px, 50vw); }
  }
  @media (max-width: 1023px) {
    .hero-text-group { max-width: 60vw; }
  }
  @media (max-width: 767px) {
    section.hero {
      aspect-ratio: auto;
      min-height: 70vh;
      max-height: none;
      overflow: visible; /* let stack push hero down on narrow viewports */
      background-position: 55% center;
    }
    /* On mobile the stack lays out in normal flow so the section grows
       with its content — CTA buttons no longer get clipped by the
       hero's fixed-size frame. */
    .hero-stack,
    .hero-stack--prelaunch {
      position: relative;
      inset: auto;
    }
    .hero-stack {
      padding: clamp(40px, 6vh, 72px) 20px clamp(28px, 4vh, 48px);
    }
    .hero-text-group {
      max-width: calc(100% - 32px);
      padding-left: 16px;
      padding-right: 16px;
    }
    .logo-hero {
      width: clamp(240px, 70vw, 340px);
    }
    .logo-hero::before {
      background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.50) 0%,
        rgba(255, 255, 255, 0) 72%
      );
    }
    .logo-svg .logo-line { stroke-width: 6; }
    .logo-svg {
      filter:
        drop-shadow(0 0 2px rgba(15, 20, 50, 0.95))
        drop-shadow(0 3px 6px rgba(15, 20, 50, 0.55))
        drop-shadow(0 8px 20px rgba(15, 20, 50, 0.35));
    }
    .hero-headline { font-size: clamp(20px, 5.6vw, 26px); }
    .hero-subcopy { font-size: 15px; }
    .button-group {
      flex-direction: column;
      width: 80%;
      max-width: 320px;
      gap: 12px;
    }
    .button-group .btn { width: 100%; justify-content: center; }
  }

  /* === PRE-LAUNCH HERO v3 (Jun 1 — Jun 7) ===
     Big brand wordmark stack (MapleStory image at the top of the hero, no
     backing band — diffuse drop-shadow + atmospheric cyan glow integrate
     it into the sky scene; Vibe Camp wordmark below, rendered as HTML
     with the MSU sparkle locked inside the "i" glyph span) → countdown →
     prominent date display → CTA row (disabled Build Now + Share). */
  .hero-stack--prelaunch {
    gap: 0;
    /* Combined-wordmark revision: padding-top reduced ~35% (280 → 180px
       max) so the lego wordmark sits higher in the hero and the Build
       Now CTA below it stays comfortably above the hero fold. The whole
       stack (wordmark + countdown + info + CTA) shifts up together. */
    padding: clamp(55px, 8.5vw, 122px) 24px clamp(48px, 6vh, 60px);
    justify-content: flex-start;
  }
  .hero-stack--prelaunch > * + * { margin-top: 0; }

  /* ---------- 1. Brand stack ---------- */
  .hero-brand {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px; /* spec: 24-32px gap so the two wordmarks read as a single brand statement */
    width: clamp(414px, 69vw, 828px); /* +15% on Vibe Camp wordmark */
  }

  /* MapleStory wordmark — massive environmental typography. Sits HIGH in
     the hero (top edge ~40-60px below the GNB), with width 195vw so it
     overflows both viewport edges (clipped by .hero's overflow: hidden).
     Sharp + 40% opacity. The foreground content stack (Vibe Camp through
     CTA) lives below this and gets pushed down by the .hero-stack's
     top padding. */
  .hero-brand__maple {
    position: absolute;
    /* Top lowered to sit just above the Vibe Camp wordmark (Vibe Camp
       lives under the .hero-stack--prelaunch padding-top, which scales
       with vw, so this top also uses vw to track that movement).
       Increased from the previous clamp so the smaller MapleStory
       wordmark's bottom edge still reaches near Vibe Camp's top edge. */
    top: clamp(100px, 16vw, 220px);
    left: 50%;
    transform: translateX(-50%);
    width: 26%; /* -35% from previous 40% — now clearly smaller than Vibe Camp */
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.90;
    /* Drop-shadow detaches the white wordmark from the hero background
       (sky-tone middle band would otherwise wash it out). The PNG's
       baked-in multi-color inner outline already gives the wordmark
       its depth/visual weight, so no additional CSS layering. */
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  }

  /* Vibe Camp wordmark — self-contained PNG with embedded gradient,
     3D bevel, and its own integrated "i" dot. The wrapper still owns
     the atmospheric drop-shadow + the slide-up mount animation. No
     text-stroke, no background-clip, no sparkle overlay — the image
     handles all visual treatment internally. */

  /* ============================================================
     Combined wordmark — single PNG with both MapleStory + Vibe Camp
     + sparkle baked in. Replaces the earlier 3-layer maple stack +
     vibecamp image + WebGL sparkle overlay. PNG natural dims 677x529
     (aspect ~1.28:1). The classes below this comment (hero-brand__maple,
     hero-brand__vibecamp*, hero-brand__sparkle-*) are no longer
     referenced by markup but retained for easy rollback if needed.
     ============================================================ */
  .hero-brand__combined {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* Soft atmospheric drop-shadow — separates the wordmark from the
       busy galaxy background without flattening the baked 3D bevel. */
    filter:
      drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45))
      drop-shadow(0 14px 36px rgba(15, 20, 50, 0.35));
    /* Fade + slide-up mount, matching the prior hero brand entrance. */
    opacity: 0;
    animation: hero-combined-in 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards;
  }
  @keyframes hero-combined-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-brand__combined {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
  @media (max-width: 1279px) {
    .hero-brand__combined { max-width: 460px; }
  }
  @media (max-width: 767px) {
    .hero-brand__combined { max-width: 360px; }
  }

  .hero-brand__vibecamp {
    position: relative;
    z-index: 2; /* sits in front of the MapleStory watermark */
    width: 100%;
    text-align: center;
    line-height: 0;
    opacity: 0;
    /* 4-layer drop-shadow stack — separates the wordmark from the
       background even when sky tones run close to the wordmark colors:
       Layer 1: tight near-black contour (1px) — sharp silhouette edge
       Layer 2: close contact shadow (3px) — grounds the letters
       Layer 3: mid atmospheric (10px navy) — soft halo
       Layer 4: far atmospheric (24px navy) — ambient depth */
    filter:
      drop-shadow(0 0 1px rgba(0, 0, 0, 0.65))
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.50))
      drop-shadow(0 8px 20px rgba(15, 20, 50, 0.55))
      drop-shadow(0 16px 40px rgba(15, 20, 50, 0.40));
    animation: hero-vibecamp-in 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards;
  }
  /* Animation ends at translateY(20%) — 20% of element's own height
     (image height) — visually shifting the wordmark + sparkle downward
     into the hero's center band WITHOUT affecting flex layout (Building
     label, countdown, info, CTA below all stay where they were). */
  @keyframes hero-vibecamp-in {
    from { opacity: 0; transform: translateY(calc(20% + 6px)); }
    to   { opacity: 1; transform: translateY(20%); }
  }
  .hero-brand__vibecamp-img {
    display: block;
    width: 100%;
    max-width: 828px;   /* matches .hero-brand max-width (+15% from 720px) */
    height: auto;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* ---------- MSU Sparkle overlay on the image's "i" dot ----------
     The wordmark PNG has its own colored "i" dot. We overlay the MSU
     sparkle (WebGL diffraction-star canvas + SVG symbol) ON TOP of
     that dot to claim it as the MSU brand mark.

     Positioning: percentages are relative to .hero-brand__vibecamp
     (width: 100% of .hero-brand). Since the image fills the container
     (both width: 100%, both same max-width), percentages map 1:1 to
     the image's natural coordinates.

     Calibrated via alpha-channel inspection of the 1612x461 PNG:
     - "i" dot center is at approximately (x=23.5%, y=12%) of the image.
     - User-requested offset: shifted left by 1.2x SVG icon size
       (1.2 * 4.2% = ~5%), so final left is 18.5%.
     - The wrap is sized 30% wide (square via aspect-ratio) — gives the
       WebGL diffraction spikes + glow PLENTY of room to extend beyond
       the dot. The canvas always fills the wrap (100%), so this is the
       primary lever for "make the sparkle effect bigger."
     - The SVG icon is 14% of the wrap. Wrap 30% * icon 14% = 4.2% of
       image — same absolute icon size as before, so the visible MSU
       sparkle artwork stays anchored to the "i" dot while the canvas
       behind it doubled+ in render area. */
  .hero-brand__sparkle-wrap {
    position: absolute;
    left: 18.5%; /* 23.5% - 1.2x icon size (~5%) */
    top: 12%;
    transform: translate(-50%, -50%);
    width: 30%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 3;
  }
  .hero-brand__sparkle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
  }
  .hero-brand__sparkle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14%;
    height: 14%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 2;
  }

  /* ---------- 2. Countdown block ---------- */
  .hero-countdown-block {
    position: relative;
    z-index: 2;
    margin-top: 32px; /* tightened from 40 to recover vertical room for the CTA row */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-countdown-label {
    margin: 0 0 12px;
    font-family: var(--font-roboto);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    text-shadow: 0 1px 2px rgba(15, 20, 50, 0.45);
  }
  .hero-countdown {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
  }
  .hero-countdown__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-countdown__num {
    font-family: var(--font-roboto-mono);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(15, 20, 50, 0.55);
  }
  .hero-countdown__label {
    margin-top: 8px;
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .hero-countdown__sep {
    align-self: center;
    color: rgba(255, 255, 255, 0.30);
    font-family: var(--font-roboto-mono);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
  }
  .hero-countdown__live {
    font-family: var(--font-sofia-sans-condensed);
    font-weight: var(--fw-point-bold);
    font-size: clamp(32px, 4vw, 56px);
    color: #FDD835;
    text-shadow:
      0 0 18px rgba(253, 216, 53, 0.55),
      0 2px 8px rgba(15, 20, 50, 0.7);
    letter-spacing: var(--ls-point-heading);
    text-align: center;
    padding: 12px 24px;
  }

  /* ---------- 3. Prominent date display ---------- */
  .hero-info {
    position: relative;
    z-index: 2;
    margin-top: 25px; /* tightened from 32 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .hero-info__date {
    margin: 0;
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-shadow:
      0 1px 2px rgba(15, 20, 50, 0.55),
      0 4px 14px rgba(15, 20, 50, 0.40);
  }
  .hero-info__sub {
    margin: 0;
    /* Dark glass chip — pill shape that shrinks to text width. The chip
       itself provides the contrast against bright bg, so text-shadow is
       reduced to a thin contour only (chip carries the legibility lift). */
    display: inline-block;
    align-self: center;
    max-width: 100%;
    padding: 7px 16px;
    background: rgba(15, 20, 50, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(15, 20, 50, 0.35);
    /* Typography */
    font-family: var(--font-roboto);
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  /* ---------- 4. CTA row (disabled Build Now + Share) ---------- */
  .hero-cta {
    position: relative;
    z-index: 2;
    margin-top: 32px; /* tightened from 40 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
  }
  .hero-build {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero-build__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    background: rgba(123, 79, 255, 0.35);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 10px 28px;
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: not-allowed;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(15, 20, 50, 0.25);
    animation: hero-build-waiting 3s ease-in-out infinite;
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
  }
  .hero-build__btn-main {
    line-height: 1.15;
  }
  /* Tiny meta line inside the disabled button — communicates "opens
     June 8" without a separate subtext element below. JS sets [hidden]
     when the button activates on June 8, leaving just "Build Now". */
  .hero-build__btn-meta {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1;
  }
  .hero-build__btn-meta[hidden] { display: none; }
  @keyframes hero-build-waiting {
    0%, 100% { border-color: rgba(255, 255, 255, 0.10); }
    50%      { border-color: rgba(255, 255, 255, 0.25); }
  }
  /* Active state — JS adds this class when Date.now() >= target */
  .hero-build__btn--active {
    background: #7B4FFF;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    animation: none;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      background-color 0.3s ease;
  }
  .hero-build__btn--active:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(123, 79, 255, 0.45);
  }
  .hero-build__btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
  }
  .hero-build__subtext {
    margin: 6px 0 0;
    /* No chip — minimal UPPERCASE label tone. Single short token
       ("JUNE 8") with strong silhouette shadow handles legibility
       without adding visual weight next to the disabled CTA. */
    align-self: center;
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.75),
      0 2px 8px rgba(15, 20, 50, 0.55);
  }
  .hero-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #0A0A1A;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 14px 28px;
    min-height: 48px; /* match the two-line .hero-build__btn (Start Building) height */
    border-radius: 12px;
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(15, 20, 50, 0.30);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .hero-share-btn:hover {
    transform: translateY(-2px);
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(15, 20, 50, 0.35);
  }
  .hero-share-btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
  }
  /* Learn more button shares hero-share-btn styles but is an anchor —
     normalize text-decoration and keep the same hover/focus polish. */
  a.hero-learn-btn,
  a.hero-learn-btn:visited {
    text-decoration: none;
    color: #0A0A1A;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1279px) {
    .hero-stack--prelaunch { padding: clamp(55px, 10vw, 115px) 24px 56px; }
    .hero-brand { width: clamp(368px, 80vw, 690px); gap: 24px; } /* +15% */
    .hero-brand__vibecamp-img { max-width: 690px; }
    .hero-countdown__box { width: 100px; height: 88px; }
    .hero-countdown__num { font-size: 44px; }
    .hero-countdown__sep { font-size: 44px; }
    .hero-info__date { font-size: 24px; }
  }
  @media (max-width: 767px) {
    .hero-stack--prelaunch { padding: clamp(44px, 11vw, 77px) 16px 48px; }
    .hero-brand { width: 92vw; max-width: 529px; gap: 18px; } /* +15% */
    .hero-brand__vibecamp-img { max-width: 529px; }
    .hero-countdown-block { margin-top: 28px; }
    .hero-countdown { gap: 6px; }
    .hero-countdown__box { width: 68px; height: 76px; border-radius: 12px; }
    .hero-countdown__num { font-size: 32px; }
    .hero-countdown__sep { font-size: 32px; }
    .hero-countdown__label { font-size: 9px; letter-spacing: 0.16em; margin-top: 6px; }
    .hero-countdown-label { font-size: 11px; }
    .hero-info { margin-top: 24px; gap: 12px; }
    .hero-info__date { font-size: 20px; }
    .hero-info__sub {
      font-size: 11px;
      padding: 6px 12px;
      white-space: normal; /* allow wrap on narrow viewports — full text won't fit in nowrap pill */
      text-align: center;
      letter-spacing: 0.02em;
    }
    .hero-cta { margin-top: 28px; flex-wrap: wrap; gap: 12px; }
    .hero-build__btn,
    .hero-share-btn { padding: 12px 22px; font-size: 13px; min-height: 53px; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .hero-brand__vibecamp {
      animation: none;
      opacity: 1;
      /* Keep the 20% downward shift even with reduced motion —
         it's a layout position, not an animation. */
      transform: translateY(20%);
    }
    /* MapleStory watermark has no animation and a deliberate 0.40 opacity —
       skip it here so reduced-motion doesn't accidentally make it opaque. */
    /* Sparkle WebGL canvas — reduced-motion handled inside the JS init
       (single static frame, RAF loop never starts). */
    .hero-build__btn { animation: none; }
  }

  /* === BUTTONS === */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 16px 32px; border-radius: 999px;
    text-decoration: none; font-weight: 700; font-size: 15px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    border: 0; cursor: pointer;
    font-family: var(--font-roboto);
  }
  .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(134, 50, 251, 0.35); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(134, 50, 251, 0.45); }
  .btn-secondary { background: #fff; color: var(--text); border: 2px solid var(--text); }
  .btn-secondary:hover { transform: translateY(-2px); background: var(--text); color: #fff; }
  .btn .arrow { font-size: 16px; }

  /* === SECTIONS === */
  section.block { padding: clamp(32px, 4.5vh, 56px) 28px clamp(60px, 9vh, 88px); position: relative; }
  section.block .inner { max-width: var(--max); margin: 0 auto; position: relative; }
  .section-label {
    display: inline-block; color: var(--orange);
    font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 14px; padding: 6px 14px;
    border-radius: 999px; background: rgba(134, 50, 251, 0.1);
    font-family: var(--font-roboto);
  }
  section.block h2 {
    font-size: 44px; line-height: 1.2; margin: 0 0 18px;
    font-weight: 800; letter-spacing: -0.02em;
    font-family: var(--font-roboto);
  }
  section.block h2 .accent { color: var(--orange); letter-spacing: -0.02em; }
  section.block h2.h2-xl { font-size: 60px; line-height: 1.12; }
  @media (max-width: 760px) { section.block h2.h2-xl { font-size: 36px; } }
  section.block p.intro {
    font-size: 18px; color: var(--text-soft);
    max-width: 760px; margin: 0 0 40px; line-height: 1.7;
  }
  section.block p.intro strong { color: var(--text); font-weight: 700; }
  .center { text-align: center; }
  .center .section-label, .center h2 { display: inline-block; }
  .center h2 { display: block; }
  .center p.intro { margin-left: auto; margin-right: auto; }

  /* === CARDS / GRIDS === */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  @media (max-width: 1279px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 767px)  { .grid-4 { grid-template-columns: 1fr; } }
  /* === LEGO CARDS (vision section) === */
  .lego-grid { margin-top: 40px; }
  .lego-card {
    position: relative;
    background:
      radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 2px, transparent 2.5px) 0 0 / 18px 18px,
      #FFF8E1;
    border-radius: 14px;
    padding: 78px 34px 72px;
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  .lego-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .lego-card::before,
  .lego-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    background:
      radial-gradient(circle at 9px 11px, rgba(0, 0, 0, 0.18) 3.5px, transparent 4.5px) 0 0 / 18px 18px,
      radial-gradient(circle at 9px 6px, rgba(255, 255, 255, 0.35) 2.5px, transparent 3.5px) 0 0 / 18px 18px,
      var(--lego-color);
  }
  .lego-card::before { top: 0; }
  .lego-card::after { bottom: 0; }
  .lego-corner {
    position: absolute;
    width: 68px;
    height: 62px;
    background:
      radial-gradient(circle at 9px 11px, rgba(0, 0, 0, 0.18) 3.5px, transparent 4.5px) 0 0 / 18px 18px,
      radial-gradient(circle at 9px 6px, rgba(255, 255, 255, 0.35) 2.5px, transparent 3.5px) 0 0 / 18px 18px,
      var(--lego-color);
    z-index: 1;
  }
  .lego-corner--tl { top: 0; left: 0; }
  .lego-corner--tr { top: 0; right: 0; }
  .lego-corner--bl { bottom: 0; left: 0; }
  .lego-corner--br { bottom: 0; right: 0; }
  .lego-pink { --lego-color: #8632FB; }
  .lego-cyan { --lego-color: #00B8E5; }
  .lego-green { --lego-color: #10B981; }
  .lego-yellow { --lego-color: #FBC02D; }
  .lego-purple { --lego-color: #A361FF; }
  .lego-purple .num { color: #420695; }

  .lego-card .num,
  .lego-card h3,
  .lego-card p {
    position: relative;
    z-index: 2;
  }
  .lego-card .num {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--lego-color);
    letter-spacing: 0.12em;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    background: color-mix(in srgb, var(--lego-color) 14%, transparent);
    font-family: var(--font-roboto);
  }
  .lego-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .lego-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
  }
  .lego-card p strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Sub-title (vision heading sub-line) */
  .sub-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 8px 0 24px;
    font-family: var(--font-roboto);
  }
  .center .sub-title {
    display: block;
    max-width: 700px;
    margin: 12px auto 28px;
  }

  @media (max-width: 900px) {
    .lego-card { padding: 72px 30px 64px; }
    .lego-corner { width: 58px; height: 54px; }
    .lego-card::before, .lego-card::after { height: 28px; }
  }
  @media (max-width: 600px) {
    .lego-card { padding: 64px 22px 58px; }
    .lego-corner { width: 50px; height: 46px; }
    .sub-title { font-size: 18px; }
    .lego-card h3 { font-size: 18px; }
  }

  /* === TRACKS (new design with winning condition) === */
  .track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
  .track-card {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 20px; padding: 32px; position: relative; overflow: hidden;
  }
  .track-card.t1 { border-top: 6px solid var(--orange); }
  .track-card.t2 { border-top: 6px solid var(--blue); }
  .track-card.t3 { border-top: 6px solid #5611B7; }
  .track-card .badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
    font-family: var(--font-roboto); letter-spacing: 0.04em;
  }
  .track-card.t1 .badge { background: rgba(134, 50, 251, 0.12); color: var(--orange-deep); }
  .track-card.t2 .badge { background: rgba(0, 184, 229, 0.12); color: var(--blue-deep); }
  .track-card.t3 .badge { background: rgba(86, 17, 183, 0.12); color: #420695; }
  .winning-condition {
    font-size: 22px; line-height: 1.35; font-weight: 700;
    margin: 14px 0 26px; letter-spacing: -0.01em;
    min-height: 90px;
  }
  .winning-condition .kw {
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .track-card.t1 .winning-condition .kw { color: var(--orange); }
  .track-card.t2 .winning-condition .kw { color: var(--blue); }
  .track-card.t3 .winning-condition .kw { color: #5611B7; }
  .track-card .prize-amount {
    font-size: 32px; font-weight: 900; letter-spacing: -0.02em;
    font-family: var(--font-roboto);
    padding-top: 18px; border-top: 1px solid var(--line);
  }
  .track-card.t1 .prize-amount { color: var(--orange); }
  .track-card.t2 .prize-amount { color: var(--blue); }
  .track-card.t3 .prize-amount { color: #5611B7; }
  .track-card .prize-amount small {
    font-size: 0.5em; color: var(--text-soft); font-weight: 600;
  }
  .judge-box {
    margin-top: 28px; background: var(--bg-card);
    border: 1px solid var(--line); border-radius: 16px;
    padding: 24px 28px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  }
  .judge-box h4 { margin: 0; font-size: 16px; font-weight: 800; }
  .judge-box p { margin: 4px 0 0; color: var(--text-soft); font-size: 13px; }
  .judge-pill { background: var(--text); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: var(--font-roboto); }

  /* === THE JOURNEY (Prize redefined) === */
  section.journey-block {
    background: linear-gradient(180deg, var(--bg-base) 0%, #F3EAFF 60%, var(--bg-base) 100%);
    padding: 110px 28px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  section.journey-block .inner { max-width: var(--max); margin: 0 auto; position: relative; }
  section.journey-block .sub-line {
    font-size: 24px; font-weight: 700;
    color: var(--text); margin: 8px 0 36px;
    font-family: var(--font-roboto);
  }
  section.journey-block .sub-line .kw { color: var(--color-secondary); font-weight: 800; }

  .stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 28px; }
  .stage-card {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 22px; padding: 36px;
    position: relative;
  }
  .stage-card.stage-1 { border-top: 6px solid var(--orange); }
  .stage-card.stage-2 { border-top: 6px solid var(--color-secondary); }
  .stage-label {
    display: inline-block;
    font-family: var(--font-roboto);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--text-soft);
    background: rgba(30, 27, 58, 0.06);
    padding: 5px 12px; border-radius: 999px;
    margin-bottom: 20px;
  }
  .stage-amount {
    font-family: var(--font-roboto);
    font-size: 44px; font-weight: 900;
    letter-spacing: -0.02em; line-height: 1;
    margin-bottom: 6px;
  }
  .stage-card.stage-1 .stage-amount { color: var(--orange); }
  .stage-card.stage-2 .stage-amount { color: var(--color-secondary); }
  .stage-amount small {
    display: block; font-size: 14px;
    font-weight: 600; color: var(--text-soft);
    margin-top: 8px; letter-spacing: 0;
    font-family: var(--font-roboto);
  }
  .stage-card h3 { margin: 18px 0 8px; font-size: 22px; font-weight: 800; }
  .stage-card p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.7; }
  .stage-card p strong { color: var(--text); font-weight: 700; }
  .closing-line {
    text-align: center; font-size: 18px;
    color: var(--text); font-weight: 600;
    padding-top: 12px;
  }
  .closing-line .kw { color: var(--orange); font-weight: 800; }

  /* === TIMELINE === */
  .timeline-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: 24px; padding: 40px; margin-top: 30px; }
  .timeline-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; }
  .timeline-track::before {
    content: ""; position: absolute;
    top: 22px; left: 6%; right: 6%; height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));
    border-radius: 2px; z-index: 0;
  }
  .tl-item { text-align: center; position: relative; z-index: 1; }
  .tl-dot {
    width: 48px; height: 48px;
    background: var(--bg-card); border: 4px solid var(--orange);
    border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--orange); font-size: 16px;
    font-family: var(--font-roboto);
  }
  .tl-item:nth-child(n+4) .tl-dot { border-color: var(--color-tertiary); color: var(--color-tertiary); }
  .tl-date { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-family: var(--font-roboto); }
  .tl-event { font-size: 12px; color: var(--text-soft); line-height: 1.5; }

  /* === SUPPORT === */
  section.support-block { background: linear-gradient(180deg, var(--bg-soft) 0%, #FFFFFF 100%); padding: 100px 28px; }
  .support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
  .support-item {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 18px; padding: 26px 28px;
    display: flex; gap: 18px; align-items: flex-start;
  }
  .support-item .icon {
    width: 44px; height: 44px;
    background: var(--orange); border-radius: 12px;
    color: #fff; font-size: 22px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .support-item h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
  .support-item p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.65; }
  .target-box {
    margin-top: 28px; background: var(--text); color: #fff;
    border-radius: 18px; padding: 30px 32px;
    display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  }
  .target-box .num-large {
    font-size: 64px; font-weight: 900;
    color: var(--orange); line-height: 1; letter-spacing: -0.02em;
  }
  .target-box h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
  .target-box p { margin: 0; opacity: 0.85; font-size: 14px; max-width: 540px; line-height: 1.65; }

  /* === JOIN === */
  .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
  .step-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; padding: 30px; position: relative; }
  .step-card .step-num {
    position: absolute; top: -16px; right: 24px;
    background: var(--orange); color: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px;
    font-family: var(--font-roboto);
  }
  .step-card .step-date { color: var(--orange-deep); font-weight: 700; font-size: 13px; margin-bottom: 8px; font-family: var(--font-roboto); }
  .step-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
  .step-card p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.6; }

  /* === FAQ === Native <details>/<summary> elements — folded by default,
     click to expand. Native semantics give keyboard / screen-reader
     support for free; no JS needed. */
  .faq-wrap { margin-top: 30px; }
  .faq-item {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 0; /* padding moved to summary + .a so the click target is the whole header row */
    overflow: hidden;
  }
  .faq-item .q {
    font-weight: 700;
    font-size: 15px;
    padding: 22px 26px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    list-style: none; /* Firefox default disclosure marker */
    user-select: none;
  }
  /* Webkit / Chromium default marker */
  .faq-item .q::-webkit-details-marker { display: none; }
  /* Q badge removed per spec — question number + text now sit flush
     to the left edge (governed by .q's own padding). */
  /* Toggle icon on the right — plus when closed, minus when open */
  .faq-item .q::after {
    content: "+";
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    color: var(--orange);
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .faq-item[open] .q::after {
    content: "−"; /* unicode minus, not hyphen */
  }
  .faq-item .q:hover {
    background: rgba(255, 255, 255, 0.02);
  }
  .faq-item[open] .q {
    border-bottom: 1px solid var(--line);
  }
  .faq-item .a {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.65;
    padding: 18px 26px 22px 26px; /* symmetric horizontal padding after Q badge removal */
  }
  .faq-item .a a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .faq-item .a a:hover { opacity: 0.85; }
  .faq-item .a strong { color: var(--text); font-weight: 700; }
  .faq-item .a em { font-style: italic; color: rgba(255, 255, 255, 0.78); }

  /* === FINAL CTA === */
  section.final-cta {
    background: linear-gradient(135deg, #8632FB 0%, #5611B7 100%);
    color: #fff; padding: 90px 28px; text-align: center;
    position: relative; overflow: hidden;
  }
  section.final-cta::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(253, 216, 53, 0.22), transparent 50%);
  }
  section.final-cta .inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
  section.final-cta h2 { font-size: 52px; font-weight: 900; line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.02em; font-family: var(--font-roboto); }
  section.final-cta h2 .accent { color: var(--yellow); }
  section.final-cta p { font-size: 17px; opacity: 0.92; margin: 0 0 36px; }
  section.final-cta .btn-primary { background: var(--yellow); color: var(--text); }
  section.final-cta .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
  .cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

  /* === FOOTER === */
  footer.site { background: var(--text); color: rgba(255,255,255,0.6); padding: 56px 28px 40px; text-align: center; font-size: 13px; }
  footer.site .inner { max-width: var(--max); margin: 0 auto; }
  footer.site .partners { display: flex; justify-content: center; align-items: center; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; }
  footer.site .partners img { height: 28px; opacity: 0.9; }
  footer.site .partners .x { color: rgba(255,255,255,0.4); font-size: 16px; font-weight: 300; font-family: var(--font-roboto); }
  footer.site .made { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.4); }
  footer.site .copyright {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
  }
  footer.site a { color: var(--orange); text-decoration: none; }

  @media (max-width: 900px) {
    .grid-3, .grid-2, .track-grid, .step-grid, .support-grid, .stage-grid { grid-template-columns: 1fr; }
    .timeline-track { grid-template-columns: repeat(3, 1fr); }
    .timeline-track::before { display: none; }
  }
  @media (max-width: 760px) {
    section.block { padding: 70px 20px; }
    section.block h2 { font-size: 30px; }
    section.journey-block, section.support-block { padding: 70px 20px; }
    nav.top .center { display: none; }
    section.final-cta h2 { font-size: 32px; }
    .target-box { padding: 24px; }
    .target-box .num-large { font-size: 48px; }
    .timeline-track { grid-template-columns: repeat(2, 1fr); }
    .winning-condition { font-size: 18px; min-height: auto; }
    .stage-amount { font-size: 32px; }
    section.journey-block .sub-line { font-size: 18px; }
  }

  /* === MOTION PREFERENCES === */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .button-group .btn:hover,
    .btn:hover {
      transform: none;
    }
    .live-badge, .live-pulse,
    .prize-marquee__track { animation: none !important; }
  }

  /* === HERO BADGE — absolute-pinned near hero top so it reads as an
     eyebrow chip rather than crowding the wordmark. Gradient + sheen
     give it more presence than the previous flat purple pill. */
  .hero-badge {
    position: absolute;
    top: clamp(16px, 4vh, 48px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-roboto);
    font-weight: 800;
    font-size: clamp(12px, 0.95vw, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(135deg, #6D20D9 0%, #8632FB 45%, #A361FF 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow:
      0 10px 28px rgba(134, 50, 251, 0.55),
      0 0 0 1px rgba(15, 20, 50, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      inset 0 -1px 0 rgba(15, 20, 50, 0.18);
    text-shadow: 0 1px 2px rgba(15, 20, 50, 0.45);
    overflow: hidden;
    isolation: isolate;
  }
  /* Sheen sweep — slow diagonal highlight slips across every ~6s */
  .hero-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.0) 35%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.0) 65%,
      transparent 100%);
    animation: hero-badge-sheen 6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }
  @keyframes hero-badge-sheen {
    0%, 70%, 100% { transform: translateX(0); opacity: 0; }
    78% { opacity: 1; }
    92% { transform: translateX(440%); opacity: 1; }
    93% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-badge::before { animation: none; }
  }
  .hero-headline .headline-prize {
    color: #FDD835;
    font-size: 1.15em;
    text-shadow:
      0 0 1px rgba(15, 20, 50, 0.95),
      0 0 16px rgba(253, 216, 53, 0.7),
      0 2px 4px rgba(15, 20, 50, 0.85),
      0 4px 14px rgba(15, 20, 50, 0.65);
    white-space: nowrap;
  }

  /* Hero date chip — squeezed between logo and headline */
  .hero-date {
    margin-top: 10px;
    margin-bottom: -14px; /* pull headline up to absorb most of the added height */
    font-family: var(--font-sofia-sans-condensed);
    font-weight: 700;
    font-size: clamp(11px, 0.95vw, 14px);
    letter-spacing: 0.18em;
    color: #FFFFFF;
    background: rgba(15, 20, 50, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.30);
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 4px rgba(15, 20, 50, 0.6);
    box-shadow: 0 4px 12px rgba(15, 20, 50, 0.25);
  }
  @media (max-width: 767px) {
    .hero-date { margin-bottom: -8px; font-size: 11px; padding: 4px 10px; letter-spacing: 0.15em; }
  }

  /* === BUILD NOW with LIVE badge === */
  .button-group .btn-build {
    position: relative;
    overflow: visible;
  }
  /* Scaled-up variant for the Idea + Action section CTA */
  .button-group .btn-build--xl {
    padding: 20px 48px;
    font-size: clamp(18px, 1.5vw, 22px);
    animation: btn-build-pulse 2.2s ease-in-out infinite;
  }
  @keyframes btn-build-pulse {
    0%, 100% {
      box-shadow: 0 8px 24px rgba(134, 50, 251, 0.40),
                  inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    50% {
      box-shadow: 0 12px 36px rgba(134, 50, 251, 0.55),
                  inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .button-group .btn-build--xl { animation: none; }
  }
  /* Pre-launch waiting state — mirrors hero-build__btn pattern. JS strips
     this modifier at the June 8 target so the button becomes the normal
     active btn-primary CTA. Specificity override (.btn.btn-primary...) so
     no !important is needed against the default btn-primary purple. */
  .btn.btn-primary.btn-build--waiting {
    background: rgba(123, 79, 255, 0.35);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 18px rgba(15, 20, 50, 0.25);
    cursor: not-allowed;
    animation: btn-build-waiting 3s ease-in-out infinite;
  }
  .btn.btn-primary.btn-build--waiting:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(15, 20, 50, 0.25);
  }
  @keyframes btn-build-waiting {
    0%, 100% { border-color: rgba(255, 255, 255, 0.10); }
    50%      { border-color: rgba(255, 255, 255, 0.25); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn.btn-primary.btn-build--waiting { animation: none; }
  }
  /* "Opens June 8, 2026" subtext below the disabled build button. JS sets
     hidden=true once the button activates. */
  .btn-build__subtext {
    margin: 12px 0 0;
    font-family: var(--font-roboto);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
  }
  .btn-build__subtext[hidden] { display: none; }
  .live-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #FA4D56;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px 3px 16px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 0 0 0 rgba(250, 77, 86, 0.6);
    animation: live-pulse-ring 1.5s ease-out infinite;
    pointer-events: none;
  }
  .live-badge::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: live-dot-blink 1.5s ease-in-out infinite;
  }
  @keyframes live-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(250, 77, 86, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(250, 77, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 77, 86, 0); }
  }
  @keyframes live-dot-blink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }

  /* Share button (button element) — inherits .btn-secondary base, needs reset */
  .button-group .btn-share {
    font-family: var(--font-roboto);
    cursor: pointer;
  }
  .button-group .btn-share svg {
    flex-shrink: 0;
  }

  /* === PRIZE MARQUEE === */
  .prize-marquee {
    height: 56px;
    background: #121619;
    border-top: 1px solid rgba(134, 50, 251, 0.4);
    border-bottom: 1px solid rgba(134, 50, 251, 0.4);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
  }
  .prize-marquee__track {
    display: flex;
    align-items: center;
    gap: 48px;
    white-space: nowrap;
    animation: marquee 48s linear infinite;
    will-change: transform;
    font-family: var(--font-roboto);
  }
  .prize-marquee:hover .prize-marquee__track {
    animation-play-state: paused;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-set {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .marquee-total {
    font-size: clamp(22px, 1.9vw, 28px);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #FDD835;
    text-shadow:
      0 0 16px rgba(253, 216, 53, 0.7),
      0 0 32px rgba(253, 216, 53, 0.3);
    padding: 6px 18px;
    background: rgba(253, 216, 53, 0.08);
    border: 1px solid rgba(253, 216, 53, 0.45);
    border-radius: 999px;
  }
  .marquee-sub {
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  }
  .marquee-op {
    color: rgba(134, 50, 251, 0.75);
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 700;
    padding: 0 4px;
  }
  .marquee-divider {
    color: #8632FB;
    font-size: clamp(18px, 1.5vw, 22px);
    padding: 0 12px;
  }
  /* Anchor inside a marquee item — keeps the marquee typography but
     adds a subtle underline so the link is clickable. The marquee
     pauses on hover (.prize-marquee:hover rule above), giving users
     time to click. */
  .marquee-sub a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
  }
  .marquee-sub a:hover {
    color: #FFFFFF;
    text-decoration-color: #FFFFFF;
  }
  .marquee-sub a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* === ACTION MARQUEE — section break between Shipping and Idea+Action.
     Deep purple gradient — slightly lighter than the Shipping section's
     bottom (#1A1530) so the band reads as a distinct moment. */
  .action-marquee {
    height: 64px;
    background: linear-gradient(90deg,
      #300073 0%,
      #420695 50%,
      #300073 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    cursor: default;
  }
  /* Faint diagonal stripe overlay — ticker-tape texture without noise */
  .action-marquee::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 12px);
    pointer-events: none;
    z-index: 0;
  }
  .action-marquee__track {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    height: 100%;
    width: max-content;
    animation: action-marquee 28s linear infinite;
    will-change: transform;
    position: relative;
    z-index: 1;
    padding: 0 16px;
    font-family: var(--font-roboto);
  }
  .action-marquee:hover .action-marquee__track {
    animation-play-state: paused;
  }
  /* Scroll right-to-left (visible text moves leftward) */
  @keyframes action-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .action-marquee__item {
    font-family: var(--font-roboto);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .action-marquee__item--primary {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  }
  .action-marquee__sep {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 600;
  }
  @media (max-width: 767px) {
    .action-marquee { height: 56px; }
    .action-marquee__track {
      gap: 24px;
      animation-duration: 22s;
    }
    .action-marquee__item { font-size: 13px; }
    .action-marquee__item--primary { font-size: 15px; }
    .action-marquee__sep { font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .action-marquee__track {
      animation: none;
      width: 100%;
      justify-content: center;
    }
  }

  /* === PRIZE SCOREBOARD === */
  .prize-scoreboard {
    /* CSS gradient kept as graceful fallback when WebGL2 isn't supported. */
    background:
      radial-gradient(ellipse 70% 90% at 55% 70%, #1A0E3D 0%, #050214 78%),
      #050214;
    padding: clamp(28px, 4vh, 44px) clamp(24px, 4vw, 80px) 0;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    /* CRITICAL: establish a local stacking context so the negative
       z-index canvas paints AFTER this section's CSS background. Without
       this, position:relative alone doesn't create a stacking context,
       so the canvas at z-index:-1 escapes to the body context and gets
       painted BEFORE (i.e., behind) this section's bg gradient — making
       all WebGL output invisible. */
    isolation: isolate;
  }
  /* WebGL2 starfield canvas — sits behind in-flow content (planet image)
     but in front of the section's CSS gradient fallback. z-index:-1 puts
     it in painting step 2, before in-flow planet (step 3). */
  .prize-scoreboard__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: -1;
  }
  .prize-scoreboard__container {
    position: relative;
    max-width: 1500px; /* widened from 1200px so 5-card row has room to breathe */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vh, 24px);
  }
  .prize-scoreboard__header { text-align: center; margin: 0; }
  .prize-scoreboard__label {
    font-family: var(--font-sofia-sans-condensed);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: var(--fw-point-bold);
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: var(--ls-point-heading);
    line-height: var(--lh-point-s);
    margin: 0;
    text-shadow: 0 0 18px rgba(163, 97, 255, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .prize-scoreboard__label-line {
    display: block;
  }
  .prize-scoreboard__label-sub {
    display: block;
    font-size: clamp(13px, 1.4vw, 18px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(253, 216, 53, 0.88);
    text-shadow: 0 0 12px rgba(253, 216, 53, 0.35);
  }
  .prize-scoreboard__total {
    font-family: var(--font-sofia-sans-condensed);
    font-size: clamp(80px, 12vw, 180px);
    font-weight: 900;
    line-height: 1;
    color: #FDD835;
    text-shadow:
      0 0 20px rgba(253, 216, 53, 0.6),
      0 0 60px rgba(253, 216, 53, 0.3);
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .prize-scoreboard__total .currency { font-size: 60%; }
  .prize-scoreboard__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 categories on desktop */
    gap: 16px; /* tightened from 24px to fit 5 cards comfortably */
    width: 100%;
  }
  .prize-card {
    position: relative;
    padding: 36px 16px; /* increased vertical padding to balance the simplified content (no title/criteria) */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
  }
  .prize-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
  }
  .prize-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(253, 216, 53, 0.15);
  }
  /* 5-card color band — each category gets a distinct top accent. */
  .prize-card--time::before     { background: #FDD835; } /* gold — premium engagement tier */
  .prize-card--camp::before     { background: #8632FB; } /* MSU purple — creative remix tier */
  .prize-card--summon::before   { background: #EC4899; } /* pink — viral/social tier */
  .prize-card--traffic::before  { background: #11CDF2; } /* cyan — volume tier */
  .prize-card--campers::before  { background: #5EEAD4; } /* teal — community-wide tier */

  /* Selection policy line — sits below dots, above timeline. Small,
     low-emphasis so it reads as fine print, not a headline. */
  /* Prize Pool hook catchphrase — sits ABOVE "Total Prize Pool $60,000",
     carries the campaign voice. Two-line composition where line 2 lands
     with a heavier kinetic hit ("We bet on your hype"). */
  .prize-scoreboard__hook {
    text-align: center;
    margin: 0 auto 32px;
    max-width: min(960px, 92vw);
  }
  .prize-scoreboard__hook-line {
    font-family: var(--font-sofia-sans-condensed);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    /* Allow wrap — sub line is now four short phrases ("Three weeks.
       Vibe coding. Official IP. Make a game that hits.") and won't
       always fit a single line. */
    text-wrap: balance;
  }
  /* Two-tier hierarchy — Main (top) clearly dominates, Sub (bottom)
     reads as supporting copy underneath. Sub is roughly half the Main
     size so the two lines no longer compete. */
  .prize-scoreboard__hook-line--top {
    font-size: clamp(30px, 4.8vw, 60px);
    line-height: 1.1;
  }
  .prize-scoreboard__hook-line--bottom {
    font-size: clamp(16px, 2.2vw, 28px);
    line-height: 1.25;
  }
  /* Line 1 — set the scene. Bright white with a soft yellow halo.
     Italic + skewX removed (double-tilt made the line read awkward). */
  .prize-scoreboard__hook-line--top {
    color: #FFFFFF;
    text-shadow:
      0 0 24px rgba(253, 216, 53, 0.22),
      0 2px 6px rgba(0, 0, 0, 0.55);
  }
  /* Line 2 — payoff. Same size, heavier weight, gradient + neon glow. */
  .prize-scoreboard__hook-line--bottom {
    margin-top: 10px;
    font-weight: 900;
    letter-spacing: -0.015em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.32em;
    /* prevent drop-shadow/skew from being clipped by ancestor stacking */
    overflow: visible;
  }
  .prize-scoreboard__hook-bet {
    color: #FFFFFF;
    opacity: 0.92;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  /* "your hype" — gradient + glow + subtle pulse to feel like neon.
     Padding-right + inline-block + overflow:visible fix the trailing "e"
     getting clipped when the skewX pushes the glyph past its box. */
  .prize-scoreboard__hook-hype {
    display: inline-block;
    background: linear-gradient(
      92deg,
      #FDD835 0%,
      #FF8A65 38%,
      #EC4899 72%,
      #A361FF 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    filter:
      drop-shadow(0 0 14px rgba(253, 216, 53, 0.55))
      drop-shadow(0 0 28px rgba(236, 72, 153, 0.35));
    animation: hype-pulse 2.6s ease-in-out infinite;
    font-style: italic;
    transform: skewX(-4deg);
    transform-origin: left center;
    padding-right: 0.22em;   /* breathing room so skewed "e" isn't clipped */
    overflow: visible;
  }
  @keyframes hype-pulse {
    0%, 100% {
      filter:
        drop-shadow(0 0 14px rgba(253, 216, 53, 0.55))
        drop-shadow(0 0 28px rgba(236, 72, 153, 0.30));
    }
    50% {
      filter:
        drop-shadow(0 0 22px rgba(253, 216, 53, 0.85))
        drop-shadow(0 0 40px rgba(236, 72, 153, 0.55));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .prize-scoreboard__hook-hype { animation: none; }
  }
  /* Mobile — keep both lines on a single line each, just scale the
     shared font-size down. Line 2 still wraps if absolutely needed. */
  @media (max-width: 600px) {
    .prize-scoreboard__hook-line--top,
    .prize-scoreboard__hook-line--bottom {
      font-size: clamp(22px, 7vw, 36px);
    }
    .prize-scoreboard__hook-line--bottom {
      flex-wrap: wrap;
      gap: 0.18em 0.32em;
    }
  }
  /* Emphasized "Check MSU and Verse8 on X" CTA — promoted from fine print
     to a pill-shaped link that reads as the next step after the prize total. */
  .prize-policy {
    text-align: center;
    font-family: var(--font-roboto);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.01em;
    margin: 12px 0 0;
  }
  .prize-policy--cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 28px auto 0;
    padding: 12px 22px 12px 24px;
    border-radius: 999px;
    background: rgba(253, 216, 53, 0.10);
    border: 1px solid rgba(253, 216, 53, 0.55);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(253, 216, 53, 0.15);
  }
  .prize-policy--cta .prize-policy__text strong {
    color: #FDD835;
    font-weight: 800;
  }
  .prize-policy--cta:hover,
  .prize-policy--cta:focus-visible {
    background: rgba(253, 216, 53, 0.20);
    border-color: #FDD835;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(253, 216, 53, 0.30);
    outline: none;
  }
  .prize-policy--cta .prize-policy__arrow {
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .prize-policy--cta:hover .prize-policy__arrow {
    transform: translateX(3px);
  }
  /* Layout wrapper to center the pill-shaped CTA (since it's now an
     inline-flex anchor, not a block-level <p>) */
  .prize-scoreboard__container > .prize-policy--cta {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 767px) {
    .prize-policy--cta {
      font-size: 13px;
      padding: 10px 18px;
      gap: 8px;
    }
    .prize-scoreboard__hook-line {
      font-size: clamp(22px, 6vw, 32px);
    }
  }
  .prize-card__amount {
    font-family: var(--font-sofia-sans-condensed);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 900;
    color: #FDD835;
    text-shadow: 0 0 16px rgba(253, 216, 53, 0.5);
    line-height: 1;
  }
  /* Rank + multiplier line — single label below the amount.
     Replaces the previous multiplier / name / line1 / line2 stack. */
  .prize-card__rank {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 12px;
    font-family: var(--font-roboto);
    letter-spacing: 0.01em;
  }

  /* Mobile/tablet: horizontal scroll-snap carousel of cards */
  @media (max-width: 1023px) {
    .prize-scoreboard__cards {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 12vw;
      gap: 16px;
      padding: 4px 12vw 16px;
      max-width: none;
      margin: 0;
      /* Hide native scrollbar but keep scroll functionality */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .prize-scoreboard__cards::-webkit-scrollbar {
      display: none;
    }
    .prize-card {
      flex: 0 0 76vw;
      max-width: 360px;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }
  }

  /* Pagination dots — only visible on mobile/tablet */
  .prize-cards-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }
  .prize-cards-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
  }
  .prize-cards-dots__dot:hover {
    background: rgba(255, 255, 255, 0.40);
  }
  .prize-cards-dots__dot--active {
    background: #FDD835;
    width: 24px;
    border-radius: 999px;
  }
  .prize-cards-dots__dot:focus-visible {
    outline: 2px solid #FDD835;
    outline-offset: 3px;
  }
  @media (max-width: 1023px) {
    .prize-cards-dots { display: flex; }
  }
  @media (prefers-reduced-motion: reduce) {
    .prize-cards-dots__dot { transition: none; }
  }

  /* Compact horizontal timeline replacing the old single-line announce */
  .prize-timeline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 28px);
    margin: clamp(32px, 5vh, 48px) auto 0;
    padding: 18px clamp(24px, 3vw, 36px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .prize-timeline__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 160px;
    text-align: center;
  }
  .prize-timeline__dates {
    font-family: var(--font-sofia-sans-condensed);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 800;
    color: #FDD835;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(253, 216, 53, 0.40);
    line-height: 1;
  }
  .prize-timeline__label {
    font-family: var(--font-roboto);
    font-size: clamp(11px, 0.95vw, 13px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .prize-timeline__connector {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  /* 4-node color variants */
  .prize-timeline__node--prejam .prize-timeline__dates {
    color: #11CDF2;
    text-shadow: 0 0 12px rgba(17, 205, 242, 0.40);
  }
  .prize-timeline__node--sprint .prize-timeline__dates {
    color: #FDD835;
    text-shadow:
      0 0 16px rgba(253, 216, 53, 0.55),
      0 0 32px rgba(253, 216, 53, 0.25);
    font-size: clamp(17px, 1.45vw, 20px);
  }
  .prize-timeline__node--sprint .prize-timeline__label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
  }
  .prize-timeline__node--judging .prize-timeline__dates {
    color: #A361FF;
    text-shadow: 0 0 12px rgba(163, 97, 255, 0.40);
  }
  /* Anti-Abuse Review — warm violet/magenta, visually between purple
     (judging) and pink (reveal) */
  .prize-timeline__node--abuse .prize-timeline__dates {
    color: #C547E8;
    text-shadow: 0 0 12px rgba(197, 71, 232, 0.45);
  }
  /* Winners node — pink celebratory tone */
  .prize-timeline__node--reveal .prize-timeline__dates {
    color: #EC3BD1;
    text-shadow: 0 0 14px rgba(236, 59, 209, 0.55);
  }
  .prize-timeline__node--reveal .prize-timeline__label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
  }
  @media (max-width: 1023px) {
    .prize-timeline {
      gap: 10px;
      padding: 14px 20px;
    }
    .prize-timeline__node { min-width: 110px; }
    .prize-timeline__dates { font-size: 13px; }
    .prize-timeline__node--sprint .prize-timeline__dates { font-size: 14px; }
    .prize-timeline__label { font-size: 10px; }
  }
  /* Mid viewports (< ~900px container) — fall back to 2x2 grid of
     phases. Arrows hidden in this layout because they wouldn't read
     cleanly between rows. */
  @media (max-width: 899px) {
    .prize-timeline {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px 24px;
      max-width: 560px;
      padding: 18px 24px;
      border-radius: 24px;
    }
    .prize-timeline__connector { display: none; }
    .prize-timeline__node { min-width: 0; }
  }
  @media (max-width: 479px) {
    .prize-timeline {
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: none;
    }
  }

  /* Planet illustration anchoring section bottom — cropped to top half.
     Mask fades the lower 30% gradually into transparency so the planet
     dissolves atmospherically into the next section's dark background.
     No separate transition band — the mask alone bridges the sections. */
  .prize-pool__planet {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 1;
    object-fit: cover;
    object-position: top;
    margin: clamp(28px, 4vh, 56px) 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  /* === SHIPPING TO MILLIONS — 5-pillar post-jam support === */
  .shipping {
    background: linear-gradient(180deg, #050214 0%, #0F0E22 25%, #14122B 60%, #1A1530 100%);
    color: #FFFFFF;
    padding: clamp(28px, 4.5vh, 56px) clamp(24px, 4vw, 80px) clamp(44px, 7vh, 80px);
    position: relative;
    overflow: hidden;
  }
  .shipping::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 18% 22%, rgba(163, 97, 255, 0.10) 0%, transparent 38%),
      radial-gradient(circle at 82% 70%, rgba(83, 109, 255, 0.08) 0%, transparent 42%),
      radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
    background-size: auto, auto, 28px 28px;
    pointer-events: none;
    opacity: 0.8;
  }
  .shipping__container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4.5vh, 48px);
  }
  .shipping__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .shipping__subhead {
    font-family: var(--font-roboto);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    line-height: 1.3;
    background: linear-gradient(135deg, #FDD835 0%, #8632FB 50%, #A361FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(134, 50, 251, 0.25));
  }
  .shipping__title {
    font-size: clamp(32px, 3.6vw, 56px);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .shipping__subtitle {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin: 10px auto 0;
    line-height: 1.5;
    text-align: center;
  }
  .shipping__subtitle .nexpace-mark {
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.01em;
  }

  /* Banner illustration — sits between header and pillars */
  .shipping__banner {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: clamp(4px, 0.8vh, 14px) auto clamp(4px, 0.8vh, 14px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .shipping__banner.is-visible {
    opacity: 1;
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .shipping__banner {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .shipping__pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  .pillar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: clamp(16px, 1.6vw, 22px);
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .pillar__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(134, 50, 251, 0.12);
    color: #8632FB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .pillar__name {
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .pillar__detail {
    font-size: clamp(14px, 1.1vw, 15px);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin: 0;
  }

  /* Publishing — emphasized */
  .pillar--featured {
    background: linear-gradient(135deg, rgba(134, 50, 251, 0.14), rgba(163, 97, 255, 0.10));
    border: 1px solid rgba(134, 50, 251, 0.45);
    box-shadow: 0 0 32px rgba(134, 50, 251, 0.18);
  }
  .pillar--featured .pillar__icon {
    background: rgba(253, 216, 53, 0.18);
    color: #FDD835;
  }
  .pillar__platforms {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .pillar__platforms span {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-roboto);
    letter-spacing: 0.03em;
  }

  /* Responsive */
  @media (max-width: 1439px) {
    .shipping__pillars { grid-template-columns: repeat(3, 1fr); }
    .pillar--featured { grid-column: 2; }
  }
  @media (max-width: 1023px) {
    .shipping__pillars { grid-template-columns: repeat(2, 1fr); }
    .pillar--featured { grid-column: 1 / span 2; }
  }
  @media (max-width: 767px) {
    .shipping__pillars { grid-template-columns: 1fr; }
    .pillar--featured { grid-column: 1; }
  }

  /* === IDEA + PERSISTENCE WANTED — light breather section === */
  .idea-action {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 60%, #F7F8F9 100%);
    color: #21272A;
    padding: clamp(28px, 4vh, 56px) clamp(24px, 4vw, 80px) clamp(48px, 7vh, 80px);
    position: relative;
  }
  .idea-action__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 56px);
  }
  .idea-action__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .idea-action__eyebrow {
    font-family: var(--font-roboto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8632FB;
    margin-bottom: 12px;
  }
  .idea-action__title {
    font-size: clamp(34px, 4vw, 60px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #21272A;
    letter-spacing: -0.02em;
  }
  .idea-action__subtitle {
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 500;
    color: rgba(33, 39, 42, 0.7);
    max-width: 1000px;
    margin: 0;
    line-height: 1.5;
  }

  .idea-action__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 32px);
  }
  .idea-pillar {
    background: #FFFFFF;
    border: 1px solid rgba(33, 39, 42, 0.08);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(33, 39, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .idea-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(33, 39, 42, 0.12);
  }
  .idea-pillar__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  .idea-pillar--pink .idea-pillar__icon  { background: rgba(134, 50, 251, 0.12); color: #8632FB; }
  .idea-pillar--cyan .idea-pillar__icon  { background: rgba(0, 184, 229, 0.12); color: #00B8E5; }
  .idea-pillar--green .idea-pillar__icon { background: rgba(52, 211, 153, 0.18); color: #10B981; }
  .idea-pillar__title {
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 700;
    color: #21272A;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .idea-pillar__body {
    font-size: clamp(15px, 1.2vw, 16px);
    font-weight: 400;
    color: rgba(33, 39, 42, 0.7);
    line-height: 1.6;
    margin: 0;
  }

  .idea-action__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 0;
  }
  .idea-action__call {
    font-size: clamp(24px, 2.4vw, 38px);
    font-weight: 800;
    color: #21272A;
    text-align: center;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .idea-action__call em {
    font-style: normal;
    color: #8632FB;
  }
  .idea-action__button-wrap {
    /* Override .button-group defaults (row-flex) with column-flex so
       the disabled CTA button and the "Opens June 8, 2026" subtext
       stack vertically and both center-align. Without flex-direction
       column the row layout pushed the subtext beside the button. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .idea-action__microcopy {
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 500;
    color: rgba(33, 39, 42, 0.55);
    text-align: center;
    margin: 0;
  }

  /* === GENRE HASHTAG STRIP === */
  .genre-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    max-width: 880px;
    margin: clamp(24px, 4vh, 36px) auto;
    padding: 0 clamp(16px, 2vw, 32px);
    list-style: none;
  }
  .genre-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-family: var(--font-roboto);
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: default;
    white-space: nowrap;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }
  .genre-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 5-color rotation */
  /* Genre tags — tuned for the dark animated background (brighter text,
     stronger backgrounds and borders so chips stay legible against motion) */
  .genre-tag--pink {
    color: #D8BCFF;
    border-color: rgba(216, 188, 255, 0.55);
    background: rgba(134, 50, 251, 0.20);
  }
  .genre-tag--pink:hover  { background: rgba(134, 50, 251, 0.30); }
  .genre-tag--cyan {
    color: #6EFFE8;
    border-color: rgba(110, 255, 232, 0.55);
    background: rgba(67, 255, 226, 0.15);
  }
  .genre-tag--cyan:hover  { background: rgba(67, 255, 226, 0.22); }
  .genre-tag--purple {
    color: #BD8FFF;
    border-color: rgba(189, 143, 255, 0.55);
    background: rgba(86, 17, 183, 0.22);
  }
  .genre-tag--purple:hover { background: rgba(86, 17, 183, 0.32); }
  .genre-tag--green {
    color: #6EE7B7;
    border-color: rgba(110, 231, 183, 0.55);
    background: rgba(16, 185, 129, 0.18);
  }
  .genre-tag--green:hover { background: rgba(16, 185, 129, 0.26); }
  .genre-tag--yellow {
    color: #FFEB3B;
    border-color: rgba(253, 216, 53, 0.65);
    background: rgba(253, 216, 53, 0.18);
  }
  .genre-tag--yellow:hover { background: rgba(253, 216, 53, 0.28); }

  /* Closer chip: dashed border + italic signals "this list isn't exhaustive" */
  .genre-tag--more {
    color: rgba(255, 255, 255, 0.75);
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    background: transparent;
    font-style: italic;
  }
  .genre-tag--more:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.6);
  }

  /* Highlight variant — used for the genre featured by the comparison slider */
  .genre-tag--highlight {
    color: #FFFFFF;
    background: linear-gradient(135deg, #8632FB 0%, #6D20D9 100%);
    border: 1.5px solid transparent;
    font-weight: 700;
    box-shadow:
      0 4px 16px rgba(134, 50, 251, 0.35),
      0 0 0 3px rgba(134, 50, 251, 0.12);
    transform: scale(1.05);
    position: relative;
    animation: genre-tag-highlight-pulse 2.4s ease-in-out infinite;
  }
  .genre-tag--highlight:hover {
    background: linear-gradient(135deg, #8632FB 0%, #6D20D9 100%);
  }
  @keyframes genre-tag-highlight-pulse {
    0%, 100% {
      box-shadow: 0 4px 16px rgba(134, 50, 251, 0.35),
                  0 0 0 3px rgba(134, 50, 251, 0.12);
    }
    50% {
      box-shadow: 0 6px 24px rgba(134, 50, 251, 0.50),
                  0 0 0 6px rgba(134, 50, 251, 0.08);
    }
  }

  @media (max-width: 1279px) {
    .genre-tags { gap: 10px; }
  }
  @media (max-width: 767px) {
    .genre-tag {
      font-size: 12px;
      padding: 6px 12px;
    }
    .genre-tags { gap: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .genre-tag { transition: none; }
    .genre-tag:hover { transform: none; }
    .genre-tag--highlight { animation: none; }
  }

  /* === IP COMPARE SUB-SECTION (subtitle + lead + slider) === */
  /* === IP COMPARE SECTION — WebGL liquid mesh background, left dungeon → right mystical ===
     CSS gradient stays as graceful fallback for prefers-reduced-motion
     and devices without WebGL support. */
  .ip-compare-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(90deg,
      #1A0B2E 0%,
      #3D1F5C 35%,
      #5D2E8C 65%,
      #9B3FBF 100%);
    padding: clamp(56px, 9vh, 100px) clamp(24px, 4vw, 80px);
    color: #FFFFFF;
  }
  .ip-compare-section__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
  }
  .ip-compare-section__content {
    position: relative;
    z-index: 1;
  }
  .ip-compare__inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .ip-compare {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2vw, 32px);
    text-align: center;
  }
  .ip-compare__eyebrow {
    display: inline-block;
    font-family: var(--font-roboto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #EC3BD1;
    background: rgba(236, 59, 209, 0.18);
    border: 1px solid rgba(236, 59, 209, 0.4);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
  }
  @media (prefers-reduced-motion: reduce) {
    .ip-compare-section__bg { display: none; }
  }
  .ip-compare__subtitle {
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 800;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-width: 880px;
    margin: 0 auto 16px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }
  .ip-compare__subtitle .accent {
    background: linear-gradient(135deg, #EC3BD1 0%, #A361FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
  }
  .ip-compare__lead {
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto clamp(32px, 5vh, 48px);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  }
  .ip-compare__tags {
    margin-top: 0;
    margin-bottom: clamp(40px, 6vh, 64px);
  }

  /* === BEFORE/AFTER COMPARISON SLIDER === */
  .compare-slider {
    margin-top: clamp(40px, 6vh, 64px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  .compare-slider__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1672 / 941;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 20px 60px rgba(33, 39, 42, 0.18),
      0 8px 24px rgba(33, 39, 42, 0.10);
    background: #121619;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
    touch-action: pan-y;
  }
  .compare-slider__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .compare-slider__top {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* clip-path inset is updated by JS — default 50/50 split */
    clip-path: inset(0 50% 0 0);
    pointer-events: none;
  }
  .compare-slider__top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .compare-slider__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #FFFFFF;
    transform: translateX(-50%);
    box-shadow:
      0 0 12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(0, 0, 0, 0.10);
    z-index: 2;
    cursor: ew-resize;
    outline: none;
  }
  .compare-slider__divider:focus-visible {
    box-shadow:
      0 0 0 3px rgba(134, 50, 251, 0.50),
      0 0 12px rgba(0, 0, 0, 0.4);
  }
  .compare-slider__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8632FB, #6D20D9);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 8px 24px rgba(134, 50, 251, 0.50),
      0 0 0 4px rgba(255, 255, 255, 0.90),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
    cursor: grab;
    z-index: 3;
    transition: transform 0.12s ease;
  }
  .compare-slider__divider.is-dragging .compare-slider__handle,
  .compare-slider__divider:active .compare-slider__handle {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.08);
  }
  /* Corner labels — left = neutral (no IP), right = pink (with IP) */
  .compare-slider__label {
    position: absolute;
    top: 16px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-roboto);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    white-space: nowrap;
  }
  .compare-slider__label--left {
    left: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }
  .compare-slider__label--right {
    right: 16px;
    background: rgba(134, 50, 251, 0.85);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.30);
  }
  @media (max-width: 767px) {
    .ip-compare__subtitle { font-size: clamp(22px, 6vw, 28px); }
    .compare-slider__handle { width: 44px; height: 44px; }
    .compare-slider__label { font-size: 10px; padding: 4px 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .compare-slider__handle { transition: none; }
  }

  /* 2-column demo area (recruiter + CLI) */
  .idea-action__demo-area {
    display: grid;
    grid-template-columns: 38fr 62fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  /* CLI window narrows from 880 → 720 to fit the right column */
  .idea-action__demo-area .cli-demo {
    max-width: 720px;
    margin: 0;
  }

  /* Reveal animation — recruiter starts hidden "behind" the CLI window,
     which itself sits shifted left toward the section center.
     - .is-revealing kicks off a slow 5s transition at the PHASE 2 line,
       so the cat creeps out from behind the CLI like it's been waiting
       for you the whole time. Pure deadpan comedy timing.
     - .is-revealed (added at "It's your turn") locks in the end state
       with transition: none, so re-entry / CLI restart doesn't replay
       the slow creep — the cat stays put. */
  .idea-action__demo-area .recruiter {
    opacity: 0;
    transform: translateX(80px);
    position: relative;
    z-index: 1;
  }
  .idea-action__demo-area .cli-demo {
    transform: translateX(-30%);
    z-index: 2;
  }
  .idea-action__demo-area.is-revealing .recruiter {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 5s cubic-bezier(0.33, 1, 0.68, 1),
      transform 5s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .idea-action__demo-area.is-revealing .cli-demo {
    transform: translateX(0);
    transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .idea-action__demo-area.is-revealed .recruiter,
  .idea-action__demo-area.is-revealed .cli-demo {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }
  /* Tablet/mobile fall back to vertical stack — show both immediately,
     directional reveal doesn't read well on stacked layouts. */
  @media (max-width: 1023px) {
    .idea-action__demo-area .recruiter,
    .idea-action__demo-area .cli-demo {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .idea-action__demo-area .recruiter,
    .idea-action__demo-area .cli-demo {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Recruiter column */
  .recruiter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .recruiter__character {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 16px 32px rgba(33, 39, 42, 0.18));
    animation: recruiter-breathe 4s ease-in-out infinite;
  }
  @keyframes recruiter-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.01); }
  }
  .recruiter__call {
    position: relative;
    text-align: center;
    padding: 8px 16px 12px;
    margin-top: 4px;
  }
  .recruiter__small {
    display: block;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 700;
    color: rgba(33, 39, 42, 0.5);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
  }
  .recruiter__big {
    display: block;
    font-size: clamp(64px, 8vw, 120px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #FDD835 0%, #8632FB 50%, #A361FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(134, 50, 251, 0.32));
    transform: rotate(-2deg);
  }
  .recruiter__line {
    display: block;
    font-size: clamp(17px, 1.4vw, 22px);
    font-weight: 700;
    color: #21272A;
    margin-top: 10px;
    line-height: 1.3;
  }
  .recruiter__line u {
    text-decoration-color: #8632FB;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    color: #8632FB;
  }
  /* Decorative star sparkles around "YOU." */
  .recruiter__sparkle {
    position: absolute;
    font-size: 22px;
    color: #FDD835;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 2px 6px rgba(134, 50, 251, 0.25);
  }
  .recruiter__sparkle--tl { top:  4px;  left: 8%;  transform: rotate(-12deg); color: #8632FB; font-size: 18px; }
  .recruiter__sparkle--tr { top:  18%;  right: 6%; transform: rotate(14deg);  color: #FDD835; font-size: 24px; }
  .recruiter__sparkle--br { bottom: 38%; right: 12%; transform: rotate(-8deg); color: #A361FF; font-size: 16px; opacity: 0.55; }

  @media (prefers-reduced-motion: reduce) {
    .recruiter__character { animation: none; }
  }

  @media (max-width: 1023px) {
    .idea-action__pillars { grid-template-columns: 1fr; gap: 16px; max-width: 540px; margin: 0 auto; }
    .idea-action__demo-area {
      grid-template-columns: 1fr;
      gap: clamp(28px, 4vh, 48px);
    }
    .recruiter__character { max-width: 240px; }
    .recruiter__big       { font-size: clamp(48px, 14vw, 80px); }
    .idea-action__demo-area .cli-demo { max-width: 100%; margin: 0 auto; }
  }

  /* === CLI DEMO WINDOW — replaces 3 pillar cards === */
  .cli-demo {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    background: #121619;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.25),
      0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    outline: none;
  }
  .cli-demo:focus-visible {
    box-shadow:
      0 0 0 3px rgba(134, 50, 251, 0.4),
      0 24px 60px rgba(0, 0, 0, 0.25),
      0 8px 20px rgba(0, 0, 0, 0.15);
  }
  .cli-demo__chrome {
    background: #1A1A2E;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .cli-demo__traffic-lights { display: flex; gap: 8px; }
  .cli-demo__traffic-lights .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
  }
  .cli-demo__traffic-lights .dot--red    { background: #FF5F57; }
  .cli-demo__traffic-lights .dot--yellow { background: #FEBC2E; }
  .cli-demo__traffic-lights .dot--green  { background: #28C840; }
  .cli-demo__title {
    flex: 1;
    text-align: center;
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    /* offset for traffic lights width so title stays optically centered */
    margin-right: 60px;
  }
  .cli-demo__screen {
    background: #121619;
    padding: 20px 24px;
    min-height: 440px;
    max-height: 540px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    font-family: var(--font-roboto-mono);
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
  }
  /* Webkit (Chrome/Edge/Safari): subtle scrollbar — track always reserved
     but invisible, thumb fades in only when content overflows. */
  .cli-demo__screen::-webkit-scrollbar { width: 8px; }
  .cli-demo__screen::-webkit-scrollbar-track { background: transparent; }
  .cli-demo__screen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
  }
  .cli-demo__screen::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.26);
  }
  .cli-demo__output {
    white-space: pre;
    /* CRITICAL: overflow-x: auto implicitly converts overflow-y from
       visible to auto (CSS spec). That phantom inner vertical scrollbar
       flickers in/out as each line is appended, pushing content sideways.
       Explicitly setting overflow-y: hidden suppresses it — vertical
       scrolling already happens at the screen level. */
    overflow-x: auto;
    overflow-y: hidden;
    /* Right padding creates the visible buffer between the bubble's
       right edge and the screen's scrollbar gutter. */
    padding-right: 20px;
  }
  /* per-line semantics */
  .cli-line {
    display: block;
    opacity: 0;
    animation: cli-line-fade 0.32s ease-out forwards;
  }
  .cli-line.is-instant {
    opacity: 1;
    animation: none;
  }
  @keyframes cli-line-fade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cli-prompt   { color: #8632FB; font-weight: 700; }
  .cli-check    { color: #34D399; font-weight: 700; }
  .cli-spinner  { color: #FDD835; font-weight: 700; display: inline-block; }
  .cli-spinner.is-spinning { animation: cli-spin 0.9s linear infinite; }
  @keyframes cli-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .cli-bar-filled { color: #11CDF2; }
  .cli-bar-empty  { color: rgba(255, 255, 255, 0.2); }
  .cli-phase {
    color: #8632FB;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .cli-rule { color: rgba(255, 255, 255, 0.25); }
  .cli-key  { color: #FDD835; font-weight: 700; }
  .cli-class-name { color: rgba(255, 255, 255, 0.95); }
  .cli-tree { color: rgba(255, 255, 255, 0.4); }
  .cli-dots { color: rgba(255, 255, 255, 0.35); }
  .cli-ready {
    font-weight: 700;
    background: linear-gradient(90deg, #8632FB 0%, #FDD835 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(253, 216, 53, 0.35));
  }
  .cli-cursor {
    display: inline-block;
    width: 0.6em;
    background: rgba(255, 255, 255, 0.85);
    animation: cli-blink 1s steps(2, end) infinite;
    margin-left: 2px;
    /* match line height so the block aligns with text */
    height: 1em;
    vertical-align: text-bottom;
  }
  /* Chat-style user message (right-aligned bubble). The screen's right
     padding already creates the buffer zone, so this line just right-aligns
     within the inner area. */
  .cli-line--user {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0;
  }
  .cli-bubble {
    display: inline-block;
    background: rgba(134, 50, 251, 0.18);
    border: 1px solid rgba(134, 50, 251, 0.42);
    color: rgba(255, 255, 255, 0.96);
    padding: 6px 14px;
    border-radius: 12px 12px 3px 12px;
    max-width: 70%;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(134, 50, 251, 0.18);
    white-space: normal;
    word-break: break-word;
    text-align: left;
  }
  .cli-bubble .cli-cursor {
    background: rgba(255, 255, 255, 0.95);
  }
  /* Closing call-to-action line */
  .cli-call {
    color: #8632FB;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  @keyframes cli-blink {
    50% { opacity: 0; }
  }
  .cli-typing-dots::after {
    content: '';
    display: inline-block;
    animation: cli-typing-dots 1s steps(4, end) infinite;
  }
  @keyframes cli-typing-dots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%  { content: '...'; }
    100% { content: '';    }
  }
  .cli-demo__hint {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-family: var(--font-roboto-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .cli-demo.is-paused .cli-demo__hint {
    opacity: 1;
  }

  @media (max-width: 767px) {
    .cli-demo__screen {
      padding: 16px 14px;
      font-size: 11px;
      min-height: 460px;
      max-height: 560px;
    }
    .cli-demo__output { padding-right: 10px; }
    .cli-demo__title { font-size: 11px; margin-right: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cli-line { opacity: 1; animation: none; }
    .cli-spinner.is-spinning { animation: none; }
    .cli-cursor { animation: none; opacity: 1; }
    .cli-typing-dots::after { animation: none; content: '...'; }
  }

  /* Anchor scroll offset for the sticky nav.top — keeps section
     headings (and marquee anchors) from being hidden under the GNB
     on smooth-scroll. */
  #prize-pool,
  #shipping-to-millions,
  #idea-action,
  #ip-compare,
  #faq,
  #prize-marquee,
  #action-marquee {
    scroll-margin-top: 80px;
  }
  /* Scroll-snap targets — every distinct section gets a gentle magnet
     so each "moment" reads as its own stop. Combined with
     scroll-behavior: smooth and proximity mode, the pull is a glide
     rather than a click. Marquees double as snap anchors for the
     sections that follow them (prize-marquee leads into Total Prize
     Pool, action-marquee leads into Idea + Action) so they cover
     those views; shipping, ip-compare, and FAQ get their own snap. */
  #prize-marquee,
  #shipping-to-millions,
  #action-marquee,
  #ip-compare,
  #faq {
    scroll-snap-align: start;
  }

  /* === STICKY RIGHT-SIDE NAVIGATION PANEL — TOC + CTA buttons.
     Hidden while hero is in view, fades in after. On mobile collapses
     to a bottom bar with only the two CTAs (the TOC is desktop-only). */
  .sticky-panel {
    position: fixed;
    right: clamp(16px, 2vw, 32px);
    top: 50%;
    z-index: 100;
    width: 110px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(33, 39, 42, 0.08);
    border-radius: 12px;
    box-shadow:
      0 8px 24px rgba(33, 39, 42, 0.12),
      0 3px 8px rgba(33, 39, 42, 0.06);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(-50%) translateX(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: var(--font-roboto);
  }
  .sticky-panel.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
  }
  .sticky-panel__header {
    padding: 2px 3px 5px;
    border-bottom: 1px solid rgba(33, 39, 42, 0.06);
    margin-bottom: 2px;
  }
  .sticky-panel__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(33, 39, 42, 0.5);
  }
  .sticky-panel__nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .sticky-panel__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    color: var(--text-icon-primary);
  }
  .sticky-panel__link:hover {
    background: rgba(134, 50, 251, 0.06);
  }
  .sticky-panel__link:focus-visible {
    outline: 2px solid #8632FB;
    outline-offset: 2px;
  }
  .sticky-panel__num {
    font-family: var(--font-roboto-mono);
    font-size: 9px;
    font-weight: 700;
    color: rgba(33, 39, 42, 0.35);
    min-width: 14px;
    transition: color 0.15s ease;
  }
  .sticky-panel__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-icon-primary);
    flex: 1;
    transition: color 0.15s ease;
  }
  .sticky-panel__link:hover .sticky-panel__num {
    color: #8632FB;
  }
  .sticky-panel__link--active {
    background: linear-gradient(135deg,
      rgba(134, 50, 251, 0.12),
      rgba(163, 97, 255, 0.08));
  }
  .sticky-panel__link--active .sticky-panel__num,
  .sticky-panel__link--active .sticky-panel__name {
    color: #8632FB;
  }
  .sticky-panel__link--active .sticky-panel__name {
    font-weight: 700;
  }
  .sticky-panel__divider {
    height: 1px;
    background: rgba(33, 39, 42, 0.08);
    margin: 4px 0;
  }
  .sticky-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .sticky-panel__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    font-family: var(--font-roboto);
    white-space: nowrap;
  }
  .sticky-panel__cta--primary {
    background: linear-gradient(135deg, #8632FB, #6D20D9);
    color: #FFFFFF;
    box-shadow:
      0 4px 16px rgba(134, 50, 251, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .sticky-panel__cta--primary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 24px rgba(134, 50, 251, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  .sticky-panel__cta--primary .live-pulse {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FA4D56;
    box-shadow: 0 0 6px rgba(250, 77, 86, 0.8);
    animation: live-dot-blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
  }
  .sticky-panel__cta--secondary {
    background: #FFFFFF;
    color: var(--text-icon-primary);
    border: 1px solid rgba(33, 39, 42, 0.12);
    box-shadow: 0 2px 8px rgba(33, 39, 42, 0.06);
  }
  /* Pre-launch waiting state — mirrors the hero / idea-action pattern.
     Applied with --primary base; specificity-stacked so the muted purple
     overrides the active gradient. JS strips this modifier at the June 8
     target, leaving the bright primary CTA. */
  .sticky-panel__cta.sticky-panel__cta--primary.sticky-panel__cta--waiting {
    background: rgba(123, 79, 255, 0.35);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(15, 20, 50, 0.20);
    cursor: not-allowed;
    animation: btn-build-waiting 3s ease-in-out infinite;
  }
  .sticky-panel__cta.sticky-panel__cta--primary.sticky-panel__cta--waiting:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(15, 20, 50, 0.20);
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-panel__cta.sticky-panel__cta--primary.sticky-panel__cta--waiting { animation: none; }
  }
  .sticky-panel__cta--secondary:hover {
    border-color: rgba(33, 39, 42, 0.25);
    background: rgba(33, 39, 42, 0.02);
  }
  .sticky-panel__cta:focus-visible {
    outline: 2px solid #8632FB;
    outline-offset: 2px;
  }

  /* Tablet: slightly narrower panel */
  @media (max-width: 1279px) {
    .sticky-panel { width: 96px; right: 12px; }
    .sticky-panel__name { font-size: 10px; }
  }
  /* Mobile: collapse to bottom bar, CTAs only (TOC hidden) */
  @media (max-width: 767px) {
    .sticky-panel {
      top: auto;
      bottom: 16px;
      right: 16px;
      left: 16px;
      width: auto;
      transform: translateY(40px);
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border-radius: 14px;
    }
    .sticky-panel.visible { transform: translateY(0); }
    .sticky-panel__header,
    .sticky-panel__nav,
    .sticky-panel__divider { display: none; }
    .sticky-panel__actions {
      flex-direction: row;
      gap: 8px;
      flex: 1;
    }
    /* Both CTAs share the bottom bar — Start Building (primary) gets
       a larger share (1.6) so it reads as the dominant action, with
       Share (secondary) filling the rest. Previously only --secondary
       had flex: 1, making Share take the full width while Build
       collapsed to its content size. */
    .sticky-panel__cta--primary { flex: 1.6; }
    .sticky-panel__cta--secondary { flex: 1; }
  }

  /* === FLOATING TOP BUTTON — bottom-right circular, 1s smooth scroll to top.
     Visibility mirrors the sticky panel: hidden while hero is in view. */
  .scroll-top {
    position: fixed;
    bottom: clamp(20px, 2.5vw, 32px);
    right: clamp(20px, 2.5vw, 36px);
    z-index: 99;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(33, 39, 42, 0.10);
    color: var(--text-icon-primary);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    box-shadow:
      0 8px 24px rgba(33, 39, 42, 0.14),
      0 2px 8px rgba(33, 39, 42, 0.06);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      background-color 0.15s ease,
      box-shadow 0.15s ease,
      border-color 0.15s ease;
    font-family: var(--font-roboto);
  }
  .scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .scroll-top:hover {
    background: #FFFFFF;
    border-color: rgba(33, 39, 42, 0.20);
    box-shadow:
      0 12px 32px rgba(33, 39, 42, 0.18),
      0 4px 12px rgba(33, 39, 42, 0.10);
    transform: translateY(-2px);
  }
  .scroll-top:focus-visible {
    outline: 2px solid #8632FB;
    outline-offset: 3px;
  }
  .scroll-top svg { display: block; }
  .scroll-top__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(33, 39, 42, 0.55);
    margin-top: 2px;
    line-height: 1;
  }
  /* Mobile: sit above the bottom-anchored sticky-panel bar */
  @media (max-width: 767px) {
    .scroll-top {
      bottom: 84px;
      right: 16px;
      width: 44px;
      height: 44px;
    }
    .scroll-top__label { display: none; }
    .scroll-top svg { width: 18px; height: 18px; }
  }

  /* === SHARE TOAST === */
  .share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(33, 39, 42, 0.95);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-family: var(--font-roboto);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  @media (max-width: 767px) {
    .share-toast { bottom: 96px; }
  }

  /* === SHARE MODAL — clipboard-copy confirmation dialog === */
  .share-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .share-modal[hidden] { display: none; }
  .share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 26, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: share-modal-backdrop-in 0.2s ease-out;
  }
  @keyframes share-modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .share-modal__card {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.35),
      0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    animation: share-modal-card-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes share-modal-card-pop {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .share-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(33, 39, 42, 0.08);
    color: rgba(33, 39, 42, 0.6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
  }
  .share-modal__close:hover {
    background: rgba(33, 39, 42, 0.06);
    color: #21272A;
  }
  .share-modal__visual {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg,
      rgba(163, 97, 255, 0.15),
      rgba(134, 50, 251, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .share-modal__visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .share-modal__content {
    padding: 28px 32px 32px;
    text-align: center;
    font-family: var(--font-roboto);
  }
  .share-modal__check {
    display: inline-flex;
    margin-bottom: 16px;
    animation: share-modal-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  }
  @keyframes share-modal-check {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
  }
  .share-modal__title {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 800;
    color: #21272A;
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .share-modal__message {
    font-size: clamp(14px, 1.2vw, 16px);
    color: rgba(33, 39, 42, 0.7);
    margin: 0 0 24px;
    line-height: 1.55;
  }
  .share-modal__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: linear-gradient(135deg, #8632FB, #6D20D9);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
      0 6px 20px rgba(134, 50, 251, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 120px;
  }
  .share-modal__confirm:hover {
    transform: translateY(-2px);
    box-shadow:
      0 10px 28px rgba(134, 50, 251, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  .share-modal__confirm:active { transform: translateY(0); }
  .share-modal__confirm:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
  }

  @media (max-width: 767px) {
    .share-modal { padding: 16px; }
    .share-modal__card { max-width: calc(100% - 32px); }
    .share-modal__visual { height: 180px; }
    .share-modal__content { padding: 24px 24px 28px; }
    .share-modal__title { font-size: 20px; }
  }
  @media (max-width: 359px) {
    .share-modal__confirm { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .share-modal__backdrop,
    .share-modal__card,
    .share-modal__check {
      animation: share-modal-backdrop-in 0.2s ease-out;
    }
    .share-modal__card { transform: none !important; }
    .share-modal__check { transform: none !important; }
  }