:root{--bg:#ffffff;--bg2:#f3f6ff;--card:#ffffff;--bd:rgba(15,23,42,.10);--tx:#0f172a;--mu:#475569;--c1:#0891b2;--c2:#7c3aed;--r:18px;--sh:0 10px 30px -12px rgba(76,29,149,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:Sora,Inter,sans-serif;line-height:1.15;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 clamp(20px,5vw,96px)}
.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px}

.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:.3s}
.nav.solid{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:Sora;font-weight:600;font-size:1.15rem}
.logo b{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
#menu{display:flex;align-items:center;gap:28px;font-size:.95rem;color:var(--mu)}
#menu a:not(.btn):hover{color:var(--tx)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--tx);transition:.3s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}

.btn{display:inline-block;padding:14px 26px;border-radius:999px;border:0;font:600 .95rem Inter;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(34,211,238,.55)}
.btn-sm{padding:9px 18px;color:#fff!important}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.btn.ghost:hover{border-color:var(--c1);box-shadow:none}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 70px;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.45;animation:float 14s ease-in-out infinite}
.g1{width:520px;height:520px;background:#0ea5c6;top:-120px;left:-120px}
.g2{width:480px;height:480px;background:#6d28d9;right:-120px;bottom:-100px;animation-delay:-6s}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 70%);opacity:.5}
@keyframes float{50%{transform:translate(40px,30px)}}
.hero-in{position:relative}
.eyebrow{color:var(--c1);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
h1{font-size:clamp(2.4rem,6.2vw,6rem);font-weight:800;max-width:16ch}
.grad{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:64ch;color:var(--mu);font-size:1.15rem;margin:24px 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px;max-width:1000px}
.stats li{border-left:1px solid var(--bd);padding-left:16px}
.stats strong{font:700 1.9rem Sora;display:block}
.stats span{color:var(--mu);font-size:.85rem}

.marquee{border-block:1px solid var(--bd);background:var(--bg2);overflow:hidden;padding:18px 0}
.track{display:flex;gap:48px;width:max-content;animation:scroll 32s linear infinite;color:var(--mu);font-family:Sora;font-weight:500;white-space:nowrap}
.track span::before{content:"◆";color:var(--c2);margin-right:48px;font-size:.6rem;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

.sec{padding:110px 0}
.alt{background:var(--bg2)}
h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;margin-bottom:18px}
.muted{color:var(--mu)}
.head{margin-bottom:48px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two p+p{margin-top:14px}
.two p{color:var(--mu)}
.cards-s{display:grid;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:28px;transition:.3s}
.card:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5);background:#fff;box-shadow:0 18px 40px -14px rgba(124,58,237,.3)}
.card h3{font-size:1.15rem;margin-bottom:10px}
.card p{color:var(--mu);font-size:.96rem}
.feature{border-color:rgba(139,92,246,.6);background:linear-gradient(160deg,rgba(139,92,246,.18),rgba(34,211,238,.06))}
.ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:18px;background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.2));color:var(--c1)}

.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips span{padding:10px 20px;border:1px solid var(--bd);border-radius:999px;background:var(--card);color:var(--mu);transition:.25s}
.chips span:hover{color:var(--c2);border-color:var(--c1);transform:translateY(-3px)}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{border-top:2px solid var(--bd);padding-top:20px}
.steps span{font:700 2.2rem Sora;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{margin:6px 0 8px}.steps p{color:var(--mu);font-size:.95rem}

details{border:1px solid var(--bd);border-radius:14px;background:var(--card);margin-bottom:12px;padding:0 22px}
summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--c1);font-size:1.3rem}
details[open] summary::after{content:"–"}
details p{color:var(--mu);padding-bottom:18px}

.info{list-style:none;margin-top:28px;display:grid;gap:16px}
.info b{display:block;color:var(--c1);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.info a:hover{color:var(--c1)}
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:.88rem;color:var(--mu)}
input,select,textarea{font:inherit;color:var(--tx);background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px 14px;width:100%}
select option{color:#0f172a}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c1)}
.note{min-height:1.4em;font-size:.9rem;color:var(--c1)}

.foot{border-top:1px solid var(--bd);padding:28px 0;color:var(--mu);font-size:.9rem}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot a:hover{color:var(--tx)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .two,.grid3,.steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .sec{padding:80px 0}
  .burger{display:block}
  #menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;padding:24px 20px;gap:18px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--bd);transform:translateY(-130%);transition:.35s}
  #menu.open{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* inner pages */
.page-hero{position:relative;padding:150px 0 80px;overflow:hidden;border-bottom:1px solid var(--bd)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);max-width:20ch}
.page-hero .glow{opacity:.3}
.cta-band{text-align:center;background:var(--bg2)}
.cta-band .muted{margin-bottom:26px}
.svc{display:block}
.more{display:inline-block;margin-top:14px;color:var(--c1);font-weight:600;font-size:.9rem}
.checks{list-style:none;display:grid;gap:12px;margin-top:6px}
.checks li{padding-left:28px;position:relative;color:var(--mu)}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--c1);font-weight:700}
.chips.links a{padding:10px 20px;border:1px solid var(--bd);border-radius:999px;background:var(--card);color:var(--mu);transition:.25s}
.chips.links a:hover{color:var(--c2);border-color:var(--c1)}
.steps.one{grid-template-columns:1fr}
#menu a[aria-current=page]:not(.btn){color:var(--tx)}

/* step: number ——— thin-line icon (both visible, animated on hover) */
.steps li{position:relative}
.steps li::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--c1),var(--c2));transition:width .7s ease}
.steps li:hover::before{width:100%}
.steps .num{display:flex;align-items:center;gap:14px;height:56px;margin-bottom:6px}
.steps .num i{font:700 2.2rem/1 Sora;font-style:normal;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .5s ease}
.steps .num::after{content:"";order:1;flex:1;height:1px;background:linear-gradient(90deg,var(--c1),var(--c2));transform:scaleX(.25);transform-origin:left;opacity:.35;transition:transform .6s ease,opacity .6s ease}
.steps .num svg{order:2;width:48px;height:48px;flex:none;fill:none;stroke:var(--c1);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transform:scale(.85);transition:opacity .5s ease .15s,transform .5s ease .15s,stroke .5s}
.steps li:hover .num i{transform:translateX(4px)}
.steps li:hover .num::after{transform:scaleX(1);opacity:1}
.steps li:hover .num svg{opacity:1;transform:scale(1) rotate(-8deg);stroke:var(--c2)}
.steps.one .num{max-width:260px}

/* flip cards */
.flip{perspective:1000px;height:190px;outline:none}
.flip-in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flip:hover .flip-in,.flip:focus-visible .flip-in,.flip:focus-within .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;padding:26px 28px;border-radius:var(--r);border:1px solid var(--bd);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#fff;box-shadow:var(--sh)}
.face h3{font-size:1.15rem}
.face p{color:var(--mu);font-size:.95rem}
.face .hint{color:var(--c1);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.face.back{transform:rotateY(180deg);background:linear-gradient(150deg,rgba(34,211,238,.18),rgba(139,92,246,.22)),#fff;border-color:rgba(34,211,238,.5)}
.face.back p{color:var(--tx)}
@media (hover:none){.flip{height:auto}.flip-in{transform:none!important;display:grid;gap:12px}.face{position:static;transform:none!important;backface-visibility:visible}.face .hint{display:none}}
@media (prefers-reduced-motion:reduce){.flip-in{transition:none}}
@media (max-width:900px){.flip{height:240px}}

/* thin-line icons */
svg.li{width:44px;height:44px;fill:none;stroke:var(--c1);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:16px;transition:transform .4s ease,stroke .3s}
.ic svg.li{margin:0;width:28px;height:28px}
.card:hover svg.li{transform:translateY(-3px) scale(1.06);stroke:var(--c2)}
.face.front svg.li{margin-bottom:10px}
.flip{height:230px}
@media (max-width:900px){.flip{height:260px}}

/* technology tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px 22px;border:1px solid var(--bd);border-radius:var(--r);background:var(--card);color:var(--mu);text-align:center;overflow:hidden;transition:transform .35s ease,border-color .35s,background .35s,color .35s;outline:none}
.tile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--c1),var(--c2));transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.tile svg.li{width:46px;height:46px;margin:0;stroke-dasharray:240;stroke-dashoffset:0;opacity:.75;transition:transform .45s ease,opacity .35s,stroke .35s}
.tile span{font-size:.95rem;font-weight:700;color:#1d4ed8;transition:color .3s}
.tile:hover,.tile:focus-visible{transform:translateY(-6px);border-color:rgba(34,211,238,.5);background:#fff;box-shadow:0 18px 40px -14px rgba(8,145,178,.3)}
.tile:hover::after,.tile:focus-visible::after{transform:scaleX(1)}
.tile:hover svg.li,.tile:focus-visible svg.li{opacity:1;stroke:var(--c2);transform:scale(1.12) rotate(-6deg);animation:draw .8s ease}
.tile:hover span,.tile:focus-visible span{color:#1e40af}
@keyframes draw{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tile svg.li{animation:none!important}}

/* hero canvas backgrounds */
.bg-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 45%,#000);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 45%,#000)}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.center{text-align:center;margin-top:44px}
.two-up{grid-template-columns:repeat(2,1fr)}@media (max-width:900px){.two-up{grid-template-columns:1fr}}

/* ---- home: challenge explorer ---- */
.ch{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:28px;align-items:stretch}
.ch-tabs{display:grid;gap:10px;align-content:start}
.ch-tab{display:flex;align-items:center;gap:16px;text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--bd);background:var(--card);color:var(--mu);font:500 1rem Inter;cursor:pointer;transition:.3s}
.ch-n{font:700 .85rem Sora;color:var(--c2);transition:.3s}
.ch-tab:hover{color:var(--c2);border-color:rgba(34,211,238,.4);transform:translateX(6px)}
.ch-tab.on{color:var(--c2);border-color:rgba(34,211,238,.6);background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(139,92,246,.10));transform:translateX(10px)}
.ch-tab.on .ch-n{color:var(--c1)}
.ch-panels{position:relative;border:1px solid var(--bd);border-radius:24px;background:linear-gradient(160deg,rgba(34,211,238,.07),rgba(139,92,246,.10)),var(--bg2);min-height:380px;overflow:hidden}
.ch-pan{padding:44px 44px 40px;opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.ch-pan[hidden]{display:none}
.ch-pan.on{opacity:1;transform:none}
.ch-pan svg.li{width:64px;height:64px;margin-bottom:18px}
.ch-pan h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:12px}
.ch-d{color:var(--tx);opacity:.85;max-width:56ch;margin-bottom:22px}
.ch-pan .checks{margin-bottom:30px}

/* statement banner */
.statement{padding:130px 0;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.18),transparent 65%)}
.st{font:800 clamp(2.4rem,8vw,7rem)/1.05 Sora;letter-spacing:-.03em}
.st span{display:inline-block;margin:0 .12em}
.st-sub{color:var(--mu);margin-top:22px;font-size:1.15rem}
.st.reveal span{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.st.reveal.in span{opacity:1;transform:none}
.st.reveal.in span:nth-child(2){transition-delay:.18s}.st.reveal.in span:nth-child(3){transition-delay:.36s}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:18px}
.bt{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;border-radius:24px;border:1px solid var(--bd);background:var(--card);overflow:hidden;transition:transform .4s ease,border-color .4s}
.bt::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(34,211,238,.16),transparent 60%);opacity:0;transition:opacity .4s}
.bt:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5)}
.bt:hover::before{opacity:1}
.bt>*{position:relative}
.bt svg.li{position:absolute;top:28px;left:30px;width:48px;height:48px;margin:0}
.bt h3{font-size:1.35rem;margin-bottom:8px}
.bt p{color:var(--mu);font-size:.95rem}
.bt .more{margin-top:14px;transition:transform .3s}
.bt:hover .more{transform:translateX(6px)}
.bt.big{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(139,92,246,.16)),var(--card)}
.bt.big h3{font-size:2.1rem}
.bt.big svg.li{width:84px;height:84px}
.bt.wide{grid-column:span 2}

@media (max-width:1000px){.bento{grid-template-columns:1fr 1fr}.bt.big{grid-column:span 2}}
@media (max-width:900px){
  .ch{grid-template-columns:1fr}
  .ch-tab.on,.ch-tab:hover{transform:none}
  .ch-pan{padding:30px 24px}
  .statement{padding:90px 0}
}
@media (max-width:600px){.bento{grid-template-columns:1fr}.bt.big,.bt.wide{grid-column:auto;grid-row:auto}}
@media (prefers-reduced-motion:reduce){.st.reveal span{opacity:1;transform:none}.ch-pan{transition:none}}
.bt.w2{grid-column:span 2}
.bt.wide{grid-column:span 4}
@media (max-width:1000px){.bt.wide{grid-column:span 2}}
@media (max-width:600px){.bt.w2{grid-column:auto}}

/* bento: keep icon in the flow so it never overlaps the title */
.bento{grid-auto-rows:minmax(250px,auto)}
.bt svg.li{position:static;margin:0 0 auto;flex:none}
.bt h3{margin-top:22px}

/* challenge panel: opens on click, staggered reveal */
.ch-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:380px;height:100%;color:var(--mu);text-align:center;padding:30px}
.ch-hint[hidden]{display:none}
.ch-hint span{font-size:2rem;color:var(--c1);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(-10px)}}
.ch-pan{transform:translateX(40px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ch-pan.on{transform:none}
.ch-pan>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ch-pan.on>*{opacity:1;transform:none}
.ch-pan.on>:nth-child(1){transition-delay:.05s}.ch-pan.on>:nth-child(2){transition-delay:.12s}.ch-pan.on>:nth-child(3){transition-delay:.19s}
.ch-pan.on>:nth-child(4){transition-delay:.26s}.ch-pan.on>:nth-child(5){transition-delay:.33s}.ch-pan.on>:nth-child(6){transition-delay:.42s}
.ch-pan.on svg.li{animation:pop .7s cubic-bezier(.2,.9,.3,1.3) .05s both}
@keyframes pop{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.ch-tab{position:relative;overflow:hidden}
.ch-tab::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--c1),var(--c2));transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.ch-tab.on::after{transform:scaleX(1)}
@media (max-width:900px){.ch-hint{min-height:120px}.ch-hint span{transform:rotate(90deg);animation:none}}
@media (prefers-reduced-motion:reduce){.ch-pan,.ch-pan>*{transition:none}.ch-hint span,.ch-pan.on svg.li{animation:none}}

/* quick-pick icons below the situation list */
.ch-side{display:grid;gap:22px;align-content:start}
.ch-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-top:6px}
.ch-ic{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;border:1px solid var(--bd);background:var(--card);cursor:pointer;transition:transform .35s ease,border-color .35s,background .35s}
.ch-ic svg.li{width:60%;height:60%;margin:0;opacity:.6;transition:opacity .3s,stroke .3s,transform .4s}
.ch-ic:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.5)}
.ch-ic:hover svg.li{opacity:1}
.ch-ic.on{border-color:rgba(34,211,238,.7);background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.2));transform:translateY(-4px)}
.ch-ic.on svg.li{opacity:1;stroke:var(--c1);transform:scale(1.1)}
@media (max-width:900px){.ch-ic:hover,.ch-ic.on{transform:none}}

/* contextual bento backgrounds */
.bt>.bt-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(200deg,#000 25%,transparent 75%);mask-image:linear-gradient(200deg,#000 25%,transparent 75%)}
.bt.big>.bt-bg{-webkit-mask-image:linear-gradient(190deg,#000 30%,transparent 80%);mask-image:linear-gradient(190deg,#000 30%,transparent 80%)}
.bt.wide>.bt-bg{-webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 80%);mask-image:linear-gradient(270deg,#000 25%,transparent 80%)}
.bt>svg.li,.bt>h3,.bt>p,.bt>.more{z-index:1}
.bt-bg .spin{transform-origin:300px 120px;animation:spin 14s linear infinite}
.bt-bg .s2{animation-duration:9s;animation-direction:reverse}
.bt-bg .s3{animation-duration:20s}
@keyframes spin{to{transform:rotate(360deg)}}
.bt-bg .drift{animation:drift 8s linear infinite}
@keyframes drift{to{transform:translate(26px,26px)}}
.bt-bg .pn{animation:pnode 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bt-bg .pn.d1{animation-delay:.6s}.bt-bg .pn.d2{animation-delay:1.2s}.bt-bg .pn.d3{animation-delay:1.8s}
@keyframes pnode{50%{transform:scale(1.7);opacity:.6}}
.bt-bg .ring{transform-box:fill-box;transform-origin:center;animation:ripple 5s ease-out infinite;opacity:0}
.bt-bg .ring.r2{animation-delay:1.6s}.bt-bg .ring.r3{animation-delay:3.2s}
@keyframes ripple{0%{transform:scale(.3);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.bt-bg .ring.big{animation-name:rippleb}
@keyframes rippleb{0%{transform:scale(.3);opacity:.8}100%{transform:scale(5);opacity:0}}
@media (prefers-reduced-motion:reduce){.bt-bg *{animation:none!important}.bt-bg .ring{opacity:.35}}
.bt>svg.li{position:relative}

/* scroll-in transition for the challenge explorer */
.ch.reveal{opacity:1;transform:none;transition:none}
.ch:not(.in) .ch-tab,.ch:not(.in) .ch-ic,.ch:not(.in) .ch-panels{opacity:0}
.ch.in .ch-tab{animation:chL .7s cubic-bezier(.2,.8,.2,1) backwards}
.ch.in .ch-tab:nth-child(1){animation-delay:.05s}.ch.in .ch-tab:nth-child(2){animation-delay:.13s}.ch.in .ch-tab:nth-child(3){animation-delay:.21s}
.ch.in .ch-tab:nth-child(4){animation-delay:.29s}.ch.in .ch-tab:nth-child(5){animation-delay:.37s}.ch.in .ch-tab:nth-child(6){animation-delay:.45s}
.ch.in .ch-ic{animation:chPop .6s cubic-bezier(.2,.9,.3,1.3) backwards}
.ch.in .ch-ic:nth-child(1){animation-delay:.6s}.ch.in .ch-ic:nth-child(2){animation-delay:.68s}.ch.in .ch-ic:nth-child(3){animation-delay:.76s}
.ch.in .ch-ic:nth-child(4){animation-delay:.84s}.ch.in .ch-ic:nth-child(5){animation-delay:.92s}.ch.in .ch-ic:nth-child(6){animation-delay:1s}
.ch.in .ch-panels{animation:chR .9s cubic-bezier(.2,.8,.2,1) .2s backwards}
@keyframes chL{from{opacity:0;transform:translateX(-50px)}}
@keyframes chR{from{opacity:0;transform:translateX(60px) scale(.97)}}
@keyframes chPop{from{opacity:0;transform:scale(.4) translateY(20px)}}

/* section-to-section transition: marquee -> challenges */
#challenges{position:relative;background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 260px)}
#challenges::before{content:"";position:absolute;top:0;left:50%;height:1px;width:70%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent);box-shadow:0 0 30px 2px rgba(34,211,238,.45)}
#challenges::after{content:"";position:absolute;top:0;left:50%;width:520px;height:220px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,rgba(34,211,238,.22),transparent 70%)}
@supports (animation-timeline:view()){
  #challenges::before{animation:lineGrow linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  #challenges::after{animation:glowIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  #challenges>.wrap{animation:secRise linear both;animation-timeline:view();animation-range:entry 5% entry 65%;transform-origin:50% 0}
  #challenges .head h2{animation:titleWipe linear both;animation-timeline:view();animation-range:entry 15% entry 60%}
  #challenges .head .eyebrow,#challenges .head .muted{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 20% entry 60%}
}
@keyframes lineGrow{from{width:0;opacity:0}to{width:70%;opacity:1}}
@keyframes glowIn{from{opacity:0;transform:translateX(-50%) scaleX(.3)}to{opacity:1;transform:translateX(-50%)}}
@keyframes secRise{from{opacity:.0;transform:translateY(90px) scale(.93);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes titleWipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-30px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#challenges::before,#challenges::after,#challenges>.wrap,#challenges .head *{animation:none!important}}

/* same section transition for "Everything in one place" */
#explore{position:relative}
#explore::before{content:"";position:absolute;top:0;left:50%;height:1px;width:70%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--c2),var(--c1),transparent);box-shadow:0 0 30px 2px rgba(139,92,246,.45)}
#explore::after{content:"";position:absolute;top:0;left:50%;width:520px;height:220px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,rgba(139,92,246,.22),transparent 70%)}
@supports (animation-timeline:view()){
  #explore::before{animation:lineGrow linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  #explore::after{animation:glowIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  #explore>.wrap{animation:secRise linear both;animation-timeline:view();animation-range:entry 5% entry 65%;transform-origin:50% 0}
  #explore .head h2{animation:titleWipe linear both;animation-timeline:view();animation-range:entry 15% entry 60%}
  #explore .head .eyebrow{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 20% entry 60%}
}
@media (prefers-reduced-motion:reduce){#explore::before,#explore::after,#explore>.wrap,#explore .head *{animation:none!important}}

/* bento tiles emerge from the centre of the grid */
.bento .bt{translate:var(--dx,0px) var(--dy,0px);scale:.35;opacity:0;
  transition:transform .4s ease,border-color .4s,translate 1.1s cubic-bezier(.2,.85,.25,1),scale 1.1s cubic-bezier(.2,.85,.25,1),opacity .8s ease;
  transition-delay:0s,0s,var(--d,0s),var(--d,0s),var(--d,0s)}
.bento.in .bt{translate:0 0;scale:1;opacity:1}
.bento .bt:nth-child(1){--d:.05s}.bento .bt:nth-child(2){--d:.2s}.bento .bt:nth-child(3){--d:.3s}.bento .bt:nth-child(4){--d:.4s}
@media (prefers-reduced-motion:reduce){.bento .bt{translate:0 0;scale:1;opacity:1;transition:none}}

/* ---- About: premium story section ---- */
#story .two>div:first-child.reveal{opacity:1;transform:none;transition:none}
#story .head.reveal{opacity:1;transform:none;transition:none}

/* text: label tracks in, headline rises word by word, paragraphs de-blur */
#story .eyebrow{opacity:0;letter-spacing:.5em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
#story .head.in .eyebrow{opacity:1;letter-spacing:.16em}
#story .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
#story .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;
  transition:transform 1s cubic-bezier(.2,.85,.25,1),opacity .8s ease;transition-delay:calc(var(--i)*.09s + .15s)}
#story .head.in .w>span{transform:none;opacity:1}
#story .two>div:first-child>p{opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter 1s ease}
#story .two>div.in>p:nth-of-type(1){transition-delay:.55s}
#story .two>div.in>p:nth-of-type(2){transition-delay:.75s}
#story .two>div.in>p{opacity:1;transform:none;filter:none}

/* boxes: swing in on a 3D hinge from the right, then a light sweep passes over */
#story .cards-s{perspective:1200px}
#story .card.reveal{opacity:0;transform:none;translate:90px 0;rotate:0 1 0 -38deg;scale:.9;transform-origin:0 50%;overflow:hidden;
  transition:transform .4s ease,border-color .4s,background .4s,opacity .9s ease,translate 1.1s cubic-bezier(.2,.85,.25,1),rotate 1.1s cubic-bezier(.2,.85,.25,1),scale 1.1s cubic-bezier(.2,.85,.25,1)}
#story .card.reveal.in{opacity:1;translate:0 0;rotate:0 1 0 0deg;scale:1}
#story .card.reveal:nth-child(2){transition-delay:0s,0s,0s,.18s,.18s,.18s,.18s}
#story .card.reveal:nth-child(3){transition-delay:0s,0s,0s,.36s,.36s,.36s,.36s}
#story .card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(34,211,238,.22) 50%,transparent 65%);transform:translateX(-120%)}
#story .card.in::after{animation:sweep 1.4s ease .7s 1 both}
#story .card.in:nth-child(2)::after{animation-delay:.9s}
#story .card.in:nth-child(3)::after{animation-delay:1.1s}
@keyframes sweep{to{transform:translateX(120%)}}
/* icons draw themselves */
#story .card svg.li{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.4s ease .5s,transform .4s ease,stroke .3s}
#story .card.in svg.li{stroke-dashoffset:0}
#story .card h3,#story .card p{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
#story .card.in h3{opacity:1;transform:none;transition-delay:.55s}
#story .card.in p{opacity:1;transform:none;transition-delay:.7s}
@media (prefers-reduced-motion:reduce){
  #story *{transition:none!important;animation:none!important}
  #story .eyebrow,#story .w>span,#story .two>div:first-child>p,#story .card,#story .card h3,#story .card p{opacity:1;transform:none;filter:none;translate:0 0;rotate:0 1 0 0deg;scale:1;letter-spacing:.16em}
  #story .card svg.li{stroke-dashoffset:0}
}

/* ---- About: values section, cascading 3D reveal ---- */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
#values .head.reveal{opacity:1;transform:none;transition:none}
#values .eyebrow{opacity:0;letter-spacing:.5em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
#values .head.in .eyebrow{opacity:1;letter-spacing:.16em}
#values .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
#values .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;filter:blur(8px);
  transition:transform 1s cubic-bezier(.2,.85,.25,1),opacity .8s ease,filter .9s ease;transition-delay:calc(var(--i)*.09s + .15s)}
#values .head.in .w>span{transform:none;opacity:1;filter:none}

#values .grid3{perspective:1400px}
#values .flip.reveal{position:relative;opacity:0;filter:blur(8px);
  transform:translateY(90px) rotateX(38deg) scale(.88);transform-origin:50% 100%;
  transition:opacity .9s ease,filter .9s ease,transform 1.2s cubic-bezier(.2,.85,.25,1);
  transition-delay:var(--w,0s)}
#values .flip.reveal.in{opacity:1;filter:none;transform:none}
#values .flip:nth-child(1){--w:.05s}#values .flip:nth-child(2){--w:.17s}#values .flip:nth-child(3){--w:.29s}
#values .flip:nth-child(4){--w:.17s}#values .flip:nth-child(5){--w:.29s}#values .flip:nth-child(6){--w:.41s}

/* a ring of light traces each card once, right after it lands */
#values .flip::after{content:"";position:absolute;inset:0;border-radius:var(--r);padding:2px;pointer-events:none;z-index:3;opacity:0;
  background:conic-gradient(from var(--a),transparent 0,var(--c1) 10%,var(--c2) 20%,transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#values .flip.in::after{animation:trace 1.8s cubic-bezier(.4,0,.2,1) calc(var(--w,0s) + .9s) 1 both}
@keyframes trace{0%{--a:0deg;opacity:1}85%{opacity:1}100%{--a:360deg;opacity:0}}

/* contents settle in after the card lands */
#values .face.front svg.li{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.3s ease calc(var(--w,0s) + .9s),transform .4s ease}
#values .flip.in .face.front svg.li{stroke-dashoffset:0}
#values .face.front h3,#values .face.front p,#values .face.front .hint{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease}
#values .flip.in .face.front h3{opacity:1;transform:none;transition-delay:calc(var(--w,0s) + .95s)}
#values .flip.in .face.front p{opacity:1;transform:none;transition-delay:calc(var(--w,0s) + 1.08s)}
#values .flip.in .face.front .hint{opacity:1;transform:none;transition-delay:calc(var(--w,0s) + 1.2s)}
@media (max-width:900px){#values .flip.reveal{transform:translateY(50px) scale(.94)}}
@media (prefers-reduced-motion:reduce){
  #values *{transition:none!important;animation:none!important}
  #values .eyebrow,#values .w>span,#values .flip.reveal,#values .face.front h3,#values .face.front p,#values .face.front .hint{opacity:1;transform:none;filter:none;letter-spacing:.16em}
  #values .face.front svg.li{stroke-dashoffset:0}
}

/* ---- About: approach timeline reveal ---- */
#approach .head.reveal{opacity:1;transform:none;transition:none}
#approach .eyebrow{opacity:0;letter-spacing:.5em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
#approach .head.in .eyebrow{opacity:1;letter-spacing:.16em}
#approach .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
#approach .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;filter:blur(8px);
  transition:transform 1s cubic-bezier(.2,.85,.25,1),opacity .8s ease,filter .9s ease;transition-delay:calc(var(--i)*.09s + .15s)}
#approach .head.in .w>span{transform:none;opacity:1;filter:none}

#approach .steps li:nth-child(1){--d:.1s}#approach .steps li:nth-child(2){--d:.35s}#approach .steps li:nth-child(3){--d:.6s}#approach .steps li:nth-child(4){--d:.85s}
#approach .steps li.reveal{opacity:0;transform:translateY(70px);transition:opacity .9s ease var(--d),transform 1.1s cubic-bezier(.2,.85,.25,1) var(--d)}
#approach .steps li.reveal.in{opacity:1;transform:none}

/* a bright line draws across the top of each step, left to right, then settles */
#approach .steps li::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;pointer-events:none;
  background:linear-gradient(90deg,var(--c1),var(--c2) 70%,#fff);box-shadow:0 0 14px 1px rgba(34,211,238,.7);
  transform:scaleX(0);transform-origin:left;opacity:1}
#approach .steps li.in::after{animation:drawTop 1.9s cubic-bezier(.65,0,.25,1) var(--d) 1 both}
@keyframes drawTop{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* number materialises from a blur, connector and icon draw themselves, text fades up */
#approach .num i{display:inline-block;opacity:0;filter:blur(14px);scale:1.7;transition:opacity .9s ease calc(var(--d) + .3s),filter .9s ease calc(var(--d) + .3s),scale 1s cubic-bezier(.2,.85,.25,1) calc(var(--d) + .3s),transform .5s ease}
#approach .steps li.in .num i{opacity:1;filter:none;scale:1}
#approach .num::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.85,.25,1) calc(var(--d) + .7s),opacity .6s ease}
#approach .steps li.in .num::after{transform:scaleX(.25)}
#approach .steps li.in:hover .num::after{transform:scaleX(1)}
#approach .num svg{stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset 1.5s ease calc(var(--d) + .8s),opacity .5s ease .15s,transform .5s ease .15s,stroke .5s}
#approach .steps li.in .num svg{stroke-dashoffset:0}
#approach .steps h3,#approach .steps p{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
#approach .steps li.in h3{opacity:1;transform:none;transition-delay:calc(var(--d) + .7s)}
#approach .steps li.in p{opacity:1;transform:none;transition-delay:calc(var(--d) + .85s)}
@media (max-width:900px){#approach .steps li.reveal{transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){
  #approach *{transition:none!important;animation:none!important}
  #approach .eyebrow,#approach .w>span,#approach .steps li.reveal,#approach .num i,#approach .steps h3,#approach .steps p{opacity:1;transform:none;filter:none;scale:1;letter-spacing:.16em}
  #approach .num svg{stroke-dashoffset:0}#approach .num::after{transform:scaleX(.25)}
}

/* =========== Services page: a different entrance per section =========== */

/* 1 - Capabilities: heading words rise, cards fly up from alternating sides in 3D */
#caps .head.reveal{opacity:1;transform:none;transition:none}
#caps .eyebrow{opacity:0;letter-spacing:.5em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.8,.2,1)}
#caps .head.in .eyebrow{opacity:1;letter-spacing:.16em}
#caps .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
#caps .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;filter:blur(8px);
  transition:transform 1s cubic-bezier(.2,.85,.25,1),opacity .8s ease,filter .9s ease;transition-delay:calc(var(--i)*.09s + .15s)}
#caps .head.in .w>span{transform:none;opacity:1;filter:none}
#caps .head .muted{opacity:0;transform:translateY(14px);transition:opacity .9s ease .5s,transform .9s ease .5s}
#caps .head.in .muted{opacity:1;transform:none}
#caps .grid3{perspective:1400px}
#caps .card.svc.reveal{opacity:0;transform:none;translate:-70px 90px;rotate:1 0 0 32deg;scale:.9;transform-origin:50% 100%;
  transition:transform .4s ease,border-color .4s,background .4s,opacity .9s ease var(--w),translate 1.1s cubic-bezier(.2,.85,.25,1) var(--w),rotate 1.1s cubic-bezier(.2,.85,.25,1) var(--w),scale 1.1s cubic-bezier(.2,.85,.25,1) var(--w)}
#caps .card.svc.reveal:nth-child(even){translate:70px 90px}
#caps .card.svc.reveal.in{opacity:1;translate:0 0;rotate:1 0 0 0deg;scale:1}
#caps .card:nth-child(1){--w:.05s}#caps .card:nth-child(2){--w:.15s}#caps .card:nth-child(3){--w:.25s}
#caps .card:nth-child(4){--w:.35s}#caps .card:nth-child(5){--w:.45s}#caps .card:nth-child(6){--w:.55s}
#caps .card .ic{scale:.3;rotate:-90deg;opacity:0;transition:scale .8s cubic-bezier(.2,.9,.3,1.4) calc(var(--w) + .6s),rotate .8s ease calc(var(--w) + .6s),opacity .5s ease calc(var(--w) + .6s)}
#caps .card.in .ic{scale:1;rotate:0deg;opacity:1}
#caps .card h3,#caps .card p,#caps .card .more{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
#caps .card.in h3{opacity:1;transform:none;transition-delay:calc(var(--w) + .75s)}
#caps .card.in p{opacity:1;transform:none;transition-delay:calc(var(--w) + .88s)}
#caps .card.in .more{opacity:1;transform:none;transition-delay:calc(var(--w) + 1s)}

/* 2 - Industries: heading wipes in; cards are "dealt" from the centre and settle with a tilt */
#industries .head.reveal{opacity:1;transform:none;transition:none}
#industries .head h2{clip-path:inset(0 100% 0 0);transform:translateX(-24px);transition:clip-path 1.2s cubic-bezier(.65,0,.25,1) .1s,transform 1.2s cubic-bezier(.2,.8,.2,1) .1s}
#industries .head.in h2{clip-path:inset(0 -10px 0 0);transform:none}
#industries .head .eyebrow{opacity:0;transform:translateX(-30px);transition:opacity .8s ease,transform .8s ease}
#industries .head.in .eyebrow{opacity:1;transform:none}
#industries .head .muted{opacity:0;transition:opacity 1s ease .7s}
#industries .head.in .muted{opacity:1}
#industries .grid3{perspective:1200px}
#industries .card.reveal{opacity:0;transform:none;scale:.5;translate:0 60px;rotate:0 0 1 -10deg;
  transition:transform .4s ease,border-color .4s,background .4s,opacity .8s ease var(--w),translate 1.2s cubic-bezier(.2,.9,.25,1.1) var(--w),scale 1.2s cubic-bezier(.2,.9,.25,1.1) var(--w),rotate 1.2s cubic-bezier(.2,.9,.25,1.1) var(--w)}
#industries .card.reveal:nth-child(1){translate:220px 40px;rotate:0 0 1 12deg}
#industries .card.reveal:nth-child(3){translate:-220px 40px;rotate:0 0 1 -12deg}
#industries .card.reveal.in{opacity:1;translate:0 0;scale:1;rotate:0 0 1 0deg}
#industries .card:nth-child(1){--w:.3s}#industries .card:nth-child(2){--w:.1s}#industries .card:nth-child(3){--w:.5s}
#industries .card svg.li{stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset 1.5s ease calc(var(--w) + .7s),transform .4s ease,stroke .3s}
#industries .card.in svg.li{stroke-dashoffset:0}
#industries .card h3,#industries .card p{opacity:0;transition:opacity .9s ease}
#industries .card.in h3{opacity:1;transition-delay:calc(var(--w) + .8s)}
#industries .card.in p{opacity:1;transition-delay:calc(var(--w) + .95s)}

/* 3 - Closing call to action: light burst, zoom-in headline, springy button with pulse */
#svc-cta{position:relative;overflow:hidden}
#svc-cta::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.22),rgba(139,92,246,.14) 40%,transparent 68%);transform:scale(.1);opacity:0;
  transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity 1.2s ease}
#svc-cta.in::before{transform:scale(1);opacity:1}
#svc-cta>.wrap{position:relative}
#svc-cta h2{opacity:0;filter:blur(18px);transform:scale(1.35);letter-spacing:.08em;transition:opacity 1s ease .15s,filter 1.1s ease .15s,transform 1.3s cubic-bezier(.2,.85,.25,1) .15s,letter-spacing 1.3s ease .15s}
#svc-cta.in h2{opacity:1;filter:none;transform:none;letter-spacing:-.02em}
#svc-cta .muted{opacity:0;transform:translateY(16px);transition:opacity .9s ease .7s,transform .9s ease .7s}
#svc-cta.in .muted{opacity:1;transform:none}
#svc-cta .btn{position:relative;scale:.4;opacity:0;transition:transform .25s,box-shadow .25s,scale 1s cubic-bezier(.2,1.2,.3,1) 1s,opacity .6s ease 1s}
#svc-cta.in .btn{scale:1;opacity:1}
#svc-cta .btn::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--c1);opacity:0;pointer-events:none}
#svc-cta.in .btn::after{animation:ctaPulse 2.6s ease-out 1.8s infinite}
@keyframes ctaPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7,2.2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  #caps *,#industries *,#svc-cta,#svc-cta *{transition:none!important;animation:none!important}
  #caps .eyebrow,#caps .w>span,#caps .muted,#caps .card,#caps .card .ic,#caps .card h3,#caps .card p,#caps .card .more,
  #industries .eyebrow,#industries .muted,#industries .card,#industries .card h3,#industries .card p,
  #svc-cta h2,#svc-cta .muted,#svc-cta .btn{opacity:1;transform:none;filter:none;translate:0 0;rotate:0deg;scale:1;letter-spacing:.16em}
  #svc-cta h2{letter-spacing:-.02em}
  #industries .head h2{clip-path:none;transform:none}
  #industries .card svg.li{stroke-dashoffset:0}
  #svc-cta::before{transform:scale(1);opacity:1}
}
#svc-cta.reveal{opacity:1;transform:none;transition:none}

/* legal pages */
.legal{display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:start}
.toc{position:sticky;top:96px}
.toc ol{list-style:none;margin-top:12px;display:grid;gap:2px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:block;padding:7px 12px;border-left:2px solid var(--bd);color:var(--mu);font-size:.9rem;transition:.25s}
.toc a::before{content:counter(t,decimal-leading-zero) "  ";color:var(--c2);font-weight:600}
.toc a:hover{color:var(--c2);border-color:var(--c1);padding-left:18px}
.legal-body{max-width:78ch}
.legal-body>.muted{margin-bottom:30px;font-size:.9rem}
.lg{padding:34px 0;border-top:1px solid var(--bd);scroll-margin-top:90px}
.lg h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:14px;display:flex;gap:14px;align-items:baseline}
.lg h2 span{font:700 .85rem Sora;color:var(--c1)}
.lg p{color:var(--mu);margin-bottom:12px}
.lg a{color:var(--c1);border-bottom:1px solid rgba(34,211,238,.4)}
.lg .checks{margin:6px 0 14px}
.lg .checks b{color:var(--tx);font-weight:600}
@media (max-width:900px){.legal{grid-template-columns:1fr;gap:20px}.toc{position:static}.toc ol{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.toc ol{grid-template-columns:1fr}}

/* touch devices: stack front/back faces without fixed height (fixes overlap on mobile) */
@media (hover:none),(max-width:900px){.flip,#values .flip{height:auto!important}.flip-in{height:auto;transform:none!important;display:grid;gap:12px}.face{position:static!important;inset:auto;transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible}.face .hint{display:none}}

/* mobile performance: drop costly blur filters, backdrop blur and endless animations */
@media (max-width:900px),(hover:none){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .flip,.flip.reveal,.card,.tile,.bt,.bt-bg,.glow,.face,.logo-img,section{filter:none!important}   /* heavy blocks: no blur; headings/text keep their blur-in transition */
  .glow{display:none}
  .bt-bg *,.ch-hint span{animation:none!important}
  .nav.solid{background:rgba(255,255,255,.98)}
}
@media (max-width:900px){
  #story .card.reveal{translate:0 24px;rotate:0 1 0 0deg;scale:1}
  #story .card.reveal.in{translate:0 0}
}

/* ===== iOS / Android compatibility ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:80px}
body{overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
img,svg,video,canvas{max-width:100%}
a,button,.burger,.flip,.tile{touch-action:manipulation}
button,.btn,input[type=submit]{-webkit-appearance:none;appearance:none}
input,select,textarea{-webkit-appearance:none;appearance:none;font-size:16px;border-radius:12px}   /* 16px stops iOS zoom-on-focus */
.hero{min-height:100vh;min-height:100svh}                                                         /* iOS/Android URL-bar safe */
.nav{padding-top:env(safe-area-inset-top)}
.wrap{padding-left:max(clamp(20px,5vw,96px),env(safe-area-inset-left));padding-right:max(clamp(20px,5vw,96px),env(safe-area-inset-right))}
.foot{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.modal{padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.m-card{max-height:90vh;max-height:90dvh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:900px){
  #menu{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform .35s,visibility 0s .35s}
  #menu.open{visibility:visible;transition:transform .35s}
  .btn{min-height:44px}
}
/* browsers without individual transform props: just show content */
@supports not (translate:0 0){.reveal,.flip.reveal,.card.reveal{opacity:1!important;transition:none!important}}

/* ===== Light theme (white background, dark text, vibrant accents) ===== */
.card{box-shadow:var(--sh)}
.btn{box-shadow:0 10px 24px -10px rgba(124,58,237,.55)}
.btn:hover{box-shadow:0 16px 32px -10px rgba(124,58,237,.7)}
.glow{opacity:.28}
.hero{background:radial-gradient(ellipse at 15% 0%,rgba(8,145,178,.12),transparent 55%),radial-gradient(ellipse at 90% 20%,rgba(124,58,237,.12),transparent 55%),#fff}
section.alt,.alt{background:var(--bg2)}
.foot{background:var(--bg2)}
::selection{background:rgba(124,58,237,.25)}

/* logo animation: icon pops in + glows, "Infotech" gradient flows */
.logo-img{animation:logoIn .9s cubic-bezier(.2,.85,.25,1) both,logoGlow 3.2s ease-in-out 1s infinite}
.logo:hover svg{transform:rotate(-8deg) scale(1.08);transition:transform .35s}
.logo b{background-image:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:logoFlow 4s linear infinite}
.logo>span{animation:logoText .8s ease .25s both}
@keyframes logoIn{from{opacity:0;transform:rotate(-120deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(124,58,237,0))}50%{filter:drop-shadow(0 4px 10px rgba(124,58,237,.45))}}
@keyframes logoFlow{0%{background-position:0 0}100%{background-position:-200% 0}}
@keyframes logoText{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.logo-img,.logo b,.logo>span{animation:none}}

/* ===== Context-aware hero text transitions (by page scene) ===== */
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
/* network (about, talent): rise + soft focus, staggered */
.page-hero[data-scene=network] .eyebrow{animation:phSlideR .8s .05s}
.page-hero[data-scene=network] h1{animation:phFocus 1s .2s}
.page-hero[data-scene=network] .lead{animation:phSlideR .9s .55s}
/* orbit (services): lines swing up around an axis */
.page-hero[data-scene=orbit] .eyebrow{animation:phSlideR .8s .05s}
.page-hero[data-scene=orbit] h1{animation:phSwing 1.1s .2s;transform-origin:0 100%}
.page-hero[data-scene=orbit] .lead{animation:phSlideR .9s .6s}
/* code (technologies): typed reveal with caret */
.page-hero[data-scene=code] .eyebrow{animation:phSlideR .6s .05s}
.page-hero[data-scene=code] h1{animation:phType 1.4s steps(24,end) .2s;overflow:hidden;white-space:nowrap;max-width:100%;display:inline-block;border-right:3px solid var(--c2);padding-right:6px;animation-name:phType,phCaret;animation-duration:1.4s,.8s;animation-delay:.2s,1.6s;animation-iteration-count:1,4;animation-timing-function:steps(24,end),step-end}
.page-hero[data-scene=code] .lead{animation:phSlideR .9s 1.5s}
@media (max-width:700px){.page-hero[data-scene=code] h1{white-space:normal;border-right:0;animation:phFocus 1s .2s}}
/* pulse (contact): message "arrives" — ripple pop, then lead types out */
.page-hero[data-scene=pulse] .eyebrow{animation:phSlideR .7s .05s}
.page-hero[data-scene=pulse] h1{animation:phPop .9s .2s}
.page-hero[data-scene=pulse] .lead{display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;vertical-align:bottom;animation:phLead 1.6s steps(46,end) .8s both}
@media (max-width:700px){.page-hero[data-scene=pulse] .lead{white-space:normal;animation:phSlideR .9s .6s}}
@keyframes phSlideR{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes phFocus{from{opacity:0;transform:translateY(34px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes phSwing{from{opacity:0;transform:translateY(60px) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes phType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes phCaret{50%{border-color:transparent}}
@keyframes phPop{0%{opacity:0;transform:scale(.88);filter:blur(12px);letter-spacing:.06em}60%{transform:scale(1.03)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes phLead{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* contact: floating message bubble + paper plane */
.ph-msg{position:absolute;right:max(6vw,24px);top:50%;width:min(260px,40vw);transform:translateY(-50%);pointer-events:none;z-index:1}
.ph-msg .b{background:#fff;border:1px solid var(--bd);border-radius:18px 18px 18px 4px;padding:14px 18px;box-shadow:var(--sh);display:flex;gap:6px;width:max-content;margin-bottom:12px;animation:bubble .7s cubic-bezier(.2,.85,.25,1) 1s both}
.ph-msg .b.r{margin-left:auto;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,var(--c1),var(--c2));border:0;animation-delay:1.7s}
.ph-msg i{width:8px;height:8px;border-radius:50%;background:var(--c2);animation:typing 1.2s ease-in-out infinite}
.ph-msg .r i{background:#fff}
.ph-msg i:nth-child(2){animation-delay:.15s}.ph-msg i:nth-child(3){animation-delay:.3s}
.ph-msg svg{position:absolute;right:-10px;top:-46px;width:44px;height:44px;fill:none;stroke:var(--c2);stroke-width:1.6;stroke-linejoin:round;animation:plane 5s ease-in-out 2.4s infinite}
@keyframes bubble{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
@keyframes plane{0%{transform:translate(-40px,30px) rotate(-12deg);opacity:0}15%{opacity:1}60%{transform:translate(30px,-20px) rotate(8deg);opacity:1}80%,100%{transform:translate(70px,-50px) rotate(14deg);opacity:0}}
@media (max-width:700px){.ph-msg{display:none}}
@media (prefers-reduced-motion:reduce){.page-hero .eyebrow,.page-hero h1,.page-hero .lead,.ph-msg *{animation:none!important;clip-path:none!important;border-right:0!important}}
/* service pages: scene-specific text intros */
.page-hero[data-scene=cloud] h1{animation:phFloat 1.3s .2s}
.page-hero[data-scene=bars] h1{animation:phGrow 1s .2s}
.page-hero[data-scene=flow] h1{animation:phFlow 1s .2s}
.page-hero[data-scene=loop] h1{animation:phLoop 1.1s .2s;transform-origin:0 50%}
.page-hero[data-scene=radar] h1{animation:phSweep 1.3s .2s}
.page-hero[data-scene=cloud] .eyebrow,.page-hero[data-scene=bars] .eyebrow,.page-hero[data-scene=flow] .eyebrow,.page-hero[data-scene=loop] .eyebrow,.page-hero[data-scene=radar] .eyebrow{animation:phSlideR .7s .05s}
.page-hero[data-scene=cloud] .lead,.page-hero[data-scene=bars] .lead,.page-hero[data-scene=flow] .lead,.page-hero[data-scene=loop] .lead,.page-hero[data-scene=radar] .lead{animation:phSlideR .9s .6s}
@keyframes phFloat{from{opacity:0;transform:translateY(-40px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes phGrow{from{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(30px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes phFlow{from{opacity:0;transform:translateX(-80px) skewX(-8deg)}to{opacity:1;transform:none}}
@keyframes phLoop{from{opacity:0;transform:rotate(-8deg) translateY(30px)}to{opacity:1;transform:none}}
@keyframes phSweep{from{opacity:0;clip-path:circle(0% at 0 50%)}to{opacity:1;clip-path:circle(150% at 0 50%)}}

/* wealth page */
.wsteps{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.wsteps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.wsteps{grid-template-columns:1fr}}
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:16px 20px;box-shadow:var(--sh);transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--c2)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--c2);font-size:1.4rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mu);margin-top:10px;animation:phSlideR .4s both}

/* ===== Compact "terminal" call-to-action band (all pages) ===== */
.cta-band.sec{padding:44px 0;text-align:left}
.cta-band::before,.cta-band::after{display:none!important}
.cta-band .wrap{position:relative;width:min(1100px,calc(100% - 40px));max-width:none;margin:0 auto;padding:26px 36px 28px 40px;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"p b" "h b" "m b";column-gap:32px;row-gap:4px;align-items:center;
  background:#fff;border:1px solid var(--bd);border-radius:20px;box-shadow:var(--sh);overflow:hidden;
  background-image:radial-gradient(circle,rgba(8,145,178,.20) 1px,transparent 1.5px),linear-gradient(#fff,#fff);background-size:18px 18px,auto;background-position:right top,0 0;
  -webkit-mask:none;mask:none}
.cta-band .wrap::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--c1),var(--c2))}
.cta-band .wrap::before{content:"$ ndr --start-project";grid-area:p;justify-self:start;display:inline-block;font:600 .78rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--c1);border-right:2px solid var(--c2);padding-right:6px;animation:ctaCaret 1s step-end infinite}
.cta-band h2{grid-area:h;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.cta-band .muted{grid-area:m;margin:0;font-size:.95rem}
.cta-band .btn{grid-area:b;justify-self:end;white-space:nowrap}
.cta-band .wrap>*{position:relative;z-index:1}
@keyframes ctaCaret{50%{border-color:transparent}}
@media (max-width:700px){
  .cta-band .wrap{grid-template-columns:1fr;grid-template-areas:"p" "h" "m" "b";padding:24px 22px 24px 26px;row-gap:6px}
  .cta-band .btn{justify-self:start;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.cta-band .wrap::before{animation:none}}

/* brand logo image */
.logo-img{height:54px;width:auto;display:block;object-fit:contain}
.logo{gap:12px}

@media (max-width:700px){.logo-img{height:46px}}

/* rounded logo badge (contact) */
.c-logo{position:relative;width:128px;height:128px;border-radius:50%;background:#fff;border:1px solid var(--bd);box-shadow:var(--sh),0 0 0 6px rgba(8,145,178,.06);display:grid;place-items:center;margin-bottom:26px;animation:cLogoIn .9s cubic-bezier(.2,.85,.25,1) both}
.c-logo img{width:auto;height:92px;display:block}
.c-logo::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed rgba(124,58,237,.45);animation:cLogoSpin 18s linear infinite}
.c-logo::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;border-top-color:var(--c1);animation:cLogoSpin 4s linear infinite}
@keyframes cLogoIn{from{opacity:0;transform:scale(.6) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes cLogoSpin{to{transform:rotate(360deg)}}
.btn.ghost{margin-top:18px}
@media (prefers-reduced-motion:reduce){.c-logo,.c-logo::before,.c-logo::after{animation:none}}

/* techie orbit around the contact logo */
.c-tech{position:relative;width:212px;height:212px;margin:-8px 0 14px -14px}
.c-tech .c-logo{position:absolute;left:50%;top:50%;margin:0;translate:-50% -50%}
.c-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.c-orbit *{transform-box:view-box;transform-origin:0 0;fill:none}
.c-orbit .tk{stroke:var(--c2);stroke-width:3;stroke-dasharray:1.2 6.1;opacity:.55;animation:cSpin 40s linear infinite}
.c-orbit .dd{stroke:var(--c1);stroke-width:1;stroke-dasharray:14 9;opacity:.5;animation:cSpin 26s linear infinite reverse}
.c-orbit .tr{stroke:var(--c1);stroke-width:1.1;opacity:.35;stroke-linejoin:round}
.c-orbit .pk{stroke:var(--c2);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 60;stroke-dashoffset:65;animation:cPacket 3.2s ease-in-out infinite}
.c-orbit .nd{stroke:var(--c1);stroke-width:1.2;fill:#fff;animation:cNode 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.c-orbit .orb circle{fill:var(--c1)}
.c-orbit .o1{animation:cSpin 9s linear infinite}
.c-orbit .o2{animation:cSpin 14s linear infinite reverse}.c-orbit .o2 circle{fill:var(--c2)}
.c-orbit .o3{animation:cSpin 6s linear infinite}.c-orbit .o3 circle{fill:var(--c2);opacity:.8}
.c-orbit .rip{stroke:var(--c1);stroke-width:1.2;opacity:0;animation:cRipple 4.5s ease-out infinite}
.c-orbit .r2{animation-delay:1.5s}.c-orbit .r3{animation-delay:3s}
@keyframes cSpin{to{transform:rotate(360deg)}}
@keyframes cPacket{0%{stroke-dashoffset:65;opacity:0}15%{opacity:1}70%{stroke-dashoffset:-12;opacity:1}100%{stroke-dashoffset:-12;opacity:0}}
@keyframes cNode{0%,100%{transform:scale(1);stroke:var(--c1)}50%{transform:scale(1.6);stroke:var(--c2)}}
@keyframes cRipple{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.c-tech .c-logo{animation:cLogoIn .9s cubic-bezier(.2,.85,.25,1) both}
@media (max-width:560px){.c-tech{transform:scale(.86);transform-origin:0 0;margin-bottom:-14px}}
@media (prefers-reduced-motion:reduce){.c-orbit *{animation:none!important}.c-orbit .rip{opacity:0}.c-orbit .pk{opacity:0}}

/* ===== Date & time widget (fixed, bottom-right) ===== */
.dt-widget{position:fixed;right:0;top:50%;translate:0 -50%;z-index:45;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;
  background:rgba(255,255,255,.92);border:1px solid var(--bd);border-radius:16px 0 0 16px;border-right:0;box-shadow:0 10px 30px -12px rgba(76,29,149,.3);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.25;pointer-events:none;user-select:none;
  animation:dtIn .8s cubic-bezier(.2,.85,.25,1) .6s both}
.dt-widget::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:linear-gradient(var(--c1),var(--c2))}
.dt-ic{width:30px;height:30px;fill:none;stroke:var(--c1);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-left:6px}
.dt-dot{fill:var(--c2);stroke:none;animation:dtPulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dt-txt{display:flex;flex-direction:column}
.dt-date{font-size:.72rem;letter-spacing:.04em;color:var(--mu);text-transform:uppercase}
.dt-time{font-size:1.05rem;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:.02em}
@keyframes dtIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dtPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
@media (max-width:900px){.dt-widget{display:none}}
@media (prefers-reduced-motion:reduce){.dt-widget,.dt-dot{animation:none}}