@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: url(/fonts/geist-400-latin-ext-66a33f6a78.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: url(/fonts/geist-400-latin-9d846db84c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src: url(/fonts/geist-500-latin-ext-66a33f6a78.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src: url(/fonts/geist-500-latin-9d846db84c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display:swap;
  src: url(/fonts/geist-600-latin-ext-66a33f6a78.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display:swap;
  src: url(/fonts/geist-600-latin-9d846db84c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display:swap;
  src: url(/fonts/geist-700-latin-ext-66a33f6a78.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display:swap;
  src: url(/fonts/geist-700-latin-9d846db84c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: url(/fonts/geist-mono-400-latin-ext-fbd56f5f92.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: url(/fonts/geist-mono-400-latin-0e04bb6e7b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src: url(/fonts/geist-mono-500-latin-ext-fbd56f5f92.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src: url(/fonts/geist-mono-500-latin-0e04bb6e7b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* ================= TOKENS : committed dark, cinematic ================= */
  :root{
    --bg:#05060A;
    --bg2:#090B10;
    --surface:#0C0F15;
    --line:rgba(255,255,255,.07);
    --line2:rgba(255,255,255,.15);
    --text:#F4F6F8;
    --t2:#A9B1BC;
    --t3:#808893;
    --teal:#1FC9DB;
    --teal-deep:#0999A8;
    --teal-soft:#6DC5C4;
    --beam:linear-gradient(92deg,#0999A8,#25D3E4 55%,#9DF0F6);
    --ok:#5FD9A2;
    --warn:#E3BE6E;
    --sans:'Geist','Inter Tight',system-ui,-apple-system,sans-serif;
    --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --maxw:1200px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box}
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  h1:focus{outline:none}
  html.js:not(.sc-ready) footer.site{display:none}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--sans);font-size:16px;line-height:1.6;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  ::selection{background:rgba(31,201,219,.3);color:#EFFDFE}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
  img,svg,canvas{max-width:100%;display:block}
  img{height:auto}
  main{display:block}

  /* film grain, one quiet layer of texture */
  .grain{position:fixed;inset:-40px;z-index:4;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ground drift layers: compositor-only background travel */
  .drift{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;will-change:opacity}
  #drift1{background:#04070E}
  #drift2{background:#030509}

  /* ambient tech layer: blueprint grid + circuit traces with traveling pulses */
  .techbg{position:fixed;inset:0;z-index:0;pointer-events:none}
  .techbg::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(rgba(118,205,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118,205,255,.05) 1px, transparent 1px);
    background-size:76px 76px;
    -webkit-mask-image:radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 78%);
    mask-image:radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 78%);
    opacity:.55;
  }
  .techbg::after{content:"";position:absolute;inset:0;background:
    radial-gradient(900px 600px at 88% 12%, rgba(31,201,219,.06), transparent 65%),
    radial-gradient(1000px 700px at 6% 92%, rgba(52,120,255,.055), transparent 65%);
  }
  .techbg svg{position:relative;width:100%;height:100%;animation:tbDrift 30s ease-in-out infinite alternate}
  @keyframes tbDrift{from{transform:translateY(0)}to{transform:translateY(-16px)}}
  .tb-trace path{stroke:rgba(31,201,219,.11)}
  .tb-node circle{fill:rgba(31,201,219,.22)}
  .tb-node .tb-x{stroke:rgba(118,205,255,.14);stroke-width:1.2}
  .tb-pulse{stroke:rgba(126,239,248,.55);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:30 1400;stroke-dashoffset:1430;filter:drop-shadow(0 0 5px rgba(126,239,248,.7))}
  .tb-pulse.p1{animation:tbPulse 11s linear infinite}
  .tb-pulse.p2{animation:tbPulse 14s linear 3.5s infinite}
  .tb-pulse.p3{animation:tbPulse 17s linear 8s infinite}
  @keyframes tbPulse{from{stroke-dashoffset:1430}to{stroke-dashoffset:0}}
  html.rm .techbg svg{animation:none}
  html.rm .tb-pulse{animation:none;opacity:0}

  /* neon blue fade from the very top, dissolving downward */
  .topfade{
    position:absolute;top:0;left:0;right:0;height:320px;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg, rgba(58,141,255,.14), transparent 52%),
      linear-gradient(180deg, rgba(31,201,219,.22) 0%, rgba(31,201,219,.09) 36%, rgba(31,201,219,.025) 64%, transparent 100%);
  }

  /* ================= TYPE ================= */
  h1,h2,h3,.h2{margin:0;font-weight:600;text-wrap:balance}
  h1{font-size:clamp(3rem,7.4vw,6.4rem);letter-spacing:-.045em;line-height:.99}
  h2,.h2{font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1.06}
  h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.35}
  .lede{color:var(--t2);font-size:1.11rem;line-height:1.65;max-width:44em;margin:0}
  .eb{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:.68rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;color:var(--t3);
  }
  .eb::before{content:"";width:18px;height:1px;background:var(--teal)}
  .page-hero .eb,.hero .eb,.os-eyebrow{color:var(--t2)}
  .beam{background:var(--beam);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mono{font-family:var(--mono)}

  /* ================= NAV ================= */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;isolation:isolate}
  .nav::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:rgba(5,6,10,.72);
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    border-bottom:1px solid var(--line);
    opacity:0;transition:opacity .3s ease;
  }
  .nav.scrolled::before{opacity:1}
  @keyframes navIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .js .nav .brand{animation:navIn .6s var(--ease) .04s backwards}
  .js .nav .nav-links{animation:navIn .6s var(--ease) .12s backwards}
  .js .nav .nav-cta{animation:navIn .6s var(--ease) .2s backwards}
  .nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:34px;padding:14px 28px 0;height:86px}
  .brand{display:flex;align-items:center;color:var(--text)}
  .brand .logo-img{height:27px;width:auto;display:block;transition:transform .25s var(--ease)}
  .brand:hover .logo-img{transform:translateY(-1px)}
  .brand:active .logo-img{transform:scale(.97)}
  footer.site .brand .logo-img{height:24px}
  .burger{transition:transform .18s var(--ease)}
  .burger:active{transform:scale(.88)}
  .sheet a{transition:transform .2s var(--ease),color .2s ease}
  .sheet a:active{transform:translateX(6px)}
  .nav-cta .signin{display:inline-block;transition:color .15s ease,transform .15s var(--ease)}
  .nav-cta .signin:active{transform:scale(.96)}
  .nav-links{display:flex;align-items:center;gap:26px;margin-left:12px}
  .nav-links>a,.nav-links button{font-size:.9rem;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:6px;transition:color .15s ease;padding:6px 0}
  .nav-links>a:hover,.nav-links button:hover{color:var(--text)}
  .nav-links>a.active{color:var(--text)}
  .nav-links>a,.nav-links button{position:relative}
  .nav-links>a::after,.nav-links button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:100% 50%;transition:transform .34s var(--ease)}
  .nav-links>a:hover::after,.nav-links button:hover::after,.nav-links>a.active::after{transform:scaleX(1);transform-origin:0 50%}
  .nav-links>a:active,.nav-links button:active{transform:scale(.97)}
  .prod-wrap{position:relative}
  .dropdown{
    position:absolute;top:calc(100% + 16px);left:-14px;min-width:540px;
    background:rgba(10,12,17,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--line2);border-radius:14px;padding:8px;
    display:none;grid-template-columns:1fr 1fr;gap:2px;
    box-shadow:0 30px 70px rgba(0,0,0,.6);
    opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,display .2s allow-discrete;
  }
  .prod-wrap.open .dropdown{display:grid;opacity:1;transform:none;transition:opacity .26s var(--ease),transform .26s var(--ease),display .26s allow-discrete}
  @starting-style{.prod-wrap.open .dropdown{opacity:0;transform:translateY(-6px)}}
  .dd-item{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:9px;transition:background .14s ease}
  .dd-item:hover{background:rgba(255,255,255,.05)}
  .dd-item b{color:var(--text);font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:8px}
  .dd-item b i{width:5px;height:5px;border-radius:50%;background:var(--teal);font-style:normal}
  .dd-item span{font-size:.8rem;color:var(--t3);line-height:1.45}
  .nav-cta{margin-left:auto;display:flex;align-items:center;gap:20px}
  .nav-cta .signin{color:var(--t2);font-size:.9rem;font-weight:500}
  .nav-cta .signin:hover{color:var(--text)}
  .burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto}
  .burger i{display:block;width:20px;height:1.6px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  .burger.open i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .burger.open i:nth-child(2){opacity:0}
  .burger.open i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .sheet{position:fixed;inset:0;z-index:55;background:rgba(5,6,10,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:none;flex-direction:column;padding:100px 32px 44px;overflow-y:auto;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,display .25s allow-discrete}
  .sheet.open{display:flex;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),display .3s allow-discrete}
  @starting-style{.sheet.open{opacity:0;transform:translateY(8px)}}
  .sheet a{color:var(--text);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;padding:13px 0;border-bottom:1px solid var(--line)}
  .sheet a.sub{font-size:1.02rem;font-weight:500;color:var(--t2);padding-left:16px}
  .sheet .grp{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--t3);margin:26px 0 4px;text-transform:uppercase}

  /* ================= BUTTONS ================= */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-weight:600;font-size:.93rem;letter-spacing:-.005em;
    padding:13px 26px;border-radius:100px;white-space:nowrap;
    transition:transform .12s ease-out,background .2s ease,border-color .2s ease,box-shadow .25s ease,color .2s ease;
  }
  .btn:active{transform:scale(.965)}
  .btn-pri{background:var(--text);color:#07090D}
  .btn-pri:hover{background:#FFFFFF;transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 34px rgba(31,201,219,.4)}
  .btn-gho:hover{box-shadow:0 0 26px rgba(31,201,219,.18)}
  .btn-pri:active{transform:scale(.965)}
  .btn-gho{border:1px solid rgba(255,255,255,.34);color:var(--text)}
  .btn-gho:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
  .btn-sm{padding:9px 19px;font-size:.86rem}
  .btn .arr{transition:transform .22s var(--ease)}
  .btn:hover .arr{transform:translateX(3px)}
  /* heartbeat attention pulse for get started CTAs (transform/opacity only) */
  .pulse{position:relative;animation:heartbeat 2.8s ease-in-out infinite}
  .pulse::before{
    content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
    border:2px solid rgba(31,201,219,.55);opacity:0;transform:scale(1);
    will-change:transform,opacity;
    animation:pulseRing 2.8s ease-out infinite;
  }
  @keyframes heartbeat{
    0%,32%,100%{transform:scale(1)}
    8%{transform:scale(1.05)}
    16%{transform:scale(1)}
    24%{transform:scale(1.04)}
  }
  @keyframes pulseRing{
    0%,28%{transform:scale(1);opacity:.55}
    62%{transform:scale(1.28);opacity:0}
    100%{transform:scale(1.28);opacity:0}
  }
  .pulse.p-stop{animation:none}
  .pulse.p-off::before{animation:none;opacity:0;transition:opacity .2s ease}
  .tlink{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:500;font-size:.95rem}
  .tlink .arr{transition:transform .22s var(--ease)}
  .tlink:hover .arr{transform:translateX(3px)}

  /* ================= REVEAL ================= */
  .js .rv{opacity:0;transform:translateY(16px)}
  .js .rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--rvd,0s)}
  .h-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
  .h-line>span{display:block}
  .js .h-line>span{transform:translateY(118%)}
  .js .played .h-line>span{transform:none;transition:transform .9s var(--ease);transition-delay:.14s}
  .js .played .h-line:nth-child(2)>span{transition-delay:.24s}
  .js .played .h-line:nth-child(3)>span{transition-delay:.34s}

  /* hero entrance choreography */
  .js .hero .eb{opacity:0;transform:translateY(12px)}
  .js .hero.played .eb{opacity:1;transform:none;transition:opacity .7s var(--ease) .06s,transform .7s var(--ease) .06s}
  .js .statline .stat{opacity:0;transform:translateY(12px)}
  .js .statline.in .stat{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .statline.in .stat:nth-child(2){transition-delay:.09s}
  .js .statline.in .stat:nth-child(3){transition-delay:.18s}
  .js .statline.in .stat:nth-child(4){transition-delay:.27s}

  /* ================= HERO (home) ================= */
  section{padding:110px 0}
  .hero{position:relative;padding:196px 0 84px;overflow:clip}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(760px 480px at 82% 6%, rgba(15,160,180,.14), transparent 68%),
    radial-gradient(900px 620px at 8% 112%, rgba(9,60,110,.14), transparent 65%);
  }
  .fx{position:absolute;inset:0;pointer-events:none}
  .hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
  .hero-copy{display:flex;flex-direction:column;gap:26px}
  .hero-copy .eb{margin-bottom:2px}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

  .statline{
    position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
    margin-top:84px;padding:26px 30px;border-radius:16px;
    border:1px solid rgba(31,201,219,.3);
    background:linear-gradient(180deg, rgba(31,201,219,.06), rgba(12,15,21,.6));
    box-shadow:0 0 54px -14px rgba(31,201,219,.34), inset 0 0 30px -18px rgba(31,201,219,.3);
  }
  .statline::before{
    content:"";position:absolute;top:-1px;left:8%;right:8%;height:2px;border-radius:2px;
    background:var(--beam);filter:blur(.4px);
    box-shadow:0 0 16px rgba(31,201,219,.7);
  }
  .stat .v{font-size:1.55rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(31,201,219,.4)}
  .stat .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-top:5px}

  /* mascot stage */
  .stage{position:relative;min-height:540px;display:flex;align-items:flex-end;justify-content:flex-end}
  .halo{position:absolute;right:2%;top:6%;width:420px;height:420px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(31,201,219,.16), transparent 62%);
    animation:halo 9s ease-in-out infinite;
  }
  @keyframes halo{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
  .bot-w{position:relative;z-index:2;width:min(395px,78%);margin-right:3%;will-change:transform}
  .bot{width:100%;height:auto;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 46px 60px rgba(0,0,0,.6))}
  video.bot,video.bot-sm{filter:none}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  .bot-shadow{position:absolute;left:50%;bottom:-26px;width:62%;height:22px;transform:translateX(-50%);border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);animation:bobShadow 7s ease-in-out infinite}
  @keyframes bobShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.8}50%{transform:translateX(-50%) scaleX(.8);opacity:.45}}

  .console{
    position:absolute;left:0;bottom:14px;z-index:3;width:min(300px,86%);
    background:rgba(10,13,18,.66);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
    border:1px solid var(--line2);border-radius:14px;overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .console header{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--t3);text-transform:uppercase}
  .console header i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulseDot 2.4s ease-in-out infinite}
  @keyframes pulseDot{50%{opacity:.35}}
  .console .rows{padding:8px 8px 10px;display:flex;flex-direction:column;min-height:158px;justify-content:flex-end}
  .crow{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:.7rem;padding:6px 9px;border-radius:7px;color:var(--t2)}
  .crow .num{color:var(--text);font-weight:500}
  .crow .ms{color:var(--t3);font-size:.62rem}
  .crow .st{margin-left:auto;font-size:.6rem;letter-spacing:.12em}
  .st.ok{color:var(--ok)} .st.sent{color:var(--teal)} .st.q{color:var(--warn)}
  .crow.fresh{animation:crowIn .4s ease}
  @keyframes crowIn{from{opacity:0}to{opacity:1}}
  @keyframes rowIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .console footer{border-top:1px solid var(--line);padding:9px 16px;font-family:var(--mono);font-size:.62rem;color:var(--t3);display:flex;justify-content:space-between}
  .console footer b{color:var(--teal);font-weight:500;font-variant-numeric:tabular-nums}

  /* ================= SECTION HEADS ================= */
  .sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:58px;max-width:760px}
  .sec-split{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px;flex-wrap:wrap}

  /* ================= PRODUCT BENTO ================= */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .bcard{
    --ac:#1FC9DB;
    position:relative;display:flex;flex-direction:column;gap:9px;
    padding:28px;border-radius:20px;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 56%),
      linear-gradient(180deg, color-mix(in srgb, var(--ac) 6%, var(--surface)), var(--surface) 70%);
    border:1px solid color-mix(in srgb, var(--ac) 26%, transparent);
    transition:transform .32s var(--ease), border-color .25s ease, box-shadow .35s ease;
  }
  .bcard::after{ /* hover glow bloom */
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
    background:radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 72%);
    transition:opacity .35s ease;
  }
  .bcard:hover{
    transform:translateY(-6px);
    border-color:color-mix(in srgb, var(--ac) 60%, transparent);
    box-shadow:0 24px 60px -18px color-mix(in srgb, var(--ac) 42%, transparent), 0 8px 30px rgba(0,0,0,.45);
  }
  .bcard:hover::after{opacity:1}
  .bcard:active{transform:translateY(-2px) scale(.99)}
  .bhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .bico{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ac);
    background:color-mix(in srgb, var(--ac) 13%, transparent);
    border:1px solid color-mix(in srgb, var(--ac) 30%, transparent);
    transition:transform .3s var(--ease), background .25s ease, box-shadow .3s ease;
  }
  .bcard:hover .bico{transform:scale(1.08) rotate(-3deg);background:color-mix(in srgb, var(--ac) 22%, transparent);box-shadow:0 0 22px color-mix(in srgb, var(--ac) 35%, transparent)}
  .bhead .n{font-family:var(--mono);font-size:.7rem;color:var(--t2);font-variant-numeric:tabular-nums;transition:color .2s ease}
  .bcard:hover .bhead .n{color:var(--ac)}
  .bname{font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
  .btease{color:var(--t2);font-size:.91rem;line-height:1.55}
  .bchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .bchips span{
    font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;color:var(--ac);
    border:1px solid color-mix(in srgb, var(--ac) 30%, transparent);
    background:color-mix(in srgb, var(--ac) 9%, transparent);
    padding:5px 11px;border-radius:100px;
  }
  .bgo{
    margin-top:auto;padding-top:16px;display:inline-flex;gap:8px;align-items:center;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
  }
  .bgo .arr{transition:transform .25s var(--ease)}
  .bcard:hover .bgo .arr{transform:translateX(4px)}
  .bcard.feat{grid-column:span 2}
  .bcard.wide{grid-column:span 2}

  /* ================= PILLARS ================= */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pillar{
    padding:26px;border-radius:16px;display:flex;flex-direction:column;gap:10px;
    border:1px solid transparent;border-top-color:var(--line2);
    transition:border-color .3s ease, background .3s ease, box-shadow .35s ease, transform .3s var(--ease);
  }
  .pillar:hover{
    transform:translateY(-4px);
    border-color:rgba(125,211,252,.5);border-radius:16px;
    background:linear-gradient(180deg, rgba(125,211,252,.07), rgba(125,211,252,.02));
    box-shadow:0 0 50px -10px rgba(125,211,252,.4), 0 14px 34px rgba(0,0,0,.4);
  }
  .pillar:hover h3{text-shadow:0 0 20px rgba(125,211,252,.55)}
  .pillar h3{font-size:1.12rem;transition:text-shadow .3s ease}
  .pillar p{margin:0;color:var(--t2);font-size:.95rem;line-height:1.6}

  /* ================= MISSION ================= */
  .mission{
    position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start;
    padding:56px;border-radius:20px;
    border:1px solid rgba(31,201,219,.3);
    background:linear-gradient(180deg, rgba(31,201,219,.05), rgba(10,13,20,.7) 55%);
    box-shadow:0 0 70px -18px rgba(31,201,219,.32), inset 0 0 44px -26px rgba(31,201,219,.35);
  }
  .mission::before{
    content:"";position:absolute;top:-1px;left:9%;right:9%;height:2px;border-radius:2px;
    background:var(--beam);box-shadow:0 0 18px rgba(31,201,219,.7);
  }
  .mission-copy{display:flex;flex-direction:column;gap:26px}
  .statement{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:500;letter-spacing:-.025em;line-height:1.3;color:var(--text)}
  .statement em{font-style:normal;color:var(--teal)}
  .checks{display:flex;flex-direction:column}
  .check{display:flex;gap:16px;padding:15px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
  .check:first-child{border-top:1px solid var(--line)}
  .check i{flex:0 0 6px;height:6px;background:var(--teal);margin-top:9px}
  .check span{color:var(--t2);font-size:.95rem;line-height:1.55}

  /* ================= TERMINAL ================= */
  .apiblock{display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:center}
  .term{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .term .bar{display:flex;gap:6px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
  .term .bar i{width:8px;height:8px;border-radius:50%;border:1px solid var(--line2)}
  .term .bar span{margin-left:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--t3)}
  .term .scroll{overflow-x:auto}
  .term pre{margin:0;padding:20px 22px;font-family:var(--mono);font-size:.78rem;line-height:1.75;min-width:max-content;min-height:264px;color:var(--t2)}
  .tk-k{color:var(--t3)} .tk-s{color:#8FE2ED} .tk-c{color:var(--t3)} .tk-n{color:var(--text)}
  .cursor{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:var(--teal);animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .apitags{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
  .apitag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--t3);display:flex;gap:8px;align-items:center}
  .apitag i{width:5px;height:5px;border-radius:50%;background:var(--teal)}

  /* ================= CTA BAND ================= */
  .band{position:relative;border-top:1px solid var(--line);padding:120px 0;overflow:clip}
  .band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(600px 440px at 80% 42%, rgba(31,201,219,.2), transparent 64%),
    radial-gradient(820px 460px at 34% 118%, rgba(52,120,255,.22), transparent 66%),
    radial-gradient(700px 300px at 50% -12%, rgba(31,201,219,.12), transparent 70%);
  }
  .band::after{
    content:"";position:absolute;top:-1px;left:26%;right:26%;height:2px;border-radius:2px;
    background:var(--beam);box-shadow:0 0 22px rgba(31,201,219,.85);
  }
  .band-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
  .band h2{font-size:clamp(2.2rem,4.4vw,3.7rem);letter-spacing:-.04em}
  .band .lede{margin-top:18px}
  .band .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
  .band .bot-sm{width:clamp(140px,14vw,196px);height:auto;justify-self:end;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(31,201,219,.55));animation:waveHi 5.6s ease-in-out infinite;transform-origin:58% 88%}
  .band video.bot-sm{animation:bob 7s ease-in-out infinite}
  @keyframes waveHi{
    0%,52%,100%{transform:translateY(0) rotate(0deg)}
    8%{transform:translateY(-7px) rotate(7deg)}
    15%{transform:translateY(-9px) rotate(-5deg)}
    22%{transform:translateY(-8px) rotate(7deg)}
    29%{transform:translateY(-7px) rotate(-4deg)}
    36%{transform:translateY(-5px) rotate(2deg)}
    44%{transform:translateY(-2px) rotate(0deg)}
    74%{transform:translateY(-9px) rotate(0deg)}
  }

  /* ================= INNER PAGE HERO ================= */
  .page-hero{position:relative;padding:186px 0 76px;overflow:clip}
  .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 420px at 86% 0%, rgba(15,160,180,.12), transparent 66%)}
  .page-hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);max-width:15em}
  .page-hero .lede{margin-top:24px}
  .page-hero .hero-ctas{margin-top:34px}
  .ratefacts{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
  .ratefact{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--t2);display:flex;align-items:center;gap:9px}
  .ratefact i{width:5px;height:5px;border-radius:50%;background:var(--teal)}

  /* product features as numbered rows */
  .featrows{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
  .featrow{display:flex;gap:20px;padding:24px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
  .featrow .fi{
    flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--teal);
    background:linear-gradient(160deg, rgba(31,201,219,.16), rgba(31,201,219,.04));
    border:1px solid rgba(31,201,219,.34);
    box-shadow:0 0 20px -4px rgba(31,201,219,.6), inset 0 0 14px -8px rgba(31,201,219,.7);
    transition:box-shadow .3s ease,border-color .3s ease,transform .3s var(--ease);
  }
  .featrow .fi svg{width:20px;height:20px;display:block;filter:drop-shadow(0 0 5px rgba(31,201,219,.9))}
  .featrow:hover .fi{border-color:rgba(31,201,219,.75);box-shadow:0 0 30px -2px rgba(31,201,219,.85), inset 0 0 14px -6px rgba(31,201,219,.9);transform:translateY(-2px)}
  .featrow .ft{padding-top:9px}
  .featrow h3{font-size:1rem;margin-bottom:5px}
  .featrow p{margin:0;color:var(--t2);font-size:.92rem;line-height:1.55}
  .featrows .featrow:nth-child(1),.featrows .featrow:nth-child(2){border-top:1px solid var(--line)}

  .switch{display:flex;gap:28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .switch::-webkit-scrollbar{display:none}
  .switch a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--t3);padding:0 0 14px;white-space:nowrap;position:relative;transition:color .15s ease}
  .switch a:hover{color:var(--t2)}
  .switch a.on{color:var(--text)}
  .switch a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal)}

  /* ================= PRICING ================= */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.012)}
  .plan{padding:40px 34px;display:flex;flex-direction:column;position:relative}
  .plan + .plan{border-left:1px solid var(--line)}
  .plan.hot{background:rgba(31,201,219,.045)}
  .plan.hot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--beam)}
  .plan .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);margin-bottom:18px;display:flex;justify-content:space-between}
  .plan .tag b{color:var(--teal);font-weight:500}
  .plan h3{font-size:1.35rem;letter-spacing:-.02em}
  .plan .price{font-size:2.9rem;font-weight:600;letter-spacing:-.045em;margin:18px 0 4px;font-variant-numeric:tabular-nums}
  .plan .price small{font-size:.9rem;color:var(--t3);font-weight:500;letter-spacing:0}
  .plan .desc{color:var(--t2);font-size:.9rem;line-height:1.6;margin:8px 0 26px}
  .plan ul{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column}
  .plan li{display:flex;gap:12px;color:var(--t2);font-size:.88rem;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start}
  .plan li::before{content:"";flex:0 0 5px;height:5px;background:var(--teal);margin-top:8px}
  .plan .btn{margin-top:auto}
  .ratetable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
  table.rates{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.8rem}
  table.rates th{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);font-weight:500;text-align:left;padding:15px 22px;border-bottom:1px solid var(--line2)}
  table.rates td{padding:15px 22px;border-bottom:1px solid var(--line);color:var(--t2);white-space:nowrap}
  table.rates tr:last-child td{border-bottom:0}
  table.rates td.rate{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
  table.rates td:last-child,table.rates th:last-child{text-align:right}
  .tnote{font-family:var(--mono);font-size:.68rem;color:var(--t3);margin-top:16px;letter-spacing:.04em}

  /* ================= PRICING: RATE ACT (pinned, scroll prices the volume) ================= */
  .rate-act{position:relative;padding:0}
  .rate-stage{align-items:flex-end}
  .rate-wrap{width:100%;padding-top:96px;padding-bottom:clamp(88px,16vh,160px);display:grid;grid-template-columns:.9fr 1.1fr;gap:40px 64px;align-items:center}
  .rate-act .page-hero{padding:0;overflow:visible}
  .rate-act .page-hero::before{display:none}
  .rate-copy h1{margin-top:22px;font-size:clamp(2.3rem,3.6vw,3.4rem)}
  .rate-copy .lede{margin-top:22px;max-width:30em}
  .rate-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rate-tile{
    position:relative;padding:24px 26px 22px;border-radius:18px;
    border:1px solid rgba(31,201,219,.32);
    background:linear-gradient(180deg, rgba(31,201,219,.07), rgba(10,13,20,.86) 55%);
    box-shadow:0 0 60px -18px rgba(31,201,219,.4), inset 0 0 40px -24px rgba(31,201,219,.35);
    overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
  }
  .rate-tile::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:2px;border-radius:2px;background:var(--beam);box-shadow:0 0 18px rgba(31,201,219,.8)}
  .rate-tile:hover{transform:translateY(-3px);border-color:rgba(31,201,219,.6);box-shadow:0 0 70px -14px rgba(31,201,219,.55), 0 14px 34px rgba(0,0,0,.45)}
  .rt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .rt-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);line-height:1.3}
  .rt-s{display:block;font-size:.56rem;letter-spacing:.16em;color:var(--t3);margin-top:5px}
  .rt-stamp{
    flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
    border:1px solid rgba(31,201,219,.32);border-radius:100px;padding:5px 10px;
    transition:color .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease,transform .4s cubic-bezier(.3,1.5,.5,1);
  }
  .rate-act.landed .rt-stamp{color:#07090D;background:var(--teal);border-color:transparent;box-shadow:0 0 22px rgba(31,201,219,.75);transform:scale(1.08)}
  .rt-p{font-size:clamp(3rem,4.6vw,4.3rem);font-weight:600;letter-spacing:-.045em;line-height:1;margin:22px 0 4px;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(31,201,219,.35)}
  .rt-p small{display:block;font-family:var(--mono);font-size:.58rem;color:var(--t3);font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;text-shadow:none}
  .rt-cost{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
  .rt-n{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .rt-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
  .rt-l b{color:var(--t2);font-weight:500;font-variant-numeric:tabular-nums}
  .rate-meter{grid-column:1 / -1;margin-top:6px}
  .rm-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
  .rm-v b{color:var(--text);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-right:6px;text-shadow:0 0 18px rgba(31,201,219,.35)}
  .rm-track{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.08)}
  .rm-fill{position:absolute;inset:0;border-radius:6px;background:var(--beam);transform-origin:0 50%;transform:scaleX(var(--p,.667));box-shadow:0 0 18px rgba(31,201,219,.55);will-change:transform}
  .rm-knob{
    position:absolute;top:50%;left:calc(var(--p,.667) * 100%);width:3px;height:18px;border-radius:2px;
    background:#F4F6F8;
    box-shadow:0 0 12px rgba(31,201,219,.9), 0 0 3px rgba(31,201,219,.9);
    transform:translate(-50%,-50%);transition:height .3s var(--ease);
  }
  .rate-act.landed .rm-knob{height:24px}
  .rate-act.live .rm-knob{left:0;transform:translate(calc(var(--p,0) * var(--tw,600px) - 50%),-50%);will-change:transform}
  .rm-ticks{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--t3)}
  .rm-ticks span{transition:color .3s ease}
  .rm-ticks span.on{color:var(--teal)}
  .rate-act.static{height:auto!important}
  .rate-act.static .rate-stage{position:static;min-height:0;overflow:visible}
  .rate-act.static .rate-wrap{padding-top:150px}
  .plans-sec{padding-top:0}
  .rate-act.static .rate-wrap{padding-bottom:36px}
  .lede-static{display:none}
  .rate-act.static .lede-live{display:none}
  .rate-act.static .lede-static{display:inline}
  .plan .price.txt{font-size:2.1rem;letter-spacing:-.03em;padding-top:.3em}
  /* the --t3 label tier fails 4.5:1 on these tinted grounds at 9px; lift color and size on this page */
  .tnote a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
  .tnote a:hover{color:var(--teal)}
  .plan{--mx:50%;--my:50%}
  .plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(280px 220px at var(--mx) var(--my), rgba(31,201,219,.13), transparent 70%);transition:opacity .3s ease}
  .plan:hover::after{opacity:1}
  .plan.hot{transition:box-shadow .35s ease}
  .plan.hot:hover{box-shadow:inset 0 0 70px -30px rgba(31,201,219,.55)}
  .plan>*{position:relative;z-index:1}
  /* another plan options: one label schema per object, wipe in */
  .optgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  .opt{
    position:relative;padding:24px 26px 22px;border-radius:16px;display:flex;flex-direction:column;gap:6px;
    border:1px solid rgba(110,142,255,.22);
    background:linear-gradient(160deg, rgba(110,142,255,.08), rgba(12,15,21,.85) 60%);
    transition:transform .28s var(--ease),border-color .25s ease,box-shadow .3s ease;
  }
  .opt.span2{grid-column:span 2}
  .opt.span3{grid-column:span 3}
  .opt:hover{transform:translateY(-3px);border-color:rgba(31,201,219,.55);box-shadow:0 0 44px -10px rgba(31,201,219,.4), 0 12px 30px rgba(0,0,0,.4)}
  .op-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
  .op-s{font-size:.92rem;color:var(--t2);font-weight:500;margin-top:12px}
  .op-p{font-size:2.3rem;font-weight:600;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
  .op-p small{font-size:.9rem;color:var(--t3);font-weight:500;letter-spacing:0}
  .op-p.txt{font-size:1.75rem;letter-spacing:-.03em}
  .op-r{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
  .op-r em{display:block;font-style:normal;font-size:.54rem;color:var(--t3);letter-spacing:.16em;margin-bottom:2px}
  .rt-k,.op-k,.op-r{font-size:.68rem}
  .rt-s,.rt-p small,.rt-l,.rm-ticks,.op-r em{font-size:.62rem}
  .rm-head,.plan .tag{font-size:.66rem}
  .rg-ic{width:22px;height:auto;flex:none;border-radius:3px}
  .rg-ic.rg-globe{width:20px;color:var(--teal);border-radius:0}
  .js .optgrid.rv{opacity:1;transform:none}
  .js .optgrid.rv .opt{clip-path:inset(-60px -60px 100% -60px);opacity:0}
  .js .optgrid.rv.in .opt{clip-path:inset(-60px);opacity:1;transition:clip-path .8s var(--ease) var(--od,0s),opacity .45s ease var(--od,0s),transform .28s var(--ease),border-color .25s ease,box-shadow .3s ease}
  html.rm .optgrid .opt{clip-path:none!important;opacity:1!important}

  /* ================= STORY ================= */
  .story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
  .vals{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
  .val{padding:26px 26px 26px 2px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
  .val b{font-weight:600;font-size:1rem;letter-spacing:-.01em}
  .val span{color:var(--t2);font-size:.9rem;line-height:1.55}
  .story-office{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}
  .story-office img{width:min(480px,100%);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
  .story-office figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}

  /* ================= FORMS ================= */
  .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .field{display:flex;flex-direction:column;gap:8px}
  .field.full{grid-column:1 / -1}
  .field > label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
  .field input,.field select,.field textarea{
    font:inherit;font-size:1rem;color:var(--text);background:rgba(8,13,24,.85);
    border:1px solid rgba(140,160,220,.42);border-radius:10px;padding:13px 15px;
    transition:border-color .18s ease,box-shadow .18s ease,transform .22s var(--ease);
  }
  .field textarea{min-height:110px;resize:vertical}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(140,160,220,.62)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(31,201,219,.75);box-shadow:0 0 0 3px rgba(31,201,219,.16), 0 0 24px rgba(31,201,219,.28);transform:translateY(-2px)}
  .field input::placeholder,.field textarea::placeholder{color:var(--t3)}
  fieldset.field{border:0;padding:0;margin:0;min-width:0}
  fieldset.field legend{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);padding:0;margin-bottom:8px}
  .radio-row{display:flex;gap:10px}
  .radio-row label{font-family:var(--sans);text-transform:none;letter-spacing:0}
  .radio-row label:has(> input:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
  .radio-row label{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);border-radius:100px;padding:11px;color:var(--t2);font-size:.9rem;font-weight:500;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .15s var(--ease)}
  .radio-row input{position:absolute;opacity:0;pointer-events:none}
  .radio-row label:active{transform:scale(.97)}
  .radio-row label.sel{color:#07090D;background:var(--text);border-color:transparent;font-weight:600}
  .fnote{font-family:var(--mono);font-size:.64rem;color:var(--t3);letter-spacing:.06em}
  .form-panel{
    position:relative;border-radius:18px;padding:38px;
    border:1px solid rgba(31,201,219,.32);
    background:linear-gradient(180deg, rgba(31,201,219,.05), rgba(10,13,20,.9) 45%);
    box-shadow:0 0 70px -18px rgba(31,201,219,.35), inset 0 0 40px -24px rgba(31,201,219,.35);
    overflow:hidden;
  }
  .form-panel::before{
    content:"";position:absolute;top:-1px;left:10%;right:10%;height:2px;border-radius:2px;
    background:var(--beam);box-shadow:0 0 18px rgba(31,201,219,.8);
  }
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .infos{display:flex;flex-direction:column;gap:14px}
  .info{
    padding:22px 24px;display:flex;flex-direction:column;gap:4px;border-radius:14px;
    border:1px solid rgba(110,142,255,.22);
    background:linear-gradient(160deg, rgba(110,142,255,.08), rgba(12,15,21,.8) 60%);
  }
  .info .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
  .info .v{font-size:1.02rem;font-weight:500}
  .info .v a:hover{color:var(--teal)}
  .info .s{color:var(--t3);font-size:.85rem}
  .ferr{display:none;font-size:.82rem;color:#F2A6A6;margin-top:6px}
  .ferr.show{display:block}
  .form-err{margin:12px 0 0;flex-basis:100%}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .cf-turnstile:empty{display:none}
  .fnote.consent{display:block;margin-top:16px;line-height:1.6;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.78rem;max-width:60em}
  .fnote.consent a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
  .legal-doc{max-width:760px;color:var(--t2);font-size:1.02rem;line-height:1.72}
  .legal-doc h2{font-size:1.4rem;letter-spacing:-.02em;margin:44px 0 12px;color:var(--text)}
  .legal-doc h3{font-size:1.08rem;margin:28px 0 8px;color:var(--text)}
  .legal-doc p{margin:0 0 14px}
  .legal-doc ul,.legal-doc ol{margin:0 0 14px 22px;padding:0}
  .legal-doc li{margin:6px 0}
  .legal-doc a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
  .legal-doc strong{color:var(--text);font-weight:600}
  .success{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:26px 8px}
  .success.show{display:flex;animation:rowIn .5s cubic-bezier(.3,1.35,.55,1)}
  .success img{width:130px;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
  .success h3{font-size:1.35rem;letter-spacing:-.02em}
  .success p{color:var(--t2);margin:0;max-width:30em;font-size:.95rem}

  /* get started */
  .gs-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
  .gs-side{position:sticky;top:130px;display:flex;flex-direction:column;gap:26px}
  .gs-side img{width:min(240px,70%);height:auto;align-self:center;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}
  .bubble{position:relative;padding:18px 20px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--t2);font-size:.93rem;line-height:1.6}
  .bubble b{color:var(--text);font-weight:600}
  .bubble::after{content:"";position:absolute;bottom:-7px;left:46px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
  .steps{display:flex;gap:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--t3);text-transform:uppercase}
  .steps b{color:var(--teal);font-weight:500}
  .steps em{font-style:normal}

  /* ================= FOOTER ================= */
  footer.site{border-top:1px solid var(--line);padding:72px 0 36px;background:var(--bg2)}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
  .foot-grid h2{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);margin:0 0 18px;font-weight:500}
  .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .foot-grid li a{color:var(--t2);font-size:.9rem;transition:color .15s ease}
  .foot-grid li a:hover{color:var(--text)}
  .foot-brand p{color:var(--t3);font-size:.88rem;line-height:1.65;margin:16px 0 20px;max-width:24em}
  .socials{display:flex;gap:10px}
  .socials a{position:relative}
  .socials a::after{content:"";position:absolute;inset:-5px}
  .socials a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--t2);transition:color .15s ease,border-color .15s ease,transform .15s var(--ease)}
  .socials a:hover{color:var(--text);border-color:var(--line2)}
  .socials a:active{transform:scale(.94)}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:26px;color:var(--t3);font-size:.8rem}
  .foot-bottom .concept{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em}
  .foot-bottom .concept b{color:var(--teal);font-weight:500}

  /* ================= PRODUCTS SHOWCASE ACT ================= */
  .prodAct{padding:0}
  .prod-stage{display:flex;align-items:center}
  .prod-inner{width:100%;display:flex;flex-direction:column;gap:36px}
  .prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .prod-orbit{position:relative;min-height:64vh}
  .prod-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(280px,24vw);z-index:2}
  .orb-slot{position:absolute;width:260px;z-index:3;perspective:900px;animation:orbFloat var(--fdur,6s) ease-in-out var(--fdel,0s) infinite alternate}
  @keyframes orbFloat{from{transform:translateY(calc(var(--sy,0px) - 5px))}to{transform:translateY(calc(var(--sy,0px) + 6px))}}
  .orb-slot.s0{left:5%;top:4%}
  .orb-slot.s1{left:1%;top:38%}
  .orb-slot.s2{left:5%;top:72%}
  .orb-slot.s3{right:5%;top:4%}
  .orb-slot.s4{right:1%;top:38%}
  .orb-slot.s5{right:5%;top:72%}
  .orb-slot.s6{left:50%;top:88%;margin-left:-130px}
  .orb-card{
    display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:16px;
    background:
      radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--ac) 15%, transparent), transparent 56%),
      linear-gradient(180deg, color-mix(in srgb, var(--ac) 7%, var(--surface)), var(--surface) 70%);
    border:1px solid color-mix(in srgb, var(--ac) 42%, transparent);
    box-shadow:0 0 30px -8px color-mix(in srgb, var(--ac) 38%, transparent);
    opacity:0;pointer-events:none;will-change:transform;transform-style:preserve-3d;
    transform:translate3d(var(--fx,0px),var(--fy,0px),-160px) scale(.22) rotateY(calc(var(--ry,0deg)*2.4));
    transition:opacity .5s var(--ease),transform .7s var(--ease),border-color .25s ease,box-shadow .3s ease;
  }
  .orb-slot:focus-within .orb-card{opacity:1;pointer-events:auto;transform:none}
  .orb-slot.on .orb-card{
    opacity:1;pointer-events:auto;
    transform:translate3d(0,0,0) scale(1) rotateY(calc(var(--ry,0deg) + var(--hx,0deg))) rotateX(calc(var(--rx,0deg) + var(--hy,0deg)));
  }
  .orb-slot.on .orb-card.tl{transition:opacity .5s var(--ease),transform .18s ease-out,border-color .25s ease,box-shadow .3s ease}
  .orb-slot.on.fresh .orb-card{
    border-color:color-mix(in srgb, var(--ac) 75%, transparent);
    box-shadow:0 0 60px -6px color-mix(in srgb, var(--ac) 65%, transparent), 0 0 16px -4px color-mix(in srgb, var(--ac) 50%, transparent);
  }
  .orb-card:hover{
    border-color:color-mix(in srgb, var(--ac) 80%, transparent);
    box-shadow:0 0 52px -6px color-mix(in srgb, var(--ac) 60%, transparent);
  }
  .orb-card .bico{flex:0 0 40px;width:40px;height:40px}
  .orb-card b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.01em;color:var(--text)}
  .orb-card small{display:block;color:var(--t2);font-size:.76rem;line-height:1.45;margin-top:3px}
  .prod-phone .prod-halo{opacity:0;transition:background-color .6s ease,opacity .6s ease}
  .prod-phone.vis .prod-halo{opacity:.17}
  .prod-phone.zap .prod-halo{opacity:.55}
  .prod-phone.zap img{filter:drop-shadow(0 34px 50px rgba(0,0,0,.6)) drop-shadow(0 0 58px rgba(31,201,219,.7))}
  .prod-center{perspective:1100px}
  .prod-phone img{
    width:min(295px,100%);height:auto;position:relative;z-index:1;transform-style:preserve-3d;
    animation:phoneDrift 9s ease-in-out infinite;
    filter:drop-shadow(0 34px 50px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(31,201,219,.26));
    opacity:0;
    transition:filter .4s ease,opacity 1s var(--ease);
  }
  .prod-phone.vis img{opacity:1}
  @keyframes phoneDrift{
    0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(0)}
    50%{transform:rotateY(7deg) rotateX(-3deg) translateY(-14px)}
  }
  html.rm .prod-phone img{animation:none;opacity:1}
  .prod-halo{
    position:absolute;left:12%;right:12%;top:16%;bottom:16%;border-radius:50%;z-index:0;
    background:var(--pac,#1FC9DB);opacity:.17;filter:blur(70px);
    transition:background-color .6s ease;
  }
  .prod-fallback{display:none}
  html.rm .prod-stage{display:none}
  html.rm .prod-fallback{display:block;padding:110px 0}

  /* ================= PRODUCT HERO ART ================= */
  .ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
  video.bot{pointer-events:none;background:transparent}

  /* ================= CONTACT: BOT ON THE PHONE + SUPPORT CARDS ================= */
  .ct-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
  .ct-art::before{
    content:"";position:absolute;left:50%;top:50%;width:min(460px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(31,201,219,.30), rgba(110,142,255,.16) 42%, transparent 70%);
    filter:blur(30px);
  }
  .ct-art::after{
    content:"";position:absolute;left:50%;bottom:4%;width:min(300px,62%);height:26px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(31,201,219,.5), transparent 70%);
    filter:blur(10px);
  }
  .ct-art .ct-bot{position:relative;display:block;width:min(430px,92%);height:auto;animation:bob 9s ease-in-out infinite}
  video.ct-bot{pointer-events:none;background:transparent}
  html.rm .ct-art .ct-bot{animation:none}
  /* toll free hero: the turning silver phone (alpha video, poster still under reduced motion) */
  .tf-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
  .tf-art::before{
    content:"";position:absolute;left:50%;top:52%;width:min(420px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(31,201,219,.26), rgba(110,142,255,.14) 42%, transparent 70%);
    filter:blur(30px);
  }
  .tf-art::after{
    content:"";position:absolute;left:50%;bottom:6%;width:min(220px,50%);height:22px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(31,201,219,.45), transparent 70%);
    filter:blur(10px);
  }
  .tf-art .tf-phone{position:relative;display:block;height:clamp(380px,58vh,560px);width:auto;animation:bob 9s ease-in-out infinite}
  video.tf-phone{pointer-events:none;background:transparent}
  html.rm .tf-art .tf-phone{animation:none}
  /* mobius hero: the robot at its desk (alpha video cut from a black ground), floating over a teal halo with the desk fading out at the bottom */
  .mb-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
  .mb-art::before{
    content:"";position:absolute;left:50%;top:50%;width:min(460px,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(31,201,219,.26), rgba(110,142,255,.13) 42%, transparent 70%);
    filter:blur(30px);
  }
  .mb-art::after{
    content:"";position:absolute;left:50%;bottom:9%;width:min(300px,64%);height:26px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(31,201,219,.45), transparent 70%);
    filter:blur(10px);
  }
  .mb-art .mb-bot{
    position:relative;display:block;width:min(430px,92%);height:auto;animation:bob 9s ease-in-out infinite;
    -webkit-mask-image:linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 99%);mask-image:linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 99%);
  }
  video.mb-bot{pointer-events:none;background:transparent}
  html.rm .mb-art .mb-bot{animation:none}
  /* sms heartbeat hero: the robot with its test flask, same floating treatment without the desk fade */
  .hb-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
  .hb-art::before{
    content:"";position:absolute;left:50%;top:50%;width:min(460px,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(31,201,219,.26), rgba(110,142,255,.13) 42%, transparent 70%);
    filter:blur(30px);
  }
  .hb-art::after{
    content:"";position:absolute;left:50%;bottom:6%;width:min(280px,60%);height:24px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(31,201,219,.45), transparent 70%);
    filter:blur(10px);
  }
  .hb-art .hb-bot{position:relative;display:block;width:min(420px,90%);height:auto;animation:bob 9s ease-in-out infinite}
  video.hb-bot{pointer-events:none;background:transparent}
  .hb-art .hb-desk{-webkit-mask-image:linear-gradient(180deg, #000 78%, rgba(0,0,0,0) 99%);mask-image:linear-gradient(180deg, #000 78%, rgba(0,0,0,0) 99%)}
  html.rm .hb-art .hb-bot{animation:none}
  /* ===== twofa: CSS ===== */
  /* 2FA hero: the illustration as six layers on one stage (ground with the podium, phone, shield, code card, badge
     connector, badge). Defaults are the composed, fully visible picture, so no JS and reduced motion show the
     finished illustration; the JS hides the objects at bind and springs them in one by one, then drives a
     depth parallax from scroll (and the pointer on fine pointers). Per frame writes are transform and opacity
     on the layers plus one clip-path on the connector; nothing else animates. */
  .tfa-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
  .tfa-stage{position:relative;height:clamp(380px,58vh,600px);aspect-ratio:720 / 1040;perspective:1400px;perspective-origin:50% 40%}
  .tfa-l{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;
    max-width:none;margin:0;border-radius:0;filter:none;animation:none;box-shadow:none;transform-origin:50% 64%;will-change:transform,opacity}
  .tfa-l.l-conn{transform-origin:75% 13.7%}
  .tfa-rim{position:absolute;left:8%;right:8%;top:69%;height:16%;border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at center, rgba(31,201,219,.55), rgba(31,201,219,0) 70%);filter:blur(16px);will-change:opacity}
  html.rm .tfa-l{opacity:1!important;transform:none!important;clip-path:none!important}
  html.rm .tfa-rim{opacity:0!important}
  @media (max-width:1040px){
    .tfa-art{min-height:0}
    .tfa-stage{height:min(440px,55vh)}
  }
  .info .row{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:500}
  .info .row + .row{margin-top:4px}
  .info .row svg{width:16px;height:16px;flex:none;color:var(--teal)}
  .info .row a:hover{color:var(--teal)}
  .info .row .go{margin-left:auto;color:var(--t3);transition:color .2s ease}
  a.info-tg{cursor:pointer}
  a.info-tg .tg-mark{width:22px;height:22px;flex:none;border-radius:50%;box-shadow:0 0 18px rgba(42,171,238,.45);transition:box-shadow .3s ease}
  a.info-tg:hover .tg-mark{box-shadow:0 0 26px rgba(42,171,238,.75)}
  a.info-tg:hover .go{color:var(--teal)}

  /* ================= UNIFIED CHILD STAGGER (inner pages) ================= */
  .js .plans.rv,.js .vals.rv,.js .infos.rv,.js .form-panel.rv{opacity:1;transform:none}
  .js .plans.rv .plan{opacity:0;transform:translateY(26px)}
  .js .plans.rv .plan.hot{transform:translateY(34px)}
  .js .plans.rv.in .plan{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .js .plans.rv.in .plan:nth-child(1){transition-delay:.05s}
  .js .plans.rv.in .plan:nth-child(3){transition-delay:.17s}
  .js .plans.rv.in .plan:nth-child(2){transition-delay:.32s}
  .js .plans.rv .plan.hot::before{transform:scaleX(0);transform-origin:0 50%}
  .js .plans.rv.in .plan.hot::before{transform:scaleX(1);transition:transform .9s var(--ease) .66s}
  .js .form-panel.rv .steps,.js .form-panel.rv .field,.js .form-panel.rv form>div:not(.formgrid){opacity:0;transform:translateY(12px)}
  .js .form-panel.rv.in .steps,.js .form-panel.rv.in .field,.js .form-panel.rv.in form>div:not(.formgrid){opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
  .js .form-panel.rv.in .steps{transition-delay:.1s}
  .js .form-panel.rv.in .field:nth-child(1){transition-delay:.16s}
  .js .form-panel.rv.in .field:nth-child(2){transition-delay:.22s}
  .js .form-panel.rv.in .field:nth-child(3){transition-delay:.28s}
  .js .form-panel.rv.in .field:nth-child(4){transition-delay:.34s}
  .js .form-panel.rv.in .field:nth-child(5){transition-delay:.4s}
  .js .form-panel.rv.in .field:nth-child(6){transition-delay:.46s}
  .js .form-panel.rv.in .field:nth-child(7){transition-delay:.52s}
  .js .form-panel.rv.in .field:nth-child(8){transition-delay:.58s}
  .js .form-panel.rv.in form>div:not(.formgrid){transition-delay:.64s}
  .js .featrow.rv .fi{opacity:0;transform:translateY(8px) scale(.9)}
  .js .featrow.rv.in .fi{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s ease,border-color .3s ease;transition-delay:calc(var(--fd,0ms) + 110ms)}
  .js .featrow.rv.in:hover .fi{transition-delay:0s;transform:translateY(-2px)}
  .js .vals.rv .val{opacity:0;transform:translateY(16px)}
  .js .vals.rv.in .val{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .vals.rv.in .val:nth-child(2){transition-delay:.09s}
  .js .vals.rv.in .val:nth-child(3){transition-delay:.18s}
  .js .vals.rv.in .val:nth-child(4){transition-delay:.27s}
  .js .ratetable-wrap.rv tbody tr{opacity:0;transform:translateX(-16px)}
  .js .ratetable-wrap.rv.in tbody tr{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .ratetable-wrap.rv.in tbody tr:nth-child(1){transition-delay:.08s}
  .js .ratetable-wrap.rv.in tbody tr:nth-child(2){transition-delay:.16s}
  .js .ratetable-wrap.rv.in tbody tr:nth-child(3){transition-delay:.24s}
  .js .ratetable-wrap.rv.in tbody tr:nth-child(4){transition-delay:.32s}
  .js .ratetable-wrap.rv.in tbody tr:nth-child(5){transition-delay:.4s}

  /* ================= DISPATCH: scroll acts, rail, peak ================= */
  [data-x-span]{position:relative}
  .x-stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden}
  html.rm [data-x-span]{height:auto!important}
  html.rm .x-stage{position:static;min-height:0;overflow:visible}

  /* delivery trace rail */
  .rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:16px}
  .rail-status{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);transition:color .3s ease}
  .rail.done .rail-status{color:var(--ok)}
  .rail-track{position:relative;width:2px;height:min(300px,40vh);background:rgba(255,255,255,.1);border-radius:2px;margin-right:5px}
  #railFill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--beam);border-radius:2px;box-shadow:0 0 10px rgba(31,201,219,.7);clip-path:inset(0 0 100% 0)}
  html.rm #railFill{clip-path:none}
  .rail-stop{position:absolute;right:-5px;transform:translateY(-50%);display:flex;align-items:center;gap:10px;flex-direction:row-reverse;padding:4px;cursor:pointer}
  .rail-stop i{width:8px;height:8px;border-radius:50%;border:1.4px solid var(--t3);background:var(--bg);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .2s var(--ease);display:block}
  .rail-stop:hover i{transform:scale(1.25)}
  .rail-stop.stamped i{animation:stampPop .38s cubic-bezier(.3,1.45,.5,1)}
  @keyframes stampPop{0%{transform:scale(.55)}62%{transform:scale(1.22)}100%{transform:scale(1)}}
  html.rm .rail-stop.stamped i{animation:none}
  html.rm .rail-stop:hover i{transform:none}
  .rail-stop span{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);transition:color .3s ease;white-space:nowrap}
  .rail-stop.stamped i{background:var(--teal);border-color:transparent;box-shadow:0 0 12px rgba(31,201,219,.9)}
  .rail-stop.stamped span{color:var(--teal)}
  .rail-stop:last-child.stamped i{background:var(--ok);box-shadow:0 0 12px rgba(95,217,162,.9)}
  .rail-stop:last-child.stamped span{color:var(--ok)}
  .rail-stop:active{transform:translateY(-50%) scale(.94)}

  /* hero compose line */
  .compose{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;color:var(--t2);white-space:nowrap;overflow:hidden}
  .compose .c-to{color:var(--t3)}
  .c-caret{width:6px;height:11px;background:var(--teal);animation:blink 1.1s steps(1) infinite;flex:0 0 6px}
  .compose .qd{color:var(--ok)}
  html.rm .c-caret{animation:none}

  /* mission checklist verifies under scroll, reversible with a small rise */
  #missionAct .check{opacity:.3;transform:translateY(7px);transition:opacity .5s ease,background .5s ease,transform .6s var(--ease)}
  #missionAct .check i{transition:box-shadow .45s ease}
  #missionAct .check.lit{opacity:1;background:rgba(31,201,219,.05);transform:none}
  #missionAct .check.lit i{box-shadow:0 0 14px rgba(31,201,219,.95)}
  html.rm #missionAct .check{opacity:1;transform:none}

  /* terminal wipe */
  .xreveal{clip-path:inset(100% 0 0 0)}
  .xreveal.on{clip-path:inset(0 0 0 0);transition:clip-path .85s var(--ease)}
  html.rm .xreveal{clip-path:none}

  /* the delivery: peak act, neon beams converge and reveal the brand */
  .peak-stage{display:block}
  .peak-route{position:absolute;inset:0;width:100%;height:100%}
  .peak-transit{position:absolute;left:50%;top:16%;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--t3);opacity:0;margin:0}
  .beams path{filter:drop-shadow(0 0 7px currentColor)}
  .peak-burst{
    position:absolute;left:50%;top:50%;width:440px;height:440px;pointer-events:none;
    transform:translate(-50%,-50%) scale(.55);border-radius:50%;opacity:0;
    background:radial-gradient(circle, rgba(46,211,228,.35), rgba(46,211,228,.07) 45%, transparent 70%);
    transition:opacity .45s ease,transform .7s var(--ease);
  }
  .peak-burst.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .peak-brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:26px;
  }
  .peak-logo{
    height:clamp(52px,7vw,92px);width:auto;opacity:0;transform:scale(.8);
    filter:drop-shadow(0 0 36px rgba(31,201,219,.5));
    transition:opacity .5s ease,transform .75s var(--ease);
  }
  .peak-brand.on .peak-logo{opacity:1;transform:scale(1)}
  .peak-word{
    font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:600;margin:0;
    letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;
    color:var(--text);text-shadow:0 0 44px rgba(31,201,219,.65);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease,transform .65s var(--ease);
  }
  .peak-brand.word .peak-word{opacity:1;transform:none}
  html.rm .peak-transit{opacity:0}
  html.rm .peak-brand .peak-logo{opacity:1;transform:none}
  html.rm .peak-word{opacity:1;transform:none}
  html.rm .peak-burst{opacity:0}
  /* phones and reduced motion: the delivery act is a composed still (the pinned beam choreography needs a mouse wheel and a tall viewport) */
  #deliveryAct.static{height:auto!important;padding:0}
  #deliveryAct.static .peak-stage{position:relative;min-height:min(70vh,560px);overflow:hidden}
  #deliveryAct.static .peak-route{opacity:.4}
  #deliveryAct.static .peak-transit{opacity:0}
  #deliveryAct.static .peak-brand .peak-logo{opacity:1;transform:none}
  #deliveryAct.static .peak-word{opacity:1;transform:none}
  #deliveryAct.static .peak-burst{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none}

  /* ================= OUR STORY: editorial chapter ================= */
  .os{color:var(--text);font-family:-apple-system,'SF Pro Text','Geist',system-ui,sans-serif}
  .os section{padding:84px 0}
  .js .os .rv.in{transition-delay:var(--rvd,0s)}
  .os .os-hero{position:relative;padding:170px 0 96px;text-align:center}
  .os-eyebrow{font-size:17px;color:var(--t2);margin:0}
  .os-h1{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-weight:700;font-size:clamp(44px,7vw,92px);letter-spacing:-.015em;line-height:1.05;color:var(--text);max-width:14em;margin:18px auto 0;text-wrap:balance}
  .os-lede{font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--t2);max-width:36em;margin:22px auto 0}
  .os-ctas{display:flex;gap:26px;justify-content:center;align-items:center;margin-top:32px;flex-wrap:wrap}
  .os-link{color:var(--teal);font-size:17px}
  .os-link:hover{text-decoration:underline}
  .os-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(640px 420px at 74% 6%, rgba(31,201,219,.13), transparent 66%),
    radial-gradient(700px 460px at 12% 90%, rgba(52,120,255,.1), transparent 68%);
  }
  .os-hero .wrap{position:relative}
  .os-canvas{position:relative;background:linear-gradient(180deg, rgba(31,201,219,.045), transparent 45%), var(--bg2)}
  .os-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(560px 400px at 80% 42%, rgba(31,201,219,.12), transparent 64%),
    radial-gradient(520px 380px at 8% 88%, rgba(52,120,255,.09), transparent 66%);
  }
  .os-canvas .wrap{position:relative}
  .os-hq{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
  .os-hq-copy{display:flex;flex-direction:column;gap:0}
  .os-h3{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-weight:700;font-size:clamp(32px,3.6vw,52px);letter-spacing:-.015em;color:var(--text);margin:14px 0 0}
  .os-body{font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--t2);max-width:34em;margin:18px 0 0}
  .os-facts{margin:30px 0 0;display:flex;flex-direction:column}
  .os-facts>div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .os-facts>div:first-child{border-top:1px solid var(--line)}
  .os-facts dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
  .os-facts dd{margin:0;font-size:15px;color:var(--t2)}
  .os-facts dd a{color:var(--teal)}
  .os-facts dd a:hover{text-decoration:underline}
  .os-photo{margin:0;display:flex;flex-direction:column;gap:16px;align-items:center}
  .os-build{position:relative;width:min(440px,100%);aspect-ratio:675/564;border-radius:28px;overflow:hidden;background:#05060A;will-change:transform;
    --og:0;--oe:1;--ol:0;--ls:1;--ly:0px;--sx:0px;--sy:0px}
  .js .os-build{--oe:0}
  .os-build>*{position:absolute;inset:0}
  .mz-photo{position:relative;display:block;width:100%;height:auto;z-index:4;opacity:var(--oe)}
  .mz-band{z-index:1;background:var(--conc) center/100% 100% no-repeat;opacity:0;transform:translate3d(0,-6px,0);will-change:transform,opacity;pointer-events:none}
  .mz-core{z-index:2}
  .mz-glass{z-index:3;background:var(--glass) center/100% 100% no-repeat;opacity:var(--og);pointer-events:none}
  .mz-lines{z-index:5;pointer-events:none;overflow:hidden;opacity:var(--ol);transform:translate3d(0,var(--ly),0) scale(var(--ls));transform-origin:50% 60%;background:rgba(120,224,236,.82);-webkit-mask:var(--wire) center/100% 100% no-repeat;mask:var(--wire) center/100% 100% no-repeat}
  .mz-sweep{position:absolute;inset:-80%;display:block;background:linear-gradient(60deg,transparent 43%,rgba(235,253,255,.98) 50%,transparent 57%);transform:translate3d(var(--sx),var(--sy),0)}
  .os-build::after{content:"";position:absolute;inset:0;z-index:6;border-radius:28px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);opacity:calc(1 - var(--oe))}
  @media (max-resolution:1.5dppx){.mz-lines{background:rgba(120,224,236,.92)}}
  html.rm .mz-band,html.rm .mz-glass,html.rm .mz-lines,html.rm .os-build::after{display:none}
  html.rm .mz-photo{opacity:1!important}
  .os-cap{font-size:14px;color:var(--t3)}
  #osPin{position:relative}
  .os-stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:clip}
  .os-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(700px 480px at 22% 50%, rgba(52,120,255,.1), transparent 66%),
    radial-gradient(520px 380px at 88% 20%, rgba(31,201,219,.08), transparent 64%);
  }
  .os-stage .wrap{position:relative}
  .os-stmt{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-weight:600;font-size:clamp(28px,3.8vw,50px);line-height:1.18;letter-spacing:-.02em;max-width:21em;margin:0}
  .os-w{color:#5F6875;transition:color .35s ease}
  .os-w.ink{color:var(--text)}
  .os-h2{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-weight:700;font-size:clamp(40px,5vw,64px);letter-spacing:-.015em;color:var(--text);margin:0 0 44px}
  .os-vals{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .os-card{
    border-radius:28px;padding:40px;
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ac,#1FC9DB) 11%, transparent), transparent 55%),
      rgba(255,255,255,.03);
    border:1px solid color-mix(in srgb, var(--ac,#1FC9DB) 22%, transparent);
    box-shadow:0 0 34px -14px color-mix(in srgb, var(--ac,#1FC9DB) 35%, transparent);
  }
  .os-card:nth-child(1){--ac:#1FC9DB}
  .os-card:nth-child(2){--ac:#6E8EFF}
  .os-card:nth-child(3){--ac:#4ADE9E}
  .os-card:nth-child(4){--ac:#A78BFA}
  .os-card h3{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--text);margin:0}
  .os-card p{font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--t2);margin:12px 0 0}
  .js .os-vals.rv{opacity:1;transform:none}
  .js .os-vals.rv .os-card{opacity:0;transform:translateY(18px)}
  .js .os-vals.rv.in .os-card{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .os-vals.rv.in .os-card:nth-child(2){transition-delay:.08s}
  .js .os-vals.rv.in .os-card:nth-child(3){transition-delay:.16s}
  .js .os-vals.rv.in .os-card:nth-child(4){transition-delay:.24s}
  .os-close{position:relative;text-align:center;overflow:clip}
  .os-close::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 380px at 50% 110%, rgba(31,201,219,.14), transparent 70%)}
  .os-close .wrap{position:relative}
  .os-close h2{font-family:-apple-system,'SF Pro Display','Geist',system-ui,sans-serif;font-weight:700;font-size:clamp(40px,5.6vw,72px);letter-spacing:-.015em;color:var(--text);margin:0}
  html.rm .os-w{color:var(--text)}
  html.rm #osPin{height:auto!important}
  html.rm .os-stage{position:static;min-height:0;padding:84px 0}
  html.rm .os-photo img{transform:none!important}

  /* ================= RESPONSIVE ================= */
  @media (max-width:1280px){
    .hero{padding:180px 0 76px}
    .hero-grid{gap:32px}
    .bot-w{width:min(340px,70%)}
    .console{width:min(276px,84%)}
    .stage{min-height:500px}
  }

  /* ===== final: CSS ===== */
  /* Machined slab, production cut. Each contact card is a thick dark tile: a lit 1px top edge, a
     raised face with a vertical light-to-shadow falloff and a faint cobalt cast, an engraved index
     mark, a low teal underglow that flares once as the tile lands, and a dark extruded body behind
     it that reveals its side as the tile tilts. The card body (.info, .form-panel) carries the only
     animated properties, opacity and one 3D transform, written INLINE by JS every frame; inline
     beats every production reveal rule, so the block needs no deletions to work.
     The body fades during the entrance and opacity < 1 forces transform-style:flat, so the slab is
     built as coplanar plates inside the card's own stacking context (isolation:isolate):
       .slab-lume  z -4  pre-painted teal underglow, opacity only (--g)
       ::before    z -3  extruded body, offset by the projected thickness (--bx/--by)
       ::after     z -2  face, static paint, never repainted per frame
       .slab-sheen z -1  clipped light layer: its disc moves by transform (--mx/--my), fades by --sp
       content            paints on top; value, rows, icons and note slide by depth (--sx/--sy)
     .slab-lume and .slab-sheen are empty <i aria-hidden> children, injected by the JS if absent.
     Vars written by JS: --bx --by --g --sp --mx --my --sx --sy on cards; --by --fp on the panel.
     Every default below is the resting, fully visible state, so a JS failure degrades to static cards. */
  .contact-grid .infos{position:relative;counter-reset:slab}
  .contact-grid .infos .info,.contact-grid .infos .info:hover,.contact-grid .infos a.info-tg:hover{
    position:relative;isolation:isolate;overflow:visible;counter-increment:slab;
    border:1px solid transparent;background:transparent;box-shadow:none;transition:none}
  /* the production reveal for these elements is replaced by the scrub; rest state is visible and flat */
  .js .contact-grid .infos.rv .info,.js .contact-grid .infos.rv.in .info{opacity:1;transform:none;transition:none}
  .js .contact-grid .form-panel.rv,.js .contact-grid .form-panel.rv.in{opacity:1;transform:none;transition:none}
  /* extruded body: same footprint as the face, offset by the projected thickness of a 28px slab;
     at rest it shows a 3px lip under the face */
  .contact-grid .infos .info::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-3;
    transform:translate(var(--bx,0px),var(--by,3px));will-change:transform;
    background:linear-gradient(180deg,#0f131d 0%,#080a10 55%,#04050a 100%);
    border:1px solid rgba(255,255,255,.075);
    box-shadow:0 30px 60px -26px rgba(0,0,0,.95), 0 10px 22px -12px rgba(0,0,0,.75)}
  /* face: lit top edge, raised surface with a vertical falloff and a faint cobalt cast. Static. */
  .contact-grid .infos .info::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-2;
    border:1px solid rgba(124,142,190,.22);border-top-color:rgba(168,184,226,.36);
    background:
      radial-gradient(130% 100% at 0% 0%, rgba(110,142,255,.08), rgba(110,142,255,0) 62%),
      linear-gradient(180deg,#12161f 0%,#0e1119 48%,#0a0d13 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.6);
    transition:border-color .3s ease}
  .contact-grid .infos .info:hover::after{border-color:rgba(31,201,219,.42);border-top-color:rgba(120,224,236,.5)}
  .contact-grid .infos a.info-tg:hover::after{border-color:rgba(42,171,238,.5);border-top-color:rgba(130,205,245,.55)}
  /* underglow: a thin strip under the lower third of the tile whose pre-painted teal shadow spills
     below the body. --g rests at .15, flares to 1 as the slab lands, brightens to .5 under the pointer */
  .contact-grid .infos .info .slab-lume{position:absolute;left:10%;right:10%;bottom:6px;height:32%;z-index:-4;border-radius:20px;pointer-events:none;
    opacity:var(--g,.15);will-change:opacity;
    box-shadow:0 20px 46px -4px rgba(31,201,219,.6), 0 8px 22px -4px rgba(31,201,219,.38)}
  /* sheen: a clipped layer above the face. ::before is a flat pre-painted light (white core, teal
     halo) that hugs the lit top edge and follows the pointer by transform only; ::after is the 1px
     top edge itself catching that light. The layer's opacity follows --sp. */
  .contact-grid .infos .info .slab-sheen{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none;
    opacity:var(--sp,0);will-change:opacity}
  .contact-grid .infos .info .slab-sheen::before{content:"";position:absolute;left:0;top:0;width:480px;height:200px;pointer-events:none;
    background:
      radial-gradient(150px 56px at 50% 50%, rgba(255,255,255,.09), rgba(255,255,255,0) 100%),
      radial-gradient(240px 92px at 50% 50%, rgba(31,201,219,.085), rgba(31,201,219,0) 100%);
    transform:translate3d(calc(var(--mx,240px) - 50%),calc(var(--my,0px) - 50%),0);will-change:transform}
  .contact-grid .infos .info .slab-sheen::after{content:"";position:absolute;left:0;top:0;width:300px;height:1px;pointer-events:none;
    background:linear-gradient(90deg, rgba(190,240,250,0), rgba(190,240,250,.7) 50%, rgba(190,240,250,0));
    transform:translate3d(calc(var(--mx,240px) - 50%),0,0);will-change:transform}
  /* engraved index mark, top right; turns teal while the slab is live under the pointer */
  .contact-grid .infos .info .k::after{content:counter(slab,decimal-leading-zero);position:absolute;top:16px;right:20px;
    font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.18em;line-height:1;
    color:rgba(169,177,188,.5);pointer-events:none;transition:color .3s ease}
  .contact-grid .infos .info:hover .k::after{color:var(--teal)}
  /* live line: a 6px status LED before the Customer support label (class added by JS from the label text) */
  .contact-grid .infos .info.slab-live .k{display:inline-flex;align-items:center;gap:9px}
  .contact-grid .infos .info.slab-live .k::before{content:"";width:6px;height:6px;border-radius:50%;background:#5FE3F0;flex:none;
    box-shadow:0 0 0 2px rgba(31,201,219,.16),0 0 10px 1px rgba(31,201,219,.85);animation:slabLed 2.4s ease-in-out infinite}
  @keyframes slabLed{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
  /* content depth: layers slide toward the pointer by depth x sin(tilt), the projection of a layer
     floating above the face. --sx/--sy are px per unit of depth, exactly 0px at rest. */
  .contact-grid .infos .info .v,.contact-grid .infos .info .row{transform:translate(calc(32 * var(--sx,0px)),calc(32 * var(--sy,0px)))}
  .contact-grid .infos .info .s{transform:translate(calc(8 * var(--sx,0px)),calc(8 * var(--sy,0px)))}
  .contact-grid .infos .info .row > svg{transform:translate(calc(24 * var(--sx,0px)),calc(24 * var(--sy,0px)))}
  .contact-grid .infos a.info-tg .tg-mark{transition:box-shadow .3s ease;
    transform:translate(calc(24 * var(--sx,0px)),calc(24 * var(--sy,0px))) scale(calc(1 + .12 * var(--sp,0))) rotate(calc(-8deg * var(--sp,0)))}
  .contact-grid .infos .info .row .go{transition:color .2s ease;
    transform:translate(calc(4px * var(--sp,0) + 24 * var(--sx,0px)),calc(24 * var(--sy,0px)))}
  /* form panel: the same two-plate slab with an opaque face, so the fixed grid stops behind both
     columns. The production beam and its glow move into the face. */
  .contact-grid .form-panel{position:relative;isolation:isolate;overflow:visible;background:transparent;border-color:transparent;box-shadow:none}
  .contact-grid .form-panel::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;height:auto;border-radius:inherit;pointer-events:none;z-index:-2;
    transform:translate(0,var(--by,3px));will-change:transform;
    background:linear-gradient(180deg,#0b1018 0%,#070a10 55%,#04050a 100%);
    border:1px solid rgba(31,201,219,.14);
    box-shadow:0 36px 72px -30px rgba(0,0,0,.95)}
  .contact-grid .form-panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
    border:1px solid rgba(31,201,219,.32);
    background:
      linear-gradient(92deg,#0999A8,#25D3E4 55%,#9DF0F6) no-repeat 10% 0 / 80% 2px,
      radial-gradient(42% 26px at 50% 0%, rgba(31,201,219,.38), rgba(31,201,219,0) 100%),
      linear-gradient(180deg,#0c1219 0%,#0a0d14 45%,#090b11 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 70px -18px rgba(31,201,219,.35), inset 0 0 40px -24px rgba(31,201,219,.35)}
  /* form fields follow the panel's own landing (--fp, 0..1 written by JS) with a fixed lag per field,
     so the interior lands after the panel does. Default --fp 1 = visible. */
  .js .contact-grid .form-panel .field,.js .contact-grid .form-panel form>div:not(.formgrid),
  .js .contact-grid .form-panel.rv.in .field,.js .contact-grid .form-panel.rv.in form>div:not(.formgrid){
    --fq:clamp(0, (var(--fp,1) - var(--fd,0)) / .5, 1);
    opacity:var(--fq);transform:translate(0,calc(12px * (1 - var(--fq))));transition:none}
  .js .contact-grid .form-panel .field:nth-child(2){--fd:.12}
  .js .contact-grid .form-panel .field:nth-child(3){--fd:.24}
  .js .contact-grid .form-panel .field:nth-child(4){--fd:.36}
  .js .contact-grid .form-panel form>div:not(.formgrid){--fd:.48}
  /* reduced motion: everything static, flat and visible; the LED holds still */
  html.rm .contact-grid .infos .info,html.rm .contact-grid .form-panel{opacity:1!important;transform:none!important}
  html.rm .contact-grid .infos .info::before,html.rm .contact-grid .form-panel::before{transform:translate(0,3px)!important}
  html.rm .contact-grid .infos .info .slab-lume{opacity:.15!important}
  html.rm .contact-grid .infos .info .slab-sheen{display:none}
  html.rm .contact-grid .infos .info .v,html.rm .contact-grid .infos .info .row,html.rm .contact-grid .infos .info .s,
  html.rm .contact-grid .infos .info .row > svg,html.rm .contact-grid .infos .info .row .go,html.rm .contact-grid .infos a.info-tg .tg-mark{transform:none!important}
  html.rm .contact-grid .infos .info.slab-live .k::before{animation:none}
  html.rm .contact-grid .form-panel .field,html.rm .contact-grid .form-panel form>div:not(.formgrid){opacity:1!important;transform:none!important}
  /* ===== final: end CSS ===== */

  @media (max-width:1040px){
    .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
    .hero-copy,.stage,.console{min-width:0;max-width:100%}
    .compose{min-width:0}
    #composeTxt{min-width:0;overflow:hidden;text-overflow:ellipsis}
    .stage{min-height:0;flex-direction:column;align-items:center;gap:26px;margin-top:30px}
    .bot-w{margin-right:0}
    .console{position:relative;width:min(380px,100%);order:2}
    .bot-w{order:1}
    .halo{right:auto;left:50%;transform:translateX(-50%)}
    .statline{grid-template-columns:repeat(2,1fr);gap:22px}
    .pillars{grid-template-columns:1fr;gap:30px}
    .mission,.apiblock,.story-grid,.contact-grid,.gs-grid{grid-template-columns:1fr;gap:48px}
    .gs-side{position:static}
    .featrows{grid-template-columns:1fr}
    .featrows .featrow:nth-child(2){border-top:0}
    .ph-grid{grid-template-columns:1fr;gap:24px}
    .ct-art .ct-bot{width:min(300px,72%)}
    .tf-art .tf-phone{height:min(440px,62vh)}
    .mb-art{min-height:0}
    .mb-art .mb-bot{width:min(300px,74%)}
    .hb-art{min-height:0}
    .hb-art .hb-bot{width:min(290px,72%)}
    .tf-art{min-height:0}
    .ct-art{min-height:0}
    .plans{grid-template-columns:1fr}
    .plan + .plan{border-left:0;border-top:1px solid var(--line)}
    .band-grid{grid-template-columns:1fr;gap:22px}
    .band .bot-sm{order:-1;width:116px;justify-self:start;margin-bottom:0}
    .band video.bot-sm{margin-bottom:-13px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .bento{grid-template-columns:repeat(2,1fr)}
    .nav-inner{gap:22px}
    .stage{min-height:0}
    .prod-stage{display:none}
    .prodAct{height:auto!important}
    .prod-fallback{display:block;padding:76px 0}
  }
  @media (max-width:900px){
    .rate-wrap{grid-template-columns:1fr;gap:32px;padding-top:112px}
    .rate-copy .lede{max-width:40em}
  }
  @media (max-width:720px){
    .eb,.stat .k,.fnote,.steps,.foot-grid h2,.sheet .grp,.plan .tag,.rm-head,.tnote,.compose,.console header,.console footer,.crow .ms,.crow .st,.term .bar span,.rt-s,.rt-p small,.rt-l,.rm-ticks,.op-r,.op-r em,.foot-bottom,.foot-bottom .concept,.rt-stamp,.os-facts dt,.bchips span,.bgo,.peak-transit,.story-office figcaption{font-size:.75rem}
    .field > label,fieldset.field legend,.ratefact,.info .k,.op-k,.rt-k,.switch a{font-size:.75rem}
    .foot-grid h2,.sheet .grp,.plan .tag,.rt-stamp,.eb,.peak-transit{letter-spacing:.14em}
    .steps{gap:16px}
    .steps>*{white-space:nowrap}
    .steps span em{display:none}
    .burger{padding:14px 12px;margin-right:-12px}
    .brand{padding:9px 0;margin:-9px 0}
    footer.site .brand{display:inline-flex;align-items:center;padding:10px 0;margin:-10px 0}
    footer.site .foot-grid ul{gap:0}
    footer.site .foot-grid li a{display:block;padding:10px 0}
    .switch{flex-wrap:wrap;gap:0 22px;border-bottom:0;overflow:visible}
    .switch a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
    .contact-grid .info .row + .row{margin-top:14px}
    .info .row a{display:inline-flex;flex:1;align-items:center;min-height:44px;margin:-9px 0}
    .info .v a{display:inline-flex;align-items:center;min-height:44px;margin:-11.5px 0}
    .os-facts dd a{display:inline-block;padding:13px 0;margin:-13px 0}
    .halo,.bot-shadow{animation:none}
    .band .btns .btn{flex:1;min-width:170px}
    .rate-tiles{grid-template-columns:1fr}
    .rate-copy h1{font-size:2.2rem}
    .rt-p{font-size:3rem}
    .rm-head{flex-direction:column;gap:6px}
    .optgrid{grid-template-columns:1fr}
    .opt.span2,.opt.span3{grid-column:auto}
    .rate-act.static .rate-wrap{padding-top:130px}
    .nav-links,.nav-cta .signin,.nav-cta .btn{display:none}
    .burger{display:flex}
    section{padding:76px 0}
    .hero{padding:150px 0 64px}
    .page-hero{padding:140px 0 52px}
    .formgrid{grid-template-columns:1fr}
    .field.full{grid-column:auto}
    .form-panel{padding:26px}
    .mission{padding:28px 22px}
    .foot-grid{grid-template-columns:1fr}
    .vals{grid-template-columns:1fr}
    .bot-w{width:min(280px,78%)}
    h1{font-size:clamp(2.3rem,10.5vw,3.15rem)}
    .os-vals{grid-template-columns:1fr}
    .os-hq{grid-template-columns:1fr;gap:40px}
    .os-build{width:min(360px,100%)}
    .os-facts>div{grid-template-columns:110px 1fr;gap:12px}
    .os .os-hero{padding:150px 0 80px}
    .os-h1{font-size:clamp(1.95rem,8.8vw,2.7rem);text-wrap:pretty}
    .os section{padding:76px 0}
    .os-card{padding:28px}
    .page-hero h1{font-size:clamp(1.95rem,8.8vw,2.7rem)}
    h2,.h2{font-size:clamp(1.5rem,6.4vw,1.95rem)}
    .wrap{padding:0 20px}
    .nav-inner{padding:8px 18px 0;height:72px}
    .band{padding:84px 0}
    .band .bot-sm{width:104px}
    .statline{margin-top:56px;grid-template-columns:repeat(2,1fr);gap:20px}
    .stat .v{font-size:1.32rem}
    .bento{grid-template-columns:1fr}
    .bcard{padding:24px}
    .bcard.feat,.bcard.wide{grid-column:auto}
    .sheet{padding:92px 24px 40px}
    .hero-ctas .btn{flex:1;min-width:170px}
    .rail{display:none}
    .peak-phone{width:186px;left:94%}
    .peak-word{top:64%}
    .peak-transit{width:90%;text-align:center;letter-spacing:.16em}
  }

  @media (max-width:1040px), (hover:none) and (pointer:coarse){
    .techbg svg{display:none}
    .pulse{animation:none}
    .pulse::before{animation:none;opacity:0}
  }

  /* ================= REDUCED MOTION ================= */
  @media (max-height:900px) and (max-width:720px){
    .sheet{padding-top:76px}
    .sheet a{padding:9px 0;font-size:1.35rem}
    .sheet a.sub{padding:8px 0 8px 16px}
    .sheet .grp{margin-top:18px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .rv{opacity:1;transform:none;transition:none}
    .js .h-line>span,.js .played .h-line>span{transform:none;transition:none}
    .bot,.band .bot-sm,.gs-side img,.story-bot img,.bot-shadow,.halo{animation:none}
    .crow.fresh{animation:none}
    .console header i{animation:none}
    .cursor{animation:none}
    .btn:hover{transform:none}
    .pulse{animation:none}
    .pulse::before{animation:none;opacity:0}
    .bcard,.bcard .bico,.bcard .bgo .arr{transition:none}
    .bcard:hover{transform:none}
    .bcard:hover .bico{transform:none}
    .js .nav .brand,.js .nav .nav-links,.js .nav .nav-cta{animation:none}
    .js .hero .eb{opacity:1;transform:none;transition:none}
    .js .statline .stat{opacity:1;transform:none;transition:none}
    .js .rv.in{transition-delay:0s}
    .js .played .h-line>span,.js .played .h-line:nth-child(2)>span,.js .played .h-line:nth-child(3)>span{transition-delay:0s}
    .js .plans.rv .plan,.js .form-panel.rv .steps,.js .form-panel.rv .field,.js .form-panel.rv form>div:not(.formgrid),.js .featrow.rv .fi,.js .vals.rv .val,.js .infos.rv .info,.js .ratetable-wrap.rv tbody tr{opacity:1;transform:none;transition:none}
    .js .plans.rv .plan.hot::before{transform:none;transition:none}
    .dropdown,.prod-wrap.open .dropdown,.sheet,.sheet.open{transition:none}
    .nav::before{transition:none}
    .nav-links>a::after,.nav-links button::after{transition:none}
    .brand:hover .logo-img,.brand:active .logo-img,.burger:active,.sheet a:active,.nav-cta .signin:active{transform:none}
    .field input:focus,.field select:focus,.field textarea:focus{transform:none}
  }