<!-- :root{
    --bg:#050308;
    --bg2:#0a0512;
    --ink:#f4f2fb;
    --muted:#9a93b3;
    --mag:#FF00FF;
    --cyan:#00FFFF;
    --energy:#FF5F1F;
    --tempo:#8A2BE2;
    --speech:#00FF7F;
    --maxw:1180px;
    --serif:"Syncopate","Helvetica Neue",Helvetica,Arial,sans-serif;  /* display headings */
    --tech:"Syncopate","Helvetica Neue",Helvetica,Arial,sans-serif;   /* uppercase labels + numbers */
    --script:"Syncopate","Helvetica Neue",Helvetica,Arial,sans-serif; /* signature */
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--sans);line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--cyan);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* ---------- HERO ---------- */
  #hero{
    position:relative;min-height:100vh;display:flex;flex-direction:column;
    justify-content:center;align-items:center;text-align:center;
    overflow:hidden;padding:60px 20px;
  }
  #hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
  #hero .heroInner{position:relative;z-index:2;max-width:880px;}
  .kicker{
    font-family:var(--tech);letter-spacing:.28em;text-transform:uppercase;
    font-size:12px;color:var(--cyan);margin-bottom:30px;font-weight:700;
    text-shadow:0 0 14px rgba(0,255,255,.6);
  }
  #hero h1{
    font-family:var(--serif);font-weight:700;line-height:1.18;
    font-size:clamp(30px,5.6vw,72px);margin:0 0 22px;letter-spacing:-.01em;
    background:linear-gradient(100deg,var(--mag),#fff 45%,var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 26px rgba(255,0,255,.25));
  }
  #hero p.sub{font-size:clamp(17px,2.4vw,22px);color:var(--ink);opacity:.92;max-width:640px;margin:0 auto 12px;}
  #hero p.byline{color:var(--muted);font-size:14px;margin-top:30px;letter-spacing:.04em;}
  .scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;color:var(--muted);font-size:12px;letter-spacing:.3em;text-transform:uppercase;animation:bob 2s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}}

  /* ---------- PROSE BLOCKS ---------- */
  .prose{max-width:680px;margin:0 auto;padding:9vh 24px;}
  .prose.lead{padding-top:14vh;}
  .prose h2{
    font-family:var(--serif);font-size:clamp(22px,3.4vw,40px);line-height:1.28;
    margin:0 0 24px;font-weight:700;letter-spacing:-.01em;
  }
  .prose h2 .glow{color:var(--cyan);text-shadow:0 0 18px rgba(0,255,255,.45);}
  .prose h2 .glowm{color:var(--mag);text-shadow:0 0 18px rgba(255,0,255,.45);}
  .prose p{font-size:clamp(17px,2vw,19px);color:#d9d4ea;margin:0 0 20px;}
  .prose p.small{font-size:15px;color:var(--muted);}
  .prose .tag{display:inline-block;font-family:var(--tech);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid #2a2238;border-radius:30px;padding:6px 14px;margin-bottom:28px;}

  /* big stat row */
  .stats{display:flex;flex-direction:column;gap:0;margin:36px 0 18px;}
  .stat{padding:30px 0;border-bottom:1px solid #241c34;}
  .stat:first-child{border-top:1px solid #241c34;}
  .stat .num{font-family:var(--tech);font-weight:700;font-size:clamp(52px,11vw,104px);line-height:1;letter-spacing:-.02em;
    background:linear-gradient(120deg,var(--mag),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .stat .lbl{font-size:16px;color:var(--muted);margin-top:14px;max-width:520px;line-height:1.5;}

  /* ---------- SCROLLY SECTION ---------- */
  .scrolly{position:relative;}
  .scrolly .graphic{
    position:sticky;top:0;height:100vh;width:100%;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    z-index:1;
  }
  .figtitle{position:absolute;top:5vh;left:0;right:0;text-align:center;padding:0 20px;z-index:3;pointer-events:none;}
  .figtitle .ft-k{font-family:var(--tech);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
  .figtitle .ft-t{font-family:var(--serif);font-weight:700;font-size:clamp(15px,2vw,24px);margin-top:8px;color:#fff;line-height:1.25;}
  .chartbox{width:100%;max-width:900px;height:64vh;position:relative;}
  .chartbox svg{width:100%;height:100%;overflow:visible;}

  .steps{position:relative;z-index:2;max-width:520px;margin:0 auto;padding:0 24px;}
  .step{min-height:78vh;display:flex;align-items:center;}
  .step:first-child{min-height:60vh;}
  .step:last-child{min-height:70vh;}
  .step .card{
    background:rgba(12,8,20,.82);backdrop-filter:blur(9px);
    border:1px solid #261d36;border-left:3px solid var(--cyan);
    border-radius:14px;padding:24px 26px;
    box-shadow:0 18px 60px rgba(0,0,0,.55);
    opacity:.28;transform:translateY(18px);transition:opacity .5s,transform .5s,border-color .5s;
  }
  .step.active .card{opacity:1;transform:none;}
  .step .card.m{border-left-color:var(--mag);}
  .step .card.e{border-left-color:var(--energy);}
  .step .card h3{margin:0 0 10px;font-size:19px;font-family:var(--sans);font-weight:700;letter-spacing:.01em;}
  .step .card p{margin:0;font-size:16px;color:#cfc8e0;line-height:1.6;}
  .step .card .big{font-family:var(--tech);font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:10px;text-shadow:0 0 12px rgba(0,255,255,.4);}

  /* legend */
  .vlegend{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px;font-size:12px;color:var(--muted);}
  .vlegend .bar{width:200px;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--mag),#7a5fd0,var(--cyan));box-shadow:0 0 14px rgba(0,255,255,.25);}

  /* tooltip */
  .tt{position:fixed;pointer-events:none;z-index:50;background:rgba(8,5,14,.95);border:1px solid #3a2d50;
    border-radius:9px;padding:9px 12px;font-size:12px;color:#fff;max-width:230px;opacity:0;transition:opacity .12s;box-shadow:0 8px 30px rgba(0,0,0,.6);}
  .tt b{color:var(--cyan);}

  /* closing */
  /* ---------- EXPLORE / embedded dashboard ---------- */
  #explore{max-width:1320px;margin:0 auto;padding:10vh 22px 4vh;}
  #explore .explore-head{max-width:680px;margin:0 auto 30px;}
  .explore-frame{position:relative;border:1px solid #241c34;border-radius:20px;overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(255,0,255,.06);background:#050308;}
  .explore-frame iframe{width:100%;height:1560px;border:0;display:block;background:#050308;}
  .explore-note{max-width:680px;margin:16px auto 0;font-size:13px;color:var(--muted);text-align:center;}
  .explore-note a{color:var(--cyan);}
  @media(max-width:820px){ .explore-frame iframe{height:2300px;} }

  #closing{padding:12vh 0 4vh;}
  .future{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px;}
  .future .f{border:1px solid #241c34;border-radius:14px;padding:20px;background:linear-gradient(160deg,rgba(255,0,255,.05),rgba(0,255,255,.04));}
  .future .f h4{margin:0 0 8px;font-size:15px;color:var(--cyan);}
  .future .f p{font-size:14px;color:var(--muted);margin:0;}
  footer{text-align:center;color:var(--muted);font-size:13px;padding:50px 20px 70px;border-top:1px solid #1a1426;margin-top:40px;}
  .sig{display:inline-block;font-family:var(--script);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 16px rgba(0,255,255,.45);line-height:1;margin-top:14px;}
  .divider{height:1px;max-width:680px;margin:0 auto;background:linear-gradient(90deg,transparent,#332846,transparent);}

  .pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;}
  .pill.mag{background:rgba(255,0,255,.16);color:#ff7bff;}
  .pill.cy{background:rgba(0,255,255,.14);color:#7bffff;}

  /* desktop: chart on the left, text cards on the right so marks aren't covered */
  @media(min-width:900px){
    .graphic{align-items:flex-start;}
    .chartbox{max-width:56vw;margin-left:2.5vw;margin-top:5vh;}
    .figtitle{text-align:left;padding-left:3vw;right:auto;}
    .vlegend{justify-content:flex-start;margin-left:3vw;}
    .steps{margin-left:auto;margin-right:3vw;max-width:34vw;}
  }
  @media(max-width:720px){
    .chartbox{height:54vh;}
    .step{min-height:88vh;}
    .step .card{padding:18px 18px;}
  } -->