:root {
      --bg: #55534f;
      --bg-deep: #3f3e3b;
      --paper: #66635e;
      --text: #f4f2ed;
      --muted: #cbc7bf;
      --cyan: #22d3ee;
      --cyan-soft: rgba(34, 211, 238, .28);
      --orange: #ff7a00;
      --orange-soft: rgba(255, 122, 0, .18);
      --line: rgba(255,255,255,.16);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--text);
      background: var(--bg-deep);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 84% 85%, var(--orange-soft), transparent 24%),
        radial-gradient(circle at 54% 70%, rgba(34,211,238,.09), transparent 24%),
        linear-gradient(120deg, #5d5a55 0%, #51504c 52%, #44433f 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .23;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to left, #000 10%, rgba(0,0,0,.6), transparent 72%);
    }

    .hero::after {
      content:"";
      position:absolute;
      right:-12vw;
      bottom:-28vw;
      width:58vw;
      height:58vw;
      border-radius:50%;
      background: radial-gradient(circle, rgba(255,122,0,.18), transparent 64%);
      filter: blur(10px);
      pointer-events:none;
      z-index:-1;
    }

    .photo-panel {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      background: #20201f;
    }

    .photo-panel img {
      width: 100%;
      height: 100%;
      min-height: 100svh;
      display: block;
      object-fit: cover;
      object-position: center 48%;
      filter: saturate(.96) contrast(1.03) brightness(.94);
      transform: scale(1.015);
      animation: slowPush 18s ease-in-out infinite alternate;
    }

    .photo-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 62%, rgba(69,68,64,.28) 84%, #52504c 100%),
        linear-gradient(180deg, rgba(20,20,20,.14), transparent 34%, rgba(20,20,20,.14));
      pointer-events: none;
    }

    @keyframes slowPush {
      from { transform: scale(1.015); }
      to { transform: scale(1.055); }
    }

    .topbar {
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px clamp(28px, 4vw, 70px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      letter-spacing: .28em;
      font-size: 22px;
      font-weight: 420;
      text-transform: uppercase;
    }

    .brand-mark {
      width: 42px;
      height: 18px;
      filter: drop-shadow(0 0 7px rgba(34,211,238,.75));
    }

    .nav {
      display: flex;
      align-items: center;
      gap: clamp(24px, 3vw, 48px);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.82);
    }

    .nav a {
      position: relative;
      padding: 8px 0;
    }

    .nav a::after {
      content:"";
      position:absolute;
      left:0; right:100%; bottom:0;
      height:1px;
      background:var(--cyan);
      box-shadow:0 0 8px var(--cyan);
      transition:right .28s ease;
    }

    .nav a:hover::after { right:0; }

    .menu {
      width: 25px;
      display: grid;
      gap: 5px;
    }
    .menu span {
      height: 2px;
      background: var(--orange);
      box-shadow: 0 0 9px rgba(255,122,0,.4);
    }

    .content-panel {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: 140px clamp(44px, 7vw, 118px) 82px;
    }

    .content {
      width: min(100%, 600px);
      margin-inline: auto;
      transform: translateY(18px);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
      color: var(--orange);
      font-size: 11px;
      letter-spacing: .34em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content:"";
      width: 28px;
      height: 1px;
      background: var(--orange);
      box-shadow: 0 0 8px rgba(255,122,0,.55);
    }

    h1 {
      margin: 0;
      max-width: 620px;
      font-weight: 300;
      font-size: clamp(44px, 4.25vw, 76px);
      line-height: 1.12;
      letter-spacing: .095em;
      text-transform: uppercase;
      text-wrap: balance;
    }

    h1 .accent {
      color: var(--cyan);
      text-shadow:
        0 0 10px rgba(34,211,238,.5),
        0 0 26px rgba(34,211,238,.22);
    }

    .pulse-rule {
      width: 58px;
      height: 2px;
      margin: 30px 0 28px;
      background: var(--cyan);
      box-shadow: 0 0 8px var(--cyan), 0 0 18px rgba(34,211,238,.6);
    }

    .lead {
      margin: 0 0 34px;
      color: var(--muted);
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.75;
      letter-spacing: .025em;
    }
    .lead strong {
      color: var(--orange);
      font-weight: 500;
    }

    .cta {
      position: relative;
      width: min(100%, 370px);
      height: 66px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px 0 30px;
      border: 1px solid rgba(34,211,238,.8);
      color: var(--text);
      background: rgba(255,255,255,.025);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 18px rgba(34,211,238,.18);
      backdrop-filter: blur(10px);
      letter-spacing: .19em;
      font-size: 11px;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .cta:hover {
      transform: translateY(-2px);
      background: rgba(34,211,238,.07);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 26px rgba(34,211,238,.32);
    }

    .cta .arrow {
      color: var(--orange);
      font-size: 25px;
      line-height: 1;
      transition: transform .25s ease;
    }
    .cta:hover .arrow { transform: translateX(6px); }

    .scroll {
      margin-top: 42px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      color: rgba(255,255,255,.58);
      font-size: 9px;
      letter-spacing: .28em;
      text-transform: uppercase;
    }

    .scroll-arrow {
      margin-left: 160px;
      width: 13px;
      height: 13px;
      border-right: 2px solid var(--orange);
      border-bottom: 2px solid var(--orange);
      transform: rotate(45deg);
      animation: float 1.8s ease-in-out infinite;
    }

    @keyframes float {
      0%,100% { transform: translateY(0) rotate(45deg); opacity:.65; }
      50% { transform: translateY(7px) rotate(45deg); opacity:1; }
    }

    .ecg {
      position: absolute;
      left: 43%;
      right: 0;
      bottom: -2px;
      height: 72px;
      z-index: 4;
      pointer-events: none;
      filter:
        drop-shadow(0 0 5px rgba(34,211,238,.95))
        drop-shadow(0 0 16px rgba(34,211,238,.55));
    }

    .ecg path {
      fill: none;
      stroke: var(--cyan);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1500;
      stroke-dashoffset: 1500;
      animation: drawPulse 3.2s ease-out .45s forwards, pulseGlow 2.2s ease-in-out 3.6s infinite;
    }
    @keyframes drawPulse { to { stroke-dashoffset: 0; } }
    @keyframes pulseGlow {
      0%,100% { opacity:.65; }
      50% { opacity:1; }
    }

    .orange-flare {
      position:absolute;
      right:-40px;
      bottom:-20px;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,122,0,.28), transparent 70%);
      filter:blur(18px);
      pointer-events:none;
    }

    @media (max-width: 980px) {
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .photo-panel {
        min-height: 58svh;
      }
      .photo-panel img {
        min-height: 58svh;
        object-position: center 45%;
      }
      .photo-panel::after {
        background:
          linear-gradient(180deg, transparent 62%, #53514d 100%),
          linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.05));
      }
      .content-panel {
        min-height: auto;
        padding: 76px 28px 130px;
      }
      .content {
        transform: none;
        margin: 0;
      }
      .topbar {
        padding: 23px 22px;
      }
      .nav a { display:none; }
      .ecg {
        left: 4%;
        bottom: 3%;
        height: 88px;
      }
      .scroll-arrow { margin-left: 130px; }
    }

    @media (max-width: 560px) {
      .brand { font-size: 18px; }
      .brand-mark { width: 35px; }
      h1 {
        font-size: clamp(36px, 11.8vw, 52px);
        letter-spacing: .07em;
      }
      .lead { font-size: 15px; }
      .cta { height: 60px; padding-inline: 21px; }
      .scroll { font-size: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; scroll-behavior: auto !important; }
      .ecg path { stroke-dashoffset: 0; }
    }

    /* ---------- CHAPTER 01 / SHOE BOX ---------- */
    .chapter-shoebox {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(330px, .78fr) minmax(540px, 1.22fr);
      align-items: center;
      gap: clamp(20px, 5vw, 92px);
      padding: clamp(100px, 12vh, 150px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 78% 54%, rgba(34,211,238,.13), transparent 25%),
        radial-gradient(circle at 85% 80%, rgba(255,122,0,.22), transparent 25%),
        linear-gradient(135deg, #62605b 0%, #514f4a 52%, #403f3c 100%);
    }

    .chapter-shoebox::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      opacity: .28;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
      background-size: 48px 48px, 64px 64px, 64px 64px;
      mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
    }

    .chapter-shoebox::after {
      content:"";
      position:absolute;
      width:70vw;
      height:70vw;
      right:-34vw;
      bottom:-43vw;
      border-radius:50%;
      z-index:-1;
      border:1px solid rgba(255,122,0,.22);
      box-shadow:
        0 0 0 70px rgba(255,122,0,.018),
        0 0 0 140px rgba(255,122,0,.012);
    }

    .chapter-copy {
      position: relative;
      z-index: 4;
      max-width: 520px;
      padding-left: clamp(0px, 2.4vw, 38px);
    }

    .chapter-index {
      display:flex;
      align-items:center;
      gap:15px;
      margin-bottom:26px;
      color:var(--orange);
      font-size:10px;
      letter-spacing:.34em;
      text-transform:uppercase;
    }

    .chapter-index::after {
      content:"";
      width:42px;
      height:1px;
      background:var(--orange);
      box-shadow:0 0 8px rgba(255,122,0,.55);
    }

    .chapter-copy h2 {
      margin:0;
      max-width:510px;
      color:#f5f2ec;
      font-size:clamp(43px, 4.8vw, 78px);
      line-height:1.04;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .chapter-copy h2 span {
      color:var(--cyan);
      text-shadow:
        0 0 9px rgba(34,211,238,.42),
        0 0 25px rgba(34,211,238,.17);
    }

    .chapter-copy .chapter-line {
      width:54px;
      height:2px;
      margin:31px 0 28px;
      background:var(--cyan);
      box-shadow:0 0 7px var(--cyan), 0 0 20px rgba(34,211,238,.48);
    }

    .chapter-copy .chapter-kicker {
      margin:0 0 15px;
      color:#f3f0e9;
      font-size:clamp(17px, 1.35vw, 20px);
      line-height:1.55;
      font-weight:400;
      letter-spacing:.015em;
    }

    .chapter-copy .chapter-text {
      margin:0;
      max-width:440px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px, 1.05vw, 16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .chapter-copy .chapter-text em {
      color:var(--orange);
      font-style:normal;
    }

    .box-stage {
      position:relative;
      min-height:min(72vh, 720px);
      display:grid;
      place-items:center;
      perspective:1200px;
    }

    .box-aura {
      position:absolute;
      width:min(45vw, 680px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(34,211,238,.18) 0%, rgba(34,211,238,.06) 36%, transparent 67%);
      filter:blur(8px);
      transform:translate(4%, 7%);
      animation:auraBreath 4s ease-in-out infinite;
    }

    @keyframes auraBreath {
      0%,100% { opacity:.6; transform:translate(4%,7%) scale(.95); }
      50% { opacity:1; transform:translate(4%,7%) scale(1.04); }
    }

    .box-shadow {
      position:absolute;
      width:min(44vw, 650px);
      height:90px;
      bottom:12%;
      border-radius:50%;
      background:radial-gradient(ellipse, rgba(0,0,0,.54), transparent 70%);
      filter:blur(18px);
      transform:rotate(-3deg);
    }

    .shoebox-img {
      position:relative;
      z-index:2;
      width:min(52vw, 790px);
      max-width:100%;
      height:auto;
      object-fit:contain;
      filter:
        hue-rotate(72deg)
        saturate(1.35)
        drop-shadow(0 28px 34px rgba(0,0,0,.43))
        drop-shadow(0 0 14px rgba(34,211,238,.26));
      transform:translateY(8px) rotateX(1deg) rotateY(-2deg);
      transition:transform .18s ease-out;
      animation:boxFloat 5.5s ease-in-out infinite;
      will-change:transform;
    }

    @keyframes boxFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -12px; }
    }

    .mystery-tag {
      position:absolute;
      z-index:4;
      right:8%;
      top:18%;
      display:flex;
      align-items:center;
      gap:10px;
      color:rgba(255,255,255,.62);
      font-size:9px;
      letter-spacing:.28em;
      text-transform:uppercase;
      transform:rotate(90deg);
      transform-origin:right center;
    }

    .mystery-tag i {
      display:block;
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--orange);
      box-shadow:0 0 12px rgba(255,122,0,.95);
    }

    .journey-path {
      position:absolute;
      z-index:3;
      left:0;
      top:-18px;
      width:100%;
      height:190px;
      pointer-events:none;
      filter:drop-shadow(0 0 5px rgba(34,211,238,.78));
    }

    .journey-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.65;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:1800;
    }

    .chapter-shoebox.in-view .journey-path path {
      animation:chapterPath 2.4s ease-out forwards;
    }

    @keyframes chapterPath { to { stroke-dashoffset:0; } }

    .reveal {
      opacity:0;
      transform:translateY(32px);
      transition:opacity .85s ease, transform .85s cubic-bezier(.2,.75,.2,1);
    }

    .in-view .reveal {
      opacity:1;
      transform:translateY(0);
    }

    .in-view .reveal:nth-child(2) { transition-delay:.1s; }
    .in-view .reveal:nth-child(3) { transition-delay:.2s; }
    .in-view .reveal:nth-child(4) { transition-delay:.3s; }
    .in-view .reveal:nth-child(5) { transition-delay:.4s; }

    @media (max-width: 980px) {
      .chapter-shoebox {
        grid-template-columns:1fr;
        gap:48px;
        min-height:auto;
        padding-top:105px;
        padding-bottom:110px;
      }
      .chapter-copy { padding-left:0; }
      .box-stage { min-height:54vh; }
      .shoebox-img { width:min(92vw, 720px); }
      .box-aura { width:min(80vw, 620px); }
      .box-shadow { width:min(72vw, 560px); bottom:7%; }
      .mystery-tag { right:0; top:14%; }
      .journey-path { height:125px; top:-10px; }
    }

    @media (max-width: 560px) {
      .chapter-shoebox { padding-inline:22px; }
      .chapter-copy h2 { font-size:clamp(38px, 12vw, 55px); }
      .box-stage { min-height:420px; }
      .mystery-tag { display:none; }
    }


    /* ---------- CHAPTER 02 / FIRST COMPANION ---------- */
    .chapter-companion {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(560px, 1.18fr) minmax(330px, .82fr);
      align-items: center;
      gap: clamp(28px, 5vw, 90px);
      padding: clamp(110px, 13vh, 165px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 55%, rgba(34,211,238,.15), transparent 25%),
        radial-gradient(circle at 82% 28%, rgba(255,122,0,.14), transparent 24%),
        linear-gradient(125deg, #44433f 0%, #4d4b47 48%, #5d5a55 100%);
    }

    .chapter-companion::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.22;
      background:
        repeating-radial-gradient(circle at 78% 50%, transparent 0 42px, rgba(255,255,255,.055) 43px 44px),
        linear-gradient(110deg, transparent 0 58%, rgba(255,122,0,.035) 58% 59%, transparent 59% 100%);
      mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    }

    .chapter-companion::after {
      content:"";
      position:absolute;
      left:-22vw;
      top:8%;
      width:62vw;
      height:62vw;
      border-radius:50%;
      z-index:-1;
      background:radial-gradient(circle, rgba(34,211,238,.12), transparent 68%);
      filter:blur(14px);
    }

    .shoe-stage {
      position:relative;
      min-height:min(70vh, 700px);
      display:grid;
      place-items:center;
      perspective:1300px;
    }

    .shoe-orbit {
      position:absolute;
      width:min(53vw, 800px);
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(34,211,238,.12);
      box-shadow:
        0 0 0 70px rgba(34,211,238,.012),
        0 0 0 140px rgba(34,211,238,.008);
      transform:rotateX(68deg) translateY(12%);
    }

    .shoe-floor {
      position:absolute;
      width:min(48vw, 700px);
      height:110px;
      bottom:12%;
      border-radius:50%;
      background:radial-gradient(ellipse, rgba(0,0,0,.58), transparent 72%);
      filter:blur(19px);
    }

    .shoe-img {
      position:relative;
      z-index:3;
      width:min(56vw, 860px);
      max-width:100%;
      height:auto;
      object-fit:contain;
      filter:
        drop-shadow(0 32px 38px rgba(0,0,0,.42))
        drop-shadow(0 0 11px rgba(34,211,238,.22));
      transform:translateY(4px) rotateY(3deg);
      animation:shoeFloat 5.8s ease-in-out infinite;
      transition:transform .18s ease-out;
      will-change:transform;
    }

    @keyframes shoeFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -13px; }
    }

    .shoe-label {
      position:absolute;
      left:8%;
      bottom:17%;
      z-index:4;
      color:rgba(255,255,255,.54);
      font-size:9px;
      letter-spacing:.3em;
      text-transform:uppercase;
    }

    .shoe-label::before {
      content:"";
      display:inline-block;
      width:28px;
      height:1px;
      margin-right:12px;
      vertical-align:middle;
      background:var(--cyan);
      box-shadow:0 0 8px var(--cyan);
    }

    .companion-copy {
      position:relative;
      z-index:4;
      max-width:500px;
      justify-self:end;
    }

    .companion-copy .chapter-index {
      justify-content:flex-start;
    }

    .companion-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(43px, 4.7vw, 76px);
      line-height:1.05;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .companion-copy h2 span {
      color:var(--orange);
      text-shadow:0 0 18px rgba(255,122,0,.18);
    }

    .companion-copy .chapter-line {
      width:54px;
      height:2px;
      margin:31px 0 28px;
      background:var(--cyan);
      box-shadow:0 0 7px var(--cyan), 0 0 20px rgba(34,211,238,.48);
    }

    .companion-copy .chapter-kicker {
      margin:0 0 14px;
      color:#f3f0e9;
      font-size:clamp(17px, 1.35vw, 20px);
      line-height:1.55;
      font-weight:400;
      letter-spacing:.015em;
    }

    .companion-copy .chapter-text {
      margin:0;
      max-width:430px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px, 1.05vw, 16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .companion-copy .chapter-text em {
      color:var(--cyan);
      font-style:normal;
      text-shadow:0 0 12px rgba(34,211,238,.25);
    }

    .companion-path {
      position:absolute;
      left:0;
      bottom:-2px;
      width:100%;
      height:110px;
      z-index:3;
      pointer-events:none;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .companion-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1700;
      stroke-dashoffset:1700;
    }

    .chapter-companion.in-view .companion-path path {
      animation:companionPathDraw 2.5s ease-out forwards;
    }

    @keyframes companionPathDraw { to { stroke-dashoffset:0; } }

    @media (max-width: 980px) {
      .chapter-companion {
        grid-template-columns:1fr;
        gap:42px;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .shoe-stage {
        order:2;
        min-height:50vh;
      }
      .companion-copy {
        order:1;
        justify-self:start;
      }
      .shoe-img { width:min(94vw, 780px); }
      .shoe-orbit { width:min(85vw, 700px); }
      .shoe-floor { width:min(75vw, 620px); bottom:5%; }
      .shoe-label { left:2%; bottom:10%; }
      .companion-path { height:80px; }
    }

    @media (max-width: 560px) {
      .chapter-companion { padding-inline:22px; }
      .companion-copy h2 { font-size:clamp(38px, 12vw, 54px); }
      .shoe-stage { min-height:390px; }
      .shoe-label { display:none; }
    }


    /* ---------- CHAPTER 03 / PREPARE EQUIP GO ---------- */
    .chapter-prepare {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(340px, .78fr) minmax(600px, 1.22fr);
      align-items: center;
      gap: clamp(30px, 5vw, 92px);
      padding: clamp(110px, 13vh, 165px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 72% 48%, rgba(34,211,238,.14), transparent 25%),
        radial-gradient(circle at 18% 78%, rgba(255,122,0,.16), transparent 23%),
        linear-gradient(135deg, #5c5954 0%, #504e49 48%, #41403d 100%);
    }

    .chapter-prepare::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.19;
      background:
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        radial-gradient(circle at 78% 48%, rgba(255,255,255,.07) 0 1px, transparent 1.5px);
      background-size:62px 62px, 62px 62px, 38px 38px;
      mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    }

    .prepare-copy {
      position:relative;
      z-index:5;
      max-width:500px;
    }

    .prepare-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px, 4.8vw, 78px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.06em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .prepare-copy h2 span {
      color:var(--orange);
      text-shadow:0 0 18px rgba(255,122,0,.18);
    }

    .prepare-copy .chapter-line {
      width:56px;
      height:2px;
      margin:31px 0 28px;
      background:var(--cyan);
      box-shadow:0 0 7px var(--cyan), 0 0 20px rgba(34,211,238,.48);
    }

    .prepare-copy .chapter-kicker {
      margin:0 0 14px;
      color:#f3f0e9;
      font-size:clamp(17px, 1.35vw, 20px);
      line-height:1.55;
      font-weight:400;
    }

    .prepare-copy .chapter-text {
      margin:0;
      max-width:430px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px, 1.05vw, 16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .prepare-copy .chapter-text em {
      color:var(--cyan);
      font-style:normal;
      text-shadow:0 0 12px rgba(34,211,238,.25);
    }

    .locker-stage {
      position:relative;
      min-height:min(74vh, 740px);
      display:grid;
      place-items:center;
      perspective:1400px;
    }

    .locker-aura {
      position:absolute;
      width:min(46vw, 720px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(34,211,238,.16) 0, rgba(34,211,238,.05) 42%, transparent 68%);
      filter:blur(10px);
      animation:prepareAura 4.5s ease-in-out infinite;
    }

    @keyframes prepareAura {
      0%,100% { opacity:.58; transform:scale(.96); }
      50% { opacity:1; transform:scale(1.035); }
    }

    .locker-img {
      position:relative;
      z-index:3;
      width:min(40vw, 600px);
      max-width:100%;
      height:auto;
      object-fit:contain;
      filter:
        drop-shadow(0 34px 38px rgba(0,0,0,.45))
        drop-shadow(0 0 10px rgba(255,122,0,.12));
      transform:translateY(8px);
      transition:transform .18s ease-out;
    }

    .gear {
      position:absolute;
      z-index:4;
      width:min(18vw, 245px);
      height:auto;
      object-fit:contain;
      filter:drop-shadow(0 24px 26px rgba(0,0,0,.38));
      animation:gearFloat 5s ease-in-out infinite;
      will-change:transform;
    }

    .gear-shirt {
      left:1%;
      top:7%;
      transform:rotate(-8deg);
      animation-delay:.3s;
    }

    .gear-cap {
      right:0;
      top:11%;
      width:min(16vw, 215px);
      transform:rotate(7deg);
      animation-delay:1s;
    }

    .gear-raincoat {
      right:3%;
      bottom:1%;
      width:min(19vw, 255px);
      transform:rotate(5deg);
      animation-delay:1.8s;
    }

    @keyframes gearFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -13px; }
    }

    .gear-node {
      position:absolute;
      z-index:2;
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:
        0 0 8px var(--cyan),
        0 0 20px rgba(34,211,238,.85);
    }

    .gear-node.one { left:24%; top:34%; }
    .gear-node.two { right:22%; top:36%; background:var(--orange); box-shadow:0 0 8px var(--orange),0 0 20px rgba(255,122,0,.75); }
    .gear-node.three { right:23%; bottom:25%; }

    .gear-link {
      position:absolute;
      z-index:1;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(34,211,238,.85), transparent);
      box-shadow:0 0 8px rgba(34,211,238,.5);
      transform-origin:left center;
      opacity:.68;
    }

    .link-one { width:29%; left:18%; top:35%; transform:rotate(14deg); }
    .link-two { width:27%; left:55%; top:37%; transform:rotate(-12deg); }
    .link-three { width:30%; left:54%; top:67%; transform:rotate(15deg); }

    .prepare-tag {
      position:absolute;
      left:8%;
      bottom:10%;
      z-index:4;
      color:rgba(255,255,255,.52);
      font-size:9px;
      letter-spacing:.3em;
      text-transform:uppercase;
    }

    .prepare-tag::before {
      content:"";
      display:inline-block;
      width:28px;
      height:1px;
      margin-right:12px;
      vertical-align:middle;
      background:var(--orange);
      box-shadow:0 0 8px rgba(255,122,0,.8);
    }

    .prepare-path {
      position:absolute;
      left:0;
      bottom:-2px;
      width:100%;
      height:105px;
      z-index:3;
      pointer-events:none;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .prepare-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:1800;
    }

    .chapter-prepare.in-view .prepare-path path {
      animation:preparePathDraw 2.5s ease-out forwards;
    }

    @keyframes preparePathDraw { to { stroke-dashoffset:0; } }

    @media (max-width: 980px) {
      .chapter-prepare {
        grid-template-columns:1fr;
        gap:40px;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .prepare-copy { max-width:560px; }
      .locker-stage { min-height:620px; }
      .locker-img { width:min(64vw, 540px); }
      .gear-shirt { width:min(34vw, 230px); left:0; }
      .gear-cap { width:min(30vw, 205px); right:0; }
      .gear-raincoat { width:min(36vw, 245px); right:0; }
      .prepare-path { height:80px; }
    }

    @media (max-width: 560px) {
      .chapter-prepare { padding-inline:22px; }
      .prepare-copy h2 { font-size:clamp(38px, 12vw, 54px); }
      .locker-stage { min-height:500px; }
      .locker-img { width:min(76vw, 430px); }
      .gear-shirt { width:35vw; top:4%; }
      .gear-cap { width:31vw; top:10%; }
      .gear-raincoat { width:36vw; bottom:3%; }
      .prepare-tag, .gear-link, .gear-node { display:none; }
    }


    /* ---------- PAGE 4 REFINEMENT: ITEMS STORED INSIDE LOCKER ---------- */
    .chapter-prepare .gear-link,
    .chapter-prepare .gear-node,
    .chapter-prepare .prepare-tag {
      display: none !important;
    }

    .chapter-prepare .locker-stage {
      min-height: min(76vh, 760px);
    }

    .chapter-prepare .locker-img {
      z-index: 3;
      width: min(43vw, 630px);
      transform: translateY(8px);
    }

    .chapter-prepare .gear {
      left: 50% !important;
      right: auto !important;
      margin: 0;
      z-index: 5;
      animation: none !important;
      filter:
        drop-shadow(0 14px 18px rgba(0,0,0,.34))
        drop-shadow(0 0 8px rgba(34,211,238,.10));
      transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.2,.75,.2,1);
    }

    .chapter-prepare .gear-shirt {
      top: 19% !important;
      bottom: auto !important;
      width: min(10.2vw, 150px) !important;
      transform: translateX(-50%) scale(.96) rotate(0deg) !important;
    }

    .chapter-prepare .gear-cap {
      top: 42% !important;
      bottom: auto !important;
      width: min(9.2vw, 135px) !important;
      transform: translateX(-50%) scale(.96) rotate(0deg) !important;
    }

    .chapter-prepare .gear-raincoat {
      top: 61% !important;
      bottom: auto !important;
      width: min(12vw, 175px) !important;
      transform: translateX(-50%) scale(.96) rotate(0deg) !important;
    }

    .chapter-prepare:not(.in-view) .gear {
      opacity: 0;
      transform: translateX(-50%) translateY(18px) scale(.92) !important;
    }

    .chapter-prepare.in-view .gear-shirt {
      opacity: 1;
      transition-delay: .38s;
    }

    .chapter-prepare.in-view .gear-cap {
      opacity: 1;
      transition-delay: .58s;
    }

    .chapter-prepare.in-view .gear-raincoat {
      opacity: 1;
      transition-delay: .78s;
    }

    .chapter-prepare .locker-aura {
      width: min(40vw, 620px);
      background:
        radial-gradient(circle, rgba(34,211,238,.13) 0, rgba(34,211,238,.035) 42%, transparent 69%);
    }

    @media (max-width: 980px) {
      .chapter-prepare .locker-stage {
        min-height: 650px;
      }

      .chapter-prepare .locker-img {
        width: min(66vw, 560px);
      }

      .chapter-prepare .gear-shirt {
        width: min(16vw, 135px) !important;
        top: 20% !important;
      }

      .chapter-prepare .gear-cap {
        width: min(14vw, 120px) !important;
        top: 43% !important;
      }

      .chapter-prepare .gear-raincoat {
        width: min(18vw, 160px) !important;
        top: 62% !important;
      }
    }

    @media (max-width: 560px) {
      .chapter-prepare .locker-stage {
        min-height: 520px;
      }

      .chapter-prepare .locker-img {
        width: min(86vw, 430px);
      }

      .chapter-prepare .gear-shirt {
        width: 22vw !important;
        max-width: 108px;
        top: 20% !important;
      }

      .chapter-prepare .gear-cap {
        width: 19vw !important;
        max-width: 92px;
        top: 43% !important;
      }

      .chapter-prepare .gear-raincoat {
        width: 25vw !important;
        max-width: 120px;
        top: 62% !important;
      }
    }


.chapter-world{position:relative;min-height:115svh;padding:120px clamp(24px,5vw,86px);overflow:hidden;isolation:isolate;background:radial-gradient(circle at 15% 20%,rgba(255,122,0,.16),transparent 24%),radial-gradient(circle at 82% 72%,rgba(34,211,238,.14),transparent 28%),linear-gradient(140deg,#454440 0%,#3d3c39 48%,#323331 100%)}
.chapter-world:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.2;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:58px 58px}
.world-heading{width:min(100%,1420px);margin:0 auto 54px;display:flex;justify-content:space-between;gap:48px;align-items:flex-end;position:relative;z-index:4}
.world-copy{max-width:700px}.world-copy h2{margin:0;color:#f5f2ec;font-size:clamp(44px,5vw,82px);line-height:1.03;font-weight:300;letter-spacing:.06em;text-transform:uppercase}.world-copy h2 span{color:var(--orange);text-shadow:0 0 20px rgba(255,122,0,.22)}
.world-copy .chapter-line{width:58px;height:2px;margin:30px 0 24px;background:var(--cyan);box-shadow:0 0 8px var(--cyan),0 0 22px rgba(34,211,238,.46)}
.world-copy p{margin:0;color:rgba(241,237,230,.68);font-size:clamp(15px,1.2vw,18px);line-height:1.75}
.world-cta{flex:0 0 auto;width:270px;height:62px;display:inline-flex;align-items:center;justify-content:space-between;padding:0 24px;border:1px solid rgba(255,122,0,.72);color:#f7f3ed;background:rgba(255,122,0,.035);letter-spacing:.2em;font-size:10px;text-transform:uppercase;box-shadow:0 0 18px rgba(255,122,0,.12);transition:.25s ease}.world-cta:hover{transform:translateY(-2px);background:rgba(255,122,0,.08);box-shadow:0 0 26px rgba(255,122,0,.23)}.world-cta b{color:var(--cyan);font-size:21px;font-weight:400}
.world-device{width:min(100%,1520px);margin:0 auto;position:relative;border:1px solid rgba(255,255,255,.12);background:#171b1d;box-shadow:0 40px 70px rgba(0,0,0,.42),0 0 36px rgba(34,211,238,.1);transform:perspective(1600px) rotateX(2deg) scale(.975);transform-origin:center top;transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .9s ease;opacity:0}.chapter-world.in-view .world-device{transform:perspective(1600px) rotateX(0) scale(1);opacity:1}
.world-screen{display:block;width:100%;height:auto;object-fit:cover;filter:saturate(1.02) contrast(1.02)}.world-glass{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 18% 76%,rgba(255,255,255,.025)),radial-gradient(circle at 63% 52%,rgba(34,211,238,.06),transparent 26%);mix-blend-mode:screen}
.scan-line{position:absolute;left:0;width:100%;height:2px;top:0;z-index:4;opacity:.55;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 10px var(--cyan);animation:scanWorld 5.5s linear infinite}@keyframes scanWorld{0%{top:0;opacity:0}8%{opacity:.45}92%{opacity:.45}100%{top:100%;opacity:0}}
.world-status{position:absolute;left:22px;bottom:18px;z-index:5;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.62);font-size:9px;letter-spacing:.28em;text-transform:uppercase;background:rgba(15,18,20,.64);border:1px solid rgba(255,255,255,.08);padding:10px 13px;backdrop-filter:blur(8px)}.world-status i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.world-path{position:absolute;left:0;bottom:-2px;width:100%;height:100px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px rgba(34,211,238,.82))}.world-path path{fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1900;stroke-dashoffset:1900}.chapter-world.in-view .world-path path{animation:worldPathDraw 2.7s ease-out forwards}@keyframes worldPathDraw{to{stroke-dashoffset:0}}
@media(max-width:980px){.chapter-world{min-height:auto;padding-top:105px;padding-bottom:125px}.world-heading{align-items:flex-start;flex-direction:column;margin-bottom:40px}.world-device{transform:none}}
@media(max-width:560px){.chapter-world{padding-inline:18px}.world-copy h2{font-size:clamp(38px,12vw,54px)}.world-status{left:10px;bottom:10px;font-size:7px;padding:8px 10px}}


    /* ---------- CHAPTER 05 / FIRST SPORT BAG ---------- */
    .chapter-bag {
      position: relative;
      min-height: 108svh;
      display: grid;
      grid-template-columns: minmax(360px, .78fr) minmax(580px, 1.22fr);
      align-items: center;
      gap: clamp(34px, 5vw, 90px);
      padding: clamp(110px, 13vh, 165px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 74% 53%, rgba(34,211,238,.18), transparent 25%),
        radial-gradient(circle at 17% 80%, rgba(255,122,0,.13), transparent 22%),
        linear-gradient(135deg, #41413f 0%, #363735 52%, #2c2e2d 100%);
    }

    .chapter-bag::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.16;
      background:
        linear-gradient(30deg, rgba(34,211,238,.05) 12%, transparent 12.5%, transparent 87%, rgba(34,211,238,.05) 87.5%),
        linear-gradient(150deg, rgba(34,211,238,.05) 12%, transparent 12.5%, transparent 87%, rgba(34,211,238,.05) 87.5%);
      background-size:54px 94px;
      mask-image:linear-gradient(to right, #000, transparent 44%, #000);
    }

    .bag-copy {
      position:relative;
      z-index:5;
      max-width:520px;
    }

    .bag-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px, 4.9vw, 80px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .bag-copy h2 span {
      color:var(--cyan);
      text-shadow:0 0 10px rgba(34,211,238,.52),0 0 28px rgba(34,211,238,.2);
    }

    .bag-copy .chapter-line {
      width:58px;
      height:2px;
      margin:31px 0 28px;
      background:var(--orange);
      box-shadow:0 0 8px rgba(255,122,0,.75),0 0 20px rgba(255,122,0,.34);
    }

    .bag-copy .chapter-kicker {
      margin:0 0 15px;
      color:#f3f0e9;
      font-size:clamp(17px,1.35vw,20px);
      line-height:1.55;
    }

    .bag-copy .chapter-text {
      margin:0 0 30px;
      max-width:450px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px,1.05vw,16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .bag-steps {
      display:grid;
      gap:13px;
      max-width:420px;
    }

    .bag-step {
      display:grid;
      grid-template-columns:42px 1fr;
      gap:15px;
      align-items:center;
      padding:12px 0;
      border-top:1px solid rgba(255,255,255,.08);
    }

    .bag-step strong {
      color:var(--orange);
      font-size:10px;
      letter-spacing:.2em;
      text-transform:uppercase;
      font-weight:500;
    }

    .bag-step span {
      display:block;
      margin-top:4px;
      color:rgba(255,255,255,.56);
      font-size:13px;
      line-height:1.45;
    }

    .bag-num {
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border:1px solid rgba(34,211,238,.52);
      color:var(--cyan);
      font-size:12px;
      box-shadow:0 0 14px rgba(34,211,238,.08);
    }

    .bag-stage {
      position:relative;
      min-height:min(72vh,720px);
      display:grid;
      place-items:center;
      perspective:1400px;
    }

    .bag-aura {
      position:absolute;
      width:min(46vw,720px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(34,211,238,.19) 0%, rgba(34,211,238,.055) 40%, transparent 69%);
      filter:blur(10px);
      animation:bagAura 4.6s ease-in-out infinite;
    }

    @keyframes bagAura {
      0%,100% { opacity:.56; transform:scale(.96); }
      50% { opacity:1; transform:scale(1.035); }
    }

    .bag-platform {
      position:absolute;
      width:min(44vw,680px);
      height:84px;
      bottom:14%;
      border-radius:50%;
      border:1px solid rgba(34,211,238,.42);
      box-shadow:
        0 0 25px rgba(34,211,238,.24),
        0 0 70px rgba(34,211,238,.08) inset;
      transform:perspective(800px) rotateX(67deg);
      background:rgba(12,18,20,.48);
    }

    .bag-platform::after {
      content:"";
      position:absolute;
      inset:11px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.08);
    }

    .bag-img {
      position:relative;
      z-index:3;
      width:min(53vw,820px);
      max-width:100%;
      height:auto;
      object-fit:contain;
      filter:
        drop-shadow(0 34px 40px rgba(0,0,0,.48))
        drop-shadow(0 0 14px rgba(34,211,238,.32));
      transform:translateY(8px) rotateY(-3deg);
      animation:bagFloat 5.8s ease-in-out infinite;
      transition:transform .18s ease-out;
      will-change:transform;
    }

    @keyframes bagFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -12px; }
    }

    .bag-tag {
      position:absolute;
      right:6%;
      top:15%;
      z-index:4;
      display:flex;
      align-items:center;
      gap:10px;
      color:rgba(255,255,255,.54);
      font-size:9px;
      letter-spacing:.28em;
      text-transform:uppercase;
    }

    .bag-tag i {
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--orange);
      box-shadow:0 0 12px rgba(255,122,0,.95);
    }

    .bag-path {
      position:absolute;
      left:0;
      bottom:-2px;
      width:100%;
      height:102px;
      z-index:3;
      pointer-events:none;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .bag-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:1800;
    }

    .chapter-bag.in-view .bag-path path {
      animation:bagPathDraw 2.6s ease-out forwards;
    }

    @keyframes bagPathDraw { to { stroke-dashoffset:0; } }

    @media (max-width:980px) {
      .chapter-bag {
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .bag-stage {
        min-height:56vh;
      }
      .bag-img { width:min(94vw,800px); }
      .bag-aura { width:min(80vw,650px); }
      .bag-platform { width:min(74vw,620px); bottom:8%; }
    }

    @media (max-width:560px) {
      .chapter-bag { padding-inline:22px; }
      .bag-copy h2 { font-size:clamp(38px,12vw,54px); }
      .bag-stage { min-height:430px; }
      .bag-tag { display:none; }
      .bag-step { grid-template-columns:36px 1fr; }
      .bag-num { width:36px; height:36px; }
    }


    /* ---------- CHAPTER 06 / MILESTONES ---------- */
    .chapter-milestones {
      position: relative;
      min-height: 108svh;
      display: grid;
      grid-template-columns: minmax(520px, 1.12fr) minmax(360px, .88fr);
      align-items: center;
      gap: clamp(38px, 6vw, 104px);
      padding: clamp(110px, 13vh, 165px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 23% 55%, rgba(34,211,238,.15), transparent 26%),
        radial-gradient(circle at 85% 28%, rgba(255,122,0,.16), transparent 24%),
        linear-gradient(130deg, #3d3f3d 0%, #494844 52%, #5a5752 100%);
    }

    .chapter-milestones::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.18;
      background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
      background-size:54px 54px;
      mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    }

    .milestone-visual {
      position:relative;
      min-height:min(72vh,720px);
      display:grid;
      place-items:center;
    }

    .route-ring {
      position:absolute;
      width:min(48vw,720px);
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(34,211,238,.13);
      box-shadow:
        0 0 0 72px rgba(34,211,238,.012),
        0 0 0 144px rgba(34,211,238,.008);
      transform:rotateX(67deg) translateY(8%);
    }

    .milestone-track {
      position:relative;
      width:min(48vw,760px);
      height:min(56vh,560px);
    }

    .milestone-line {
      position:absolute;
      left:10%;
      right:10%;
      top:52%;
      height:2px;
      background:linear-gradient(90deg, rgba(34,211,238,.18), var(--cyan), rgba(255,122,0,.78));
      box-shadow:0 0 10px rgba(34,211,238,.6);
    }

    .milestone-line::after {
      content:"";
      position:absolute;
      inset:-10px 0;
      background:linear-gradient(90deg, transparent, rgba(34,211,238,.08), transparent);
      filter:blur(6px);
    }

    .milestone-node {
      position:absolute;
      top:52%;
      width:88px;
      transform:translate(-50%,-50%);
      text-align:center;
      z-index:3;
    }

    .milestone-node:nth-child(2) { left:16%; }
    .milestone-node:nth-child(3) { left:38%; }
    .milestone-node:nth-child(4) { left:62%; }
    .milestone-node:nth-child(5) { left:84%; }

    .node-core {
      width:54px;
      height:54px;
      margin:0 auto 14px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#f6f3ed;
      font-size:12px;
      letter-spacing:.08em;
      border:1px solid rgba(34,211,238,.7);
      background:rgba(14,18,19,.72);
      box-shadow:
        0 0 0 8px rgba(34,211,238,.04),
        0 0 18px rgba(34,211,238,.3);
      backdrop-filter:blur(8px);
    }

    .milestone-node:last-child .node-core {
      border-color:rgba(255,122,0,.82);
      box-shadow:
        0 0 0 8px rgba(255,122,0,.045),
        0 0 18px rgba(255,122,0,.32);
      color:var(--orange);
    }

    .milestone-node strong {
      display:block;
      color:#f5f2ec;
      font-size:10px;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:500;
    }

    .milestone-node span {
      display:block;
      margin-top:5px;
      color:rgba(255,255,255,.48);
      font-size:9px;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .milestone-beacon {
      position:absolute;
      left:62%;
      top:52%;
      width:170px;
      height:170px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:radial-gradient(circle, rgba(34,211,238,.18), transparent 66%);
      animation:beaconPulse 2.8s ease-in-out infinite;
    }

    @keyframes beaconPulse {
      0%,100% { opacity:.45; transform:translate(-50%,-50%) scale(.88); }
      50% { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
    }

    .milestone-copy {
      position:relative;
      z-index:5;
      max-width:520px;
      justify-self:end;
    }

    .milestone-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px,4.8vw,78px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .milestone-copy h2 span {
      color:var(--orange);
      text-shadow:0 0 18px rgba(255,122,0,.2);
    }

    .milestone-copy .chapter-line {
      width:58px;
      height:2px;
      margin:31px 0 28px;
      background:var(--cyan);
      box-shadow:0 0 8px var(--cyan),0 0 20px rgba(34,211,238,.4);
    }

    .milestone-copy .chapter-kicker {
      margin:0 0 14px;
      color:#f3f0e9;
      font-size:clamp(17px,1.35vw,20px);
      line-height:1.55;
    }

    .milestone-copy .chapter-text {
      margin:0;
      max-width:430px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px,1.05vw,16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .milestone-copy .chapter-text em {
      color:var(--cyan);
      font-style:normal;
      text-shadow:0 0 12px rgba(34,211,238,.24);
    }

    .milestone-path {
      position:absolute;
      left:0;
      bottom:-2px;
      width:100%;
      height:102px;
      z-index:3;
      pointer-events:none;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .milestone-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:1800;
    }

    .chapter-milestones.in-view .milestone-path path {
      animation:milestonePathDraw 2.6s ease-out forwards;
    }

    @keyframes milestonePathDraw { to { stroke-dashoffset:0; } }

    .chapter-milestones .milestone-node {
      opacity:0;
      transform:translate(-50%,-42%);
      transition:opacity .65s ease, transform .75s cubic-bezier(.2,.75,.2,1);
    }

    .chapter-milestones.in-view .milestone-node {
      opacity:1;
      transform:translate(-50%,-50%);
    }

    .chapter-milestones.in-view .milestone-node:nth-child(2){transition-delay:.25s}
    .chapter-milestones.in-view .milestone-node:nth-child(3){transition-delay:.45s}
    .chapter-milestones.in-view .milestone-node:nth-child(4){transition-delay:.65s}
    .chapter-milestones.in-view .milestone-node:nth-child(5){transition-delay:.85s}

    @media (max-width:980px) {
      .chapter-milestones {
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .milestone-copy {
        order:1;
        justify-self:start;
      }
      .milestone-visual {
        order:2;
        min-height:520px;
      }
      .milestone-track {
        width:min(94vw,760px);
      }
    }

    @media (max-width:560px) {
      .chapter-milestones { padding-inline:20px; }
      .milestone-copy h2 { font-size:clamp(38px,12vw,54px); }
      .milestone-visual { min-height:440px; }
      .milestone-track { height:390px; }
      .milestone-node { width:72px; }
      .node-core { width:44px;height:44px;font-size:10px; }
      .milestone-node strong { font-size:8px; }
      .milestone-node span { font-size:7px; }
    }


    /* ---------- CHAPTER 07 / SHOES EVOLVE — REBUILT ---------- */
    .chapter-evolve {
      position: relative;
      min-height: 108svh;
      display: grid;
      grid-template-columns: minmax(360px, .8fr) minmax(620px, 1.2fr);
      align-items: center;
      gap: clamp(40px, 6vw, 110px);
      padding: clamp(110px, 13vh, 165px) clamp(28px, 7vw, 118px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 74% 46%, rgba(255,122,0,.19), transparent 26%),
        radial-gradient(circle at 20% 78%, rgba(34,211,238,.11), transparent 25%),
        linear-gradient(135deg, #56534f 0%, #484641 50%, #383937 100%);
    }

    .chapter-evolve::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.17;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
      background-size:58px 58px;
      mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent);
    }

    .evolve-copy {
      position:relative;
      z-index:5;
      max-width:520px;
    }

    .evolve-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px,4.8vw,78px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }

    .evolve-copy h2 span {
      color:var(--orange);
      text-shadow:0 0 18px rgba(255,122,0,.22);
    }

    .evolve-copy .chapter-line {
      width:58px;
      height:2px;
      margin:31px 0 28px;
      background:var(--cyan);
      box-shadow:0 0 8px var(--cyan),0 0 20px rgba(34,211,238,.42);
    }

    .evolve-copy .chapter-kicker {
      margin:0 0 14px;
      color:#f3f0e9;
      font-size:clamp(17px,1.35vw,20px);
      line-height:1.55;
    }

    .evolve-copy .chapter-text {
      margin:0;
      max-width:440px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px,1.05vw,16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .evolve-copy .chapter-text em {
      color:var(--cyan);
      font-style:normal;
      text-shadow:0 0 12px rgba(34,211,238,.24);
    }

    .evolution-stage {
      position:relative;
      min-height:min(75vh,740px);
      display:grid;
      place-items:center;
      perspective:1500px;
    }

    .forge-aura {
      position:absolute;
      width:min(44vw,680px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(255,122,0,.22) 0%, rgba(255,122,0,.065) 42%, transparent 70%);
      filter:blur(11px);
      animation:forgeAura 4.5s ease-in-out infinite;
    }

    @keyframes forgeAura {
      0%,100% { opacity:.55; transform:scale(.96); }
      50% { opacity:1; transform:scale(1.04); }
    }

    .forge-img {
      position:absolute;
      z-index:3;
      width:min(39vw,585px);
      max-width:100%;
      height:auto;
      right:2%;
      bottom:8%;
      filter:
        drop-shadow(0 34px 42px rgba(0,0,0,.48))
        drop-shadow(0 0 20px rgba(255,122,0,.32));
      transform:translateY(8px) rotateY(-2deg);
      transition:transform .18s ease-out;
    }

    .evolve-shoe {
      position:absolute;
      z-index:5;
      width:min(23vw,350px);
      max-width:100%;
      height:auto;
      left:2%;
      top:31%;
      filter:
        drop-shadow(0 28px 34px rgba(0,0,0,.42))
        drop-shadow(0 0 13px rgba(34,211,238,.20));
      transform:rotate(-4deg);
      animation:evolveFloat 5.2s ease-in-out infinite;
    }

    @keyframes evolveFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -12px; }
    }

    .energy-beam {
      position:absolute;
      left:23%;
      right:31%;
      top:49%;
      height:4px;
      z-index:2;
      background:linear-gradient(90deg, var(--cyan), #7be9f7 38%, var(--orange));
      box-shadow:
        0 0 9px rgba(34,211,238,.75),
        0 0 22px rgba(255,122,0,.34);
      transform:rotate(-4deg);
      transform-origin:left center;
      opacity:.9;
    }

    .energy-beam::after {
      content:"";
      position:absolute;
      inset:-12px 0;
      background:linear-gradient(90deg, rgba(34,211,238,.12), rgba(255,122,0,.16));
      filter:blur(10px);
    }

    .evolve-steps {
      position:absolute;
      left:4%;
      right:3%;
      bottom:1%;
      z-index:6;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }

    .evolve-step {
      min-height:68px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-top:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.58);
      font-size:10px;
      letter-spacing:.22em;
      text-transform:uppercase;
    }

    .evolve-step strong {
      color:var(--orange);
      font-weight:500;
      margin-right:7px;
    }

    .evolve-path,
    .survival-path {
      position:absolute;
      left:0;
      bottom:-2px;
      width:100%;
      height:102px;
      z-index:3;
      pointer-events:none;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .evolve-path path,
    .survival-path path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:1800;
    }

    .chapter-evolve.in-view .evolve-path path,
    .chapter-survival.in-view .survival-path path {
      animation:evolvePathDraw 2.6s ease-out forwards;
    }

    @keyframes evolvePathDraw { to { stroke-dashoffset:0; } }

    /* ---------- CHAPTER 08 / WEATHER & INJURIES ---------- */
    .chapter-survival {
      position:relative;
      min-height:135svh;
      padding:clamp(110px,13vh,165px) clamp(28px,7vw,118px) 130px;
      overflow:hidden;
      isolation:isolate;
      background:
        radial-gradient(circle at 80% 20%, rgba(34,211,238,.15), transparent 24%),
        radial-gradient(circle at 16% 78%, rgba(255,122,0,.15), transparent 22%),
        linear-gradient(135deg,#3b3d3c 0%,#464541 50%,#55524e 100%);
    }

    .chapter-survival::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.18;
      background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
      background-size:60px 60px;
      mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    }

    .survival-heading {
      max-width:720px;
      margin-bottom:70px;
    }

    .survival-heading h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px,5vw,82px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
    }

    .survival-heading h2 span {
      color:var(--orange);
      text-shadow:0 0 18px rgba(255,122,0,.22);
    }

    .survival-heading p {
      margin:28px 0 0;
      max-width:620px;
      color:rgba(238,234,226,.66);
      font-size:clamp(15px,1.15vw,18px);
      line-height:1.8;
    }

    .survival-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:clamp(30px,4vw,64px);
      align-items:stretch;
    }

    .survival-panel {
      position:relative;
      min-height:620px;
      padding:36px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
      box-shadow:0 30px 50px rgba(0,0,0,.22);
      overflow:hidden;
    }

    .survival-panel.weather {
      background:
        radial-gradient(circle at 74% 34%, rgba(34,211,238,.15), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    }

    .survival-panel.medical {
      background:
        radial-gradient(circle at 70% 36%, rgba(160,88,255,.15), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    }

    .panel-label {
      position:relative;
      z-index:5;
      display:flex;
      align-items:center;
      gap:14px;
      color:var(--orange);
      font-size:10px;
      letter-spacing:.28em;
      text-transform:uppercase;
    }

    .panel-label::after {
      content:"";
      width:38px;
      height:1px;
      background:var(--orange);
      box-shadow:0 0 8px rgba(255,122,0,.6);
    }

    .survival-panel h3 {
      position:relative;
      z-index:5;
      margin:18px 0 10px;
      color:#f6f2ec;
      font-size:clamp(28px,2.7vw,44px);
      font-weight:300;
      letter-spacing:.05em;
      text-transform:uppercase;
    }

    .survival-panel p {
      position:relative;
      z-index:5;
      margin:0;
      max-width:390px;
      color:rgba(255,255,255,.60);
      font-size:14px;
      line-height:1.7;
    }

    .weather-img,
    .doctor-img {
      position:absolute;
      z-index:3;
      height:auto;
      object-fit:contain;
      filter:drop-shadow(0 28px 34px rgba(0,0,0,.35));
    }

    .weather-img {
      width:93%;
      right:-10%;
      bottom:-2%;
    }

    .doctor-img {
      width:72%;
      right:-2%;
      bottom:-3%;
      filter:
        drop-shadow(0 28px 34px rgba(0,0,0,.38))
        drop-shadow(0 0 14px rgba(155,96,255,.16));
    }

    .medical-tools {
      position:absolute;
      left:28px;
      right:28px;
      bottom:26px;
      z-index:5;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }

    .medical-tool {
      min-height:118px;
      padding:12px;
      border:1px solid rgba(34,211,238,.20);
      background:rgba(12,16,18,.54);
      backdrop-filter:blur(10px);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:7px;
    }

    .medical-tool img {
      width:68px;
      height:68px;
      object-fit:contain;
      filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));
    }

    .medical-tool span {
      color:rgba(255,255,255,.66);
      font-size:8px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    .weather-pills {
      position:absolute;
      left:28px;
      right:28px;
      bottom:26px;
      z-index:5;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
    }

    .weather-pill {
      height:48px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(12,16,18,.50);
      color:rgba(255,255,255,.64);
      font-size:8px;
      letter-spacing:.18em;
      text-transform:uppercase;
      backdrop-filter:blur(8px);
    }

    @media (max-width:980px) {
      .chapter-evolve {
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .evolution-stage { min-height:650px; }
      .forge-img { width:min(62vw,540px); right:0; }
      .evolve-shoe { width:min(40vw,320px); left:0; }
      .survival-grid { grid-template-columns:1fr; }
      .survival-panel { min-height:610px; }
    }

    @media (max-width:560px) {
      .chapter-evolve,
      .chapter-survival { padding-inline:20px; }

      .evolve-copy h2,
      .survival-heading h2 { font-size:clamp(38px,12vw,54px); }

      .evolution-stage { min-height:520px; }
      .forge-img { width:min(78vw,400px); right:-4%; }
      .evolve-shoe { width:min(48vw,235px); top:28%; }
      .evolve-steps { grid-template-columns:1fr; gap:0; bottom:0; }
      .evolve-step { min-height:34px; }

      .survival-panel { min-height:560px; padding:24px; }
      .weather-img { width:120%; right:-26%; }
      .doctor-img { width:92%; right:-14%; }
      .medical-tools,
      .weather-pills { left:14px; right:14px; bottom:14px; }
      .medical-tool { min-height:96px; padding:8px; }
      .medical-tool img { width:54px; height:54px; }
      .weather-pill { font-size:7px; }
    }


    /* ---------- PAGE 8 POLISH ---------- */
    .chapter-evolve .evolution-stage {
      min-height: min(76vh, 760px);
    }

    .chapter-evolve .forge-img {
      width: min(48vw, 720px);
      right: 2%;
      bottom: 5%;
      filter:
        drop-shadow(0 38px 44px rgba(0,0,0,.50))
        drop-shadow(0 0 24px rgba(255,122,0,.36));
    }

    .chapter-evolve .forge-aura {
      width: min(50vw, 760px);
      background:
        radial-gradient(circle, rgba(255,122,0,.28) 0%, rgba(255,122,0,.09) 38%, transparent 70%);
    }

    .chapter-evolve .energy-beam,
    .chapter-evolve .evolve-shoe {
      display: none !important;
    }

    /* ---------- PAGE 9 REBUILD ---------- */
    .chapter-survival {
      min-height: 145svh;
      padding-bottom: 135px;
    }

    .survival-stack {
      display: grid;
      gap: 28px;
    }

    .survival-band {
      position: relative;
      min-height: 520px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
      box-shadow:
        0 28px 50px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.02) inset;
      isolation: isolate;
    }

    .survival-band::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .18;
      background:
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .weather-band {
      background:
        radial-gradient(circle at 72% 44%, rgba(34,211,238,.18), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    }

    .medical-band {
      background:
        radial-gradient(circle at 35% 50%, rgba(155,96,255,.16), transparent 28%),
        radial-gradient(circle at 82% 45%, rgba(34,211,238,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    }

    .survival-copy {
      position: absolute;
      left: 38px;
      top: 40px;
      z-index: 7;
      max-width: 350px;
    }

    .survival-copy h3 {
      margin: 18px 0 12px;
      color: #f5f2ec;
      font-size: clamp(28px, 2.8vw, 44px);
      font-weight: 300;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    .survival-copy p {
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: 14px;
      line-height: 1.7;
    }

    .weather-presenter {
      position: absolute;
      left: 28%;
      bottom: -2%;
      width: min(36vw, 560px);
      z-index: 3;
      filter: drop-shadow(0 28px 35px rgba(0,0,0,.36));
    }

    .weather-cards {
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      width: 44%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      z-index: 6;
    }

    .weather-card {
      min-height: 190px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 1px solid rgba(34,211,238,.30);
      background: rgba(9,17,21,.58);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 18px rgba(34,211,238,.08);
    }

    .weather-card.hot {
      border-color: rgba(255,122,0,.45);
      box-shadow: 0 0 20px rgba(255,122,0,.11);
    }

    .weather-symbol {
      font-size: 34px;
      color: var(--cyan);
      text-shadow: 0 0 12px rgba(34,211,238,.45);
    }

    .weather-card.hot .weather-symbol {
      color: var(--orange);
      text-shadow: 0 0 12px rgba(255,122,0,.45);
    }

    .weather-card strong {
      color: #f5f2ec;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 500;
    }

    .weather-card span {
      color: rgba(255,255,255,.72);
      font-size: 24px;
      font-weight: 300;
    }

    .medical-doctor {
      position: absolute;
      left: 19%;
      bottom: -3%;
      width: min(31vw, 470px);
      z-index: 3;
      filter:
        drop-shadow(0 28px 36px rgba(0,0,0,.38))
        drop-shadow(0 0 14px rgba(155,96,255,.15));
    }

    .medical-cards {
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      width: 48%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      z-index: 6;
    }

    .medical-card {
      min-height: 300px;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 1px solid rgba(34,211,238,.24);
      background: rgba(9,17,21,.58);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 18px rgba(34,211,238,.07);
    }

    .medical-card img {
      width: min(8.5vw, 125px);
      height: min(8.5vw, 125px);
      object-fit: contain;
      filter: drop-shadow(0 14px 18px rgba(0,0,0,.34));
    }

    .medical-card strong {
      color: #f5f2ec;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 500;
    }

    .medical-card span {
      color: rgba(255,255,255,.52);
      font-size: 11px;
    }

    @media (max-width: 1100px) {
      .weather-presenter {
        left: 18%;
        width: min(44vw, 520px);
      }

      .weather-cards {
        width: 52%;
      }

      .medical-doctor {
        left: 10%;
        width: min(38vw, 450px);
      }

      .medical-cards {
        width: 55%;
      }
    }

    @media (max-width: 980px) {
      .chapter-evolve .forge-img {
        width: min(76vw, 620px);
        right: 50%;
        transform: translateX(50%) !important;
      }

      .survival-band {
        min-height: 760px;
      }

      .survival-copy {
        position: relative;
        left: auto;
        top: auto;
        padding: 30px;
        max-width: 560px;
      }

      .weather-presenter,
      .medical-doctor {
        left: 50%;
        transform: translateX(-50%);
        bottom: 180px;
        width: min(72vw, 520px);
      }

      .weather-cards,
      .medical-cards {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 20px;
        width: auto;
        transform: none;
      }
    }

    @media (max-width: 620px) {
      .survival-band {
        min-height: 980px;
      }

      .weather-presenter,
      .medical-doctor {
        bottom: 370px;
        width: min(95vw, 500px);
      }

      .weather-cards {
        grid-template-columns: repeat(2, 1fr);
      }

      .medical-cards {
        grid-template-columns: 1fr;
      }

      .medical-card {
        min-height: 170px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
      }

      .medical-card img {
        width: 86px;
        height: 86px;
      }
    }


    /* ---------- PAGE 8 — GENERATED EVOLUTION VISUAL ---------- */
    .chapter-evolve.evolution-visual-page {
      min-height: 108svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(90px, 10vh, 130px) clamp(20px, 4vw, 64px) 125px;
      background:
        radial-gradient(circle at 80% 45%, rgba(34,211,238,.12), transparent 28%),
        radial-gradient(circle at 18% 75%, rgba(255,122,0,.13), transparent 24%),
        linear-gradient(135deg, #3a3c3b 0%, #333534 48%, #292b2b 100%);
    }

    .evolution-image-frame {
      position: relative;
      width: min(100%, 1540px);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.11);
      background: #061018;
      box-shadow:
        0 42px 74px rgba(0,0,0,.46),
        0 0 42px rgba(34,211,238,.10),
        0 0 0 1px rgba(255,255,255,.025) inset;
      transform: perspective(1600px) rotateX(1.2deg) scale(.985);
      transform-origin: center;
      transition: transform .9s cubic-bezier(.2,.75,.2,1), opacity .9s ease;
    }

    .chapter-evolve.in-view .evolution-image-frame {
      transform: perspective(1600px) rotateX(0deg) scale(1);
    }

    .evolution-generated-image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .evolution-image-glass {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.045), transparent 18% 78%, rgba(255,255,255,.02)),
        radial-gradient(circle at 65% 42%, rgba(34,211,238,.055), transparent 28%);
      mix-blend-mode: screen;
    }

    .chapter-evolve.evolution-visual-page .evolve-copy,
    .chapter-evolve.evolution-visual-page .evolution-stage {
      display: none !important;
    }

    @media (max-width: 980px) {
      .chapter-evolve.evolution-visual-page {
        min-height: auto;
        padding: 88px 16px 110px;
      }

      .evolution-image-frame {
        transform: none;
      }
    }


    /* ---------- CHAPTER 09 / MARKETPLACE ---------- */
    .chapter-marketplace {
      position:relative;
      min-height:108svh;
      display:grid;
      grid-template-columns:minmax(360px,.8fr) minmax(600px,1.2fr);
      align-items:center;
      gap:clamp(40px,6vw,108px);
      padding:clamp(110px,13vh,165px) clamp(28px,7vw,118px);
      overflow:hidden;
      isolation:isolate;
      background:
        radial-gradient(circle at 72% 50%,rgba(34,211,238,.16),transparent 28%),
        radial-gradient(circle at 18% 80%,rgba(255,122,0,.12),transparent 24%),
        linear-gradient(135deg,#3b3d3c 0%,#474642 52%,#55524e 100%);
    }

    .chapter-marketplace::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.18;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
      background-size:58px 58px;
      mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 92%,transparent);
    }

    .market-copy {
      position:relative;
      z-index:5;
      max-width:520px;
    }

    .market-copy h2 {
      margin:0;
      color:#f5f2ec;
      font-size:clamp(44px,4.8vw,78px);
      line-height:1.03;
      font-weight:300;
      letter-spacing:.055em;
      text-transform:uppercase;
    }

    .market-copy h2 span {
      color:var(--cyan);
      text-shadow:0 0 12px rgba(34,211,238,.46),0 0 28px rgba(34,211,238,.18);
    }

    .market-copy .chapter-line {
      width:58px;
      height:2px;
      margin:31px 0 28px;
      background:var(--orange);
      box-shadow:0 0 8px rgba(255,122,0,.75),0 0 20px rgba(255,122,0,.34);
    }

    .market-copy .chapter-kicker {
      margin:0 0 14px;
      color:#f3f0e9;
      font-size:clamp(17px,1.35vw,20px);
      line-height:1.55;
    }

    .market-copy .chapter-text {
      margin:0;
      max-width:440px;
      color:rgba(238,234,226,.66);
      font-size:clamp(14px,1.05vw,16px);
      line-height:1.8;
      letter-spacing:.03em;
    }

    .market-points {
      margin-top:30px;
      display:grid;
      gap:12px;
      max-width:420px;
    }

    .market-point {
      display:flex;
      align-items:center;
      gap:14px;
      min-height:48px;
      padding:0 0 0 14px;
      border-left:1px solid rgba(34,211,238,.48);
      color:rgba(255,255,255,.64);
      font-size:13px;
      letter-spacing:.03em;
    }

    .market-point strong {
      color:var(--orange);
      font-weight:500;
    }

    .market-stage {
      position:relative;
      min-height:min(72vh,720px);
      display:grid;
      place-items:center;
      perspective:1400px;
    }

    .market-aura {
      position:absolute;
      width:min(46vw,720px);
      aspect-ratio:1;
      border-radius:50%;
      background:radial-gradient(circle,rgba(34,211,238,.18),rgba(34,211,238,.05) 42%,transparent 70%);
      filter:blur(10px);
      animation:marketAura 4.6s ease-in-out infinite;
    }

    @keyframes marketAura {
      0%,100% { opacity:.55; transform:scale(.96); }
      50% { opacity:1; transform:scale(1.035); }
    }

    .market-box {
      position:relative;
      z-index:3;
      width:min(42vw,640px);
      max-width:100%;
      height:auto;
      object-fit:contain;
      filter:
        drop-shadow(0 34px 42px rgba(0,0,0,.46))
        drop-shadow(0 0 15px rgba(34,211,238,.28));
      transform:rotateY(-4deg) translateY(8px);
      animation:marketFloat 5.6s ease-in-out infinite;
      transition:transform .18s ease-out;
    }

    @keyframes marketFloat {
      0%,100% { translate:0 0; }
      50% { translate:0 -12px; }
    }

    .market-label {
      position:absolute;
      right:8%;
      top:18%;
      z-index:4;
      display:flex;
      align-items:center;
      gap:10px;
      color:rgba(255,255,255,.54);
      font-size:9px;
      letter-spacing:.28em;
      text-transform:uppercase;
    }

    .market-label i {
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--orange);
      box-shadow:0 0 12px rgba(255,122,0,.95);
    }

    /* ---------- FINAL / THE JOURNEY AHEAD ---------- */
    .chapter-future {
      position:relative;
      min-height:115svh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:clamp(120px,15vh,190px) clamp(28px,8vw,140px);
      overflow:hidden;
      isolation:isolate;
      text-align:center;
      background:
        radial-gradient(circle at 50% 40%,rgba(34,211,238,.16),transparent 24%),
        radial-gradient(circle at 50% 78%,rgba(255,122,0,.14),transparent 26%),
        linear-gradient(180deg,#343635 0%,#292b2a 50%,#202221 100%);
    }

    .chapter-future::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      opacity:.16;
      background:
        repeating-radial-gradient(circle at 50% 60%,transparent 0 54px,rgba(255,255,255,.04) 55px 56px);
      mask-image:radial-gradient(circle at 50% 55%,#000,transparent 72%);
    }

    .future-content {
      position:relative;
      z-index:4;
      width:min(100%,980px);
    }

    .future-content h2 {
      margin:0;
      color:#f6f2ec;
      font-size:clamp(48px,6vw,96px);
      line-height:1.02;
      font-weight:300;
      letter-spacing:.05em;
      text-transform:uppercase;
    }

    .future-content h2 span {
      color:var(--cyan);
      text-shadow:0 0 12px rgba(34,211,238,.5),0 0 30px rgba(34,211,238,.2);
    }

    .future-lead {
      margin:34px auto 0;
      max-width:800px;
      color:rgba(255,255,255,.70);
      font-size:clamp(17px,1.4vw,21px);
      line-height:1.85;
    }

    .future-grid {
      margin:54px auto 0;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
      max-width:920px;
    }

    .future-card {
      min-height:190px;
      padding:28px 22px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.025);
      backdrop-filter:blur(10px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:12px;
    }

    .future-card strong {
      color:var(--orange);
      font-size:11px;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-weight:500;
    }

    .future-card span {
      color:rgba(255,255,255,.64);
      font-size:14px;
      line-height:1.65;
    }

    .future-closing {
      margin:54px auto 0;
      max-width:850px;
      color:#f4f1eb;
      font-size:clamp(20px,2vw,30px);
      line-height:1.55;
      font-weight:300;
    }

    .future-closing em {
      color:var(--orange);
      font-style:normal;
    }

    .future-ecg {
      width:min(100%,980px);
      height:100px;
      margin:46px auto 0;
      filter:drop-shadow(0 0 6px rgba(34,211,238,.82));
    }

    .future-ecg path {
      fill:none;
      stroke:var(--cyan);
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    @media(max-width:980px) {
      .chapter-marketplace {
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:105px;
        padding-bottom:125px;
      }
      .market-stage { min-height:560px; }
      .market-box { width:min(82vw,620px); }
      .future-grid { grid-template-columns:1fr; }
    }

    @media(max-width:560px) {
      .chapter-marketplace,
      .chapter-future { padding-inline:20px; }
      .market-copy h2,
      .future-content h2 { font-size:clamp(38px,12vw,56px); }
      .market-stage { min-height:440px; }
      .market-label { display:none; }
    }

  
/* Final signature */
.final-signature {
  margin-top: 30px;
  text-align: center;
}
.final-pulse {
  color: #f5f2ec;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(34,211,238,.35);
}
.next-run {
  margin-top: 14px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Safety fallback: the content remains visible even if animations cannot initialize. */
@media (scripting: none) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}