:root{
    --ice:#e9f4fb;
    --ice-light:#f4fbff;
    --white:#ffffff;
    --h1:#082452;
    --head:#071d3f;
    --body:#0a2646;
    --ink:#030b18;
    --muted:rgba(10,38,70,.72);
    --grey:rgba(10,38,70,.5);
    --rule:rgba(8,36,82,.14);
    --shadow:0 18px 50px rgba(8,36,82,.10);
    --display:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --container:1180px;
    --gutter:clamp(20px,5vw,48px);
    --navh:78px;
  }

  *,*::before,*::after{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--ice);
    background-image:linear-gradient(180deg,var(--ice-light) 0%,var(--ice) 34%);
    color:var(--body);
    font-family:var(--display);
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{max-width:var(--container);margin:0 inline;margin-inline:auto;padding-inline:var(--gutter);}

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;
    letter-spacing:.14em;color:var(--grey);margin:0;
  }
  .statement{
    font-family:var(--display);font-weight:300;color:var(--h1);
    font-size:clamp(30px,4.2vw,48px);line-height:1.04;letter-spacing:-.03em;
    text-wrap:balance;margin:0;
  }
  .lede{max-width:58ch;color:var(--muted);margin:0;}
  .card-head{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.25;color:var(--head);letter-spacing:-.01em;margin:0;}
  .chip{
    display:inline-block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
    letter-spacing:.14em;color:var(--grey);border:1px solid var(--rule);
    border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.55);
  }
  .btn{
    display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
    font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.01em;
    padding:13px 24px;border-radius:999px;white-space:nowrap;
    transition:transform .18s ease,opacity .18s ease;
  }
  .btn:hover{opacity:.88;transform:translateY(-1px);}
  .btn:focus-visible,a:focus-visible{outline:2px solid var(--h1);outline-offset:3px;}
  .btn-quiet{
    display:inline-block;text-decoration:none;color:var(--h1);border:1px solid var(--rule);
    background:rgba(255,255,255,.6);font-size:14px;padding:12px 23px;border-radius:999px;
  }

  /* ---------- ambient glass ---------- */
  .blob{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0;}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:40;padding:18px 0 0;}
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:rgba(255,255,255,.62);backdrop-filter:blur(14px);
    border:1px solid var(--rule);border-radius:999px;padding:10px 12px 10px 20px;
  }
  .lock{display:flex;align-items:center;gap:11px;text-decoration:none;}
  .lock svg{display:block;}
  .wordmark{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.16em;color:var(--ink);}

  /* ---------- stage: one gradient under the hero and the section after it ---------- */
  .stage{position:relative;isolation:isolate;margin-top:calc(-1 * var(--navh));
    background:linear-gradient(180deg,rgba(233,244,251,0) 0%,rgba(233,244,251,0) 62%,var(--ice) 100%),
               linear-gradient(152deg,#dbeeff 0%,#eaf5fd 42%,#fdf6e7 100%);}
  .hero{padding:0;}
  .hero-frame{position:relative;padding:calc(var(--navh) + clamp(36px,5vw,72px)) 0 clamp(40px,5vw,72px);}
  .hero-frame .blob.a{width:520px;height:520px;top:-190px;left:-90px;background:rgba(120,178,240,.55);}
  .hero-frame .blob.b{width:440px;height:440px;bottom:-210px;right:-60px;background:rgba(255,241,214,.75);}
  .hero-frame .blob.c{width:360px;height:360px;top:34%;right:24%;background:rgba(150,196,245,.34);}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;z-index:0;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,0) 100%);}
  .hero-bg.tall{display:none;}
  .hero-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:clamp(320px,36vw,520px);align-items:center;}
  .hero-copy{max-width:58%;}
  .hero-content .chip{margin-bottom:clamp(30px,4vw,46px);}
  h1{
    font-family:var(--display);font-weight:300;color:var(--h1);
    font-size:clamp(32px,3.6vw,48px);line-height:1.02;letter-spacing:-.04em;
    margin:0 0 clamp(22px,3vw,34px);max-width:17ch;text-wrap:balance;
  }
  /* the loop: the live score beside the buyer, square, silent, autoplaying */
  .hero-loop{margin:0;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:var(--ice);
    border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 70px rgba(8,36,82,.16);}
  .hero-loop video{display:block;width:100%;height:100%;object-fit:cover;}
  .hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;}
  .hero-foot .lede{max-width:46ch;color:var(--body);opacity:.82;}

  /* ---------- section frame ---------- */
  section{padding:clamp(64px,8vw,116px) 0;}
  .split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,6vw,80px);align-items:start;}
  .stack{display:flex;flex-direction:column;gap:22px;}

  /* ---------- fears ---------- */
  .fear-list{display:flex;flex-direction:column;}
  .fear{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;padding:22px 0;border-top:1px solid var(--rule);}
  .fear:first-child{border-top:0;padding-top:0;}
  .fear p{margin:0;color:var(--body);font-size:17px;}
  .fear .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);padding-top:4px;}
  .cost{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--rule);color:var(--muted);max-width:52ch;}
  .cost b{font-weight:500;color:var(--h1);}

  /* ---------- pull statement ---------- */
  .pull{border:0;}
  .pull .statement{max-width:20ch;}
  .pull .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end;}

  /* ---------- answer cards ---------- */
  .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(34px,4vw,52px);}
  .card{
    background:var(--white);border:1px solid var(--rule);border-radius:20px;
    padding:30px 28px 32px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:14px;
  }
  .card .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);}
  .card p{margin:0;color:var(--muted);}
  .card-loop{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--ice);margin:0 0 18px;}

  .proofs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
  .proofs li{padding:12px 0;border-top:1px solid var(--rule);color:var(--muted);}
  .proofs li:first-child{border-top:0;padding-top:0;}

  .cards-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products .card{align-items:center;text-align:center;padding:38px 30px 36px;}
  .products .glyph{width:40px;height:40px;color:var(--h1);margin-bottom:6px;}
  .products .tag{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--head);}
  .products p{max-width:34ch;}

  /* ---------- showcase ---------- */
  .showcase{border:0;}
  .slides{min-height:210px;}
  .slide{display:flex;flex-direction:column;gap:22px;max-width:24ch;}
  .slide .lede{max-width:56ch;}
  .dots{display:flex;gap:10px;margin-top:34px;}
  .dot{
    width:34px;height:4px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:var(--rule);transition:background .2s ease;
  }
  .dot.is-on{background:var(--ink);}
  .dot:focus-visible{outline:2px solid var(--h1);outline-offset:4px;}

  /* ---------- the three: one dark panel per way to lose a sale ---------- */
  .three-head{margin-bottom:clamp(28px,4vw,48px);}
  .three-head .statement{max-width:18ch;}
  .threats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .threat{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:440px;padding:32px 30px 28px;border-radius:28px;background:var(--ink);color:#fff;}
  .threat::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 55% at 85% 0%,rgba(8,36,82,.9) 0%,rgba(3,11,24,0) 60%);pointer-events:none;}
  .threat>*{position:relative;}
  .threat .eyebrow{color:rgba(255,255,255,.55);}
  .threat .big{font-family:var(--display);font-weight:300;font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.03em;color:#fff;margin:26px 0 18px;text-wrap:balance;font-variant-numeric:tabular-nums;}
  .threat .sub{margin:0 0 28px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.8);max-width:30ch;}
  .threat .src{margin:-16px 0 28px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);}
  .threat .out{margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-weight:500;font-size:18px;line-height:1.35;color:#fff;}
  .threat .out{margin-top:auto;padding-top:18px;}

  /* ---------- channels ---------- */
  .channels{border:0;}
  .channels .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start;}
  .channel-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
  .channel-list li{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    padding:18px 8px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.7);min-height:84px;
  }
  .channel-list svg{width:28px;height:28px;display:block;fill:var(--h1);}
  .channel-list li.text span{font-size:12px;color:var(--h1);}
  .channel-list span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);text-align:center;line-height:1.3;}

  /* ---------- evidence rows ---------- */
  .rows{display:flex;flex-direction:column;}
  .row{padding:24px 0;border-top:1px solid var(--rule);}
  .row:first-child{border-top:0;padding-top:0;}
  .row p{margin:8px 0 0;color:var(--muted);max-width:52ch;}

  /* ---------- statement mock ---------- */
  .statement-card{
    background:var(--white);border:1px solid var(--rule);border-radius:20px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .statement-card header{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 26px;border-bottom:1px solid var(--rule);
  }
  .statement-card header span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);}
  .figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .figure{padding:28px 26px;border-right:1px solid var(--rule);}
  .figure:last-child{border-right:0;}
  .figure b{
    display:block;font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,46px);
    line-height:1;letter-spacing:-.04em;color:var(--h1);font-variant-numeric:tabular-nums;
  }
  .figure span{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);}
  .statement-card footer{padding:16px 26px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);}

  /* ---------- terms pair ---------- */
  .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}

  /* ---------- cta ---------- */
  .cta-frame{
    position:relative;overflow:hidden;border-radius:34px;border:1px solid var(--rule);
    clip-path:inset(0 round 34px);isolation:isolate;transform:translateZ(0);
    background:linear-gradient(140deg,#e4f1fd 0%,#f5faff 46%,#fdf4e4 100%);
    padding:clamp(44px,6vw,78px) clamp(24px,5vw,64px);box-shadow:var(--shadow);
  }
  .cta-frame .blob.a{width:420px;height:420px;top:-180px;right:-80px;background:rgba(120,178,240,.5);}
  .cta-frame .blob.b{width:360px;height:360px;bottom:-200px;left:-40px;background:rgba(255,241,214,.7);}
  .cta-inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between;}

  /* ---------- platform band ---------- */
  .platform{border:0;}
  .platform .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end;}

  /* ---------- footer ---------- */
  footer.site{border-top:1px solid var(--rule);padding:44px 0 60px;}
  .foot-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
  .foot-line{margin:0;color:var(--grey);font-size:14px;max-width:56ch;}

  @media (max-width:900px){
    .hero-content{min-height:0;}
    .hero-copy{max-width:100%;}
    .hero-frame{padding:calc(var(--navh) + 32px) 0 18vw;}
    .hero-bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,0) 100%);}
    h1{font-size:32px;margin-bottom:22px;}
    .hero-foot{gap:18px;}
    .hero-foot .lede{font-size:15px;line-height:1.5;max-width:30ch;}
    .hero-bg.wide{display:none;}
    .hero-bg.tall{display:block;object-position:right bottom;}
    .split,.pull .inner,.platform .inner,.channels .inner{grid-template-columns:minmax(0,1fr);}
    .threats{grid-template-columns:minmax(0,1fr);}
    .threat{min-height:0;}
    .channel-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
    .channel-list li{padding:14px 4px 12px;min-height:84px;gap:8px;}
    .channel-list span{font-size:9px;letter-spacing:.08em;}
    .cards,.cards-2,.figures,.pair{grid-template-columns:minmax(0,1fr);}
    .hero-content .chip{font-size:10px;letter-spacing:.1em;padding:9px 14px;}
    .figure{border-right:0;border-bottom:1px solid var(--rule);}
    .figure:last-child{border-bottom:0;}
    .fear{grid-template-columns:minmax(0,1fr);gap:8px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
  }

  /* ---------- film ---------- */
  .film .reel{margin:clamp(34px,4vw,52px) 0 0;}
  .reel{
    position:relative;overflow:hidden;aspect-ratio:16/9;
    border:1px solid var(--rule);border-radius:34px;box-shadow:var(--shadow);
    background:linear-gradient(160deg,#0a2646 0%,var(--ink) 100%);
  }
  .reel-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink);}
  .reel-slot{
    position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:flex-end;
    gap:10px;padding:clamp(24px,4vw,44px);
  }
  .reel-slot[hidden]{display:none;}
  .reel-tag{margin:0;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);}
  .reel-note{margin:0;max-width:48ch;color:rgba(255,255,255,.74);}
  .reel-note code{font-family:var(--mono);font-size:13px;color:#fff;}

  /* ---------- payout band ---------- */
  .band{background:var(--ink);border:0;}
  .band .statement{color:#fff;max-width:22ch;}
  .band .lede{color:rgba(255,255,255,.74);}
  .band .eyebrow{color:rgba(255,255,255,.5);}
  .band .btn{background:#fff;color:var(--ink);}
  .band .lede.centered{max-width:60ch;margin:0 auto;text-align:center;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.82);}
  .bill{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.02em;color:var(--h1);
    text-align:center;text-wrap:balance;margin:0 auto;max-width:22ch;}
  .bill b{font-weight:500;color:var(--h1);}
  .bill + .source{text-align:center;}
  .band .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end;}
  .source{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey);margin:14px 0 0;}
  .figure{font-family:var(--display);font-weight:300;color:var(--h1);font-size:clamp(30px,4.2vw,48px);line-height:1.1;letter-spacing:-.03em;margin:0;max-width:24ch;}
  .btn-row{display:flex;gap:12px;flex-wrap:wrap;}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);}
  /* ---------- nav links ---------- */
  .nav .wrap{position:relative;}
  .nav-links{display:flex;gap:26px;margin:0 auto 0 34px;}
  .nav-links a{text-decoration:none;color:var(--body);font-size:14px;opacity:.8;}
  .nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:var(--h1);}
  .vision{margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
  .cards-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .caption{margin:clamp(28px,3vw,40px) 0 0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
  .row .card-head{font-size:19px;}
  .fear b{font-weight:500;color:var(--head);}
  .fear .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);padding-top:4px;}
  .band .lede{max-width:60ch;}
  .stack .lede + .lede{margin-top:-6px;}
  .threat .label{display:block;margin:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);}
  .hero-foot .btn-row{margin-top:22px;}
  @media (max-width:900px){
    .nav-links{display:none;}
    .cards-4{grid-template-columns:minmax(0,1fr);}
  }

  /* ---------- closing stage: the hero treatment at the end of the page ---------- */
  .stage.end{margin-top:0;overflow:hidden;
    background:linear-gradient(180deg,var(--ice) 0%,rgba(233,244,251,0) 38%,rgba(233,244,251,0) 100%),
               linear-gradient(152deg,#dbeeff 0%,#eaf5fd 42%,#fdf6e7 100%);}
  .stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;z-index:0;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 45%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 45%,#000 100%);}
  .stage-bg.tall{display:none;}
  .stage.end section,.stage.end footer{position:relative;z-index:1;}
  .stage.end #start{padding-top:clamp(96px,12vw,180px);}
  .stage.end .cta-inner{max-width:62ch;flex-direction:column;align-items:flex-start;gap:28px;}
  .stage.end footer.site{border-top:0;padding-top:0;}

  /* ---------- use-case mosaic ---------- */
  .mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(34px,4vw,52px);}
  .tile{aspect-ratio:4/5;}
  .tile{position:relative;margin:0;overflow:hidden;border-radius:22px;background:var(--ink);isolation:isolate;}
  .tile-loop,.tile-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .tile-slot{background:linear-gradient(152deg,#0a2646 0%,#082452 55%,#1b3f7a 100%);}
  .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,11,24,0) 35%,rgba(3,11,24,.82) 100%);pointer-events:none;}
  .tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px;color:#fff;}
  .tile figcaption .tag{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-bottom:8px;}
  .tile figcaption p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92);max-width:44ch;}
  @media (max-width:900px){
    .stage-bg.wide{display:none;}
    .stage-bg.tall{display:block;}
    .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .tile figcaption{padding:14px 16px;}
    .tile figcaption p{font-size:13px;}
  }

  /* ---------- scroll motion (only when the visitor allows motion and JS is running) ---------- */
  @media (prefers-reduced-motion:no-preference){
    .js-motion .rv{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms);}
    .js-motion .rv.in{opacity:1;transform:none;}
    .js-motion .tile.rv{transform:translateY(12px) scale(.96);}
    .js-motion .tile.rv.in{transform:none;}

    /* risk panels: the panel lands, then the answer draws in */
    .js-motion .threat .out{border-top:0;padding-top:19px;opacity:0;transform:translateX(-14px);transition:opacity .5s ease .38s,transform .5s cubic-bezier(.2,.7,.2,1) .38s;}
    .js-motion .threat .out::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.18);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1) .3s;}
    .js-motion .threat.in .out{opacity:1;transform:none;}
    .js-motion .threat.in .out::before{transform:scaleX(1);}

    /* hero: film drifts slower than the page, copy fades out, pill tightens */
    .js-motion .hero-bg{top:-24%;height:124%;transform:translateY(calc(var(--sy,0) * .33px));}
    .js-motion .hero-copy{opacity:calc(1 - var(--sy,0) / 520);transform:translateY(calc(var(--sy,0) * .12px));}
    .nav-inner{transition:padding .35s ease,background .35s ease,box-shadow .35s ease;}
    .nav.scrolled .nav-inner{padding:7px 8px 7px 16px;background:rgba(255,255,255,.84);backdrop-filter:blur(20px);box-shadow:0 10px 30px rgba(8,36,82,.10);}

    /* mosaic hover */
    .tile-loop,.tile-slot{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
    .tile:hover .tile-loop,.tile:hover .tile-slot{transform:scale(1.04);}
    .tile figcaption p{transition:color .3s ease;}
    .tile:hover figcaption p{color:#fff;}
  }

  /* how it works: a line fills as the visitor scrolls, steps light up as it passes */
  .fear-list{position:relative;padding-left:26px;}
  .fear-list::before,.fear-list::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;}
  .fear-list::before{background:var(--rule);}
  .fear-list::after{background:var(--ink);transform:scaleY(var(--fill,0));transform-origin:top;}
  .fear .num,.fear p b{transition:color .35s ease;}
  .fear.on .num{color:var(--ink);}
  .fear.on p b{color:var(--h1);}
  @media (prefers-reduced-motion:reduce){ .fear-list::after{transform:none;} .fear .num{color:var(--ink);} }

  /* ---------- text grids: no boxes for words ---------- */
  .idx{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);margin-bottom:12px;}
  .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(34px,4vw,52px);}
  .flow .card-head{font-size:19px;margin-bottom:10px;}
  .flow p{margin:0;color:var(--muted);}

  /* ---------- product: ledger beside the envelope ---------- */
  .split.product{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
  .ledger{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px);margin-top:clamp(18px,2vw,28px);}
  .ledger-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;}
  .ledger-row .idx{margin:6px 0 0;}
  .ledger-row .card-head{grid-column:2;font-size:20px;}
  .ledger-row p{grid-column:2;margin:8px 0 0;color:var(--muted);max-width:52ch;}
  .envelope-col{position:sticky;top:calc(var(--navh) + 24px);}
  .envelope{
    margin:0;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);
    border-radius:22px;box-shadow:0 30px 70px rgba(8,36,82,.14);overflow:hidden;
  }
  .envelope header,.envelope footer{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
  .envelope header{border-bottom:1px solid var(--rule);}
  .envelope footer{border-top:1px solid var(--rule);background:var(--ink);color:rgba(255,255,255,.6);}
  .envelope footer .ok{color:#fff;}
  .envelope ul{list-style:none;margin:0;padding:6px 22px;}
  .envelope li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--rule);}
  .envelope li:first-child{border-top:0;}
  .envelope .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}
  .envelope .v{font-size:15px;color:var(--head);}
  .envelope .seal{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--h1);border:1px solid rgba(8,36,82,.25);border-radius:999px;padding:4px 9px;}
  @media (prefers-reduced-motion:no-preference){
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  }
  @media (max-width:900px){
    .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .split.product{grid-template-columns:minmax(0,1fr);}
    .envelope-col{position:static;}
    .envelope li{grid-template-columns:minmax(0,1fr) auto;}
    .envelope .v{grid-column:1 / -1;order:3;}
  }

  /* ---------- promise strip: the loops run edge to edge, words sit beneath on the page ---------- */
  .reel-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(52px,6vw,88px);}
  .reel-card{margin:0;}
  .reel-card .card-loop{aspect-ratio:1/1;border-radius:24px;margin:0 0 30px;box-shadow:0 24px 60px rgba(8,36,82,.12);}
  .reel-card figcaption .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);margin-bottom:16px;}
  .reel-card figcaption .card-head{margin-bottom:14px;}
  .reel-card figcaption p{margin:0 0 12px;color:var(--muted);max-width:40ch;line-height:1.65;}

  /* ---------- type scale on large screens ---------- */
  @media (min-width:1400px){
    h1{font-size:58px;}
    .statement{font-size:56px;}
    .threat .big{font-size:64px;}
  }
  @media (max-width:900px){
    .reel-cards{grid-template-columns:minmax(0,1fr);}
  }

  /* five use cases in one row on wide screens */
  @media (min-width:1100px){ .mosaic-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;} .mosaic-5 .tile figcaption{padding:16px 16px;} .mosaic-5 .tile figcaption p{font-size:13px;} }

  /* ---------- commerce flows: a two-column ledger ---------- */
  .flows{margin-top:clamp(40px,5vw,64px);}
  .flows-head,.flow-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(20px,4vw,56px);align-items:baseline;}
  .flows-head{padding:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
  .flow-row{padding:22px 0;border-top:1px solid var(--rule);}
  .flow-row .card-head{font-size:19px;margin:0;}
  .flow-row p{margin:0;color:var(--muted);}
  .caption{text-transform:none;letter-spacing:0;font-family:var(--display);font-size:15px;color:var(--grey);text-align:left;}
  @media (max-width:900px){
    .flows-head{display:none;}
    .flow-row{grid-template-columns:minmax(0,1fr);gap:8px;}
  }

  /* ---------- sideways rows: the fears and the use cases scroll horizontally, cards side by side ---------- */
  .threats,.mosaic{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-bottom:6px;scroll-padding-inline:var(--gutter);}
  .threats::-webkit-scrollbar,.mosaic::-webkit-scrollbar{display:none;}
  .threats{gap:14px;}
  .mosaic,.mosaic-5{gap:12px;grid-template-columns:none;}
  .threat{flex:0 0 clamp(300px,34vw,440px);scroll-snap-align:start;min-height:0;}
  .tile{flex:0 0 clamp(230px,24vw,300px);scroll-snap-align:start;aspect-ratio:4/5;}
  .threats::after,.mosaic::after{content:"";flex:0 0 1px;}
  @media (min-width:1100px){ .mosaic-5{grid-template-columns:none;} }
  @media (max-width:900px){ .threats{grid-template-columns:none;} .mosaic{grid-template-columns:none;} }

  /* the three fears: response block the same height in every panel, so the rule lines up */
  .threat .out{min-height:126px;}
  .threat .big{min-height:2.1em;}
  /* tablet: the promise loops stay three across down to 640px; one column only on phones */
  @media (max-width:900px){ .reel-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} .reel-card figcaption p{font-size:14px;} .reel-card .card-head{font-size:18px;} }
  @media (max-width:640px){ .reel-cards{grid-template-columns:minmax(0,1fr);gap:28px;} .reel-card figcaption p{font-size:16px;} .reel-card .card-head{font-size:22px;} }

  /* ---------- channel marquee: the logos pass by on their own ---------- */
  .marquee{overflow:hidden;margin:clamp(36px,4vw,56px) calc(-1 * var(--gutter)) 0;padding:0 0 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
  .marquee-track{display:flex;gap:12px;width:max-content;margin:0;padding:0 6px 0 0;list-style:none;animation:marquee 48s linear infinite;}
  @media (hover:hover){ .marquee:hover .marquee-track{animation-play-state:paused;} }
  .marquee-track li{flex:0 0 auto;width:96px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.7);}
  .marquee-track svg{width:26px;height:26px;display:block;fill:var(--h1);}
  .marquee-track li.text span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--h1);}
  .marquee-track span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;flex-wrap:wrap;width:auto;} .marquee{mask-image:none;-webkit-mask-image:none;} }

  /* the three fears: smaller panels, smaller type */
  .threat{flex-basis:clamp(280px,29vw,380px);padding:26px 26px 22px;border-radius:24px;}
  .threat .big{font-size:clamp(30px,3vw,40px);margin:18px 0 14px;min-height:0;}
  .threat .sub{font-size:15px;margin-bottom:22px;}
  .threat .out{font-size:16px;min-height:104px;padding-top:14px;}
  .threat .label{font-size:9px;}
  @media (min-width:1400px){ .threat .big{font-size:42px;} }

  /* ---------- the vault: the evidence envelope as a live object ---------- */
  .vault{position:relative;margin:0;padding:8px 0 0;max-width:420px;margin-left:auto;perspective:1400px;--rx:0deg;--ry:0deg;}
  .vault-glow{position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;filter:blur(48px);opacity:.9;
    background:radial-gradient(40% 40% at 20% 20%,rgba(120,178,240,.55) 0%,rgba(120,178,240,0) 70%),
               radial-gradient(38% 38% at 85% 85%,rgba(255,226,170,.6) 0%,rgba(255,226,170,0) 70%);}
  .vault-stack{position:relative;z-index:1;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s ease;}
  .sheet{border-radius:22px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,#0f2b58 0%,#071d3f 55%,#030b18 100%);color:#fff;box-shadow:0 30px 70px rgba(3,11,24,.35);}
  .sheet.s2,.sheet.s3{position:absolute;left:0;right:0;top:0;height:64px;padding:0 22px;display:flex;align-items:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);}
  .sheet.s2{transform:translateY(-16px) scale(.965) translateZ(-40px);padding-top:9px;}
  .sheet.s3{transform:translateY(-32px) scale(.93) translateZ(-80px);padding-top:8px;opacity:.85;}
  .sheet.front{position:relative;overflow:hidden;padding:0;transform:translateZ(0);}
  .sheet.front::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 55% at 85% 0%,rgba(8,36,82,.9) 0%,rgba(3,11,24,0) 60%);pointer-events:none;}
  .sheet.front>*{position:relative;}
  .sheet.front header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px 16px;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);}
  .live{display:inline-flex;align-items:center;gap:9px;color:#fff;}
  .live i{width:7px;height:7px;border-radius:50%;background:#7fd1ff;box-shadow:0 0 0 0 rgba(127,209,255,.6);}
  .lines{list-style:none;margin:0;padding:6px 22px 4px;}
  .lines li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) 22px;gap:12px;align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.08);}
  .lines li:first-child{border-top:0;}
  .lines .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);}
  .lines .v{font-size:14px;color:#fff;}
  .seal{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1);}
  .seal svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .4s ease .1s;}
  .hash{padding:10px 22px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);}
  .timeline{list-style:none;margin:0;padding:16px 22px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;border-top:1px solid rgba(255,255,255,.12);background:rgba(3,11,24,.5);}
  .timeline::before{content:"";position:absolute;left:22px;right:22px;top:23px;height:1px;background:rgba(255,255,255,.15);}
  .timeline::after{content:"";position:absolute;left:22px;right:22px;top:23px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .8s;}
  .timeline li{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;}
  .timeline b{width:15px;height:15px;border-radius:50%;background:var(--ink);border:1px solid rgba(255,255,255,.5);display:block;transition:background .3s ease,box-shadow .3s ease;}
  .timeline span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);}
  .timeline .ok span{color:#fff;}
  /* reveal once: seals close one by one, the line draws, the last node lights */
  .js-motion .vault.in .seal{background:#fff;border-color:#fff;}
  .js-motion .vault.in .seal svg{stroke:var(--ink);stroke-dashoffset:0;}
  .js-motion .vault.in .lines li:nth-child(1) .seal{transition-delay:.3s} .js-motion .vault.in .lines li:nth-child(1) .seal svg{transition-delay:.4s}
  .js-motion .vault.in .lines li:nth-child(2) .seal{transition-delay:.55s} .js-motion .vault.in .lines li:nth-child(2) .seal svg{transition-delay:.65s}
  .js-motion .vault.in .lines li:nth-child(3) .seal{transition-delay:.8s} .js-motion .vault.in .lines li:nth-child(3) .seal svg{transition-delay:.9s}
  .js-motion .vault.in .lines li:nth-child(4) .seal{transition-delay:1.05s} .js-motion .vault.in .lines li:nth-child(4) .seal svg{transition-delay:1.15s}
  .js-motion .vault.in .lines li:nth-child(5) .seal{transition-delay:1.3s} .js-motion .vault.in .lines li:nth-child(5) .seal svg{transition-delay:1.4s}
  .js-motion .vault.in .timeline::after{transform:scaleX(1);}
  .js-motion .vault.in .timeline b{background:#fff;}
  .js-motion .vault.in .timeline li:nth-child(2) b{transition-delay:1.4s} .js-motion .vault.in .timeline li:nth-child(3) b{transition-delay:2.1s;box-shadow:0 0 0 6px rgba(127,209,255,.25);}
  .js-motion .vault:not(.in) .seal{background:transparent;}
  html:not(.js-motion) .seal{background:#fff;border-color:#fff;} html:not(.js-motion) .seal svg{stroke:var(--ink);stroke-dashoffset:0;} html:not(.js-motion) .timeline::after{transform:scaleX(1);} html:not(.js-motion) .timeline b{background:#fff;}
  @media (prefers-reduced-motion:no-preference){ .live i{animation:pulse 2.4s ease-out infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,209,255,.6)}100%{box-shadow:0 0 0 12px rgba(127,209,255,0)}} }
  @media (max-width:900px){ .lines li{grid-template-columns:minmax(0,1fr) 22px;} .lines .v{grid-column:1;order:2;} .lines .seal{grid-row:1 / span 2;} .timeline{grid-template-columns:minmax(0,1fr);gap:12px;} .timeline::before,.timeline::after{display:none;} .timeline li{flex-direction:row;align-items:center;} }

  /* ---------- the terminal: Intuar and the sales agent, machine to machine ---------- */
  .term{position:relative;z-index:1;border-radius:16px;border:1px solid rgba(255,255,255,.14);overflow:hidden;
    background:linear-gradient(160deg,#0b2450 0%,#061a3a 45%,#030b18 100%);box-shadow:0 30px 70px rgba(3,11,24,.38);
    transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s ease;}
  .term header{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);}
  .term header .live{margin-left:auto;font-size:10px;}
  .dots{display:inline-flex;gap:6px;}
  .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);}
  .tty{margin:0;padding:16px 18px 14px;font-family:var(--mono);font-size:10.5px;line-height:1.75;color:rgba(255,255,255,.86);white-space:pre;overflow:hidden;letter-spacing:.01em;}
  .tty code{font:inherit;}
  .tty .ln{display:block;min-height:1.85em;}
  .tty .ln.hid{visibility:hidden;}
  .tty .p{color:#7fd1ff;letter-spacing:.1em;font-size:9.5px;}
  .tty .dim{color:rgba(255,255,255,.45);}
  .tty .w{color:#ffd27f;}
  .tty .q{color:#fff;}
  .tty .b{color:#bfe4ff;}
  .tty .ok{color:#fff;}
  .tty .cur{display:inline-block;color:#7fd1ff;animation:blink 1s steps(2,start) infinite;}
  .tty .cur.idle{opacity:.6;}
  @keyframes blink{to{visibility:hidden}}
  @media (prefers-reduced-motion:reduce){ .tty .cur{animation:none;} }
  @media (max-width:900px){ .tty{font-size:11.5px;} }

  /* ---------- tablet: the hero is a frame, not a full screen ---------- */
  @media (min-width:641px) and (max-width:1100px){
    .hero-frame{padding:calc(var(--navh) + 28px) 0 clamp(36px,5vw,56px);}
    .hero-content{min-height:0;}
    .hero-copy{max-width:70%;}
    h1{font-size:clamp(34px,4.6vw,44px);}
    .hero-bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0) 100%);}
    .stage.end #start{padding-top:clamp(72px,9vw,120px);}
  }

  /* phones: the marquee stays, with smaller tiles */
  @media (max-width:640px){
    .marquee-track{gap:8px;animation-duration:36s;}
    .marquee-track li{width:72px;height:56px;border-radius:12px;}
    .marquee-track svg{width:22px;height:22px;}
    .marquee-track li.text span{font-size:10px;}
  }

  /* the record's glow must not widen the page on small screens */
  @media (max-width:900px){ .vault-glow{inset:-10% 0;} }
  #product{overflow-x:clip;}