/* SMI TechSolutions — shared styles for inner pages */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root{
  color-scheme: light;
  --bg:#F5F7FC; --surface:#FFFFFF; --tint:#EEF3FF;
  --ink:#0B1226; --ink-2:#26304F; --muted:#59627F; --dim:#8E96AF;
  --line:rgba(11,18,38,.08); --line-2:rgba(11,18,38,.14);
  /* SMI palette */
  --sky-aqua:#4CC9F0; --cloudy-sky:#4895EF; --electric-sapphire:#4361EE; --persian-blue:#3F37C9; --vivid-royal:#3A0CA3;
  --true-azure:#480CA8; --ultrasonic-blue:#560BAD; --indigo-bloom:#7209B7; --raspberry-plum:#B5179E; --neon-pink:#F72585;
  --cyan:var(--sky-aqua); --blue:var(--electric-sapphire); --violet:var(--indigo-bloom); --violet-l:#B07FDC; --pink:var(--neon-pink);
  --grad:linear-gradient(100deg,#4895EF 0%,#4361EE 38%,#7209B7 78%,#B5179E 100%);
  --grad-accent:linear-gradient(100deg,#7209B7,#B5179E 55%,#F72585);
  --navy:#0A1024; --on-navy:#E9EDF8; --on-navy-muted:#9AA3C0; --navy-line:rgba(160,175,225,.16);
  --ok:#10B981; --warm:#EA7A3C;
  --shadow:0 1px 2px rgba(11,18,38,.04),0 12px 32px rgba(23,40,94,.08);
  --shadow-lg:0 2px 4px rgba(11,18,38,.04),0 30px 70px rgba(23,40,94,.14);
  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --sec-y:clamp(48px,5vw,80px); --gap-head:clamp(12px,1.4vw,18px); --header-h:calc(max(72px,calc(var(--logo-h,64px) + 12px)) + 20px);
  --gl:max(16px, env(safe-area-inset-left,0px)); --gr:max(16px, env(safe-area-inset-right,0px));
}
*,*::before,*::after{box-sizing:border-box;background-origin:border-box!important}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1304px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
@media (min-width:760px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
section{position:relative}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(34px,5.2vw,68px);font-weight:700}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:clamp(17px,1.45vw,20px);max-width:58ch}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span.grad{padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:inline-block}
.motion [data-reveal] .ln>span{transform:translateY(110%)}
[data-reveal] .ln>span{transition:transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0) * 70ms)}
.motion [data-reveal].in .ln>span{transform:none}
.motion [data-rise]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0) * 70ms)}
.motion [data-rise].in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,border-color .3s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(11,18,38,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(67,97,238,.28)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--blue)}
.arr{display:inline-block;transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}

/* Header: logo · glass link pill · glossy CTA (light theme) */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + clamp(10px,1.8vw,20px));left:0;right:0;z-index:50;pointer-events:none}
.nav-bar{pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:max(72px,calc(var(--logo-h,64px) + 12px));width:min(1280px,calc(100% - 2 * max(16px,env(safe-area-inset-left,0px))));margin-inline:auto;padding:0 12px 0 20px;border-radius:22px;border:1px solid transparent;
  transition:background .4s,border-color .4s,box-shadow .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s}
.nav.scrolled .nav-bar{background:rgba(247,249,255,.72);border-color:rgba(67,97,238,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -16px rgba(23,40,94,.28);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.brand{display:flex;align-items:center;justify-self:start;text-decoration:none}
.brand .logo{height:var(--logo-h,64px);width:auto;display:block}
.nav-bar>nav{position:relative}
.nav-bar>nav::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:260%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(114,9,183,.16),rgba(67,97,238,.07) 55%,transparent);pointer-events:none;z-index:-1}
.nav-links{position:relative;display:flex;gap:4px;list-style:none;margin:0;padding:6px;border-radius:18px;background:rgba(255,255,255,.58);border:1px solid rgba(67,97,238,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 28px -14px rgba(23,40,94,.25);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.nav-links::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(76,201,240,.6),rgba(114,9,183,.6),transparent);pointer-events:none}
.nav-item{position:relative}
.nav-tr{display:flex;align-items:center;gap:7px;appearance:none;border:0;background:transparent;font:inherit;padding:9px 16px 9px 20px;border-radius:12px;font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.nav-chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .3s}
.nav-item:hover .nav-tr,.nav-item.open .nav-tr,.nav-tr:focus-visible{background:rgba(67,97,238,.07);color:var(--ink)}
.nav-tr:focus-visible{outline:2px solid rgba(67,97,238,.45);outline-offset:1px}
.nav-item:hover .nav-chev,.nav-item.open .nav-chev{transform:rotate(180deg)}
.nav-dd{position:absolute;left:50%;top:calc(100% + 14px);min-width:240px;transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;
  padding:8px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid rgba(67,97,238,.12);box-shadow:inset 0 1px 0 #fff,0 22px 48px -18px rgba(23,40,94,.32),0 4px 12px -6px rgba(23,40,94,.12)}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd::after{content:"";position:absolute;left:24%;right:24%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(76,201,240,.6),rgba(114,9,183,.6),transparent)}
.nav-item:hover .nav-dd,.nav-item.open .nav-dd,.nav-item:has(:focus-visible) .nav-dd{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
.nav-dd ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nav-cta{text-decoration:none}
a.nav-tr{text-decoration:none}
.nav-dd.mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(860px,calc(100vw - 48px));padding:14px}
.mm-col{padding:6px;border-radius:12px}
.nav-dd .mm-h{font-weight:650;color:var(--ink);font-size:15px;white-space:normal}
.nav-dd .mm-h{justify-content:flex-start;gap:10px}
.nav-dd .mm-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.nav-dd .mm-h::after{margin-left:auto}
.mm-col ul{margin-top:2px!important}
.mm-col ul a{font-size:14px;color:var(--muted);padding:8px 14px 8px 26px;white-space:normal}
.nav-dd .dd-all{font-weight:650;color:var(--ink)}
.nav-item:has(#dd-svc){position:static}
#dd-svc{left:50%}
.nav-dd a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nav-dd a::after{content:"→";font-size:13px;color:var(--violet);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.nav-dd a:hover,.nav-dd a:focus-visible{background:linear-gradient(100deg,rgba(76,201,240,.08),rgba(114,9,183,.08));color:var(--ink);outline:none}
.nav-dd a:hover::after,.nav-dd a:focus-visible::after{opacity:1;transform:none}
.nav-cta{position:relative;justify-self:end;appearance:none;border:0;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:#fff;padding:12px 24px;border-radius:14px;cursor:default;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),linear-gradient(100deg,#4895EF 0%,#4361EE 45%,#7209B7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -10px rgba(67,97,238,.6);transition:box-shadow .3s,filter .3s}

.nav-cta:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 28px -10px rgba(114,9,183,.6)}
@media (max-width:860px){ .nav-bar{gap:8px;padding:0 8px 0 14px;height:max(64px,calc(var(--logo-h-m,48px) + 12px));border-radius:18px} .nav-tr{padding:8px 10px 8px 12px;font-size:14px} .brand .logo{height:var(--logo-h-m,48px)} .nav-cta{padding:10px 16px;font-size:14px} }
.nav-burger{display:none}
@media (max-width:620px){
  .nav-bar{grid-template-columns:1fr auto auto;gap:8px;height:max(60px,calc(var(--logo-h-m,48px) + 10px));border-radius:16px;background:rgba(247,249,255,.82);border-color:rgba(67,97,238,.10);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .brand .logo{height:var(--logo-h-m,48px)}
  .nav-cta{padding:10px 14px;font-size:13.5px}
  .nav-burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(67,97,238,.16);border-radius:12px;background:rgba(255,255,255,.8);cursor:pointer;padding:0}
  .nav-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s;position:relative}
  .nav-burger i::before,.nav-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s}
  .nav-burger i::before{top:-6px}.nav-burger i::after{top:6px}
  .nav.menu-open .nav-burger i{background:transparent}
  .nav.menu-open .nav-burger i::before{transform:translateY(6px) rotate(45deg)}
  .nav.menu-open .nav-burger i::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .nav-bar>nav{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:calc(100vh - 110px);max-height:calc(100svh - 110px);overflow:auto;padding:8px;border-radius:18px;background:rgba(255,255,255,.98);border:1px solid rgba(67,97,238,.12);box-shadow:0 24px 48px -18px rgba(23,40,94,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s,visibility 0s .3s}
  .nav-bar>nav::before{display:none}
  .nav.menu-open .nav-bar>nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s,visibility 0s}
  .nav-links{flex-direction:column;gap:2px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links::after{display:none}
  .nav-tr{width:100%;box-sizing:border-box;justify-content:space-between;padding:14px 12px;font-size:16px}
  .nav-dd,.nav-dd.mega{position:static;display:none;width:auto;min-width:0;transform:none;opacity:1;visibility:visible;padding:0 0 8px 10px;border:0;background:transparent;box-shadow:none;grid-template-columns:1fr;transition:none}
  .nav-dd::before,.nav-dd::after{display:none}
  .nav-item.open .nav-dd,.nav-item:hover .nav-dd,.nav-item:has(:focus-visible) .nav-dd{transform:none}
  .nav-item:not(.open):hover .nav-dd{display:none}
  .nav-item.open .nav-dd{display:block}
  .nav-item.open .nav-dd.mega{display:grid}
  .nav-dd a{padding:10px 12px;white-space:normal}
}

/* world pieces */
.world .sat,.world .hub{transform-box:fill-box;transform-origin:50% 60%;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s;transition-delay:calc(var(--i,0) * 110ms)}
.world .sat{cursor:pointer;transform:translate(0,0) scale(var(--sc,1))}
.world:not(.built) .hub{transform:scale(.55);opacity:0}
.world:not(.built) .sat{transform:translate(var(--fx),var(--fy)) scale(.75);opacity:0}
.world .sat.dim{opacity:.42}
.world .sat.hov{--sc:1.07}
.world .route{fill:none;stroke-linecap:round;stroke-linejoin:round}
.world .r-base{stroke:#E1E7F5;stroke-width:13}
.world .r-glow{stroke:#4CC9F0;stroke-width:2;opacity:.35;transition:opacity .5s,stroke-width .5s;stroke-dasharray:1;stroke-dashoffset:1}
.world.built .r-glow{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease .9s,opacity .5s,stroke-width .5s}
.world .r-flow{stroke:#4361EE;stroke-width:2.5;stroke-dasharray:4 46;opacity:0;animation:rflow 2.2s linear infinite;transition:opacity .5s}
.world .lit .r-glow{opacity:1;stroke-width:3;filter:drop-shadow(0 0 3px rgba(76,201,240,.6))}
.world .lit .r-flow{opacity:1}
@keyframes rflow{to{stroke-dashoffset:-50}}
.world .fl{animation:flt 5s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes flt{to{transform:translateY(-7px)}}
.world .bar{transform-box:fill-box;transform-origin:50% 100%;animation:barg 2.6s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes barg{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.world .conv{animation:conv 3.6s linear infinite;animation-delay:var(--dl,0s)}
@keyframes conv{0%{transform:translate(0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(var(--tx),var(--ty));opacity:0}}
.world .arm{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:arm 3.4s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes arm{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.world .rise{animation:rise 2.8s ease-in infinite;animation-delay:var(--dl,0s)}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-46px);opacity:0}}
.world .ecg{stroke-dasharray:160;animation:ecg 2.4s linear infinite}
@keyframes ecg{from{stroke-dashoffset:160}to{stroke-dashoffset:-160}}
.world .pulse{transform-box:fill-box;transform-origin:center;animation:pls 1.8s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes pls{50%{transform:scale(1.5);opacity:.5}}
.world .spin{transform-box:fill-box;transform-origin:center;animation:spn 12s linear infinite}
@keyframes spn{to{transform:rotate(360deg)}}
.world .hubglow{animation:pls 3.6s ease-in-out infinite}
/* ===== FAQ ===== */
.faq{padding-block:110px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.faq h2{font-size:clamp(32px,3.6vw,48px)}
details{border-bottom:1px solid var(--line-2)}
summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:19px;font-weight:600;position:relative;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{margin:0 0 24px;color:var(--muted);max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:30px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* pause CSS animations in sections that are off screen */
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}
/* ===== Footer ===== */
.site-foot{position:relative;background:transparent;color:var(--muted);font-size:14.5px;padding-block:clamp(32px,4vw,56px) 28px}
.site-foot{isolation:isolate;overflow:hidden}
.foot-waves{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 80%,transparent)}
.foot-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;overflow:visible}
.foot-waves path{transform-box:view-box;will-change:transform}
.motion .foot-waves .w1{animation:fwave 26s linear infinite}
.motion .foot-waves .w2{animation:fwave 19s linear infinite reverse}
.motion .foot-waves .w3{animation:fwave 34s linear infinite}
.motion .foot-waves .w4{animation:fwave 15s linear infinite reverse}
.motion .foot-waves .w5{animation:fwave 30s linear infinite reverse}
@keyframes fwave{to{transform:translateX(-50%)}}
.motion .foot-waves svg{animation:fbreathe 9s ease-in-out infinite alternate}
@keyframes fbreathe{from{transform:scaleY(.85)}to{transform:scaleY(1.1)}}
.foot-waves svg{transform-origin:50% 100%}
.foot{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,48px)}
.foot-brand{grid-template-columns:minmax(0,1.3fr) auto auto auto;align-items:center;column-gap:clamp(24px,4vw,56px);max-width:none!important}
.foot-brand .brand{grid-column:1}.foot-brand p{grid-column:1;max-width:44ch}
.foot-brand .foot-cta{grid-column:2;grid-row:1 / span 2}
.foot-brand .foot-contact{grid-column:3;grid-row:1 / span 2}
.foot-brand .foot-social{grid-column:4;grid-row:1 / span 2}
.foot-cols{padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
@media (max-width:900px){ .foot-brand{grid-template-columns:1fr} .foot-brand>*{grid-column:1!important;grid-row:auto!important} }
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px clamp(18px,2.2vw,32px)}
.foot h4 a{color:inherit}
.foot-cols h4{white-space:nowrap;line-height:1.45;display:block}
.foot-cols h4 a{display:inline}
.foot-cols ul{gap:9px}
.foot-cols li a{font-size:14px;line-height:1.4}
.foot-brand{display:grid;gap:18px;align-content:start;max-width:36ch}
.foot-brand .brand{justify-self:start}
.foot-brand .brand img{height:var(--logo-h,64px);width:auto;display:block}
@media (max-width:860px){ .foot-brand .brand img{height:var(--logo-h-m,48px)} }
.foot-brand p{margin:0;line-height:1.6;color:var(--muted)}
.foot-cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-weight:600;font-size:14.5px;color:#fff!important;text-decoration:none;background:linear-gradient(100deg,#4895EF,#4361EE 45%,#7209B7);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px -8px rgba(67,97,238,.6);transition:filter .25s,box-shadow .25s}
.foot-cta:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px -8px rgba(114,9,183,.65)}
.foot-contact{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:14px}
.site-foot .foot-contact a{color:var(--ink-2)}
.foot h4,.foot-trust h4{margin:0 0 16px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-foot a{color:var(--muted);text-decoration:none;border-radius:4px;transition:color .2s}
.site-foot a:hover{color:var(--ink)}
.site-foot a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;color:var(--ink)}
.foot-col a{position:relative;display:inline-block;padding-block:2px}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#4CC9F0,#7209B7);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.foot-col a:hover::after{transform:scaleX(1)}
.foot .foot-social{display:flex;gap:10px;list-style:none;margin:2px 0 0;padding:0}
.foot-social a{display:block;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(67,97,238,.14),0 6px 16px -8px rgba(23,40,94,.35);transition:transform .25s,box-shadow .25s}
.foot-social a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(114,9,183,.35),0 10px 20px -8px rgba(114,9,183,.4)}
.foot-social img{width:100%;height:100%;display:block;border-radius:50%}
.foot-trust{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px clamp(40px,6vw,96px);margin-top:clamp(28px,3vw,36px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.foot-trust h4{margin:0 0 14px}
.ft-reviews,.ft-badges{display:flex;align-items:center;min-height:56px}
.ft-reviews{gap:clamp(24px,3vw,40px)}
.ft-reviews img{height:64px;width:auto;display:block}
/* Compliance badges: hi-res artwork cropped to its edges; sized per logo (matched on alt text) so wide and round marks read evenly. */
.ft-badges{list-style:none;margin:0;padding:0;gap:16px clamp(20px,2.4vw,34px)}
.ft-badges img{height:64px;width:auto;display:block}
.ft-badges img[alt^="Microsoft"]{height:48px}
.legal{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-top:clamp(24px,3vw,32px);padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.legal nav{display:flex;flex-wrap:wrap;gap:6px 22px}
@media (max-width:760px){ .ft-reviews,.ft-badges{flex-wrap:wrap} .legal{flex-direction:column;align-items:flex-start} }
@media (max-width:560px){ .ft-reviews img{height:54px} .ft-badges{gap:14px 20px} .ft-badges img{height:54px} .ft-badges img[alt^="Microsoft"]{height:40px} }
@media (max-width:1100px){ .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-cols h4{white-space:normal} }
@media (max-width:560px){ .foot-cols{grid-template-columns:1fr 1fr;gap:28px 18px} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .mq-track{animation:none!important;flex-wrap:wrap;width:auto;row-gap:16px}
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq-track [aria-hidden]{display:none}
}
/* ================= Inner pages: shared components ================= */
body{--a1:var(--electric-sapphire);--a2:var(--sky-aqua);--a3:var(--indigo-bloom)}
.acc{background:linear-gradient(100deg,var(--a2),var(--a1) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec{padding-block:var(--sec-y)}
.sec-head{display:grid;gap:var(--gap-head);max-width:820px;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head h2{font-size:clamp(30px,4.2vw,54px)}
.sec-head p{margin:0;color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);max-width:62ch}
.eyebrow{color:var(--a1)}
.tick{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tick li{position:relative;padding-left:30px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.tick li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--a2),var(--a1));opacity:.14}
.tick li::after{content:"";position:absolute;left:5px;top:7px;width:8px;height:4px;border-left:2px solid var(--a1);border-bottom:2px solid var(--a1);transform:rotate(-45deg)}
.frame{position:relative;border-radius:24px;overflow:hidden;background:var(--navy);box-shadow:var(--shadow-lg);isolation:isolate}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.glass{background:rgba(255,255,255,.78);border:1px solid rgba(67,97,238,.12);box-shadow:inset 0 1px 0 #fff,0 22px 48px -24px rgba(23,40,94,.32);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.hl{position:relative}
.hl::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:linear-gradient(var(--a2),var(--a3))}

/* ---------- Page hero ---------- */
.ph{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--header-h) + clamp(28px,5vw,72px)) 0 clamp(40px,5vw,80px)}
.ph::before{content:"";position:absolute;inset:-10% -10% 0;z-index:-2;background:
  radial-gradient(ellipse 42% 50% at 78% 38%,color-mix(in srgb,var(--a3) 18%,transparent),transparent 70%),
  radial-gradient(ellipse 36% 44% at 62% 70%,color-mix(in srgb,var(--a2) 20%,transparent),transparent 70%),
  radial-gradient(ellipse 30% 40% at 8% 10%,color-mix(in srgb,var(--a1) 10%,transparent),transparent 70%)}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(67,97,238,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(67,97,238,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 40%,#000,transparent 75%)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.ph-copy{display:grid;gap:clamp(16px,1.8vw,24px);justify-items:start}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.ph h1{font-size:clamp(38px,5.4vw,76px);font-weight:750;letter-spacing:-.045em;line-height:1.02}
.ph h1 .w{display:inline-block;padding-bottom:.08em}
.motion .ph h1 .w{opacity:0;transform:translateY(.45em);filter:blur(6px);animation:wIn .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--k) * 45ms + 80ms)}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.ph .sub{margin:0}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ph-vis{position:relative;min-height:clamp(320px,38vw,520px);display:grid;place-items:center}
.motion .ph-copy>*{opacity:0;transform:translateY(14px);animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
.motion .ph-copy>:nth-child(1){animation-delay:.02s}.motion .ph-copy>:nth-child(2){animation-delay:.08s}.motion .ph-copy>:nth-child(3){animation:none;opacity:1;transform:none}
.motion .ph-copy>:nth-child(4){animation-delay:.45s}.motion .ph-copy>:nth-child(5){animation-delay:.6s}
/* Sub-tier heroes have no eyebrow (the breadcrumb already names the page), so entrance timing follows the h1 instead of child positions */
.motion [data-tier="sub"] .ph-copy>h1{animation:none;opacity:1;transform:none}
.motion [data-tier="sub"] .ph-copy>h1~*{opacity:0;transform:translateY(14px);animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
.motion [data-tier="sub"] .ph-copy>h1+*{animation-delay:.45s}.motion [data-tier="sub"] .ph-copy>h1+*+*{animation-delay:.6s}
.motion .ph-vis{animation:fadeIn 1.2s ease .2s both}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){ .ph-grid{grid-template-columns:1fr} .ph-vis{min-height:300px;order:2} }
.float-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.float-chip b{font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.motion .float-chip{animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-10px)}}

/* ---------- Problem (split) ---------- */
.prob-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.prob-copy{display:grid;gap:20px}
.prob-copy h2{font-size:clamp(28px,3.6vw,46px)}
.prob-lead{margin:0;font-size:clamp(20px,1.9vw,26px);line-height:1.42;letter-spacing:-.015em;color:var(--ink);font-weight:500}
.prob-copy p.hl{margin:0;padding-left:22px;color:var(--muted);font-size:17px}
.prob-copy p.plain{margin:0;color:var(--muted);font-size:17.5px;line-height:1.65}
.prob-img{aspect-ratio:1.05;transform:rotate(1.2deg)}
.prob-img.wide{aspect-ratio:1.6}
.prob-media{position:relative}
.prob-media::before{content:"";position:absolute;inset:-14px -14px 14px 14px;border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 30%,transparent),color-mix(in srgb,var(--a3) 26%,transparent));z-index:-1;transform:rotate(-2deg)}
@media (max-width:900px){ .prob-grid{grid-template-columns:1fr} .prob-img{transform:none} }

/* ---------- Practices A: stacking cards (AI Driven Digitalisation) ---------- */
.stackc{display:grid;gap:22px}
.sc{position:sticky;top:calc(var(--header-h) + 14px + var(--i) * 18px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);padding:clamp(18px,2.2vw,28px);border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:0 -10px 40px -20px rgba(23,40,94,.18),var(--shadow);min-height:min(560px,calc(100vh - var(--header-h) - 60px))}
.sc .frame{aspect-ratio:auto;min-height:280px}
.sc-body{display:grid;align-content:center;gap:16px;padding-block:8px}
.sc-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--a1)}
.sc h3{font-size:clamp(26px,2.6vw,38px)}
.sc p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.62}
@media (max-width:860px){ .sc{position:relative;top:auto;grid-template-columns:1fr;min-height:0} .sc .frame{aspect-ratio:1.4;min-height:0} }

/* ---------- Practices B: sticky image swap (Data) ---------- */
.swap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
.swap-media{position:sticky;top:calc(var(--header-h) + 24px);height:min(560px,calc(100vh - var(--header-h) - 60px));align-self:start}
.swap-media .frame{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.swap-media .frame.on{opacity:1;transform:none}
.swap-media .sm-idx{position:absolute;left:18px;bottom:18px;z-index:2;padding:8px 14px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink)}
.swap-steps{display:grid}
.ss{min-height:min(78vh,640px);display:grid;align-content:center;gap:16px;padding-block:24px;opacity:.32;transition:opacity .5s}
.ss.on{opacity:1}
.ss h3{font-size:clamp(26px,2.6vw,38px)}
.ss p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.62}
.ss .ss-img{display:none}
@media (max-width:860px){ .swap{grid-template-columns:1fr} .swap-media{display:none} .ss{min-height:0;opacity:1;padding-block:20px;border-top:1px solid var(--line)} .ss .ss-img{display:block;aspect-ratio:1.4} }

/* ---------- Practices C: bento (Gen AI) ---------- */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bn{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.bn:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.bn .bn-img{position:relative;height:clamp(200px,20vw,280px);overflow:hidden;background:var(--navy)}
.bn .bn-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.bn:hover .bn-img img{transform:scale(1.06)}
.bn .bn-img span{position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:#fff;background:rgba(10,16,36,.55);backdrop-filter:blur(8px)}
.bn-body{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.2vw,30px)}
.bn h3{font-size:clamp(24px,2.2vw,32px)}
.bn p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
@media (max-width:860px){ .bento{grid-template-columns:1fr} }

/* ---------- Forces (Why it still matters) ---------- */
.forces-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.forces-top h2{font-size:clamp(30px,4.2vw,54px)}
.forces-top p{margin:0;color:var(--muted);font-size:17.5px;line-height:1.65}
.forces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:f}
.force{position:relative;padding:clamp(22px,2.4vw,32px);border-radius:24px;overflow:hidden;display:grid;gap:14px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.force::before{counter-increment:f;content:"0" counter(f);font-family:var(--display);font-weight:800;font-size:110px;letter-spacing:-.06em;line-height:.8;position:absolute;right:14px;top:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--a1) 16%,transparent),transparent);-webkit-background-clip:text;background-clip:text;color:transparent}
.force .fi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 60%,var(--a3));box-shadow:0 10px 22px -10px var(--a1)}
.force .fi svg{width:24px;height:24px;stroke:#fff}
.force h3{font-size:22px;letter-spacing:-.02em;line-height:1.2;max-width:14ch}
.force p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.force::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a2),var(--a1),var(--a3));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.force:hover::after{transform:none}
@media (max-width:900px){ .forces,.forces-top{grid-template-columns:1fr} }

/* ---------- Steps (How we engage) ---------- */
.steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--line-2)}
.steps::after{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,var(--a2),var(--a1),var(--a3));transform:scaleX(var(--sp,0));transform-origin:left;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.steps.in{--sp:1}
.step{position:relative;display:grid;gap:12px;align-content:start}
.step .sn{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--a1);background:var(--surface);border:2px solid color-mix(in srgb,var(--a1) 30%,transparent);box-shadow:0 0 0 6px var(--bg);transition:background .5s,color .5s;transition-delay:calc(var(--k) * 300ms + 200ms)}
.steps.in .step .sn{background:var(--a1);color:#fff;border-color:var(--a1)}
.step small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.step h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
.step p{margin:0;color:var(--muted);font-size:15px;line-height:1.58}
.steps-img{width:clamp(160px,15vw,220px);aspect-ratio:497/1052;border-radius:22px}
@media (max-width:1100px){ .steps-wrap{grid-template-columns:1fr} .steps-img{display:none} }
@media (max-width:860px){ .steps{grid-template-columns:1fr;gap:26px;padding-left:66px} .steps::before,.steps::after{left:24px;right:auto;top:24px;bottom:24px;width:2px;height:auto} .steps::after{transform:scaleY(var(--sp,0));transform-origin:top} .step .sn{position:absolute;left:-66px;top:-6px} }

/* ---------- Principles (expanding panels) ---------- */
.princ{display:flex;gap:12px;min-height:420px}
.pr{position:relative;flex:1 1 0;min-width:0;border-radius:24px;overflow:hidden;padding:56px 24px 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;transition:flex-grow .7s cubic-bezier(.22,1,.36,1),background .5s,color .5s;outline:none}
.pr.on{flex-grow:3.2;background:linear-gradient(160deg,#0E1638,#1B1260 60%,var(--vivid-royal));color:#fff;border-color:transparent}
.pr .pn{position:absolute;left:24px;top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--a1)}
.pr.on .pn{color:#A6E4F8}
.pr h3{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;line-height:1.2}
.pr p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(233,237,248,.82);max-width:56ch;display:none}
.pr.on p{display:block}
.motion .pr.on p{animation:fadeUp .6s ease both;opacity:0;transform:translateY(8px)}
.pr::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.35),transparent);opacity:0;transition:opacity .6s}
.pr.on::before{opacity:1}
.pr:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
@media (max-width:900px){ .princ{flex-direction:column;min-height:0} .pr{min-height:96px} .pr.on{flex-grow:1} }

/* ---------- Data stack ---------- */
.dstack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ds{padding:24px;border-radius:22px;display:grid;gap:16px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.ds::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--a2),var(--a1),var(--a3))}
.ds-h{display:flex;align-items:center;gap:12px}
.ds-h i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--a1);background:color-mix(in srgb,var(--a1) 9%,transparent)}
.ds h3{font-size:20px;letter-spacing:-.02em}
.ds dl{margin:0;display:grid;gap:12px}
.ds dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ds dd{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.005em}
.chip.pref{color:#fff;background:linear-gradient(100deg,var(--a2),var(--a1) 60%,var(--a3));box-shadow:0 6px 14px -8px var(--a1)}
.chip.sup{color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);font-weight:500}
@media (max-width:1000px){ .dstack{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .dstack{grid-template-columns:1fr} }

/* ---------- Delivery timeline (Gen AI) ---------- */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:31px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.tl::after{content:"";position:absolute;left:0;right:0;top:31px;height:2px;background:linear-gradient(90deg,var(--a2),var(--a1),var(--a3));transform:scaleX(var(--sp,0));transform-origin:left;transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.tl.in{--sp:1}
.tl li{position:relative;display:grid;gap:12px;align-content:start}
.tl .tn{position:relative;z-index:1;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--a3);background:var(--surface);border:1px solid var(--line-2);box-shadow:0 0 0 8px var(--bg);transition:background .5s,color .5s,transform .5s;transition-delay:calc(var(--k) * 380ms + 150ms)}
.tl.in .tn{background:linear-gradient(135deg,var(--a1),var(--a3));color:#fff;border-color:transparent;transform:rotate(-6deg)}
.tl .dur{justify-self:start;padding:5px 11px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--a3);background:color-mix(in srgb,var(--a3) 9%,transparent)}
.tl h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
.tl p{margin:0;color:var(--muted);font-size:15px;line-height:1.58}
@media (max-width:1000px){ .tl{grid-template-columns:1fr;gap:28px;padding-left:84px} .tl::before,.tl::after{left:30px;right:auto;top:0;bottom:0;width:2px;height:auto} .tl::before{background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)} .tl::after{transform:scaleY(var(--sp,0));transform-origin:top} .tl .tn{position:absolute;left:-84px;top:-4px} }

/* ---------- Mini engagement tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{position:relative;padding:22px;border-radius:20px;display:grid;gap:12px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s}
.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--a1) 35%,transparent)}
.tile .ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 9%,transparent)}
.tile .ti svg{width:22px;height:22px;stroke:var(--a1)}
.tile h3{font-size:19px;letter-spacing:-.015em}
.tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.tiles-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.tiles-split .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles-split .steps-img{aspect-ratio:484/1022}
@media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .tiles-split{grid-template-columns:1fr} .tiles-split .steps-img{display:none} }
@media (max-width:560px){ .tiles,.tiles-split .tiles{grid-template-columns:1fr} }

/* ---------- Spec sheet (Gen AI models & guardrails) ---------- */
.spec{border-radius:26px;overflow:hidden;background:linear-gradient(160deg,#0B1230,#141050 55%,#2B0B78);color:var(--on-navy);box-shadow:var(--shadow-lg);position:relative;isolation:isolate}
.spec::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 70% at 90% 0%,rgba(114,9,183,.32),transparent 70%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(76,201,240,.18),transparent 70%)}
.spec-head{padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px) 10px;display:flex;justify-content:space-between;gap:16px;align-items:end;flex-wrap:wrap}
.spec-head h2{font-size:clamp(28px,3.6vw,46px);color:#fff}
.spec-head span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:#A6E4F8}
.spec dl{margin:0;padding:0 clamp(22px,3vw,44px) clamp(18px,2vw,26px)}
.spec .row{display:grid;grid-template-columns:minmax(160px,.35fr) 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(160,175,225,.16)}
.spec dt{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#CDA6EC;display:flex;gap:12px;align-items:center}
.spec dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky-aqua);box-shadow:0 0 0 4px rgba(76,201,240,.18)}
.spec dd{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--on-navy)}
@media (max-width:700px){ .spec .row{grid-template-columns:1fr;gap:8px} }

/* ---------- Industries we serve (rows) ---------- */
.serve-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.serve-rows li{border-bottom:1px solid var(--line-2)}
.serve-rows a{position:relative;display:grid;grid-template-columns:56px minmax(0,.8fr) minmax(0,1.2fr) 40px;gap:16px;align-items:center;padding:clamp(18px,2vw,26px) 8px;text-decoration:none;overflow:hidden;isolation:isolate}
.serve-rows a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,color-mix(in srgb,var(--a2) 10%,transparent),color-mix(in srgb,var(--a3) 10%,transparent));transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.serve-rows a:hover::before,.serve-rows a:focus-visible::before{transform:none}
.serve-rows .ix{font-family:var(--mono);font-size:12px;color:var(--dim)}
.serve-rows h3{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.serve-rows a:hover h3{transform:translateX(6px)}
.serve-rows p{margin:0;color:var(--muted);font-size:16px}
.serve-rows .go{justify-self:end;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--a1);transition:background .3s,color .3s,transform .3s}
.serve-rows a:hover .go{background:var(--a1);color:#fff;transform:rotate(-45deg)}
@media (max-width:760px){ .serve-rows a{grid-template-columns:36px minmax(0,1fr) 36px;row-gap:6px} .serve-rows p{grid-column:2} .serve-rows .go{grid-row:1;grid-column:3} }

/* ---------- Four ways to engage ---------- */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.way{position:relative;padding:26px 22px 24px;border-radius:24px;display:grid;gap:14px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.way::after{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a3) 20%,transparent),transparent);transition:transform .6s}
.way:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.way:hover::after{transform:scale(1.4)}
.way .wi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.way .wi svg{width:26px;height:26px;stroke:#fff}
.way small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.way h3{font-size:21px;letter-spacing:-.02em}
.way p{margin:0;color:var(--muted);font-size:15px;line-height:1.58;position:relative;z-index:1}
@media (max-width:1000px){ .ways{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ways{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq-sec .faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-sec .faq-head{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:var(--gap-head)}
.faq-sec h2{font-size:clamp(30px,3.8vw,50px)}
.faq-sec details{border-bottom:1px solid var(--line-2)}
.faq-sec details:first-child{border-top:1px solid var(--line-2)}
.faq-sec summary{padding:22px 48px 22px 0;font-size:clamp(17px,1.4vw,19.5px)}
.faq-sec summary::after{right:10px}
.faq-sec details p{font-size:16px;line-height:1.65}
.faq-sec details[open] summary{color:var(--a1)}
@media (max-width:860px){ .faq-sec .faq-grid{grid-template-columns:1fr} .faq-sec .faq-head{position:static} }

/* ---------- CTA band ---------- */
.ctab{padding-block:var(--sec-y)}
.ctab-in{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:clamp(36px,5vw,72px) clamp(22px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:linear-gradient(120deg,var(--tint),#F4EEFF 55%,var(--tint));border:1px solid rgba(67,97,238,.12)}
.ctab-in h2{font-size:clamp(30px,4vw,54px)}
.ctab-in p{margin:14px 0 0;color:var(--muted);font-size:17.5px;max-width:60ch}
.ctab-rings{position:absolute;right:-120px;top:50%;width:520px;height:520px;transform:translateY(-50%);z-index:-1;pointer-events:none}
.ctab-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--a1) 22%,transparent)}
.motion .ctab-rings i{animation:ring 6s linear infinite}
.ctab-rings i:nth-child(2){animation-delay:-2s!important}.ctab-rings i:nth-child(3){animation-delay:-4s!important}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.2);opacity:0}}
@media (max-width:760px){ .ctab-in{grid-template-columns:1fr} }

/* ---------- Industry: stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:26px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.stat{position:relative;padding:clamp(20px,2.4vw,32px);display:grid;gap:8px;align-content:start}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{font-size:clamp(30px,3.4vw,48px);font-weight:750;letter-spacing:-.045em;line-height:1;background:linear-gradient(100deg,var(--a2),var(--a1) 50%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:15px;line-height:1.45}
.stat::after{content:"";position:absolute;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--a2),var(--a3));transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k) * 140ms + 200ms)}
.stats.in .stat::after{transform:none}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }
.stats-sec{padding-top:0;margin-top:calc(var(--sec-y) * -.4);position:relative;z-index:2}

/* ---------- Industry: use-case tabs ---------- */
.uc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.uc-tabs{display:grid;gap:10px;align-content:start}
.uc-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.uc-tab:hover{transform:translateX(4px)}
.uc-tab .ui{font-family:var(--mono);font-size:12px;color:var(--a1);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 8%,transparent);transition:background .35s,color .35s}
.uc-tab b{font-size:clamp(17px,1.4vw,20px);font-weight:650;letter-spacing:-.015em;line-height:1.25}
.uc-tab[aria-selected="true"]{border-color:color-mix(in srgb,var(--a1) 35%,transparent);box-shadow:0 18px 36px -20px color-mix(in srgb,var(--a1) 60%,transparent)}
.uc-tab[aria-selected="true"] .ui{background:linear-gradient(135deg,var(--a2),var(--a1));color:#fff}
.uc-tab:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.uc-panels{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#0B1230,#121A4A 55%,#24105E);color:var(--on-navy);box-shadow:var(--shadow-lg);isolation:isolate;min-height:420px}
.uc-panels::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 60% at 100% 0%,color-mix(in srgb,var(--a2) 32%,transparent),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,color-mix(in srgb,var(--a3) 40%,transparent),transparent 70%)}
.uc-panel{padding:clamp(26px,3.4vw,48px);display:grid;gap:18px;align-content:start}
.uc-panel[hidden]{display:none}
.uc-panel small{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#A6E4F8}
.uc-panel h3{font-size:clamp(26px,2.8vw,40px);color:#fff}
.uc-panel p{margin:0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.62;color:rgba(233,237,248,.85);max-width:58ch}
.uc-panel .tick li{color:var(--on-navy)}
.uc-panel .tick li::before{background:rgba(255,255,255,.14);opacity:1}
.uc-panel .tick li::after{border-color:var(--sky-aqua)}
.uc-panel:not([hidden])>*{animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;opacity:0;transform:translateY(10px)}
.uc-panel:not([hidden])>:nth-child(2){animation-delay:.05s}.uc-panel:not([hidden])>:nth-child(3){animation-delay:.1s}.uc-panel:not([hidden])>:nth-child(4){animation-delay:.16s}
@media (max-width:900px){ .uc{grid-template-columns:1fr} .uc-tabs{display:none} .uc-panels{display:grid;gap:14px;background:none;box-shadow:none;overflow:visible;min-height:0} .uc-panels::before{display:none} .uc-panel,.uc-panel[hidden]{display:grid;border-radius:24px;background:linear-gradient(160deg,#0B1230,#121A4A 55%,#24105E)} }

/* ---------- Industry: service hubs ---------- */
.hubs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hubs .frame{aspect-ratio:1.45}
.hub-list{display:grid;gap:14px;counter-reset:h}
.hubc{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:20px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s}
.hubc:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--a1) 35%,transparent)}
.hubc .hi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.hubc .hi svg{width:22px;height:22px;stroke:#fff}
.hubc h3{font-size:19px;letter-spacing:-.015em}
.hubc p{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.hubc .arr{color:var(--a1);font-weight:700;margin-top:10px}
@media (max-width:900px){ .hubs{grid-template-columns:1fr} }

/* ---------- Industry: compliance ---------- */
.comp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.comp-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.comp-list li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:14px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:16px;color:var(--ink-2);line-height:1.45}
.comp-list li svg{width:40px;height:40px}
.comp .frame{aspect-ratio:760/327;border-radius:24px}
.comp-side{display:grid;gap:18px}
@media (max-width:900px){ .comp{grid-template-columns:1fr} }

/* ---------- Industry: numbered engagement models ---------- */
.nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.nums li{position:relative;display:grid;gap:12px;align-content:start;padding:26px 22px 8px 0}
.nums li+li{padding-left:22px;border-left:1px solid var(--line-2)}
.nums .nn{font-size:clamp(54px,6vw,88px);font-weight:800;letter-spacing:-.06em;line-height:.9;background:linear-gradient(180deg,var(--a1),color-mix(in srgb,var(--a3) 20%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.nums h3{font-size:20px;letter-spacing:-.02em}
.nums p{margin:0;color:var(--muted);font-size:15px;line-height:1.58}
@media (max-width:900px){ .nums{grid-template-columns:repeat(2,minmax(0,1fr))} .nums li:nth-child(3){padding-left:0;border-left:0} .nums li:nth-child(n+3){border-top:1px solid var(--line-2)} }
@media (max-width:560px){ .nums{grid-template-columns:1fr} .nums li,.nums li+li{padding-left:0;border-left:0} .nums li+li{border-top:1px solid var(--line-2)} }

/* ---------- ISO hero ---------- */
.iso-hero{position:relative;width:100%;max-width:640px}
.iso-hero svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 40px rgba(23,40,94,.18))}
.iso-hero .float-chip{left:2%;bottom:6%}
.iso-hero .float-chip.two{left:auto;right:0;bottom:auto;top:6%;animation-delay:-3s}

/* ---------- Industry overview ---------- */
.depth{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.depth .frame{aspect-ratio:567/380}
.depth ol{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:22px;counter-reset:d}
.depth li{position:relative;padding-left:64px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);letter-spacing:-.01em}
.depth li::before{counter-increment:d;content:"0" counter(d);position:absolute;left:0;top:2px;font-family:var(--mono);font-size:13px;color:var(--a1);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--a1) 30%,transparent)}
@media (max-width:900px){ .depth{grid-template-columns:1fr} }
.sectors{display:grid;gap:clamp(18px,2vw,26px)}
.sector{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(16px,2vw,24px);border-radius:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.sector:nth-child(even) .frame{order:2}
.sector .frame{aspect-ratio:450/250;border-radius:22px}
.sector-body{display:grid;gap:16px;padding:8px clamp(4px,1vw,16px)}
.sector-body small{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--a1)}
.sector-body h3{font-size:clamp(28px,3vw,42px)}
.sector-body p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.6}
.outs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.outs li{padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 9%,transparent),color-mix(in srgb,var(--a3) 9%,transparent));font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.sector .go-link{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--a1);text-decoration:none;justify-self:start}
.sector .go-link span{transition:transform .25s}.sector .go-link:hover span{transform:translateX(4px)}
@media (max-width:860px){ .sector{grid-template-columns:1fr} .sector:nth-child(even) .frame{order:0} .outs{grid-template-columns:1fr} }
.gov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.gov-chips{display:flex;flex-wrap:wrap;gap:12px}
.gov-chips a{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);font-weight:650;font-size:17px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .3s,border-color .3s}
.gov-chips a::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a3))}
.gov-chips a:hover{transform:translateY(-3px);border-color:var(--a1)}
@media (max-width:900px){ .gov{grid-template-columns:1fr} }
.work{max-width:1040px}
.work p:not(.eyebrow){margin:0;font-size:clamp(22px,2.6vw,36px);line-height:1.35;letter-spacing:-.025em;font-weight:550;color:var(--ink)}
.work p em{font-style:normal;padding:0 .1em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(100deg,color-mix(in srgb,var(--a2) 18%,transparent),color-mix(in srgb,var(--a3) 16%,transparent))}

/* ---------- Contact ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.ct-copy{display:grid;gap:22px;align-content:start;padding-top:8px}
.ct-copy h1{font-size:clamp(44px,6.2vw,88px);font-weight:750;letter-spacing:-.05em;line-height:.98}
.ct-copy .big{margin:0;font-size:clamp(20px,2vw,27px);line-height:1.38;letter-spacing:-.02em;font-weight:550;color:var(--ink)}
.ct-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.65;max-width:58ch}
.form{position:relative;border-radius:28px;padding:clamp(22px,3vw,36px);display:grid;gap:14px}
.form::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--a2),var(--a1),var(--a3),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{position:relative;display:block}
.fld input,.fld textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);padding:22px 16px 10px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.9);transition:border-color .25s,box-shadow .25s;outline:none}
.fld textarea{min-height:140px;resize:vertical}
.fld span{position:absolute;left:17px;top:16px;font-size:15.5px;color:var(--dim);pointer-events:none;transition:transform .2s,font-size .2s,color .2s;transform-origin:left top}
.fld input:focus,.fld textarea:focus{border-color:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 14%,transparent)}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span,.fld textarea:focus+span,.fld textarea:not(:placeholder-shown)+span{transform:translateY(-9px);font-size:11.5px;color:var(--a1)}
.form button{justify-self:start;border:0;cursor:pointer;font:inherit}
.form-note{font-size:13px;color:var(--dim);margin:0}
@media (max-width:900px){ .ct-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .form .row2{grid-template-columns:1fr} }
/* Contact Form 7 inside the form card: same grid, floating labels and button as the built-in form */
.form .wpcf7,.form .wpcf7-form{display:grid;gap:14px;margin:0}
.fld .wpcf7-form-control-wrap,.fld .wpcf7-not-valid-tip{position:relative;left:auto;top:auto;display:block;font-size:inherit;color:inherit;transform:none;pointer-events:auto;transition:none}
.fld .wpcf7-form-control-wrap:has(input:focus,textarea:focus)+span,.fld .wpcf7-form-control-wrap:has(input:not(:placeholder-shown),textarea:not(:placeholder-shown))+span{transform:translateY(-9px);font-size:11.5px;color:var(--a1)}
.fld .wpcf7-not-valid{border-color:#E5484D}
.fld .wpcf7-not-valid:focus{box-shadow:0 0 0 4px rgba(229,72,77,.14)}
.fld .wpcf7-form-control-wrap span.wpcf7-not-valid-tip{display:block;margin:6px 2px 0;font-size:12.5px;line-height:1.35;color:#C62A2F;transform:none}
.form .form-actions{display:flex;align-items:center;gap:12px}
.form .wpcf7-submit{border:0;cursor:pointer;font:inherit}
.form .wpcf7-submit:disabled{opacity:.6;cursor:progress}
.form .wpcf7-spinner{margin:0}
.form .wpcf7 form .wpcf7-response-output{margin:0;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.form .wpcf7 form.sent .wpcf7-response-output{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.08);color:#05603A}
.form .wpcf7 form.invalid .wpcf7-response-output,.form .wpcf7 form.unaccepted .wpcf7-response-output{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08);color:#8A4B06}
.form .wpcf7 form.failed .wpcf7-response-output,.form .wpcf7 form.aborted .wpcf7-response-output,.form .wpcf7 form.spam .wpcf7-response-output{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.07);color:#9F1D22}
.legacy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center}
.legacy .frame{aspect-ratio:743/343}
.legacy p{margin:0;color:var(--muted);font-size:17.5px;line-height:1.66}
.legacy-copy{display:grid;gap:18px}
@media (max-width:900px){ .legacy{grid-template-columns:1fr} }
.offices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.office{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:26px;display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.office.us{background:linear-gradient(160deg,#0B1230,#141A52 60%,#2B0B78);color:var(--on-navy);border-color:transparent}
.office .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1)}
.office.us .tag{color:#A6E4F8}
.office h3{font-size:clamp(26px,2.6vw,36px)}
.office.us h3{color:#fff}
.office ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.office li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.5}
.office li svg{width:20px;height:20px;margin-top:2px;stroke:var(--a1)}
.office.us li svg{stroke:var(--sky-aqua)}
.office a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.office a:hover{border-color:currentColor}
.office.us a,.office.us li{color:var(--on-navy)}
.map{position:relative;margin-top:20px;border-radius:26px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.map svg{display:block;width:100%;height:auto}
@media (max-width:860px){ .offices{grid-template-columns:1fr} }

/* hero visuals: shared bits */
.hv{position:relative;width:100%;max-width:600px;aspect-ratio:1.05}
.hv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.motion .hv .spin{transform-box:fill-box;transform-origin:center;animation:spn 30s linear infinite}
.motion .hv .spin.r{animation-direction:reverse;animation-duration:44s}
@keyframes spn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .ss{opacity:1} }

/* hero: code refactor (AI Driven Digitalisation) */
.hv-code{display:grid;place-items:center}
.ed{position:relative;width:min(100%,500px);border-radius:22px;overflow:hidden}
.ed-top{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ed-top>i{width:10px;height:10px;border-radius:50%;background:#E1E6F3}
.ed-top>i:first-child{background:var(--neon-pink);opacity:.6}.ed-top>i:nth-child(2){background:var(--sky-aqua);opacity:.7}.ed-top>i:nth-child(3){background:var(--indigo-bloom);opacity:.5}
.ed-tab{margin-left:10px;width:74px;height:10px;border-radius:5px;background:#E6EBF8}.ed-tab.on{background:linear-gradient(90deg,var(--electric-sapphire),var(--indigo-bloom));opacity:.55}
.ed-tab+.ed-tab{margin-left:4px;width:54px}
.ed-body{display:grid;grid-template-columns:34px 1fr;padding:16px 18px 18px 6px}
.ed-gut{display:grid;gap:12px;font-family:var(--mono);font-size:10px;color:var(--dim);text-align:right;padding-right:10px}
.ed-gut b{font-weight:400;line-height:10px}
.ed-lines{position:relative;display:grid;gap:12px}
.cl{display:block;height:10px;border-radius:5px;width:var(--w1);margin-left:0;background:#CDD4E6}
.motion .cl{animation:morph 8s cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes morph{0%,6%{width:var(--w1);margin-left:0;background:#CDD4E6}14%,82%{width:var(--w2);margin-left:var(--in);background:linear-gradient(90deg,var(--sky-aqua),var(--electric-sapphire) 50%,var(--indigo-bloom))}92%,100%{width:var(--w1);margin-left:0;background:#CDD4E6}}
.beam{position:absolute;left:-40px;right:-18px;top:0;height:28px;background:linear-gradient(180deg,transparent,rgba(76,201,240,.28),transparent);border-bottom:1.5px solid rgba(67,97,238,.55);opacity:0;pointer-events:none}
.motion .beam{animation:beam 8s linear infinite}
@keyframes beam{0%{transform:translateY(-20px);opacity:0}3%{opacity:1}28%{transform:translateY(230px);opacity:1}32%,100%{transform:translateY(230px);opacity:0}}
.ed-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px 16px;border-top:1px solid var(--line)}
.ed-foot .bar{flex:1;height:6px;border-radius:3px;background:#E6EBF8;overflow:hidden}
.ed-foot .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sky-aqua),var(--indigo-bloom));transform-origin:left}
.motion .ed-foot .bar i{animation:bar 8s ease-in-out infinite}
@keyframes bar{0%,10%{transform:scaleX(.08)}60%,88%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.ed-foot .ok{display:flex;gap:6px}
.ed-foot .ok i{width:12px;height:12px;border-radius:50%;background:var(--ok)}
.motion .ed-foot .ok i{background:#E1E6F3;animation:ok 8s infinite}
.ed-foot .ok i:nth-child(2){animation-delay:.35s}.ed-foot .ok i:nth-child(3){animation-delay:.7s}
@keyframes ok{0%,45%{background:#E1E6F3}52%,88%{background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.15)}96%,100%{background:#E1E6F3}}
.hv-code .float-chip{font-weight:600;color:var(--ink);font-size:14px}
.hv-code .float-chip .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--sky-aqua),var(--indigo-bloom))}
.hv-code .c1{left:-2%;top:8%}.hv-code .c2{right:-2%;top:30%;animation-delay:-2s}.hv-code .c3{left:6%;bottom:6%;animation-delay:-4s}
/* hero: data layers */
.hv-data .slab{transform-box:fill-box}
.motion .hv-data .slab{animation:slabIn 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--k) * .18s + .3s)}
@keyframes slabIn{from{opacity:0;transform:translateY(-30px)}}
.motion .hv-data .src{animation:bob 4s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -1s)}
.dash{position:absolute;right:-2%;bottom:4%;width:min(46%,230px);padding:14px 14px 12px;border-radius:18px;display:grid;gap:10px}
.dash-h{display:flex;gap:6px}.dash-h i{height:6px;border-radius:3px;background:#E1E6F3;width:28%}.dash-h i:first-child{width:40%;background:linear-gradient(90deg,var(--electric-sapphire),var(--indigo-bloom));opacity:.6}
.dash-bars{display:flex;align-items:flex-end;gap:6px;height:70px}
.dash-bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(var(--sky-aqua),var(--electric-sapphire));transform-origin:bottom}
.dash-bars i:nth-child(odd){background:linear-gradient(var(--violet-l),var(--indigo-bloom))}
.motion .dash-bars i{animation:barg 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.4s)}
@keyframes barg{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.spark{width:100%;height:auto}
/* hero: neural (Gen AI) */
.hv-neural .core{transform-box:fill-box;transform-origin:center}
.motion .hv-neural .core{animation:corep 3s ease-in-out infinite}
@keyframes corep{50%{transform:scale(1.08)}}
.hv-neural .beam{stroke-dasharray:6 10}
.motion .hv-neural .beam{animation:bflow 1.8s linear infinite;animation-delay:calc(var(--k) * -.4s)}
@keyframes bflow{to{stroke-dashoffset:-32}}
.motion .hv-neural .spin{animation-duration:60s}
.motion .hv-neural .spin.r{animation-duration:80s}
.ans{position:absolute;left:0;bottom:6%;width:min(56%,280px);padding:16px 18px;border-radius:18px;display:grid;gap:9px}
.ans-l{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--indigo-bloom),var(--raspberry-plum));opacity:.5;width:92%;transform-origin:left}
.ans-l.s{width:70%;opacity:.35}.ans-l.m{width:82%;opacity:.28}
.motion .ans-l{animation:type 5s ease-in-out infinite}
.motion .ans-l.s{animation-delay:.4s}.motion .ans-l.m{animation-delay:.8s}
@keyframes type{0%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.cite{display:flex;gap:6px;margin-top:2px}
.cite b{font-family:var(--mono);font-size:11px;font-weight:500;padding:3px 7px;border-radius:6px;color:var(--indigo-bloom);background:rgba(114,9,183,.08)}
.world-hero{max-width:720px}
.world-hero svg{aspect-ratio:700/455;height:auto}
.world-hero .sat{cursor:pointer}
@media (max-width:600px){
  .hv-code{aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .hv-code .ed{width:100%;order:-1;margin-bottom:6px}
  .hv-code .float-chip{position:static;animation:none!important}
  .map{display:none}
  .hv-neural .ans{width:62%}
}
@media (max-width:900px){ .pr{flex:none} }
/* ===== Design guide alignment (inner pages) ===== */
.btn-primary{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -10px rgba(67,97,238,.55)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 30px -10px rgba(114,9,183,.55)}
.acc,.ph h1 .w.acc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph h1 .w.acc{padding-right:.04em}
.offices{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}
.us-map{margin:0;display:grid;place-items:center}
.us-map svg{max-height:360px}
.pin-rings circle{fill:none;stroke:var(--electric-sapphire);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.motion .pin-rings circle{animation:pinr 3.6s ease-out infinite}
.pin-rings circle:nth-child(2){animation-delay:-1.2s!important}.pin-rings circle:nth-child(3){animation-delay:-2.4s!important}
@keyframes pinr{from{transform:scale(.4);opacity:.9}to{transform:scale(3.2);opacity:0}}
.motion .pin-drop{animation:bob 3s ease-in-out infinite alternate}
@media (max-width:860px){ .us-map{display:none} .offices{grid-template-columns:1fr} }

/* ================= Round 2 components ================= */
.prob-lead.sm{font-size:clamp(18px,1.6vw,22px)}
.prob-grid.flip>:first-child{order:2}
@media (max-width:900px){ .prob-grid.flip>:first-child{order:0} }
.stats-band{padding-block:calc(var(--sec-y) * .6)}
.stats-note{margin:14px 4px 0;font-size:13px;line-height:1.55;color:var(--dim);max-width:110ch}
/* numbered list split */
.lsplit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center}
.lsplit.flip>.frame{order:-1}
.lsplit.noimg{grid-template-columns:1fr}
.lsplit .lead-p{margin:0;color:var(--muted);font-size:17px;line-height:1.6}
.nlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nlist li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--muted)}
.nlist li b{color:var(--ink);font-weight:650}
.ln-n{font-family:var(--mono);font-size:12px;color:var(--electric-sapphire);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tint)}
.outro-p{margin:18px 0 0;padding-left:20px;color:var(--ink-2);font-size:16px;line-height:1.6}
.list-img{aspect-ratio:1;max-height:560px}
.lsplit .frame{align-self:center}
@media (max-width:900px){ .lsplit{grid-template-columns:1fr} .lsplit.flip>.frame{order:0} .list-img{aspect-ratio:1.4} }
/* flow timeline with variable columns */
.tl.flow{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.tl.flow p{margin:0;color:var(--muted);font-size:15px;line-height:1.58}
.tl .wyg{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.nl{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted);font-size:15px;line-height:1.55}
.nl li::marker{color:var(--electric-sapphire);font-family:var(--mono);font-size:12px}
.nl b{color:var(--ink);font-weight:650}
@media (max-width:1180px) and (min-width:1001px){ .tl.flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px} .tl.flow::before,.tl.flow::after{display:none} }
/* generic cards */
.cards3,.cards2{display:grid;gap:18px}
.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcard{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(22px,2.4vw,30px);border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--sky-aqua),var(--electric-sapphire),var(--indigo-bloom));transform:scaleY(0);transform-origin:top;transition:transform .5s}
.gcard:hover::before{transform:none}
.gi{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--electric-sapphire)}
.gcard h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.25}
.gcard p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:1000px){ .cards3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .cards3,.cards2{grid-template-columns:1fr} }
.wide-img{margin-top:22px;aspect-ratio:2.2;border-radius:24px}
/* side grid: image + list */
.sidegrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.5vw,52px);align-items:start}
.side-img{position:sticky;top:calc(var(--header-h) + 24px);aspect-ratio:1}
.side-list{display:grid;gap:12px}
.sidec{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.sidec:hover{border-color:color-mix(in srgb,var(--electric-sapphire) 35%,transparent);transform:translateX(5px)}
.si{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;color:#fff;background:linear-gradient(135deg,var(--electric-sapphire),var(--indigo-bloom))}
.sidec h3{font-size:18.5px;letter-spacing:-.015em;line-height:1.3}
.sidec p{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.58}
@media (max-width:900px){ .sidegrid{grid-template-columns:1fr} .side-img{position:relative;top:auto;aspect-ratio:1.5} }
/* process table (transcribed infographics) */
.ptable{border-radius:28px;overflow:hidden;background:linear-gradient(160deg,var(--navy),#121A4A 60%,#1E1160);color:var(--on-navy);box-shadow:var(--shadow-lg);position:relative;isolation:isolate}
.ptable::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 60% at 100% 0%,rgba(76,201,240,.18),transparent 70%),radial-gradient(ellipse 40% 60% at 0% 100%,rgba(114,9,183,.35),transparent 70%)}
.pt-top{padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px) 14px}
.pt-top h2{font-size:clamp(28px,3.4vw,44px);color:#fff}
.pt-head,.pt-row{display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,.55fr) minmax(0,1.4fr);gap:18px;align-items:center;padding:16px clamp(22px,3vw,44px)}
.pt-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A6E4F8;border-bottom:1px solid var(--navy-line)}
.pt-head span:last-child{color:#CDA6EC}
.pt-row{border-bottom:1px solid var(--navy-line);transition:background .3s}
.pt-row:last-child{border-bottom:0;padding-bottom:clamp(22px,2.6vw,34px)}
.pt-row:hover{background:rgba(255,255,255,.04)}
.pt-n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:#fff;background:linear-gradient(135deg,var(--electric-sapphire),var(--indigo-bloom))}
.pt-row b{font-size:17px;font-weight:650;color:#fff;letter-spacing:-.01em}
.pt-d{justify-self:start;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:12px;color:#A6E4F8;background:rgba(76,201,240,.12)}
.pt-o{color:rgba(233,237,248,.82);font-size:15.5px;line-height:1.5}
@media (max-width:760px){ .pt-head{display:none} .pt-row{grid-template-columns:44px 1fr;row-gap:8px} .pt-d,.pt-o{grid-column:2} }
.row-static{display:grid;grid-template-columns:56px minmax(0,.8fr) minmax(0,1.2fr) 40px;gap:16px;align-items:center;padding:clamp(18px,2vw,26px) 8px}
.row-static .go{visibility:hidden}
@media (max-width:760px){ .row-static{grid-template-columns:36px minmax(0,1fr) 36px;row-gap:6px} .row-static p{grid-column:2} }
/* careers */
.sub.sm{font-size:16px}
.cnt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,520px)}
.cnt{padding:clamp(20px,2.4vw,30px);border-radius:24px;display:grid;gap:6px}
.cnt:nth-child(2),.cnt:nth-child(4){transform:translateY(28px)}
.cnt b{font-size:clamp(40px,4.6vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cnt>span{color:var(--muted);font-size:15px}
.motion .cnt{animation:bob 6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -1.4s)}
.life{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.life-h{font-size:clamp(32px,4.4vw,58px);margin-bottom:18px}
.life p{margin:0 0 14px;color:var(--muted);font-size:17.5px;line-height:1.65}
.traits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.traits li{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.traits li:nth-child(even){margin-left:clamp(20px,4vw,56px)}
.traits li:hover{transform:translateX(8px)}
.traits li span{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--electric-sapphire)}
@media (max-width:900px){ .life{grid-template-columns:1fr} .traits li:nth-child(even){margin-left:0} }
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){ .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cgrid{grid-template-columns:1fr} }
.openings{border-radius:28px;padding:clamp(20px,3vw,36px);display:grid;gap:22px}
.osearch{display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:16px;border:1px solid var(--line-2);background:#fff}
.osearch svg{width:20px;height:20px;stroke:var(--dim);flex:none}
.osearch input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16px;padding:16px 0;background:transparent;color:var(--ink)}
.osearch:focus-within{border-color:var(--electric-sapphire);box-shadow:0 0 0 4px rgba(67,97,238,.12)}
.empty{display:grid;justify-items:center;gap:14px;padding:clamp(24px,4vw,48px) 12px;text-align:center;border-radius:20px;border:1.5px dashed var(--line-2)}
.empty-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--tint)}
.empty-ic svg{width:30px;height:30px;stroke:var(--electric-sapphire)}
.empty p{margin:0;font-size:18px;font-weight:600;color:var(--ink-2)}
/* blogs */
.feat{position:relative;display:grid;width:min(100%,560px);border-radius:28px;overflow:hidden;text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.feat:hover{transform:translateY(-6px) rotate(-.4deg)}
.feat-img{display:block;aspect-ratio:1.9;overflow:hidden;background:var(--navy)}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.feat:hover .feat-img img{transform:scale(1.05)}
.feat-body{display:grid;gap:10px;padding:22px 24px 24px}
.feat-body small,.post-body small{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.feat-body b{font-size:clamp(20px,1.9vw,26px);letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.feat-go,.post-go{font-weight:650;font-size:14.5px;color:var(--electric-sapphire)}
.fchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.fchip{appearance:none;border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);padding:10px 16px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:background .25s,color .25s,border-color .25s}
.fchip i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim)}
.fchip:hover{border-color:var(--electric-sapphire)}
.fchip.on{background:var(--grad);color:#fff;border-color:transparent}
.fchip.on i{color:rgba(255,255,255,.8)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post[hidden]{display:none}
.post a{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:24px;overflow:hidden;text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.post a:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-img{display:block;aspect-ratio:1.9;overflow:hidden;background:var(--navy)}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.post a:hover .post-img img{transform:scale(1.05)}
.post-body{display:grid;gap:10px;align-content:start;padding:20px 22px 22px}
.post-body small b{color:var(--electric-sapphire);font-weight:500}
.post-body h3{font-size:19px;letter-spacing:-.02em;line-height:1.28;color:var(--ink)}
.post-body p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more-wrap{display:flex;justify-content:center;margin-top:30px}
.more-wrap[hidden]{display:none}
@media (max-width:1000px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .posts{grid-template-columns:1fr} }
/* hero visual chips for sub pages */
.hv .float-chip.sc1{right:-1%;top:4%;left:auto;bottom:auto}
.hv .float-chip.sc2{left:-2%;bottom:3%;right:auto;top:auto;animation-delay:-3s}
.float-chip{max-width:min(260px,70vw);white-space:normal;line-height:1.3}
.hv-code .float-chip.sc1,.hv-code .float-chip.sc2{display:none}
.win{position:relative;width:min(100%,520px);border-radius:22px;overflow:hidden}
.hv-build,.hv-chart,.hv-chat,.hv-migrate,.hv-cockpit,.hv-team,.hv-agents{display:grid;place-items:center}
/* build */
.bw{position:relative;height:300px;margin:14px;display:grid;grid-template-columns:70px 1fr 1fr 1fr;grid-template-rows:28px 92px 1fr 22px 22px;gap:10px}
.bw span{border-radius:10px;background:var(--tint)}
.b-nav{grid-column:1/-1;background:linear-gradient(90deg,var(--electric-sapphire),var(--indigo-bloom))!important;opacity:.85}
.b-side{grid-row:2/-1}
.b-c.c1{background:linear-gradient(135deg,#C9EFFB,#A6E4F8)!important}.b-c.c2{background:linear-gradient(135deg,#C7CFFA,#A1B0F7)!important}.b-c.c3{background:linear-gradient(135deg,#ECD6F8,#CDA6EC)!important}
.b-chart{grid-column:2/-1;display:flex!important;align-items:flex-end;gap:8px;padding:12px;background:#fff!important;border:1px solid var(--line)}
.b-chart i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--electric-sapphire),var(--sky-aqua));height:calc(30% + var(--h,0%))}
.b-chart i:nth-child(1){--h:10%}.b-chart i:nth-child(2){--h:30%}.b-chart i:nth-child(3){--h:20%}.b-chart i:nth-child(4){--h:45%}.b-chart i:nth-child(5){--h:38%}.b-chart i:nth-child(6){--h:60%}
.b-row{grid-column:2/-1}.b-row.r2{grid-column:2/4}
.motion .bw>span{animation:assemble 7s cubic-bezier(.22,1,.36,1) infinite}
.bw>span:nth-child(1){animation-delay:0s!important}.bw>span:nth-child(2){animation-delay:.25s!important}.bw>span:nth-child(3){animation-delay:.5s!important}.bw>span:nth-child(4){animation-delay:.65s!important}.bw>span:nth-child(5){animation-delay:.8s!important}.bw>span:nth-child(6){animation-delay:1.05s!important}.bw>span:nth-child(7){animation-delay:1.3s!important}.bw>span:nth-child(8){animation-delay:1.45s!important}
@keyframes assemble{0%{opacity:0;transform:translateY(18px) scale(.94)}10%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-8px)}}
.cursor{position:absolute;width:18px;height:18px;left:62%;top:58%;border-radius:50% 50% 50% 0;background:var(--indigo-bloom);transform:rotate(-45deg);box-shadow:0 0 0 6px rgba(114,9,183,.15)}
.motion .cursor{animation:cur 7s ease-in-out infinite}
@keyframes cur{0%,100%{left:30%;top:40%}30%{left:66%;top:35%}60%{left:55%;top:70%}}
/* charts */
.chart-win svg{display:block;width:100%;height:auto;padding:6px 8px 10px}
.motion .pb{transform-box:fill-box;transform-origin:bottom;animation:pbIn 1.2s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--k) * 90ms + .3s)}
@keyframes pbIn{from{transform:scaleY(0)}}
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.motion .draw{stroke-dashoffset:1;animation:drawL 2.2s cubic-bezier(.65,0,.35,1) .8s forwards}
.motion .draw.d2{animation-delay:2.6s}
@keyframes drawL{to{stroke-dashoffset:0}}
.mpulse{transform-box:fill-box;transform-origin:center}
.motion .mpulse{animation:mp 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * .5s + 2.5s)}
@keyframes mp{50%{transform:scale(1.35)}}
/* migrate */
.hv-migrate svg{position:relative;inset:auto;width:100%;height:auto}
.okb{transform-box:fill-box;transform-origin:center}
.motion .okb{animation:okp 2.6s ease-in-out infinite}
@keyframes okp{0%,40%{transform:scale(0);opacity:0}55%,90%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.mbar{position:absolute;left:12%;right:12%;bottom:4%;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px}
.mbar span{flex:1;height:8px;border-radius:4px;background:var(--tint);overflow:hidden}
.mbar span i{display:block;height:100%;background:var(--grad);transform-origin:left}
.motion .mbar span i{animation:bar 5s ease-in-out infinite}
.mbar b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--ok);white-space:nowrap}
/* cockpit */
.phone{position:relative;width:min(270px,62vw);aspect-ratio:9/18;border-radius:42px;padding:14px;background:linear-gradient(160deg,#1A2350,var(--navy));box-shadow:var(--shadow-lg),inset 0 0 0 2px rgba(255,255,255,.08)}
.notch{position:absolute;left:50%;top:12px;width:80px;height:20px;border-radius:12px;background:#05081A;transform:translateX(-50%);z-index:2}
.ph-scr{height:100%;border-radius:30px;background:var(--bg);padding:42px 12px 12px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:9px;overflow:hidden}
.kpi{padding:10px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;gap:6px}
.kpi.big{grid-column:1/-1}
.kpi.big svg{width:100%;height:auto}
.kl{height:6px;width:55%;border-radius:3px;background:var(--line-2)}
.kv{height:14px;width:75%;border-radius:4px;background:linear-gradient(90deg,var(--electric-sapphire),var(--indigo-bloom))}
.kt{height:6px;width:35%;border-radius:3px}
.kt.up{background:var(--ok)}.kt.dn{background:var(--violet-l)}
.motion .kv{transform-origin:left;animation:type 4s ease-in-out infinite;animation-delay:calc(var(--k) * .3s)}
.narr{grid-column:1/-1;display:flex;gap:8px;align-items:center;padding:10px;border-radius:14px;background:var(--tint)}
.narr i{width:18px;height:18px;border-radius:6px;background:var(--grad);flex:none}
.narr span{height:6px;flex:1;border-radius:3px;background:var(--line-2)}
/* chat */
.cw{display:grid;grid-template-columns:44px 1fr 1.1fr;gap:12px;padding:14px;height:320px}
.rail{display:grid;align-content:start;gap:10px}
.rail i{width:32px;height:32px;border-radius:10px;background:var(--tint)}
.rail i:first-child{background:var(--grad)}
.doc{border-radius:14px;background:#fff;border:1px solid var(--line);padding:14px;display:grid;align-content:start;gap:10px}
.doc span{height:7px;border-radius:4px;background:var(--line-2)}
.doc span.s{width:60%}
.pane{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.bub{border-radius:14px;padding:10px 12px;min-height:26px}
.bub.u{align-self:flex-end;width:60%;background:var(--grad)}
.bub.a{align-self:flex-start;width:82%;background:#fff;border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.bub.b2 i{width:8px;height:8px;border-radius:50%;background:var(--violet-l)}
.motion .bub.b2 i{animation:dots 1.2s ease-in-out infinite}
.bub.b2 i:nth-child(2){animation-delay:.15s}.bub.b2 i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.4}}
.bub.b3 span{height:7px;width:100%;border-radius:4px;background:#C7CFFA}.bub.b3 span.s{width:62%}
.motion .bub{animation:bubIn 8s ease infinite both}
.bub.b1{animation-delay:0s!important}.bub.b2{animation-delay:.9s!important}.bub.b3{animation-delay:2.2s!important}.bub.b4{animation-delay:3.4s!important}
@keyframes bubIn{0%{opacity:0;transform:translateY(10px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@media (max-width:560px){ .cw{grid-template-columns:36px 1fr;height:280px} .doc{display:none} }
/* team */
.hv-team{min-height:420px}
.board{position:relative;z-index:1;width:min(78%,380px);padding:16px;border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.col{display:grid;align-content:start;gap:8px}
.col b{height:8px;width:60%;border-radius:4px;background:var(--line-2);margin-bottom:4px}
.card{height:42px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px -6px rgba(23,40,94,.25);position:relative}
.card::before{content:"";position:absolute;left:8px;top:10px;width:60%;height:6px;border-radius:3px;background:#C7CFFA}
.card.s{height:30px}
.card.done::before{background:#9BE7C9}
.motion .card.mv{animation:mvc 6s ease-in-out infinite}
@keyframes mvc{0%,20%{transform:none}45%,70%{transform:translateX(calc(100% + 10px))}90%,100%{transform:translateX(calc(200% + 20px));opacity:0}}
.orbit{position:absolute;inset:0;margin:auto;width:min(100%,460px);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(67,97,238,.22)}
.motion .orbit{animation:spn 40s linear infinite}
.av{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:0 0 0 5px #fff,0 10px 20px -8px rgba(23,40,94,.45);transform:rotate(calc(var(--i) * 60deg)) translate(min(230px,38vw)) rotate(calc(var(--i) * -60deg))}
.av svg{width:26px;height:26px}
.motion .av svg{animation:spn 40s linear infinite reverse}
/* agents */
.hv-agents svg{position:relative;width:100%;height:auto}
.agn{transform-box:fill-box;transform-origin:center}
.motion .agn{animation:corep 3s ease-in-out infinite;animation-delay:calc(var(--k) * 1s)}
.motion .hitl{animation:bob 4s ease-in-out infinite alternate}
@media (max-width:600px){ .hv .float-chip.sc1,.hv .float-chip.sc2{position:static;animation:none!important;margin-top:8px} .hv{aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .hv-neural svg,.hv-data svg{position:relative;aspect-ratio:1} }
.ph h1.long{font-size:clamp(34px,4.3vw,60px)}
.list-img{max-width:440px;justify-self:center;width:100%}
.hv .win svg,.hv .phone svg,.hv .av svg{position:relative;inset:auto;width:100%;height:auto}
.hv .av svg{width:26px;height:26px}
.float-chip b{white-space:nowrap}
.pr h3{overflow-wrap:anywhere;hyphens:auto}
.pr:not(.on) h3{font-size:clamp(15px,1.25vw,19px)}
@media (max-width:1000px){ .tl.flow{grid-template-columns:1fr} }
.openings{grid-template-columns:minmax(0,1fr)}
.osearch input{width:100%}
.pt-a{color:#E9EDF8;font-size:15px;line-height:1.5}
@media (max-width:760px){ .pt-a{grid-column:2} }
@media (max-width:600px){ .hv-team .orbit{display:none} .hv-team{min-height:0} .board{width:100%} }
/* ===== One banner type system for every inner page ===== */
.ph h1,.ph h1.long,.ct-copy h1{font-family:var(--display);font-size:clamp(34px,3.9vw,56px);font-weight:750;letter-spacing:-.04em;line-height:1.06}
.ph .sub,.ph .sub.sm,.ct-copy p,.ct-copy .big{font-family:var(--display);font-size:clamp(16.5px,1.3vw,19px);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--muted);max-width:58ch;margin:0}
.ct-copy p.hl{padding-left:20px}
.ph .eyebrow,.ct-copy .eyebrow{font-size:12px;letter-spacing:.16em}
/* brand illustrations: light frames */
.frame{background:linear-gradient(135deg,#F6F8FF,#F1ECFC)}
.frame::after{box-shadow:inset 0 0 0 1px rgba(67,97,238,.12)}
.bn .bn-img{background:#F3F5FD}
.bn .bn-img span{background:rgba(255,255,255,.85);color:var(--electric-sapphire);border:1px solid rgba(67,97,238,.14)}

/* contact thank-you page (page-contact-us-thank-you.php) */
.ty{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--header-h) + clamp(40px,6vw,88px)) 0 clamp(56px,7vw,110px);text-align:center}
.ty-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);z-index:-1;color:rgba(76,201,240,.13);-webkit-mask-image:radial-gradient(ellipse 42% 58% at 50% 50%,rgba(0,0,0,.18),#000 85%);mask-image:radial-gradient(ellipse 42% 58% at 50% 50%,rgba(0,0,0,.18),#000 85%)}
.ty-copy{display:grid;justify-items:center;gap:clamp(18px,2vw,26px)}
.ty-icon-wrap{position:relative}
.ty-icon-wrap::before{content:"";position:absolute;inset:-30%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(76,201,240,.22),transparent 65%)}
.ty-icon{display:block;width:clamp(84px,9vw,112px);height:auto}
.ty-icon g,.ty-icon circle{transform-box:fill-box;transform-origin:center}
.ty-ring,.ty-sparks{opacity:0}
.ty h1{font-size:clamp(32px,3.6vw,50px);font-weight:650;letter-spacing:-.03em;line-height:1.18;max-width:20ch}
.ty h1 .ln{display:block}
.ty h1 .w{display:inline-block;padding-bottom:.06em}
.ty-text{max-width:72ch;color:var(--ink-2);font-size:clamp(16px,1.2vw,18px);line-height:1.6}
.ty-text p{margin:0}
.ty-text p+p{margin-top:.8em}
.ty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}

/* thank-you motion: icon pops, letter slides out, badge springs in, tick draws, sparks burst, then a slow float */
.motion .ty-bg{animation:tyFade 1.2s ease both,tyDrift 22s ease-in-out 1.2s infinite alternate}
.motion .ty-icon-wrap{animation:tyPop .7s cubic-bezier(.34,1.56,.64,1) both,tyFloat 3.6s ease-in-out 1.8s infinite alternate}
.motion .ty-icon-wrap::before{animation:tyGlow 3.6s ease-in-out 1.2s infinite alternate}
.motion .ty-letter{animation:tyLetter .8s cubic-bezier(.22,1,.36,1) .25s both}
.motion .ty-badge{animation:tyBadge .6s cubic-bezier(.34,1.56,.64,1) .7s both}
.motion .ty-tick{stroke-dasharray:1;stroke-dashoffset:1;animation:tyTick .45s ease-out 1.05s forwards}
.motion .ty-ring{animation:tyRing 2.4s ease-out 1.1s infinite}
.motion .ty-sparks circle{animation:tySpark .9s cubic-bezier(.22,1,.36,1) 1.05s both}
.motion .ty-sparks{opacity:1}
.motion .ty h1 .w{opacity:0;transform:translateY(.45em);filter:blur(6px);animation:wIn .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--k) * 60ms + 350ms)}
.motion .ty-text{opacity:0;transform:translateY(14px);animation:fadeUp .8s cubic-bezier(.22,1,.36,1) 1s forwards}
.motion .ty-cta{opacity:0;transform:translateY(14px);animation:fadeUp .8s cubic-bezier(.22,1,.36,1) 1.15s forwards}
@keyframes tyFade{from{opacity:0}}
@keyframes tyDrift{to{transform:translate(-24px,-14px)}}
@keyframes tyPop{from{opacity:0;transform:scale(.6) translateY(12px)}}
@keyframes tyFloat{to{transform:translateY(-8px)}}
@keyframes tyGlow{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@keyframes tyLetter{from{transform:translateY(26px)}}
@keyframes tyBadge{from{opacity:0;transform:scale(0)}}
@keyframes tyTick{to{stroke-dashoffset:0}}
@keyframes tyRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes tySpark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}

/* ---------- 2026 design update (from the approved artifact build) ---------- */
/* ===== hand-authored pages: proof strip, service cards, tool cards, linked way cards ===== */
.proof{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.proof li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 6px 16px -12px rgba(23,40,94,.35)}
.proof svg{width:16px;height:16px;flex:none;stroke:var(--a1);stroke-width:2.2}
.svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.svc{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 24px 22px;border-radius:24px;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.svc-grid.n5 .svc:nth-child(n+4){grid-column:span 3}
.svc::after{content:"";position:absolute;inset:auto -25% -55% auto;width:240px;height:240px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 16%,transparent),transparent);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.svc:hover,.svc:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--a1) 35%,transparent)}
.svc:hover::after{transform:scale(1.25)}
.svc-top{display:flex;align-items:center;justify-content:space-between}
.svc-i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 22px -12px var(--a1)}
.svc-i svg{width:24px;height:24px;stroke:#fff}
.svc small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.svc h3{font-size:clamp(20px,1.7vw,23px);letter-spacing:-.02em;margin-top:6px}
.svc p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.58;flex:1}
.svc-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:650;font-size:14.5px;color:var(--a1);position:relative;z-index:1}
.svc-go span{transition:transform .3s}
.svc:hover .svc-go span,.way-link:hover .svc-go span{transform:translateX(4px)}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool{position:relative;padding:26px 24px;border-radius:24px;display:grid;gap:12px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.tool:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tool-mark{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(23,40,94,.4)}
.tool-mark svg{width:30px;height:30px}
.tool h3{font-size:21px;letter-spacing:-.02em;margin-top:4px}
.tool p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.58}
.tool-note{display:flex;align-items:center;gap:12px;margin:22px auto 0;padding:14px 18px;border-radius:16px;max-width:max-content;background:color-mix(in srgb,var(--a1) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--a1) 18%,transparent);font-weight:600;color:var(--ink);font-size:15.5px}
.tool-note svg{width:22px;height:22px;flex:none;stroke:var(--a1)}
.way-link{text-decoration:none;color:inherit}
.way-link .svc-go{margin-top:auto}
.way-link:focus-visible,.svc:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
@media (max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .svc,.svc-grid.n5 .svc:nth-child(n+4){grid-column:span 1} .svc-grid.n5 .svc:last-child{grid-column:span 2} .tools{grid-template-columns:1fr 1fr} .tools .tool:last-child{grid-column:span 2} }
@media (max-width:620px){ .svc-grid{grid-template-columns:1fr} .svc-grid.n5 .svc:last-child,.tools .tool:last-child{grid-column:auto} .tools{grid-template-columns:1fr} .tool-note{align-items:flex-start} }
.way-link{display:flex;flex-direction:column;gap:14px}
.way-link p{flex:1}

/* =====================================================================
   Section-specific animations (hand-authored pages). Everything lives under
   .motion, which site.js only sets when the visitor allows motion.
   Reveal = keyframes with fill "backwards" so hover transitions still work.
   ===================================================================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.fw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fw>span{display:inline-block}
.fx-stall{display:flex;align-items:center;gap:12px;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.st-track{position:relative;flex:1;max-width:280px;height:6px;border-radius:999px;background:var(--line);overflow:visible}
.st-track b{position:absolute;inset:0 auto 0 0;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3))}
.st-track i{position:absolute;top:50%;left:100%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 18%,transparent);z-index:1}
.st-b{color:var(--a1);font-weight:600}
.fx-scan{position:absolute;left:0;right:0;top:-30%;height:28%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a2) 22%,transparent) 60%,color-mix(in srgb,#fff 70%,transparent) 96%,transparent);mix-blend-mode:screen}
.svc-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;z-index:2;background:conic-gradient(from var(--ang),transparent 0 55%,var(--a2) 70%,var(--a1) 82%,var(--a3) 92%,transparent);-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);transition:opacity .35s}
.tool-mark{position:relative}
.tool-mark .orbit{position:absolute;inset:-1px;border-radius:inherit;border:2px solid color-mix(in srgb,var(--a1) 45%,transparent);opacity:0;pointer-events:none}
.tool-note{position:relative;overflow:hidden;isolation:isolate}
.tool-note .gate{position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:-1;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a2) 26%,transparent),transparent);opacity:0}
.ways{position:relative}
.ways-rail{position:absolute;left:24px;right:24px;top:-22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a2),var(--a1) 50%,var(--a3));transform-origin:left;opacity:.7}
.ways-rail::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--a3);box-shadow:0 0 0 4px color-mix(in srgb,var(--a3) 20%,transparent)}
.way .wi{position:relative}
.way .wi::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--a1);opacity:0;pointer-events:none}
.faq-head{position:relative}
.fx-qmark{position:absolute;right:6%;top:-10px;font-size:clamp(120px,14vw,210px);font-weight:800;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--a1) 22%,transparent);pointer-events:none;user-select:none;z-index:-1}
.fx-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.fx-aurora i{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(48px);opacity:.5}
.fx-aurora i:nth-child(1){left:-8%;top:-40%;background:color-mix(in srgb,var(--a2) 55%,transparent)}
.fx-aurora i:nth-child(2){left:38%;bottom:-55%;background:color-mix(in srgb,var(--a3) 40%,transparent)}
.fx-aurora i:nth-child(3){right:-10%;top:-30%;background:color-mix(in srgb,var(--a1) 35%,transparent)}
.fx-cta .btn-primary{position:relative;overflow:hidden;isolation:isolate}
.fx-cta .btn-primary::before,.fx-hero .btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0}
.fx-hero .btn-primary{position:relative;overflow:hidden;isolation:isolate}
@media (max-width:620px){ .fx-qmark{right:0;top:-24px;font-size:120px} .ways-rail{display:none} .fx-stall{font-size:10px} }

/* ---------- 1. Hero: staggered copy, proof chips pop with self-drawing ticks, sheen on the primary button ---------- */
.motion .fx-hero .proof li{animation:fxPop .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.85s + var(--k) * 110ms)}
.motion .fx-hero .proof svg path{stroke-dasharray:24;animation:fxDraw .5s ease-out backwards;animation-delay:calc(1.05s + var(--k) * 110ms)}
.motion .fx-hero .proof li:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a1) 40%,transparent)}
.fx-hero .proof li{transition:transform .25s,border-color .25s}
.motion .fx-hero .btn-primary::before,.motion .fx-cta .ctab-in.in .btn-primary::before{animation:fxSheen 5.5s 2s ease-in-out infinite}

/* ---------- 2. Problem: words rise out of masks, illustration swings in on a 3D hinge,
               a scanner sweeps the legacy screen, and the pipeline dot stalls before breaking through ---------- */
.motion .fx-problem .fw>span{transform:translateY(110%)}
.motion .fx-problem .prob-copy.in .fw>span{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k) * 60ms)}
.motion .fx-problem .prob-copy[data-rise]{opacity:1;transform:none}
.motion .fx-problem .prob-copy .plain{opacity:0;transform:translateY(12px);transition:opacity .7s .55s,transform .7s .55s cubic-bezier(.22,1,.36,1)}
.motion .fx-problem .prob-copy.in .plain{opacity:1;transform:none}
.motion .fx-problem .fx-stall{opacity:0;transition:opacity .6s .9s}
.motion .fx-problem .prob-copy.in .fx-stall{opacity:1}
.fx-problem .st-track b{transform-origin:left}
.motion .fx-problem .prob-copy.in .st-track b{animation:fxBar 7s 1s cubic-bezier(.4,0,.2,1) infinite}
.motion .fx-problem .prob-copy.in .st-track i{animation:fxDot 7s 1s cubic-bezier(.4,0,.2,1) infinite}
.motion .fx-problem .prob-copy.in .st-b{animation:fxLand 7s 1s infinite}
.motion .fx-problem .prob-media[data-rise]{opacity:1;transform:none;perspective:1400px}
.motion .fx-problem .prob-media .frame{opacity:0}
.motion .fx-problem .prob-media.in .frame{opacity:1;animation:fxHinge 1.2s .15s cubic-bezier(.22,1,.36,1) backwards;transform-origin:right center}
.motion .fx-problem .prob-media.in .fx-scan{animation:fxScan 4.5s 1.4s ease-in-out infinite}

/* ---------- 3. Services: cards are dealt in on a fan, icons spin into place, a light ring circles the hovered card ---------- */
.motion .fx-services .svc[data-rise]{opacity:1;transform:none;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.motion .fx-services .svc[data-rise]:not(.in){opacity:0}
.motion .fx-services .svc.in{animation:fxDeal .95s cubic-bezier(.22,1.12,.36,1) backwards;animation-delay:calc(var(--d) * 120ms)}
.motion .fx-services .svc.in .svc-i{animation:fxSpinIn .8s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--d) * 120ms + .35s)}
.motion .fx-services .svc.in .svc-go{animation:fxSlideR .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--d) * 120ms + .6s)}
.motion .fx-services .svc.in:hover,.motion .fx-services .svc.in:focus-visible{transform:translateY(-6px)}
.fx-services .svc:hover .svc-ring,.fx-services .svc:focus-visible .svc-ring{opacity:1}
.motion .fx-services .svc:hover .svc-ring{animation:fxSpin 2.6s linear infinite}
.motion .fx-services .svc:hover .svc-i{animation:fxWobble .7s ease}

/* ---------- 4. How we build: cards flip up like code panels, logo orbits pulse, the quality-gate note scans and seals ---------- */
.motion .fx-tools .tools{perspective:1100px}
.motion .fx-tools .tool[data-rise]{opacity:1;transform:none;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.motion .fx-tools .tool[data-rise]:not(.in){opacity:0}
.motion .fx-tools .tool.in{animation:fxFlip 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--d) * 160ms);transform-origin:50% 100%}
.motion .fx-tools .tool.in .orbit{animation:fxOrbit 1.4s ease-out backwards;animation-delay:calc(var(--d) * 160ms + .6s)}
.motion .fx-tools .tool.in .tool-mark svg{animation:fxPop .6s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--d) * 160ms + .45s)}
.motion .fx-tools .tool.in:hover{transform:translateY(-6px)}
.motion .fx-tools .tool:hover .orbit{animation:fxOrbit 1.1s ease-out infinite}
.fx-tools .tool-mark svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.fx-tools .tool:hover .tool-mark svg{transform:rotate(-10deg) scale(1.12)}
.motion .fx-tools .tool-note[data-rise]{transform:scale(.96)}
.motion .fx-tools .tool-note.in{transform:none;transition:opacity .6s .5s,transform .7s .5s cubic-bezier(.34,1.56,.64,1)}
.motion .fx-tools .tool-note svg path{stroke-dasharray:60;stroke-dashoffset:60}
.motion .fx-tools .tool-note.in svg path{stroke-dashoffset:0;transition:stroke-dashoffset 1s .9s ease-out}
.motion .fx-tools .tool-note.in .gate{animation:fxGate 6s 1.4s ease-in-out infinite}

/* ---------- 5. Engagement models: a rail draws across, then cards fall in like dominoes and their icons ping in turn ---------- */
.motion .fx-ways .ways[data-rise]{opacity:1;transform:none}
.motion .fx-ways .ways-rail{transform:scaleX(0)}
.motion .fx-ways .ways.in .ways-rail{transform:scaleX(1);transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.motion .fx-ways{perspective:1300px}
.motion .fx-ways .way[data-rise]{opacity:1;transform:none;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.motion .fx-ways .way[data-rise]:not(.in){opacity:0}
.motion .fx-ways .way.in{animation:fxDomino .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.25s + var(--d) * 260ms);transform-origin:0 50%}
.motion .fx-ways .way.in .wi::after{animation:fxPing 1.2s ease-out backwards;animation-delay:calc(.75s + var(--d) * 260ms)}
.motion .fx-ways .way.in:hover{transform:translateY(-6px)}
.fx-ways .way .wi svg{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.fx-ways .way:hover .wi svg{transform:rotate(-12deg) scale(1.1)}

/* ---------- 6. FAQ: heading rises from masks, a giant outlined "?" floats, questions slide in with underlines that draw ---------- */
.motion .fx-faq .faq-head[data-rise]{opacity:1;transform:none}
.motion .fx-faq .fw>span{transform:translateY(110%)}
.motion .fx-faq .faq-head.in .fw>span{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k) * 90ms)}
.motion .fx-faq .faq-head.in .fx-qmark{animation:fxQ 1.2s .3s cubic-bezier(.22,1,.36,1) backwards,fxFloat 6s 1.5s ease-in-out infinite}
.fx-faq details{position:relative}
.motion .fx-faq details[data-rise]{opacity:1;transform:none}
.motion .fx-faq details[data-rise]:not(.in){opacity:0}
.motion .fx-faq details.in{animation:fxFromR .75s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--d) * 110ms)}
.fx-faq details::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--a2),var(--a1),var(--a3));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fx-faq details[open]::after,.fx-faq details:hover::after{transform:scaleX(1)}
.fx-faq summary{transition:color .25s,padding-left .3s cubic-bezier(.22,1,.36,1)}
.fx-faq summary:hover{padding-left:8px}
.motion .fx-faq details[open] p{animation:fxOpen .45s cubic-bezier(.22,1,.36,1)}

/* ---------- 7. CTA: the band irises open from the centre, aurora light drifts behind, heading rises, button sheens ---------- */
.motion .fx-cta .ctab-in[data-rise]{opacity:1;transform:none;clip-path:inset(0 50% 0 50% round 32px)}
.motion .fx-cta .ctab-in.in{clip-path:inset(0 0 0 0 round 32px);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.motion .fx-cta .fw>span{transform:translateY(110%)}
.motion .fx-cta .ctab-in.in .fw>span{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(.5s + var(--k) * 70ms)}
.motion .fx-cta .ctab-in p,.motion .fx-cta .ctab-in .btn{opacity:0;transform:translateY(14px)}
.motion .fx-cta .ctab-in.in p{opacity:1;transform:none;transition:opacity .7s 1s,transform .7s 1s cubic-bezier(.22,1,.36,1)}
.motion .fx-cta .ctab-in.in .btn{opacity:1;transform:none;transition:opacity .7s 1.15s,transform .7s 1.15s cubic-bezier(.34,1.56,.64,1)}
.motion .fx-cta .ctab-in.in .fx-aurora i:nth-child(1){animation:fxDrift1 14s ease-in-out infinite alternate}
.motion .fx-cta .ctab-in.in .fx-aurora i:nth-child(2){animation:fxDrift2 17s ease-in-out infinite alternate}
.motion .fx-cta .ctab-in.in .fx-aurora i:nth-child(3){animation:fxDrift3 12s ease-in-out infinite alternate}

/* ---------- section heads inside animated sections: the eyebrow rule draws out ---------- */
.motion [class*="fx-"] .sec-head .eyebrow::before{width:0;transition:width .8s .25s cubic-bezier(.22,1,.36,1)}
.motion [class*="fx-"] .sec-head.in .eyebrow::before{width:30px}
/* pause only decorative loops off-screen; never content reveals (a paused reveal would stay invisible) */
.motion .offscreen :is(.fx-scan,.fx-aurora i,.gate,.st-track b,.st-track i,.st-b,.fx-qmark,.wi-step:last-child,.todo){animation-play-state:paused}

@keyframes fxUp{from{opacity:0;transform:translateY(18px)}}
@keyframes fxPop{from{opacity:0;transform:translateY(10px) scale(.85)}}
@keyframes fxDraw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes fxSheen{0%,72%{left:-60%;opacity:0}74%{opacity:1}92%,100%{left:130%;opacity:0}}
@keyframes fxHinge{from{opacity:0;transform:rotateY(-24deg) rotateX(6deg) translateX(40px) scale(.94)}}
@keyframes fxScan{0%{top:-30%;opacity:0}15%{opacity:1}70%{top:105%;opacity:.9}71%,100%{top:105%;opacity:0}}
@keyframes fxBar{0%{transform:scaleX(0)}22%{transform:scaleX(.58)}48%{transform:scaleX(.6)}52%{transform:scaleX(.6)}72%,92%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes fxDot{0%{left:0}22%{left:58%}28%{left:60%;transform:translateX(-2px)}31%{transform:translateX(2px)}34%{transform:translateX(-2px)}37%{transform:none}48%,52%{left:60%;box-shadow:0 0 0 4px color-mix(in srgb,#E11D48 22%,transparent);border-color:#E11D48}72%,92%{left:100%;border-color:var(--a1);box-shadow:0 0 0 8px color-mix(in srgb,var(--a1) 20%,transparent)}100%{left:100%;opacity:0}}
@keyframes fxLand{0%,68%{color:var(--dim)}74%,92%{color:var(--a1)}100%{color:var(--dim)}}
@keyframes fxDeal{from{opacity:0;transform:translateY(54px) rotate(var(--r,0deg)) scale(.92)}}
@keyframes fxSpinIn{from{opacity:0;transform:rotate(-140deg) scale(.3)}}
@keyframes fxSlideR{from{opacity:0;transform:translateX(-14px)}}
@keyframes fxSpin{to{--ang:360deg}}
@keyframes fxWobble{25%{transform:rotate(-10deg) scale(1.08)}55%{transform:rotate(7deg) scale(1.08)}80%{transform:rotate(-3deg)}}
@keyframes fxFlip{from{opacity:0;transform:rotateX(-78deg) translateY(30px)}}
@keyframes fxOrbit{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.75)}}
@keyframes fxGate{0%{left:-40%;opacity:0}8%{opacity:1}40%{left:110%;opacity:0}100%{left:110%;opacity:0}}
@keyframes fxDomino{from{opacity:0;transform:rotateY(-55deg) translateX(-30px)}}
@keyframes fxPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes fxQ{from{opacity:0;transform:translateY(40px) rotate(-18deg) scale(.7)}}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes fxFromR{from{opacity:0;transform:translateX(46px)}}
@keyframes fxOpen{from{opacity:0;transform:translateY(-8px)}}
@keyframes fxDrift1{to{transform:translate(30%,25%) scale(1.2)}}
@keyframes fxDrift2{to{transform:translate(-25%,-20%) scale(.85)}}
@keyframes fxDrift3{to{transform:translate(-30%,30%) scale(1.15)}}

/* ===== new blocks: pain cards, definition (AEO), proof, industries, CTA trust ===== */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,48px)}
.pain{position:relative;padding:24px 24px 22px;border-radius:22px;display:grid;gap:10px;align-content:start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.pain::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#F72585,color-mix(in srgb,#F72585 20%,transparent))}
.pain-i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,#F72585 9%,transparent)}
.pain-i svg{width:22px;height:22px;stroke:#D61F74}
.pain h3{font-size:19.5px;letter-spacing:-.015em;margin-top:4px}
.pain p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.whatis{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.whatis-copy{display:grid;gap:18px}
.whatis-copy h2{font-size:clamp(30px,3.8vw,50px)}
.answer{margin:0;font-size:clamp(17px,1.35vw,19.5px);line-height:1.7;color:var(--muted)}
.hlm{color:var(--ink);font-weight:600;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--a2) 26%,transparent) 58%) no-repeat;background-size:100% 100%;padding:0 2px}
.wi-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wi-step{position:relative;display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.wi-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.wi-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 22px -12px var(--a1)}
.wi-ic svg{width:23px;height:23px;stroke:#fff}
.wi-step b{font-size:17.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.wi-arrow{height:34px;display:grid;justify-items:start;padding-left:58px}
.wi-arrow i{position:relative;width:2px;height:100%;background:linear-gradient(var(--a2),var(--a3));transform-origin:top}
.wi-arrow i::after{content:"";position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid var(--a3);border-bottom:2px solid var(--a3);transform:translateX(-50%) rotate(45deg)}
.proof-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:stretch}
.pf-case{position:relative;padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pf-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--a1) 8%,transparent);margin-bottom:12px}
.pf-case dl{margin:0;display:grid}
.pf-row{position:relative;display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.pf-row dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.pf-row dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink);font-weight:550}
.todo{color:#9A5B00!important;background:repeating-linear-gradient(-45deg,#FFF8E6,#FFF8E6 8px,#FFF3D1 8px,#FFF3D1 16px);border:1px dashed #E6B45A;border-radius:10px;padding:6px 10px;font-weight:500!important;font-size:14.5px!important}
.pf-quote{position:relative;margin:0;padding:30px 28px;border-radius:24px;display:grid;align-content:center;gap:18px;overflow:hidden;color:#fff;background:linear-gradient(140deg,#0B1226,#1B1F5E 60%,#3A0F6E)}
.pf-qm{position:absolute;right:18px;top:-30px;font-size:180px;line-height:1;font-weight:800;color:rgba(255,255,255,.08)}
.pf-quote blockquote{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;font-weight:600;letter-spacing:-.015em}
.pf-quote figcaption{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:#AEB6D4}
.pf-quote figcaption b{color:#fff}
.pf-quote .todo{display:inline-block}
.pf-link{margin:20px 0 0}
.pf-link a{font-weight:650;color:var(--a1);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.pf-link a span{transition:transform .3s}.pf-link a:hover span{transform:translateX(4px)}
.inds .sec-head{max-width:760px;margin-inline:auto}
.ind-chips{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ind-chips a{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:650;font-size:15.5px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.ind-chips a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ind-chips a:hover,.ind-chips a:focus-visible{color:#fff;border-color:transparent;transform:translateY(-3px)}
.ind-chips a:hover::before,.ind-chips a:focus-visible::before{transform:none}
.ind-chips .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 9%,transparent);transition:background .35s}
.ind-chips .ic svg{width:18px;height:18px;stroke:var(--a1);transition:stroke .35s}
.ind-chips a:hover .ic{background:rgba(255,255,255,.2)}.ind-chips a:hover .ic svg{stroke:#fff}
.ind-chips .go{opacity:.55;transition:transform .3s,opacity .3s}.ind-chips a:hover .go{opacity:1;transform:translateX(3px)}
.cta-trust{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:20px 0 0;border-top:1px solid rgba(67,97,238,.14);display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cta-trust .tr-txt{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:14.5px;color:var(--ink);margin-right:6px}
.cta-trust .tr-txt svg{width:18px;height:18px;stroke:var(--a1);stroke-width:2.2}
.cta-trust .tr-b img{height:50px;width:auto;display:block;transition:transform .3s}
.cta-trust .tr-b img[alt^="Microsoft"]{height:40px}
.cta-trust .tr-b img:hover{transform:translateY(-2px)}
/* Narrower than the full-width band, don't strand a badge beside the trust text: text row first, badges on the next row */
@media (max-width:1279px){ .cta-trust:has(.tr-txt)::after{content:"";order:1;flex:0 0 100%;height:0} .cta-trust .tr-b{order:2} }
@media (max-width:1000px){ .pains{grid-template-columns:1fr} .whatis,.proof-grid{grid-template-columns:1fr} }
@media (max-width:620px){ .pf-row{grid-template-columns:1fr;gap:6px} .wi-step{grid-template-columns:auto 1fr} .wi-n{display:none} .wi-arrow{padding-left:42px} .cta-trust .tr-b img{height:42px} .cta-trust .tr-b img[alt^="Microsoft"]{height:34px} .ind-chips a{font-size:14.5px} }

/* ---- 2b. Pain cards: drop in from above with a bounce, warning bar drains, icon gives an alert shake ---- */
.motion .fx-problem .pain[data-rise]{opacity:1;transform:none}
.motion .fx-problem .pain[data-rise]:not(.in){opacity:0}
.motion .fx-problem .pain.in{animation:fxDrop .85s cubic-bezier(.34,1.45,.64,1) backwards;animation-delay:calc(var(--d) * 150ms)}
.motion .fx-problem .pain.in::before{animation:fxDrain 1.1s cubic-bezier(.65,0,.35,1) backwards;animation-delay:calc(var(--d) * 150ms + .4s);transform-origin:left}
.motion .fx-problem .pain.in .pain-i{animation:fxAlert .7s ease-in-out backwards;animation-delay:calc(var(--d) * 150ms + .75s)}
.motion .fx-problem .pain:hover .pain-i{animation:fxAlert .6s ease-in-out}
/* ---- 3. Definition: marker highlights the answer sentence, steps light up along a drawing connector ---- */
.motion .fx-whatis .whatis-copy[data-rise]{opacity:1;transform:none}
.motion .fx-whatis .fw>span{transform:translateY(110%)}
.motion .fx-whatis .whatis-copy.in .fw>span{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k) * 70ms)}
.motion .fx-whatis .answer{opacity:0;transition:opacity .7s .4s}
.motion .fx-whatis .whatis-copy.in .answer{opacity:1}
.motion .fx-whatis .hlm{background-size:0% 100%;transition:background-size 1.2s .9s cubic-bezier(.65,0,.35,1)}
.motion .fx-whatis .whatis-copy.in .hlm{background-size:100% 100%}
.motion .fx-whatis .wi-steps[data-rise]{opacity:1;transform:none}
.motion .fx-whatis .wi-step{opacity:0;transform:translateX(30px) scale(.97)}
.motion .fx-whatis .wi-steps.in .wi-step{opacity:1;transform:none;transition:opacity .6s,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(.2s + var(--k) * .55s)}
.motion .fx-whatis .wi-arrow i{transform:scaleY(0)}
.motion .fx-whatis .wi-steps.in .wi-arrow i{transform:none;transition:transform .45s ease-out;transition-delay:calc(.55s + var(--k) * .55s)}
.motion .fx-whatis .wi-steps.in .wi-step .wi-ic{animation:fxPop .6s cubic-bezier(.34,1.56,.64,1) .35s backwards,wiIc 6s ease-in-out infinite;animation-delay:calc(.35s + var(--k) * .55s),calc(2.2s + var(--k) * 2s)}

/* ---- 6. Proof: case rows fill in one by one with a drawing rule, the quote mark swings in ---- */
.motion .fx-proof .pf-case[data-rise]{transform:translateX(-30px)}
.motion .fx-proof .pf-case.in{transform:none;transition:opacity .7s,transform .8s cubic-bezier(.22,1,.36,1)}
.motion .fx-proof .pf-row{opacity:0;transform:translateY(10px)}
.motion .fx-proof .pf-case.in .pf-row{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(.35s + var(--k) * .18s)}
.fx-proof .pf-row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--a1);transform:scaleX(0);transform-origin:left}
.motion .fx-proof .pf-case.in .pf-row::before{animation:fxRule 1s ease-out backwards;animation-delay:calc(.35s + var(--k) * .18s)}
.motion .fx-proof .pf-quote[data-rise]{transform:translateX(30px)}
.motion .fx-proof .pf-quote.in{transform:none;transition:opacity .7s .15s,transform .8s .15s cubic-bezier(.22,1,.36,1)}
.motion .fx-proof .pf-quote.in .pf-qm{animation:fxQ 1s .5s cubic-bezier(.22,1,.36,1) backwards}
.motion .fx-proof .todo{background-size:200% 200%;animation:fxTodo 3s linear infinite}
/* ---- 8. Industries: chips fly in from scattered positions and converge ---- */
.motion .fx-inds .ind-chips[data-rise]{opacity:1;transform:none}
.motion .fx-inds .ind-chips li{opacity:0;transform:translate(var(--x),var(--y)) rotate(-8deg) scale(.8)}
.motion .fx-inds .ind-chips.in li{opacity:1;transform:none;transition:opacity .6s,transform 1s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--k) * 90ms)}
/* ---- 10b. CTA trust strip: badges appear one after another once the band opens ---- */
.motion .fx-cta .cta-trust{opacity:0}
.motion .fx-cta .ctab-in.in .cta-trust{opacity:1;transition:opacity .6s 1.3s}
.motion .fx-cta .tr-b{opacity:0;transform:translateY(8px)}
.motion .fx-cta .ctab-in.in .tr-b{opacity:1;transform:none;transition:opacity .5s,transform .5s;transition-delay:calc(1.45s + var(--k) * 80ms)}

@keyframes fxDrop{from{opacity:0;transform:translateY(-40px) rotate(-2deg)}}
@keyframes fxDrain{0%{transform:scaleX(1)}55%{transform:scaleX(.15)}100%{transform:scaleX(1)}}
@keyframes fxAlert{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes fxGlow{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 14%,transparent),var(--shadow)}}
@keyframes fxRule{0%{transform:scaleX(0)}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes fxTodo{to{background-position:32px 0}}
/* content reveals must always finish, even if a section is (wrongly) reported off-screen, e.g. inside an embedded preview */
.offscreen :is(.ph-copy > *,.fx-hero .sub,.fx-hero .ph-cta,.fx-hero .proof li,.fx-hero .proof svg path,[data-rise],[data-rise] *){animation-play-state:running!important}

/* =====================================================================
   AI-Driven Digitalisation hero: live "AI-assisted engineering" editor.
   One 9s loop: lines type in top-to-bottom (active line glows cyan, finished lines
   settle into blue-purple), a scanning beam tracks the active line, the build bar
   fills in sync, checks pass, a completion tick appears, then everything resets.
   Scoped to .fx-hero so other heroes that share the editor are unchanged.
   ===================================================================== */
.ed-done{margin-left:auto;width:22px;height:22px;border-radius:50%;display:none;place-items:center;background:linear-gradient(135deg,var(--sky-aqua),var(--electric-sapphire) 55%,var(--indigo-bloom));box-shadow:0 0 0 4px rgba(76,201,240,.16),0 6px 14px -6px rgba(67,97,238,.7)}
.ed-done svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pts{display:none}
.fx-hero .ed-done{display:grid}
.fx-hero .ed{box-shadow:0 30px 60px -28px rgba(23,40,94,.35),0 0 0 1px rgba(255,255,255,.6) inset}
.fx-hero .cl{position:relative;width:var(--w1);margin-left:var(--in);background:#D3D9EA;transform-origin:left center;overflow:visible}
.fx-hero .cl::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#7FD3F2,#6F86F2 55%,#A57BE0);opacity:0}
.fx-hero .beam{left:-30px;right:-14px;height:22px;background:linear-gradient(180deg,transparent,rgba(76,201,240,.13));border:0}
.fx-hero .beam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,#4CC9F0 18%,#4361EE 55%,#7209B7 85%,transparent);box-shadow:0 0 10px rgba(76,201,240,.65),0 0 2px rgba(67,97,238,.8)}
/* labels sit above / below the editor so they never cover it or each other */
.fx-hero .hv-code .c1{left:6%;right:auto;top:calc(50% - 238px);bottom:auto}
.fx-hero .hv-code .c2{right:6%;left:auto;top:calc(50% - 232px);bottom:auto}
.fx-hero .hv-code .c3{left:16%;right:auto;top:calc(50% + 200px);bottom:auto}
.fx-hero .float-chip{transition:box-shadow .4s}
.fx-hero .pts{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
.fx-hero .pts i{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 30%,#4CC9F0 45%,rgba(76,201,240,0) 72%);box-shadow:0 0 10px 2px rgba(76,201,240,.55)}
.fx-hero .pts .p1{left:18%;top:calc(50% - 200px);--dx:70px;--dy:120px}
.fx-hero .pts .p2{left:24%;top:calc(50% - 200px);--dx:120px;--dy:170px}
.fx-hero .pts .p3{right:20%;top:calc(50% - 194px);--dx:-90px;--dy:130px}
.fx-hero .pts .p4{right:14%;top:calc(50% - 194px);--dx:-50px;--dy:200px}
.fx-hero .pts .p5{left:26%;top:calc(50% + 204px);--dx:60px;--dy:-140px}
.fx-hero .pts .p6{left:32%;top:calc(50% + 204px);--dx:130px;--dy:-90px}
.fx-hero .pts .p3,.fx-hero .pts .p4{background:radial-gradient(circle,#fff 0 30%,#B07FDC 45%,rgba(176,127,220,0) 72%);box-shadow:0 0 10px 2px rgba(114,9,183,.4)}

@media (prefers-reduced-motion:no-preference){
.motion .fx-hero .cl:nth-child(1){animation:fxL0 9s linear infinite}
.motion .fx-hero .cl:nth-child(1)::after{animation:fxA0 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(1){animation:fxG0 9s linear infinite}
.motion .fx-hero .cl:nth-child(2){animation:fxL1 9s linear infinite}
.motion .fx-hero .cl:nth-child(2)::after{animation:fxA1 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(2){animation:fxG1 9s linear infinite}
.motion .fx-hero .cl:nth-child(3){animation:fxL2 9s linear infinite}
.motion .fx-hero .cl:nth-child(3)::after{animation:fxA2 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(3){animation:fxG2 9s linear infinite}
.motion .fx-hero .cl:nth-child(4){animation:fxL3 9s linear infinite}
.motion .fx-hero .cl:nth-child(4)::after{animation:fxA3 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(4){animation:fxG3 9s linear infinite}
.motion .fx-hero .cl:nth-child(5){animation:fxL4 9s linear infinite}
.motion .fx-hero .cl:nth-child(5)::after{animation:fxA4 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(5){animation:fxG4 9s linear infinite}
.motion .fx-hero .cl:nth-child(6){animation:fxL5 9s linear infinite}
.motion .fx-hero .cl:nth-child(6)::after{animation:fxA5 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(6){animation:fxG5 9s linear infinite}
.motion .fx-hero .cl:nth-child(7){animation:fxL6 9s linear infinite}
.motion .fx-hero .cl:nth-child(7)::after{animation:fxA6 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(7){animation:fxG6 9s linear infinite}
.motion .fx-hero .cl:nth-child(8){animation:fxL7 9s linear infinite}
.motion .fx-hero .cl:nth-child(8)::after{animation:fxA7 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(8){animation:fxG7 9s linear infinite}
.motion .fx-hero .cl:nth-child(9){animation:fxL8 9s linear infinite}
.motion .fx-hero .cl:nth-child(9)::after{animation:fxA8 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(9){animation:fxG8 9s linear infinite}
.motion .fx-hero .cl:nth-child(10){animation:fxL9 9s linear infinite}
.motion .fx-hero .cl:nth-child(10)::after{animation:fxA9 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(10){animation:fxG9 9s linear infinite}
.motion .fx-hero .cl:nth-child(11){animation:fxL10 9s linear infinite}
.motion .fx-hero .cl:nth-child(11)::after{animation:fxA10 9s linear infinite}
.motion .fx-hero .ed-gut b:nth-child(11){animation:fxG10 9s linear infinite}
}
@keyframes fxL0{0%,5.00%{opacity:0;transform:scaleX(0);box-shadow:none}5.30%{opacity:1}7.60%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}10.20%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}12.20%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA0{0%,10.20%{opacity:0}13.20%,100%{opacity:.82}}
@keyframes fxG0{0%,5.00%{color:var(--dim);opacity:.55}5.30%,10.20%{color:#1FA7D8;opacity:1}11.70%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL1{0%,10.20%{opacity:0;transform:scaleX(0);box-shadow:none}10.50%{opacity:1}12.80%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}15.40%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}17.40%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA1{0%,15.40%{opacity:0}18.40%,100%{opacity:.82}}
@keyframes fxG1{0%,10.20%{color:var(--dim);opacity:.55}10.50%,15.40%{color:#1FA7D8;opacity:1}16.90%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL2{0%,15.40%{opacity:0;transform:scaleX(0);box-shadow:none}15.70%{opacity:1}18.00%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}20.60%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}22.60%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA2{0%,20.60%{opacity:0}23.60%,100%{opacity:.82}}
@keyframes fxG2{0%,15.40%{color:var(--dim);opacity:.55}15.70%,20.60%{color:#1FA7D8;opacity:1}22.10%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL3{0%,20.60%{opacity:0;transform:scaleX(0);box-shadow:none}20.90%{opacity:1}23.20%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}25.80%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}27.80%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA3{0%,25.80%{opacity:0}28.80%,100%{opacity:.82}}
@keyframes fxG3{0%,20.60%{color:var(--dim);opacity:.55}20.90%,25.80%{color:#1FA7D8;opacity:1}27.30%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL4{0%,25.80%{opacity:0;transform:scaleX(0);box-shadow:none}26.10%{opacity:1}28.40%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}31.00%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}33.00%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA4{0%,31.00%{opacity:0}34.00%,100%{opacity:.82}}
@keyframes fxG4{0%,25.80%{color:var(--dim);opacity:.55}26.10%,31.00%{color:#1FA7D8;opacity:1}32.50%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL5{0%,31.00%{opacity:0;transform:scaleX(0);box-shadow:none}31.30%{opacity:1}33.60%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}36.20%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}38.20%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA5{0%,36.20%{opacity:0}39.20%,100%{opacity:.82}}
@keyframes fxG5{0%,31.00%{color:var(--dim);opacity:.55}31.30%,36.20%{color:#1FA7D8;opacity:1}37.70%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL6{0%,36.20%{opacity:0;transform:scaleX(0);box-shadow:none}36.50%{opacity:1}38.80%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}41.40%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}43.40%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA6{0%,41.40%{opacity:0}44.40%,100%{opacity:.82}}
@keyframes fxG6{0%,36.20%{color:var(--dim);opacity:.55}36.50%,41.40%{color:#1FA7D8;opacity:1}42.90%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL7{0%,41.40%{opacity:0;transform:scaleX(0);box-shadow:none}41.70%{opacity:1}44.00%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}46.60%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}48.60%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA7{0%,46.60%{opacity:0}49.60%,100%{opacity:.82}}
@keyframes fxG7{0%,41.40%{color:var(--dim);opacity:.55}41.70%,46.60%{color:#1FA7D8;opacity:1}48.10%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL8{0%,46.60%{opacity:0;transform:scaleX(0);box-shadow:none}46.90%{opacity:1}49.20%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}51.80%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}53.80%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA8{0%,51.80%{opacity:0}54.80%,100%{opacity:.82}}
@keyframes fxG8{0%,46.60%{color:var(--dim);opacity:.55}46.90%,51.80%{color:#1FA7D8;opacity:1}53.30%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL9{0%,51.80%{opacity:0;transform:scaleX(0);box-shadow:none}52.10%{opacity:1}54.40%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}57.00%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}59.00%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA9{0%,57.00%{opacity:0}60.00%,100%{opacity:.82}}
@keyframes fxG9{0%,51.80%{color:var(--dim);opacity:.55}52.10%,57.00%{color:#1FA7D8;opacity:1}58.50%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@keyframes fxL10{0%,57.00%{opacity:0;transform:scaleX(0);box-shadow:none}57.30%{opacity:1}59.60%{transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}62.20%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 3px rgba(76,201,240,.16),0 0 14px rgba(76,201,240,.6)}64.20%{box-shadow:0 0 0 0 rgba(76,201,240,0),0 0 0 rgba(76,201,240,0)}88%{opacity:1;transform:scaleX(1);box-shadow:none}95%,100%{opacity:0;transform:scaleX(1);box-shadow:none}}
@keyframes fxA10{0%,62.20%{opacity:0}65.20%,100%{opacity:.82}}
@keyframes fxG10{0%,57.00%{color:var(--dim);opacity:.55}57.30%,62.20%{color:#1FA7D8;opacity:1}63.70%,88%{color:var(--a1);opacity:.75}95%,100%{color:var(--dim);opacity:.55}}
@media (prefers-reduced-motion:no-preference){
.motion .fx-hero .beam{animation:fxBeam 9s linear infinite}
.motion .fx-hero .ed-foot .bar i{animation:fxBuild 9s linear infinite}
.motion .fx-hero .ed-foot .ok i{animation:fxOk 9s linear infinite}
.motion .fx-hero .ed-foot .ok i:nth-child(2){animation-delay:.32s}.motion .fx-hero .ed-foot .ok i:nth-child(3){animation-delay:.64s}
.motion .fx-hero .ed-done{animation:fxDone 9s linear infinite}
.motion .fx-hero .ed-done path{stroke-dasharray:20;animation:fxTick 9s linear infinite}
.motion .fx-hero .hv-code .c1{animation:fxChip 6.2s ease-in-out infinite alternate}
.motion .fx-hero .hv-code .c2{animation:fxChip 7.6s ease-in-out -2.4s infinite alternate}
.motion .fx-hero .hv-code .c3{animation:fxChip 8.4s ease-in-out -4.8s infinite alternate}
.motion .fx-hero .pts i{animation:fxParticle 6s cubic-bezier(.45,0,.25,1) infinite}
.motion .fx-hero .pts .p2{animation-duration:7.4s;animation-delay:-2.1s}
.motion .fx-hero .pts .p3{animation-duration:6.6s;animation-delay:-3.9s}
.motion .fx-hero .pts .p4{animation-duration:8.2s;animation-delay:-1.2s}
.motion .fx-hero .pts .p5{animation-duration:7s;animation-delay:-5.2s}
.motion .fx-hero .pts .p6{animation-duration:8.8s;animation-delay:-.6s}
.motion .fx-hero::before{animation:fxAmbient 26s ease-in-out infinite alternate;will-change:transform}
}
@keyframes fxBeam{0%,6.00%{transform:translateY(-15px);opacity:0}7.60%{transform:translateY(-15px);opacity:1}59.60%{transform:translateY(205px);opacity:1}62.60%,100%{transform:translateY(212px);opacity:0}}
@keyframes fxBuild{0%,5.00%{transform:scaleX(.02);opacity:1}62.20%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}94%{transform:scaleX(1);opacity:0}95%,100%{transform:scaleX(.02);opacity:0}}
@keyframes fxOk{0%,63.20%{background:#E1E6F3;box-shadow:none}65.20%,88%{background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.15)}94%,100%{background:#E1E6F3;box-shadow:none}}
@keyframes fxDone{0%,67.20%{opacity:0;transform:scale(.4)}70.20%{opacity:1;transform:scale(1.12)}72.20%,87%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes fxTick{0%,68.20%{stroke-dashoffset:20}72.20%,100%{stroke-dashoffset:0}}
@keyframes fxChip{0%{transform:translateY(0);box-shadow:0 10px 24px -14px rgba(23,40,94,.28);opacity:.94}100%{transform:translateY(-8px);box-shadow:0 18px 30px -16px rgba(67,97,238,.38);opacity:1}}
@keyframes fxParticle{0%,40%{opacity:0;transform:translate(0,0) scale(.5)}46%{opacity:1;transform:translate(calc(var(--dx) * .08),calc(var(--dy) * .08)) scale(1)}78%{opacity:.9}86%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@keyframes fxAmbient{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.5%,1.8%,0) scale(1.05)}100%{transform:translate3d(2%,-1.5%,0) scale(1.03)}}
/* small screens: labels sit in a row under the editor (existing layout), particles off */
@media (max-width:600px){ .fx-hero .hv-code .c1,.fx-hero .hv-code .c2,.fx-hero .hv-code .c3{top:auto;left:auto;right:auto;bottom:auto} .fx-hero .pts{display:none} }
@media (max-width:600px){ .fx-hero .beam{left:-24px;right:-10px} }


/* =====================================================================
   AI-Driven Digitalisation hero: AI robot running a software-delivery workflow.
   One 8s loop: Task received (0-8%) > Analyze (8-24%) > Generate code (24-50%) >
   Validate (50-66%) > Deploy (66-82%) > Celebrate (82-92%) > soft reset (92-100%).
   Robot = visual anchor (left); checklist, editor and status card form one aligned column (right).
   Colours: cyan/blue = active work, purple = AI processing, green = success.
   Static styles (reduced motion) show a clear mid-workflow frame.
   ===================================================================== */
.fx-hero .ph-vis{container-type:inline-size;width:100%}
.offscreen.fx-hero *,.fx-hero.offscreen *::before,.fx-hero.offscreen *::after{animation-play-state:running!important}
.hv-robot{position:relative;width:100%;max-width:620px;aspect-ratio:1.05;font-size:clamp(9px,2.15cqw,13.4px);margin-inline:auto;--ok:#10B981;--okd:#059669;--ink2:#1E2537;--mut2:#5B6478}
.rb-glow{position:absolute;left:-8%;top:16%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.34),rgba(76,201,240,.12) 55%,transparent 76%);pointer-events:none}
.rt-lav{position:absolute;left:40%;top:6%;width:66%;height:86%;border-radius:50%;background:radial-gradient(closest-side,rgba(176,127,220,.22),rgba(114,9,183,.06) 60%,transparent 78%);pointer-events:none}
.rb-wrap{position:absolute;left:0;top:16%;width:44%;aspect-ratio:200/260;transform-origin:50% 90%}
.rb{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 22px rgba(23,40,94,.16))}
.rb .rb-eyes{filter:drop-shadow(0 0 3px rgba(94,224,255,.9))}
.rb .rb-head{transform-box:view-box;transform-origin:100px 112px}
.rb .rb-eyes,.rb .rb-blink,.rb .rb-happy{transform-box:fill-box;transform-origin:center}
.rb .rb-happy{opacity:0}
.rb .rb-ant-ok{opacity:0}
.rb .rb-armR{transform-box:view-box;transform-origin:145px 137px;transform:rotate(-54deg)}
.rb .rb-fore{transform-box:view-box;transform-origin:145px 170px;transform:rotate(-18deg)}
.rb .rb-armL{transform-box:view-box;transform-origin:55px 137px;transform:rotate(8deg)}
.rb .rb-body{transform-box:view-box;transform-origin:100px 200px}
/* cards: one aligned column, same radius, readable opaque glass */
.hv-robot .rt-card{position:absolute;left:47%;width:53%;border-radius:1.15em;padding:1em 1.1em;background:rgba(255,255,255,.9);border:1px solid rgba(67,97,238,.11);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32)}
.rt-board{top:0}
.rt-ed{top:37.5%}
.rt-stat{top:71%;height:8.4em}
.hv-robot .rt-card svg{position:static;inset:auto;overflow:visible}
.rt-h{display:flex;align-items:center;gap:.7em;margin-bottom:.7em;min-width:0}
.rt-tag{flex:none;display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.74em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#3F37C9;padding:.38em .65em;border-radius:999px;background:rgba(67,97,238,.09)}
.rt-tag i{width:.55em;height:.55em;border-radius:50%;background:#4CC9F0;box-shadow:0 0 0 .25em rgba(76,201,240,.22)}
.rt-tk{position:relative;flex:1;min-width:0;height:1.45em}
.rt-tk b{position:absolute;inset:0;font-weight:700;font-size:1.04em;letter-spacing:-.01em;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.rt-tk b.k0{opacity:1}
.rt-tasks{list-style:none;margin:0;padding:0;display:grid;gap:.25em}
.rt-tasks li{position:relative;display:flex;align-items:center;gap:.7em;padding:.5em .6em .6em;border-radius:.7em;font-size:1em;font-weight:600;color:var(--ink2);overflow:hidden}
.rt-tasks .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-tasks .pg{position:absolute;left:.6em;right:.6em;bottom:.22em;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.rt-tasks .pg i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#4CC9F0,#4361EE)}
.rt-tasks .t1 .pg i{background:linear-gradient(90deg,#4361EE,#7209B7)}
.st{position:relative;flex:none;width:1.45em;height:1.45em;border-radius:50%;border:2px solid #CBD3E6;display:grid;place-items:center;background:#fff}
.st .sp{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#4CC9F0;border-right-color:#4361EE;opacity:0}
.rt-tasks .t1 .sp{border-top-color:#7209B7;border-right-color:#4361EE}
.st svg{width:.95em;height:.95em;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
/* static frame (no motion): 1-2 done, 3 active, 4 pending */
.rt-tasks .t0 .st,.rt-tasks .t1 .st{background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);border-color:transparent}
.rt-tasks .t0 .st svg,.rt-tasks .t1 .st svg{opacity:1}
.rt-tasks .t0,.rt-tasks .t1{color:var(--mut2)}
.rt-tasks .t2{background:rgba(76,201,240,.12)}
.rt-tasks .t2 .sp{opacity:1}
.rt-tasks .t2 .pg i{transform:scaleX(.7)}
.rt-tasks .t3 .nm{color:#8A93A8}
.rt-et{display:flex;align-items:center;gap:.45em;margin-bottom:.85em}
.rt-et i{width:.6em;height:.6em;border-radius:50%}
.rt-et i:nth-child(1){background:#F72585;opacity:.6}.rt-et i:nth-child(2){background:#4CC9F0;opacity:.75}.rt-et i:nth-child(3){background:#7209B7;opacity:.55}
.rt-et span{font-size:.72em;font-weight:650;padding:.28em .6em;border-radius:999px;color:#4A5370;background:#EEF1FA;border:1px solid rgba(67,97,238,.08)}
.rt-et span:first-of-type{margin-left:auto}
.rt-lines{position:relative;display:grid;gap:.72em;padding-bottom:.2em}
.rt-lines i{display:block;height:.62em;border-radius:.31em;width:var(--w);margin-left:var(--in);background:linear-gradient(90deg,#7FD3F2,#6F86F2 55%,#A57BE0);opacity:.9;transform-origin:left center}
.rt-beam{position:absolute;left:-1.1em;right:-.6em;top:0;height:1.2em;background:linear-gradient(180deg,transparent,rgba(76,201,240,.16));opacity:0;pointer-events:none}
.rt-beam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,#4CC9F0 18%,#4361EE 55%,#7209B7 85%,transparent);box-shadow:0 0 8px rgba(76,201,240,.7)}
.rt-scan{position:absolute;left:-1.1em;right:-.6em;top:-.6em;height:2.6em;background:linear-gradient(180deg,transparent,rgba(16,185,129,.16) 55%,rgba(16,185,129,.28) 92%,transparent);border-bottom:1.5px solid rgba(16,185,129,.55);opacity:0;pointer-events:none}
.rs{position:absolute;inset:1em 1.1em}
.rs-d{opacity:0}
.rt-vh{display:flex;align-items:center;gap:.6em;margin-bottom:.75em}
.rt-vh .ttl{flex:1;font-weight:700;font-size:1.02em;letter-spacing:-.01em;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-ic{flex:none;width:1.75em;height:1.75em;border-radius:.55em;display:grid;place-items:center}
.rt-ic svg{width:1.05em;height:1.05em;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rt-ic.v{background:rgba(114,9,183,.1)}.rt-ic.v svg{stroke:#7209B7}
.rt-ic.d{background:rgba(67,97,238,.1)}.rt-ic.d svg{stroke:#4361EE}
.rt-ok{flex:none;width:1.65em;height:1.65em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);box-shadow:0 0 0 .3em rgba(16,185,129,.16)}
.rt-ok svg{width:1em;height:1em;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rs-d .rt-ok{opacity:0}
.rt-bar{display:block;height:.5em;border-radius:.25em;background:#E8ECF6;overflow:hidden}
.rt-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(1);background:linear-gradient(90deg,#4CC9F0,#4361EE 55%,#7209B7)}
.rs-d .rt-bar i{background:linear-gradient(90deg,#4361EE,#10B981);transform:scaleX(0)}
.rt-vs{position:relative;display:block;height:1.35em;margin-top:.55em;font-size:.86em}
.rt-vs b{position:absolute;inset:0;font-weight:550;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-v .rt-vs .a{opacity:0}.rs-v .rt-vs .b{color:var(--okd);font-weight:650}
.rs-d .rt-vs .b{opacity:0;color:var(--okd);font-weight:650}
/* sparkles sit on the active card only */
.spk{position:absolute;left:-.5em;top:-.5em;width:2.4em;height:2.4em;pointer-events:none;opacity:0}
.spk i{position:absolute;width:.32em;height:.32em;border-radius:50%;background:#fff;box-shadow:0 0 .45em .15em rgba(76,201,240,.85)}
.spk i:nth-child(1){left:.2em;top:.9em}.spk i:nth-child(2){left:1em;top:.1em}.spk i:nth-child(3){left:1.7em;top:.8em;box-shadow:0 0 .45em .15em rgba(176,127,220,.85)}.spk i:nth-child(4){left:.8em;top:1.7em}
@media (max-width:600px){ .hv-robot{aspect-ratio:.92;font-size:clamp(7.2px,2.3cqw,12px)} .rb-wrap{top:20%;width:43%} .rb-glow{top:18%} .hv-robot .rt-card{left:45%;width:55%;padding:.85em .9em} .rt-ed{top:38.5%} .rt-stat{top:72%} .rt-et span{display:none} .rs{inset:.85em .9em} }

@media (prefers-reduced-motion:no-preference){
.motion .rb .rb-body{animation:rbFloat 3.2s ease-in-out infinite alternate}
.motion .rb .rb-blink{animation:rbBlink 4.1s ease-in-out infinite}
.motion .rb .rb-jet{animation:rbJet 1.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.motion .rb .rb-core{animation:rbPulse 1.8s ease-in-out infinite alternate}
.motion .rb-glow{animation:rbGlow 6s ease-in-out infinite alternate}
.motion .rt-lav{animation:rbGlow 8s ease-in-out -3s infinite alternate}
.motion .spk i{animation:spkTw 1.3s ease-in-out infinite alternate}.motion .spk i:nth-child(2){animation-delay:-.4s}.motion .spk i:nth-child(3){animation-delay:-.8s}.motion .spk i:nth-child(4){animation-delay:-1.1s}
.motion .rt-tasks .sp{animation:none}
.motion .rb .rb-armR{animation:rbArm 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-fore{animation:rbFore 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-armL{animation:rbArmL 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-head{animation:rbHead 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-eyes{animation:rbEyes 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb-wrap{animation:rbLean 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-blink{animation:rbEyeOpen 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-happy{animation:rbHappy 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-ant-ok{animation:rbAntOk 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-board{animation:rtBoard 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-ed{animation:rtEd 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-stat{animation:rtStat 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-board .rt-tag{animation:rtTag 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-beam{animation:rtBeam 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-scan{animation:rtScan 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-v{animation:rsV 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-d{animation:rsD 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-v .rt-bar i{animation:rsVBar 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-v .rt-ok{animation:rsVOk 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-v .rt-vs .a{animation:rsVA 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-v .rt-vs .b{animation:rsVB 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-d .rt-bar i{animation:rsDBar 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-d .rt-ok{animation:rsDOk 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-d .rt-vs .a{animation:rsDA 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rs-d .rt-vs .b{animation:rsDB 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-board .spk{animation:spkB 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-ed .spk{animation:spkE 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-stat .spk{animation:spkS 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rb .rb-blink{animation:rbEyeOpen 8s cubic-bezier(.45,0,.2,1) infinite,rbBlink 4.1s ease-in-out infinite}
.motion .rt-tasks .t0{animation:rtRow0 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t0 .st{animation:rtSt0 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t0 .st svg{animation:rtCk0 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t0 .pg i{animation:rtPg0 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t0 .sp{animation:rtSp0 8s cubic-bezier(.45,0,.2,1) infinite,rtSpin .8s linear infinite}
.motion .rt-tasks .t1{animation:rtRow1 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t1 .st{animation:rtSt1 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t1 .st svg{animation:rtCk1 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t1 .pg i{animation:rtPg1 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t1 .sp{animation:rtSp1 8s cubic-bezier(.45,0,.2,1) infinite,rtSpin .8s linear infinite}
.motion .rt-tasks .t2{animation:rtRow2 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t2 .st{animation:rtSt2 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t2 .st svg{animation:rtCk2 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t2 .pg i{animation:rtPg2 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t2 .sp{animation:rtSp2 8s cubic-bezier(.45,0,.2,1) infinite,rtSpin .8s linear infinite}
.motion .rt-tasks .t3{animation:rtRow3 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t3 .st{animation:rtSt3 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t3 .st svg{animation:rtCk3 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t3 .pg i{animation:rtPg3 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tasks .t3 .sp{animation:rtSp3 8s cubic-bezier(.45,0,.2,1) infinite,rtSpin .8s linear infinite}
.motion .rt-lines .l0{animation:rtL0 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-lines .l1{animation:rtL1 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-lines .l2{animation:rtL2 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-lines .l3{animation:rtL3 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-lines .l4{animation:rtL4 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-lines .l5{animation:rtL5 8s cubic-bezier(.45,0,.2,1) infinite}
.motion .rt-tk b{animation:rtTk 24s linear infinite}.motion .rt-tk .k1{animation-delay:-16s}.motion .rt-tk .k2{animation-delay:-8s}
}
@keyframes rbFloat{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes rbBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes rbJet{from{transform:scale(.85);opacity:.55}to{transform:scale(1.1);opacity:1}}
@keyframes rbPulse{from{opacity:.55}to{opacity:1}}
@keyframes rbGlow{from{transform:scale(.95);opacity:.85}to{transform:scale(1.06);opacity:1}}
@keyframes spkTw{from{transform:scale(.4);opacity:.3}to{transform:scale(1.15);opacity:1}}
@keyframes rtSpin{to{transform:rotate(360deg)}}
@keyframes rbArm{0%,2%{transform:rotate(-12deg)}7%,22%{transform:rotate(-126deg)}27%{transform:rotate(-90deg)}48%{transform:rotate(-87deg)}53%,66%{transform:rotate(-55deg)}69%{transform:rotate(-58deg)}72%,80%{transform:rotate(-54deg)}85%{transform:rotate(-158deg)}87%{transform:rotate(-146deg)}89%{transform:rotate(-160deg)}92%{transform:rotate(-150deg)}99%,100%{transform:rotate(-12deg)}}
@keyframes rbFore{0%,2%{transform:rotate(0)}7%{transform:rotate(-14deg)}12%{transform:rotate(-22deg)}17%{transform:rotate(-10deg)}22%{transform:rotate(-16deg)}27%{transform:rotate(-2deg)}31%{transform:rotate(-12deg)}35%{transform:rotate(-4deg)}39%{transform:rotate(-12deg)}43%{transform:rotate(-4deg)}48%{transform:rotate(-8deg)}53%,66%{transform:rotate(-18deg)}68%{transform:rotate(-32deg)}70%,80%{transform:rotate(-16deg)}85%{transform:rotate(-30deg)}92%{transform:rotate(-24deg)}99%,100%{transform:rotate(0)}}
@keyframes rbArmL{0%,24%{transform:rotate(7deg)}36%{transform:rotate(13deg)}50%,82%{transform:rotate(6deg)}86%,91%{transform:rotate(24deg)}99%,100%{transform:rotate(7deg)}}
@keyframes rbHead{0%{transform:rotate(0)}3%{transform:rotate(-2deg)}6%,22%{transform:rotate(-6deg)}27%,48%{transform:rotate(-1deg)}53%,80%{transform:rotate(5deg)}85%,91%{transform:rotate(-3deg)}99%,100%{transform:rotate(0)}}
@keyframes rbEyes{0%,2%{transform:translate(0,0)}5%{transform:translate(5px,-4px)}10%{transform:translate(3px,-4px)}15%{transform:translate(7px,-4px)}20%{transform:translate(4px,-4px)}24%{transform:translate(5px,-3px)}28%,48%{transform:translate(6px,0)}53%,80%{transform:translate(5px,4px)}85%,91%{transform:translate(0,-1px)}99%,100%{transform:translate(0,0)}}
@keyframes rbLean{0%,24%{transform:none}29%,46%{transform:translateX(.5em) rotate(1.6deg)}52%,100%{transform:none}}
@keyframes rbEyeOpen{0%,82%{opacity:1}84%,91%{opacity:0}94%,100%{opacity:1}}
@keyframes rbHappy{0%,82%{opacity:0}84%,91%{opacity:1}94%,100%{opacity:0}}
@keyframes rbAntOk{0%,77%{opacity:0}80%,90%{opacity:1}95%,100%{opacity:0}}
@keyframes rtBoard{0%{transform:translateY(-6px);opacity:.75;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}4%,22%{transform:translateY(-3px);opacity:1;box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(76,201,240,.55),0 26px 46px -22px rgba(67,97,238,.42);border-color:rgba(76,201,240,.6)}27%,78%{transform:none;opacity:1;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}82%,90%{transform:translateY(-3px);opacity:1;box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(16,185,129,.5),0 0 30px -8px rgba(16,185,129,.38),0 24px 44px -22px rgba(23,40,94,.32);border-color:rgba(16,185,129,.5)}96%,100%{transform:translateY(-6px);opacity:.75;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}}
@keyframes rtTag{0%,1%{transform:scale(.8);opacity:.4}4%{transform:scale(1.08);opacity:1}6%,100%{transform:none;opacity:1}}
@keyframes rtEd{0%,23%{transform:none;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}28%,48%{transform:translateY(-4px) scale(1.035);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(114,9,183,.35),0 30px 52px -22px rgba(114,9,183,.4);border-color:rgba(114,9,183,.35)}53%,64%{transform:translateY(-2px) scale(1.012);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(76,201,240,.55),0 26px 46px -22px rgba(67,97,238,.42);border-color:rgba(76,201,240,.6)}69%,100%{transform:none;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}}
@keyframes rtStat{0%,49%{transform:none;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}53%,64%{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(76,201,240,.55),0 26px 46px -22px rgba(67,97,238,.42);border-color:rgba(76,201,240,.6)}67%,76%{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(76,201,240,.55),0 26px 46px -22px rgba(67,97,238,.42);border-color:rgba(76,201,240,.6)}80%,90%{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(16,185,129,.5),0 0 30px -8px rgba(16,185,129,.38),0 24px 44px -22px rgba(23,40,94,.32);border-color:rgba(16,185,129,.5)}96%,100%{transform:none;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 22px 40px -22px rgba(23,40,94,.32);border-color:rgba(67,97,238,.11)}}
@keyframes rtRow0{0%,7.50%{background:rgba(76,201,240,0);color:var(--ink2)}9.50%,23.00%{background:rgba(76,201,240,.13);color:var(--ink2)}25.50%,92%{background:rgba(76,201,240,0);color:var(--mut2)}98%,100%{background:rgba(76,201,240,0);color:var(--ink2)}}
@keyframes rtSt0{0%,23.50%{background:#fff;border-color:#CBD3E6}25.00%,92%{background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);border-color:transparent}97%,100%{background:#fff;border-color:#CBD3E6}}
@keyframes rtCk0{0%,23.70%{opacity:0;transform:scale(.4)}25.20%{opacity:1;transform:scale(1.15)}26.40%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes rtSp0{0%,8.00%{opacity:0}9.00%,23.20%{opacity:1}24.00%,100%{opacity:0}}
@keyframes rtPg0{0%,8.50%{transform:scaleX(0);opacity:1}23.20%{transform:scaleX(1);opacity:1}26.00%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtRow1{0%,23.50%{background:rgba(76,201,240,0);color:var(--ink2)}25.50%,49.00%{background:rgba(114,9,183,.09);color:var(--ink2)}51.50%,92%{background:rgba(76,201,240,0);color:var(--mut2)}98%,100%{background:rgba(76,201,240,0);color:var(--ink2)}}
@keyframes rtSt1{0%,49.50%{background:#fff;border-color:#CBD3E6}51.00%,92%{background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);border-color:transparent}97%,100%{background:#fff;border-color:#CBD3E6}}
@keyframes rtCk1{0%,49.70%{opacity:0;transform:scale(.4)}51.20%{opacity:1;transform:scale(1.15)}52.40%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes rtSp1{0%,24.00%{opacity:0}25.00%,49.20%{opacity:1}50.00%,100%{opacity:0}}
@keyframes rtPg1{0%,24.50%{transform:scaleX(0);opacity:1}49.20%{transform:scaleX(1);opacity:1}52.00%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtRow2{0%,49.50%{background:rgba(76,201,240,0);color:var(--ink2)}51.50%,65.00%{background:rgba(76,201,240,.13);color:var(--ink2)}67.50%,92%{background:rgba(76,201,240,0);color:var(--mut2)}98%,100%{background:rgba(76,201,240,0);color:var(--ink2)}}
@keyframes rtSt2{0%,65.50%{background:#fff;border-color:#CBD3E6}67.00%,92%{background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);border-color:transparent}97%,100%{background:#fff;border-color:#CBD3E6}}
@keyframes rtCk2{0%,65.70%{opacity:0;transform:scale(.4)}67.20%{opacity:1;transform:scale(1.15)}68.40%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes rtSp2{0%,50.00%{opacity:0}51.00%,65.20%{opacity:1}66.00%,100%{opacity:0}}
@keyframes rtPg2{0%,50.50%{transform:scaleX(0);opacity:1}65.20%{transform:scaleX(1);opacity:1}68.00%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtRow3{0%,65.50%{background:rgba(76,201,240,0);color:var(--ink2)}67.50%,81.00%{background:rgba(76,201,240,.13);color:var(--ink2)}83.50%,92%{background:rgba(76,201,240,0);color:var(--mut2)}98%,100%{background:rgba(76,201,240,0);color:var(--ink2)}}
@keyframes rtSt3{0%,81.50%{background:#fff;border-color:#CBD3E6}83.00%,92%{background:linear-gradient(135deg,#34D399,#10B981 60%,#059669);border-color:transparent}97%,100%{background:#fff;border-color:#CBD3E6}}
@keyframes rtCk3{0%,81.70%{opacity:0;transform:scale(.4)}83.20%{opacity:1;transform:scale(1.15)}84.40%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes rtSp3{0%,66.00%{opacity:0}67.00%,81.20%{opacity:1}82.00%,100%{opacity:0}}
@keyframes rtPg3{0%,66.50%{transform:scaleX(0);opacity:1}81.20%{transform:scaleX(1);opacity:1}84.00%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL0{0%,26.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}26.40%{opacity:.95}28.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}30.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL1{0%,29.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}29.40%{opacity:.95}31.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}33.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL2{0%,32.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}32.40%{opacity:.95}34.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}36.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL3{0%,35.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}35.40%{opacity:.95}37.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}39.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL4{0%,38.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}38.40%{opacity:.95}40.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}42.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtL5{0%,41.00%{transform:scaleX(0);opacity:0;box-shadow:0 0 0 rgba(76,201,240,0)}41.40%{opacity:.95}43.20%{transform:scaleX(1);box-shadow:0 0 10px rgba(76,201,240,.7)}45.00%{transform:scaleX(1);box-shadow:0 0 0 rgba(76,201,240,0)}92%{transform:scaleX(1);opacity:.9}98%,100%{transform:scaleX(1);opacity:0}}
@keyframes rtBeam{0%,26.00%{opacity:0;transform:translateY(-.9em)}27.00%{opacity:1;transform:translateY(-.9em)}42.60%{opacity:1;transform:translateY(5.80em)}44.50%,100%{opacity:0;transform:translateY(6.10em)}}
@keyframes rtScan{0%,51%{opacity:0;transform:translateY(-1em)}52.5%{opacity:1;transform:translateY(-1em)}62%{opacity:1;transform:translateY(6.10em)}64.5%,100%{opacity:0;transform:translateY(6.10em)}}
@keyframes rsV{0%,64%{opacity:1;transform:none}66.5%,95.5%{opacity:0;transform:translateY(.3em)}99%,100%{opacity:1;transform:none}}
@keyframes rsD{0%,66.5%{opacity:0;transform:translateY(.3em)}69%,92%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-.3em)}}
@keyframes rsVBar{0%,51%{transform:scaleX(0)}61%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
@keyframes rsVOk{0%,60.5%{opacity:0;transform:scale(.3) rotate(-30deg)}62.5%{opacity:1;transform:scale(1.15)}64%,74%{opacity:1;transform:none}76%,100%{opacity:0;transform:scale(.3)}}
@keyframes rsVA{0%,50%{opacity:0}52%,60.5%{opacity:1}62%,100%{opacity:0}}
@keyframes rsVB{0%,61%{opacity:0;transform:translateY(.3em)}62.5%,74%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(.3em)}}
@keyframes rsDBar{0%,68%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
@keyframes rsDOk{0%,77.5%{opacity:0;transform:scale(.3)}79.5%{opacity:1;transform:scale(1.18)}81%,100%{opacity:1;transform:none}}
@keyframes rsDA{0%,67%{opacity:0}69%,77.5%{opacity:1}79%,100%{opacity:0}}
@keyframes rsDB{0%,78%{opacity:0;transform:translateY(.3em)}79.5%,100%{opacity:1;transform:none}}
@keyframes spkB{0%,1%{opacity:0}4%,21%{opacity:1}25%,79%{opacity:0}82%,89%{opacity:1}93%,100%{opacity:0}}
@keyframes spkE{0%,25%{opacity:0}28%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes spkS{0%,51%{opacity:0}54%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes rtTk{0%{opacity:0;transform:translateY(.4em)}2%,31%{opacity:1;transform:none}32.5%,100%{opacity:0;transform:translateY(-.4em)}}
.rt-ed,.rt-stat,.rt-board{transform-origin:100% 50%}
@media (max-width:420px){ .hv-robot{aspect-ratio:.88} .rt-ed{top:41.5%} .rt-stat{top:75%} .rb-wrap{top:22%} }

/* "What is AI transformation" steps: each step takes the spotlight in turn (2s each, 6s loop),
   then a pulse travels down the connector to hand over to the next step */
.wi-step{transition:none}
.wi-arrow i::before{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 55%,transparent),0 0 12px 3px color-mix(in srgb,var(--a2) 70%,transparent);opacity:0}
.wi-step .wi-n{transition:color .3s}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-whatis .wi-steps.in .wi-step{animation:wiHL 6s ease-in-out infinite;animation-delay:calc(2.2s + var(--k) * 2s)}
 .motion .fx-whatis .wi-steps.in .wi-arrow i::before{animation:wiFlow 6s ease-in-out infinite;animation-delay:calc(2.2s + var(--k) * 2s)}
}
@keyframes wiHL{
 0%,2%{transform:none;border-color:var(--line);box-shadow:var(--shadow);background:var(--surface)}
 6%,28%{transform:translateX(8px) scale(1.02);border-color:color-mix(in srgb,var(--a2) 65%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--a2) 10%,var(--surface)),var(--surface) 70%);box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 16%,transparent),0 18px 36px -18px color-mix(in srgb,var(--a1) 55%,transparent)}
 34%,100%{transform:none;border-color:var(--line);box-shadow:var(--shadow);background:var(--surface)}}
@keyframes wiIc{0%,2%{transform:none;filter:none}8%{transform:scale(1.12) rotate(-6deg);filter:brightness(1.1)}14%,28%{transform:scale(1.06);filter:brightness(1.1) drop-shadow(0 0 8px rgba(76,201,240,.6))}34%,100%{transform:none;filter:none}}
@keyframes wiFlow{0%,25%{top:0;opacity:0}27%{top:0;opacity:1}33%{top:calc(100% - 8px);opacity:1}35%,100%{top:calc(100% - 8px);opacity:0}}

/* ===== Services showcase: tab list (left) + feature stage (right) ===== */
.sx{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:clamp(18px,2.6vw,36px);align-items:stretch}
.sx-list{display:flex;flex-direction:column;gap:8px;justify-content:center}
.sx-tab{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:18px 18px 20px;border-radius:18px;border:1px solid transparent;background:transparent;font:inherit;text-align:left;cursor:pointer;color:var(--muted);overflow:hidden;isolation:isolate;transition:background .35s,border-color .35s,box-shadow .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.sx-tab::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleY(0);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sx-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim)}
.sx-tab .sx-ic,.sx-badge .sx-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 8%,transparent);transition:background .35s,box-shadow .35s}
.sx-ic svg{width:20px;height:20px;stroke:var(--a1);transition:stroke .35s}
.sx-t{font-size:clamp(17px,1.45vw,20px);font-weight:650;letter-spacing:-.015em;line-height:1.25}
.sx-arr{color:var(--a1);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.sx-prog{position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--a1) 10%,transparent);opacity:0;overflow:hidden}
.sx-prog i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3))}
.sx-tab:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.sx-tab:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.sx-tab[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:0 18px 36px -22px rgba(23,40,94,.35);color:var(--ink);transform:translateX(6px)}
.sx-tab[aria-selected="true"]::before{transform:none}
.sx-tab[aria-selected="true"] .sx-ic{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -10px var(--a1)}
.sx-tab[aria-selected="true"] .sx-ic svg{stroke:#fff}
.sx-tab[aria-selected="true"] .sx-arr{opacity:1;transform:none}
.sx-tab[aria-selected="true"] .sx-prog{opacity:1}
.sx-stage{position:relative;display:grid}
.sx-panel{grid-area:1/1;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -32px rgba(23,40,94,.42);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.sx-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
.sx-media{position:relative;aspect-ratio:1.85;overflow:hidden;background:#EEF2FC}
.sx-media img{width:100%;height:100%;object-fit:cover;display:block}
.sx-badge{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink);background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 24px -14px rgba(23,40,94,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sx-badge .sx-ic{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.sx-badge .sx-ic svg{width:16px;height:16px;stroke:#fff}
.sx-body{display:grid;gap:10px;padding:clamp(20px,2.4vw,30px);justify-items:start}
.sx-body h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.1}
.sx-body p{margin:0;color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.55;max-width:44ch}
.sx-go{margin-top:8px}
@media (prefers-reduced-motion:no-preference){
 .motion .sx-tab[aria-selected="true"] .sx-prog i{animation:sxProg 1s linear forwards}
 .motion .sx.paused .sx-prog i,.motion .sx.idle .sx-prog i{animation-play-state:paused}
 .motion .sx-panel.on .sx-media img{animation:sxZoom 1s ease-out both}
 .motion .sx-panel.on .sx-body>*{animation:fxUp .32s cubic-bezier(.22,1,.36,1) backwards}
 .motion .sx-panel.on .sx-body>:nth-child(2){animation-delay:.04s}.motion .sx-panel.on .sx-body>:nth-child(3){animation-delay:.08s}
 .motion .sx-panel.on .sx-badge{animation:fxPop .3s .05s cubic-bezier(.34,1.56,.64,1) backwards}
 /* section entrance: tabs slide in one by one, the stage rises with a slight tilt */
 .motion .fx-showcase .sx[data-rise]{opacity:1;transform:none}
 .motion .fx-showcase .sx:not(.in) .sx-tab{opacity:0;transform:translateX(-24px)}
 .motion .fx-showcase .sx.in .sx-tab{animation:sxIn .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 90ms)}
 .motion .fx-showcase .sx:not(.in) .sx-stage{opacity:0;transform:translateY(30px) rotate(1deg)}
 .motion .fx-showcase .sx.in .sx-stage{transition:opacity .8s .25s,transform 1s .25s cubic-bezier(.22,1,.36,1)}
}
@keyframes sxProg{to{transform:scaleX(1)}}
@keyframes sxZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes sxIn{from{opacity:0;transform:translateX(-24px)}}
@keyframes fxUp{from{opacity:0;transform:translateY(14px)}}
/* tablet & phone: tabs become a swipeable chip row above the stage */
@media (max-width:900px){
 .sx{grid-template-columns:1fr;gap:14px}
 .sx-list{flex-direction:row;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:4px 2px 10px;margin:0 -2px;scrollbar-width:none}
 .sx-list::-webkit-scrollbar{display:none}
 .sx-tab{flex:none;width:auto;grid-template-columns:auto auto;gap:8px;padding:10px 14px 14px;scroll-snap-align:start;border-color:var(--line);background:rgba(255,255,255,.55)}
 .sx-tab .sx-ic,.sx-arr{display:none}
 .sx-t{font-size:15px;white-space:nowrap}
 .sx-tab[aria-selected="true"]{transform:none}
 .sx-tab::before{display:none}
 .sx-prog{left:14px;right:14px;bottom:5px}
 .sx-media{aspect-ratio:1.7}
}
@media (max-width:900px){ .motion .fx-showcase .sx:not(.in) .sx-tab{transform:none} .motion .fx-showcase .sx.in .sx-tab{animation-name:fxUp} }

/* compact "What We Build": tighter spacing, smaller list and stage, quick synced transitions (1s per service) */
.fx-showcase.sec{padding-block:clamp(32px,4vw,52px)}
.fx-showcase .sec-head{margin-bottom:clamp(14px,1.6vw,22px)}
.fx-showcase .sec-head h2{font-size:clamp(28px,3.2vw,42px)}
.sx{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(14px,1.8vw,24px);align-items:center;max-width:1040px}
.sx-list{gap:4px;justify-content:flex-start}
.sx-tab{gap:11px;padding:10px 14px 12px;border-radius:14px;transition:background .25s,border-color .25s,box-shadow .25s,color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.sx-tab::before{top:9px;bottom:9px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.sx-tab .sx-ic{width:32px;height:32px;border-radius:10px;transition:background .25s,box-shadow .25s}
.sx-tab .sx-ic svg{width:17px;height:17px}
.sx-t{font-size:clamp(15px,1.15vw,17px)}
.sx-arr{transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.sx-prog{left:14px;right:14px;bottom:5px}
.sx-tab[aria-selected="true"]{transform:translateX(4px);box-shadow:0 12px 26px -18px rgba(23,40,94,.35)}
.sx-panel{border-radius:20px;transform:translateY(8px) scale(.99);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s;box-shadow:0 22px 44px -28px rgba(23,40,94,.4)}
.sx-panel.on{transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
.sx-media{aspect-ratio:2.35}
.sx-badge{left:12px;top:12px;padding:4px 12px 4px 4px;font-size:11px;gap:8px}
.sx-badge .sx-ic{width:26px;height:26px}.sx-badge .sx-ic svg{width:14px;height:14px}
.sx-body{gap:6px;padding:14px 18px 16px}
.sx-body h3{font-size:clamp(20px,1.8vw,24px)}
.sx-body p{font-size:clamp(14.5px,1.05vw,16px);line-height:1.5}
.sx-go{margin-top:4px;padding:10px 18px;font-size:14.5px}
@media (max-width:900px){ .sx{grid-template-columns:1fr;gap:8px;max-width:none} .sx-list{padding:2px 2px 6px} .sx-tab{padding:8px 12px 11px} .sx-t{font-size:14px} .sx-media{aspect-ratio:2.2} }

/* page flow: one consistent, content-driven section rhythm on fx pages; services fill the content width */
.sec[class*="fx-"]:not(.fx-hero),.ctab.fx-cta{padding-block:clamp(36px,3.6vw,52px)}
.sec[class*="fx-"]{scroll-margin-top:calc(var(--header-h) + 8px)}
.fx-showcase .sec-head{margin-bottom:clamp(16px,1.8vw,24px)}
.sx{max-width:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,2.6vw,40px);align-items:stretch}
.sx-list{gap:8px;justify-content:center}
.sx-tab{gap:14px;padding:15px 18px 17px;border-radius:16px}
.sx-tab .sx-ic{width:40px;height:40px;border-radius:12px}
.sx-tab .sx-ic svg{width:20px;height:20px}
.sx-t{font-size:clamp(16px,1.35vw,20px)}
.sx-prog{left:18px;right:18px;bottom:7px}
.sx-media{aspect-ratio:2.1}
.sx-body{gap:8px;padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px) clamp(18px,2vw,26px)}
.sx-body h3{font-size:clamp(21px,2vw,28px)}
.sx-body p{font-size:clamp(15px,1.15vw,17px)}
.sx-go{padding:11px 20px;font-size:15px}
@media (max-width:900px){ .sx{grid-template-columns:1fr;gap:10px} .sx-list{padding:2px 2px 6px;gap:8px} .sx-tab{padding:9px 13px 12px;gap:8px} .sx-t{font-size:14.5px} .sx-media{aspect-ratio:2.2} .sx-body{padding:14px 16px 16px} }
@media (min-width:901px){ .sx-list{justify-content:space-between;gap:6px} .sx-media{flex:1 0 auto} }
.sx-media{flex:1 0 auto}

/* ===== Engagement models: ascending staircase (desktop) / 2x2 (tablet) / vertical timeline (phone) ===== */
.fx-ways .sec-head{margin-bottom:clamp(6px,1vw,14px)}
.stairs{--step:clamp(28px,3.2vw,44px);--gap:clamp(14px,1.6vw,22px);--rise:26px;--cyc:6s;--trv:3s;--g0:1.9s;list-style:none;margin:0;padding:var(--rise) 0 0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gap);align-items:stretch;position:relative}
.stp{--f:calc(var(--i) / (var(--n) - 1));position:relative;z-index:1;margin-top:calc(var(--r) * var(--step));display:flex;flex-direction:column}
/* connector: CSS fallback, replaced by the measured SVG path once JS has drawn it */
.stp:not(:last-child)::before{content:"";position:absolute;left:23px;top:calc(1px - var(--rise) - var(--step));width:calc(100% + var(--gap));height:var(--step);border:2px solid transparent;border-left-color:color-mix(in srgb,var(--a1) 45%,transparent);border-top-color:color-mix(in srgb,var(--a3) 40%,transparent);border-top-left-radius:10px;pointer-events:none}
.stairs.has-line .stp::before{content:none}
.stairs-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.stairs-line .sg0{stop-color:var(--a2)}.stairs-line .sg1{stop-color:var(--a1)}.stairs-line .sg2{stop-color:var(--a3)}
.sl-base{fill:none;stroke:url(#stairs-grad);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.sl-glow{fill:none;stroke:url(#stairs-grad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80 2000;stroke-dashoffset:80;opacity:0;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--a2) 80%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--a1) 45%,transparent))}
.stp-node{position:absolute;left:23px;top:calc(-1 * var(--rise) + 1px);width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:2px solid var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent);z-index:2}
.stp:last-child .stp-node{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));border-color:#fff}
/* cards */
.stp-card{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 32px -20px rgba(23,40,94,.24);overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.stp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3));opacity:.5;transition:opacity .35s}
.stp-card:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 26px 46px -24px rgba(23,40,94,.36);border-color:color-mix(in srgb,var(--a1) 24%,var(--line))}
.stp-card:hover::before{opacity:1}
.stp-card:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
.stp-num{position:absolute;right:16px;bottom:10px;z-index:-1;font-weight:800;font-size:clamp(54px,4.6vw,72px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.25px color-mix(in srgb,var(--a1) 15%,transparent);pointer-events:none;transition:-webkit-text-stroke-color .4s}
.stp-card:hover .stp-num{-webkit-text-stroke-color:color-mix(in srgb,var(--a1) 30%,transparent)}
.stp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.stp .wi{position:relative;width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1)}
.stp .wi svg{width:22px;height:22px;stroke:#fff;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.stp-card:hover .wi svg{transform:rotate(-10deg) scale(1.08)}
.stp small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.stp h3{font-size:clamp(18px,1.4vw,20px);letter-spacing:-.02em;line-height:1.22;text-wrap:balance}
.stp p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:30ch;text-wrap:pretty}
.stp .svc-go{margin-top:auto;padding-top:12px;align-self:flex-start}
.stp-card:hover .svc-go span{transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-ways .stairs[data-rise]{opacity:1;transform:none}
 /* entrance (runs once: .in is added a single time) */
 .motion .fx-ways .stairs:not(.in) .stp-card{opacity:0;transform:translateY(24px)}
 .motion .fx-ways .stairs.in .stp-card{animation:stpUp .75s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.2s + var(--i) * 120ms)}
 .motion .fx-ways .stairs .sl-base{stroke-dasharray:1000;stroke-dashoffset:1000}
 .motion .fx-ways .stairs.in .sl-base{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s linear .15s}
 .motion .fx-ways .stairs:not(.in) .stp-node{opacity:0;transform:scale(.3)}
 .motion .fx-ways .stairs.in .stp-node{transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.15s + var(--f) * 1.3s)}
 /* after the entrance a soft glow travels node 01 -> 04, lighting each node and card accent as it passes */
 .motion .fx-ways .stairs.in .sl-glow{animation:stpTravel var(--cyc) linear infinite var(--g0)}
 .motion .fx-ways .stairs.in .stp-node{animation:stpGlow var(--cyc) ease-out infinite;animation-delay:calc(var(--g0) + var(--f) * var(--trv) - .2s)}
 .motion .fx-ways .stairs.in .stp-card::before{animation:stpAccent var(--cyc) ease-out infinite;animation-delay:calc(var(--g0) + var(--f) * var(--trv) - .2s)}
 .motion .fx-ways .stairs.in .stp-card:hover::before{animation:none}
 .offscreen.fx-ways .stairs.in .stp-card{animation-play-state:running!important}
}
@keyframes stpUp{from{opacity:0;transform:translateY(24px)}}
@keyframes stpTravel{0%{stroke-dashoffset:80;opacity:0}3%{opacity:1}47%{opacity:1}50%{stroke-dashoffset:-1000;opacity:0}100%{stroke-dashoffset:-1000;opacity:0}}
@keyframes stpGlow{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent)}4%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a1) 20%,transparent),0 0 14px 3px color-mix(in srgb,var(--a2) 55%,transparent)}18%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent)}}
@keyframes stpAccent{0%,18%,100%{opacity:.5;box-shadow:none}4%{opacity:1;box-shadow:0 0 12px 1px color-mix(in srgb,var(--a2) 55%,transparent)}}
/* tablet: 2 x 2 */
@media (max-width:1000px){
 .stairs{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;gap:16px}
 .stp{margin-top:0}
 .stp::before,.stp:not(:last-child)::before,.stp-node,.stairs-line{display:none}
 .stp p{max-width:none}
}
/* phone: vertical timeline */
@media (max-width:620px){
 .stairs{grid-template-columns:1fr;gap:14px;padding-left:28px}
 .stairs::before{content:"";position:absolute;left:9px;top:30px;bottom:30px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));opacity:.5}
 .stp-node{display:block;left:-18px;top:34px}
 .stp-card{padding:18px 18px 16px}
 .stp-num{font-size:56px;right:14px;bottom:8px}
}
@media (max-width:1000px){ .fx-ways .sec-head{margin-bottom:clamp(18px,3vw,24px)} }

/* ===================== Data Engineering & BI ===================== */
/* ---- hero: sources -> lakehouse -> quality checks -> live executive cockpit (8s loop) ---- */
.hv-pipe{--T:8s;--ok:#10B981;position:relative;width:100%;max-width:620px;aspect-ratio:600/570;margin-inline:auto;font-size:clamp(8px,2.1cqw,13px);color:#1E2537}
.hv-pipe .pp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.pp-wire{fill:none;stroke:rgba(67,97,238,.16);stroke-width:2.2;stroke-linecap:round}
.pp-flow{fill:none;stroke:url(#ppG);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:5 11;opacity:.75}
.pp-pk{filter:drop-shadow(0 0 4px rgba(76,201,240,.9))}
.pp-glow{position:absolute;left:24%;top:18%;width:60%;height:66%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.22),rgba(114,9,183,.10) 55%,transparent);filter:blur(10px);z-index:0}
.pp-src{position:absolute;left:0;width:22%;transform:translateY(-50%);display:flex;align-items:center;gap:.55em;padding:.55em .6em;border-radius:.9em;background:rgba(255,255,255,.92);border:1px solid rgba(67,97,238,.12);box-shadow:inset 0 1px 0 #fff,0 14px 28px -18px rgba(23,40,94,.35);z-index:2}
.pp-src b{font-size:1em;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pp-si{flex:none;width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.pp-si svg{width:1.15em;height:1.15em;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-led{position:absolute;right:-.3em;top:50%;width:.6em;height:.6em;margin-top:-.3em;border-radius:50%;background:#4CC9F0;box-shadow:0 0 0 .2em rgba(76,201,240,.25)}
.pp-card{position:absolute;z-index:2;border-radius:1.1em;padding:.95em 1em;background:rgba(255,255,255,.93);border:1px solid rgba(67,97,238,.12);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 24px 44px -24px rgba(23,40,94,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pp-hd{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin-bottom:.75em}
.pp-tag{font-family:var(--mono);font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:#4361EE;font-weight:500}
.pp-ttl{font-weight:700;font-size:1.02em;letter-spacing:-.01em}
.pp-sync{display:inline-flex;align-items:center;gap:.35em;font-size:.72em;color:#5B6478;font-family:var(--mono)}
.pp-sync i{width:.55em;height:.55em;border-radius:50%;border:.14em solid #4361EE;border-top-color:transparent}
.pp-lake{left:33%;top:30%;width:22%;height:44%;display:flex;flex-direction:column;justify-content:space-between}
.pp-lake .pp-hd{flex-direction:column;align-items:flex-start;gap:.35em}
.pp-layer{display:grid;gap:.3em;margin-bottom:.6em}
.pp-layer span{font-size:.78em;font-weight:600;color:#5B6478}
.pp-layer b{display:block;height:.55em;border-radius:1em;background:#EEF1FA;overflow:hidden}
.pp-layer b i{display:block;height:100%;border-radius:inherit;transform-origin:left}
.pp-layer.l0 b i{background:linear-gradient(90deg,#E8B07A,#C9844A)}
.pp-layer.l1 b i{background:linear-gradient(90deg,#D8DEEA,#9AA6BD)}
.pp-layer.l2 b i{background:linear-gradient(90deg,#F6D77A,#E0A82E)}
.pp-plat{display:flex;flex-wrap:wrap;gap:.25em}
.pp-plat em{font-style:normal;font-size:.62em;font-family:var(--mono);padding:.2em .45em;border-radius:.5em;background:#F1F4FC;color:#4361EE;white-space:nowrap}
.pp-cock{left:62%;top:4%;width:38%;height:50%;display:flex;flex-direction:column}
.pp-live{display:inline-flex;align-items:center;gap:.35em;font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#059669;padding:.25em .6em;border-radius:1em;background:rgba(16,185,129,.1)}
.pp-live i{width:.5em;height:.5em;border-radius:50%;background:var(--ok)}
.pp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45em}
.pp-kpi{position:relative;padding:.55em .5em .6em;border-radius:.7em;background:#F5F7FD;border:1px solid rgba(67,97,238,.08);display:grid;gap:.4em;min-width:0}
.pp-kpi span{font-size:.66em;color:#5B6478;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-kpi b{display:block;height:.75em;border-radius:.3em;background:#E4E9F6;overflow:hidden}
.pp-kpi b i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#4CC9F0,#4361EE 60%,#7209B7);transform-origin:left}
.pp-kpi.k0 b i{transform:scaleX(.78)}.pp-kpi.k1 b i{transform:scaleX(.52)}.pp-kpi.k2 b i{transform:scaleX(.9)}
.pp-kpi em{position:absolute;right:.5em;top:.5em;font-style:normal;font-size:.6em}
.pp-kpi em.up{color:#059669}.pp-kpi em.dn{color:#4361EE}
.pp-chart{position:static!important;display:block;width:100%!important;height:auto!important;flex:1;min-height:0;margin-top:.7em;overflow:visible}
.pp-grid{stroke:rgba(67,97,238,.08);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.pp-line{fill:none;stroke:url(#ppG);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pp-dot{fill:#7209B7;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.pp-qa{left:62%;top:62%;width:38%}
.pp-cnt{font-family:var(--mono);font-size:.78em;color:#5B6478}.pp-cnt b{color:#059669}
.pp-chk{display:flex;align-items:center;gap:.55em;font-size:.86em;font-weight:600;color:#1E2537;padding:.3em 0}
.pp-chk .st{position:relative;width:1.25em;height:1.25em;flex:none}
.pp-chk .sp{position:absolute;inset:0;border-radius:50%;border:.16em solid rgba(67,97,238,.2);border-top-color:#4361EE}
.pp-chk .ok{position:absolute;inset:0;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.pp-chk .ok svg{position:static;width:.85em;height:.85em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hv-pipe svg.pp-svg + .pp-glow{pointer-events:none}
@media (prefers-reduced-motion:no-preference){
 .motion .pp-flow{animation:ppFlow 1.1s linear infinite}
 .motion .pp-led{animation:ppLed 1.6s ease-in-out infinite;animation-delay:calc(var(--k) * .4s)}
 .motion .pp-src{animation:ppSrc var(--T) ease-in-out infinite;animation-delay:calc(var(--k) * .25s)}
 .motion .pp-sync i{animation:spn 1s linear infinite}
 .motion .pp-layer.l0 b i{animation:ppL0 var(--T) cubic-bezier(.4,0,.2,1) infinite}
 .motion .pp-layer.l1 b i{animation:ppL1 var(--T) cubic-bezier(.4,0,.2,1) infinite}
 .motion .pp-layer.l2 b i{animation:ppL2 var(--T) cubic-bezier(.4,0,.2,1) infinite}
 .motion .pp-chk .sp{animation:spn .9s linear infinite}
 .motion .pp-chk.c0 .ok{animation:ppOk0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .pp-chk.c1 .ok{animation:ppOk1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .pp-chk.c2 .ok{animation:ppOk2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .pp-cnt{animation:ppCnt var(--T) ease infinite}
 .motion .pp-qa{animation:ppQa var(--T) ease infinite}
 .motion .pp-kpi.k0 b i{animation:ppK0 var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .pp-kpi.k1 b i{animation:ppK1 var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .pp-kpi.k2 b i{animation:ppK2 var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .pp-kpi em{animation:ppEm var(--T) ease infinite}
 .motion .pp-line{animation:ppLine var(--T) ease-in-out infinite}
 .motion .pp-area{animation:ppArea var(--T) ease infinite}
 .motion .pp-dot{transform-box:fill-box;transform-origin:center;animation:ppDot var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .pp-live i{animation:ppLive 1.4s ease-in-out infinite}
 .motion .pp-cock{animation:ppCock var(--T) ease infinite}
 .motion .pp-glow{animation:ppGlow 6s ease-in-out infinite alternate}
}
@keyframes ppFlow{to{stroke-dashoffset:-16}}
@keyframes ppLed{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ppSrc{0%,100%{transform:translateY(-50%)}6%{transform:translateY(-50%) translateX(.25em)}12%{transform:translateY(-50%)}}
@keyframes ppL0{0%,6%{transform:scaleX(0)}18%,90%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes ppL1{0%,18%{transform:scaleX(0)}30%,90%{transform:scaleX(.86)}97%,100%{transform:scaleX(0)}}
@keyframes ppL2{0%,30%{transform:scaleX(0)}42%,90%{transform:scaleX(.7)}97%,100%{transform:scaleX(0)}}
@keyframes ppOk0{0%,44%{opacity:0;transform:scale(.3)}48%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ppOk1{0%,50%{opacity:0;transform:scale(.3)}54%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ppOk2{0%,56%{opacity:0;transform:scale(.3)}60%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ppCnt{0%,58%{opacity:.25}62%,92%{opacity:1}97%,100%{opacity:.25}}
@keyframes ppQa{0%,40%,66%,100%{box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(23,40,94,.05),0 24px 44px -24px rgba(23,40,94,.38)}50%,58%{box-shadow:inset 0 1px 0 #fff,0 0 0 .25em rgba(16,185,129,.14),0 24px 44px -24px rgba(23,40,94,.38)}}
@keyframes ppK0{0%,60%{transform:scaleX(0)}70%,92%{transform:scaleX(.78)}98%,100%{transform:scaleX(0)}}
@keyframes ppK1{0%,63%{transform:scaleX(0)}73%,92%{transform:scaleX(.52)}98%,100%{transform:scaleX(0)}}
@keyframes ppK2{0%,66%{transform:scaleX(0)}76%,92%{transform:scaleX(.9)}98%,100%{transform:scaleX(0)}}
@keyframes ppEm{0%,70%{opacity:0;transform:translateY(.3em)}76%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ppLine{0%,62%{clip-path:inset(0 100% 0 0)}84%,92%{clip-path:inset(0 0 0 0);opacity:1}98%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes ppArea{0%,68%{opacity:0}86%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes ppDot{0%,83%{opacity:0;transform:scale(0)}87%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:scale(0)}}
@keyframes ppLive{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 .35em rgba(16,185,129,0)}}
@keyframes ppCock{0%,60%,100%{transform:none}64%{transform:translateY(-.3em)}70%{transform:none}}
@keyframes ppGlow{to{transform:translate(4%,-3%) scale(1.06);opacity:.8}}
@media (max-width:600px){ .hv-pipe{font-size:clamp(7px,2.45cqw,11px)} .pp-plat{display:none} .pp-src{padding:.45em .45em} .pp-si{width:1.7em;height:1.7em} }

/* ---- services: 2 x 2 cards, copy + illustration, each enters from its own corner ---- */
.sq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sq{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;min-height:clamp(220px,19vw,260px);border-radius:22px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 16px 34px -22px rgba(23,40,94,.26);overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.sq::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--a2) 12%,transparent),transparent 55%);opacity:.7;transition:opacity .45s}
.sq::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleY(.25);transform-origin:top;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sq:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 28px 50px -26px rgba(23,40,94,.38);border-color:color-mix(in srgb,var(--a1) 24%,var(--line))}
.sq:hover::before{opacity:1}.sq:hover::after{transform:none}
.sq:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
.sq-copy{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,28px)}
.sq-top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.sq-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1)}
.sq-ic svg{width:21px;height:21px;stroke:#fff;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.sq:hover .sq-ic svg{transform:rotate(-10deg) scale(1.08)}
.sq small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.sq h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.sq p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.sq .svc-go{margin-top:auto;padding-top:8px}
.sq:hover .svc-go span{transform:translateX(4px)}
.sq-art{position:relative;display:grid;place-items:center;padding:14px 14px 14px 0}
.sq-art::before{content:"";position:absolute;inset:14px 14px 14px 0;border-radius:16px;background:linear-gradient(160deg,#F2F5FD,#EAEFFB)}
.sq-art img{position:relative;width:100%;height:100%;max-height:230px;object-fit:contain;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.sq:hover .sq-art img{transform:scale(1.05) translateY(-3px)}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-quad .sq[data-rise]{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.97);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k) * 110ms)}
 .motion .fx-quad .sq[data-rise].in{opacity:1;transform:none}
 .motion .fx-quad .sq.in:hover{transform:translateY(-5px);transition-delay:0s}
 .motion .fx-quad .sq.in .sq-art img{animation:sqFloat 6s ease-in-out infinite;animation-delay:calc(var(--k) * -1.5s)}
 .motion .fx-quad .sq.in::after{animation:sqBar 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.4s + var(--k) * 110ms)}
}
@keyframes sqFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes sqBar{from{transform:scaleY(0)}}
@media (max-width:1000px){ .sq{grid-template-columns:minmax(0,1fr);min-height:0} .sq-art{order:-1;padding:12px 12px 0;aspect-ratio:2.1} .sq-art::before{inset:12px 12px 0} }
@media (max-width:620px){ .sq-grid{grid-template-columns:1fr} }

/* ---- how we build: modern data stack layers ---- */
.stack{--sp:22px;list-style:none;margin:0;padding:0 0 0 calc(var(--sp) + 22px);display:grid;gap:12px;position:relative}
.stack-spine{position:absolute;left:var(--sp);top:28px;bottom:28px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));opacity:.35;overflow:hidden}
.stack-spine i{position:absolute;left:-3px;right:-3px;height:70px;top:-70px;background:linear-gradient(180deg,transparent,#fff 40%,var(--a2),transparent);filter:blur(1px)}
.sl{position:relative}
.sl-node{position:absolute;left:calc(-22px - 6px + 1px);top:50%;width:12px;height:12px;margin-top:-6px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:2px solid var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent);z-index:1}
.sl-card{position:relative;display:grid;grid-template-columns:auto minmax(170px,.8fr) minmax(0,2fr);align-items:center;gap:clamp(14px,2vw,26px);padding:16px clamp(16px,2vw,24px);border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -22px rgba(23,40,94,.26);overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.sl-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 9%,transparent),transparent 45%);opacity:0;transition:opacity .4s}
.sl-card:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--a1) 24%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.05),0 22px 40px -24px rgba(23,40,94,.34)}
.sl-card:hover::before{opacity:1}
.sl-ic{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1)}
.sl-ic svg{width:22px;height:22px;stroke:#fff}
.sl-h{position:relative;display:grid;gap:3px}
.sl-h small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sl-h h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;line-height:1.2}
.sl-chips{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.sl-chips li{padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--a1) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--a1) 14%,transparent);transition:background .3s,border-color .3s,color .3s}
.sl-card:hover .sl-chips li{border-color:color-mix(in srgb,var(--a1) 30%,transparent)}
.stack-note{margin-top:18px}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-stack .stack[data-rise]{opacity:1;transform:none}
 .motion .fx-stack .stack:not(.in) .sl{opacity:0;transform:translateY(-26px)}
 .motion .fx-stack .stack.in .sl{animation:slDrop .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 140ms)}
 .motion .fx-stack .stack.in .sl-chips li{animation:fxPop .45s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.35s + var(--k) * 140ms + var(--c) * 60ms)}
 .motion .fx-stack .stack.in .stack-spine i{animation:slBeam 5s cubic-bezier(.45,0,.55,1) infinite 1.4s}
 .motion .fx-stack .stack.in .sl-node{animation:slNode 5s ease-out infinite;animation-delay:calc(1.4s + .5s + var(--k) * (3.4s / var(--n)))}
 .motion .fx-stack .stack.in .sl-ic{animation:slIc 5s ease-out infinite;animation-delay:calc(1.4s + .5s + var(--k) * (3.4s / var(--n)))}
 .offscreen.fx-stack .stack.in .sl,.offscreen.fx-stack .stack.in .sl-chips li{animation-play-state:running!important}
}
@keyframes slDrop{from{opacity:0;transform:translateY(-26px)}}
@keyframes slBeam{0%{top:-70px}80%,100%{top:calc(100% + 10px)}}
@keyframes slNode{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent)}5%{box-shadow:0 0 0 7px color-mix(in srgb,var(--a1) 20%,transparent),0 0 14px 3px color-mix(in srgb,var(--a2) 55%,transparent)}16%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent)}}
@keyframes slIc{0%,16%,100%{transform:none}5%{transform:scale(1.08)}}
@media (max-width:900px){ .sl-card{grid-template-columns:auto minmax(0,1fr)} .sl-chips{grid-column:1/-1;justify-content:flex-start} }
@media (max-width:620px){ .stack{--sp:9px;padding-left:28px} .sl-node{left:-24px;top:38px;margin-top:-6px} .sl-chips li{font-size:13px;padding:6px 11px} }

/* ---- FAQ: "More questions" disclosure ---- */
.faq-more{border:0!important;background:none!important;box-shadow:none!important;padding:0!important}
.faq-more>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:12px 18px!important;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:650;color:var(--a1);cursor:pointer;width:auto}
.faq-more>summary::-webkit-details-marker{display:none}
.faq-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s;position:static!important;background:none!important}
.faq-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fm-n{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.faq-more-in{display:grid;gap:inherit;margin-top:12px}
.fx-faq .faq-more::after{display:none}
.faq-sec .faq-more>summary,.faq-sec .faq-more>summary:hover{padding:11px 18px!important;font-size:15px}
.faq-sec .faq-more>summary::after{right:auto;top:auto;content:"";width:8px;height:8px;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.faq-sec .faq-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-more-in details:first-child{border-top:1px solid var(--line-2)}
.motion .fx-faq .faq-more[open] .faq-more-in details{animation:fxFromR .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--d) * 70ms)}
.hv-pipe .pp-src svg,.hv-pipe .pp-card svg:not(.pp-chart){position:static;inset:auto;overflow:visible}
/* stack chips with platform logos */
.sl-chips li{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px}
.sl-chips .lg{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;background:#fff;border:1px solid color-mix(in srgb,var(--a1) 10%,transparent);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.sl-chips .lg svg{width:16px;height:16px;display:block}
.sl-chips .lg.mono{border:0;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));color:#fff;font-size:12px;font-weight:800}
.sl-chips li:hover .lg{transform:rotate(-8deg) scale(1.1)}
@media (max-width:620px){ .sl-chips li{padding:5px 11px 5px 6px;gap:7px} .sl-chips .lg{width:22px;height:22px} .sl-chips .lg svg{width:14px;height:14px} }

/* ===================== Generative AI ===================== */
/* what-is: 5-step strip with timings, compact; highlight loop scaled to 5 steps (10s) */
.wi-lab{display:grid;gap:2px}
.wi-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--a1);font-weight:500}
.wi-steps.n5 .wi-step{padding:12px 18px;gap:12px}
.wi-steps.n5 .wi-ic{width:40px;height:40px;border-radius:12px}
.wi-steps.n5 .wi-ic svg{width:20px;height:20px}
.wi-steps.n5 .wi-step b{font-size:16.5px}
.wi-steps.n5 .wi-arrow{height:18px;padding-left:52px}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-whatis .wi-steps.n5.in .wi-step{animation-name:wiHL5;animation-duration:10s;animation-delay:calc(2.6s + var(--k) * 2s)}
 .motion .fx-whatis .wi-steps.n5.in .wi-step .wi-ic{animation-name:fxPop,wiIc5;animation-duration:.6s,10s;animation-delay:calc(.35s + var(--k) * .4s),calc(2.6s + var(--k) * 2s)}
 .motion .fx-whatis .wi-steps.n5.in .wi-arrow i::before{animation-name:wiFlow5;animation-duration:10s;animation-delay:calc(2.6s + var(--k) * 2s)}
 .motion .fx-whatis .wi-steps.n5 .wi-step{transition-delay:calc(.2s + var(--k) * .4s)}
 .motion .fx-whatis .wi-steps.n5.in .wi-arrow i{transition-delay:calc(.45s + var(--k) * .4s)}
}
@media (max-width:620px){ .wi-steps.n5 .wi-arrow{padding-left:38px} }

/* hero: production Gen AI assistant (shares the pipe hero's card, wire and check styles) */
.hv-gen{--T:8s;--ok:#10B981;position:relative;width:100%;max-width:620px;aspect-ratio:600/570;margin-inline:auto;font-size:clamp(8px,2.1cqw,13px);color:#1E2537}
.hv-gen .pp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.hv-gen svg:not(.pp-svg){position:static;inset:auto;width:auto;height:auto;overflow:visible}
.hv-gen .pp-glow{left:10%;top:10%;width:70%;height:70%}
.ga-chat{left:0;top:7%;width:55%;height:auto;display:flex;flex-direction:column;gap:1em}
.ga-chat .pp-hd{margin-bottom:.1em}
.ga-who{display:inline-flex;align-items:center;gap:.5em;min-width:0}
.ga-who .pp-ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-bot{flex:none;width:1.9em;height:1.9em;border-radius:.6em;display:grid;place-items:center;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.ga-bot svg{width:1.1em!important;height:1.1em!important;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ga-grd{flex:none}
.ga-q{align-self:flex-end;width:72%;display:grid;gap:.4em;padding:.75em .85em;border-radius:1em 1em .25em 1em;background:linear-gradient(135deg,#4CC9F0,#4361EE 60%,#7209B7);box-shadow:0 12px 22px -14px #4361EE}
.ga-q i{display:block;height:.55em;width:var(--w);border-radius:1em;background:rgba(255,255,255,.75)}
.ga-src{display:grid;gap:.45em}
.ga-sl{display:inline-flex;align-items:center;gap:.45em;font-size:.74em;font-family:var(--mono);color:#5B6478}
.ga-sl .sp{width:.85em;height:.85em;border-radius:50%;border:.15em solid rgba(67,97,238,.2);border-top-color:#4361EE}
.ga-docs{display:flex;gap:.4em;flex-wrap:wrap}
.ga-docs em{font-style:normal;display:inline-flex;align-items:center;gap:.3em;font-size:.74em;font-weight:600;padding:.3em .55em;border-radius:.55em;background:#F1F4FC;border:1px solid rgba(67,97,238,.12);color:#1E2537}
.ga-docs svg{width:1.1em!important;height:1.1em!important;fill:none;stroke:#4361EE;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ga-type{display:flex;gap:.3em;padding:.55em .7em;width:max-content;border-radius:1em;background:#F1F4FC;height:1.6em;align-items:center}
.ga-type i{width:.42em;height:.42em;border-radius:50%;background:#4361EE;opacity:.5}
.ga-a{position:relative;display:grid;align-content:start;gap:.62em;padding:1em .95em 2.4em;border-radius:1em 1em 1em .25em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1);margin-top:-2.2em}
.ga-a i{display:block;height:.55em;width:var(--w);border-radius:1em;background:linear-gradient(90deg,#C9D3F2,#DCE2F5);transform-origin:left}
.ga-cite{position:absolute;left:.95em;bottom:.7em;display:flex;gap:.3em}
.ga-cite em{font-style:normal;font-size:.62em;font-weight:700;font-family:var(--mono);min-width:1.6em;height:1.6em;display:grid;place-items:center;border-radius:.45em;color:#4361EE;background:#fff;border:1px solid rgba(67,97,238,.25)}
.ga-guard{left:62%;top:7%;width:38%}
.ga-shield svg{width:1.3em!important;height:1.3em!important;fill:rgba(16,185,129,.12);stroke:#059669;stroke-width:1.8}
.ga-eval{left:62%;top:45%;width:38%}
.ga-pass{font-size:.7em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#059669;padding:.25em .6em;border-radius:.4em;border:.14em solid #10B981;transform:rotate(-6deg)}
.ga-row{display:grid;grid-template-columns:5.2em minmax(0,1fr) 1.2em;align-items:center;gap:.5em;padding:.32em 0}
.ga-row span{font-size:.8em;font-weight:600;color:#5B6478}
.ga-row b{display:block;height:.55em;border-radius:1em;background:#E8ECF7;overflow:hidden}
.ga-row b i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4CC9F0,#4361EE 60%,#7209B7);transform-origin:left}
.ga-row.r0 b i{transform:scaleX(.94)}.ga-row.r1 b i{transform:scaleX(.98)}.ga-row.r2 b i{transform:scaleX(.72)}
.ga-row em{width:1.15em;height:1.15em;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.ga-row em svg{width:.75em!important;height:.75em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ga-router{position:absolute;left:0;right:0;top:80%;z-index:2;display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:1.1em;background:rgba(255,255,255,.88);border:1px solid rgba(67,97,238,.12);box-shadow:inset 0 1px 0 #fff,0 18px 34px -22px rgba(23,40,94,.35)}
.ga-rl{flex:none;font-family:var(--mono);font-size:.68em;letter-spacing:.1em;text-transform:uppercase;color:#4361EE}
.ga-ms{display:flex;gap:.35em;flex:1;min-width:0;justify-content:space-between}
.ga-ms em{font-style:normal;display:inline-flex;align-items:center;gap:.35em;padding:.3em .55em;border-radius:.7em;font-size:.76em;font-weight:650;border:1px solid transparent;transition:none}
.ga-ms svg{width:1.25em!important;height:1.25em!important;flex:none}
@media (prefers-reduced-motion:no-preference){
 .motion .hv-gen .pp-flow{animation:ppFlow 1.1s linear infinite}
 .motion .ga-q{animation:gaQ var(--T) cubic-bezier(.22,1,.36,1) infinite;transform-origin:right bottom}
 .motion .ga-src{animation:gaSrc var(--T) ease infinite}
 .motion .ga-sl .sp{animation:spn .9s linear infinite}
 .motion .ga-docs .d0{animation:gaD0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ga-docs .d1{animation:gaD1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ga-docs .d2{animation:gaD2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ga-type{animation:gaType var(--T) ease infinite}
 .motion .ga-type i{animation:gaDot .9s ease-in-out infinite}.motion .ga-type i:nth-child(2){animation-delay:.15s}.motion .ga-type i:nth-child(3){animation-delay:.3s}
 .motion .ga-a{animation:gaA var(--T) ease infinite}
 .motion .ga-a .a0{animation:gaL0 var(--T) linear infinite}.motion .ga-a .a1{animation:gaL1 var(--T) linear infinite}.motion .ga-a .a2{animation:gaL2 var(--T) linear infinite}.motion .ga-a .a3{animation:gaL3 var(--T) linear infinite}.motion .ga-a .a4{animation:gaL4 var(--T) linear infinite}.motion .ga-a .a5{animation:gaL5 var(--T) linear infinite}
 .motion .ga-cite .c0{animation:gaC0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .ga-cite .c1{animation:gaC1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .ga-cite .c2{animation:gaC2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .hv-gen .pp-chk .sp{animation:spn .9s linear infinite}
 .motion .hv-gen .pp-chk.c0 .ok{animation:gaOk0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .hv-gen .pp-chk.c1 .ok{animation:gaOk1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .hv-gen .pp-chk.c2 .ok{animation:gaOk2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .hv-gen .ga-guard{animation:none}
 .motion .ga-row.r0 b i{animation:gaR0 var(--T) cubic-bezier(.22,1,.36,1) infinite}.motion .ga-row.r1 b i{animation:gaR1 var(--T) cubic-bezier(.22,1,.36,1) infinite}.motion .ga-row.r2 b i{animation:gaR2 var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .ga-row em{animation:gaE var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ga-pass{animation:gaPass var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ga-grd i{animation:ppLive 1.4s ease-in-out infinite}
 .motion .ga-ms em{animation:gaM var(--T) ease infinite}
 .motion .ga-ms .m1{animation-delay:1.6s}.motion .ga-ms .m2{animation-delay:3.2s}.motion .ga-ms .m3{animation-delay:4.8s}.motion .ga-ms .m4{animation-delay:6.4s}
 .motion .hv-gen .pp-glow{animation:ppGlow 6s ease-in-out infinite alternate}
}
@keyframes gaQ{0%,2%{opacity:0;transform:scale(.6)}8%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaSrc{0%,9%{opacity:0}12%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes gaD0{0%,13%{opacity:0;transform:translateY(.5em) scale(.8)}17%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaD1{0%,17%{opacity:0;transform:translateY(.5em) scale(.8)}21%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaD2{0%,21%{opacity:0;transform:translateY(.5em) scale(.8)}25%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaType{0%,26%{opacity:0}28%,33%{opacity:1}35%,100%{opacity:0}}
@keyframes gaDot{0%,100%{transform:none;opacity:.4}50%{transform:translateY(-.25em);opacity:1}}
@keyframes gaA{0%,33%{opacity:0;transform:translateY(.4em)}36%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaL0{0%,35%{transform:scaleX(0)}39%,100%{transform:scaleX(1)}}
@keyframes gaL1{0%,39%{transform:scaleX(0)}43%,100%{transform:scaleX(1)}}
@keyframes gaL2{0%,43%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
@keyframes gaL3{0%,48%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}}
@keyframes gaL4{0%,55%{transform:scaleX(0)}58%,100%{transform:scaleX(1)}}
@keyframes gaL5{0%,58%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
@keyframes gaC0{0%,57%{opacity:0;transform:scale(.3)}60%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaC1{0%,60%{opacity:0;transform:scale(.3)}63%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaC2{0%,63%{opacity:0;transform:scale(.3)}66%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaOk0{0%,38%{opacity:0;transform:scale(.3)}42%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes gaOk1{0%,45%{opacity:0;transform:scale(.3)}49%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes gaOk2{0%,52%{opacity:0;transform:scale(.3)}56%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes gaR0{0%,62%{transform:scaleX(0)}70%,93%{transform:scaleX(.94)}99%,100%{transform:scaleX(0)}}
@keyframes gaR1{0%,65%{transform:scaleX(0)}73%,93%{transform:scaleX(.98)}99%,100%{transform:scaleX(0)}}
@keyframes gaR2{0%,68%{transform:scaleX(0)}76%,93%{transform:scaleX(.72)}99%,100%{transform:scaleX(0)}}
@keyframes gaE{0%,74%{opacity:0;transform:scale(.3)}78%,93%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes gaPass{0%,78%{opacity:0;transform:rotate(-6deg) scale(1.8)}82%,93%{opacity:1;transform:rotate(-6deg)}99%,100%{opacity:0}}
@keyframes gaM{0%,18%{background:#fff;border-color:rgba(67,97,238,.35);box-shadow:0 6px 14px -8px rgba(67,97,238,.6)}22%,100%{background:transparent;border-color:transparent;box-shadow:none}}
@media (max-width:600px){ .hv-gen{font-size:clamp(7px,2.45cqw,11px)} .ga-ms span{display:none} .ga-ms{justify-content:space-around} }
/* concept icons in stack chips */
.sl-chips .lg.cpt svg{stroke:var(--a1);fill:none;stroke-width:1.8}
@keyframes wiHL5{
 0%,1.2%{transform:none;border-color:var(--line);box-shadow:var(--shadow);background:var(--surface)}
 3.6%,16.8%{transform:translateX(8px) scale(1.02);border-color:color-mix(in srgb,var(--a2) 65%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--a2) 10%,var(--surface)),var(--surface) 70%);box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 16%,transparent),0 18px 36px -18px color-mix(in srgb,var(--a1) 55%,transparent)}
 20.4%,100%{transform:none;border-color:var(--line);box-shadow:var(--shadow);background:var(--surface)}}
@keyframes wiIc5{0%,1.2%{transform:none;filter:none}4.8%{transform:scale(1.12) rotate(-6deg);filter:brightness(1.1)}8.4%,16.8%{transform:scale(1.06);filter:brightness(1.1) drop-shadow(0 0 8px rgba(76,201,240,.6))}20.4%,100%{transform:none;filter:none}}
@keyframes wiFlow5{0%,15%{top:0;opacity:0}16.2%{top:0;opacity:1}19.8%{top:calc(100% - 8px);opacity:1}21%,100%{top:calc(100% - 8px);opacity:0}}

/* ===== Buttons: match the homepage (dark ink primary; closing CTA gets the homepage's animated gradient ring) ===== */
.btn-primary{background:var(--ink);color:#fff;border:0;box-shadow:0 10px 24px rgba(11,18,38,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(67,97,238,.28)}
.btn-primary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue)}
.fx-cta .btn-primary{border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--ang),#4CC9F0,#4361EE,#7209B7,rgba(114,9,183,.15),#4CC9F0) border-box;box-shadow:0 20px 40px rgba(67,97,238,.25);padding:17px 30px;font-weight:650;font-size:17px}
@keyframes sweep{to{--ang:360deg}}
@media (prefers-reduced-motion:no-preference){ .motion .fx-cta .btn-primary{animation:sweep 4s linear infinite} }

/* ===================== Legacy Modernization ===================== */
.ph-note{margin:14px 0 0;max-width:62ch;font-size:12.5px;line-height:1.55;color:var(--dim)}
/* ---- hero: COBOL estate -> Claude -> cloud-native services -> proven cutover (8s) ---- */
.hv-leg{--T:8s;--ok:#10B981;position:relative;width:100%;max-width:620px;aspect-ratio:600/570;margin-inline:auto;font-size:clamp(8px,2.1cqw,13px);color:#1E2537}
.hv-leg .pp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.hv-leg svg:not(.pp-svg){position:static;inset:auto;width:auto;height:auto;overflow:visible}
.hv-leg .pp-glow{left:20%;top:5%;width:70%;height:60%}
.lg-old{left:0;top:10%;width:44%;height:41%;background:linear-gradient(180deg,#F6F7FA,#EEF0F5);border-color:rgba(30,37,55,.1);overflow:hidden;display:flex;flex-direction:column}
.lg-tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:#5B6478;text-transform:uppercase}
.lg-tag svg{width:1.3em!important;height:1.3em!important;fill:none;stroke:#7A8399;stroke-width:1.7;stroke-linecap:round}
.lg-code{position:relative;flex:1;display:grid;align-content:start;gap:.18em;margin:0 -.3em}
.lg-ln{position:relative;display:flex;align-items:center;gap:.6em;padding:.12em .3em;border-radius:.35em;font-family:var(--mono);font-size:.66em;white-space:nowrap}
.lg-ln b{font-weight:400;color:#A3ABBD;width:1.6em;flex:none}
.lg-ln code{font-family:inherit;color:#5B6478;overflow:hidden;text-overflow:ellipsis}
.lg-ln em{margin-left:auto;font-style:normal;font-size:.86em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4361EE;background:#fff;border:1px solid rgba(67,97,238,.3);padding:.05em .4em;border-radius:.4em}
.lg-scan{position:absolute;left:0;right:0;top:0;height:2.2em;background:linear-gradient(180deg,transparent,rgba(76,201,240,.22) 45%,rgba(67,97,238,.35) 50%,rgba(76,201,240,.22) 55%,transparent);pointer-events:none}
.lg-orb{position:absolute;left:47.3%;top:30.5%;width:5.4%;aspect-ratio:1;transform:translateY(-50%);z-index:3;display:grid;place-items:center}
.lg-ring{position:absolute;inset:-.45em;border-radius:50%;border:.14em dashed rgba(67,97,238,.45)}
.lg-core{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 .3em rgba(217,119,87,.12),0 10px 22px -10px rgba(217,119,87,.7)}
.lg-core svg{width:62%!important;height:62%!important}
.lg-cap{position:absolute;top:calc(100% + .7em);font-size:.66em;font-weight:700;color:#D97757;white-space:nowrap}
.lg-new{left:56%;top:10%;width:44%;height:41%;display:flex;flex-direction:column;gap:.55em}
.lg-new .pp-hd{margin-bottom:.15em}
.lg-gw{position:relative;display:flex;align-items:center;gap:.5em;padding:.5em .7em;border-radius:.8em;background:linear-gradient(90deg,color-mix(in srgb,#4CC9F0 12%,#fff),color-mix(in srgb,#7209B7 8%,#fff));border:1px solid rgba(67,97,238,.15);font-size:.76em;font-weight:700;color:#1E2537}
.lg-gw svg{width:1.3em!important;height:1.3em!important;fill:none;stroke:#4361EE;stroke-width:1.8}
.lg-routes{margin-left:auto;display:flex;gap:.3em}
.lg-routes i{width:.45em;height:.45em;border-radius:50%;background:#4361EE;opacity:.3}
.lg-svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em}
.lg-svc{position:relative;display:grid;justify-items:center;gap:.4em;padding:.75em .3em .65em;border-radius:.8em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1)}
.lg-cube{width:2.3em;height:2.3em;border-radius:.7em;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.lg-cube svg{width:1.35em!important;height:1.35em!important;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linejoin:round}
.lg-svc b{font-size:.78em;font-weight:700}
.lg-dot{position:absolute;right:.5em;top:.5em;width:.5em;height:.5em;border-radius:50%;background:var(--ok);box-shadow:0 0 0 .2em rgba(16,185,129,.18)}
.lg-db{display:flex;align-items:center;gap:.5em;padding:.55em .7em;border-radius:.8em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1);font-size:.78em;font-weight:600;color:#1E2537}
.lg-db svg{width:1.4em!important;height:1.4em!important;fill:none;stroke:#4361EE;stroke-width:1.7}
.lg-ok{margin-left:auto;width:1.25em;height:1.25em;border-radius:50%;background:var(--ok);display:inline-grid;place-items:center;flex:none}
.lg-ok svg{width:.8em!important;height:.8em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lg-ready{left:0;top:57%;width:100%}
.lg-cut{display:inline-flex;align-items:center;gap:.35em;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#10B981,#059669);padding:.3em .7em .3em .45em;border-radius:1em;box-shadow:0 8px 16px -8px rgba(5,150,105,.7)}
.lg-cut svg{width:1em!important;height:1em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.lg-col{display:grid;gap:.45em;align-content:start;padding:.65em .75em;border-radius:.8em;background:#F5F7FD;border:1px solid rgba(67,97,238,.08);min-width:0}
.lg-k{font-size:.72em;font-weight:600;color:#5B6478}
.lg-bar{display:block;height:.6em;border-radius:1em;background:#E4E9F6;overflow:hidden}
.lg-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#4CC9F0,#4361EE 60%,#7209B7);transform:scaleX(.92);transform-origin:left}
.lg-v{font-size:.72em;color:#5B6478}.lg-v b{color:#1E2537;font-size:1.15em}
.lg-diff b{color:#059669}
.lg-par{display:block;width:100%!important;height:1.9em!important}
.lg-par path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lg-par .old{stroke:#A3ABBD;stroke-dasharray:4 4}
.lg-par .new{stroke:#4361EE}
.lg-rb{display:flex;align-items:center;gap:.5em;height:1.9em}
.lg-rb>svg{width:1.6em!important;height:1.6em!important;fill:none;stroke:#4361EE;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-rb .lg-ok{margin-left:0}
@media (prefers-reduced-motion:no-preference){
 .motion .hv-leg .pp-flow{animation:ppFlow 1.1s linear infinite}
 .motion .hv-leg .pp-glow{animation:ppGlow 6s ease-in-out infinite alternate}
 .motion .lg-scan{animation:lgScan var(--T) linear infinite}
 .motion .lg-ln.r0{animation:lgR0 var(--T) ease infinite}.motion .lg-ln.r1{animation:lgR1 var(--T) ease infinite}.motion .lg-ln.r2{animation:lgR2 var(--T) ease infinite}
 .motion .lg-ln.r0 em{animation:lgE0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .lg-ln.r1 em{animation:lgE1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .lg-ln.r2 em{animation:lgE2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .lg-ring{animation:spn 9s linear infinite}
 .motion .lg-core{animation:lgOrb var(--T) ease infinite}
 .motion .lg-svc.s0{animation:lgS0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .lg-svc.s1{animation:lgS1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .lg-svc.s2{animation:lgS2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .lg-db{animation:lgDb var(--T) ease infinite}
 .motion .lg-gw{animation:lgGw var(--T) ease infinite}
 .motion .lg-routes i{animation:gaDot 1s ease-in-out infinite}.motion .lg-routes i:nth-child(2){animation-delay:.15s}.motion .lg-routes i:nth-child(3){animation-delay:.3s}
 .motion .lg-bar i{animation:lgBar var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .lg-col:first-child .lg-v{animation:lgV1 var(--T) ease infinite}
 .motion .lg-par .new{stroke-dasharray:200;animation:lgPar var(--T) ease-in-out infinite}
 .motion .lg-diff{animation:lgDiff var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .lg-rb .lg-ok,.motion .lg-rb + .lg-v{animation:lgRb var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .lg-live{animation:lgLive var(--T) ease infinite}
 .motion .lg-live i{animation:ppLive 1.4s ease-in-out infinite}
 .motion .lg-cut{animation:lgCut var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
}
@keyframes lgScan{0%{top:-2.2em;opacity:0}3%{opacity:1}26%{top:100%;opacity:1}28%,100%{top:100%;opacity:0}}
@keyframes lgR0{0%,8%,94%,100%{background:transparent}10%,92%{background:rgba(67,97,238,.08)}}
@keyframes lgR1{0%,13%,94%,100%{background:transparent}15%,92%{background:rgba(67,97,238,.08)}}
@keyframes lgR2{0%,18%,94%,100%{background:transparent}20%,92%{background:rgba(67,97,238,.08)}}
@keyframes lgE0{0%,8%{opacity:0;transform:scale(.4)}11%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgE1{0%,13%{opacity:0;transform:scale(.4)}16%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgE2{0%,18%{opacity:0;transform:scale(.4)}21%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgOrb{0%,22%,40%,100%{box-shadow:0 0 0 .3em rgba(217,119,87,.12),0 10px 22px -10px rgba(217,119,87,.7)}28%,32%{box-shadow:0 0 0 .6em rgba(217,119,87,.18),0 0 1.4em .4em rgba(217,119,87,.45)}}
@keyframes lgS0{0%,31%{opacity:0;transform:translateY(.6em) scale(.85)}35%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgS1{0%,36%{opacity:0;transform:translateY(.6em) scale(.85)}40%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgS2{0%,41%{opacity:0;transform:translateY(.6em) scale(.85)}45%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgGw{0%,28%{opacity:0;transform:translateY(-.4em)}32%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgDb{0%,46%{opacity:0;transform:translateY(.4em)}50%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgBar{0%,50%{transform:scaleX(0)}64%,92%{transform:scaleX(.92)}98%,100%{transform:scaleX(0)}}
@keyframes lgV1{0%,60%{opacity:0}65%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes lgPar{0%,54%{stroke-dashoffset:200}68%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:200}}
@keyframes lgDiff{0%,68%{opacity:0;transform:scale(.5)}72%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgRb{0%,73%{opacity:0;transform:scale(.4)}77%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgLive{0%,79%{opacity:0;transform:scale(.6)}83%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes lgCut{0%,82%{opacity:0;transform:scale(.4) rotate(-8deg)}86%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@media (max-width:600px){ .hv-leg{font-size:clamp(7px,2.45cqw,11px)} .lg-ln code{font-size:.92em} .lg-cap{display:none} }

/* ---- definition block: answer-first copy + dictionary card ---- */
.fx-define .whatis{align-items:center}
.dfn{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:24px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 10%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 22px 44px -28px rgba(23,40,94,.32);overflow:hidden;isolation:isolate}
.dfn::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3))}
.dfn-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.dfn h3{margin:0;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.03em;line-height:1.1}
.dfn-q{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.dfn-rule{display:block;height:2px;margin:16px 0;border-radius:2px;background:linear-gradient(90deg,var(--a2),var(--a1) 40%,transparent);transform-origin:left}
.dfn p{margin:0;color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.6}
.dfn-code{position:absolute;right:-10px;bottom:-6px;z-index:-1;display:grid;gap:7px;opacity:.5}
.dfn-code i{display:block;height:7px;border-radius:7px;background:color-mix(in srgb,var(--a1) 10%,transparent)}
.dfn-code i:nth-child(1){width:120px}.dfn-code i:nth-child(2){width:80px;margin-left:20px}.dfn-code i:nth-child(3){width:100px;margin-left:20px}.dfn-code i:nth-child(4){width:60px}
@media (prefers-reduced-motion:no-preference){
 .motion .dfn:not(.in) .dfn-rule{transform:scaleX(0)}
 .motion .dfn.in .dfn-rule{transform:none;transition:transform 1s .5s cubic-bezier(.22,1,.36,1)}
 .motion .dfn.in .dfn-code i{animation:dfnType 4.5s ease-in-out infinite;transform-origin:left}
 .motion .dfn.in .dfn-code i:nth-child(2){animation-delay:.3s}.motion .dfn.in .dfn-code i:nth-child(3){animation-delay:.6s}.motion .dfn.in .dfn-code i:nth-child(4){animation-delay:.9s}
}
@keyframes dfnType{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}

/* ---- what we modernize: cards refactor from greyed legacy into the brand palette ---- */
.mg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.mg-grid.n5 .mg:nth-child(-n+3){grid-column:span 2}.mg-grid.n5 .mg:nth-child(n+4){grid-column:span 3}
.mg{position:relative;display:grid;align-content:start;gap:10px;padding:clamp(20px,2vw,26px);border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -22px rgba(23,40,94,.26);overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.mg:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 24px 44px -24px rgba(23,40,94,.36);border-color:color-mix(in srgb,var(--a1) 24%,var(--line))}
.mg-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1);margin-bottom:4px}
.mg-ic svg{width:22px;height:22px;stroke:#fff;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mg:hover .mg-ic svg{transform:rotate(-10deg) scale(1.08)}
.mg h3{font-size:clamp(18px,1.45vw,20px);letter-spacing:-.02em;line-height:1.2}
.mg p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.mg-scan{position:absolute;top:0;bottom:0;left:-40%;width:40%;z-index:-1;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a2) 18%,transparent),transparent);opacity:0}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-mod .mg[data-rise]{opacity:1;transform:none;filter:grayscale(1);border-style:dashed;transition:filter .9s ease,border-color .9s,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;transition-delay:calc(.25s + var(--k) * 140ms),calc(.25s + var(--k) * 140ms),0s,0s}
 .motion .fx-mod .mg[data-rise]:not(.in){opacity:.45}
 .motion .fx-mod .mg.in{filter:none;border-style:solid;animation:mgIn .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 140ms)}
 .motion .fx-mod .mg.in .mg-scan{animation:mgScan 1.1s ease-out backwards;animation-delay:calc(.15s + var(--k) * 140ms)}
}
@keyframes mgIn{from{opacity:.45;transform:translateY(16px)}}
@keyframes mgScan{0%{left:-40%;opacity:1}100%{left:110%;opacity:0}}
@media (max-width:1000px){ .mg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .mg-grid.n5 .mg:nth-child(n){grid-column:span 1} .mg-grid.n5 .mg:last-child{grid-column:span 2} }
@media (max-width:620px){ .mg-grid{grid-template-columns:1fr} .mg-grid.n5 .mg:last-child{grid-column:auto} }

/* ---- approaches compared ---- */
.ap-answer{max-width:78ch;margin:0 0 clamp(18px,2vw,26px)}
.ap-wrap{border-radius:22px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 18px 40px -28px rgba(23,40,94,.3);overflow:hidden}
.ap{width:100%;border-collapse:collapse;font-size:15px}
.ap thead th{text-align:left;padding:16px 20px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:color-mix(in srgb,var(--a1) 4%,var(--surface));border-bottom:1px solid var(--line)}
.ap tbody tr{position:relative;transition:background .3s}
.ap tbody tr+tr{border-top:1px solid var(--line)}
.ap tbody tr:hover{background:color-mix(in srgb,var(--a2) 6%,transparent)}
.ap td,.ap tbody th{padding:18px 20px;vertical-align:top;text-align:left;line-height:1.5}
.ap td{color:var(--muted)}
.ap tbody th{font-weight:650;color:var(--ink);width:24%}
.ap-name{display:block;font-size:16.5px;letter-spacing:-.01em}
.ap-meter{display:flex;gap:4px;margin-top:10px}
.ap-meter i{width:22px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--a1) 12%,transparent)}
.ap-meter i.on{background:linear-gradient(90deg,var(--a2),var(--a1))}
.ap tbody tr:nth-child(3) th .ap-meter i.on{background:linear-gradient(90deg,var(--a1),var(--a3))}
.ap-note{margin-top:16px}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-approach .ap-wrap[data-rise]{opacity:1;transform:none}
 .motion .fx-approach .ap-wrap:not(.in) tbody tr{opacity:0;transform:translateX(-16px)}
 .motion .fx-approach .ap-wrap.in tbody tr{animation:apRow .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.15s + var(--k) * 120ms)}
 .motion .fx-approach .ap-wrap.in .ap-meter i.on{animation:apMeter .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.5s + var(--k) * 120ms)}
}
@keyframes apRow{from{opacity:0;transform:translateX(-16px)}}
@keyframes apMeter{from{transform:scaleX(0)}}
@media (max-width:760px){
 .ap,.ap tbody,.ap tr,.ap td,.ap tbody th{display:block;width:auto}
 .ap thead{display:none}
 .ap tbody tr{padding:16px 18px}
 .ap td,.ap tbody th{padding:4px 0}
 .ap td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:8px 0 2px}
 .ap tbody th{padding-bottom:6px}
}

/* ---- method: proportional timeline + stage cards + safeguards ---- */
.mt{display:grid;gap:18px}
.mt-bar{position:relative;display:flex;gap:6px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 12px 26px -20px rgba(23,40,94,.26);overflow:hidden}
.mt-seg{position:relative;flex:0 0 calc(var(--w) - 5px);min-width:96px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:11px;background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 14%,var(--surface)),color-mix(in srgb,var(--a1) 14%,var(--surface)));color:var(--ink);white-space:nowrap}
.mt-seg:nth-child(3){background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 16%,var(--surface)),color-mix(in srgb,var(--a3) 14%,var(--surface)))}
.mt-seg b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--a1)}
.mt-seg em{font-style:normal;font-size:13px;font-weight:650}
.mt-run{position:absolute;top:6px;bottom:6px;left:6px;width:60px;border-radius:11px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);pointer-events:none;opacity:0}
.mt-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.mt-st{position:relative;display:grid;align-content:start;gap:10px;padding:clamp(18px,1.8vw,24px);border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -22px rgba(23,40,94,.26);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.mt-st:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 22px 40px -24px rgba(23,40,94,.34)}
.mt-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1)}
.mt-ic svg{width:20px;height:20px;stroke:#fff}
.mt-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.mt-t{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--a1);padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--a1) 8%,transparent)}
.mt-st h3{font-size:clamp(18px,1.4vw,20px);letter-spacing:-.02em;line-height:1.2}
.mt-st p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.sg{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sg li{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--ok,#10B981) 30%,var(--line));font-size:14.5px;font-weight:600;color:var(--ink)}
.sg-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#10B981 14%,#fff)}
.sg-ic svg{width:15px;height:15px;stroke:#059669}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-method .mt[data-rise]{opacity:1;transform:none}
 .motion .fx-method .mt:not(.in) .mt-seg{transform:scaleX(0)}
 .motion .fx-method .mt.in .mt-seg{transform-origin:left;animation:mtSeg .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.15s + var(--k) * 260ms)}
 .motion .fx-method .mt.in .mt-run{animation:mtRun 5s ease-in-out 1.6s infinite}
 .motion .fx-method .mt:not(.in) .mt-st{opacity:0;transform:translateY(18px)}
 .motion .fx-method .mt.in .mt-st{animation:fxUp .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.35s + var(--k) * 260ms)}
 .motion .fx-method .mt.in .mt-st .mt-ic{animation:mtIc 5s ease-out 1.6s infinite;animation-delay:calc(1.6s + var(--k) * 1.1s)}
 .motion .fx-method .sg[data-rise]{opacity:1;transform:none}
 .motion .fx-method .sg:not(.in) li{opacity:0;transform:translateY(10px)}
 .motion .fx-method .sg.in li{animation:fxPop .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--k) * 110ms)}
}
@keyframes mtSeg{from{transform:scaleX(0);opacity:0}}
@keyframes mtRun{0%{left:6px;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(100% - 66px);opacity:0}}
@keyframes mtIc{0%,100%{transform:none;box-shadow:0 10px 20px -12px var(--a1)}6%{transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in srgb,var(--a2) 20%,transparent),0 10px 20px -12px var(--a1)}16%{transform:none;box-shadow:0 10px 20px -12px var(--a1)}}
@media (max-width:1000px){ .mt-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .mt-list{grid-template-columns:1fr} .mt-bar{flex-direction:column} .mt-seg{flex:none;min-width:0} .mt-run{display:none} .sg li{font-size:13.5px} }

/* ---- related services ---- */
.rl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.rl{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;padding:clamp(18px,1.8vw,24px);border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -22px rgba(23,40,94,.26);text-decoration:none;color:inherit;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.rl:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 22px 40px -24px rgba(23,40,94,.34);border-color:color-mix(in srgb,var(--a1) 24%,var(--line))}
.rl:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
.rl-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.rl-ic svg{width:20px;height:20px;stroke:#fff}
.rl-b h3{font-size:17.5px;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}
.rl-b p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.rl-go{color:var(--a1);font-weight:700;transition:transform .3s}
.rl:hover .rl-go{transform:translateX(4px)}
.rl-back{margin:18px 0 0}
.rl-back a{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--a1);text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);transition:border-color .3s,gap .3s}
.rl-back a:hover{border-color:var(--a1);gap:12px}
@media (max-width:900px){ .rl-grid{grid-template-columns:1fr} }

/* ---- CTA with two buttons ---- */
.ctab-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fx-cta .ctab-btns .btn-ghost{padding:17px 26px;font-size:16px}
/* two-button closing CTA: copy on top, buttons in a row beneath it */
.ctab-in:has(.ctab-btns .btn-ghost){grid-template-columns:minmax(0,1fr)}
.ctab-in:has(.ctab-btns .btn-ghost) h2{max-width:22ch}
.ctab-in:has(.ctab-btns .btn-ghost) p{max-width:62ch}

/* =====================================================================
   SUB PAGES: "engineering blueprint" motion language, distinct from the hubs.
   Hubs rise, blur in and iris open. Sub pages wipe in with precise clip reveals,
   scan lines, numbered sections, a drafted blueprint grid and a reading-progress rail.
   Everything is scoped to body[data-tier="sub"]; hub pages are untouched.
   ===================================================================== */
[data-tier="sub"] main{counter-reset:sx}
[data-tier="sub"] main>section.sec{counter-increment:sx}
/* numbered section index replaces the eyebrow rule */
[data-tier="sub"] main>section.sec .eyebrow::before{content:counter(sx,decimal-leading-zero);width:auto!important;height:auto;background:none;color:var(--a1);font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:6px;border:1px solid color-mix(in srgb,var(--a1) 30%,transparent);background:color-mix(in srgb,var(--a1) 6%,var(--surface))}
/* heading accent bar */
[data-tier="sub"] .sec-head h2::after{content:"";display:block;width:56px;height:3px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3));transform-origin:left}
[data-tier="sub"] .sec-head.center h2::after{margin-inline:auto}
/* reading progress rail (scroll-driven, no JS) */
@supports (animation-timeline: scroll()){
 [data-tier="sub"]::before{content:"";position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3));transform-origin:left;transform:scaleX(0);animation:subProg linear both;animation-timeline:scroll(root);pointer-events:none}
}
@keyframes subProg{to{transform:scaleX(1)}}
/* blueprint grid: stronger lines on sub-page heroes */
[data-tier="sub"] .ph::after{background-image:linear-gradient(rgba(67,97,238,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(67,97,238,.09) 1px,transparent 1px);background-size:32px 32px}

@media (prefers-reduced-motion:no-preference){
 /* ---- hero: words wipe in left to right, copy slides in on a clip, the visual is scanned in ---- */
 .motion [data-tier="sub"] .ph h1 .w{opacity:1;filter:none;transform:none;clip-path:inset(-.25em 100% -.3em -.1em);animation:subWipe .75s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--k) * 70ms + 120ms)}
 .motion [data-tier="sub"] .ph-copy>*{animation-name:subSlide;animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
 .motion [data-tier="sub"] .ph-copy>h1~*{animation-name:subSlide;animation-timing-function:cubic-bezier(.65,0,.35,1)}
 .motion [data-tier="sub"] .fx-hero .proof li{animation:subChip .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(1s + var(--k) * 120ms)}
 .motion [data-tier="sub"] .ph::after{animation:subDraft 1.6s cubic-bezier(.65,0,.35,1) both}
 .motion [data-tier="sub"] .ph-vis{animation:subScanIn 1.2s cubic-bezier(.65,0,.35,1) .25s both}
 .motion [data-tier="sub"] .ph-vis::after{content:"";position:absolute;left:-4%;right:-4%;top:0;height:2px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,#4CC9F0 15%,#4361EE 50%,#7209B7 85%,transparent);box-shadow:0 0 14px 2px rgba(76,201,240,.55);opacity:0;animation:subScanLine 1.2s cubic-bezier(.65,0,.35,1) .25s both}

 /* ---- section heads: heading wipes, accent bar draws, index pops ---- */
 .motion [data-tier="sub"] .sec-head[data-rise]{opacity:1;transform:none}
 .motion [data-tier="sub"] .sec-head h2{clip-path:inset(-.25em 100% -.35em -.1em);transition:clip-path .9s cubic-bezier(.65,0,.35,1) .1s}
 .motion [data-tier="sub"] .sec-head.in h2{clip-path:inset(-.25em -.1em -.35em -.1em)}
 .motion [data-tier="sub"] .sec-head h2::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.22,1,.36,1) .85s}
 .motion [data-tier="sub"] .sec-head.in h2::after{transform:none}
 .motion [data-tier="sub"] main>section.sec .sec-head .eyebrow{clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(14,end)}
 .motion [data-tier="sub"] main>section.sec .sec-head.in .eyebrow{clip-path:inset(0 0 0 0)}

 /* ---- masked headings (problem, definition, FAQ, CTA): wipe instead of rise ---- */
 .motion [data-tier="sub"] .fw>span{transform:none!important;transition:none!important}
 .motion [data-tier="sub"] .fw{clip-path:inset(-.25em 100% -.35em -.1em);transition:clip-path .75s cubic-bezier(.65,0,.35,1);transition-delay:calc(.1s + var(--k) * 65ms)}
 .motion [data-tier="sub"] .in .fw{clip-path:inset(-.25em -.1em -.35em -.1em)}
 .motion [data-tier="sub"] .whatis-copy .eyebrow,.motion [data-tier="sub"] .faq-head .eyebrow{clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(14,end)}
 .motion [data-tier="sub"] .whatis-copy.in .eyebrow,.motion [data-tier="sub"] .faq-head.in .eyebrow{clip-path:inset(0 0 0 0)}

 /* ---- problem: image is scanned in, pain cards wipe in from the left with a rule ---- */
 .motion [data-tier="sub"] .fx-problem .prob-media.in .frame{animation:subScanIn 1.1s cubic-bezier(.65,0,.35,1) .1s backwards}
 .motion [data-tier="sub"] .fx-problem .pain.in{animation:subCard .8s cubic-bezier(.65,0,.35,1) backwards;animation-delay:calc(var(--d) * 140ms)}
 .motion [data-tier="sub"] .fx-problem .pain.in::before{animation:none}
 .motion [data-tier="sub"] .fx-problem .pain.in .pain-i{animation:subPing .9s ease-out backwards;animation-delay:calc(.55s + var(--d) * 140ms)}

 /* ---- FAQ: rows wipe in from the left; an accent rail marks the open answer ---- */
 .motion [data-tier="sub"] .fx-faq details.in{animation:subRow .7s cubic-bezier(.65,0,.35,1) backwards;animation-delay:calc(var(--d) * 80ms)}
 .motion [data-tier="sub"] .fx-faq .faq-head.in .fx-qmark{animation:subQ 1.1s .3s cubic-bezier(.22,1,.36,1) backwards,fxFloat 6s 1.5s ease-in-out infinite}

 /* ---- closing CTA: band is scanned open top to bottom (hubs iris open from the centre) ---- */
 .motion [data-tier="sub"] .fx-cta .ctab-in[data-rise]{clip-path:inset(0 0 100% 0 round 32px)}
 .motion [data-tier="sub"] .fx-cta .ctab-in.in{clip-path:inset(0 0 0 0 round 32px);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
 .motion [data-tier="sub"] .fx-cta .ctab-in::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,#4CC9F0 15%,#4361EE 50%,#7209B7 85%,transparent);box-shadow:0 0 16px 3px rgba(76,201,240,.5);opacity:0}
 .motion [data-tier="sub"] .fx-cta .ctab-in.in::after{animation:subScanLine 1.1s cubic-bezier(.65,0,.35,1) both}
}
[data-tier="sub"] .fx-faq details::before{content:"";position:absolute;left:-14px;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.22,1,.36,1)}
[data-tier="sub"] .fx-faq details[open]::before{transform:none}
[data-tier="sub"] .fx-faq .faq-more::before{content:none}
@media (max-width:620px){ [data-tier="sub"] .fx-faq details::before{left:-8px} }

@keyframes subWipe{to{clip-path:inset(-.25em -.1em -.3em -.1em)}}
@keyframes subSlide{from{opacity:0;transform:translateX(-18px);clip-path:inset(-40px 100% -40px -40px)}to{opacity:1;transform:none;clip-path:inset(-40px -40px -40px -40px)}}
@keyframes subChip{from{opacity:0;transform:translateX(-12px);border-color:var(--a1)}}
@keyframes subDraft{from{-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 0%);mask-image:linear-gradient(90deg,#000 0%,transparent 0%)}to{-webkit-mask-image:linear-gradient(90deg,#000 100%,transparent 100%);mask-image:linear-gradient(90deg,#000 100%,transparent 100%)}}
@keyframes subScanIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-20% -20% -20% -20%)}}
@keyframes subScanLine{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes subCard{from{opacity:0;transform:translateX(-14px);clip-path:inset(0 100% 0 0 round 20px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 20px)}}
@keyframes subRow{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes subPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes subQ{from{opacity:0;transform:rotate(-24deg) scale(.6)}}
/* legacy hero centre: AI bot (brand gradient) */
.lg-core{background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7);box-shadow:0 0 0 .3em rgba(67,97,238,.14),0 10px 22px -10px rgba(67,97,238,.75)}
.lg-core svg{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lg-core svg .ey{fill:#fff;stroke:none}
.lg-cap{color:#4361EE}
@keyframes lgOrb{0%,22%,40%,100%{box-shadow:0 0 0 .3em rgba(67,97,238,.14),0 10px 22px -10px rgba(67,97,238,.75)}28%,32%{box-shadow:0 0 0 .6em rgba(76,201,240,.22),0 0 1.4em .4em rgba(67,97,238,.5)}}
@media (prefers-reduced-motion:no-preference){ .motion .lg-core svg .ey{animation:lgBlink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center} }
@keyframes lgBlink{0%,92%,100%{transform:none}95%{transform:scaleY(.15)}}

/* ---- What we modernize: continuous "refactor" loop. Each card takes a turn: gradient ring traces the border,
        a scan passes, its legacy code bits refactor into gradient lines, and a progress bar fills ---- */
.mg-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 55%,var(--a2) 70%,var(--a1) 82%,var(--a3) 92%,transparent 100%);-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);opacity:0}
.mg-bar{position:absolute;left:clamp(20px,2vw,26px);right:clamp(20px,2vw,26px);bottom:14px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--a1) 8%,transparent);overflow:hidden}
.mg-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleX(0);transform-origin:left}
.mg{padding-bottom:calc(clamp(20px,2vw,26px) + 10px)}
.mg:hover .mg-ring{opacity:1;animation:sweep 2.4s linear infinite}
.mg:hover @media (prefers-reduced-motion:no-preference){
 .motion .fx-mod .mg.in{--cy:calc(var(--n) * 2s);--dl:calc(1.4s + var(--k) * 2s)}
 .motion .fx-mod .mg.in .mg-ring{animation:mgRing var(--cy) linear infinite var(--dl),sweep 2s linear infinite}
 .motion .fx-mod .mg.in .mg-bar i{animation:mgBar var(--cy) cubic-bezier(.4,0,.2,1) infinite var(--dl)}
 .motion .fx-mod .mg.in  .motion .fx-mod .mg.in  .motion .fx-mod .mg.in .mg-ic{animation:mgIc var(--cy) cubic-bezier(.34,1.56,.64,1) infinite var(--dl)}
 .motion .fx-mod .mg.in .mg-scan{animation:mgScan 1.1s ease-out backwards calc(.15s + var(--k) * 140ms),mgScanLoop var(--cy) ease-in-out infinite var(--dl)}
 .motion .fx-mod .mg.in h3{animation:mgH var(--cy) ease infinite var(--dl)}
 .motion .fx-mod .mg.in{animation:mgIn .7s cubic-bezier(.22,1,.36,1) backwards calc(var(--k) * 140ms),mgLift var(--cy) ease-in-out infinite var(--dl)}
 .motion .fx-mod .mg.in:hover{animation-play-state:running,paused}
}
@keyframes mgRing{0%{opacity:0}3%,17%{opacity:1}21%,100%{opacity:0}}
@keyframes mgBar{0%{transform:scaleX(0);opacity:1}17%{transform:scaleX(1);opacity:1}21%{transform:scaleX(1);opacity:0}21.1%,100%{transform:scaleX(0);opacity:0}}
@keyframes mgIc{0%,22%,100%{transform:none;filter:none}4%{transform:rotate(-10deg) scale(1.12);filter:saturate(1.3)}9%,17%{transform:scale(1.05);filter:saturate(1.2) drop-shadow(0 0 10px rgba(76,201,240,.55))}}
@keyframes mgScanLoop{0%{left:-40%;opacity:0}2%{opacity:1}14%{left:110%;opacity:0}100%{left:110%;opacity:0}}
@keyframes mgH{0%,2%,22%,100%{color:var(--ink)}6%,18%{color:var(--a1)}}
@keyframes mgLift{0%,22%,100%{translate:0 0;box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -22px rgba(23,40,94,.26)}5%,17%{translate:0 -6px;box-shadow:0 1px 2px rgba(23,40,94,.05),0 26px 46px -24px rgba(67,97,238,.42)}}

/* legacy -> modern transform glyph (top-right of each What We Modernize card) */
.mg-tx{position:absolute;right:20px;top:24px;display:flex;align-items:center;gap:6px}
.mg-old,.mg-new{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.mg-old{background:#EEF0F5;border:1px dashed #C3C9D6}
.mg-old svg{width:16px;height:16px;fill:none;stroke:#9AA3B5;stroke-width:1.7;stroke-linecap:round}
.mg-new{background:color-mix(in srgb,var(--a1) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--a1) 25%,transparent);transition:background .4s,box-shadow .4s}
.mg-new svg{width:16px;height:16px;fill:none;stroke:var(--a1);stroke-width:1.7;stroke-linejoin:round;transition:stroke .4s}
.mg-flow{display:flex;gap:3px}
.mg-flow i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--a1) 30%,transparent)}
.mg:hover .mg-new{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 8px 16px -8px var(--a1)}
.mg:hover .mg-new svg{stroke:#fff}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-mod .mg.in .mg-new{animation:mgNew var(--cy) cubic-bezier(.34,1.56,.64,1) infinite var(--dl)}
 .motion .fx-mod .mg.in .mg-new svg{animation:mgNewS var(--cy) ease infinite var(--dl)}
 .motion .fx-mod .mg.in .mg-old{animation:mgOld var(--cy) ease infinite var(--dl)}
 .motion .fx-mod .mg.in .mg-flow i{animation:mgFlow var(--cy) linear infinite;animation-delay:var(--dl)}
 .motion .fx-mod .mg.in .mg-flow i:nth-child(2){animation-name:mgFlow2}.motion .fx-mod .mg.in .mg-flow i:nth-child(3){animation-name:mgFlow3}
}
@keyframes mgOld{0%,2%,22%,100%{opacity:1;transform:none}8%,16%{opacity:.45;transform:scale(.9)}}
@keyframes mgNew{0%,7%,22%,100%{background:color-mix(in srgb,var(--a1) 8%,var(--surface));box-shadow:none;transform:none}10%{transform:scale(1.18) rotate(-8deg)}12%,18%{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 8px 16px -8px var(--a1);transform:none}}
@keyframes mgNewS{0%,8%,20%,100%{stroke:var(--a1)}11%,18%{stroke:#fff}}
@keyframes mgFlow{0%,2%{background:color-mix(in srgb,var(--a1) 30%,transparent)}3%,5%{background:var(--a2);transform:scale(1.5)}6%,100%{background:color-mix(in srgb,var(--a1) 30%,transparent);transform:none}}
@keyframes mgFlow2{0%,4%{background:color-mix(in srgb,var(--a1) 30%,transparent)}5%,7%{background:var(--a1);transform:scale(1.5)}8%,100%{background:color-mix(in srgb,var(--a1) 30%,transparent);transform:none}}
@keyframes mgFlow3{0%,6%{background:color-mix(in srgb,var(--a1) 30%,transparent)}7%,9%{background:var(--a3);transform:scale(1.5)}10%,100%{background:color-mix(in srgb,var(--a1) 30%,transparent);transform:none}}

/* ===== Approaches compared v2: icons, change-depth gauge, AI-accelerated row, rolling spotlight ===== */
.ap-wrap{position:relative}
.ap tbody tr{transition:background .35s}
.ap tbody th{width:27%}
.ap td:nth-child(2){width:20%}.ap td:nth-child(3){width:30%}
.ap-head{display:flex;align-items:center;gap:12px}
.ap-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--a1) 18%,transparent);transition:background .35s,box-shadow .35s}
.ap-ic svg{width:19px;height:19px;stroke:var(--a1);transition:stroke .35s}
.ap-name{font-size:16.5px;letter-spacing:-.01em}
.ap-ai{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 6px 14px -6px var(--a1);flex:none}
.ap-ai svg{width:14px;height:14px;stroke:#fff}
.ap-depth{display:block;margin:12px 0 0 50px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--a1) 10%,transparent);overflow:hidden;max-width:150px}
.ap-depth i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--a2),var(--a1) 60%,var(--a3));transform:scaleX(var(--f));transform-origin:left}
.ap-meter{display:none}
.ap tbody th{position:relative}
.ap tbody th::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3));transform:scaleY(0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ap tbody tr:hover th::before,.ap tbody tr.is-ai th::before{transform:none}
.ap tbody tr.is-ai{background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 9%,transparent),transparent 70%)}
.ap tbody tr:hover .ap-ic,.ap tbody tr.is-ai .ap-ic{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 8px 18px -10px var(--a1)}
.ap tbody tr:hover .ap-ic svg,.ap tbody tr.is-ai .ap-ic svg{stroke:#fff}
.ap tbody tr:hover td{color:var(--ink)}
.ap-foot{display:flex;align-items:center;gap:12px;margin:0;padding:14px 20px;border-top:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 8%,var(--surface)),color-mix(in srgb,var(--a3) 6%,var(--surface)));font-weight:600;font-size:15px;color:var(--ink)}
.fx-approach .ap-note{display:none}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-approach .ap-wrap.in .ap-depth i{animation:apDepth 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.45s + var(--k) * 150ms)}
 .motion .fx-approach .ap-wrap.in tbody tr{animation:apRow .6s cubic-bezier(.22,1,.36,1) backwards calc(.15s + var(--k) * 120ms),apSpot calc(var(--n) * 2.4s) ease-in-out infinite calc(2s + var(--k) * 2.4s)}
 .motion .fx-approach .ap-wrap.in tbody tr .ap-ic{animation:apIc calc(var(--n) * 2.4s) cubic-bezier(.34,1.56,.64,1) infinite calc(2s + var(--k) * 2.4s)}
 .motion .fx-approach .ap-wrap.in tbody tr .ap-depth i{animation:apDepth 1s cubic-bezier(.22,1,.36,1) backwards calc(.45s + var(--k) * 150ms),apDepthLoop calc(var(--n) * 2.4s) ease-in-out infinite calc(2s + var(--k) * 2.4s)}
 .motion .fx-approach .ap-wrap.in .ap-ai{animation:apAi 2.6s ease-in-out infinite}
 .motion .fx-approach .ap-wrap.in .ap-foot{animation:fxUp .7s cubic-bezier(.22,1,.36,1) backwards 1s}
 .motion .fx-approach .ap-wrap.in tbody tr:hover{animation-play-state:running,paused}
}
@keyframes apDepth{from{transform:scaleX(0)}}
@keyframes apDepthLoop{0%,4%,24%,100%{transform:scaleX(var(--f))}10%{transform:scaleX(0)}18%{transform:scaleX(var(--f))}}
@keyframes apSpot{0%,24%,100%{background-color:transparent}5%,19%{background-color:color-mix(in srgb,var(--a2) 7%,transparent)}}
@keyframes apIc{0%,24%,100%{transform:none}5%{transform:scale(1.14) rotate(-8deg)}10%,19%{transform:scale(1.05)}}
@keyframes apAi{0%,100%{box-shadow:0 6px 14px -6px var(--a1),0 0 0 0 color-mix(in srgb,var(--a2) 45%,transparent)}50%{box-shadow:0 6px 14px -6px var(--a1),0 0 0 6px transparent}}
@media (max-width:760px){
 .ap tbody th,.ap td:nth-child(n){width:auto}
 .ap-depth{margin-left:50px}
 .ap-foot{align-items:flex-start;font-size:14px}
}

/* =====================================================================
   LEGACY MODERNIZATION v2 layout
   ===================================================================== */
/* ---- hero: before / after panel ---- */
.hv-ba{--T:9s;--ok:#10B981;position:relative;width:100%;max-width:660px;aspect-ratio:auto;margin-inline:auto;font-size:clamp(9px,2.3cqw,14.5px);color:#1E2537}
.fx-hero .ph-vis:has(.hv-ba){align-self:center;min-height:0}
.hv-ba svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.hv-ba .pp-glow{position:absolute;left:5%;top:5%;width:90%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.2),rgba(114,9,183,.1) 55%,transparent);filter:blur(10px);z-index:0}
.ba-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 4.2em minmax(0,1fr);gap:0;padding:1em;border-radius:1.4em;background:rgba(255,255,255,.75);border:1px solid rgba(67,97,238,.14);box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(23,40,94,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ba-side{position:relative;border-radius:1em;padding:.9em .9em 1em;overflow:hidden;min-width:0}
.ba-side.old{background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C9CFDB}
.ba-side.new{background:#fff;border:1px solid rgba(67,97,238,.2);box-shadow:0 14px 30px -20px rgba(67,97,238,.45)}
.ba-hd{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25em .5em;margin-bottom:.8em}
.ba-hd b{grid-column:1/-1;grid-row:2;font-size:1.02em;letter-spacing:-.01em}
.ba-tag{font-family:var(--mono);font-size:.68em;letter-spacing:.14em;text-transform:uppercase;padding:.2em .55em;border-radius:.4em}
.old .ba-tag{color:#6B7385;background:#E2E5EC}
.new .ba-tag{color:#fff;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.ba-ic svg{width:1.4em!important;height:1.4em!important;fill:none;stroke:#8A93A6;stroke-width:1.7}
.ba-live{display:inline-flex;align-items:center;gap:.35em;font-size:.66em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#059669;padding:.2em .55em;border-radius:1em;background:rgba(16,185,129,.1)}
.ba-live i{width:.5em;height:.5em;border-radius:50%;background:var(--ok)}
.ba-code{position:relative;display:grid;gap:.12em;font-family:var(--mono);font-size:.78em}
.ba-ln{display:flex;gap:.7em;padding:.18em .35em;border-radius:.35em;white-space:nowrap;min-width:0}
.ba-ln b{font-weight:400;color:#A6AEBF;width:1em;flex:none;text-align:right}
.ba-ln code{font-family:inherit;overflow:hidden;text-overflow:ellipsis}
.old .ba-ln code{color:#5B6478}
.new .ba-ln code{color:#1E2537}
.new .ba-ln em{font-style:normal}.new .ba-ln .k{color:#7209B7;font-weight:600}.new .ba-ln .t{color:#4361EE}.new .ba-ln .f{color:#0E7490}
.ba-scan{position:absolute;left:0;right:0;top:0;height:calc(100% / 7);border-radius:.35em;background:linear-gradient(90deg,rgba(76,201,240,.18),rgba(67,97,238,.22));box-shadow:inset 3px 0 0 #4361EE;pointer-events:none}
.ba-mid{position:relative;display:grid;place-items:center}
.ba-wire{position:absolute;top:50%;height:2px;width:50%;left:0;background:rgba(67,97,238,.15);overflow:hidden}
.ba-wire.r{left:50%}
.ba-wire i{position:absolute;top:0;bottom:0;width:60%;background:linear-gradient(90deg,transparent,#4CC9F0,#4361EE,transparent)}
.ba-bot{position:relative;z-index:1;width:3em;height:3em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7);box-shadow:0 0 0 .3em rgba(67,97,238,.14),0 12px 24px -10px rgba(67,97,238,.8)}
.ba-bot svg{width:1.7em!important;height:1.7em!important;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ba-bot svg .ey{fill:#fff;stroke:none}
.ba-ring{position:absolute;inset:-.45em;border-radius:50%;border:.13em dashed rgba(67,97,238,.45)}
.ba-cap{position:absolute;top:calc(50% + 2.3em);font-size:.66em;font-weight:700;color:#4361EE;white-space:nowrap}
.ba-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.45em;margin-top:.9em}
.ba-chips span{display:inline-flex;align-items:center;gap:.4em;font-size:.74em;font-weight:600;padding:.4em .7em .4em .4em;border-radius:1em;background:#fff;border:1px solid rgba(16,185,129,.3)}
.ba-chips i{width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;background:var(--ok)}
.ba-chips span{transition:none}
.ba-chips i svg{width:.85em!important;height:.85em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
 .motion .ba-scan{animation:baScan var(--T) steps(1,end) infinite}
 .motion .old .ba-ln{animation:baOld var(--T) ease infinite;animation-delay:calc(var(--i) * var(--T) / 12)}
 .motion .new .ba-ln code{clip-path:inset(0 100% 0 0);animation:baType var(--T) cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--i) * var(--T) / 12)}
 .motion .ba-wire i{animation:baWire 1.2s linear infinite}
 .motion .ba-wire.r i{animation-delay:.6s}
 .motion .ba-ring{animation:spn 9s linear infinite}
 .motion .ba-bot{animation:baBot 2.4s ease-in-out infinite}
 .motion .ba-bot svg .ey{animation:lgBlink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
 .motion .ba-live{animation:baLive var(--T) ease infinite}
 .motion .ba-live i{animation:ppLive 1.4s ease-in-out infinite}
 .motion .ba-chips .c0{animation:baC0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ba-chips .c1{animation:baC1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ba-chips .c2{animation:baC2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ba-chips .c0 i{animation:baI0 var(--T) ease infinite}.motion .ba-chips .c1 i{animation:baI1 var(--T) ease infinite}.motion .ba-chips .c2 i{animation:baI2 var(--T) ease infinite}
 .motion .hv-ba .pp-glow{animation:ppGlow 6s ease-in-out infinite alternate}
}
/* scan steps down the 7 COBOL lines (each 1/12 of the loop), then rests */
@keyframes baScan{0%{transform:translateY(0);opacity:1}8.33%{transform:translateY(100%)}16.66%{transform:translateY(200%)}25%{transform:translateY(300%)}33.33%{transform:translateY(400%)}41.66%{transform:translateY(500%)}50%{transform:translateY(600%)}58.33%,100%{transform:translateY(600%);opacity:0}}
@keyframes baOld{0%,1%{background:rgba(67,97,238,.0)}2%,7%{background:rgba(67,97,238,.08)}9%,100%{background:transparent}}
@keyframes baType{0%,2%{clip-path:inset(0 100% 0 0)}8%,90%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes baWire{from{left:-60%}to{left:100%}}
@keyframes baBot{0%,100%{box-shadow:0 0 0 .3em rgba(67,97,238,.14),0 12px 24px -10px rgba(67,97,238,.8)}50%{box-shadow:0 0 0 .55em rgba(76,201,240,.2),0 12px 24px -10px rgba(67,97,238,.8)}}
@keyframes baLive{0%,60%{opacity:0;transform:scale(.6)}65%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes baC0{0%,62%{opacity:.45;border-color:rgba(30,37,55,.12)}66%,93%{opacity:1;border-color:rgba(16,185,129,.35)}98%,100%{opacity:.45;border-color:rgba(30,37,55,.12)}}
@keyframes baI0{0%,62%{background:#D5DAE6;transform:scale(.85)}65%{transform:scale(1.25)}66%,93%{background:var(--ok);transform:none}98%,100%{background:#D5DAE6}}
@keyframes baC1{0%,68%{opacity:.45;border-color:rgba(30,37,55,.12)}72%,93%{opacity:1;border-color:rgba(16,185,129,.35)}98%,100%{opacity:.45;border-color:rgba(30,37,55,.12)}}
@keyframes baI1{0%,68%{background:#D5DAE6;transform:scale(.85)}71%{transform:scale(1.25)}72%,93%{background:var(--ok);transform:none}98%,100%{background:#D5DAE6}}
@keyframes baC2{0%,74%{opacity:.45;border-color:rgba(30,37,55,.12)}78%,93%{opacity:1;border-color:rgba(16,185,129,.35)}98%,100%{opacity:.45;border-color:rgba(30,37,55,.12)}}
@keyframes baI2{0%,74%{background:#D5DAE6;transform:scale(.85)}77%{transform:scale(1.25)}78%,93%{background:var(--ok);transform:none}98%,100%{background:#D5DAE6}}
@container (max-width:520px){
 .ba-panel{grid-template-columns:1fr;grid-template-rows:auto 4.6em auto}
 .ba-mid .ba-wire{top:0;bottom:0;left:50%;width:2px;height:50%}.ba-mid .ba-wire.r{top:50%}
 .ba-cap{top:auto;left:calc(50% + 2.4em)}
 .hv-ba{font-size:clamp(9px,2.8cqw,12.5px)}
}

/* ---- stat band ---- */
.statb{position:relative;padding:0 0 clamp(8px,1.5vw,18px);margin-top:calc(-1 * clamp(10px,2vw,30px))}
.sb{list-style:none;margin:0;padding:clamp(18px,2vw,26px) clamp(16px,2vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:24px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 10%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 22px 46px -30px rgba(23,40,94,.35)}
.sb li{position:relative;display:grid;align-content:start;gap:4px;padding:6px clamp(14px,2vw,28px)}
.sb li+li::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.sb small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sb-n{font-size:clamp(40px,4.4vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sb span{color:var(--muted);font-size:15px;line-height:1.45}
@media (prefers-reduced-motion:no-preference){
 .motion .sb[data-rise]{opacity:1;transform:none}
 .motion .sb:not(.in) li{opacity:0;transform:translateY(14px)}
 .motion .sb.in li{animation:fxUp .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 120ms)}
}
@media (max-width:860px){ .sb{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px} .sb li:nth-child(3)::before{display:none} }
@media (max-width:420px){ .sb{grid-template-columns:1fr} .sb li::before{display:none} }

/* ---- problem without cards: tinted panel of three rows ---- */
.pr2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.fx-prob2 .prob-copy h2{font-size:clamp(30px,3.8vw,50px)}
.fx-prob2 .prob-copy .plain{margin:14px 0 0;color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);line-height:1.6}
.pr2-rows{list-style:none;margin:0;padding:clamp(10px,1.4vw,16px);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 9%,var(--surface)),color-mix(in srgb,var(--a3) 7%,var(--surface)));border:1px solid color-mix(in srgb,var(--a1) 10%,transparent)}
.pr2-rows li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:clamp(14px,1.6vw,20px) clamp(12px,1.6vw,18px);border-radius:16px;transition:background .35s}
.pr2-rows li+li{border-top:1px solid color-mix(in srgb,var(--a1) 10%,transparent)}
.pr2-rows li:hover{background:rgba(255,255,255,.6)}
.pr2-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid color-mix(in srgb,#E5484D 25%,transparent);box-shadow:0 8px 18px -12px rgba(229,72,77,.6)}
.pr2-ic svg{width:22px;height:22px;stroke:#E5484D}
.pr2-t{display:grid;gap:3px}
.pr2-t b{font-size:clamp(17px,1.35vw,19px);letter-spacing:-.015em;color:var(--ink)}
.pr2-t span{color:var(--muted);font-size:15px;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows[data-rise]{opacity:1;transform:none}
 .motion .pr2-rows:not(.in) li{opacity:0}
 .motion .pr2-rows.in li{animation:subCard .75s cubic-bezier(.65,0,.35,1) backwards,pr2Alert 7.5s ease-in-out infinite;animation-delay:calc(var(--k) * 150ms),calc(1.4s + var(--k) * 2.5s)}
 .motion .pr2-rows.in li .pr2-ic{animation:pr2Ic 7.5s ease-in-out infinite;animation-delay:calc(1.4s + var(--k) * 2.5s)}
}
@keyframes pr2Alert{0%,30%,100%{background:transparent}6%,24%{background:rgba(255,255,255,.75)}}
@keyframes pr2Ic{0%,30%,100%{transform:none;box-shadow:0 8px 18px -12px rgba(229,72,77,.6)}4%{transform:rotate(-10deg) scale(1.1)}8%{transform:rotate(8deg) scale(1.1)}12%,24%{transform:none;box-shadow:0 0 0 6px rgba(229,72,77,.12),0 8px 18px -12px rgba(229,72,77,.6)}}
@media (max-width:860px){ .pr2{grid-template-columns:1fr} }

/* ---- what we modernize: tabs with From -> To ---- */
.mt2{display:grid;gap:18px}
.mt2-list{display:flex;flex-wrap:wrap;gap:8px}
.mt2-tab{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 12px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-weight:650;font-size:15px;color:var(--muted);cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s,box-shadow .3s,background .3s}
.mt2-tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--a1) 30%,var(--line))}
.mt2-tab:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.mt2-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 8%,transparent);transition:background .3s}
.mt2-ic svg{width:16px;height:16px;stroke:var(--a1);transition:stroke .3s}
.mt2-tab[aria-selected="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--a1) 35%,var(--line));box-shadow:0 12px 24px -16px rgba(67,97,238,.6)}
.mt2-tab[aria-selected="true"] .mt2-ic{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.mt2-tab[aria-selected="true"] .mt2-ic svg{stroke:#fff}
.mt2-prog{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--a1) 10%,transparent);opacity:0;overflow:hidden}
.mt2-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3))}
.mt2-tab[aria-selected="true"] .mt2-prog{opacity:1}
.mt2-stage{display:grid}
.mt2-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s .5s;padding:clamp(20px,2.6vw,34px);border-radius:24px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 10%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 22px 46px -30px rgba(23,40,94,.35)}
.mt2-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s}
.mt2-flow{display:grid;grid-template-columns:minmax(0,1fr) clamp(90px,10vw,140px) minmax(0,1fr);align-items:stretch}
.mt2-box{display:grid;align-content:center;gap:6px;padding:clamp(18px,2vw,26px);border-radius:18px;min-height:120px}
.mt2-box small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.mt2-box b{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.25}
.mt2-box.from{background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C3C9D6}
.mt2-box.from small{color:#8A93A6}.mt2-box.from b{color:#4B5363}
.mt2-box.to{position:relative;background:#fff;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3)) border-box;box-shadow:0 18px 36px -24px rgba(67,97,238,.6)}
.mt2-box.to small{color:var(--a1)}.mt2-box.to b{color:var(--ink)}
.mt2-arrow{position:relative;display:grid;place-items:center}
.mt2-line{position:absolute;left:8px;right:8px;top:50%;height:2px;background:color-mix(in srgb,var(--a1) 14%,transparent);overflow:hidden}
.mt2-line::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid var(--a1);border-right:2px solid var(--a1);transform:rotate(45deg)}
.mt2-line>i{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,transparent,var(--a2),var(--a1),transparent)}
.mt2-bot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 0 0 5px color-mix(in srgb,var(--a1) 12%,transparent),0 12px 22px -10px var(--a1)}
.mt2-bot svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mt2-bot svg .ey{fill:#fff;stroke:none}
.mt2-line-txt{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.55}
@media (prefers-reduced-motion:no-preference){
 .motion .mt2-tab[aria-selected="true"] .mt2-prog i{animation:sxProg 4.5s linear forwards}
 .motion .mt2.idle .mt2-prog i,.motion .mt2:not(.in) .mt2-prog i{animation-play-state:paused}
 .motion .mt2-line>i{animation:baWire 1.3s linear infinite}
 .motion .mt2-panel.on .mt2-box.from{animation:mtFrom .5s cubic-bezier(.22,1,.36,1) both}
 .motion .mt2-panel.on .mt2-bot{animation:fxPop .5s .15s cubic-bezier(.34,1.56,.64,1) both}
 .motion .mt2-panel.on .mt2-box.to{animation:mtTo .6s .3s cubic-bezier(.22,1,.36,1) both}
 .motion .mt2-panel.on .mt2-line-txt{animation:fxUp .5s .45s cubic-bezier(.22,1,.36,1) both}
 .motion .mt2-bot svg .ey{animation:lgBlink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes mtFrom{from{opacity:0;transform:translateX(-14px);filter:grayscale(1)}}
@keyframes mtTo{from{opacity:0;transform:translateX(14px) scale(.97)}}
@media (max-width:760px){
 .mt2-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.mt2-list::-webkit-scrollbar{display:none}
 .mt2-tab{flex:none}
 .mt2-flow{grid-template-columns:1fr;grid-template-rows:auto 64px auto}
 .mt2-line{left:50%;right:auto;top:6px;bottom:6px;width:2px;height:auto}
 .mt2-line::after{right:auto;top:auto;bottom:-1px;left:-4px;transform:rotate(135deg)}
 .mt2-box{min-height:0}
}

/* ---- approaches: "Our sweet spot" tag ---- */
.ap-tag{display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:4px 10px 4px 6px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 8px 16px -8px var(--a1);white-space:nowrap}
.ap-tag svg{width:13px;height:13px;stroke:#fff}
@media (prefers-reduced-motion:no-preference){ .motion .fx-approach .ap-wrap.in .ap-tag{animation:fxPop .5s 1s cubic-bezier(.34,1.56,.64,1) backwards,apAi 2.6s 1.5s ease-in-out infinite} }

/* ---- method: horizontal timeline with numbered nodes ---- */
.tl2{position:relative;padding-top:6px}
.tl2-rail{position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);top:30px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--a1) 12%,transparent);overflow:hidden}
.tl2-rail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--a2),var(--a1) 55%,var(--a3));transform-origin:left}
.tl2-rail b{position:absolute;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.tl2-list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.tl2-st{display:grid;justify-items:center;text-align:center;align-content:start;gap:8px}
.tl2-node{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 0 0 6px var(--bg,#F5F7FC),0 0 0 7px color-mix(in srgb,var(--a1) 20%,transparent),0 14px 26px -12px var(--a1);margin-bottom:8px}
.tl2-st h3{font-size:clamp(18px,1.45vw,20px);letter-spacing:-.02em;line-height:1.2}
.tl2-w{font-size:13px;font-weight:700;color:var(--a1);padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--a1) 8%,transparent)}
.tl2-st p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.55;max-width:30ch}
.sg2{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:16px clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,#10B981 25%,var(--line))}
.sg2 li{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.sg2-ck{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#10B981}
.sg2-ck svg{width:14px;height:14px;stroke:#fff;stroke-width:3}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-tl2 .tl2[data-rise]{opacity:1;transform:none}
 .motion .fx-tl2 .tl2:not(.in) .tl2-rail i{transform:scaleX(0)}
 .motion .fx-tl2 .tl2.in .tl2-rail i{transition:transform 1.6s cubic-bezier(.65,0,.35,1) .2s}
 .motion .fx-tl2 .tl2.in .tl2-rail b{animation:tlRun 4.5s ease-in-out 2s infinite}
 .motion .fx-tl2 .tl2:not(.in) .tl2-st{opacity:0}
 .motion .fx-tl2 .tl2.in .tl2-st{animation:fxUp .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.2s + var(--k) * 400ms)}
 .motion .fx-tl2 .tl2.in .tl2-node{animation:fxPop .55s cubic-bezier(.34,1.56,.64,1) backwards,tlNode 6s ease-out infinite;animation-delay:calc(.2s + var(--k) * 400ms),calc(2.2s + var(--k) * 1.5s)}
 .motion .fx-tl2 .sg2[data-rise]{opacity:1;transform:none}
 .motion .fx-tl2 .sg2:not(.in) li{opacity:0}
 .motion .fx-tl2 .sg2.in li{animation:fxUp .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 110ms)}
 .motion .fx-tl2 .sg2.in .sg2-ck{animation:fxPop .45s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.2s + var(--k) * 110ms)}
}
@keyframes tlRun{from{left:-80px}to{left:100%}}
@keyframes tlNode{0%,100%{transform:none}6%{transform:scale(1.12)}14%{transform:none}}
@media (max-width:860px){
 .tl2-list{grid-template-columns:1fr;gap:22px}
 .tl2-rail{left:25px;right:auto;top:26px;bottom:26px;width:3px;height:auto}
 .tl2-rail i{transform-origin:top}
 .motion .fx-tl2 .tl2:not(.in) .tl2-rail i{transform:scaleY(0)}
 .tl2-rail b{display:none}
 .tl2-st{grid-template-columns:52px minmax(0,1fr);justify-items:start;text-align:left;column-gap:16px}
 .tl2-node{grid-row:1 / span 3;margin:0}
 .tl2-st p{max-width:none}
 .sg2{justify-content:flex-start}
}

/* ---- proof: full-width dark band ---- */
.pd{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(30px,4.4vw,64px);border-radius:32px;background:linear-gradient(135deg,#0B1226,#141B3D 55%,#1E0F3D);color:#E8ECF8}
.pd-glow{position:absolute;inset:-30% 30% auto -10%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(76,201,240,.25),rgba(67,97,238,.18) 45%,transparent);filter:blur(20px)}
.pd .eyebrow{color:#8FB3FF}
.pd h2{color:#fff;font-size:clamp(26px,3vw,40px);margin:8px 0 18px}
.pd-num{margin:0 0 18px;font-size:clamp(28px,3.2vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.1;background:linear-gradient(90deg,#7FDBFF,#8EA2FF 55%,#C89BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd dl{display:grid;gap:10px;margin:0}
.pd-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:baseline}
.pd dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A94B8}
.pd dd{margin:0;color:#D5DBEE}
.pd-q{position:relative;margin:0;padding:clamp(22px,2.6vw,34px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pd-qm{position:absolute;top:-18px;left:20px;font-size:90px;line-height:1;font-weight:800;background:linear-gradient(135deg,#4CC9F0,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd-q blockquote{margin:12px 0 16px;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:#fff}
.pd-q figcaption{color:#A9B2CF;font-size:14.5px}
.pd .todo{color:#FFD58A!important;background:repeating-linear-gradient(-45deg,rgba(255,213,138,.1),rgba(255,213,138,.1) 8px,rgba(255,213,138,.04) 8px,rgba(255,213,138,.04) 16px);border:1px dashed rgba(255,213,138,.6);-webkit-text-fill-color:#FFD58A;display:inline-block}
.pd-num.todo{font-size:clamp(18px,1.8vw,24px)!important;letter-spacing:0;font-weight:700!important}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-pdark .pd[data-rise]{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round 32px)}
 .motion .fx-pdark .pd.in{clip-path:inset(0 0 0 0 round 32px);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
 .motion .fx-pdark .pd.in .pd-glow{animation:fxDrift1 14s ease-in-out infinite alternate}
 .motion .fx-pdark .pd:not(.in) .pd-q{opacity:0;transform:translateX(20px)}
 .motion .fx-pdark .pd.in .pd-q{transition:opacity .7s .6s,transform .8s .6s cubic-bezier(.22,1,.36,1)}
}
@media (max-width:860px){ .pd{grid-template-columns:1fr} .pd-row{grid-template-columns:1fr;gap:2px} }

/* ---- related: slim row of text links ---- */
.rx{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px);padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rx-h{font-family:var(--mono);font-size:12px!important;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rx-list li+li{border-left:1px solid var(--line)}
.rx-list a{display:grid;gap:3px;padding:6px clamp(14px,2vw,24px);text-decoration:none;color:inherit}
.rx-t{font-weight:700;font-size:16.5px;color:var(--ink);transition:color .3s}
.rx-go{display:inline-block;color:var(--a1);transition:transform .3s}
.rx-d{color:var(--muted);font-size:14px;line-height:1.45}
.rx-list a:hover .rx-t{color:var(--a1)}.rx-list a:hover .rx-go{transform:translateX(5px)}
.rx-list a:focus-visible{outline:3px solid var(--a1);outline-offset:2px;border-radius:8px}
.fx-rx .rl-back{margin-top:16px}
[data-tier="sub"] .fx-rx .rx-h::after{content:none}
@media (max-width:860px){ .rx{grid-template-columns:1fr} .rx-list{grid-template-columns:1fr} .rx-list li+li{border-left:0;border-top:1px solid var(--line)} .rx-list a{padding:12px 0} }

/* ---- FAQ: two-column accordion ---- */
.faq-2c .faq-head{position:static;margin-bottom:clamp(18px,2vw,28px);max-width:820px}
.faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:start}
.faq-cols details:nth-child(-n+2){border-top:1px solid var(--line-2)}
.faq-2c .faq-more{margin-top:18px}
.faq-2c .faq-more .faq-cols{margin-top:14px}
@media (max-width:860px){ .faq-cols{grid-template-columns:1fr} .faq-cols details:nth-child(2){border-top:0} }

/* ---- closing CTA: split with two offer cards ---- */
.ct2{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;align-items:center}
.ct2 .cta-trust{grid-column:1/-1}
.ct2-l p{margin:12px 0 0}
.ct2-of{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.of{position:relative;display:grid;gap:12px;align-content:start;justify-items:start;padding:clamp(18px,2vw,24px);border-radius:20px;background:rgba(255,255,255,.75);border:1px solid rgba(67,97,238,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 36px -26px rgba(23,40,94,.4);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.of:hover{transform:translateY(-4px)}
.of.hi{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#4CC9F0,#4361EE,#7209B7,rgba(114,9,183,.15),#4CC9F0) border-box;border:2px solid transparent;box-shadow:0 22px 44px -24px rgba(67,97,238,.5)}
.of-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 8%,#fff);border:1px solid color-mix(in srgb,var(--a1) 20%,transparent)}
.of.hi .of-ic{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));border:0}
.of-ic svg{width:20px;height:20px;stroke:var(--a1)}.of.hi .of-ic svg{stroke:#fff}
.of h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em}
.of .btn{padding:12px 18px;font-size:14.5px;white-space:normal;text-align:left}
.fx-cta2 .of .btn-primary{border:0;background:var(--ink);padding:12px 18px;font-size:14.5px;animation:none}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-cta2 .of.hi{animation:sweep 4s linear infinite}
 .motion .fx-cta2 .ctab-in:not(.in) .of{opacity:0;transform:translateY(16px)}
 .motion .fx-cta2 .ctab-in.in .of{transition:opacity .7s,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(.9s + var(--k) * 150ms)}
 .motion .fx-cta2 .ctab-in .of .btn{opacity:1;transform:none}
}
@media (max-width:980px){ .ct2{grid-template-columns:1fr!important} }
@media (max-width:520px){ .ct2-of{grid-template-columns:1fr} }
.of{display:flex;flex-direction:column;align-items:flex-start}
.of .btn{margin-top:auto;width:100%;justify-content:space-between}
.of h3{margin-bottom:6px}

/* =====================================================================
   LEGACY MODERNIZATION v3 polish
   ===================================================================== */
/* section rhythm: soft tinted bands behind the problem and method sections */
[data-tier="sub"] .fx-prob2,[data-tier="sub"] .fx-tl2{position:relative;isolation:isolate}
[data-tier="sub"] .fx-prob2::before,[data-tier="sub"] .fx-tl2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a2) 6%,transparent) 18%,color-mix(in srgb,var(--a3) 5%,transparent) 82%,transparent)}

/* ---- hero: bigger panel, dark mainframe terminal vs. bright cloud editor ---- */
[data-tier="sub"] .ph-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hv-ba{max-width:720px;font-size:clamp(9.5px,2.25cqw,15px)}
.ba-panel{padding:1.1em;border-radius:1.6em;background:rgba(255,255,255,.7)}
.ba-side.old{background:linear-gradient(180deg,#0F1626,#0B1120);border:1px solid #1E2740;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 18px 36px -22px rgba(11,17,32,.8)}
.ba-side.old::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);border-radius:inherit}
.old .ba-tag{color:#7EE787;background:rgba(126,231,135,.1);border:1px solid rgba(126,231,135,.25)}
.old .ba-hd b{color:#E6EAF5}
.old .ba-ic svg{stroke:#5C6784}
.old .ba-ln b{color:#3E4A66}
.old .ba-ln code{color:#7EE787;text-shadow:0 0 6px rgba(126,231,135,.35)}
.old .ba-scan{background:linear-gradient(90deg,rgba(126,231,135,.16),rgba(76,201,240,.14));box-shadow:inset 3px 0 0 #7EE787}
.ba-side.new{box-shadow:0 22px 44px -24px rgba(67,97,238,.55)}
.ba-side.new .ba-hd{position:relative}
.ba-mid{min-width:4.6em}
.ba-bot{width:3.3em;height:3.3em}
.ba-chips{justify-content:center}
@media (max-width:900px){ [data-tier="sub"] .ph-grid{grid-template-columns:1fr} }

/* ---- stat band: dark glass strip, icons, gradient numbers ---- */
.sb{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#0B1226,#141B3D 55%,#1E0F3D);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -34px rgba(11,18,38,.7);padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,26px)}
.sb::before{content:"";position:absolute;inset:-40% 40% -40% -10%;z-index:-1;background:radial-gradient(closest-side,rgba(76,201,240,.22),transparent 70%)}
.sb::after{content:"";position:absolute;inset:-40% -10% -40% 50%;z-index:-1;background:radial-gradient(closest-side,rgba(114,9,183,.28),transparent 70%)}
.sb li+li::before{background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent)}
.sb small{color:#8A94B8}
.sb-n{background:linear-gradient(90deg,#7FDBFF,#8EA2FF 55%,#C89BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb .sb-l{color:#C9D1EA}
.sb-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.sb-ic svg{width:19px;height:19px;stroke:#8EC5FF}
@media (prefers-reduced-motion:no-preference){
 .motion .sb.in .sb-ic{animation:fxPop .5s cubic-bezier(.34,1.56,.64,1) backwards,sbIc 8s ease-in-out infinite;animation-delay:calc(.2s + var(--k) * 120ms),calc(2s + var(--k) * 2s)}
 .motion .sb::before{animation:fxDrift1 14s ease-in-out infinite alternate}
 .motion .sb::after{animation:fxDrift2 17s ease-in-out infinite alternate}
}
@keyframes sbIc{0%,20%,100%{background:rgba(255,255,255,.07);transform:none}6%,14%{background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7);transform:translateY(-3px)}}
.sb-ic svg{transition:stroke .3s}

/* ---- problem rows: numbered, with a live micro-visual per pain ---- */
.pr2-rows{padding:clamp(12px,1.4vw,18px);background:#fff;box-shadow:0 1px 2px rgba(23,40,94,.04),0 24px 50px -30px rgba(23,40,94,.35)}
.pr2-rows li{grid-template-columns:auto auto minmax(0,1fr) auto;gap:14px 16px}
.pr2-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#E5484D;font-weight:600;opacity:.8}
.pv{display:block;width:74px;height:44px;border-radius:12px;background:color-mix(in srgb,#E5484D 5%,#fff);border:1px solid color-mix(in srgb,#E5484D 18%,transparent);position:relative;overflow:hidden}
.pv-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:8px 10px}
.pv-bars i{width:8px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#F59E0B,#E5484D);transform-origin:bottom}
.pv-bars i:nth-child(1){height:30%}.pv-bars i:nth-child(2){height:45%}.pv-bars i:nth-child(3){height:58%}.pv-bars i:nth-child(4){height:74%}.pv-bars i:nth-child(5){height:96%}
.pv-clock{display:grid;place-items:center}
.pv-clock svg{width:32px;height:32px;fill:none;stroke:#E5484D;stroke-width:2.4;stroke-linecap:round}
.pv-clock circle{stroke-width:2.2;opacity:.6}
.pv-clock .h1,.pv-clock .h2{transform-origin:20px 20px}
.pv-link{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--mono);font-size:10px;font-weight:700}
.pv-a,.pv-b{padding:3px 5px;border-radius:5px;background:#fff;border:1px solid color-mix(in srgb,#E5484D 25%,transparent);color:#B42318}
.pv-gap{position:relative;width:14px;height:2px;background:repeating-linear-gradient(90deg,#E5484D 0 3px,transparent 3px 6px)}
.pv-gap::after{content:"×";position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);font-size:12px;font-weight:800;color:#E5484D;font-family:var(--display)}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-bars i{animation:pvBar 2.4s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i,0) * 1s)}
 .motion .pr2-rows.in .pv-bars i:nth-child(2){animation-delay:.12s}.motion .pr2-rows.in .pv-bars i:nth-child(3){animation-delay:.24s}.motion .pr2-rows.in .pv-bars i:nth-child(4){animation-delay:.36s}.motion .pr2-rows.in .pv-bars i:nth-child(5){animation-delay:.48s}
 .motion .pr2-rows.in .pv-clock .h1{animation:spn 6s linear infinite}
 .motion .pr2-rows.in .pv-clock .h2{animation:spn 1.2s linear infinite}
 .motion .pr2-rows.in .pv-gap::after{animation:pvX 1.8s ease-in-out infinite}
 .motion .pr2-rows.in .pv-a,.motion .pr2-rows.in .pv-b{animation:pvNode 1.8s ease-in-out infinite}
 .motion .pr2-rows.in .pv-b{animation-delay:.9s}
}
@keyframes pvBar{0%{transform:scaleY(.2)}60%,100%{transform:scaleY(1)}}
@keyframes pvX{0%,100%{opacity:.4;transform:translate(-50%,-58%) scale(.9)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.2)}}
@keyframes pvNode{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px color-mix(in srgb,#E5484D 15%,transparent)}}
@media (max-width:620px){ .pr2-rows li{grid-template-columns:auto minmax(0,1fr)} .pr2-n,.pr2-rows li>span[aria-hidden]{display:none} }

/* ---- tabs: segmented rail with a sliding indicator; richer From -> To boxes ---- */
.mt2-list{position:relative;width:max-content;max-width:100%;padding:6px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 12%,var(--line));box-shadow:0 12px 30px -24px rgba(23,40,94,.4);gap:4px}
.mt2-tab{position:relative;z-index:1;border:0;background:transparent;box-shadow:none!important}
.mt2-tab[aria-selected="true"]{color:#fff}
.mt2-tab[aria-selected="true"] .mt2-ic{background:rgba(255,255,255,.18)}
.mt2-ind{position:absolute;z-index:0;border-radius:999px;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 22px -10px var(--a1);transition:left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1)}
.mt2-prog{background:rgba(255,255,255,.25);bottom:5px}
.mt2-prog i{background:#fff}
.mt2-panel{padding:clamp(22px,3vw,40px)}
.mt2-box{position:relative;min-height:170px;align-content:end;padding-top:64px}
.mt2-bi{position:absolute;left:clamp(18px,2vw,26px);top:clamp(18px,2vw,22px);width:44px;height:44px;border-radius:13px;display:grid;place-items:center}
.from .mt2-bi{background:#E3E6ED}.from .mt2-bi svg{width:21px;height:21px;stroke:#8A93A6}
.to .mt2-bi{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -10px var(--a1)}.to .mt2-bi svg{width:21px;height:21px;stroke:#fff}
.mt2-box.from b{text-decoration:line-through;text-decoration-color:rgba(138,147,166,.0);text-decoration-thickness:2px;transition:text-decoration-color .4s}
.mt2-ok{position:absolute;right:16px;top:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#10B981;box-shadow:0 6px 14px -6px rgba(16,185,129,.8)}
.mt2-ok svg{width:15px;height:15px;stroke:#fff;stroke-width:3}
.mt2-flow{grid-template-columns:minmax(0,1fr) clamp(110px,12vw,170px) minmax(0,1fr)}
.mt2-bot{width:58px;height:58px}
.mt2-bot svg{width:30px;height:30px}
.mt2-line{height:3px}
.mt2-line-txt{display:flex;align-items:flex-start;gap:12px;font-size:clamp(16.5px,1.35vw,19px);color:var(--ink)}
.mt2-spark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 10%,transparent)}
.mt2-spark svg{width:16px;height:16px;stroke:var(--a1)}
@media (prefers-reduced-motion:no-preference){
 .motion .mt2-panel.on .mt2-box.from b{animation:mtStrike 4.5s ease forwards}
 .motion .mt2-panel.on .mt2-ok{animation:fxPop .5s .9s cubic-bezier(.34,1.56,.64,1) both}
 .motion .mt2-panel.on .mt2-bot{animation:fxPop .5s .15s cubic-bezier(.34,1.56,.64,1) both,baBot 2.4s .7s ease-in-out infinite}
}
@keyframes mtStrike{0%,12%{text-decoration-color:rgba(138,147,166,0)}22%,100%{text-decoration-color:rgba(138,147,166,.55)}}
@media (max-width:760px){
 .mt2-list{width:auto;border-radius:20px}
 .mt2-box{min-height:0;padding-top:70px}
 .mt2-flow{grid-template-columns:1fr;grid-template-rows:auto 76px auto}
}

/* ---- method timeline: icon nodes and stage cards ---- */
.tl2-rail{top:36px}
.tl2-node{position:relative;width:64px;height:64px;margin-bottom:14px}
.tl2-node svg{width:26px;height:26px;stroke:#fff}
.tl2-node b{position:absolute;right:-6px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--a1);background:#fff;box-shadow:0 4px 10px -4px rgba(23,40,94,.4)}
.tl2-card{display:grid;justify-items:center;gap:8px;width:100%;padding:clamp(16px,1.8vw,22px);border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 10%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 16px 34px -24px rgba(23,40,94,.3);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.tl2-st:hover .tl2-card{transform:translateY(-4px);box-shadow:0 1px 2px rgba(23,40,94,.05),0 24px 44px -24px rgba(67,97,238,.4)}
.tl2-card p{margin:0}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-tl2 .tl2.in .tl2-card{animation:tlCard 6s ease-out infinite;animation-delay:calc(2.2s + var(--k) * 1.5s)}
}
@keyframes tlCard{0%,24%,100%{border-color:color-mix(in srgb,var(--a1) 10%,var(--line))}6%,18%{border-color:color-mix(in srgb,var(--a1) 45%,var(--line))}}
@media (max-width:860px){
 .tl2-rail{left:31px;top:32px}
 .tl2-st{grid-template-columns:64px minmax(0,1fr)}
 .tl2-node{grid-row:1;margin:0}
 .tl2-card{justify-items:start;text-align:left}
}
/* What We Modernize: faster rotation (2.5s per tab) and snappier panel entrance */
@media (prefers-reduced-motion:no-preference){
 .motion .mt2-tab[aria-selected="true"] .mt2-prog i{animation-duration:2.5s}
 .motion .mt2-panel.on .mt2-box.from{animation-duration:.3s}
 .motion .mt2-panel.on .mt2-bot{animation:fxPop .35s .08s cubic-bezier(.34,1.56,.64,1) both,baBot 2.4s .45s ease-in-out infinite}
 .motion .mt2-panel.on .mt2-box.to{animation-duration:.4s;animation-delay:.15s}
 .motion .mt2-panel.on .mt2-line-txt{animation-duration:.35s;animation-delay:.25s}
 .motion .mt2-panel.on .mt2-ok{animation-duration:.35s;animation-delay:.45s}
 .motion .mt2-panel.on .mt2-box.from b{animation:mtStrikeF .9s ease forwards}
}
.mt2-panel,.mt2-panel.on{transition-duration:.25s,.3s,0s}
.mt2-ind{transition-duration:.3s}
@keyframes mtStrikeF{0%,25%{text-decoration-color:rgba(138,147,166,0)}60%,100%{text-decoration-color:rgba(138,147,166,.55)}}

/* ===== Approaches compared v3 animation: gliding highlight, live change gauge ===== */
.ap-wrap{position:relative;isolation:isolate}
.ap{position:relative;z-index:1}
.ap tbody tr,.ap tbody tr.is-ai{background:transparent}
.ap tbody tr.is-ai{background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 5%,transparent),transparent 60%)}
.ap-hl{position:absolute;left:8px;right:8px;top:0;z-index:0;height:0;border-radius:16px;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 12%,#fff),color-mix(in srgb,var(--a1) 6%,#fff) 55%,color-mix(in srgb,var(--a3) 6%,#fff));
 box-shadow:0 14px 30px -18px rgba(67,97,238,.45),inset 0 0 0 1px color-mix(in srgb,var(--a1) 22%,transparent);
 transition:transform .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1),opacity .4s}
.ap-hl::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--a2),var(--a1) 55%,var(--a3))}
.hl-on .ap-hl{opacity:1}
.ap tbody th::before{display:none}
.ap tbody tr .ap-name,.ap tbody tr td{transition:color .4s}
.ap tbody tr.act .ap-name{color:var(--a1)}
.ap tbody tr.act td{color:var(--ink)}
.ap tbody tr.act .ap-ic{background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 8px 18px -10px var(--a1);transform:scale(1.06)}
.ap tbody tr.act .ap-ic svg{stroke:#fff}
.ap-ic{transition:background .4s,box-shadow .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.ap-depth{position:relative}
.ap-depth::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:0}
@media (prefers-reduced-motion:no-preference){
 /* replace the old per-row fade loop */
 .motion .fx-approach .ap-wrap.in tbody tr{animation:apRow .6s cubic-bezier(.22,1,.36,1) backwards calc(.15s + var(--k) * 120ms)}
 .motion .fx-approach .ap-wrap.in tbody tr .ap-ic{animation:none}
 .motion .fx-approach .ap-wrap.in tbody tr .ap-depth i{animation:apDepth 1s cubic-bezier(.22,1,.36,1) backwards calc(.45s + var(--k) * 150ms)}
 .motion .fx-approach tbody tr.act .ap-depth i{animation:apRefill .9s cubic-bezier(.22,1,.36,1)}
 .motion .fx-approach tbody tr.act .ap-depth::after{animation:apShine 1.1s .5s ease-out}
 .motion .fx-approach tbody tr.act td{animation:apCell .5s cubic-bezier(.22,1,.36,1) backwards}
 .motion .fx-approach tbody tr.act td:nth-child(3){animation-delay:.08s}.motion .fx-approach tbody tr.act td:nth-child(4){animation-delay:.16s}
 .motion .fx-approach .ap-wrap.in thead th{animation:apHead .6s cubic-bezier(.65,0,.35,1) backwards;animation-delay:calc(var(--h,0) * 90ms)}
 .motion .fx-approach .ap-wrap.in thead th:nth-child(2){--h:1}.motion .fx-approach .ap-wrap.in thead th:nth-child(3){--h:2}.motion .fx-approach .ap-wrap.in thead th:nth-child(4){--h:3}
}
@keyframes apRefill{0%{transform:scaleX(0)}100%{transform:scaleX(var(--f))}}
@keyframes apShine{0%{left:-40%;opacity:1}100%{left:110%;opacity:0}}
@keyframes apCell{from{transform:translateX(-6px);opacity:.4}}
@keyframes apHead{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:760px){ .ap-hl{left:4px;right:4px} }
.ct2-of:has(> .of:only-child){grid-template-columns:minmax(0,420px);justify-content:end}
@media (max-width:980px){ .ct2-of:has(> .of:only-child){justify-content:start} }
.of-d{margin:-2px 0 6px;color:var(--muted);font-size:15px;line-height:1.5}
.of h3{margin:0}.of .of-d{margin:0 0 4px}.of .btn{margin-top:6px}

/* ===================== Bespoke Development ===================== */
/* hero: your workflow -> your app */
.wf-side{position:relative;border-radius:1em;padding:.9em .9em 1em;overflow:hidden;min-width:0;display:grid;gap:.7em;align-content:start}
.wf-old{background:linear-gradient(180deg,#F6F4EF,#EFEBE3);border:1px dashed #D3CBBB}
.wf-old .ba-tag{color:#8A6D3B;background:#EADFC9}
.wf-old .ba-hd b{color:#4B4436}
.wf-new{background:#fff;border:1px solid rgba(67,97,238,.2);box-shadow:0 22px 44px -24px rgba(67,97,238,.55)}
.wf-new .ba-tag{color:#fff;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.wf-old .ba-hd,.wf-new .ba-hd{margin-bottom:0}
.wf-sheet{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:3px;border-radius:.5em;background:#D9D2C3}
.wf-sheet i{height:1.15em;background:#FBFAF7;border-radius:2px}
.wf-sheet i:nth-child(-n+5){background:#E7E1D3}
.wf-sheet i.bad{background:#FDE2E1;box-shadow:inset 0 0 0 1px #F2A3A0}
.wf-mails{position:relative;height:2.3em}
.wf-mails span{position:absolute;top:0;display:grid;place-items:center;width:2.4em;height:1.8em;border-radius:.4em;background:#fff;border:1px solid #DDD5C6;box-shadow:0 4px 10px -6px rgba(75,68,54,.35)}
.wf-mails .m0{left:0}.wf-mails .m1{left:1.4em;top:.3em;transform:rotate(-6deg)}.wf-mails .m2{left:2.8em;top:.1em;transform:rotate(5deg)}
.wf-mails svg{width:1.2em!important;height:1.2em!important;fill:none;stroke:#8A7E66;stroke-width:1.7}
.wf-mails span i{position:absolute;right:-.3em;top:-.3em;width:.7em;height:.7em;border-radius:50%;background:#E5484D}
.wf-rekey{display:flex;flex-wrap:wrap;align-items:center;gap:.3em;font-size:.7em;font-weight:600;color:#7A6F59}
.wf-rekey span{padding:.25em .55em;border-radius:.4em;background:#fff;border:1px dashed #CFC6B4}
.wf-rekey i{font-style:normal;color:#B5AA92}
.wf-app{border-radius:.8em;border:1px solid rgba(67,97,238,.14);overflow:hidden;background:#FAFBFF}
.wf-bar{display:flex;gap:.3em;padding:.45em .6em;background:#F1F4FC;border-bottom:1px solid rgba(67,97,238,.1)}
.wf-bar i{width:.5em;height:.5em;border-radius:50%;background:#C9D2EE}
.wf-steps{display:flex;align-items:center;gap:.25em;padding:.6em .6em .4em;font-size:.66em;font-weight:700;color:#8A94AB}
.wf-steps span{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.wf-steps b{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:#E7EBF6;color:#5B6478;font-size:.92em}
.wf-sep{flex:1;min-width:.4em;height:2px;background:#E1E6F3;font-style:normal}
.wf-rows{display:grid;gap:.3em;padding:.3em .6em .5em}
.wf-rows div{display:flex;align-items:center;justify-content:space-between;padding:.4em .55em;border-radius:.45em;background:#fff;border:1px solid rgba(67,97,238,.08);font-size:.7em}
.wf-rows b{font-family:var(--mono);font-weight:500;color:#1E2537}
.wf-rows .wf-st{font-size:.9em;font-weight:700;padding:.15em .55em;border-radius:1em;white-space:nowrap}
.wf-st0{color:#059669;background:rgba(16,185,129,.12)}.wf-st1{color:#B45309;background:rgba(245,158,11,.14)}.wf-st2{color:#4361EE;background:rgba(67,97,238,.1)}
.wf-btn{display:block;margin:.1em .6em .7em auto;width:max-content;font-size:.7em;font-weight:700;color:#fff;padding:.45em 1em;border-radius:1em;background:#0B1226}
@media (prefers-reduced-motion:no-preference){
 .motion .wf-sheet i.bad{animation:wfBad 1.6s ease-in-out infinite}
 .motion .wf-sheet i:not(.bad){animation:wfCell 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
 .motion .wf-mails span{animation:wfMail 3s ease-in-out infinite}.motion .wf-mails .m1{animation-delay:-1s}.motion .wf-mails .m2{animation-delay:-2s}
 .motion .wf-mails span i{animation:pvNode 1.4s ease-in-out infinite}
 .motion .wf-rekey span{animation:wfKey 3.2s ease-in-out infinite}.motion .wf-rekey span:nth-child(3){animation-delay:.4s}.motion .wf-rekey span:nth-child(5){animation-delay:.8s}
 .motion .wf-steps .s0 b{animation:wfS0 var(--T) ease infinite}.motion .wf-steps .s1 b{animation:wfS1 var(--T) ease infinite}.motion .wf-steps .s2 b{animation:wfS2 var(--T) ease infinite}.motion .wf-steps .s3 b{animation:wfS3 var(--T) ease infinite}
 .motion .wf-rows .r0{animation:wfR0 var(--T) cubic-bezier(.22,1,.36,1) infinite}.motion .wf-rows .r1{animation:wfR1 var(--T) cubic-bezier(.22,1,.36,1) infinite}.motion .wf-rows .r2{animation:wfR2 var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .wf-btn{animation:wfBtn var(--T) ease infinite}
}
@keyframes wfBad{0%,100%{background:#FDE2E1}50%{background:#F9C9C7}}
@keyframes wfCell{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes wfMail{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes wfKey{0%,100%{border-color:#CFC6B4}30%{border-color:#E5484D}}
@keyframes wfS0{0%,8%{background:#E7EBF6;color:#5B6478}12%,94%{background:linear-gradient(135deg,#4CC9F0,#4361EE);color:#fff}}
@keyframes wfS1{0%,24%{background:#E7EBF6;color:#5B6478}28%,94%{background:linear-gradient(135deg,#4CC9F0,#4361EE);color:#fff}}
@keyframes wfS2{0%,40%{background:#E7EBF6;color:#5B6478}44%,94%{background:linear-gradient(135deg,#4361EE,#7209B7);color:#fff}}
@keyframes wfS3{0%,56%{background:#E7EBF6;color:#5B6478}60%,94%{background:#10B981;color:#fff}}
@keyframes wfR0{0%,10%{opacity:0;transform:translateY(.4em)}14%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes wfR1{0%,18%{opacity:0;transform:translateY(.4em)}22%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes wfR2{0%,26%{opacity:0;transform:translateY(.4em)}30%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes wfBtn{0%,44%,56%,100%{transform:none;box-shadow:none}48%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(67,97,238,.2)}}
@container (max-width:520px){ .hv-wf .ba-panel{grid-template-columns:1fr} }
/* problem micro-visuals */
.pv-sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px}
.pv-sheet i{border-radius:2px;background:color-mix(in srgb,#E5484D 10%,#fff)}
.pv-crawl{display:grid;align-content:center;gap:5px;padding:8px}
.pv-crawl b{display:block;height:6px;border-radius:6px;background:color-mix(in srgb,#E5484D 12%,#fff);overflow:hidden}
.pv-crawl b i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#F59E0B,#E5484D);transform-origin:left;transform:scaleX(.45)}
.pv-crawl em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#B42318;display:flex;justify-content:space-between}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-sheet i{animation:pvSheet 2.6s ease-in-out infinite}
 .motion .pr2-rows.in .pv-sheet i:nth-child(3n){animation-delay:.4s}.motion .pr2-rows.in .pv-sheet i:nth-child(4n+1){animation-delay:.9s}.motion .pr2-rows.in .pv-sheet i:nth-child(5){animation-delay:1.3s}
 .motion .pr2-rows.in .pv-crawl b i{animation:pvCrawl 5s cubic-bezier(.6,0,.4,1) infinite}
}
@keyframes pvSheet{0%,100%{background:color-mix(in srgb,#E5484D 10%,#fff)}50%{background:color-mix(in srgb,#E5484D 45%,#fff)}}
@keyframes pvCrawl{0%{transform:scaleX(.1)}70%{transform:scaleX(.55)}85%,100%{transform:scaleX(.5)}}
/* checklist label */
.sg2-lab{font-family:var(--mono);font-size:11.5px!important;font-weight:500!important;letter-spacing:.14em;text-transform:uppercase;color:var(--a1)!important;margin-right:6px}

.sb-n{white-space:nowrap;font-size:clamp(32px,3.5vw,52px)}

/* ===== What we modernize / build: all five From -> To rows visible at once ===== */
.ftl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ft{position:relative;display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) 72px minmax(0,1fr);grid-template-areas:"lab from arr to" "lab txt txt txt";column-gap:14px;row-gap:8px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--a1) 9%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.04),0 14px 30px -24px rgba(23,40,94,.3);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.ft:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a1) 28%,var(--line));box-shadow:0 1px 2px rgba(23,40,94,.05),0 22px 40px -24px rgba(67,97,238,.4)}
.ft-lab{grid-area:lab;display:flex;align-items:center;gap:12px;align-self:center}
.ft-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 10px 20px -12px var(--a1)}
.ft-ic svg{width:21px;height:21px;stroke:#fff}
.ft-lab h3{font-size:clamp(16.5px,1.3vw,19px);letter-spacing:-.02em;line-height:1.2}
.ft-box{position:relative;display:grid;gap:3px;padding:12px 14px;border-radius:14px;min-height:64px;align-content:center}
.ft-box small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ft-box b{font-size:15px;font-weight:650;line-height:1.35}
.ft-box.from{grid-area:from;background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C3C9D6}
.ft-box.from small{color:#8A93A6}.ft-box.from b{color:#5B6478;text-decoration:line-through;text-decoration-color:rgba(138,147,166,.5);text-decoration-thickness:1.5px}
.ft-box.to{grid-area:to;padding-right:42px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3)) border-box;box-shadow:0 12px 24px -18px rgba(67,97,238,.6)}
.ft-box.to small{color:var(--a1)}.ft-box.to b{color:var(--ink)}
.ft-ok{position:absolute;right:12px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#10B981;box-shadow:0 6px 14px -6px rgba(16,185,129,.8)}
.ft-ok svg{width:14px;height:14px;stroke:#fff;stroke-width:3}
.ft-arrow{grid-area:arr;position:relative;display:grid;place-items:center;height:100%}
.ft-line{position:absolute;left:0;right:0;top:50%;height:2px;background:color-mix(in srgb,var(--a1) 14%,transparent);overflow:hidden}
.ft-line>i{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,transparent,var(--a2),var(--a1),transparent)}
.ft-bot{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 12%,transparent),0 10px 18px -8px var(--a1)}
.ft-bot svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft-bot svg .ey{fill:#fff;stroke:none}
.ft-txt{grid-area:txt;margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;padding-left:2px}
@media (prefers-reduced-motion:no-preference){
 .motion .fx-ft .ftl[data-rise]{opacity:1;transform:none}
 .motion .fx-ft .ftl:not(.in) .ft{opacity:0;transform:translateY(16px)}
 .motion .fx-ft .ftl.in .ft{animation:fxUp .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--k) * 110ms)}
 .motion .fx-ft .ftl.in .ft-box.from{animation:mtFrom .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.15s + var(--k) * 110ms)}
 .motion .fx-ft .ftl.in .ft-bot{animation:fxPop .45s cubic-bezier(.34,1.56,.64,1) backwards,ftBot calc(var(--n) * 1.6s) ease-in-out infinite;animation-delay:calc(.3s + var(--k) * 110ms),calc(1.6s + var(--k) * 1.6s)}
 .motion .fx-ft .ftl.in .ft-box.to{animation:mtTo .55s cubic-bezier(.22,1,.36,1) backwards,ftTo calc(var(--n) * 1.6s) ease-in-out infinite;animation-delay:calc(.4s + var(--k) * 110ms),calc(1.6s + var(--k) * 1.6s)}
 .motion .fx-ft .ftl.in .ft-ok{animation:fxPop .45s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.7s + var(--k) * 110ms)}
 .motion .fx-ft .ftl.in .ft-box.from b{animation:ftStrike .6s ease backwards;animation-delay:calc(.6s + var(--k) * 110ms)}
 .motion .fx-ft .ftl.in .ft-line>i{animation:baWire 1.3s linear infinite;animation-delay:calc(var(--k) * -.25s)}
 .motion .fx-ft .ft-bot svg .ey{animation:lgBlink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes ftStrike{from{text-decoration-color:rgba(138,147,166,0)}}
@keyframes ftBot{0%,20%,100%{transform:none}6%,14%{transform:scale(1.12)}}
@keyframes ftTo{0%,20%,100%{box-shadow:0 12px 24px -18px rgba(67,97,238,.6)}6%,14%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a2) 18%,transparent),0 14px 28px -16px rgba(67,97,238,.7)}}
@media (max-width:980px){ .ft{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);grid-template-areas:"lab lab lab" "from arr to" "txt txt txt"} }
@media (max-width:620px){
 .ft{grid-template-columns:1fr;grid-template-areas:"lab" "from" "arr" "to" "txt";padding:16px}
 .ft-arrow{height:46px}
 .ft-line{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto}
}

/* ===================== Digital Transformation ===================== */
.kp-side{position:relative;border-radius:1em;padding:.9em .9em 1em;overflow:hidden;min-width:0;display:grid;gap:.55em;align-content:start}
.kp-old{background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C3C9D6}
.kp-old .ba-tag{color:#6B7385;background:#E2E5EC}
.kp-new{background:#fff;border:1px solid rgba(67,97,238,.2);box-shadow:0 22px 44px -24px rgba(67,97,238,.55)}
.kp-new .ba-tag{color:#fff;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.kp-side .ba-hd{margin-bottom:0}
.kp-lab{font-size:.7em;font-weight:600;color:#5B6478}
.kp-big{display:flex;align-items:baseline;gap:.35em}
.kp-big b{font-size:2.6em;font-weight:800;letter-spacing:-.04em;line-height:1}
.kp-big span{font-size:.8em;font-weight:600;color:#5B6478}
.kp-big.old b{color:#8A93A6}
.kp-big.new b{background:linear-gradient(90deg,#4CC9F0,#4361EE 55%,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.kp-d{margin-left:auto;font-style:normal;font-size:.72em;font-weight:800;color:#059669;padding:.2em .55em;border-radius:1em;background:rgba(16,185,129,.12)}
.kp-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:.4em;background:#D5DAE6}
.kp-sheet i{height:1em;background:#F8F9FB;border-radius:2px}
.kp-note{font-size:.66em;color:#8A93A6;font-family:var(--mono)}
.kp-chart{display:block;width:100%!important;height:3.4em!important;overflow:visible}
.kp-tg{stroke:#10B981;stroke-width:1.5;stroke-dasharray:4 4;fill:none;vector-effect:non-scaling-stroke}
.kp-ln{fill:none;stroke:url(#ppG);stroke:#4361EE;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kp-dot{fill:#10B981;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.kp-tree{display:flex;flex-wrap:wrap;align-items:center;gap:.25em;font-size:.66em;font-weight:700;color:#1E2537}
.kp-tree span{display:grid;padding:.3em .5em;border-radius:.45em;background:#F1F4FC;border:1px solid rgba(67,97,238,.12)}
.kp-tree small{font-family:var(--mono);font-size:.8em;font-weight:500;color:#4361EE;letter-spacing:.04em}
.kp-tree i{font-style:normal;color:#A3ABBD}
.kp-ex{display:block;margin-top:.6em;text-align:right;font-family:var(--mono);font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:#8A93A6}
@media (prefers-reduced-motion:no-preference){
 .motion .kp-ln{stroke-dasharray:100;animation:kpLn var(--T) ease-in-out infinite}
 .motion .kp-dot{transform-box:fill-box;transform-origin:center;animation:kpDot var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .kp-big.new{animation:kpBig var(--T) ease infinite}
 .motion .kp-d{animation:kpD var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .kp-tree .t0{animation:kpT0 var(--T) ease infinite}.motion .kp-tree .t1{animation:kpT1 var(--T) ease infinite}.motion .kp-tree .t2{animation:kpT2 var(--T) ease infinite}
 .motion .kp-sheet i{animation:wfCell 3s ease-in-out infinite}.motion .kp-sheet i:nth-child(2n){animation-delay:-1.5s}
}
@keyframes kpLn{0%,8%{stroke-dashoffset:100}55%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:100}}
@keyframes kpDot{0%,52%{opacity:0;transform:scale(0)}58%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes kpBig{0%,50%{opacity:.25}58%,92%{opacity:1}98%,100%{opacity:.25}}
@keyframes kpD{0%,58%{opacity:0;transform:scale(.5)}63%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes kpT0{0%,10%{opacity:.35}16%,94%{opacity:1}100%{opacity:.35}}
@keyframes kpT1{0%,20%{opacity:.35}26%,94%{opacity:1}100%{opacity:.35}}
@keyframes kpT2{0%,30%{opacity:.35}36%,94%{opacity:1}100%{opacity:.35}}
@container (max-width:520px){ .hv-kpi .ba-panel{grid-template-columns:1fr} }
.pv-tools{display:flex;align-items:center;justify-content:center;gap:4px}
.pv-tools i{width:12px;height:12px;border-radius:3px;background:color-mix(in srgb,#E5484D 25%,#fff);border:1px solid color-mix(in srgb,#E5484D 35%,transparent)}
.pv-tools b,.pv-blind b{font-size:14px;font-weight:800;color:#E5484D}
.pv-blind{display:flex;align-items:center;justify-content:center;gap:4px}
.pv-blind svg{width:38px;height:22px;fill:none;stroke:#E5484D;stroke-width:2;stroke-dasharray:3 3;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-tools i{animation:pvTool 2.4s ease-in-out infinite}.motion .pr2-rows.in .pv-tools i:nth-child(2){animation-delay:.3s}.motion .pr2-rows.in .pv-tools i:nth-child(3){animation-delay:.6s}
 .motion .pr2-rows.in .pv-tools b,.motion .pr2-rows.in .pv-blind b{animation:pvX2 1.8s ease-in-out infinite}
 .motion .pr2-rows.in .pv-blind svg{animation:ppFlow 1.2s linear infinite}
}
@keyframes pvTool{0%,100%{transform:none}50%{transform:translateY(-4px)}}
@keyframes pvX2{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
/* five-node timeline */
.tl2[style*="--n:5"] .tl2-st p{max-width:24ch}
@media (min-width:861px) and (max-width:1180px){ .tl2[style*="--n:5"] .tl2-list{gap:10px} .tl2[style*="--n:5"] .tl2-card{padding:14px} }
.fx-prob2 .prob-copy .plain{max-width:56ch}

.kp-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3em}
.kp-tree span{position:relative;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-sheet i{height:1.25em}
.kp-old .kp-note{margin-top:auto}
.kp-old{align-content:stretch}

/* ===================== Data Modernization ===================== */
.lh-old,.lh-new{display:grid;gap:.6em;align-content:start}
.lh-old .ba-hd,.lh-new .ba-hd{margin-bottom:0}
.lh-rack{display:grid;gap:.3em;padding:.4em;border-radius:.5em;background:#070C18;border:1px solid #1E2740}
.lh-u{display:flex;align-items:center;gap:.35em;padding:.35em .5em;border-radius:.3em;background:linear-gradient(180deg,#151D33,#0F1628)}
.lh-u i{width:.42em;height:.42em;border-radius:50%;background:#7EE787;box-shadow:0 0 4px #7EE787}
.lh-u i:nth-child(2){background:#F5A524;box-shadow:0 0 4px #F5A524}
.lh-u span{flex:1;height:.35em;margin-left:.4em;border-radius:.2em;background:repeating-linear-gradient(90deg,#2A3554 0 .3em,transparent .3em .5em)}
.lh-tbls{display:grid;grid-template-columns:1fr 1fr;gap:.3em}
.lh-tbls span{font-family:var(--mono);font-size:.62em;padding:.3em .4em;border-radius:.3em;color:#7EE787;background:rgba(126,231,135,.07);border:1px solid rgba(126,231,135,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-meta{display:flex;justify-content:space-between;align-items:center;font-size:.68em;color:#8A94B8}
.lh-meta b{font-family:var(--mono);color:#FF8A80;padding:.1em .45em;border-radius:.3em;border:1px solid rgba(255,138,128,.4)}
.lh-med{display:grid;gap:.35em}
.lh-l{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;padding:.6em .7em;border-radius:.6em;font-size:.76em;border:1px solid transparent}
.lh-l b{position:relative;z-index:1;font-weight:800}
.lh-l span{position:relative;z-index:1;font-size:.86em;color:#5B6478}
.lh-l.g{background:#FFF8E6;border-color:#F3D27A}.lh-l.g b{color:#A8730B}
.lh-l.s{background:#F3F5F9;border-color:#CCD3E0}.lh-l.s b{color:#5D6B85}
.lh-l.b{background:#FBF1EA;border-color:#E9C1A3}.lh-l.b b{color:#9A5B2E}
.lh-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);opacity:.55}
.lh-l.g .lh-fill{background:linear-gradient(90deg,#FCE7A8,transparent)}.lh-l.s .lh-fill{background:linear-gradient(90deg,#DDE3EE,transparent)}.lh-l.b .lh-fill{background:linear-gradient(90deg,#F2D3BD,transparent)}
.lh-plat{display:flex;flex-wrap:wrap;gap:.3em}
.lh-plat em{font-style:normal;font-family:var(--mono);font-size:.62em;padding:.25em .5em;border-radius:.45em;background:#F1F4FC;color:#4361EE;border:1px solid rgba(67,97,238,.12)}
.lh-plat em.gov{background:rgba(16,185,129,.1);color:#059669;border-color:rgba(16,185,129,.25)}
@media (prefers-reduced-motion:no-preference){
 .motion .lh-u i{animation:pvNode 1.2s ease-in-out infinite}.motion .lh-u i:nth-child(2){animation:wfBad 0s,lhBlink .9s steps(2) infinite}
 .motion .lh-tbls span{animation:lhOut var(--T) ease infinite;animation-delay:calc(var(--i) * .5s)}
 .motion .lh-l.b .lh-fill{animation:lhF var(--T) cubic-bezier(.22,1,.36,1) infinite;animation-delay:0s}
 .motion .lh-l.s .lh-fill{animation:lhF var(--T) cubic-bezier(.22,1,.36,1) infinite;animation-delay:.9s}
 .motion .lh-l.g .lh-fill{animation:lhF var(--T) cubic-bezier(.22,1,.36,1) infinite;animation-delay:1.8s}
 .motion .lh-l{animation:lhL var(--T) ease infinite}.motion .lh-l.s{animation-delay:.9s}.motion .lh-l.g{animation-delay:1.8s}
 .motion .lh-meta b{animation:pvX2 1.8s ease-in-out infinite}
}
@keyframes lhBlink{50%{opacity:.2}}
@keyframes lhOut{0%,8%,30%,100%{opacity:1;transform:none}16%,22%{opacity:.35;transform:translateX(.3em)}}
@keyframes lhF{0%,20%{transform:scaleX(0)}40%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes lhL{0%,22%,100%{box-shadow:none}30%,40%{box-shadow:0 0 0 .2em rgba(67,97,238,.12)}}
@container (max-width:520px){ .hv-lh .ba-panel{grid-template-columns:1fr} }
.pv-queue{display:flex;align-items:center;justify-content:center;gap:3px}
.pv-queue i{width:8px;height:16px;border-radius:2px;background:color-mix(in srgb,#E5484D 25%,#fff);border:1px solid color-mix(in srgb,#E5484D 30%,transparent)}
.pv-queue b{width:10px;height:10px;border-radius:50%;border:2px solid color-mix(in srgb,#E5484D 25%,transparent);border-top-color:#E5484D;margin-left:3px}
.pv-silo{display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:8px}
.pv-silo i{width:12px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,#E5484D 22%,#fff);border:1px solid color-mix(in srgb,#E5484D 35%,transparent)}
.pv-silo i:nth-child(1){height:60%}.pv-silo i:nth-child(2){height:90%}.pv-silo i:nth-child(3){height:72%}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-queue i{animation:pvQ 2s ease-in-out infinite}.motion .pr2-rows.in .pv-queue i:nth-child(2){animation-delay:.2s}.motion .pr2-rows.in .pv-queue i:nth-child(3){animation-delay:.4s}.motion .pr2-rows.in .pv-queue i:nth-child(4){animation-delay:.6s}
 .motion .pr2-rows.in .pv-queue b{animation:spn 1s linear infinite}
 .motion .pr2-rows.in .pv-silo i{animation:pvNode 2.2s ease-in-out infinite}.motion .pr2-rows.in .pv-silo i:nth-child(2){animation-delay:.7s}.motion .pr2-rows.in .pv-silo i:nth-child(3){animation-delay:1.4s}
}
@keyframes pvQ{0%,100%{transform:none}50%{transform:translateX(-3px)}}
/* six-node timeline */
.tl2[style*="--n:6"] .tl2-st p{max-width:22ch;font-size:14px}
.tl2[style*="--n:6"] .tl2-list{gap:10px}
.tl2[style*="--n:6"] .tl2-card{padding:14px 12px}

/* ===================== Data Analytics ===================== */
.an-side{position:relative;border-radius:1em;padding:.9em .9em 1em;overflow:hidden;min-width:0;display:grid;gap:.6em;align-content:start}
.an-old{background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C3C9D6}
.an-old .ba-tag{color:#6B7385;background:#E2E5EC}
.an-new{background:#fff;border:1px solid rgba(67,97,238,.2);box-shadow:0 22px 44px -24px rgba(67,97,238,.55)}
.an-new .ba-tag{color:#fff;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.an-side .ba-hd{margin-bottom:0}
.an-tbl{display:grid;gap:2px;font-family:var(--mono);font-size:.64em;border-radius:.5em;overflow:hidden;border:1px solid #D5DAE6}
.an-h,.an-r{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.4em;padding:.35em .5em}
.an-h{background:#E2E5EC;color:#6B7385;font-weight:600}
.an-r{background:#F9FAFC;color:#5B6478}
.an-card{display:grid;gap:.45em;padding:.65em .7em;border-radius:.7em;background:#FAFBFF;border:1px solid rgba(67,97,238,.14)}
.an-row{display:flex;justify-content:space-between;align-items:center;font-size:.72em}
.an-row b{font-family:var(--mono);font-weight:500}
.an-risk{font-weight:800;color:#B42318;background:rgba(229,72,77,.1);padding:.15em .5em;border-radius:1em}
.an-meter{height:.45em;border-radius:1em;background:#EEF1FA;overflow:hidden}
.an-meter i{display:block;height:100%;width:82%;border-radius:inherit;background:linear-gradient(90deg,#F59E0B,#E5484D);transform-origin:left}
.an-nba{display:grid;gap:.1em;font-size:.76em;font-weight:700;color:#1E2537;padding:.45em .55em;border-radius:.5em;background:linear-gradient(90deg,rgba(76,201,240,.12),rgba(114,9,183,.08))}
.an-nba small{font-family:var(--mono);font-size:.78em;font-weight:500;color:#4361EE}
.an-kpi{position:relative;display:grid;gap:.2em}
.an-kh{display:flex;justify-content:space-between;font-size:.7em;font-weight:600;color:#5B6478}
.an-kh em{font-style:normal;font-weight:800;color:#059669}
.an-chart{display:block;width:100%!important;height:3em!important;overflow:visible}
.an-mk{stroke:#A3ABBD;stroke-dasharray:3 3;stroke-width:1;vector-effect:non-scaling-stroke}
.an-pre{fill:none;stroke:#A3ABBD;stroke-width:2;vector-effect:non-scaling-stroke}
.an-post{fill:none;stroke:#10B981;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.an-tag{position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);font-family:var(--mono);font-size:.58em;color:#4361EE;background:#fff;padding:0 .3em}
@media (prefers-reduced-motion:no-preference){
 .motion .an-r{animation:anR var(--T) ease infinite;animation-delay:calc(var(--i) * .35s)}
 .motion .an-card{animation:anCard var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .an-meter i{animation:anMeter var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .an-nba{animation:anNba var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .an-post{stroke-dasharray:100;animation:kpLn var(--T) ease-in-out infinite}
 .motion .an-kh em{animation:kpD var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
}
@keyframes anR{0%,6%,20%,100%{background:#F9FAFC}10%,16%{background:rgba(67,97,238,.1)}}
@keyframes anCard{0%,24%{opacity:.3;transform:translateY(.3em)}30%,94%{opacity:1;transform:none}100%{opacity:.3}}
@keyframes anMeter{0%,28%{transform:scaleX(0)}40%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes anNba{0%,40%{opacity:0;transform:scale(.9)}46%,94%{opacity:1;transform:none}100%{opacity:0}}
@container (max-width:520px){ .hv-an .ba-panel{grid-template-columns:1fr} }
.pv-report{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px}
.pv-report i{width:8px;border-radius:2px;background:color-mix(in srgb,#E5484D 25%,#fff)}
.pv-report i:nth-child(1){height:50%}.pv-report i:nth-child(2){height:70%}.pv-report i:nth-child(3){height:45%}
.pv-report b{font-size:10px;font-weight:800;color:#E5484D;align-self:flex-start;margin-left:2px;font-style:italic}
.pv-nb{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--mono);font-size:10px;font-weight:700}
.pv-nb span{padding:3px 5px;border-radius:5px;background:#fff;border:1px solid color-mix(in srgb,#E5484D 25%,transparent);color:#B42318}
.pv-nb b{color:#E5484D}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-report b,.motion .pr2-rows.in .pv-nb b{animation:pvX2 1.8s ease-in-out infinite}
}

/* ===================== Data Migration ===================== */
.dmg-old,.dmg-new{display:grid;gap:.6em;align-content:start}
.dmg-old .ba-hd,.dmg-new .ba-hd{margin-bottom:0}
.dmg-dbs{display:grid;grid-template-columns:1fr 1fr;gap:.35em}
.dmg-db{position:relative;display:flex;align-items:center;gap:.4em;padding:.45em .5em;border-radius:.45em;background:rgba(126,231,135,.06);border:1px solid rgba(126,231,135,.18)}
.dmg-db svg{width:1.2em!important;height:1.2em!important;fill:none;stroke:#7EE787;stroke-width:1.7}
.dmg-db span{font-family:var(--mono);font-size:.6em;color:#7EE787}
.dmg-db i{position:absolute;right:.4em;top:.4em;width:.4em;height:.4em;border-radius:50%;background:#7EE787;box-shadow:0 0 4px #7EE787}
.dmg-cdc{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.62em;color:#8A94B8;padding:.4em .5em;border-radius:.45em;border:1px dashed #2A3554}
.dmg-ev{display:flex;gap:.3em}
.dmg-ev i{width:.5em;height:.5em;border-radius:50%;background:#4CC9F0}
.dmg-prog{display:grid;gap:.3em}
.dmg-pl{display:flex;justify-content:space-between;font-size:.7em;font-weight:600;color:#5B6478}
.dmg-pct::after{content:"100%";color:#4361EE;font-weight:800}
.dmg-bar{display:block;height:.55em;border-radius:1em;background:#EEF1FA;overflow:hidden}
.dmg-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#4CC9F0,#4361EE 55%,#7209B7);transform-origin:left}
.dmg-tbls{display:grid;grid-template-columns:1fr 1fr;gap:.3em}
.dmg-tbls div{display:flex;align-items:center;justify-content:space-between;padding:.4em .5em;border-radius:.45em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1)}
.dmg-tbls span{font-family:var(--mono);font-size:.6em;color:#1E2537}
.dmg-tbls em{width:1.1em;height:1.1em;border-radius:50%;display:grid;place-items:center;background:#10B981}
.dmg-tbls em svg{width:.7em!important;height:.7em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.dmg-down{display:flex;justify-content:space-between;align-items:center;font-size:.72em;font-weight:600;color:#5B6478;padding:.4em .55em;border-radius:.45em;background:rgba(16,185,129,.08)}
.dmg-down b{color:#059669;font-weight:800}
.dmg-rb{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:.6em;margin-top:.8em;padding:.6em .8em;border-radius:.8em;background:#fff;border:1px dashed rgba(67,97,238,.35);font-size:.74em;color:#5B6478;overflow:hidden}
.dmg-rb svg{width:1.6em!important;height:1.6em!important;fill:none;stroke:#4361EE;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dmg-rb b{color:#1E2537}
.dmg-rbl{position:absolute;left:0;bottom:0;height:2px;width:40%;background:linear-gradient(270deg,transparent,#4361EE,transparent)}
@media (prefers-reduced-motion:no-preference){
 .motion .dmg-db i{animation:pvNode 1.4s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
 .motion .dmg-ev i{animation:mgEv 1.2s linear infinite}.motion .dmg-ev i:nth-child(2){animation-delay:.3s}.motion .dmg-ev i:nth-child(3){animation-delay:.6s}.motion .dmg-ev i:nth-child(4){animation-delay:.9s}
 .motion .dmg-bar i{animation:mgBar var(--T) cubic-bezier(.4,0,.2,1) infinite}
 .motion .dmg-pct::after{animation:mgPct var(--T) steps(1) infinite}
 .motion .dmg-tbls div{animation:mgT var(--T) ease infinite;animation-delay:calc(var(--i) * .25s)}
 .motion .dmg-tbls em{animation:mgE var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .25s)}
 .motion .dmg-down{animation:baLive var(--T) ease infinite}
 .motion .dmg-rbl{animation:mgRbl 2.6s linear infinite}
 .motion .dmg-rb svg{animation:mgRbI 2.6s ease-in-out infinite}
}
@keyframes mgEv{0%{opacity:.2;transform:translateX(-.3em)}50%{opacity:1}100%{opacity:.2;transform:translateX(.3em)}}
@keyframes mgBar{0%{transform:scaleX(0)}40%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes mgPct{0%{content:"0%"}10%{content:"25%"}20%{content:"50%"}30%{content:"78%"}40%,100%{content:"100%"}}
@keyframes mgT{0%,40%{opacity:.35}48%,94%{opacity:1}100%{opacity:.35}}
@keyframes mgE{0%,44%{opacity:0;transform:scale(.3)}50%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mgRbl{from{left:100%}to{left:-40%}}
@keyframes mgRbI{0%,100%{transform:none}50%{transform:translateX(-3px)}}
@container (max-width:520px){ .hv-mg .ba-panel{grid-template-columns:1fr} }
.pv-outage{display:grid;place-items:center;gap:3px}
.pv-outage b{font-family:var(--mono);font-size:9px;font-weight:800;color:#fff;background:#E5484D;padding:2px 5px;border-radius:4px}
.pv-outage i{width:28px;height:3px;border-radius:3px;background:color-mix(in srgb,#E5484D 30%,#fff)}
.pv-mm{display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:700;color:#B42318;line-height:1.15}
.pv-mm b{font-size:11px;color:#E5484D}
@media (prefers-reduced-motion:no-preference){
 .motion .pr2-rows.in .pv-outage b{animation:lhBlink 1.2s steps(2) infinite}
 .motion .pr2-rows.in .pv-mm b{animation:pvX2 1.8s ease-in-out infinite}
}

/* ===================== Power BI / Digital Cockpit ===================== */
.hv-ph{--T:8s;position:relative;width:100%;max-width:560px;aspect-ratio:1.05;margin-inline:auto;font-size:clamp(9px,2.1cqw,13.5px);color:#1E2537}
.hv-ph svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.hv-ph .pp-glow{position:absolute;left:10%;top:5%;width:80%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.22),rgba(114,9,183,.12) 55%,transparent);filter:blur(10px)}
.ph2{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);padding:1.6em .8em .9em;border-radius:2.2em;background:#0B1226;box-shadow:0 0 0 .35em #1E2740,0 40px 70px -30px rgba(11,18,38,.7);display:grid;gap:.6em;z-index:1}
.ph2-notch{position:absolute;left:50%;top:.55em;width:28%;height:.5em;transform:translateX(-50%);border-radius:1em;background:#1E2740}
.ph2-top{display:flex;align-items:center;justify-content:space-between;color:#fff}
.ph2-top small{display:block;font-size:.62em;color:#8A94B8}
.ph2-top b{font-size:.86em}
.ph2-top .ba-live{font-size:.58em}
.ph2-tiles{display:grid;gap:.4em}
.ph2-t{display:grid;gap:.15em;padding:.5em .6em;border-radius:.8em;background:#141C34;border:1px solid #232D4D}
.ph2-r{display:flex;align-items:center;justify-content:space-between;gap:.4em}
.ph2-r span{font-size:.62em;color:#8A94B8}
.ph2-r em{font-style:normal;font-size:.6em;font-weight:800;padding:.1em .4em;border-radius:1em}
.ph2-r em.up{color:#34D399;background:rgba(52,211,153,.12)}.ph2-r em.dn{color:#FBBF24;background:rgba(251,191,36,.12)}
.ph2-r b{font-size:1.05em;color:#fff;letter-spacing:-.02em}
.ph2-r svg{width:45%!important;height:1.3em!important}
.ph2-r polyline{fill:none;stroke:#7FDBFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ph2-t p{margin:0;font-size:.56em;color:#A9B2CF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph2-foot{display:flex;justify-content:space-between;font-size:.62em;font-weight:700;color:#fff;padding:.45em .7em;border-radius:.7em;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.ph2-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4em;font-size:.76em;font-weight:650;padding:.55em .8em;border-radius:1em;background:rgba(255,255,255,.92);border:1px solid rgba(67,97,238,.15);box-shadow:0 16px 30px -18px rgba(23,40,94,.45)}
.ph2-chip b{font-size:1.25em;background:linear-gradient(90deg,#4CC9F0,#4361EE,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph2-chip svg{width:1.2em!important;height:1.2em!important;fill:none;stroke:#4361EE;stroke-width:1.8}
.ph2-chip i{width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;background:#10B981}
.ph2-chip i svg{width:.8em!important;height:.8em!important;stroke:#fff;stroke-width:3}
.ph2-chip.c0{left:2%;top:18%}.ph2-chip.c1{right:0;top:42%}.ph2-chip.c2{left:0;bottom:16%}
.ph2-ex{position:absolute;right:0;bottom:0}
@media (prefers-reduced-motion:no-preference){
 .motion .ph2-t{animation:ph2T var(--T) ease infinite;animation-delay:calc(var(--i) * .5s)}
 .motion .ph2-r polyline{stroke-dasharray:140;animation:ph2S var(--T) ease-in-out infinite}
 .motion .ph2-chip{animation:obFloat 6s ease-in-out infinite}.motion .ph2-chip.c1{animation-delay:-2s}.motion .ph2-chip.c2{animation-delay:-4s}
 .motion .ph2-foot{animation:wfBtn var(--T) ease infinite}
}
@keyframes ph2T{0%,4%,16%,100%{border-color:#232D4D;background:#141C34}8%,12%{border-color:#4361EE;background:#18224A}}
@keyframes ph2S{0%{stroke-dashoffset:140}30%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:140}}
@container (max-width:520px){ .hv-ph{aspect-ratio:.9;font-size:clamp(9px,2.7cqw,12.5px)} .ph2{width:62%} .ph2-chip.c1{top:auto;bottom:4%;right:0} .ph2-chip.c2{bottom:auto;top:4%;left:auto;right:0} }
/* timeline "You get" line */
.tl2-get{display:grid;gap:2px;margin-top:6px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,#10B981 8%,var(--surface));border:1px solid color-mix(in srgb,#10B981 25%,transparent);font-size:13.5px;font-weight:650;color:var(--ink);width:100%}
.tl2-get small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#059669;font-weight:500}
.pv-queue em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:800;color:#E5484D;margin-left:4px}
.ph2-chip.c2{left:0;bottom:28%}.ph2-chip.c0{left:4%}
@container (max-width:520px){ .ph2-chip{font-size:.72em} .ph2-chip.c0{left:0;top:2%} .ph2-chip.c1{right:0;top:auto;bottom:2%} .ph2-chip.c2{left:0;bottom:2%;top:auto} .ph2{top:48%} }

/* ===================== RAG (Knowledge-Based) ===================== */
.hv-rg{--T:9s;--ok:#10B981;position:relative;width:100%;max-width:600px;margin-inline:auto;font-size:clamp(9.5px,2.3cqw,14.5px);color:#1E2537}
.hv-rg svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.hv-rg .pp-glow{position:absolute;left:5%;top:5%;width:90%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.22),rgba(114,9,183,.1) 55%,transparent);filter:blur(10px);z-index:0}
.rg-card{position:relative;z-index:1;display:grid;gap:.8em;padding:1.2em;border-radius:1.4em;background:rgba(255,255,255,.88);border:1px solid rgba(67,97,238,.14);box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(23,40,94,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rg-hd{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.rg-who{display:inline-flex;align-items:center;gap:.55em;font-size:.95em}
.rg-bot{width:2em;height:2em;border-radius:.65em;display:grid;place-items:center;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.rg-bot svg{width:1.2em!important;height:1.2em!important;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rg-bot svg .ey{fill:#fff;stroke:none}
.rg-hd .ba-live{font-size:.62em}
.rg-q{justify-self:end;max-width:82%;padding:.65em .9em;border-radius:1em 1em .25em 1em;color:#fff;font-size:.86em;font-weight:600;background:linear-gradient(135deg,#4CC9F0,#4361EE 60%,#7209B7);box-shadow:0 12px 22px -14px #4361EE}
.rg-ret{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.66em;color:#5B6478}
.rg-ret .sp{width:.9em;height:.9em;border-radius:50%;border:.15em solid rgba(67,97,238,.2);border-top-color:#4361EE}
.rg-n::after{content:"";font-style:normal}
.rg-a{display:grid;gap:.7em;padding:.85em .95em;border-radius:1em 1em 1em .25em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1)}
.rg-a p{margin:0;font-size:.86em;line-height:1.55;color:#1E2537}
.rg-a b{color:#4361EE}
.rg-a sup{font-size:.68em;font-weight:800;color:#4361EE;margin-left:.1em;padding:0 .3em;border-radius:.3em;background:rgba(67,97,238,.1)}
.rg-srcs{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.rg-src{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:.45em;padding:.55em .6em;border-radius:.7em;background:#fff;border:1px solid rgba(67,97,238,.16);cursor:pointer;text-decoration:none;color:inherit}
.rg-num{width:1.5em;height:1.5em;border-radius:.4em;display:grid;place-items:center;font-size:.68em;font-weight:800;color:#fff;background:#4361EE}
.rg-ic svg{width:1.2em!important;height:1.2em!important;fill:none;stroke:#4361EE;stroke-width:1.7}
.rg-st{display:grid;min-width:0}
.rg-st b{font-size:.68em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-st small{font-family:var(--mono);font-size:.56em;color:#8A93A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-go{font-size:.8em;color:#4361EE;font-weight:700}
.rg-pv{position:absolute;left:0;right:0;bottom:calc(100% + .4em);padding:.5em .6em;border-radius:.6em;font-size:.62em;line-height:1.4;color:#1E2537;background:#fff;border:1px solid rgba(67,97,238,.25);box-shadow:0 12px 24px -12px rgba(23,40,94,.4);opacity:0;transform:translateY(.3em);pointer-events:none}
.rg-pv::before{content:"“";color:#4361EE;font-weight:800}
.rg-foot{display:flex;flex-wrap:wrap;gap:.4em}
.rg-foot span{display:inline-flex;align-items:center;gap:.35em;font-size:.68em;font-weight:600;padding:.35em .6em .35em .35em;border-radius:1em;background:#fff;border:1px solid rgba(16,185,129,.3)}
.rg-foot i{width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;background:var(--ok)}
.rg-foot i svg{width:.8em!important;height:.8em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
 .motion .rg-q{animation:gaQ var(--T) cubic-bezier(.22,1,.36,1) infinite;transform-origin:right bottom}
 .motion .rg-ret{animation:gaType var(--T) ease infinite}
 .motion .rg-ret .sp{animation:spn .9s linear infinite}
 .motion .rg-a{animation:gaA var(--T) ease infinite}
 .motion .rg-src.s0{animation:gaD0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:2.2s}
 .motion .rg-src.s1{animation:gaD1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:2.2s}
 .motion .rg-src.s0 .rg-pv{animation:rgPv var(--T) ease infinite}
 .motion .rg-src.s0{border-color:rgba(67,97,238,.16)}
 .motion .rg-foot .c0{animation:baC0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .rg-foot .c1{animation:baC1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .rg-foot .c2{animation:baC2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .rg-foot .c0 i{animation:baI0 var(--T) ease infinite}.motion .rg-foot .c1 i{animation:baI1 var(--T) ease infinite}.motion .rg-foot .c2 i{animation:baI2 var(--T) ease infinite}
 .motion .rg-bot svg .ey{animation:lgBlink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes rgPv{0%,58%{opacity:0;transform:translateY(.3em)}62%,80%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(.3em)}}
.rg-src:hover .rg-pv{opacity:1;transform:none}
@container (max-width:460px){ .rg-srcs{grid-template-columns:1fr} }
/* definition card: six-step strip */
.dfn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dfn-steps li{position:relative;display:grid;gap:6px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--a1) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--a1) 14%,transparent)}
.ds-n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3))}
.ds-t{display:grid;gap:2px}
.ds-t b{font-size:15px;letter-spacing:-.01em}
.ds-t span{font-size:12.5px;line-height:1.4;color:var(--muted)}
.dfn-steps li:not(:nth-child(3n))::after{content:"→";position:absolute;right:-9px;top:14px;font-size:12px;color:var(--a1);font-weight:800}
@media (prefers-reduced-motion:no-preference){
 .motion .dfn.in .dfn-steps li{animation:fxUp .55s cubic-bezier(.22,1,.36,1) backwards,dsLoop 7.2s ease-in-out infinite;animation-delay:calc(.3s + var(--k) * 100ms),calc(1.4s + var(--k) * 1.2s)}
}
@keyframes dsLoop{0%,18%,100%{border-color:color-mix(in srgb,var(--a1) 14%,transparent);box-shadow:none}5%,13%{border-color:color-mix(in srgb,var(--a1) 50%,transparent);box-shadow:0 10px 20px -14px var(--a1)}}
@media (max-width:620px){ .dfn-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .dfn-steps li::after{display:none} }
.dfn-st .dfn-steps:has(> li:nth-child(3):last-child){grid-template-columns:1fr}
.dfn-st .dfn-steps:has(> li:nth-child(3):last-child) li::after{display:none}
.dfn-st .dfn-steps:has(> li:nth-child(3):last-child) li{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
/* RAG hero: no empty phases. Answer stays in place; only a short fade at the loop seam */
.rg-ret{position:relative;min-height:1.4em}
.rg-ret .ok{display:none;width:1em;height:1em;border-radius:50%;place-items:center;background:var(--ok)}
.rg-ret .ok svg{width:.65em!important;height:.65em!important;fill:none;stroke:#fff;stroke-width:3}
.rg-ret .t2{display:none;color:#059669;font-weight:600}
@media (prefers-reduced-motion:no-preference){
 .motion .rg-q{animation:rgIn var(--T) ease infinite}
 .motion .rg-ret{animation:none}
 .motion .rg-ret .sp,.motion .rg-ret .t1{animation:rgLoad var(--T) steps(1) infinite}
 .motion .rg-ret .sp{animation:rgLoad var(--T) steps(1) infinite,spn .9s linear infinite}
 .motion .rg-ret .ok,.motion .rg-ret .t2{display:inline-grid;animation:rgDone var(--T) steps(1) infinite}
 .motion .rg-ret .t2{display:inline}
 .motion .rg-a{animation:rgIn var(--T) ease infinite}
 .motion .rg-a p{animation:rgType var(--T) cubic-bezier(.65,0,.35,1) infinite}
 .motion .rg-src.s0,.motion .rg-src.s1{animation:rgSrc var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .rg-src.s1{animation-delay:.25s}
}
@keyframes rgIn{0%{opacity:0}5%,95%{opacity:1}100%{opacity:0}}
@keyframes rgLoad{0%{visibility:visible}14%,100%{visibility:hidden;width:0;margin:0;position:absolute}}
@keyframes rgDone{0%{visibility:hidden;position:absolute}14%,100%{visibility:visible;position:static}}
@keyframes rgType{0%,12%{clip-path:inset(0 0 100% 0)}28%,100%{clip-path:inset(0 0 0 0)}}
@keyframes rgSrc{0%,26%{opacity:.25;transform:translateY(.3em)}32%,96%{opacity:1;transform:none}100%{opacity:.25}}
@keyframes rgPv{0%,48%{opacity:0;transform:translateY(.3em)}52%,82%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(.3em)}}
/* RAG hero: centre the card against the copy; source highlight instead of an overlapping popup */
.fx-hero .ph-vis:has(.hv-rg){align-self:center;min-height:0}
.hv-rg{aspect-ratio:auto}
.rg-pv{display:none}
@media (prefers-reduced-motion:no-preference){
 .motion .rg-src.s0{animation:rgSrc var(--T) cubic-bezier(.34,1.56,.64,1) infinite,rgHi var(--T) ease infinite}
}
@keyframes rgHi{0%,46%,84%,100%{border-color:rgba(67,97,238,.16);box-shadow:none}52%,78%{border-color:#4361EE;box-shadow:0 0 0 3px rgba(67,97,238,.14)}}

/* ===================== Copilot ===================== */
.cp-side{position:relative;border-radius:1em;padding:.9em .9em 1em;overflow:hidden;min-width:0;display:grid;gap:.6em;align-content:start}
.cp-old{background:linear-gradient(180deg,#F4F5F8,#ECEEF3);border:1px dashed #C3C9D6}
.cp-old .ba-tag{color:#6B7385;background:#E2E5EC}
.cp-new{background:#fff;border:1px solid rgba(67,97,238,.2);box-shadow:0 22px 44px -24px rgba(67,97,238,.55)}
.cp-new .ba-tag{color:#fff;background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7)}
.cp-side .ba-hd{margin-bottom:0}
.cp-seats{display:grid;grid-template-columns:repeat(8,1fr);gap:.3em}
.cp-seats i{aspect-ratio:1;border-radius:50%;background:#D5DAE6;border:1px solid #C3C9D6}
.cp-seats i.u{background:#8A93A6;border-color:#8A93A6}
.cp-seats.on i{background:#E7EBF6;border-color:#D5DAE6}
.cp-seats.on i.u,.cp-seats.on i.a{background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7);border-color:transparent}
.cp-st{display:flex;justify-content:space-between;align-items:baseline;font-size:.72em;color:#5B6478}
.cp-st b{font-size:1.6em;color:#8A93A6;letter-spacing:-.03em}
.cp-gauge{position:relative;display:grid;place-items:center}
.cp-gauge svg{width:62%!important;height:auto!important}
.cp-gauge .tr{fill:none;stroke:#EEF1FA;stroke-width:10;stroke-linecap:round}
.cp-gauge .fl{fill:none;stroke:url(#ppG);stroke:#4361EE;stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:22}
.cp-gv{position:absolute;bottom:0;display:grid;justify-items:center}
.cp-gv b{font-size:1.25em;font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,#4CC9F0,#4361EE,#7209B7);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.cp-gv span{font-size:.56em;color:#5B6478}
.cp-apps{display:flex;flex-wrap:wrap;gap:.3em}
.cp-apps span{font-size:.62em;font-weight:700;padding:.25em .55em;border-radius:.5em;background:#F1F4FC;color:#4361EE;border:1px solid rgba(67,97,238,.12)}
@media (prefers-reduced-motion:no-preference){
 .motion .cp-seats.on i.a{animation:cpSeat var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .08s)}
 .motion .cp-gauge .fl{animation:cpG var(--T) cubic-bezier(.22,1,.36,1) infinite}
 .motion .cp-gv b{animation:kpBig var(--T) ease infinite}
 .motion .cp-apps span{animation:cpApp var(--T) ease infinite;animation-delay:calc(var(--i) * .3s)}
 .motion .cp-old .cp-seats i:not(.u){animation:wfCell 3s ease-in-out infinite}
}
@keyframes cpSeat{0%,14%{background:#E7EBF6;transform:scale(.7)}22%,94%{background:linear-gradient(135deg,#4CC9F0,#4361EE 55%,#7209B7);transform:none}100%{background:#E7EBF6}}
@keyframes cpG{0%,30%{stroke-dashoffset:100}58%,92%{stroke-dashoffset:22}100%{stroke-dashoffset:100}}
@keyframes cpApp{0%,40%,70%,100%{background:#F1F4FC}50%,60%{background:rgba(76,201,240,.22)}}
@container (max-width:520px){ .hv-cp .ba-panel{grid-template-columns:1fr} }
.pv-sheet i.on{background:color-mix(in srgb,#E5484D 55%,#fff)}
.cp-idle{display:grid;gap:.3em;font-size:.7em;color:#5B6478}
.cp-idle b{display:block;height:.55em;border-radius:1em;background:#E2E5EC;overflow:hidden}
.cp-idle b i{display:block;height:100%;width:88%;border-radius:inherit;background:linear-gradient(90deg,#F59E0B,#E5484D)}
.cp-mail{display:flex;justify-content:space-between;align-items:center;font-size:.68em;color:#5B6478;padding:.45em .55em;border-radius:.5em;background:#fff;border:1px dashed #C3C9D6}
.cp-mail em{font-style:normal;font-weight:700;color:#B42318}
.cp-old .kp-note{margin-top:auto}

/* ===================== AI Remote Team ===================== */
.hv-pod{--T:9s;--ok:#10B981;position:relative;width:100%;max-width:620px;margin-inline:auto;font-size:clamp(9.5px,2.25cqw,14px);color:#1E2537}
.hv-pod svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.fx-hero .ph-vis:has(.hv-pod){align-self:center;min-height:0}
.hv-pod .pp-glow{position:absolute;left:5%;top:5%;width:90%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.22),rgba(114,9,183,.1) 55%,transparent);filter:blur(10px);z-index:0}
.pd2{position:relative;z-index:1;display:grid;gap:.8em;padding:1.1em;border-radius:1.4em;background:rgba(255,255,255,.88);border:1px solid rgba(67,97,238,.14);box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(23,40,94,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pd2-hd{display:flex;justify-content:space-between;align-items:center}
.pd2-hd small{display:block;font-family:var(--mono);font-size:.62em;color:#8A93A6}
.pd2-hd b{font-size:1em}
.pd2-hd .ba-live{font-size:.62em}
.pd2-team{display:flex;flex-wrap:wrap;align-items:center;gap:.3em;padding:.5em .6em;border-radius:.8em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1)}
.pd2-lab{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:#8A93A6;margin:0 .2em}
.pd2-plus{font-weight:800;color:#4361EE;margin:0 .2em}
.pav{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.66em;font-weight:800;color:#fff;background:var(--c);box-shadow:0 0 0 2px #fff}
.pav.sm{width:1.7em;height:1.7em;font-size:.56em}
.pd2-roles{display:flex;flex-wrap:wrap;gap:.3em}
.pd2-roles span{display:inline-flex;align-items:center;gap:.35em;font-size:.64em;font-weight:700;padding:.25em .55em;border-radius:1em;background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.pd2-roles i{width:.5em;height:.5em;border-radius:50%;background:var(--c)}
.pd2-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em}
.pd2-col{display:grid;gap:.35em;align-content:start;padding:.5em;border-radius:.7em;background:#F5F7FD;min-height:7.2em}
.pd2-ch{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:#5B6478}
.pd2-col.c2{background:rgba(16,185,129,.07)}
.pd2-card{display:flex;align-items:center;justify-content:space-between;gap:.3em;padding:.45em .5em;border-radius:.5em;background:#fff;border:1px solid rgba(67,97,238,.12);box-shadow:0 4px 10px -8px rgba(23,40,94,.4)}
.pd2-card b{font-size:.64em;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-pod .ba-chips{margin-top:0}
@media (prefers-reduced-motion:no-preference){
 .motion .pav.pod{animation:pdJoin var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .25s)}
 .motion .pd2-roles span{animation:pdRole var(--T) ease infinite;animation-delay:calc(var(--i) * .25s)}
 .motion .pd2-card.k00{animation:pdMove1 var(--T) cubic-bezier(.65,0,.35,1) infinite}
 .motion .pd2-card.k10{animation:pdMove2 var(--T) cubic-bezier(.65,0,.35,1) infinite}
 .motion .pd2-card.k20{animation:pdDone var(--T) ease infinite}
 .motion .pd2-card.k01,.motion .pd2-card.k11{animation:pdPulse var(--T) ease infinite}
 .motion .hv-pod .ba-chips .c0{animation:baC0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .hv-pod .ba-chips .c1{animation:baC1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}.motion .hv-pod .ba-chips .c2{animation:baC2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .hv-pod .ba-chips .c0 i{animation:baI0 var(--T) ease infinite}.motion .hv-pod .ba-chips .c1 i{animation:baI1 var(--T) ease infinite}.motion .hv-pod .ba-chips .c2 i{animation:baI2 var(--T) ease infinite}
}
@keyframes pdJoin{0%,4%{opacity:0;transform:scale(.3) translateY(.6em)}12%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pdRole{0%,4%{opacity:.25}12%,94%{opacity:1}100%{opacity:.25}}
@keyframes pdMove1{0%,30%{transform:none}40%,62%{transform:translateX(calc(100% + 1.5em))}72%,92%{transform:translateX(calc(200% + 3em));border-color:rgba(16,185,129,.5)}100%{transform:none}}
@keyframes pdMove2{0%,44%{transform:none}54%,92%{transform:translateX(calc(100% + 1.5em));border-color:rgba(16,185,129,.5)}100%{transform:none}}
@keyframes pdDone{0%,100%{border-color:rgba(16,185,129,.5)}}
@keyframes pdPulse{0%,20%,100%{box-shadow:0 4px 10px -8px rgba(23,40,94,.4)}10%{box-shadow:0 0 0 3px rgba(67,97,238,.15)}}
@container (max-width:460px){ .pd2-board{grid-template-columns:1fr} .motion .pd2-card.k00,.motion .pd2-card.k10{animation:pdPulse var(--T) ease infinite} }
.sg2-x{margin-top:12px}
/* AI Remote Team hero: size to content (no fixed aspect box) and fill the column */
.hv-pod{aspect-ratio:auto;font-size:clamp(10px,2.45cqw,15px)}
.pd2{gap:.9em;padding:1.25em}
.pd2-col{min-height:8.4em}
.pd2-card{padding:.6em .6em}
.pd2-card b{font-size:.7em}
.pd2-vel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25em .7em;padding:.6em .75em;border-radius:.8em;background:#F5F7FD;border:1px solid rgba(67,97,238,.1);font-size:.7em;color:#5B6478;font-weight:600}
.pd2-vel b{display:block;height:.6em;border-radius:1em;background:#E4E9F6;overflow:hidden}
.pd2-vel b i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#4CC9F0,#4361EE 55%,#7209B7);transform-origin:left;transform:scaleX(.8)}
.pd2-vel em{grid-column:1/-1;font-style:normal;font-size:.9em;color:#059669;font-weight:700}
@media (prefers-reduced-motion:no-preference){ .motion .pd2-vel b i{animation:mgBar var(--T) cubic-bezier(.4,0,.2,1) infinite} .motion .pd2-vel em{animation:baLive var(--T) ease infinite} }

/* ===================== AI-Centric Bespoke ===================== */
.hv-ag{--T:10s;--ok:#10B981;position:relative;width:100%;max-width:600px;aspect-ratio:auto;margin-inline:auto;font-size:clamp(10px,2.35cqw,14.5px);color:#1E2537}
.hv-ag svg{position:static;inset:auto;width:auto;height:auto;overflow:visible}
.fx-hero .ph-vis:has(.hv-ag){align-self:center;min-height:0}
.hv-ag .pp-glow{position:absolute;left:5%;top:5%;width:90%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,201,240,.22),rgba(114,9,183,.1) 55%,transparent);filter:blur(10px);z-index:0}
.ag-card{position:relative;z-index:1;display:grid;gap:.8em;padding:1.2em;border-radius:1.4em;background:rgba(255,255,255,.9);border:1px solid rgba(67,97,238,.14);box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(23,40,94,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ag-hd{display:flex;align-items:center;justify-content:space-between}
.ag-who{display:inline-flex;align-items:center;gap:.6em}
.ag-who b{display:block;font-size:.95em}.ag-who small{display:block;font-family:var(--mono);font-size:.62em;color:#8A93A6}
.ag-hd .ba-live{font-size:.62em;animation:none!important;opacity:1}
.ag-steps{list-style:none;margin:0;padding:0;display:grid;gap:.35em;position:relative}
.ag-steps::before{content:"";position:absolute;left:.82em;top:1em;bottom:1em;width:2px;background:#E4E9F6}
.ag-steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6em;padding:.45em .6em .45em .3em;border-radius:.6em;font-size:.8em}
.ag-dot{position:relative;z-index:1;width:1.25em;height:1.25em;border-radius:50%;background:#fff;border:2px solid #D5DAE6}
.ag-dot .sp{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#4361EE;opacity:0}
.ag-dot .ok{position:absolute;inset:-2px;border-radius:50%;display:grid;place-items:center;background:var(--ok);opacity:0}
.ag-dot .ok svg{width:.75em!important;height:.75em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.ag-t{font-weight:600;color:#5B6478}
.ag-steps em{font-style:normal;font-family:var(--mono);font-size:.78em;color:#4361EE;padding:.1em .45em;border-radius:.4em;background:#F1F4FC}
.ag-steps li.hold em{color:#B45309;background:rgba(245,158,11,.12)}
.ag-appr{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.7em .8em;border-radius:.9em;background:#FFFBEB;border:1px solid rgba(245,158,11,.4)}
.ag-appr b{display:block;font-size:.78em}.ag-appr small{display:block;font-size:.62em;color:#92400E}
.ag-btns{display:flex;gap:.35em;flex:none}
.ag-no,.ag-yes{font-size:.66em;font-weight:700;padding:.4em .8em;border-radius:1em}
.ag-no{background:#fff;border:1px solid #D5DAE6;color:#5B6478}
.ag-yes{background:#0B1226;color:#fff}
.ag-foot{display:flex;flex-wrap:wrap;gap:.4em}
.ag-foot span{display:inline-flex;align-items:center;gap:.35em;font-size:.66em;font-weight:600;padding:.35em .6em .35em .35em;border-radius:1em;background:#fff;border:1px solid rgba(16,185,129,.3)}
.ag-foot i{width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;background:var(--ok)}
.ag-foot i svg{width:.8em!important;height:.8em!important;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
 .motion .ag-steps li{animation:agRow var(--T) ease infinite;animation-delay:calc(var(--i) * var(--T) / 9)}
 .motion .ag-dot .sp{animation:agSp var(--T) linear infinite,spn .8s linear infinite;animation-delay:calc(var(--i) * var(--T) / 9),0s}
 .motion .ag-dot .ok{animation:agOk var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * var(--T) / 9)}
 .motion .ag-steps li.hold .ag-dot .ok{animation:agOkHold var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:0s}
 .motion .ag-steps li.hold .ag-dot .sp{animation:agSpHold var(--T) linear infinite,spn .8s linear infinite}
 .motion .ag-steps li.hold{animation:agHold var(--T) ease infinite}
 .motion .ag-steps li.s5{animation:agRow5 var(--T) ease infinite}
 .motion .ag-steps li.s5 .ag-dot .ok{animation:agOk5 var(--T) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:0s}
 .motion .ag-steps li.s5 .ag-dot .sp{animation:none}
 .motion .ag-appr{animation:agAppr var(--T) ease infinite}
 .motion .ag-yes{animation:agYes var(--T) ease infinite}
}
@keyframes agRow{0%,1%{background:transparent}3%,9%{background:#F1F4FC}11%,100%{background:transparent}}
@keyframes agSp{0%,1%{opacity:0}2%,9%{opacity:1}10%,100%{opacity:0}}
@keyframes agOk{0%,9%{opacity:0;transform:scale(.4)}11%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes agHold{0%,44%,74%,100%{background:transparent}46%,72%{background:#FFFBEB}}
@keyframes agSpHold{0%,44%{opacity:0}45%,70%{opacity:1}71%,100%{opacity:0}}
@keyframes agOkHold{0%,71%{opacity:0;transform:scale(.4)}73%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes agAppr{0%,42%{opacity:.35;box-shadow:none;background:#FFFBEB;border-color:rgba(245,158,11,.4)}46%,70%{opacity:1;box-shadow:0 0 0 4px rgba(245,158,11,.18);background:#FFFBEB;border-color:rgba(245,158,11,.6)}73%,92%{opacity:1;box-shadow:none;background:#ECFDF5;border-color:rgba(16,185,129,.45)}97%,100%{opacity:.35;background:#FFFBEB;border-color:rgba(245,158,11,.4)}}
@keyframes agYes{0%,62%,72%,100%{transform:none}66%{transform:scale(.92);box-shadow:0 0 0 4px rgba(67,97,238,.25)}}
@keyframes agRow5{0%,74%{background:transparent}76%,82%{background:#ECFDF5}84%,100%{background:transparent}}
@keyframes agOk5{0%,75%{opacity:0;transform:scale(.4)}78%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}

/* AI agent hero: approval label flips from waiting to approved; whole card resets cleanly */
.ag-appr small .ok2{display:none;color:#059669}
@media (prefers-reduced-motion:no-preference){
 .motion .ag-appr small .w1{animation:agW1 var(--T) steps(1) infinite}
 .motion .ag-appr small .ok2{display:inline;animation:agW2 var(--T) steps(1) infinite}
 .motion .ag-card{animation:agCard var(--T) ease infinite}
}
@keyframes agW1{0%,72%{visibility:visible;position:static}73%,100%{visibility:hidden;position:absolute}}
@keyframes agW2{0%,72%{visibility:hidden;position:absolute}73%,96%{visibility:visible;position:static}97%,100%{visibility:hidden;position:absolute}}
@keyframes agCard{0%,95%{opacity:1}97.5%{opacity:.55}100%{opacity:1}}

/* AI agent hero: absolute (non-staggered) step timing so the loop resets cleanly */
@media (prefers-reduced-motion:no-preference){
 .motion .ag-steps li.s0{animation:agR0 var(--T) ease infinite} .motion .ag-steps li.s0 .ag-dot .sp{animation:agS0 var(--T) linear infinite,spn .8s linear infinite} .motion .ag-steps li.s0 .ag-dot .ok{animation:agK0 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ag-steps li.s1{animation:agR1 var(--T) ease infinite} .motion .ag-steps li.s1 .ag-dot .sp{animation:agS1 var(--T) linear infinite,spn .8s linear infinite} .motion .ag-steps li.s1 .ag-dot .ok{animation:agK1 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ag-steps li.s2{animation:agR2 var(--T) ease infinite} .motion .ag-steps li.s2 .ag-dot .sp{animation:agS2 var(--T) linear infinite,spn .8s linear infinite} .motion .ag-steps li.s2 .ag-dot .ok{animation:agK2 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
 .motion .ag-steps li.s3{animation:agR3 var(--T) ease infinite} .motion .ag-steps li.s3 .ag-dot .sp{animation:agS3 var(--T) linear infinite,spn .8s linear infinite} .motion .ag-steps li.s3 .ag-dot .ok{animation:agK3 var(--T) cubic-bezier(.34,1.56,.64,1) infinite}
}
@keyframes agR0{0%,2%{background:transparent}3%,11%{background:#F1F4FC}12%,100%{background:transparent}}
@keyframes agS0{0%,2%{opacity:0}3%,11%{opacity:1}12%,100%{opacity:0}}
@keyframes agK0{0%,11%{opacity:0;transform:scale(.4)}13%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes agR1{0%,12%{background:transparent}13%,21%{background:#F1F4FC}22%,100%{background:transparent}}
@keyframes agS1{0%,12%{opacity:0}13%,21%{opacity:1}22%,100%{opacity:0}}
@keyframes agK1{0%,21%{opacity:0;transform:scale(.4)}23%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes agR2{0%,22%{background:transparent}23%,31%{background:#F1F4FC}32%,100%{background:transparent}}
@keyframes agS2{0%,22%{opacity:0}23%,31%{opacity:1}32%,100%{opacity:0}}
@keyframes agK2{0%,31%{opacity:0;transform:scale(.4)}33%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes agR3{0%,32%{background:transparent}33%,41%{background:#F1F4FC}42%,100%{background:transparent}}
@keyframes agS3{0%,32%{opacity:0}33%,41%{opacity:1}42%,100%{opacity:0}}
@keyframes agK3{0%,41%{opacity:0;transform:scale(.4)}43%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes agW1{0%,72%{visibility:visible;position:static}73%,96%{visibility:hidden;position:absolute}97%,100%{visibility:visible;position:static}}