/* ============================================================
   COMPONENTS — per-slide illustration classes + keyframes
   ============================================================ */

/* ---------- shared ---------- */
.stack { display: flex; flex-direction: column; gap: clamp(14px, 2.4vmin, 26px); }
.stack.tight { gap: clamp(8px, 1.4vmin, 14px); }
.row { display: flex; gap: clamp(12px, 2vmin, 24px); flex-wrap: wrap; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(16px, 2.4vmin, 26px); backdrop-filter: blur(6px);
}
.card.solid { background: var(--surface-solid); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; color: var(--muted);
}
.chip .dotmark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.grid { display: grid; gap: clamp(12px, 2vmin, 22px); }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); } }

.icon {
  width: clamp(40px, 6vmin, 58px); height: clamp(40px, 6vmin, 58px); border-radius: 14px;
  display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent);
}
.icon svg { width: 54%; height: 54%; }
.glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 14px 40px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ============================================================
   01 — COVER (left-aligned, magazine hierarchy)
   ============================================================ */
.cover { position: relative; width: 100%; height: 100%; display: flex; align-items: center; }
.cover canvas.particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cover .cover-inner { position: relative; z-index: 1; width: 100%; max-width: 1040px; text-align: left; }
.cover .cover-rule { width: 56px; height: 4px; border-radius: 3px; background: var(--accent); margin-bottom: clamp(18px,2.6vmin,26px); }
.cover .cover-eyebrow { font-size: clamp(11px, 1.5vmin, 14px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: clamp(30px,6vmin,60px); }
.cover .cover-eyebrow .sepdot { color: var(--faint); margin: 0 .4em; }
.cover .cover-title { font-size: clamp(2.8rem, 9.5vw, 8.6rem); font-weight: 800; line-height: .9; letter-spacing: -.038em; color: var(--fg-strong); }
.cover .cover-title em { font-style: normal; color: var(--accent); }
.cover .cover-sub { margin-top: clamp(22px,4vmin,44px); font-size: clamp(1.05rem, 2.7vmin, 1.7rem); color: var(--muted); max-width: 32ch; line-height: 1.4; }
.cover .cover-sub b { color: var(--fg-strong); font-weight: 700; }

/* ============================================================
   02 — STAKES (38 colleges)
   ============================================================ */
.stakes-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vmin, 60px); align-items: center; }
@media (max-width: 880px) { .stakes-wrap { grid-template-columns: 1fr; } }
.college-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(7px, 1.2vmin, 12px); }
.cg-cell { aspect-ratio: 1; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); opacity: .25; }
.is-active .cg-cell { animation: cgLight .5s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); }
.cg-cell.hot { background: var(--accent); border-color: transparent; }
.stat-line { display: flex; align-items: baseline; gap: 14px; }
.stat-line .big { font-size: clamp(2.4rem, 7vmin, 4.4rem); font-weight: 800; color: var(--accent); letter-spacing: -.03em; }

/* ============================================================
   03 — FIRE DRILL
   ============================================================ */
.scatter { position: relative; width: 100%; height: clamp(220px, 42vmin, 460px); }
.doc {
  position: absolute; width: clamp(54px, 9vmin, 92px); aspect-ratio: 3/4; border-radius: 8px;
  background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 5px; padding: 9px;
}
.doc::before, .doc i { content: ""; height: 4px; border-radius: 2px; background: var(--line-strong); display: block; }
.doc i:nth-child(2) { width: 70%; } .doc i:nth-child(3) { width: 85%; } .doc i:nth-child(4) { width: 55%; }
.is-active .doc { animation: docFloat var(--dur,7s) var(--ease) infinite alternate; animation-delay: var(--delay,0s); }
.clock {
  position: absolute; right: 4%; top: 8%; width: clamp(70px, 12vmin, 120px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--line-strong); display: grid; place-items: center; background: var(--surface);
}
.clock .hand { position: absolute; width: 3px; height: 38%; background: var(--accent); top: 12%; left: calc(50% - 1.5px); transform-origin: bottom center; }
.is-active .clock .hand { animation: spin 4s linear infinite; }
.clock .hand.min { height: 28%; top: 22%; background: var(--fg); animation-duration: 24s; }
.stamp {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%) rotate(-11deg) scale(2);
  font-weight: 800; font-size: clamp(1.4rem, 4vmin, 2.6rem); letter-spacing: .05em;
  color: #ff5a5f; border: 4px solid #ff5a5f; padding: 8px 18px; border-radius: 10px; opacity: 0;
  text-transform: uppercase;
}
.is-active .stamp { animation: stampIn .5s var(--ease) 1.1s forwards; }

/* ============================================================
   03b — GROUP MULTIPLIER (rolling deadlines)
   ============================================================ */
.rolling { position: relative; display: flex; flex-direction: column; gap: clamp(6px,1.1vmin,10px); padding: 6px 0; }
.roll-row { position: relative; height: clamp(8px,1.4vmin,12px); border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.roll-row .due { position: absolute; top: 50%; left: var(--p,40%); width: clamp(8px,1.4vmin,11px); aspect-ratio: 1; border-radius: 50%; background: #ff5a5f; transform: translate(-50%,-50%); box-shadow: 0 0 10px #ff5a5f; }
.is-active .roll-row .due { animation: duePulse 2.2s var(--ease) infinite; animation-delay: var(--dl,0s); }
.rolling::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; left: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: .7; pointer-events: none; }
.is-active .rolling::after { animation: nowSweep 7s linear infinite; }
@keyframes duePulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .8; } 50% { transform: translate(-50%,-50%) scale(1.45); opacity: 1; } }
@keyframes nowSweep { from { left: 0%; } to { left: 100%; } }

/* ============================================================
   04 — THE HIDDEN KILLER (5-year mismatch timeline)
   ============================================================ */
.mismatch { position: relative; width: 100%; height: clamp(180px, 30vmin, 260px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.mismatch .pad { position: absolute; inset: 0 clamp(28px,5vmin,56px); }
.mismatch .line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-strong); border-radius: 2px; }
.mismatch .events { position: absolute; inset: 0; }
.mismatch .ev { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.is-active .mismatch .ev { animation: evPop .4s var(--ease) backwards, twinkle 3.2s var(--ease) infinite; animation-delay: var(--dl,0s), calc(var(--dl,0s) + .4s); }
.mismatch .yr { position: absolute; top: calc(50% + 18px); font-family: var(--font-num); font-size: 11px; color: var(--faint); transform: translateX(-50%); }
.mismatch .bracket { position: absolute; left: 0; width: 84%; top: calc(50% - 58px); height: 30px; border: 1px solid var(--line-strong); border-bottom: none; border-radius: 10px 10px 0 0; }
.mismatch .bracket span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--surface-solid); padding: 0 12px; font-size: 12px; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.mismatch .judged { position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mismatch .judged .mk { width: 6px; height: 60px; border-radius: 4px; background: var(--fg-strong); box-shadow: 0 0 0 7px color-mix(in srgb, var(--fg-strong) 10%, transparent); }
.mismatch .judged .lb { font-size: 11px; font-weight: 800; line-height: 1.15; color: var(--fg-strong); white-space: nowrap; text-align: center; }
.is-active .mismatch .judged { animation: breathe 3s var(--ease) infinite; }
@keyframes evPop { from { opacity: 0; transform: translate(-50%,-50%) scale(0); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes twinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ============================================================
   05 — COST
   ============================================================ */
.cost-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,2vmin,20px); }
@media (max-width: 900px){ .cost-grid{ grid-template-columns: repeat(2,1fr);} }
.cost-card { text-align: left; }
.cost-card .ct { font-size: clamp(.95rem,2vmin,1.15rem); font-weight: 700; color: var(--fg-strong); margin: 12px 0 6px; }
.cost-card .cd { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dvv-counter { display: flex; align-items: center; justify-content: center; gap: clamp(14px,3vmin,34px); margin-top: 8px; }
.dvv-counter .n { font-size: clamp(2.8rem,9vmin,6rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dvv-counter .n.was { color: var(--faint); position: relative; }
.dvv-counter .n.was::after { content:""; position:absolute; left:-6%; right:-6%; top:52%; height:5px; background:#ff5a5f; transform: scaleX(0); transform-origin:left; }
.is-active .dvv-counter .n.was::after { animation: strike .5s var(--ease) 1s forwards; }
.dvv-counter .n.now { color: var(--accent); }
.dvv-counter .arrow { color: var(--muted); font-size: clamp(1.4rem,3vmin,2rem); }

/* ============================================================
   06 — THE TURN (sunrise burst: rays + lens flare, dark -> light)
   ============================================================ */
.turn { position: relative; width: 100%; height: 100%; }

/* full-viewport scene, created in JS and appended to <body> so it covers the bars too */
.sunburst { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; display: grid; place-items: center; background: #0a0b0e; }

/* the light wash that floods the screen from the centre */
.sunburst .sb-wash { position: absolute; inset: 0; z-index: 1; clip-path: circle(0% at 50% 50%);
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f7f9fc 45%, #eef1f5 100%); }
.sunburst.go .sb-wash { animation: washExpand 1.9s cubic-bezier(.16,1,.3,1) forwards; }

/* rotating sun rays (bloom in/out) */
.sunburst .sb-raywrap { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%) scale(0); opacity: 0; mix-blend-mode: screen; }
.sunburst.go .sb-raywrap { animation: rayBloom 2.4s cubic-bezier(.16,1,.3,1) forwards; }
.sunburst .sb-rays { width: 220vmax; height: 220vmax; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.20) 1.6deg, rgba(255,255,255,0) 5deg); }
.sunburst.go .sb-rays { animation: raySpin 26s linear infinite; }

/* bright core bloom */
.sunburst .sb-core { position: absolute; left: 50%; top: 50%; z-index: 3; width: 42vmin; height: 42vmin; transform: translate(-50%,-50%) scale(0); opacity: 0; border-radius: 50%; filter: blur(3px); mix-blend-mode: screen;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.65) 28%, rgba(255,255,255,0) 70%); }
.sunburst.go .sb-core { animation: coreBloom 2.4s cubic-bezier(.16,1,.3,1) forwards; }

/* lens flare chain + horizontal streak */
.sunburst .sb-flare { position: absolute; inset: 0; z-index: 3; opacity: 0; mix-blend-mode: screen; }
.sunburst.go .sb-flare { animation: flareInOut 2.4s ease forwards; }
.sunburst .lf { position: absolute; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%); }
.sunburst .lf1 { left: 50%; top: 50%; width: 16vmin; height: 16vmin; }
.sunburst .lf2 { left: 62%; top: 58%; width: 5vmin; height: 5vmin; }
.sunburst .lf3 { left: 70%; top: 64%; width: 9vmin; height: 9vmin; background: radial-gradient(circle, rgba(255,255,255,0) 55%, rgba(255,255,255,.5) 62%, rgba(255,255,255,0) 70%); }
.sunburst .lf4 { left: 38%; top: 42%; width: 4vmin; height: 4vmin; }
.sunburst .lf5 { left: 30%; top: 36%; width: 7vmin; height: 7vmin; background: radial-gradient(circle, rgba(255,255,255,0) 58%, rgba(255,255,255,.45) 64%, rgba(255,255,255,0) 72%); }
.sunburst .sb-streak { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 2px; transform: translateY(-50%) scaleX(0); transform-origin: center; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent); }
.sunburst.go .sb-streak { animation: streakIn 2.4s cubic-bezier(.16,1,.3,1) forwards; }

/* the two lines (always on top; darken when the scene becomes light) */
.sunburst .sb-text { position: relative; z-index: 5; display: flex; flex-direction: column; gap: clamp(14px,2.6vmin,30px); text-align: center; padding: 0 6vw; }
.sunburst .sb-line { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: #f5f7fa; opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), color 1.1s var(--ease-out); }
.sunburst .sb-line.show { opacity: 1; transform: none; }
.sunburst.lit .sb-line { color: #14161a; }
.sunburst .sb-line.l1 { display: flex; flex-direction: column; align-items: center; gap: clamp(2px,.6vmin,10px); }
.sunburst .hope-lead { font-size: clamp(.95rem, 2.8vmin, 1.9rem); font-weight: 600; letter-spacing: .06em; opacity: .82; }
.sunburst .hope-word { font-size: clamp(3.6rem, 14vmin, 9.5rem); font-weight: 800; line-height: .88; letter-spacing: -.035em; color: var(--accent); }
.sunburst .sb-line.l2 { font-size: clamp(1.5rem, 4.4vmin, 2.8rem); font-weight: 700; }
.sunburst .sb-line em { font-style: normal; color: var(--accent); }

@keyframes washExpand { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }
@keyframes raySpin { to { transform: rotate(360deg); } }
@keyframes rayBloom { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 35% { opacity: .85; } 70% { opacity: .5; } 100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0; } }
@keyframes coreBloom { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 35% { opacity: 1; } 65% { transform: translate(-50%,-50%) scale(3); } 100% { transform: translate(-50%,-50%) scale(5); opacity: 0; } }
@keyframes flareInOut { 0% { opacity: 0; } 25% { opacity: 0; } 55% { opacity: .9; } 80% { opacity: .5; } 100% { opacity: 0; } }
@keyframes streakIn { 0% { transform: translateY(-50%) scaleX(0); opacity: 0; } 45% { opacity: 1; } 65% { transform: translateY(-50%) scaleX(1); } 100% { opacity: 0; } }

/* ============================================================
   07 — FIVE SHIFTS
   ============================================================ */
.shifts { display: flex; flex-direction: column; gap: clamp(8px,1.6vmin,16px); }
.shift-row { display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: clamp(12px,2.4vmin,28px);
  padding: clamp(10px,1.8vmin,18px) clamp(14px,2.4vmin,24px); border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.shift-row .from { color: var(--muted); font-weight: 600; text-align: right; font-size: clamp(.95rem,2vmin,1.25rem); text-decoration: line-through; text-decoration-color: var(--faint); }
.shift-row .to { color: var(--fg-strong); font-weight: 800; font-size: clamp(1rem,2.3vmin,1.4rem); }
.shift-row .to b { color: var(--accent); }
.shift-row .arr { width: clamp(34px,6vmin,56px); height: 2px; background: var(--line-strong); position: relative; }
.shift-row .arr::after { content:""; position:absolute; right:0; top:-3px; width:8px; height:8px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform: rotate(45deg); }
.is-active .shift-row .arr { animation: arrFlow 1.4s var(--ease) infinite; }

/* ============================================================
   08 — ENGINE PIPELINE
   ============================================================ */
.pipeline { position: relative; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); padding: clamp(18px,3vmin,30px); overflow: hidden; }
.pipe-track { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; }
.pipe-stage { flex: 1; text-align: center; font-size: clamp(11px,1.5vmin,13px); color: var(--muted); position: relative; z-index: 2; }
.pipe-stage .ps-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); margin: 0 auto 8px; }
.pipe-line { position: absolute; left: 6%; right: 6%; top: 6px; height: 2px; background: var(--line-strong); z-index: 0; }
.pipe-doc { position: absolute; top: -2px; left: 4%; width: 22px; height: 28px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 16px var(--accent); z-index: 3; }
.is-active .pipe-doc { animation: pipeMove 5s var(--ease) infinite; }
.layers { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(16px,2.6vmin,26px); }
.layer { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); font-size: clamp(.85rem,1.7vmin,1.05rem); color: var(--fg); }
.layer .ln { font-family: var(--font-num); font-size: 12px; color: var(--accent); width: 22px; }
.layer b { color: var(--fg-strong); }

/* ============================================================
   09 — LOOP
   ============================================================ */
.loop { position: relative; width: clamp(260px, 46vmin, 460px); aspect-ratio: 1; margin: 0 auto; }
.loop .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line-strong); }
.is-active .loop .ring { animation: spinSlow 30s linear infinite; }
.loop .ring::after { content:""; position:absolute; top:-7px; left:calc(50% - 6px); width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.loop-node { position: absolute; width: clamp(64px,12vmin,104px); aspect-ratio:1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); font-size: clamp(10px,1.5vmin,13px); font-weight: 700; color: var(--fg); }
.loop-center { position: absolute; inset: 26%; border-radius: 50%; display: grid; place-items: center; text-align: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface-solid)); border: 1px solid color-mix(in srgb,var(--accent) 40%, transparent); }
.loop-center b { color: var(--accent); display: block; font-size: clamp(.95rem,2.3vmin,1.4rem); }
.loop-center span { font-size: 12px; color: var(--muted); }

/* ============================================================
   10 — ACCREDITATION GPS
   ============================================================ */
.gps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,4vmin,56px); align-items: center; }
@media (max-width: 880px){ .gps{ grid-template-columns:1fr; } }
.gauge { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1/.62; margin: 0 auto; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge .track { fill: none; stroke: var(--line-strong); stroke-width: 16; stroke-linecap: round; }
.gauge .prog { fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 60%, transparent)); transition: stroke-dashoffset 1.7s var(--ease-out); }
.gauge.go .prog { stroke-dashoffset: var(--target, 30); }
.gauge .target-mark { stroke: var(--fg); stroke-width: 3; stroke-dasharray: 3 4; opacity: .6; }
.gauge .gval { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; }
.gauge .gval .grade { font-size: clamp(2.2rem,7vmin,4rem); font-weight: 800; color: var(--fg-strong); letter-spacing: -.03em; }
.gauge .gval .cgpa { font-family: var(--font-num); font-size: 14px; color: var(--muted); }
.route .turn-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.route .turn-item:last-child { border-bottom: none; }
.route .turn-item .tn { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb,var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.route .turn-item .tt { font-size: clamp(.9rem,1.9vmin,1.1rem); color: var(--fg); }
.route .turn-item .tt b { color: var(--fg-strong); }
.eta { display: inline-flex; align-items: baseline; gap: 10px; }
.eta .ev { font-size: clamp(2rem,5.5vmin,3.4rem); font-weight: 800; color: var(--accent); letter-spacing: -.03em; }

/* ============================================================
   11 — DIFFERENTIATORS
   ============================================================ */
.diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,2vmin,20px); }
@media (max-width: 900px){ .diff-grid{ grid-template-columns: repeat(2,1fr);} }
.diff-card { display: flex; flex-direction: column; gap: 10px; }
.diff-card .dt { font-weight: 800; color: var(--fg-strong); font-size: clamp(1rem,2vmin,1.2rem); }
.diff-card .dd { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ============================================================
   12 — PILLARS / SOURCES
   ============================================================ */
.pillars-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vmin,64px); align-items: center; }
@media (max-width: 880px){ .pillars-wrap{ grid-template-columns:1fr; } }
.flow { display: flex; flex-direction: column; gap: clamp(8px,1.6vmin,16px); }
.flow-ins { display: flex; flex-direction: column; gap: clamp(7px,1.2vmin,12px); }
.flow-in { display: flex; align-items: center; gap: 12px; padding: clamp(11px,1.8vmin,16px) clamp(14px,2vmin,18px); border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.flow-in .act { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--fg); }
.flow-in .act.on { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 50%, transparent); background: color-mix(in srgb,var(--accent) 10%, transparent); }
.flow-in .lbl { font-size: clamp(.88rem,1.7vmin,1.08rem); color: var(--fg); }
.flow-arrow { align-self: center; width: 2px; height: clamp(16px,3vmin,30px); background: linear-gradient(var(--accent), color-mix(in srgb,var(--accent) 20%, transparent)); position: relative; }
.flow-arrow::after { content: ""; position: absolute; bottom: -2px; left: -4px; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.flow-hub { text-align: center; padding: clamp(16px,2.6vmin,26px); border-radius: 16px; background: color-mix(in srgb,var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 50%, transparent); box-shadow: 0 16px 44px color-mix(in srgb,var(--accent) 22%, transparent); }
.flow-hub b { display: block; font-size: clamp(1.1rem,2.7vmin,1.65rem); font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.flow-hub span { font-size: clamp(11.5px,1.5vmin,13.5px); color: var(--muted); }
.flow-out { display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; color: var(--fg-strong); font-size: clamp(1rem,2.3vmin,1.4rem); }
.flow-out .scale { color: var(--accent); }
.src-list { display: flex; flex-direction: column; gap: 10px; }
.src { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.src .tagmark { font-size: 10px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--fg); }
.src .tagmark.int { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 45%, transparent); }

/* ============================================================
   13 — PROOF (package + dashboard)
   ============================================================ */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,4vmin,52px); align-items: center; }
@media (max-width: 880px){ .proof{ grid-template-columns:1fr; } }
.pkg { position: relative; height: clamp(200px,34vmin,320px); }
.pkg-file { position: absolute; left: 50%; top: 50%; width: clamp(120px,22vmin,190px); aspect-ratio: 4/5; border-radius: 12px;
  background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); padding: 14px; transform-origin: bottom center; }
.pkg-file .pf-tag { font-family: var(--font-num); font-size: 11px; color: var(--accent); }
.pkg-file .pf-name { font-size: 12px; font-weight: 700; color: var(--fg); margin-top: 6px; }
.pkg-file .pf-bar { height: 4px; border-radius: 2px; background: var(--line-strong); margin-top: 9px; }
.pkg-file .pf-bar:nth-of-type(odd){ width: 80%; }
.is-active .pkg-file { animation: fanOut .8s var(--ease-out) forwards; transform: translate(-50%,-50%); opacity: 0; }
.dash { padding: clamp(14px,2.4vmin,22px); }
.dash .d-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash .d-grade { font-size: clamp(1.6rem,4vmin,2.4rem); font-weight: 800; color: var(--accent); }
.dash .bar { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: 10px; margin: 9px 0; font-size: 12px; color: var(--muted); }
.dash .bar .track { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.dash .bar .fill { height: 100%; border-radius: 5px; background: var(--accent); width: 0; transition: width 1.2s var(--ease-out); transition-delay: var(--d,0s); }
.is-active .dash .bar .fill { width: var(--w, 60%); }

/* ============================================================
   14 — NETWORK (1 -> 38)
   ============================================================ */
.network { position: relative; width: clamp(280px,52vmin,560px); aspect-ratio: 1.4/1; margin: 0 auto; }
.network .nn { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); transform: translate(-50%,-50%); }
.network .nn.core { width: 26px; height: 26px; background: var(--accent); border: none; box-shadow: 0 0 20px var(--accent); z-index: 2; }
.is-active .network .nn:not(.core) { animation: nodePop .5s var(--ease) forwards; opacity: 0; transform: translate(-50%,-50%) scale(0); }
.network .ripple { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; }
.is-active .network .ripple { animation: rippleOut 3s var(--ease-out) infinite; }

/* ============================================================
   15 — ROADMAP TIMELINE
   ============================================================ */
.timeline { position: relative; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; padding-top: 30px; }
@media (max-width: 900px){ .timeline{ grid-template-columns: repeat(3,1fr); row-gap: 28px; } }
.timeline::before { content:""; position: absolute; top: 36px; left: 3%; right: 3%; height: 2px; background: var(--line-strong); }
.timeline .tl-fill { position: absolute; top: 36px; left: 3%; height: 2px; background: var(--accent); width: 0; }
.is-active .timeline .tl-fill { animation: fillLine 2.2s var(--ease-out) forwards; }
.tl-step { position: relative; text-align: center; }
.tl-step .node { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line-strong); margin: 0 auto 14px; position: relative; z-index: 2; }
.is-active .tl-step .node { animation: nodeLight .4s var(--ease) forwards; animation-delay: calc(var(--i) * .32s); }
.tl-step .ph { font-family: var(--font-num); font-size: 11px; color: var(--accent); }
.tl-step .tx { font-size: 12.5px; color: var(--fg); font-weight: 600; margin-top: 4px; }
.tl-step .dt { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ============================================================
   16 — CLOSE
   ============================================================ */
.close { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; overflow: hidden; }
.close .sun { position: absolute; left: 50%; bottom: -30%; width: 70vmin; height: 70vmin; border-radius: 50%; transform: translateX(-50%) scale(.2);
  background: radial-gradient(circle, color-mix(in srgb,var(--accent) 30%, transparent), transparent 60%); opacity: 0; }
.is-active .close .sun { animation: riseSun 1.6s var(--ease-out) forwards; }
.close .close-inner { position: relative; z-index: 2; }
.close .close-tag { font-size: clamp(2rem,6.4vmin,4.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--fg-strong); max-width: 18ch; }
.close .close-tag em { font-style: normal; color: var(--accent); }
.cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: clamp(.95rem,2vmin,1.15rem); box-shadow: 0 14px 40px color-mix(in srgb,var(--accent) 40%, transparent); }
.is-active .cta { animation: breathe 3s var(--ease) infinite 1.6s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes cgLight { to { opacity: 1; } }
@keyframes docFloat { from { transform: translateY(0) rotate(var(--r,0deg)); } to { transform: translateY(-18px) rotate(calc(var(--r,0deg) + 4deg)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-11deg) scale(2); } 60% { opacity: 1; transform: translate(-50%,-50%) rotate(-11deg) scale(.92); } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(-11deg) scale(1); } }
@keyframes streamMove { from { transform: translateX(0); } to { transform: translateX(120%); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes flood { to { transform: translate(-50%,-50%) scale(280); opacity: 1; } }
@keyframes arrFlow { 0% { opacity:.4; transform: translateX(-4px);} 50%{opacity:1;} 100% { opacity:.4; transform: translateX(4px);} }
@keyframes pipeMove { 0% { left: 4%; } 100% { left: 92%; } }
@keyframes riseUp { to { transform: scaleY(1); opacity: 1; } }
@keyframes fanOut { to { opacity: 1; } }
@keyframes nodePop { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes rippleOut { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(7); opacity: 0; } }
@keyframes fillLine { to { width: 94%; } }
@keyframes nodeLight { to { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent); } }
@keyframes riseSun { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes breatheGlow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--accent) 40%, transparent);} 50%{ box-shadow: 0 0 0 14px transparent;} }