/*
Theme Name: INNOTECHZ
Theme URI: https://innotechz.com
Author: INNOTECHZ
Description: Custom theme for innotechz.com: AI automation and digital services, with built-in SEO, AEO and GEO markup.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: innotechz
*/
:root{--navy:#0F3359;--blue:#0B7CA6;--ink:#071522;--ink2:#0A1B2E;--panel:#0C2036;--line:#1B3A57;--cyan:#38C6D9;--amber:#F4A10C;--mut:#A9BDD0;--hf:'Plus Jakarta Sans',system-ui,sans-serif;--bf:'Plus Jakarta Sans',system-ui,sans-serif;--cy2:#5BC0E0;--paper:#F5F8FB;--tint:#E6F3F8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--bf);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:8px;background:var(--amber);color:var(--ink);padding:10px 16px;border-radius:6px;z-index:100}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wr{padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px);max-width:1440px;margin:0 auto}
.sec{padding-top:clamp(52px,7vw,100px);padding-bottom:clamp(52px,7vw,100px)}
.alt{background:var(--ink2);max-width:none}
.alt>*{max-width:1296px;margin-left:auto;margin-right:auto}
h1,.h2,.h3{font-family:var(--hf);font-weight:600;margin:0}
.h2{font-size:clamp(30px,3.6vw,48px);line-height:1.12;margin-bottom:18px;letter-spacing:-.01em}
.h3{font-size:22px;line-height:1.25;margin-bottom:10px}
.mu{color:var(--mut);margin:0 0 12px}
.intro{max-width:640px;margin-bottom:34px}
.small{font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:20px}
.two{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}.two>div{flex:1 1 320px}
.cd{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;flex:1 1 270px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;display:block}
.cd:hover{transform:translateY(-8px);border-color:var(--cyan);box-shadow:0 20px 44px rgba(56,198,217,.2);background:#10294A}
.more{display:inline-block;color:var(--cyan);font-weight:600;font-size:15px;transition:transform .25s}.more::after{content:" →"}.cd-link:hover .more{transform:translateX(6px)}
.tag{display:inline-block;border:1px solid var(--cyan);color:var(--cyan);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:500;margin-bottom:14px}
.warn{color:#F6C469}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn,.btn2{position:relative;overflow:hidden;display:inline-block;font:600 16px var(--bf);padding:14px 26px;border-radius:8px;border:0;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn{background:var(--blue);color:#fff}
.btn::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:rgba(255,255,255,.5);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:140%}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,124,166,.4)}
.btn2{border:1.5px solid var(--blue);color:#fff;padding:12.5px 24px}.btn2:hover{background:var(--blue);transform:translateY(-3px)}
/* header */
.site-h{position:sticky;top:0;z-index:50;background:rgba(7,21,34,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.logo img{display:block;transition:transform .3s}.logo:hover img{transform:scale(1.06)}
.nv ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
.nv li{position:relative}
.nv>ul>li>a:not(.btn){position:relative;display:block;padding:8px 0}
.nv>ul>li>a:not(.btn)::after{content:'';position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nv>ul>li>a:not(.btn):hover::after,.nv a[aria-current]::after{transform:scaleX(1)}
.sub{display:none!important;position:absolute;left:-16px;top:100%;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;flex-direction:column;align-items:stretch!important;gap:0!important;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:flex!important}
.sub a{display:block;padding:10px 14px;border-radius:8px}.sub a:hover{background:var(--navy)}
.nv .btn{padding:10px 18px;font-size:15px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
/* hero */
.hero{position:relative;overflow:hidden;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(44px,6vw,88px)}
.hero::before{content:'';position:absolute;inset:-40px;background-image:radial-gradient(#1F4264 1.2px,transparent 1.6px);background-size:34px 34px;opacity:.5;animation:drift 24s linear infinite;pointer-events:none}
.hero-in{position:relative;max-width:1296px;margin:0 auto}
.home-hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(30px,5vw,72px)}
.hero-copy{flex:1 1 440px;max-width:660px}
h1{font-size:clamp(38px,5.2vw,70px);line-height:1.06;letter-spacing:-.015em;margin-bottom:22px}
.page-hero h1{font-size:clamp(34px,4.4vw,58px);max-width:880px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mut);max-width:620px;margin:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 18px;font-size:14px;color:var(--mut)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}.crumbs a:hover{color:var(--cyan)}
.flow{flex:1 1 360px;max-width:500px;margin-left:auto}
.node{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:transform .3s,border-color .3s}
.node:hover{transform:translateY(-4px);border-color:var(--cyan)}
.node b{display:block;color:var(--cyan)}.node span{color:var(--mut);font-size:15px}
.node.hot{border-color:var(--blue)}.node.ok{background:var(--navy)}.node.ok b{color:#fff}.node.ok span{color:#C9DCEB}
.ln{display:block;width:2px;height:26px;background:var(--blue);margin-left:30px;position:relative;transform-origin:top;animation:grow .4s .45s backwards}
.ln::after{content:'';position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulse 2.2s 2.2s infinite}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;animation:blink 1.4s infinite}
.n1{animation:rise .7s .2s backwards}.n2{animation:rise .7s .6s backwards}.n3{animation:rise .7s 1s backwards}.n4{animation:rise .7s 1.4s backwards}
.hero-copy>*{animation:rise .8s backwards}.hero-copy h1{animation-delay:.05s}.hero-copy .lead{animation-delay:.2s}.hero-copy .btns{animation-delay:.35s}
@keyframes drift{to{background-position:34px 34px}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulse{0%{transform:translateY(-4px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(28px);opacity:0}}
@keyframes blink{50%{opacity:.25}}
/* lists and blocks */
.ticks{list-style:none;padding:0;margin:0;max-width:760px}
.ticks li{position:relative;padding:10px 0 10px 32px;color:var(--mut);border-bottom:1px solid var(--line)}
.ticks li::before{content:'';position:absolute;left:0;top:19px;width:14px;height:8px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.steps{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:24px}
.steps li{flex:1 1 180px}.num{font-family:var(--hf);font-size:42px;color:var(--cyan);line-height:1}
.note{background:var(--navy);border-radius:14px;padding:28px;max-width:860px}
.rel{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.rel a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 18px;transition:all .25s}.rel a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.cta{background:var(--navy);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;max-width:none}
.cta .h2{margin:0;max-width:640px}
.faq{max-width:840px}
details{border-top:1px solid var(--line);padding:20px 0}
summary{font-family:var(--hf);font-size:20px;font-weight:600;cursor:pointer;transition:color .25s,padding-left .25s}
summary:hover{color:var(--cyan);padding-left:8px}
details p{margin:12px 0 0}
.prose{max-width:760px}.prose h2{margin:34px 0 8px}.entry img.feat{border-radius:14px;margin-bottom:24px}.entry p,.entry li{color:#D7E3EE}.entry a{color:var(--cyan);text-decoration:underline}
.post-card img{border-radius:10px;margin-bottom:16px;width:100%}.post-card a{display:block}
.posts .cd{flex:1 1 300px;max-width:420px}
/* form */
.form label{display:block;margin-bottom:18px;font-weight:500}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:#fff;font:400 16px var(--bf)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.msg{padding:14px 18px;border-radius:10px;margin-bottom:20px}.msg.ok{background:#0E3B3A;border:1px solid #2DBA9A}.msg.bad{background:#3A1A1A;border:1px solid #D86A6A}
.mini{padding-left:20px;color:var(--mut)}
/* footer */
.site-f{background:#050F1A;border-top:1px solid var(--line);padding-top:54px;font-size:15px}
.fgrid{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.fgrid>div{flex:1 1 180px}.fabout{flex:2 1 280px!important;max-width:360px}
.fh{font:600 16px var(--bf);margin:0 0 12px}.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li{margin-bottom:8px}
.fgrid a{color:var(--mut);transition:color .2s}.fgrid a:hover{color:var(--cyan)}.soc a{margin-right:14px}
.copy{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;padding-bottom:28px}
/* reveal and cursor */
html.js:not(.rv-off) .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
html.js:not(.rv-off) .rv.in{opacity:1;transform:none}
.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:999;border-radius:50%;opacity:0;transition:opacity .3s}
.cur{width:38px;height:38px;border:2px solid var(--cyan);margin:-19px 0 0 -19px;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s,opacity .3s}
.cur-dot{width:7px;height:7px;background:var(--cyan);margin:-3.5px 0 0 -3.5px}
.cur-on .cur,.cur-on .cur-dot{opacity:1}
.cur-on .cur.big{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--amber);background:rgba(244,161,12,.18)}
.cur-on .cur-dot.big{background:var(--amber)}
html.cur-on,html.cur-on a,html.cur-on button,html.cur-on summary{cursor:none}
html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:text}
/* responsive */
@media (max-width:960px){
.burger{display:block}
.nv{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line);padding:12px clamp(20px,5vw,72px) 24px;max-height:80vh;overflow:auto}
.nv.open{display:block}
.nv ul{flex-direction:column;align-items:flex-start;gap:4px}
.sub{display:flex!important;position:static;border:0;box-shadow:none;background:none;padding:0 0 6px 14px;min-width:0}
.sub a{padding:6px 0;color:var(--mut)}
.flow{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.js .rv{opacity:1!important;transform:none!important}}

/* ===== Global overrides: light header, single sans family, cursor ===== */
h1,.h2,.h3{font-weight:700;letter-spacing:-.02em}
body{font-size:17px}
.site-h{background:#fff;color:var(--navy);border-bottom:1px solid #DDE6EE;backdrop-filter:none}
.site-h .nv a{color:var(--navy)}
.site-h .nv a.btn{color:#fff}
.hbar{padding-top:12px;padding-bottom:12px;max-width:1280px}
.logo img{height:44px;width:auto}
.nv ul{gap:20px;font-size:15px;font-weight:600}
.sub{background:#fff;border-color:#DDE6EE;box-shadow:0 18px 36px rgba(15,51,89,.14)}
.sub a:hover{background:#EAF3F8}
.burger{border-color:#C9D6E2}.burger span{background:var(--navy)}
.cur{border-color:#fff;mix-blend-mode:difference}.cur-dot{background:#fff;mix-blend-mode:difference}
.cur-on .cur.big{border-color:#fff;background:rgba(255,255,255,.28)}.cur-on .cur-dot.big{background:#fff}
@media (max-width:960px){.nv{background:#fff;border-bottom:1px solid #DDE6EE}.sub a{color:var(--navy)}}

/* ===== Homepage (hp-) ===== */
.hp-wrap{max-width:1280px;margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
.hp-kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin:0 0 16px}
.hp-h2{font-size:clamp(30px,3.8vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.03em;margin:0 0 20px}
.hp-link{display:inline-block;font-weight:700;color:var(--blue);border-bottom:2px solid currentColor;padding-bottom:2px;transition:color .2s,transform .2s}.hp-link:hover{transform:translateX(4px)}
/* hero */
.hp-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(40px,6vw,84px) 0 clamp(56px,7vw,100px)}
.hp-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.hp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
.hp-hero h1{font-size:clamp(38px,4.8vw,66px);line-height:1.03;font-weight:800;letter-spacing:-.035em;margin:0 0 24px}
.hp-hero h1 span{display:block}.hp-hero h1 .hl{color:var(--cy2)}
.hp-lead{font-size:clamp(17px,1.4vw,19px);color:#C3D4E4;max-width:470px;margin:0 0 32px}
.hp-btns{display:flex;flex-wrap:wrap;gap:14px}
.hp-hero .btn{padding:16px 30px}.hp-hero .btn2{border-color:#fff;padding:14.5px 28px}.hp-hero .btn2:hover{background:#fff;color:var(--navy)}
.hp-chips{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:38px 0 0;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#9FB6CC}
.hp-chips li+li::before{content:"/";margin-right:16px;color:var(--blue)}
/* workbench visual */
.bench{container-type:inline-size;position:relative;width:100%;max-width:640px;margin-left:auto;aspect-ratio:1/.9;--mx:0;--my:0}
.bench::before,.bench::after{content:'';position:absolute;width:22px;height:22px;border:0 solid var(--cy2)}
.bench::before{left:-14px;top:-14px;border-left-width:2px;border-top-width:2px}
.bench::after{right:-14px;bottom:-14px;border-right-width:2px;border-bottom-width:2px}
.bl{position:absolute;translate:calc(var(--mx)*var(--d,0)*1px) calc(var(--my)*var(--d,0)*1px);transition:translate .5s ease-out;opacity:0;animation:benchIn .9s cubic-bezier(.2,.7,.2,1) var(--t,0s) forwards}
@keyframes benchIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.b-desk{left:-5%;right:-5%;bottom:0;height:26%;background:#0C2C4D;border-top:1px solid #23527F;--t:.05s}
.b-mon{left:1%;top:1%;width:69%;height:60%;background:#08192B;border-radius:1.2cqw;padding:1.4cqw;box-shadow:0 3cqw 5cqw rgba(0,0,0,.35);--d:6;--t:.2s}
.b-mon .scr{background:#fff;border-radius:.5cqw;height:100%;padding:3cqw 3.2cqw;display:flex;flex-direction:column;gap:3cqw;overflow:hidden}
.b-mon .stand{position:absolute;left:43%;bottom:-6.5cqw;width:12%;height:6.5cqw;background:#0F2C4B}
.m-nav{display:flex;align-items:center;gap:2.2cqw}
.m-nav i{width:3.4cqw;height:3.4cqw;background:var(--navy)}.m-nav b{width:5.5cqw;height:.9cqw;background:#C7D3DF;border-radius:1cqw}.m-nav em{margin-left:auto;width:8cqw;height:2.8cqw;background:var(--blue);border-radius:.5cqw}
.m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;align-items:center}
.m-hero u{display:block;background:var(--navy);height:3cqw;margin-bottom:1.2cqw;border-radius:.3cqw}.m-hero u:nth-child(2){width:72%}.m-hero u:nth-child(3){height:1cqw;background:#C7D3DF;width:90%;margin-top:2cqw}
.m-hero s{display:block;width:40%;height:3cqw;background:var(--blue);border-radius:.5cqw;margin-top:2cqw}
.m-img{height:15cqw;background:var(--tint);border-radius:.8cqw;position:relative;overflow:hidden}
.m-img::before{content:'';position:absolute;left:18%;top:20%;width:42%;aspect-ratio:1;border-radius:50%;background:var(--navy)}
.m-img::after{content:'';position:absolute;right:10%;bottom:14%;width:30%;aspect-ratio:1;background:var(--blue)}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}.m-row i{height:6.5cqw;background:#EEF3F8;border-radius:.6cqw;border-top:.5cqw solid var(--blue)}
.b-ph{right:1%;top:15%;width:21%;height:57%;background:#08192B;border-radius:3.6cqw;padding:1.2cqw;box-shadow:0 3cqw 5cqw rgba(0,0,0,.4);--d:14;--t:.5s}
.b-ph .ps{background:#fff;border-radius:2.7cqw;height:100%;overflow:hidden;padding:2cqw 1.8cqw;display:flex;flex-direction:column;gap:1.6cqw}
.ps .h{height:1.4cqw;width:55%;background:var(--navy);border-radius:1cqw}.ps .c{height:11cqw;background:var(--tint);border-radius:1.4cqw;position:relative}.ps .c::after{content:'';position:absolute;left:14%;top:22%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--blue)}
.ps .r{height:3.8cqw;background:#EEF3F8;border-radius:1cqw}.ps .r.s{width:70%}.ps .tab{margin-top:auto;display:flex;justify-content:space-around}.ps .tab i{width:2cqw;height:2cqw;border-radius:50%;background:#C7D3DF}.ps .tab i:first-child{background:var(--blue)}
.b-sheet{left:0;bottom:7%;width:29%;aspect-ratio:3/4;background:#fff;padding:2.2cqw;rotate:-5deg;box-shadow:0 2cqw 4cqw rgba(0,0,0,.35);--d:-10;--t:.8s;color:var(--navy);display:flex;flex-direction:column;gap:1.6cqw;z-index:2}
.b-sheet .mk{width:7cqw;height:7cqw;background:var(--navy);position:relative}.b-sheet .mk::after{content:'';position:absolute;right:-1.4cqw;bottom:-1.4cqw;width:4cqw;height:4cqw;background:var(--blue)}
.b-sheet .aa{font-size:7cqw;font-weight:800;line-height:1;letter-spacing:-.04em;margin-top:.8cqw}
.b-sheet .sw{display:flex;gap:.8cqw}.b-sheet .sw i{flex:1;height:3.4cqw;border-radius:.4cqw}
.b-sheet small{font-size:1.35cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B829A;margin-top:auto}
.b-tl{left:26%;right:1%;bottom:2%;height:23%;background:#061629;border:1px solid #23527F;border-radius:.8cqw;padding:1.6cqw 2cqw;--d:8;--t:1.1s;color:#8EA9C4;z-index:3}
.b-tl .th{display:flex;justify-content:space-between;font-size:1.35cqw;font-weight:600;letter-spacing:.06em;margin-bottom:1.2cqw;font-variant-numeric:tabular-nums}
.b-tl .tk{position:relative;height:2.6cqw;margin-bottom:.9cqw;background:rgba(255,255,255,.04);border-radius:.4cqw}.b-tl .tk i{position:absolute;top:0;bottom:0;border-radius:.4cqw}
.b-tl .ph{position:absolute;top:3.6cqw;bottom:1.2cqw;left:2cqw;width:.35cqw;background:#fff;animation:play 16s linear infinite}
@keyframes play{from{left:2cqw}to{left:calc(100% - 2cqw)}}
.b-cn{inset:0;width:100%;height:100%;--d:3;--t:1.4s;pointer-events:none;z-index:4}
.b-cn path{fill:none;stroke:var(--cy2);stroke-width:.35;stroke-dasharray:1.2 1.2;animation:flow 2.4s linear infinite}.b-cn circle{fill:var(--navy);stroke:var(--cy2);stroke-width:.4}
@keyframes flow{to{stroke-dashoffset:-2.4}}
/* services */
.hp-services{background:var(--paper);color:var(--navy);padding:clamp(64px,9vw,128px) 0}
.hp-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px)}
.hp-sticky{align-self:start;position:sticky;top:110px}.hp-sticky p{color:#4A6580;max-width:380px;margin:0 0 24px}
.hp-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.hp-list a{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;gap:4px 16px;align-items:baseline;padding:26px 10px;border-bottom:1px solid #CFDAE5;overflow:hidden;transition:color .35s,padding .35s;color:var(--navy)}
.hp-list a::before{content:'';position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hp-list a::after{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yel);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hp-list a>*{position:relative}
.hp-list a:hover::before,.hp-list a:focus-visible::before,.hp-list a:hover::after,.hp-list a:focus-visible::after{transform:scaleY(1)}
.hp-list a:hover,.hp-list a:focus-visible{color:#fff;padding-left:24px}
.hp-list .n{font-size:14px;font-weight:700;color:var(--blue)}.hp-list a:hover .n,.hp-list a:focus-visible .n{color:var(--yel)}
.hp-list .t{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hp-list .d{grid-column:2;font-size:16px;color:#4A6580}.hp-list a:hover .d,.hp-list a:focus-visible .d{color:#BFD3E6}
.hp-list .ar{grid-row:1;grid-column:3;justify-self:end;font-size:22px;transition:transform .3s}.hp-list a:hover .ar,.hp-list a:focus-visible .ar{transform:translateX(6px);color:var(--yel)}
/* work */
.hp-work{background:var(--navy);color:#fff;padding:clamp(64px,9vw,128px) 0}
.hp-work .hp-kicker{color:var(--cy2)}
.hp-wh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:56px}.hp-wh p{color:#B6C8DA;max-width:380px;margin:0}
.hp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:48px 28px}
.wk{display:block;color:#fff}
.wk .vis{display:block;background:#0A2540;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.wk .vis svg{display:block;width:100%;height:100%}
.wk:hover .vis{transform:translateY(-8px);box-shadow:0 24px 40px rgba(0,0,0,.3)}
.wk .cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:18px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--cy2)}
.wk .cap em{font-style:normal;border:1px solid #3F6C97;border-radius:999px;padding:2px 10px;font-size:11.5px;color:#B6C8DA;letter-spacing:.06em}
.wk h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:8px 0 6px}.wk p{margin:0;color:#B6C8DA;max-width:460px;font-size:16px}
.wk.a{grid-column:1/8}.wk.a .vis{aspect-ratio:16/11}
.wk.b{grid-column:8/13;margin-top:110px}.wk.b .vis{aspect-ratio:4/5.1}
.wk.c{grid-column:1/6;margin-top:10px}.wk.c .vis{aspect-ratio:1}
.wk.d{grid-column:6/13;margin-top:70px}.wk.d .vis{aspect-ratio:16/10}
/* why */
.hp-why{background:#fff;color:var(--navy);padding:clamp(64px,9vw,128px) 0}
.hp-why-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,96px);align-items:end}
.hp-why-top .hp-h2{font-size:clamp(34px,5vw,70px);line-height:1.02;margin:0}
.hp-why-top p{color:#4A6580;margin:0}
.sq{position:relative;display:inline-block}.sq svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.3em}
.hp-pr{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vw,96px)}
.hp-pr>div{border-left:4px solid var(--blue);padding-left:22px}.hp-pr>div:nth-child(2){margin-top:44px}.hp-pr>div:nth-child(3){margin-top:88px}
.hp-pr h3{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em}.hp-pr p{margin:0;color:#4A6580}
/* process */
.hp-proc{background:var(--tint);color:var(--navy);padding:clamp(64px,9vw,120px) 0}
.hp-proc ol{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.hp-proc ol::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:var(--navy)}
.hp-proc li{position:relative;padding-top:44px}
.hp-proc li::before{content:'';position:absolute;left:0;top:0;width:20px;height:20px;background:var(--blue);border:4px solid var(--tint);box-shadow:0 0 0 2px var(--navy);border-radius:50%}
.hp-proc .k{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.1em}.hp-proc h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:4px 0 8px}.hp-proc p{margin:0;color:#3E5873}
/* cta */
.hp-cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(64px,9vw,120px) 0}
.hp-cta-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:end}
.hp-cta h2{font-size:clamp(34px,5vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin:0}
.hp-cta h2 span{color:var(--cy2)}
.hp-cta .ct{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.hp-cta .ct a:not(.btn){color:#C3D4E4;border-bottom:1px solid #3F6C97}.hp-cta .ct a:not(.btn):hover{color:#fff}
.hp-mark{position:absolute;right:-30px;top:-40px;opacity:.9;pointer-events:none}.hp-mark i{position:absolute;background:#123F6C}
/* footer */
.hf{background:#0A2540;color:#C3D4E4;padding:48px 0 0;font-size:15px}
.hf-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.hf img{height:40px;width:auto;display:block;margin-bottom:14px}.hf-top p{margin:0;max-width:340px;color:#9FB6CC;font-size:14px}
.hf h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 12px;font-weight:700}
.hf ul{list-style:none;margin:0;padding:0}.hf li{margin-bottom:7px}.hf a{color:#C3D4E4;transition:color .2s}.hf a:hover{color:#fff}
.hf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:36px;padding:18px 0 24px;border-top:1px solid #1E4670;font-size:14px;color:#9FB6CC}
.hf-bot span a{margin-left:16px}
/* responsive */
@media (max-width:960px){
.hp-hero-in,.hp-split,.hp-why-top,.hp-cta-in{grid-template-columns:1fr}
.hp-sticky{position:static}
.bench{margin:12px auto 0;max-width:560px}
.hp-grid{display:flex;flex-direction:column;gap:44px}.wk.b,.wk.c,.wk.d{margin-top:0}
.hp-pr{grid-template-columns:1fr}.hp-pr>div:nth-child(n){margin-top:0}
.hp-proc ol{grid-template-columns:1fr;gap:0;margin-top:36px}.hp-proc ol::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
.hp-proc li{padding:0 0 34px 48px}.hp-proc li:last-child{padding-bottom:0}
.hf-top{grid-template-columns:1fr 1fr}.hf-top>div:first-child{grid-column:1/-1}
}
@media (max-width:900px),(prefers-reduced-motion:reduce){
.bl{animation:none;opacity:1;translate:none;transition:none}.b-tl .ph{animation:none;left:42%}.b-cn path{animation:none}
}

/* ===== Fixes after first review ===== */
.nv a{white-space:nowrap}
.nv ul{gap:18px;font-size:14.5px}
.hbar{gap:24px}
.hp-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hp-hero h1{font-size:clamp(32px,4vw,58px)}
.hp-chips li{display:flex;align-items:center;gap:8px}
.hp-chips li::before,.hp-chips li+li::before{content:'';width:6px;height:6px;margin:0;background:var(--blue)}
.b-mon .stand{left:46%;width:8%;bottom:-4.5cqw;height:4.5cqw}
.b-mon .stand::after{content:'';position:absolute;left:-90%;right:-90%;bottom:0;height:1cqw;background:#0F2C4B;border-radius:.5cqw}
@media (max-width:1180px){
.burger{display:block}
.nv{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #DDE6EE;padding:12px clamp(20px,5vw,72px) 24px;max-height:80vh;overflow:auto}
.nv.open{display:block}
.nv ul{flex-direction:column;align-items:flex-start;gap:4px}
.sub{display:flex!important;position:static;border:0;box-shadow:none;background:none;padding:0 0 6px 14px;min-width:0}
.sub a{padding:6px 0;color:var(--navy)}
}
.hp-hero h1{font-size:clamp(30px,3.6vw,52px)}
@media (min-width:1000px){.hp-hero h1 span{white-space:nowrap}}
.hf-bot span{display:flex;flex-wrap:wrap;gap:6px 18px}.hf-bot span a{margin-left:0}
@media (max-width:960px){.hp-hero-in{grid-template-columns:1fr}.hp-hero .btn,.hp-hero .btn2{flex:1 1 200px;text-align:center}}
.hp-services .hp-kicker,.hp-proc .hp-kicker,.hp-why .hp-kicker{color:#0A6A8F}
.hp-link{color:#0A6A8F}.hp-list .n,.hp-proc .k{color:#0A6A8F}

/* ===== Homepage hero v3 (hx-): matches the approved reference ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* dark header (all pages) */
.site-h{background:#fff;border-bottom:1px solid #DDE6EE;color:var(--navy)}
.site-h .nv a{color:var(--navy)}
.site-h .sub a{color:#fff}
.site-h .nv a.btn{background:#FFD21F;color:#0A2447;border-radius:999px;padding:11px 22px;display:inline-flex;gap:10px;align-items:center}
.site-h .nv a.btn span{transition:transform .25s}.site-h .nv a.btn:hover span{transform:translateX(5px)}
.nv>ul>li>a:not(.btn)::after{background:#FFD21F}
.sub{background:#0B2B52;border-color:#1E4670;box-shadow:0 18px 36px rgba(0,0,0,.4)}
.sub a:hover{background:#123F6C}
.burger{border-color:#C9D6E2}.burger span{background:var(--navy)}
@media (max-width:1180px){.nv{background:#fff;border-bottom:1px solid #DDE6EE}.sub a,.site-h .sub a{color:var(--navy)}}

.hx{position:relative;overflow:hidden;color:#fff;background:#071A36;min-height:clamp(620px,calc(100vh - 68px),860px)}
.hx-bg{position:absolute;inset:0;pointer-events:none}
.hx .g{position:absolute;border-radius:50%}
.hx .g1{width:52vw;height:52vw;right:-4vw;top:-10vw;background:radial-gradient(circle,rgba(30,110,230,.55),transparent 66%);animation:gd1 24s ease-in-out infinite alternate}
.hx .g2{width:34vw;height:34vw;left:26vw;bottom:-16vw;background:radial-gradient(circle,rgba(11,124,166,.45),transparent 66%);animation:gd2 28s ease-in-out infinite alternate}
.hx .g3{width:22vw;height:22vw;left:-6vw;top:8vw;background:radial-gradient(circle,rgba(32,207,255,.22),transparent 66%);animation:gd1 30s ease-in-out infinite alternate-reverse}
@keyframes gd1{to{transform:translate3d(-3vw,2vw,0) scale(1.08)}}@keyframes gd2{to{transform:translate3d(4vw,-2vw,0) scale(1.1)}}
.hx-in{position:relative;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,60fr);gap:2vw;align-items:center;padding:clamp(28px,4vw,64px) 0 clamp(80px,8vw,120px) clamp(72px,8.3vw,170px)}
.hx-eye{margin:0 0 18px;font-size:clamp(11px,.85vw,14px);letter-spacing:.32em;text-transform:uppercase;color:#20CFFF;font-weight:600}.hx-eye i{font-style:normal;color:#fff;margin:0 .6em}
.hx h1{font-size:clamp(34px,3.75vw,72px);line-height:1.02;font-weight:800;letter-spacing:-.04em;margin:0 0 26px}
.hx h1 span{display:block;white-space:nowrap}.hx h1 .hl{color:#20CFFF}
.hx-lead{font-size:clamp(16px,1.2vw,21px);line-height:1.65;color:#D3E2F4;max-width:34em;margin:0 0 38px}
.hx-btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.hx-btn{display:inline-flex;align-items:center;gap:12px;background:#FFD21F;color:#0A2447;font-weight:700;font-size:clamp(16px,1.15vw,19px);padding:clamp(14px,1.1vw,19px) clamp(26px,2vw,38px);border-radius:999px;transition:transform .25s,box-shadow .25s,background .25s}
.hx-btn svg,.hx-link svg{width:22px;height:22px;transition:transform .3s}
.hx-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,210,31,.35);background:#FFDE55}.hx-btn:hover svg{transform:translateX(6px)}
.hx-div{width:1px;height:46px;background:rgba(255,255,255,.3)}
.hx-link{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:clamp(16px,1.15vw,19px);color:#fff;padding:8px 2px}.hx-link svg{color:#20CFFF}
.hx-link:hover{color:#FFD21F}.hx-link:hover svg{transform:translateX(7px);color:#FFD21F}
.hx a:focus-visible,.hx button:focus-visible{outline:3px solid #FFD21F;outline-offset:4px}
.hx-prog{display:flex;align-items:center;gap:18px;margin-top:clamp(36px,5vw,68px);font-size:13px;color:#C7DAF0;font-variant-numeric:tabular-nums}
.hx-prog .bar{width:120px;height:2px;background:rgba(255,255,255,.2);overflow:hidden}
.hx-prog .bar i{display:block;height:100%;background:#20CFFF;transform-origin:left;transform:scaleX(.25)}
.hx-prog .bar.run i{animation:fill 5s linear forwards}@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hx-prog .num u{display:inline-block;width:26px;height:1px;background:#20CFFF;vertical-align:middle;margin:0 6px}.hx-prog em{font-style:normal;color:#20CFFF}
/* stage */
.wk-stage{position:relative;container-type:inline-size;width:100%;aspect-ratio:1.55/1;margin-right:-2vw;--mx:0;--my:0}
.wk-stage i,.wk-stage p{margin:0}
.hv{display:block;width:100%;height:100%;overflow:visible}
.hv *{transform-box:fill-box}
.hv text{font-family:inherit}
.hv .ht{font-size:10.5px;font-weight:700;fill:#fff;letter-spacing:.01em}.hv .hb{font-size:7.5px;font-weight:700}.hv .hl1{font-size:17px;font-weight:800;letter-spacing:-.02em}
.hc{translate:calc(var(--mx)*var(--d,0)*1px) calc(var(--my)*var(--d,0)*1px);transition:translate .6s ease-out;animation:hvin 1s cubic-bezier(.2,.7,.2,1) var(--t,0s) backwards}
@keyframes hvin{from{opacity:0;transform:translateY(24px) scale(.96)}}
.hf{transform-origin:50% 50%;transition:scale .4s ease}
.hf.f1{animation:hvf 7s ease-in-out infinite alternate}.hf.f2{animation:hvf 8.5s -2s ease-in-out infinite alternate}.hf.f3{animation:hvf 9s -4s ease-in-out infinite alternate}.hf.f4{animation:hvf 6.5s -1s ease-in-out infinite alternate}.hf.f5{animation:hvf 8s -3s ease-in-out infinite alternate}.hf.f6{animation:hvf 7.5s -5s ease-in-out infinite alternate}.hf.f7{animation:hvf 10s -2s ease-in-out infinite alternate}.hf.f8{animation:hvf 6s -1s ease-in-out infinite alternate}
@keyframes hvf{to{transform:translateY(-6px)}}
.hf .gl{opacity:0;transition:opacity .4s}.hf .bd{transition:stroke .4s}
.hf.on{scale:1.035}.hf.on .gl{opacity:.28}.hf.on .bd{stroke:#FFD21F;stroke-width:1.6}
.hfar{translate:calc(var(--mx)*-5px) calc(var(--my)*-3px);transition:translate .6s ease-out}
.hring{transform-origin:50% 50%;animation:hvdash 40s linear infinite}
@keyframes hvdash{to{stroke-dashoffset:-240}}
.hst{animation:hvst 4s var(--d) ease-in-out infinite}@keyframes hvst{50%{opacity:.15}}
.hfl{animation:hvfl 1.8s linear infinite}@keyframes hvfl{to{stroke-dashoffset:-24}}
.hv .pk{offset-rotate:0deg;animation:hvpk 3.4s linear infinite}.hv .hor{animation-duration:24s}
@keyframes hvpk{0%{offset-distance:0%;opacity:0}12%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@supports not (offset-path:path('M0 0L1 1')){.hv .pk{display:none}}
.hv .gx,.hv .hgx{transform-origin:0 50%;animation:hvgx 1.1s var(--d,0s) cubic-bezier(.2,.7,.2,1) backwards}
@keyframes hvgx{from{transform:scaleX(0)}}
.hsp{transform-origin:50% 50%;animation:hvsp 22s linear infinite}@keyframes hvsp{to{transform:rotate(360deg)}}
.hpop{transform-origin:50% 50%;animation:hvpop 3s ease-in-out infinite}@keyframes hvpop{50%{transform:scale(1.18)}}
.hcode{transform-origin:0 50%;animation:hvcode 8s var(--d) infinite backwards}@keyframes hvcode{0%{transform:scaleX(0)}14%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.hbl{animation:hvbl 1s steps(2,start) infinite}@keyframes hvbl{to{opacity:0}}
.hw{stroke:#4A78AE;stroke-width:.8;fill:#2B8CC4;animation:hvw 9s var(--d,0s) infinite backwards}.hwy{fill:#FFD21F}.hwc{fill:#20CFFF}
@keyframes hvw{0%,4%{fill-opacity:0}16%,92%{fill-opacity:1}100%{fill-opacity:0}}
.hcur{transform:translate(70px,66px);animation:hvcur 9s ease-in-out infinite}
@keyframes hvcur{0%,8%{transform:translate(20px,36px)}30%,38%{transform:translate(70px,40px)}60%,70%{transform:translate(96px,70px)}100%{transform:translate(20px,36px)}}
.hmark{transform-origin:50% 50%;animation:hvmk 6s ease-in-out infinite}@keyframes hvmk{50%{transform:rotate(6deg) scale(1.06)}}
.hsel{animation:hvmarch 1.6s linear infinite}@keyframes hvmarch{to{stroke-dashoffset:-12}}
.hsw{transform-origin:0 50%;animation:hvsw 6s infinite}@keyframes hvsw{0%{transform:scaleX(0)}14%,100%{transform:scaleX(1)}}
.hrt{animation:hvrt 3s ease-out infinite}.hrt2{animation-delay:1.3s}@keyframes hvrt{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-22px);opacity:0}}
.hgy{transform-origin:50% 100%;animation:hvgy 5s var(--d,0s) ease-out infinite}@keyframes hvgy{0%{transform:scaleY(.05)}25%,100%{transform:scaleY(1)}}
.hpp{transform-origin:50% 50%;animation:hvpop 3.2s ease-in-out infinite}
.hph{transform:translateX(60px);animation:hvph 6s linear infinite}@keyframes hvph{from{transform:translateX(12px)}to{transform:translateX(118px)}}
.hdraw{stroke-dasharray:100;animation:hvdraw 6s ease-in-out infinite}@keyframes hvdraw{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
.hdash{stroke-dasharray:4 5;animation:hvfl 1.2s linear infinite}
.hnd{transform-origin:50% 50%;animation:hvnd 3.2s var(--d,0s) ease-in-out infinite}@keyframes hvnd{0%,70%,100%{transform:scale(1)}35%{transform:scale(1.25)}}

/* chat */
.hx-chat{position:fixed;right:clamp(12px,2vw,40px);bottom:calc(clamp(14px,2vw,28px) + env(safe-area-inset-bottom,0px));z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:calc(100% - 24px)}
.cb{display:flex;align-items:center;background:rgba(10,36,71,.93);border:1px solid rgba(32,207,255,.6);border-radius:999px;padding:6px 8px 6px 6px;color:#fff;cursor:pointer;font:inherit;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s,border-color .25s}
.cb:hover{transform:translateY(-3px);border-color:#FFD21F}
.rob{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#1D5FD0,#0A2447);animation:breathe 4s ease-in-out infinite}.rob svg{width:44px;height:44px}
@keyframes breathe{50%{transform:translateY(-3px) scale(1.05)}}
.bub{display:flex;flex-direction:column;text-align:left;font-size:13.5px;line-height:1.35;padding:0 14px}.bub b{font-weight:700}
.chev{width:36px;height:36px;border-radius:50%;background:#FFD21F;color:#0A2447;display:grid;place-items:center;font-size:26px;font-weight:700;line-height:1;transition:transform .25s}.cb[aria-expanded=true] .chev{transform:rotate(90deg)}
.cp{display:flex;flex-direction:column;width:min(360px,calc(100vw - 32px));background:#0A2447;border:1px solid rgba(32,207,255,.5);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;animation:cpIn .28s cubic-bezier(.2,.7,.2,1)}.cp[hidden]{display:none}
@keyframes cpIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cp-h{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#0E3466;border-bottom:1px solid rgba(255,255,255,.1)}.cp-h div{flex:1}.cp-h b{display:block;font-size:15px}.cp-h small{color:#9FC0E6;font-size:12px}
.rb2{width:34px;height:34px;border-radius:50%;background:#2D6CFF;display:grid;place-items:center}.rb2 svg{width:22px;height:22px}
.cp-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}.cp-x:hover{border-color:#FFD21F;color:#FFD21F}
.cp-b{padding:16px;max-height:240px;overflow:auto}
.m{margin:0 0 10px;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.45;max-width:90%;color:#fff}.m.bot{background:#14396B}.m.me{background:#FFD21F;color:#0A2447;margin-left:auto}.m.note{background:transparent;border:1px dashed rgba(255,255,255,.28);color:#B6C8DA;font-size:12.5px;max-width:100%}
.m a{color:#FFD21F;text-decoration:underline}
.cp-q{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}.cp-q a{font-size:13px;font-weight:600;border:1px solid rgba(32,207,255,.6);border-radius:999px;padding:6px 12px;color:#fff;transition:all .2s}.cp-q a:hover{background:#FFD21F;border-color:#FFD21F;color:#0A2447}
.cp-f{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.1)}
.cp-f input{flex:1;min-width:0;background:#06182F;border:1px solid #2A5584;border-radius:999px;padding:10px 14px;color:#fff;font:inherit;font-size:14.5px}.cp-f input:focus{outline:2px solid #20CFFF}
.cp-f button{background:#FFD21F;color:#0A2447;border:0;border-radius:999px;padding:0 16px;font-weight:700;cursor:pointer}
/* yellow cursor (overrides earlier cursor styles) */
.cur-on .cur,.cur-on .cur-dot{mix-blend-mode:normal;opacity:1;position:fixed;left:0;top:0;pointer-events:none;z-index:99999;border-radius:50%}
.cur-on .cur{width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid rgba(255,210,31,.95);background:rgba(255,210,31,.1);box-shadow:0 0 0 1px rgba(10,36,71,.5);display:grid;place-items:center;font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:#0A2447;transition:width .25s,height .25s,margin .25s,background .25s,opacity .2s}
.cur-on .cur.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(255,210,31,.3);border-color:#FFD21F}
.cur-on .cur-dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:#FFD21F;box-shadow:0 0 0 1.5px #0A2447;transition:opacity .2s}
.cur-on .cur.hide,.cur-on .cur-dot.hide{opacity:0}
/* responsive */
@media (max-width:1180px){
.hx{display:flex;flex-direction:column}
.hx-in{order:1;grid-template-columns:1fr;padding:32px clamp(20px,5vw,56px) 40px}
.hx h1 span{white-space:normal}
.wk-stage{margin:8px 0 0}
.hx-chat{right:12px;bottom:12px}
.bub{display:none}.cb{padding:6px}
}
@media (max-width:640px){.hx-div{display:none}.hx-prog{margin-top:30px}}
@media (prefers-reduced-motion:reduce){.hx .g,.rob{animation:none!important}.hv .pk{display:none}.hx-prog .bar i{transform:scaleX(.25)}}
.hbar{max-width:none;padding-left:clamp(20px,6.6vw,130px);padding-right:clamp(20px,6.6vw,130px)}
.hx-prog .num{font-family:inherit;font-size:13px;line-height:1;color:#C7DAF0;margin:0}.hx-prog .num b{font-weight:700;color:#fff}
.plant{left:-16%;top:-14%}

/* ===== Footer: social icons + link hover/focus animation ===== */
.hf-bot{align-items:center}
.hf-contact{display:flex;flex-wrap:wrap;gap:6px 18px}
.hf .hf-social{display:flex;gap:10px;list-style:none;margin:20px 0 0;padding:0}
.hf-social li{margin:0}
.hf .hf-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(91,192,224,.5);color:#fff;transition:transform .25s ease,border-color .25s ease,background-color .25s ease,color .25s ease}
.hf-social svg{width:18px;height:18px;fill:currentColor;display:block}
.hf .hf-social a:hover,.hf .hf-social a:focus-visible{transform:translateY(-3px);border-color:#F4A10C;background-color:rgba(244,161,12,.14);color:#F4A10C}
.hf-top ul:not(.hf-social) li a{position:relative;display:inline-block;padding:2px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .25s ease,transform .25s ease,background-size .3s ease}
.hf-top ul:not(.hf-social) li a:hover,.hf-top ul:not(.hf-social) li a:focus-visible{color:#fff;transform:translateX(5px);background-size:100% 1px}
.hf a:focus-visible{outline:2px solid #F4A10C;outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){.hf a,.hf .hf-social a{transition:color .01s,background-color .01s,border-color .01s}.hf-top ul:not(.hf-social) li a:hover,.hf-top ul:not(.hf-social) li a:focus-visible,.hf .hf-social a:hover,.hf .hf-social a:focus-visible{transform:none}}

/* =====================================================================
   Design system v4: the homepage (hx) is the reference for every page
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/fraunces-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/fraunces-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--hf:'Fraunces',Georgia,'Times New Roman',serif;--yel:#FFD21F;--yel2:#FFDE55;--hxnavy:#071A36;--hxpanel:#0A2447;--cy:#20CFFF}
/* every heading, in every section, uses Fraunces; body copy stays Plus Jakarta Sans */
h1,h2,h3,h4,h5,h6,.h2,.h3,.hp-h2,.hp-list .t,summary{font-family:var(--hf);font-optical-sizing:auto;font-weight:700;letter-spacing:-.015em}
h1,.hx h1,.page-hero h1{letter-spacing:-.02em}
summary{font-weight:600}
.hf h2{font-weight:700;letter-spacing:.1em}
/* base */
body{background:var(--hxnavy)}
.skip{background:var(--yel)}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
/* header: identical on every page */
.hbar{max-width:none;padding-left:clamp(20px,6.6vw,130px);padding-right:clamp(20px,6.6vw,130px)}
.site-h .nv a.btn{background:var(--yel);color:#0A2447;border-radius:999px;padding:11px 22px;display:inline-flex;gap:10px;align-items:center;font-weight:700}
.site-h .nv a.btn:hover{background:var(--yel2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,210,31,.3)}
.site-h .nv>ul>li>a:not(.btn):hover{color:var(--blue)}
.site-h .nv a[aria-current]{color:var(--navy)}
.sub a{transition:background .2s,color .2s,padding-left .2s}
.site-h .sub a:hover,.site-h .sub a:focus-visible{background:#123F6C;color:var(--yel);padding-left:18px}
@media (max-width:1180px){.site-h .sub a:hover{padding-left:0}}
/* buttons: yellow pill, same motion as the hero button */
.btn{background:var(--yel);color:#0A2447;border-radius:999px;font-weight:700;padding:15px 32px;display:inline-flex;align-items:center;gap:10px;transition:transform .25s,box-shadow .25s,background .25s}
.btn::after{display:none}
.btn:hover,.btn:focus-visible{background:var(--yel2);transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,210,31,.35)}
.btn2{border:1.5px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;padding:13.5px 30px;font-weight:600;transition:transform .25s,border-color .25s,color .25s,background .25s}
.btn2:hover,.btn2:focus-visible{background:transparent;border-color:var(--yel);color:var(--yel);transform:translateY(-3px)}
.hp-cta .btn{background:var(--yel)}
/* page hero: same glow field as the homepage hero */
.page-hero{max-width:none;background:radial-gradient(circle at 88% -12%,rgba(30,110,230,.55),transparent 46%),radial-gradient(circle at 34% 125%,rgba(11,124,166,.42),transparent 42%),radial-gradient(circle at -4% 22%,rgba(32,207,255,.2),transparent 30%),var(--hxnavy);padding-top:clamp(44px,6vw,92px);padding-bottom:clamp(56px,7vw,104px)}
.page-hero::before{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;opacity:1;animation:none;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.page-hero .lead{color:#D3E2F4;font-size:clamp(17px,1.25vw,21px);line-height:1.65}
.page-hero .btns{margin-top:34px}
.crumbs ol{color:#9FB6CC;letter-spacing:.02em}.crumbs li+li::before{color:var(--cy)}
.crumbs a{transition:color .2s}.crumbs a:hover,.crumbs a:focus-visible{color:var(--yel)}
/* sections and cards */
.mu{color:#B6C8DA}
.h2{font-size:clamp(30px,3.6vw,50px);line-height:1.1}
.cd{background:var(--hxpanel);border:1px solid rgba(32,207,255,.22);border-radius:18px}
.cd:hover{transform:translateY(-8px);border-color:var(--cy);background:#0D2D58;box-shadow:0 20px 44px rgba(32,207,255,.22)}
.more{color:var(--cy);transition:transform .25s,color .25s}.cd-link:hover .more,.cd-link:focus-visible .more{transform:translateX(6px);color:var(--yel)}
.cd-link:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.tag{border-color:var(--cy);color:var(--cy)}
.note{background:var(--hxpanel);border:1px solid rgba(32,207,255,.22);border-left:4px solid var(--yel);border-radius:18px}
.ticks li{border-bottom-color:rgba(255,255,255,.12)}.ticks li::before{border-color:var(--cy)}
.rel a{border-color:rgba(32,207,255,.35);transition:border-color .25s,color .25s,transform .25s,background .25s}
.rel a:hover,.rel a:focus-visible{border-color:var(--yel);color:var(--yel);background:rgba(255,210,31,.08);transform:translateY(-3px)}
details{border-top-color:rgba(255,255,255,.14)}
summary{transition:color .25s,padding-left .25s}
summary:hover,summary:focus-visible{color:var(--yel);padding-left:10px}
.form input,.form select,.form textarea{background:var(--hxpanel);border-color:rgba(32,207,255,.3);border-radius:12px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--yel);border-color:var(--yel)}
.entry a,.prose a,.mu a{color:var(--cy);transition:color .2s}.entry a:hover,.prose a:hover,.mu a:hover{color:var(--yel)}
.msg.ok{border-radius:12px}
/* light sections (.alt) = the homepage "paper" sections */
.alt{background:var(--paper);color:var(--navy)}
.alt .h2,.alt .h3,.alt summary{color:var(--navy)}
.alt .mu{color:#4A6580}
.alt .cd{background:#fff;border-color:#CFDAE5;color:var(--navy)}
.alt .cd:hover{background:#fff;border-color:var(--blue);box-shadow:0 20px 40px rgba(15,51,89,.14)}
.alt details{border-top-color:#CFDAE5}
.alt summary:hover,.alt summary:focus-visible{color:var(--blue)}
.alt :focus-visible{outline-color:var(--blue)}
.alt .more{color:#0A6A8F}.alt .cd-link:hover .more{color:var(--navy)}
/* process steps: dots turn yellow on hover (homepage and inner pages) */
.hp-proc li::before,.steps li::before{transition:background .25s,box-shadow .25s,transform .25s}
.hp-proc li:hover::before,.hp-proc li:focus-within::before,.steps li:hover::before{background:var(--yel);box-shadow:0 0 0 2px var(--navy),0 0 18px rgba(255,210,31,.6);transform:scale(1.18)}
.hp-proc li .k{transition:color .25s}.hp-proc li:hover .k{color:#B8860B}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:52px;position:relative}
.steps::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.28)}
.steps li{position:relative;padding-top:44px;flex:none}
.steps li::before{content:'';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--cy);border:4px solid var(--hxnavy);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.steps li:hover::before{box-shadow:0 0 0 2px var(--yel),0 0 18px rgba(255,210,31,.6)}
.alt .steps li::before{border-color:var(--paper);box-shadow:0 0 0 2px var(--navy)}
.alt .steps::before{background:var(--navy)}
.num{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--cy);font-family:var(--bf)}
.steps .h3{margin-top:6px}
@media (max-width:960px){.steps{grid-template-columns:1fr;gap:0}.steps::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}.steps li{padding:0 0 30px 48px}.steps li:last-child{padding-bottom:0}}
/* closing CTA band: same navy + squares as the homepage CTA */
.cta{position:relative;overflow:hidden;background:var(--navy)}
.cta::before,.cta::after{content:'';position:absolute;background:#123F6C;pointer-events:none}
.cta::before{right:0;top:0;width:150px;height:150px}.cta::after{right:190px;top:0;width:150px;height:150px}
.cta>*{position:relative;z-index:1}
/* footer: clearly visible hover on every link in every column */
.hf-top ul:not(.hf-social) li a{padding:3px 0;background-image:linear-gradient(var(--yel),var(--yel))}
.hf-top ul:not(.hf-social) li a:hover,.hf-top ul:not(.hf-social) li a:focus-visible{color:var(--yel);transform:translateX(6px)}
.hf-bot a{transition:color .25s}.hf-bot a:hover,.hf-bot a:focus-visible{color:var(--yel)}
.hf .hf-social a:hover,.hf .hf-social a:focus-visible{border-color:var(--yel);background-color:rgba(255,210,31,.14);color:var(--yel)}
.hf a:focus-visible{outline-color:var(--yel)}
.hf-bot{padding-bottom:calc(24px + 112px)}
@media (max-width:1180px){.hf-bot{padding-bottom:calc(24px + 92px)}}
/* chatbot: global, fixed bottom-right */
.hx-chat{pointer-events:none}.hx-chat>*{pointer-events:auto}
@media print{.hx-chat,.cur,.cur-dot{display:none!important}}
.alt>.faq{margin-left:max(0px,calc((100% - 1296px)/2))}
.hx-chat .cb{transition:transform .25s,border-color .25s,padding .25s}
.hx-chat.compact .bub,.hx-chat.compact .chev{display:none}
.hx-chat.compact .cb{padding:6px}
@media (max-width:1180px){.site-h .sub{background:none;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}.site-h .sub a{padding:7px 0;border-radius:0}.site-h .sub a:hover,.site-h .sub a:focus-visible{background:none;padding-left:0;color:var(--blue)}}

/* ===== Service page hero visuals (animated, CSS/SVG only) ===== */
.has-sv .hero-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,72px);align-items:center}
.sv-txt,.sv-wrap{min-width:0}
.sv{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:440/330;border-radius:22px;background:linear-gradient(160deg,#0C2B57,#081F40);border:1px solid rgba(32,207,255,.28);box-shadow:0 28px 60px rgba(0,0,0,.35);overflow:hidden}
.sv svg{display:block;width:100%;height:100%}
.sv *{transform-box:fill-box}
@media (max-width:960px){.has-sv .hero-in{grid-template-columns:1fr}.sv{margin:10px auto 0;max-width:460px}}
.sv .gx{transform-origin:0 50%;animation:svgx 1.1s var(--d,0s) cubic-bezier(.2,.7,.2,1) backwards}
@keyframes svgx{from{transform:scaleX(0)}}
.sv .fl{animation:svfl 5s ease-in-out infinite alternate}.sv .fl2{animation:svfl 6s -2s ease-in-out infinite alternate}.sv .fl3{animation:svfl 4.5s -1s ease-in-out infinite alternate}
@keyframes svfl{to{transform:translateY(-7px)}}
.sv .bl{animation:svbl 1s steps(2,start) infinite}@keyframes svbl{to{opacity:0}}
.sv .dash{stroke-dasharray:5 6;animation:svdash 1.2s linear infinite}@keyframes svdash{to{stroke-dashoffset:-22}}
.sv .pop,.sv .hub,.sv .pp,.sv .lk{transform-origin:50% 50%;animation:svpop 3.2s ease-in-out infinite}
@keyframes svpop{50%{transform:scale(1.12)}}
.sv .pb{transform-origin:0 50%}.sv .pbf{animation:svpb 6s ease-in-out infinite}
@keyframes svpb{0%{transform:scaleX(.04)}80%,100%{transform:scaleX(1)}}
.sv .gy{transform-origin:50% 100%;animation:svgy 5s var(--d,0s) ease-out infinite}
@keyframes svgy{0%{transform:scaleY(.05)}25%,100%{transform:scaleY(1)}}
.sv .draw{stroke-dasharray:100;animation:svdraw 6s ease-in-out infinite}
@keyframes svdraw{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
/* UI/UX */
.sv .wf{stroke:#4A78AE;stroke-width:1.2;stroke-dasharray:3 3;fill:#2B8CC4;animation:svwf 9s var(--d,0s) infinite backwards}
.sv .wfy{fill:#FFD21F}.sv .wfc{fill:#20CFFF}
@keyframes svwf{0%,4%{fill-opacity:0}16%,92%{fill-opacity:1}100%{fill-opacity:0}}
.sv .cursor{transform:translate(70px,222px);animation:svcur 9s ease-in-out infinite}
@keyframes svcur{0%,10%{transform:translate(70px,222px)}38%,50%{transform:translate(214px,222px)}78%,92%{transform:translate(358px,222px)}100%{transform:translate(70px,222px)}}
.sv .tabline{animation:svtab 9s steps(1) infinite}
@keyframes svtab{0%{transform:translateX(0)}25%{transform:translateX(80px)}50%{transform:translateX(186px)}75%{transform:translateX(286px)}}
/* graphic design */
.sv .mark{transform-origin:50% 50%;animation:svmark 6s ease-in-out infinite}
@keyframes svmark{50%{transform:rotate(6deg) scale(1.05)}}
.sv .sel rect{animation:svdash 1.6s linear infinite}.sv .hd{animation:svbl 1.4s steps(2,start) infinite}
.sv .sw1,.sv .sw2,.sv .sw3,.sv .sw4{transform-origin:0 50%;animation:svsw 6s infinite}
.sv .sw2{animation-delay:.25s}.sv .sw3{animation-delay:.5s}.sv .sw4{animation-delay:.75s}
@keyframes svsw{0%{transform:scaleX(0)}12%,100%{transform:scaleX(1)}}
/* video */
.sv .ph{transform:translateX(150px);animation:svph 6s linear infinite}
@keyframes svph{from{transform:translateX(44px)}to{transform:translateX(386px)}}
.sv .wave rect{transform-origin:50% 100%;animation:svwv 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.09s)}
@keyframes svwv{from{transform:scaleY(.35)}to{transform:scaleY(1.2)}}
/* SEO */
.sv .type{transform-origin:0 50%;animation:svtype 7s steps(10,end) infinite}
@keyframes svtype{0%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
.sv .r1,.sv .r2{animation:svdn 7s ease-in-out infinite}
.sv .r3{animation:svup 7s ease-in-out infinite}
@keyframes svdn{0%,25%{transform:translateY(0)}50%,90%{transform:translateY(60px)}100%{transform:translateY(0)}}
@keyframes svup{0%,25%{transform:translateY(0)}50%,90%{transform:translateY(-120px)}100%{transform:translateY(0)}}
.sv .rk{transform-origin:50% 50%;animation:svpop 2.4s ease-in-out infinite}
/* marketing */
.sv .hrt{animation:svhrt 3s ease-out infinite}.sv .h2{animation-delay:1.3s}
@keyframes svhrt{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-46px);opacity:0}}
.sv .cal{transform-origin:50% 50%;animation:svcal 8s var(--d,0s) infinite backwards}
@keyframes svcal{0%{opacity:0;transform:scale(.4)}8%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
/* mobile app */
.sv .lst{animation:svlst 4.5s ease-in-out infinite alternate}
@keyframes svlst{to{transform:translateY(-42px)}}
.sv .tap{transform-origin:50% 50%;animation:svtap 2.4s ease-out infinite}
@keyframes svtap{0%{transform:scale(.2);opacity:1}80%,100%{transform:scale(1.7);opacity:0}}
.sv .ring{stroke-dashoffset:18;animation:svring 5s ease-out infinite}
@keyframes svring{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:18}}
/* AI automation */
.sv .pk{offset-rotate:0deg;animation:svpk 2.8s linear infinite}
.sv .pk1{offset-path:path('M96 78L196 150')}.sv .pk2{offset-path:path('M96 252L196 180');animation-delay:-.7s}
.sv .pk3{offset-path:path('M244 150L344 78');animation-delay:-1.4s}.sv .pk4{offset-path:path('M244 180L344 252');animation-delay:-2.1s}
@keyframes svpk{0%{offset-distance:0%;opacity:0}12%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@supports not (offset-path:path('M0 0L1 1')){.sv .pk{display:none}}
.sv .nd{animation:svnd 3.6s var(--d,0s) ease-in-out infinite}
@keyframes svnd{50%{transform:translateY(-4px)}}
/* consulting */
.sv .row{animation:svrow 9s var(--d,0s) infinite backwards}
@keyframes svrow{0%{opacity:0;transform:translateX(-14px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
.sv .scan{animation:svscan 6s ease-in-out infinite alternate}
@keyframes svscan{to{transform:translateY(150px)}}
.sv .grow{animation:svdraw 9s linear infinite}
.sv .ms{transform-origin:50% 50%;animation:svms 9s var(--d,0s) infinite backwards}
@keyframes svms{0%{opacity:0;transform:scale(.3)}6%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* workflow */
.sv .st{animation:svnd 3.6s var(--d,0s) ease-in-out infinite}
.sv .gear{transform-origin:50% 50%;animation:svspin 4s linear infinite}
@keyframes svspin{to{transform:rotate(360deg)}}
.sv .pa{animation:svpa 4s linear infinite}.sv .pa2{animation-delay:-2s}
@keyframes svpa{0%{transform:translateX(0);opacity:0}8%,90%{opacity:1}100%{transform:translateX(280px);opacity:0}}
/* chatbot */
.sv .m{animation:svm 12s ease-out infinite backwards}
.sv .m1{animation-name:svm1}.sv .m2{animation-name:svm2}.sv .m3{animation-name:svm3}.sv .m4{animation-name:svm4}.sv .m5{animation-name:svm5}
@keyframes svm1{0%,3%{opacity:0;transform:translateY(10px)}9%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes svm2{0%,14%{opacity:0}17%,29%{opacity:1}32%,100%{opacity:0}}
@keyframes svm3{0%,30%{opacity:0;transform:translateY(10px)}36%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes svm4{0%,52%{opacity:0;transform:translateY(10px)}58%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes svm5{0%,68%{opacity:0;transform:translateY(10px)}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.sv .td{animation:svtd 1s ease-in-out infinite}.sv .td2{animation-delay:.15s}.sv .td3{animation-delay:.3s}
@keyframes svtd{50%{transform:translateY(-4px)}}
/* content */
.sv .out{animation:svout 8s infinite backwards}.sv .o2{animation-delay:.6s}.sv .o3{animation-delay:1.2s}
@keyframes svout{0%{opacity:0;transform:translateX(18px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
.sv .spk{transform-origin:50% 50%;animation:svspk 3s ease-in-out infinite}
@keyframes svspk{50%{transform:scale(1.3) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.sv .m2{display:none}.sv .wave rect{transform:none}}

/* chat assistant: live answers, quick-reply buttons and call booking form */
.cp-b{max-height:clamp(220px,46vh,380px)}
.cp-q button{font:inherit;font-size:13px;font-weight:600;background:none;cursor:pointer;border:1px solid rgba(32,207,255,.6);border-radius:999px;padding:6px 12px;color:#fff;transition:all .2s}
.cp-q button:hover,.cp-q button:focus-visible{background:#FFD21F;border-color:#FFD21F;color:#0A2447}
.m .ml{display:block;margin-top:6px;font-weight:600}
.m.typing{display:flex;gap:5px;width:fit-content;padding:13px 14px}
.m.typing span{width:7px;height:7px;border-radius:50%;background:#9FC0E6;animation:typ 1s infinite ease-in-out}
.m.typing span:nth-child(2){animation-delay:.15s}.m.typing span:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.m.typing span{animation:none;opacity:.7}}
.m.bk{max-width:100%;width:100%;display:flex;flex-direction:column;gap:9px;box-sizing:border-box}
.bk-l{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#B6C8DA}
.bk input,.bk select{width:100%;box-sizing:border-box;min-width:0;background:#06182F;border:1px solid #2A5584;border-radius:10px;padding:9px 11px;color:#fff;font:inherit;font-size:14px;color-scheme:dark}
.bk input:focus,.bk select:focus{outline:2px solid #20CFFF}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-e{margin:0;color:#FFD21F;font-size:13px}.bk-e:empty{display:none}
.bk-a{display:flex;gap:8px;margin-top:2px}
.bk-s{flex:1;background:#FFD21F;color:#0A2447;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer}.bk-s:disabled{opacity:.6;cursor:wait}
.bk-c{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:10px 14px;font:inherit;cursor:pointer}.bk-c:hover{border-color:#FFD21F;color:#FFD21F}

/* ===== Header v4: clean white sticky header, Book a Call pill (header only; does not touch hero or sections) ===== */
html{scroll-padding-top:96px}
html.nav-lock{overflow:hidden}
.site-h{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid #E3EAF1;transition:box-shadow .25s ease,border-color .25s ease}
.site-h.is-scrolled{box-shadow:0 6px 22px rgba(15,51,89,.10);border-bottom-color:transparent}
.site-h .hbar{min-height:78px;padding-top:0;padding-bottom:0;gap:clamp(20px,2.4vw,40px)}
.site-h .logo{display:flex;align-items:center;flex:none;border-radius:6px}
.site-h .logo img{height:44px;width:auto;transition:none}.site-h .logo:hover img{transform:none}
.site-h .logo:focus-visible,.site-h .nv a:focus-visible,.site-h .burger:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.site-h .nv>ul{gap:clamp(18px,2vw,32px);font-size:15px;font-weight:600;letter-spacing:0}
.site-h .nv>ul>li>a:not(.btn){display:flex;align-items:center;gap:6px;padding:10px 0;color:var(--navy);line-height:1.2}
.site-h .nv>ul>li>a:not(.btn):hover{color:var(--blue)}
.site-h .nv>ul>li>a:not(.btn)::after{bottom:4px;height:2px;background:var(--amber,#F4A10C)}
.site-h .caret{flex:none;opacity:.65;transition:transform .2s ease}
.site-h .has-sub:hover>a .caret,.site-h .has-sub:focus-within>a .caret{transform:rotate(180deg)}
/* dropdown sits flush under the item so the pointer never loses it */
.site-h .sub{top:calc(100% - 2px);padding-top:12px}
.site-h .sub::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
/* CTA pill */
.site-h .nv a.btn{display:inline-flex;align-items:center;gap:8px;background:var(--yel,#FFD21F);color:var(--navy);font-weight:600;font-size:15px;line-height:1;padding:13px 24px;border-radius:999px;box-shadow:none;transform:none;white-space:nowrap;transition:background .2s ease,box-shadow .2s ease}
.site-h .nv a.btn::after{display:none}
.site-h .nv a.btn:hover{background:#F2BE12;box-shadow:0 6px 16px rgba(15,51,89,.16);transform:none}
.site-h .nv a.btn .arr{display:inline-block;font-size:1.05em;transition:transform .2s ease}
.site-h .nv a.btn:hover .arr,.site-h .nv a.btn:focus-visible .arr{transform:translate(2px,-2px)}
.site-h .nv a.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* Tablet + mobile: hamburger and slide-down panel */
@media (max-width:1180px){
.site-h .hbar{min-height:68px}
.site-h .logo img{height:40px}
.site-h .burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:46px;height:46px;padding:0;border:1px solid #D3DEE9;border-radius:10px;background:#fff;transition:background .2s}
.site-h .burger:hover{background:#F2F6FA}
.site-h .burger span{width:20px;height:2px;margin:3px 0;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.site-h .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.site-h .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-h .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.site-h .nv{display:none;position:fixed;left:0;right:0;top:68px;bottom:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid #E3EAF1;padding:8px clamp(20px,5vw,40px) 32px}
.site-h .nv.open{display:block}
.site-h .nv>ul{flex-direction:column;align-items:stretch;gap:0;font-size:17px}
.site-h .nv>ul>li{border-bottom:1px solid #EDF2F7}
.site-h .nv>ul>li>a:not(.btn){padding:16px 4px}
.site-h .nv>ul>li>a:not(.btn)::after{display:none}
.site-h .caret{display:none}
.site-h .sub{display:flex!important;position:static;flex-direction:column;border:0;box-shadow:none;background:none;min-width:0;padding:0 0 12px 14px;gap:0!important}
.site-h .sub::before{display:none}
.site-h .sub a{padding:8px 4px;font-weight:500;font-size:15.5px;color:#3E5873}
.site-h .sub a:hover,.site-h .sub a:focus-visible{background:none;color:var(--blue);padding-left:4px}
.site-h .nv>ul>li.nv-cta{border-bottom:0;position:sticky;bottom:-32px;margin:0 calc(-1*clamp(20px,5vw,40px));padding:16px clamp(20px,5vw,40px) calc(16px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #E3EAF1;box-shadow:0 -10px 20px rgba(15,51,89,.06)}
.site-h .nv a.btn{display:flex;justify-content:center;width:100%;padding:17px 24px;font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.site-h,.site-h .caret,.site-h .burger span,.site-h .nv a.btn,.site-h .nv a.btn .arr{transition:none!important}}
@media (min-width:1181px) and (max-width:1320px){.site-h .hbar{padding-left:clamp(20px,4vw,52px);padding-right:clamp(20px,4vw,52px)}.site-h .nv>ul{gap:20px;font-size:14.5px}}

/* ===== Page-specific hero visuals: Services, Contact us, Insights (scoped to .sv-hub / .sv-talk / .sv-ed; reuses the .sv frame above) ===== */
.sv-hub .hub-glow{animation:svpop 6s ease-in-out infinite}
.sv-hub .hub-bar{transform-origin:50% 100%;animation:svgy 5s var(--d,0s) ease-out infinite}
.sv-hub .hub-sig{animation:hubsig 3.4s var(--d,0s) ease-in-out infinite}
@keyframes hubsig{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(var(--x),var(--y));opacity:0}}
.sv-hub .hub-card{transition:none}
.sv-talk .talk-ring{transform-origin:50% 50%;animation:talkring 3.2s var(--d,0s) ease-out infinite}
@keyframes talkring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.sv-talk .talk-sig{animation:talksig 3.4s var(--d,0s) ease-in-out infinite}
@keyframes talksig{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(36px,var(--dy));opacity:0}}
.sv-talk .tk-m{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:tkin 9s ease-out infinite}
.sv-talk .tk-1{animation-name:tk1}.sv-talk .tk-2{animation-name:tk2}.sv-talk .tk-3{animation-name:tk3}.sv-talk .tk-4{animation-name:tk4}
@keyframes tk1{0%,2%{opacity:0;transform:translateY(8px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tk2{0%,16%{opacity:0}20%,32%{opacity:1}36%,100%{opacity:0}}
@keyframes tk3{0%,34%{opacity:0;transform:translateY(8px)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tk4{0%,58%{opacity:0;transform:translateY(8px)}64%,92%{opacity:1;transform:none}100%{opacity:0}}
.sv-talk .tk-dot{animation:tkdot 1s ease-in-out infinite}.sv-talk .tk-d2{animation-delay:.15s}.sv-talk .tk-d3{animation-delay:.3s}
@keyframes tkdot{50%{transform:translateY(-3px);opacity:.5}}
.sv-talk .tk-w{transform-origin:50% 50%;animation:tkwave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.11s)}
@keyframes tkwave{from{transform:scaleY(.35)}to{transform:scaleY(1.25)}}
.sv-ed .ed-scroll{animation:edscroll 14s ease-in-out infinite}
@keyframes edscroll{0%,12%{transform:translateY(0)}48%,62%{transform:translateY(-92px)}96%,100%{transform:translateY(0)}}
.sv-ed .ed-thumb{animation:edthumb 14s ease-in-out infinite}
@keyframes edthumb{0%,12%{transform:translateY(0)}48%,62%{transform:translateY(160px)}96%,100%{transform:translateY(0)}}
.sv-ed .ed-line{stroke-dasharray:100;animation:svdraw 6s ease-in-out infinite}
.sv-ed .ed-bar{transform-origin:50% 100%;animation:svgy 5s var(--d,0s) ease-out infinite}
.sv-ed .ed-caret{animation:svbl 1s steps(2,start) infinite}
.sv-ed .ed-clock{transform-origin:50% 100%;animation:edclock 6s linear infinite}
@keyframes edclock{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sv-talk .tk-m{opacity:1;animation:none}.sv-talk .tk-2{opacity:0}.sv-hub .hub-sig,.sv-talk .talk-sig{display:none}.sv-ed .ed-line{stroke-dasharray:none}}

/* ===== About Us page only: animated INNOTECHZ building (.sv-bld) + closing tagline ===== */
.about-tag{margin:28px 0 0;padding-left:18px;border-left:4px solid var(--yel,#FFD21F);font-family:var(--hf);font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.25;letter-spacing:-.01em;color:#fff}
.sv-bld .bld-win{animation:bldwin 9s ease-in-out infinite}
@keyframes bldwin{0%,100%{fill:#123A6B}35%,65%{fill:var(--c,#20CFFF)}}
.sv-bld .bld-door{animation:bldwin2 4s ease-in-out infinite alternate}
@keyframes bldwin2{from{opacity:.75}to{opacity:1}}
.sv-bld .bld-glow{animation:svpop 4s ease-in-out infinite}
.sv-bld .bld-ring{transform-origin:50% 50%;animation:bldring 3.6s var(--d,0s) ease-out infinite}
@keyframes bldring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(3);opacity:0}}
.sv-bld .bld-star{animation:bldtw 3.2s var(--d,0s) ease-in-out infinite}
@keyframes bldtw{50%{opacity:.25}}
.sv-bld .bld-cloud{animation:bldcl 26s ease-in-out infinite alternate}.sv-bld .bld-c2{animation-duration:32s;animation-direction:alternate-reverse}
@keyframes bldcl{to{transform:translateX(34px)}}
.sv-bld .bld-ic{opacity:0;animation:bldic 9.6s var(--d,0s) ease-in-out infinite}
@keyframes bldic{0%{opacity:0;transform:translateY(40px)}15%{opacity:1}60%{opacity:1}85%,100%{opacity:0;transform:translateY(-62px)}}
.sv-bld .bld-bar{transform-origin:50% 100%;animation:svgy 5s var(--d,0s) ease-out infinite}
.sv-bld .bld-up{stroke-dasharray:100;animation:svdraw 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sv-bld .bld-ic{opacity:0}.sv-bld .bld-up{stroke-dasharray:none}}

/* Plus Jakarta Sans (body text), self-hosted from assets/fonts (SIL Open Font License). Replaces the Google Fonts request. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Keep button text readable when a page builder plugin (e.g. Elementor global link colours) restyles links. */
body a.hx-btn,body a.hx-btn:hover,body a.hx-btn:focus,body a.hx-btn:visited{color:#0A2447}
body a.btn,body a.btn:hover,body a.btn:focus,body a.btn:visited{color:#0A2447}