:root{
    --paper:#eaf1ff;
    --dim:rgba(234,241,255,.46);
    --cyan:#00E5FF;
    --green:#39FF88;
    --amber:#FFB300;
    --red:#FF1F3D;
    --violet:#B14BFF;
    --blue:#1E6BFF;
    --accent:#39FF88;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;padding:0;background:#04060c;}
  body{color:var(--paper);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;}
  a{color:var(--accent);text-decoration:none;}
  a:hover{color:#39FF88;}

  #bgfallback{position:fixed;inset:0;z-index:0;transition:background 1.1s linear;
    background:radial-gradient(140% 100% at 50% 42%, #241004 0%, #04201a 32%, #0a0616 62%, #030309 100%);}
  #scene{position:fixed;inset:0;z-index:1;display:block;pointer-events:none;}
  #vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(110% 80% at 50% 50%, rgba(0,0,0,0) 38%, rgba(2,3,8,.5) 74%, rgba(2,3,8,.94) 100%);}
  #scroller{position:relative;z-index:3;}

  .chrome{position:fixed;z-index:6;pointer-events:none;}
  #topbar{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
    padding:22px 34px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,241,255,.6);}
  #topbar .mark{display:flex;align-items:center;gap:11px;}
  #topbar .chip{width:9px;height:9px;border:1px solid var(--accent);border-radius:2px;
    box-shadow:0 0 12px var(--accent);transition:border-color .8s linear,box-shadow .8s linear;}
  #topbar .right{display:flex;gap:26px;align-items:center;}
  #topbar .cta{pointer-events:auto;border:1px solid rgba(255,255,255,.28);border-radius:999px;
    padding:7px 16px;color:var(--paper);transition:border-color .3s,color .3s,box-shadow .3s;}
  #topbar .cta:nth-of-type(1):hover{border-color:#39FF88;color:#39FF88;box-shadow:0 0 22px rgba(57,255,136,.25);}
  #topbar .cta:nth-of-type(2):hover{border-color:#00E5FF;color:#00E5FF;box-shadow:0 0 22px rgba(0,229,255,.25);}
  #topbar .cta:hover{border-color:var(--accent);color:var(--accent);}

  #trace{right:34px;top:50%;transform:translateY(-50%);width:1px;height:min(40vh,300px);
    background:rgba(234,241,255,.12);}
  #trace i{position:absolute;left:-1px;top:0;width:3px;height:0%;background:var(--accent);
    box-shadow:0 0 14px var(--accent);transition:background .8s linear;}
  #hint{left:50%;bottom:24px;transform:translateX(-50%);font-size:9.5px;letter-spacing:.32em;
    text-transform:uppercase;color:rgba(234,241,255,.3);transition:opacity .45s ease;}

  section{position:relative;display:flex;align-items:center;padding:0 clamp(22px,6vw,110px);}
  .col{max-width:660px;}
  .eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);
    display:flex;align-items:center;gap:12px;margin-bottom:24px;transition:color .8s linear;}
  .eyebrow::before{content:"";width:34px;height:2px;opacity:.95;
    background:linear-gradient(90deg,#FF1F3D,#FFB300,#39FF88,#00E5FF,#1E6BFF,#B14BFF);
    background-size:300% 100%;animation:hue 7s linear infinite;box-shadow:0 0 12px rgba(255,255,255,.25);}
  h1,h2{margin:0;font-weight:600;letter-spacing:-.035em;line-height:.94;text-wrap:balance;}
  h1{font-size:clamp(38px,6.4vw,96px);}
  h2{font-size:clamp(30px,4.4vw,64px);}
  h2 em,h1 em{font-style:normal;color:var(--accent);transition:color .8s linear;}
  .lede{margin:24px 0 0;font-size:14.5px;line-height:1.65;color:var(--dim);max-width:52ch;}

  #s-hero{height:100vh;justify-content:center;text-align:center;}
  #s-hero h1{text-shadow:0 0 46px rgba(4,6,12,.92),0 0 14px rgba(4,6,12,.85);}
  #s-hero .lede{text-shadow:0 0 10px rgba(4,6,12,1),0 0 26px rgba(4,6,12,1),0 0 46px rgba(4,6,12,.95);
    margin-left:auto;margin-right:auto;text-align:center;position:relative;z-index:1;
    background:rgba(4,6,12,.42);backdrop-filter:blur(2px);padding:8px 16px;border-radius:2px;}
  #s-hero .eyebrow{justify-content:center;}
  #s-hero h1 .w1{color:#39FF88;text-shadow:0 0 34px rgba(57,255,136,.5);}
  #s-hero h1 .w2{color:#FFB300;text-shadow:0 0 34px rgba(255,179,0,.45);}
  #s-hero h1 .w3{color:#00E5FF;text-shadow:0 0 34px rgba(0,229,255,.5);}
  #s-hero h1 em{background:linear-gradient(92deg,#FF1F3D,#B14BFF,#1E6BFF,#39FF88,#FFB300,#FF1F3D);
    background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:hue 9s linear infinite;}
  @keyframes hue{to{background-position:320% 0;}}

  #s-core{min-height:120vh;}
  #s-core .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:clamp(30px,6vw,90px);align-items:center;width:100%;}
  .panels{display:flex;flex-direction:column;gap:14px;}
  .panel{padding:20px 22px;border:1px solid rgba(234,241,255,.1);
    background:linear-gradient(180deg,rgba(11,16,28,.82),rgba(5,8,15,.86));backdrop-filter:blur(7px);
    transition:border-color .4s,transform .4s;}
  .panel:hover{border-color:rgba(234,241,255,.26);transform:translateY(-3px);}
  .panel .k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;}
  .panel.c1 .k{color:#39FF88;}
  .panel.c2 .k{color:#00E5FF;}
  .panel.c3 .k{color:#FF1F3D;}
  .panel.c1{background:linear-gradient(180deg,rgba(4,26,16,.85),rgba(3,8,8,.88));}
  .panel.c2{background:linear-gradient(180deg,rgba(2,22,30,.85),rgba(3,7,10,.88));}
  .panel.c3{background:linear-gradient(180deg,rgba(28,4,10,.85),rgba(8,3,5,.88));}
  .panel h4{margin:9px 0 7px;font-size:16px;font-weight:600;letter-spacing:-.01em;}
  .panel p{margin:0;font-size:12px;line-height:1.55;color:var(--dim);}
  .panel .rule{height:2px;margin-bottom:16px;width:38px;}
  .panel.c1 .rule{background:#39FF88;box-shadow:0 0 16px rgba(57,255,136,.85);}
  .panel.c2 .rule{background:#00E5FF;box-shadow:0 0 16px rgba(0,229,255,.85);}
  .panel.c3 .rule{background:#FF1F3D;box-shadow:0 0 16px rgba(255,31,61,.85);}
  .panel.c1:hover{border-color:rgba(57,255,136,.45);}
  .panel.c2:hover{border-color:rgba(0,229,255,.45);}
  .panel.c3:hover{border-color:rgba(255,31,61,.45);}

  #s-industries{display:block;padding:0;}
  .chapter{height:100vh;}

  #s-pipeline{min-height:120vh;}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
    background:rgba(234,241,255,.1);margin-top:52px;border-top:1px solid rgba(234,241,255,.1);
    border-bottom:1px solid rgba(234,241,255,.1);}
  .step{background:rgba(4,7,13,.74);backdrop-filter:blur(6px);padding:26px 22px 30px;transition:background .35s;}
  .step:hover{background:rgba(10,16,28,.9);}
  .step{position:relative;}
  .step::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;transform:scaleX(0);
    transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.25,1);}
  .step:hover::after{transform:none;}
  .step:nth-child(1)::after{background:#39FF88;box-shadow:0 0 14px #39FF88;}
  .step:nth-child(2)::after{background:#FFB300;box-shadow:0 0 14px #FFB300;}
  .step:nth-child(3)::after{background:#FF1F3D;box-shadow:0 0 14px #FF1F3D;}
  .step:nth-child(4)::after{background:#1E6BFF;box-shadow:0 0 14px #1E6BFF;}
  .step:nth-child(1) .n{color:#39FF88;}
  .step:nth-child(2) .n{color:#FFB300;}
  .step:nth-child(3) .n{color:#FF1F3D;}
  .step:nth-child(4) .n{color:#1E6BFF;}
  .step .n{font-size:10px;letter-spacing:.26em;}
  .step h4{margin:16px 0 8px;font-size:15px;font-weight:600;}
  .step p{margin:0;font-size:11.5px;line-height:1.55;color:var(--dim);}

  #s-signal{min-height:90vh;}
  .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    background:rgba(234,241,255,.1);width:100%;max-width:1000px;}
  .metric{background:rgba(4,7,13,.74);backdrop-filter:blur(6px);padding:30px 26px;}
  .metric b{display:block;font-size:clamp(34px,4.6vw,58px);font-weight:600;letter-spacing:-.04em;line-height:1;}
  .metric b i{font-style:normal;}
  .metric:nth-child(1) b i{color:#39FF88;text-shadow:0 0 26px rgba(57,255,136,.55);}
  .metric:nth-child(2) b i{color:#00E5FF;text-shadow:0 0 26px rgba(0,229,255,.55);}
  .metric:nth-child(3) b i{color:#FF1F3D;text-shadow:0 0 26px rgba(255,31,61,.55);}
  .metric{position:relative;overflow:hidden;}
  .metric::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;opacity:.85;}
  .metric:nth-child(1)::before{background:#39FF88;box-shadow:0 0 16px #39FF88;}
  .metric:nth-child(2)::before{background:#00E5FF;box-shadow:0 0 16px #00E5FF;}
  .metric:nth-child(3)::before{background:#FF1F3D;box-shadow:0 0 16px #FF1F3D;}
  .metric span{display:block;margin-top:12px;font-size:11px;line-height:1.5;color:var(--dim);letter-spacing:.06em;}

  #s-cta{min-height:110vh;justify-content:center;text-align:center;flex-direction:column;}
  #s-cta .row{display:flex;gap:14px;justify-content:center;margin-top:34px;}
  .btn{pointer-events:auto;border:1px solid rgba(255,255,255,.3);color:var(--paper);
    padding:13px 26px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;transition:all .3s;}
  .btn:hover{border-color:var(--accent);color:var(--accent);}
  .btn.solid{background:#39FF88;color:#02170c;border-color:#39FF88;box-shadow:0 0 30px rgba(57,255,136,.3);}
  .btn:not(.solid):hover{border-color:#B14BFF;color:#B14BFF;box-shadow:0 0 26px rgba(177,75,255,.28);}
  .btn.solid:hover{background:#39FF88;border-color:#39FF88;color:#02170c;}
  .foot{margin-top:78px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
    background:linear-gradient(90deg,#39FF88,#00E5FF,#B14BFF,#FF1F3D,#FFB300,#39FF88);
    background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:hue 8s linear infinite;}

  /* industry chrome */
  #carousel{left:0;right:0;bottom:0;height:210px;overflow:hidden;opacity:0;z-index:5;}
  #carouselTrack{position:absolute;left:50%;bottom:54px;display:flex;gap:26px;will-change:transform;}
  .card{width:300px;flex:0 0 300px;padding:20px 22px;border:1px solid rgba(234,241,255,.1);
    background:linear-gradient(180deg,rgba(12,18,32,.85),rgba(6,9,17,.9));backdrop-filter:blur(7px);
    text-align:left;pointer-events:auto;cursor:pointer;transition:border-color .35s;}
  .card{position:relative;overflow:hidden;}
  .card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
    background:var(--cardc,#39FF88);box-shadow:0 0 14px var(--cardc,#39FF88);opacity:.9;}
  .card .idx{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--cardc,#39FF88);}
  .card h3{margin:9px 0 7px;font-size:19px;letter-spacing:-.01em;font-weight:600;}
  .card p{margin:0;font-size:11.5px;line-height:1.5;color:var(--dim);}
  .card .bar{margin-top:14px;height:1px;background:rgba(234,241,255,.12);position:relative;}
  .card .bar i{position:absolute;left:0;top:-1px;height:3px;width:0%;}
  #chapterMeta{left:34px;top:50%;transform:translateY(-50%);opacity:0;font-size:10px;
    letter-spacing:.26em;text-transform:uppercase;color:rgba(234,241,255,.4);
    display:flex;flex-direction:column;gap:10px;max-width:210px;}
  #chapterMeta b{font-size:12px;letter-spacing:.18em;color:var(--accent);font-weight:500;transition:color .8s linear;}
  #chapterMeta .pick{margin-top:6px;font-size:9px;letter-spacing:.2em;color:rgba(234,241,255,.3);}

  .egg{position:fixed;z-index:4;pointer-events:auto;opacity:0;transform:translate(0,-50%);
    white-space:nowrap;cursor:pointer;}
  .egg .l{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 8px;
    border:1px solid rgba(57,255,136,.32);background:rgba(3,8,6,.62);backdrop-filter:blur(4px);
    transition:border-color .25s,background .25s,transform .25s;}
  .egg:hover .l{border-color:rgba(57,255,136,.9);background:rgba(4,20,12,.88);transform:translateX(3px);}
  .egg .d{position:relative;width:6px;height:6px;border-radius:50%;background:#39FF88;
    box-shadow:0 0 13px #39FF88;flex:0 0 6px;}
  .egg .d::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(57,255,136,.75);
    border-radius:50%;animation:ping 1.9s cubic-bezier(.2,.7,.3,1) infinite;}
  .egg .t{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,241,255,.82);}
  .egg .go{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#39FF88;opacity:.9;}
  @keyframes ping{0%{transform:scale(.6);opacity:.9;}70%{transform:scale(1.9);opacity:0;}100%{opacity:0;}}
  @keyframes coach{0%,100%{opacity:.45;}50%{opacity:1;}}
  #chapterMeta .pick{animation:coach 2.4s ease-in-out infinite;color:#39FF88;}

  /* node detail sheet */
  #sheet{position:fixed;z-index:8;right:0;top:0;height:100vh;width:min(380px,86vw);
    background:linear-gradient(180deg,rgba(9,13,23,.95),rgba(4,6,12,.97));
    border-left:1px solid rgba(234,241,255,.12);backdrop-filter:blur(14px);
    transform:translateX(102%);transition:transform .55s cubic-bezier(.2,.75,.25,1);
    padding:96px 34px 40px;display:flex;flex-direction:column;gap:18px;pointer-events:auto;}
  #sheet.open{transform:none;}
  #sheet .tag{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);}
  #sheet h3{margin:0;font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.05;}
  #sheet .body{margin:0;font-size:13px;line-height:1.65;color:var(--dim);}
  #sheet .rows{margin-top:8px;border-top:1px solid rgba(234,241,255,.1);}
  #sheet .row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
    border-bottom:1px solid rgba(234,241,255,.1);font-size:11px;letter-spacing:.06em;}
  #sheet .row span{color:rgba(234,241,255,.4);text-transform:uppercase;letter-spacing:.2em;font-size:9.5px;}
  #sheet .row b{font-weight:500;}
  #sheetClose{position:absolute;top:28px;right:30px;font-size:10px;letter-spacing:.24em;
    text-transform:uppercase;color:rgba(234,241,255,.5);cursor:pointer;background:none;border:0;
    font-family:inherit;padding:6px;}
  #sheetClose:hover{color:var(--accent);}

  #cursorHint{position:fixed;z-index:7;pointer-events:none;opacity:0;font-size:9px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
    background:rgba(4,7,13,.7);border:1px solid rgba(234,241,255,.18);padding:5px 9px;
    transform:translate(14px,-50%);transition:opacity .2s;}

  #ignition{position:fixed;inset:0;z-index:20;background:#04060c;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:18px;
    transition:opacity .9s ease,visibility .9s;}
  #ignition.gone{opacity:0;visibility:hidden;}
  #ignition .ig-line{width:min(320px,54vw);height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;}
  #ignition .ig-line i{position:absolute;left:0;top:-1px;height:3px;width:0;
    background:linear-gradient(90deg,#1E6BFF,#39FF88,#FFB300,#FF1F3D);
    box-shadow:0 0 18px rgba(57,255,136,.9);animation:igfill 1.15s cubic-bezier(.4,0,.15,1) forwards;}
  #ignition .ig-label{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:rgba(234,241,255,.4);}
  @keyframes igfill{to{width:100%;}}

  #ghostNum{position:fixed;z-index:2;left:50%;top:50%;transform:translate(-50%,-52%);
    font-size:min(42vw,520px);font-weight:700;letter-spacing:-.07em;line-height:.8;
    color:rgba(255,255,255,.045);pointer-events:none;opacity:0;
    transition:opacity .6s ease;user-select:none;}

  #cursor{position:fixed;z-index:9;width:26px;height:26px;margin:0;border:1px solid rgba(57,255,136,.6);
    border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
    transform:translate(-50%,-50%) scale(1);
    transition:transform .18s ease,opacity .3s ease,border-color .3s ease;}
  body.pointing #cursor{transform:translate(-50%,-50%) scale(2);border-color:#39FF88;}

  #replay{background:none;font-family:inherit;font-size:10.5px;letter-spacing:.3em;
    text-transform:uppercase;cursor:pointer;}

  #s-hero .eyebrow,#s-hero h1,#s-hero .lede{opacity:0;filter:blur(20px);transform:translateY(22px);
    transition:opacity 1.1s cubic-bezier(.2,.7,.25,1),filter 1.2s cubic-bezier(.2,.7,.25,1),transform 1.2s cubic-bezier(.2,.7,.25,1);}
  body.lit #s-hero .eyebrow{opacity:1;filter:none;transform:none;transition-delay:.15s;}
  body.lit #s-hero h1{opacity:1;filter:none;transform:none;transition-delay:.35s;}
  body.lit #s-hero .lede{opacity:1;filter:none;transform:none;transition-delay:.62s;}

  .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.7,.3,1),transform .9s cubic-bezier(.22,.7,.3,1);}
  .rv.in{opacity:1;transform:none;}

  @media (max-width:900px){
    #s-core .grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
    .metrics{grid-template-columns:1fr;}
    #chapterMeta{display:none;}
    .card{width:230px;flex:0 0 230px;}
  }

  /* ---- the Log in control, added to the design's topbar ------------------ */
  #topbar .right{gap:14px;}
  #topbar .cta.login{border-color:rgba(57,255,136,.5);color:#39FF88;}
  #topbar .cta.login:hover{border-color:#39FF88;box-shadow:0 0 22px rgba(57,255,136,.3);}

  /* Replay is the one control a visitor can lose without losing anything: the animation plays on
     arrival anyway, and on a narrow screen the two that convert matter more than a rewind. */
  @media (max-width:900px){
    #topbar{padding:16px 20px;}
    #topbar #replay{display:none;}
  }
  @media (max-width:520px){
    #topbar .mark span:last-child{font-size:9px;letter-spacing:.2em;}
    #topbar .cta{padding:6px 12px;font-size:9.5px;}
  }

  /* ---- contrast ---------------------------------------------------------
     Step four's number is the one piece of text on the page under 4.5:1 - the
     design's #1E6BFF measures 4.42 at 10px on this ground. Lightened just past
     the line. The underlining bar keeps the original blue: it carries no text,
     so the threshold does not apply to it and the chapter's colour is kept. */
  .step:nth-child(4) .n{color:#5A90FF;}