/* ═══════════════════════════════════════════════════════════════════
   ExO 3.0 Narrative Assessment — v8 "STARK"
   Cinematic. Interactive. Visceral.
   Every chapter is a different instrument panel.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#020202;--surface:rgba(10,10,14,.92);--surface1:rgba(15,15,20,.85);
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.1);--border-hover:rgba(0,229,200,.35);
  --teal:#00E5C8;--teal-dim:rgba(0,229,200,.12);--teal-glow:rgba(0,229,200,.06);--teal-hot:rgba(0,229,200,.8);
  --red:#f87171;--red-glow:rgba(248,113,113,.15);--red-hot:rgba(248,113,113,.8);--red-pulse:rgba(248,113,113,.25);
  --amber:#f59e0b;--amber-glow:rgba(245,158,11,.15);
  --green:#4ade80;--green-glow:rgba(74,222,128,.15);
  --blue:#60a5fa;--purple:#a78bfa;
  --text:#e0e0e0;--text2:#b0b0b0;--muted:#666;--white:#fff;
  --font:Inter,Arial,sans-serif;--font-mono:'JetBrains Mono',monospace;--font-display:Orbitron,Arial,sans-serif;
  --radius:6px;--radius-lg:10px;--max-w:800px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.5px;line-height:1.2}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;border:none;background:none;font-family:var(--font)}
::selection{background:var(--teal-dim);color:var(--teal)}

/* ─── AMBIENT ─── */
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,229,200,.03) 0%,transparent 60%);pointer-events:none;z-index:0}

/* ─── SCAN LINE ─── */
.hud-scan{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,229,200,.12),transparent);pointer-events:none;z-index:999;animation:scanline 8s linear infinite}
.red-scan .hud-scan{background:linear-gradient(90deg,transparent,rgba(248,113,113,.2),transparent)}
@keyframes scanline{0%{top:-2px}100%{top:100vh}}

/* ─── NARRATIVE ─── */
#narrative{position:relative;z-index:1}

/* ─── PROGRESS BAR ─── */
.nar-progress{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.04);z-index:100}
.nar-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-hot));transition:width .3s ease;width:0%;box-shadow:0 0 8px var(--teal-dim)}

/* ─── HERO ─── */
.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 24px;position:relative;overflow:hidden}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 20%,rgba(0,229,200,.08) 0%,transparent 60%);pointer-events:none}
.hero-particles{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}
.hero-particle{position:absolute;width:2px;height:2px;background:var(--teal);border-radius:50%;opacity:0;animation:particle-float linear infinite}
.hero-energy-core{position:relative;width:120px;height:120px;margin:0 auto 32px;display:flex;align-items:center;justify-content:center}
.energy-ring{position:absolute;border-radius:50%;border:1px solid var(--teal-dim);animation:pulse-ring 3s ease-in-out infinite}
.energy-ring:nth-child(1){width:80px;height:80px;animation-delay:0s}
.energy-ring:nth-child(2){width:100px;height:100px;animation-delay:.5s;opacity:.6}
.energy-ring:nth-child(3){width:120px;height:120px;animation-delay:1s;opacity:.3}
.energy-core-inner{width:40px;height:40px;background:radial-gradient(circle,var(--teal-hot),var(--teal));border-radius:50%;box-shadow:0 0 30px var(--teal-dim),0 0 60px var(--teal-glow);animation:core-pulse 2s ease-in-out infinite;z-index:1}
@keyframes pulse-ring{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.15);opacity:.6}}
@keyframes core-pulse{0%,100%{box-shadow:0 0 30px var(--teal-dim),0 0 60px var(--teal-glow)}50%{box-shadow:0 0 50px var(--teal-hot),0 0 100px var(--teal-dim)}}
.hero-badge{margin-bottom:24px}
.hero-title{font-family:var(--font-display);font-size:clamp(28px,5vw,48px);color:var(--teal);letter-spacing:4px;margin-bottom:16px}
.hero-subtitle{font-size:clamp(13,2vw,16px);color:var(--muted);margin-bottom:32px;line-height:1.6;max-width:560px;margin-left:auto;margin-right:auto}
.hero-client{margin-top:24px;padding:14px 22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:inline-block}
.hero-cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-stat{text-align:center;padding:12px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:95px;transition:all .3s}
.hero-stat:hover{border-color:var(--border2);transform:translateY(-2px)}
.hero-stat-val{font-family:var(--font-display);font-size:26px;color:var(--teal)}
.hero-stat-val.red{color:var(--red)}
.hero-stat-val.amber{color:var(--amber)}
.hero-stat-label{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* ─── SECTIONS ─── */
.nar-section{padding:80px 24px;position:relative}
.nar-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}
.nar-inner{max-width:var(--max-w);margin:0 auto}

/* ─── SURVIVAL RISK MODE ─── */
.survival-risk{position:relative}
.survival-risk::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 30%,rgba(248,113,113,.06) 0%,transparent 60%);pointer-events:none;animation:survival-pulse 4s ease-in-out infinite}
@keyframes survival-pulse{0%,100%{opacity:.3}50%{opacity:.7}}
.survival-risk .sec-label{color:var(--red)}
.survival-risk .sec-label::before{background:var(--red)}
.survival-glow{animation:survival-glow 3s ease-in-out infinite}
@keyframes survival-glow{0%,100%{box-shadow:0 0 20px rgba(248,113,113,.1)}50%{box-shadow:0 0 40px rgba(248,113,113,.2),0 0 80px rgba(248,113,113,.1)}}

/* ─── SECTION LABELS ─── */
.sec-label{font-family:var(--font-mono);font-size:9px;color:var(--teal);text-transform:uppercase;letter-spacing:4px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec-label::before{content:'';display:block;width:20px;height:1px;background:var(--teal)}
.sec-label.red{color:var(--red)}
.sec-label.red::before{background:var(--red)}
.sec-label.amber{color:var(--amber)}
.sec-label.amber::before{background:var(--amber)}
.sec-label.green{color:var(--green)}
.sec-label.green::before{background:var(--green)}
.sec-title{font-size:clamp(22px,3.5vw,32px);color:var(--white);margin-bottom:16px;font-weight:600;line-height:1.3}
.sec-body{font-size:15px;color:var(--text2);line-height:1.8;margin-bottom:20px}
.sec-body strong{color:var(--white)}

/* ─── PULL QUOTES ─── */
.pullquote{border-left:2px solid var(--teal);padding:16px 20px;margin:24px 0;background:linear-gradient(90deg,rgba(0,229,200,.04),transparent);border-radius:0 var(--radius) var(--radius) 0;font-size:15px;color:var(--text2);line-height:1.7;font-style:italic}
.pullquote-r{border-left-color:var(--red);background:linear-gradient(90deg,rgba(248,113,113,.04),transparent)}
.pullquote-a{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.04),transparent)}
.pullquote-g{border-left-color:var(--green);background:linear-gradient(90deg,rgba(74,222,128,.04),transparent)}

/* ─── SCORE DISPLAYS ─── */
.score-hero{text-align:center;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin:24px 0;position:relative;overflow:hidden}
.score-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.score-hero.red::before{background:radial-gradient(ellipse at 50% 30%,rgba(248,113,113,.08) 0%,transparent 60%)}
.score-hero.amber::before{background:radial-gradient(ellipse at 50% 30%,rgba(245,158,11,.08) 0%,transparent 60%)}
.score-hero.green::before{background:radial-gradient(ellipse at 50% 30%,rgba(74,222,128,.08) 0%,transparent 60%)}
.score-big{font-family:var(--font-display);font-size:clamp(48px,8vw,72px);font-weight:700;line-height:1;position:relative;z-index:1}
.score-big.red{color:var(--red);text-shadow:0 0 30px rgba(248,113,113,.3)}
.score-big.amber{color:var(--amber);text-shadow:0 0 30px rgba(245,158,11,.3)}
.score-big.green{color:var(--green);text-shadow:0 0 30px rgba(74,222,128,.3)}
.score-sub{font-size:14px;color:var(--muted);margin-top:8px;position:relative;z-index:1}
.score-band{display:inline-block;padding:4px 14px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-top:12px;position:relative;z-index:1}
.score-band.red{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.score-band.amber{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
.score-band.green{background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.2)}

/* ─── GAP VISUALIZATION ─── */
.gap-viz{display:flex;align-items:center;gap:0;margin:24px 0;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.gap-current{text-align:center;padding:20px;flex:1}
.gap-current-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.gap-current-score{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--red)}
.gap-current-sub{font-size:11px;color:var(--muted)}
.gap-arrow{padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:4px}
.gap-arrow-line{width:40px;height:2px;background:linear-gradient(90deg,var(--red),var(--green));position:relative}
.gap-arrow-line::after{content:'';position:absolute;right:-4px;top:-3px;width:0;height:0;border-left:6px solid var(--green);border-top:4px solid transparent;border-bottom:4px solid transparent}
.gap-target{text-align:center;padding:20px;flex:1}
.gap-target-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.gap-target-score{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--green)}
.gap-target-sub{font-size:11px;color:var(--muted)}
.gap-needle{margin-top:16px;padding:10px 16px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.15);border-radius:var(--radius);text-align:center;font-size:13px;color:var(--text2)}

/* ─── DIMENSION GRID ─── */
.dim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
@media(max-width:600px){.dim-grid{grid-template-columns:1fr}}
.dim-item{background:var(--surface1);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;position:relative;overflow:hidden;transition:all .4s}
.dim-item:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dim-score{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:4px;position:relative;z-index:1}
.dim-max{font-size:12px;color:var(--muted);font-weight:400}
.dim-fill{position:absolute;bottom:0;left:0;right:0;opacity:.06;border-radius:0 0 var(--radius) var(--radius)}
.dim-fill.animated{animation:fill-grow 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fill-grow{from{height:0}}
.dim-label{font-size:11px;font-weight:600;color:var(--white);margin-top:8px;position:relative;z-index:1}
.dim-reality{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4;position:relative;z-index:1}

/* ─── LADDER ─── */
.ladder{display:flex;flex-direction:column;gap:6px;margin:20px 0}
.ladder-step{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:all .4s;position:relative}
.ladder-step:hover{border-color:var(--border-hover)}
.ladder-step.current{border-color:var(--teal);background:linear-gradient(135deg,rgba(0,229,200,.06),transparent);box-shadow:0 0 30px var(--teal-dim),inset 0 0 20px var(--teal-glow)}
.ladder-step.current::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--teal);box-shadow:0 0 8px var(--teal-hot)}
.ladder-num{width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:10px;color:var(--muted);flex-shrink:0;transition:all .4s}
.ladder-step.current .ladder-num{border-color:var(--teal);color:var(--teal);box-shadow:0 0 12px var(--teal-dim)}
.ladder-name{font-size:13px;font-weight:600;color:var(--white)}
.ladder-desc{font-size:11px;color:var(--muted)}

/* ─── TEST RESULTS ─── */
.test-result{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface1);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;transition:border-color .3s}
.test-result:hover{border-color:var(--border2)}
.test-name{font-size:12px;color:var(--text2)}
.test-badge{font-family:var(--font-display);font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px}
.test-badge.fail{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.test-badge.pass{background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.2)}
.test-badge.warn{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2)}

/* ─── GAUGE BARS ─── */
.gauge-row{margin-bottom:14px;padding:12px;background:var(--surface1);border-radius:var(--radius);border:1px solid var(--border);transition:border-color .3s}
.gauge-row:hover{border-color:var(--border2)}
.gauge-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.gauge-id{font-family:var(--font-display);font-size:12px;font-weight:700;width:20px}
.gauge-name{flex:1;font-size:12px;font-weight:600;color:var(--white)}
.gauge-score{font-family:var(--font-mono);font-size:11px;font-weight:700}
.gauge-bar{height:5px;background:rgba(245,255,255,.04);border-radius:3px;overflow:hidden;position:relative}
.gauge-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 3s ease-in-out infinite;pointer-events:none}
.gauge-fill{height:100%;border-radius:3px;position:relative}
.gauge-fill.animated{animation:gauge-fill 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes gauge-fill{from{width:0}}
.gauge-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25));border-radius:0 3px 3px 0}
.gauge-reality{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}

/* ─── CALLOUT ─── */
.callout{border-left:2px solid var(--teal);background:linear-gradient(90deg,rgba(0,229,200,.04),transparent);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0}
.callout-r{border-left-color:var(--red);background:linear-gradient(90deg,rgba(248,113,113,.04),transparent)}
.callout-a{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.04),transparent)}
.callout-g{border-left-color:var(--green);background:linear-gradient(90deg,rgba(74,222,128,.04),transparent)}
.cl-title{font-size:10px;font-weight:700;color:var(--white);margin-bottom:4px;text-transform:uppercase;letter-spacing:1px}
.cl-body{font-size:13px;color:var(--muted);line-height:1.6}

/* ─── BLUEPRINT REVEAL ─── */
.blueprint-reveal{position:relative;padding:24px;background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--teal);border-radius:var(--radius-lg);margin:20px 0;overflow:hidden}
.blueprint-reveal::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(0,229,200,.02) 24px,rgba(0,229,200,.02) 25px);pointer-events:none;animation:blueprint-scan 4s linear infinite}
@keyframes blueprint-scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.blueprint-header{position:relative;z-index:1}
.blueprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;position:relative;z-index:1}
.spec-field{padding:10px;background:var(--surface1);border:1px solid var(--border);border-radius:var(--radius);transition:all .3s}
.spec-field:hover{border-color:var(--border-hover)}
.spec-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-family:var(--font-mono)}
.spec-value{font-size:12px;color:var(--white);margin-top:4px}
.spec-value.forbidden{color:var(--red)}

/* ─── CTA ─── */
.cta-section{text-align:center;padding:80px 24px;position:relative}
.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 30%,rgba(0,229,200,.06) 0%,transparent 60%);pointer-events:none}
.cta-box{position:relative;z-index:1;background:linear-gradient(135deg,rgba(0,229,200,.06),rgba(0,229,200,.02));border:1px solid rgba(0,229,200,.15);border-radius:var(--radius-lg);padding:40px 32px;margin:24px 0}
.cta-title{font-family:var(--font-display);font-size:clamp(18px,3vw,24px);color:var(--white);margin-bottom:12px}
.cta-body{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.7}
.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:var(--teal);color:var(--bg);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:var(--radius);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.cta-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}
.cta-btn:hover::before{left:100%}
.cta-btn:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,229,200,.3)}
.cta-stats{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:32px 0}
.cta-stat{text-align:center}
.cta-stat-val{font-family:var(--font-display);font-size:24px;color:var(--teal)}
.cta-stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* ─── SCROLL ANIMATIONS ─── */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-scale{opacity:0;transform:scale(.95);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.fade-scale.visible{opacity:1;transform:scale(1)}
.slide-left{opacity:0;transform:translateX(-30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.slide-left.visible{opacity:1;transform:translateX(0)}
.slide-right{opacity:0;transform:translateX(30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.slide-right.visible{opacity:1;transform:translateX(0)}

/* ─── PARTICLE CONNECTIONS ─── */
.particle-bridge{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;overflow:hidden}
.particle-dot{position:absolute;width:3px;height:3px;background:var(--teal);border-radius:50%;opacity:0;animation:particle-drift linear infinite}
@keyframes particle-drift{0%{opacity:0;transform:translateY(0)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-100px)}}

/* ─── ANIMATIONS ─── */
@keyframes particle-float{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-20px) scale(1)}}
@keyframes shimmer{0%,100%{opacity:0}50%{opacity:1}}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .hero-stats{flex-direction:column;gap:12px;align-items:center}
  .hero-stat{min-width:120px}
  .cta-stats{flex-direction:column;gap:16px}
  .gap-viz{flex-direction:column;gap:16px}
  .blueprint-grid{grid-template-columns:1fr}
}