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

    :root {
      --mono: 'IBM Plex Mono', monospace;
      --sans: 'IBM Plex Sans', sans-serif;
      --display: 'Space Grotesk', sans-serif;
      --green: #2DD573;
      --red: #E5494D;
      --blue: #3B82F6;
      --yellow: #F2C94D;
      --purple: #6D28D9;
    }

    html { scroll-behavior: smooth; }

    body {
      background: #020202;
      color: #F8F8F8;
      font-family: var(--sans);
      font-size: 15.4px;
      min-height: 100vh;
      overflow-x: hidden;
    }
    body.hero-locked { overflow: hidden; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 56px;
      background: rgba(2,2,2,0.7); backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      transition: background 0.8s ease, border-color 0.8s ease, opacity 0.6s ease;
    }
    nav.nav-hidden { opacity: 0; pointer-events: none; }
    nav.nav-light {
      background: rgba(245,245,242,0.85);
      border-bottom-color: rgba(0,0,0,0.06);
    }
    .nav-wordmark {
      font-family: var(--display); font-size: 18px; font-weight: 700;
      color: #F8F8F8; text-decoration: none; letter-spacing: -0.02em;
      transition: color 0.8s ease;
      display: flex; align-items: center;
    }
    nav.nav-light .nav-wordmark { color: #020202; }
    .nav-logo { height: 22px; width: auto; display: block; }
    .nav-logo-light { display: none; }
    nav.nav-light .nav-logo-dark { display: none; }
    nav.nav-light .nav-logo-light { display: block; }
    .nav-tagline {
      font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(255,255,255,0.3);
      margin-left: 12px; transition: color 0.8s ease;
    }
    nav.nav-light .nav-tagline { color: rgba(0,0,0,0.3); }
    .nav-links-hp { display: flex; align-items: center; gap: 36px; list-style: none; }
    .nav-links-hp a {
      font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(255,255,255,0.35);
      text-decoration: none; transition: color 0.3s;
    }
    .nav-links-hp a:hover { color: #F8F8F8; }
    nav.nav-light .nav-links-hp a { color: rgba(0,0,0,0.35); }
    nav.nav-light .nav-links-hp a:hover { color: #020202; }

    /* Hamburger — hidden on desktop */
    .hamburger {
      display: none; background: none; border: none; cursor: pointer;
      width: 28px; height: 20px; position: relative; z-index: 210;
      flex-direction: column; justify-content: space-between;
    }
    .hamburger span {
      display: block; width: 100%; height: 2px; background: #F8F8F8;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    nav.nav-light .hamburger span { background: #020202; }
    .hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* Mobile menu — hidden on desktop */
    .mobile-menu {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(2,2,2,0.96); backdrop-filter: blur(20px);
      z-index: 199;
      flex-direction: column; align-items: center; justify-content: center; gap: 32px;
    }
    nav.nav-light ~ .mobile-menu,
    .mobile-menu.light-mode {
      background: rgba(245,245,242,0.96);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em;
      text-transform: uppercase; color: rgba(255,255,255,0.7);
      text-decoration: none; transition: color 0.3s;
    }
    .mobile-menu a:hover { color: #F8F8F8; }
    .mobile-menu.light-mode a { color: rgba(0,0,0,0.6); }
    .mobile-menu.light-mode a:hover { color: #020202; }

    /* ── HERO — SCROLL-LOCKED TAKEOVER ── */
    #hero {
      position: relative;
      height: 100vh; min-height: 700px;
      background: #020202;
      overflow: hidden;
    }
    #three-container {
      position: absolute; inset: 0; z-index: 0;
      transition: opacity 0.9s ease;
    }
    #three-container.faded { opacity: 0; }

    /* Phase A: Danger labels (appear after drop) */
    .ripple-labels {
      position: absolute; inset: 0; z-index: 5;
      pointer-events: none;
      transition: opacity 0.9s ease;
    }
    .ripple-labels.faded { opacity: 0; }
    .ripple-label {
      position: absolute;
      font-family: var(--mono); font-size: 11.4px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(109,40,217,0.7);
      opacity: 0; transition: opacity 1.1s ease;
      white-space: nowrap;
      cursor: default;
    }
    .ripple-label.show {
      opacity: 1;
      animation: labelColorShift 3.5s ease forwards;
    }
    @keyframes labelColorShift {
      0% { color: rgba(248,248,248,0.9); }
      30% { color: rgba(248,248,248,0.85); }
      100% { color: rgba(109,40,217,0.7); }
    }
    /* Radial positions — 7 labels around center, tightened to circle */
    .rl-1 { top: 16%; left: 50%; transform: translateX(-50%); }             /* 12 o'clock */
    .rl-2 { top: 24%; right: 20%; }                                         /* ~1:30 */
    .rl-3 { top: 50%; right: 12%; transform: translateY(-50%); }            /* 3 o'clock */
    .rl-4 { bottom: 24%; right: 20%; }                                      /* ~4:30 */
    .rl-5 { top: 24%; left: 18%; }                                          /* ~10:30 */
    .rl-6 { top: 50%; left: 10%; transform: translateY(-50%); }             /* 9 o'clock */
    .rl-7 { bottom: 24%; left: 16%; }                                       /* ~7:30 */
    .rl-center {
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      font-size: 12px; color: rgba(248,248,248,0.6);
      letter-spacing: 0.16em;
      text-align: center; line-height: 1.7;
    }
    .rl-center.show {
      animation: none;
      color: rgba(248,248,248,0.6);
    }

    /* Scroll hint during Phase A (after animation settles) */
    .phase-a-hint {
      position: absolute; bottom: 48px; left: 50%;
      transform: translateX(-50%); z-index: 6;
      display: flex; flex-direction: column; align-items: center; gap: 20px;
      opacity: 0; transition: opacity 0.8s ease;
      pointer-events: none;
    }
    .phase-a-hint.show { opacity: 1; }
    .phase-a-hint span {
      font-family: var(--mono); font-size: 8.5px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #888888;
    }
    .hint-arrow {
      width: 1px; height: 28px; background: #888888;
      animation: scrollPulse 2s ease-in-out infinite;
    }

    /* Phase B: Text reveal (over the same locked viewport) */
    .hero-text-layer {
      position: absolute; inset: 0; z-index: 10;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: 0 32px;
      opacity: 0; transition: opacity 1s ease;
      pointer-events: none;
    }
    .hero-text-layer.show {
      opacity: 1; pointer-events: auto;
    }
    .hero-headline {
      font-family: var(--display);
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 700; line-height: 1.08;
      letter-spacing: -0.035em;
      color: #F8F8F8;
      margin-bottom: 28px;
    }
    .hero-headline em {
      font-style: normal;
      color: #545454;
    }
    .hero-sub {
      font-family: var(--sans); font-size: 15.4px;
      line-height: 1.7; color: #C5C5C5;
      max-width: 540px; margin: 0 auto 48px;
    }
    .hero-sub strong { color: #F8F8F8; font-weight: 600; }
    .scroll-cue {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    .scroll-cue span {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #888888;
    }
    .scroll-cue-arrow {
      width: 1px; height: 32px; background: #888888;
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50% { opacity: 0.8; transform: scaleY(1.3); }
    }

    /* ── TRANSITION ZONE ── */
    .transition-zone {
      height: 200px;
      background: linear-gradient(to bottom, #020202, #0a0a0a);
      position: relative; z-index: 1;
    }

    /* ── BEAT 2: THE SHIFT LEFT ARGUMENT ── */
    #shift-left {
      position: relative; z-index: 1;
      padding: 120px 80px;
      background: #0a0a0a;
      transition: background 1.2s ease, color 1.2s ease;
    }
    #shift-left.transitioned { background: #F0F0EC; }
    .sl-preamble { max-width: 600px; margin-bottom: 80px; }
    .sl-tag {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #545454; margin-bottom: 20px;
      transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-tag { color: #888; }
    .sl-headline {
      font-family: var(--display);
      font-size: clamp(28px, 3.4vw, 50px);
      font-weight: 700; line-height: 1.08;
      letter-spacing: -0.03em;
      color: #F8F8F8; margin-bottom: 20px;
      transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-headline { color: #020202; }
    .sl-body {
      font-size: 15.4px; line-height: 1.75;
      color: #C5C5C5; max-width: 520px;
      transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-body { color: #3a3a3a; }
    .sl-stages {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; background: rgba(255,255,255,0.06);
      margin-bottom: 64px;
      transition: background 1.2s ease;
    }
    #shift-left.transitioned .sl-stages { background: rgba(0,0,0,0.08); }
    .sl-stage {
      padding: 40px 36px; background: #0a0a0a;
      transition: background 1.2s ease;
    }
    #shift-left.transitioned .sl-stage { background: #F0F0EC; }
    .sl-stage-tag {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-bottom: 16px; transition: color 1.2s ease;
    }
    .sl-stage-tag.tag-red { color: var(--red); }
    .sl-stage-tag.tag-yellow { color: var(--yellow); }
    .sl-stage-tag.tag-green { color: var(--green); }
    #shift-left.transitioned .sl-stage-tag.tag-red { color: #c0392b; }
    #shift-left.transitioned .sl-stage-tag.tag-yellow { color: #8a6800; }
    #shift-left.transitioned .sl-stage-tag.tag-green { color: #0a8c46; }
    .sl-stage-title {
      font-family: var(--display); font-size: 22px;
      font-weight: 700; letter-spacing: -0.02em;
      margin-bottom: 12px; color: #F8F8F8;
      transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-stage-title { color: #020202; }
    .sl-stage-body {
      font-size: 13.2px; line-height: 1.65;
      color: #888; transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-stage-body { color: #545454; }
    .sl-summary {
      font-family: var(--display);
      font-size: clamp(20px, 2.2vw, 32px);
      font-weight: 700; line-height: 1.2;
      letter-spacing: -0.02em;
      color: #F8F8F8; max-width: 640px;
      transition: color 1.2s ease;
    }
    #shift-left.transitioned .sl-summary { color: #020202; }
    .sl-summary em { font-style: normal; color: var(--green); }
    #shift-left.transitioned .sl-summary em { color: #0a8c46; }

    /* ── BEAT 3: THE PHILOSOPHY ── */
    #philosophy {
      padding: 120px 80px; background: #F5F5F2;
      position: relative; z-index: 1;
    }
    .phil-tag {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #888; margin-bottom: 64px;
    }
    .phil-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: start;
    }
    .phil-statements { display: flex; flex-direction: column; gap: 48px; }
    .phil-statement {
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .phil-statement.visible { opacity: 1; transform: translateY(0); }
    .phil-statement-text {
      font-family: var(--display);
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight: 700; line-height: 1.18;
      letter-spacing: -0.025em;
      color: #020202; margin-bottom: 12px;
    }
    .phil-statement-sub {
      font-size: 14px; line-height: 1.7;
      color: #545454; max-width: 440px;
    }
    .phil-right {
      display: flex; align-items: center; justify-content: center;
    }
    .phil-manifesto {
      font-family: var(--mono); font-size: 12px;
      line-height: 1.85; color: #888;
      border-left: 1px solid rgba(0,0,0,0.1);
      padding-left: 28px;
    }
    .phil-manifesto strong { color: #020202; font-weight: 700; }

    /* ── BEAT 4: THE ALIGNMENT CRESCENDO ── */
    #alignment {
      padding: 140px 80px; background: #020202;
      text-align: center; position: relative; z-index: 1;
    }
    .align-tag {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #545454; margin-bottom: 56px;
    }
    .align-headline {
      font-family: var(--display);
      font-size: clamp(30px, 4vw, 60px);
      font-weight: 700; line-height: 1.06;
      letter-spacing: -0.035em;
      color: #F8F8F8; max-width: 800px;
      margin: 0 auto 32px;
    }
    .align-headline em { font-style: normal; color: #545454; }
    .align-body {
      font-size: 16px; line-height: 1.75;
      color: #C5C5C5; max-width: 560px;
      margin: 0 auto 72px;
    }
    .align-divider {
      width: 1px; height: 64px;
      background: linear-gradient(to bottom, transparent, #545454, transparent);
      margin: 0 auto 72px;
    }

    /* ── BEAT 5: THE QUIET EXIT ── */
    #exit {
      padding: 80px 80px 96px; background: #020202;
      text-align: center;
      position: relative; z-index: 1;
      margin-top: -1px;
    }
    .exit-line {
      font-family: var(--sans); font-size: 17px;
      line-height: 1.65; color: #C5C5C5; margin-bottom: 12px;
    }
    .exit-link {
      color: var(--green); text-decoration: none;
      border-bottom: 1px solid rgba(45,213,115,0.3);
      transition: border-color 0.3s;
    }
    .exit-link:hover { border-color: var(--green); }
    .exit-sub {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.14em; color: #545454;
      margin-bottom: 56px;
    }

    /* Footer */
    footer {
      padding: 32px 56px; background: #020202;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex; align-items: center; justify-content: space-between;
      position: relative; z-index: 1;
    }
    .footer-brand {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.1em; color: #545454;
    }
    .footer-brand strong { color: #C5C5C5; }
    .footer-links { display: flex; gap: 28px; list-style: none; }
    .footer-links a {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #545454; text-decoration: none; transition: color 0.2s;
    }
    .footer-links a:hover { color: #C5C5C5; }

    /* ── HERO HEADLINE SENTENCE SPACING ── */
    .hero-sentence-break {
      display: block;
      margin-bottom: 0.1em; /* connected — same sentence, different line */
    }
    .hero-sentence-gap {
      display: block;
      margin-top: 0.3em; /* clear gap — new sentence */
    }

    /* ── PAIN LABEL TOOLTIPS ── */
    .rl-tooltip {
      position: absolute;
      background: rgba(10,10,10,0.94);
      border: 1px solid rgba(109,40,217,0.45);
      border-radius: 4px;
      padding: 10px 14px;
      max-width: 230px;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.65;
      color: rgba(248,248,248,0.82);
      pointer-events: none;
      z-index: 20;
      transform: scale(0.92);
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      white-space: normal;
    }
    .rl-tooltip.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* ── REVEAL UTILITY ── */
    .reveal-hp {
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal-hp.visible { opacity: 1; transform: translateY(0); }

    /* ── WIDE SCREEN CONTAINMENT ── */
    @media (min-width: 1400px) {
      #shift-left, #philosophy, #alignment, #exit {
        padding-left: calc((100vw - 1280px) / 2);
        padding-right: calc((100vw - 1280px) / 2);
      }
      footer {
        padding-left: calc((100vw - 1280px) / 2);
        padding-right: calc((100vw - 1280px) / 2);
      }
      nav {
        padding-left: calc((100vw - 1280px) / 2);
        padding-right: calc((100vw - 1280px) / 2);
      }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      nav { padding: 18px 28px; }
      .nav-links-hp { display: none; }
      .hamburger { display: flex; }
      #shift-left, #philosophy, #alignment, #exit { padding-left: 28px; padding-right: 28px; }
      .sl-stages { grid-template-columns: 1fr; }
      .phil-grid { grid-template-columns: 1fr; gap: 48px; }
    }
    @media (max-width: 640px) {
      nav { padding: 14px 16px; }
      .nav-logo { height: 18px; }
      .nav-tagline { display: none; }

      #hero { min-height: 100vh; min-height: 100dvh; }

      .hero-headline { font-size: clamp(28px, 7vw, 42px); }
      .hero-sub { font-size: 14px; max-width: 90%; }

      /* Danger labels — circular arrangement for mobile: 3 above, 4 below */
      .ripple-label { font-size: 8px; letter-spacing: 0.06em; white-space: nowrap; max-width: none; transform: none; }
      .rl-center { font-size: 10px; max-width: 70vw; transform: translate(-50%, -50%); }
      /* Above center: 3 labels */
      .rl-1 { top: 20%; left: 50%; transform: translateX(-50%); }
      .rl-5 { top: 32%; left: 4%; right: auto; }
      .rl-2 { top: 32%; left: auto; right: 4%; }
      /* Below center: 4 labels */
      .rl-6 { top: auto; bottom: 32%; left: 4%; right: auto; transform: none; }
      .rl-3 { top: auto; bottom: 32%; left: auto; right: 4%; transform: none; }
      .rl-7 { top: auto; bottom: 20%; left: 4%; right: auto; }
      .rl-4 { top: auto; bottom: 20%; left: auto; right: 4%; }

      .phase-a-hint { bottom: 32px; }

      #shift-left, #philosophy, #alignment, #exit { padding-left: 16px; padding-right: 16px; }
      #shift-left, #philosophy { padding-top: 72px; padding-bottom: 72px; }
      #alignment { padding-top: 80px; padding-bottom: 80px; }
      #exit { padding: 56px 16px 64px; }

      .sl-headline { font-size: clamp(24px, 6vw, 36px); }
      .sl-stage { padding: 28px 20px; }

      .phil-statement-text { font-size: clamp(20px, 5vw, 28px); }
      .phil-manifesto { font-size: 11px; padding-left: 20px; }

      .align-headline { font-size: clamp(24px, 6vw, 40px); }
      .align-body { font-size: 14px; }

      .exit-line { font-size: 15px; }

      footer { padding: 24px 16px; flex-direction: column; gap: 16px; text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
    }