/* dark cinematic stage — near-black base with a colour-shifting radial glow (set from JS) */
  .techwrap{position:relative;background:#06090f;will-change:background}
  #techcanvas{position:sticky;top:0;left:0;width:100vw;height:100vh;height:100svh;display:block;z-index:1;will-change:filter}
  /* dark nav treatment while on the technology stage */
  body:has(.techwrap) .gnav.agnav{background:rgba(8,11,17,.6);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
  body:has(.techwrap) .gnav.agnav a,body:has(.techwrap) .gnav.agnav .ntop{color:rgba(255,255,255,.86)}
  body:has(.techwrap) .gnav.agnav .lg{color:#fff}
  body:has(.techwrap) .gnav.agnav .sipill{background:#fff;color:#06090f}
  .tech-prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#5ac8fa,#0a84ff);z-index:60;box-shadow:0 0 12px rgba(90,200,250,.6);opacity:0;transition:opacity .4s}
  /* frosted-glass text cards for readability against the product glow */
  .tx-block{position:fixed;z-index:10;pointer-events:none;opacity:0;font-family:var(--sans);will-change:opacity,transform}
  .tx-block .card{background:linear-gradient(160deg,rgba(33,40,58,.95),rgba(13,18,30,.94));backdrop-filter:blur(60px) saturate(1.7) brightness(1.08);-webkit-backdrop-filter:blur(60px) saturate(1.7) brightness(1.08);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:34px 36px;box-shadow:0 44px 100px -34px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04)}
  .tx-block .eb{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;color:#5ac8fa;margin:0 0 14px;text-transform:uppercase}
  /* animated gradient shimmer across the large titles */
  .tx-block h2,.tech-outro h2{background:linear-gradient(100deg,#f2f8ff 0%,#5ac8fa 28%,#8ab4ff 50%,#5ac8fa 72%,#f2f8ff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:txshine 6.5s linear infinite}
  @keyframes txshine{to{background-position:220% center}}
  .tx-block h2{font-size:clamp(32px,4.4vw,60px);line-height:1.03;font-weight:600;letter-spacing:-.035em;margin:0 0 14px}
  @media (prefers-reduced-motion:reduce){.tx-block h2,.tech-outro h2{animation:none}}
  .tx-block p{font-size:clamp(16px,1.5vw,20px);line-height:1.45;color:rgba(255,255,255,.74);margin:0;font-weight:400;letter-spacing:-.005em}
  /* all copy is horizontally centred — alternating top / bottom anchor keeps it clear of the product's dense middle */
  .tx-block[data-side="top"]{top:13vh;left:50%;width:min(640px,90vw);text-align:center}
  .tx-block[data-side="bottom"]{bottom:11vh;left:50%;width:min(640px,90vw);text-align:center}
  .tx-block[data-side="center"]{top:50%;left:50%;width:min(720px,90vw);text-align:center}
  .tx-block[data-side="center"] .card{padding:42px 46px}
  /* hero: dead-centre, no glass card — big, luminous, floating type with a soft shadow for legibility */
  .tx-block[data-side="hero"]{top:50%;left:50%;width:min(900px,92vw);text-align:center}
  .tx-block[data-side="hero"] .card{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0;padding:0;box-shadow:none}
  .tx-block[data-side="hero"] h2{font-size:clamp(46px,7.4vw,108px);letter-spacing:-.045em;line-height:.94;filter:drop-shadow(0 4px 34px rgba(0,0,0,.5))}
  .tx-block[data-side="hero"] p{font-size:clamp(17px,1.7vw,23px);max-width:34ch;margin:22px auto 0;color:rgba(255,255,255,.82);text-shadow:0 1px 24px rgba(0,0,0,.5)}
  .tx-block[data-side="hero"] .eb{color:#5ac8fa;text-shadow:none}
  .tx-hint{position:fixed;left:50%;bottom:5vh;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.55);font-family:var(--sans);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
  .tx-hint svg{width:22px;height:22px;animation:thbob 1.7s ease-in-out infinite}
  @keyframes thbob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
  @media (prefers-reduced-motion:reduce){.tx-hint svg{animation:none}}
  /* side dot navigator — hover for a label, click to glide to that beat */
  .tech-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:15px;opacity:0;transition:opacity .5s;pointer-events:none}
  .tech-dots.on{opacity:1;pointer-events:auto}
  .tdot{position:relative;width:9px;height:9px;padding:0;margin:0;border:0;border-radius:50%;background:rgba(255,255,255,.26);cursor:pointer;transition:background .3s,transform .3s;display:block}
  .tdot:hover{background:rgba(255,255,255,.65);transform:scale(1.25)}
  .tdot.act{background:#5ac8fa;transform:scale(1.4);box-shadow:0 0 12px rgba(90,200,250,.7)}
  .tdl{position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:#fff;background:rgba(12,16,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
  .tdot:hover .tdl,.tdot:focus-visible .tdl{opacity:1;transform:translateY(-50%) translateX(0)}
  /* no scroll-snap — pure native scroll (never blocks); the life comes from motion + reveals */
  @media (max-width:820px){
    .tx-block[data-side="top"]{top:11vh}
    .tx-block[data-side="bottom"]{bottom:12vh}
    .tx-block[data-side="top"],.tx-block[data-side="bottom"],.tx-block[data-side="center"]{width:min(560px,90vw)}
    .tx-block .card{padding:26px 26px}
    .tech-dots{display:none}
  }
  /* closing section */
  .tech-outro{background:#0a0f16;color:#fff;padding:clamp(80px,14vh,160px) 24px clamp(90px,15vh,170px);text-align:center;position:relative;z-index:2}
  .tech-outro .oi{max-width:1000px;margin:0 auto}
  .tech-eyebrow{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#5aa9f8;margin:0 0 14px}
  .tech-outro h2{font-size:clamp(34px,5vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
  .tech-outro .lede{font-size:clamp(17px,1.7vw,21px);color:rgba(255,255,255,.62);margin:16px auto 0;max-width:44ch;line-height:1.4}
  .tech-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:clamp(44px,7vh,76px) 0 clamp(40px,6vh,60px);text-align:left}
  .tech-feat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:24px 22px}
  .tech-feat .fi{width:40px;height:40px;border-radius:11px;background:rgba(90,169,248,.16);display:flex;align-items:center;justify-content:center;color:#5aa9f8;margin-bottom:16px}
  .tech-feat .fi svg{width:21px;height:21px}
  .tech-feat h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
  .tech-feat p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.5;margin:0}
  .tech-cta{display:inline-flex;align-items:center;justify-content:center;background:#0071E3;color:#fff;border-radius:980px;padding:15px 34px;font-size:17px;font-weight:500;letter-spacing:-.01em;text-decoration:none;transition:background .15s,transform .15s}
  .tech-cta:hover{background:#0077ED;text-decoration:none;transform:translateY(-1px)}
  .tech-cta.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);margin-left:12px}
  .tech-cta.ghost:hover{background:rgba(255,255,255,.08)}
  @media (max-width:860px){.tech-feats{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.tech-feats{grid-template-columns:1fr}.tech-cta.ghost{margin:12px 0 0}}