:root{--n:#09178c;--nd:#0b136f;--nk:#000970;--o:#f37219;--t:#5b5f6b;--h:#0a0a0a}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.8 'Hind',Arial,sans-serif;color:var(--t);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
.sec{padding:80px 0}
h1,h2,h3,h4,.btn,.nav a,.eyebrow{font-family:'Roboto',Arial,sans-serif}
/* top bar */
.topbar{background:var(--n);color:#fff;font:500 15px/1 'Roboto',sans-serif}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;gap:14px}
.topbar a{display:inline-flex;align-items:center;gap:12px}
.topbar i{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.topbar svg{width:16px;height:16px;fill:var(--n)}
/* header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px}
.logo img{height:82px;width:auto}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-weight:500;font-size:16px;text-transform:uppercase;color:#4a4a4a;transition:color .3s}
.nav a:hover,.nav a.on{color:var(--o)}
.loc{display:inline-block;border:2px solid #000;padding:11px 26px;transform:skewX(-10deg);font:italic 700 14px/1 'Roboto',sans-serif;text-transform:uppercase;letter-spacing:1px;color:#000;transition:.3s}
.loc span{display:inline-block;transform:skewX(10deg)}
.loc:hover{background:var(--n);border-color:var(--n);color:#fff}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:var(--n);margin:5px 0;transition:.3s}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--nd);color:#fff;border:0;cursor:pointer;font:italic 700 14px/1 'Roboto',sans-serif;text-transform:uppercase;letter-spacing:1px;padding:18px 40px;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,6% 50%);transition:background .3s,transform .3s}
.btn:hover{background:#2a38c9}
.btn.or{background:var(--o)}.btn.or:hover{background:#d85d0a}
/* eyebrow / headings */
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--n);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px}
.eyebrow img{width:22px;height:22px}
.eyebrow.c{justify-content:center}
.h2{font:700 44px/1.2 'Roboto',sans-serif;color:var(--h);margin-top:10px}
.h2 em{display:block;font:300 40px/1.25 'Hind',sans-serif;font-style:normal;color:#444}
.h2.c{text-align:center}
.dk .h2,.dk .eyebrow,.fs .h2{color:#fff}.dk .h2 em,.fs .h2 em{color:#e8e8e8}
.dk .eyebrow img,.fs .eyebrow img{filter:brightness(0) invert(1)}
/* hero */
.hero{position:relative;background:#06104f;color:#fff;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,28,140,.62),rgba(14,28,140,.3) 60%,rgba(14,28,140,.15));z-index:1}
.hero .wrap{position:static;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:70px;padding-bottom:70px;min-height:640px}
.hero h1{font:600 74px/1.15 'Roboto',sans-serif;margin:18px 0 26px}
.hero .eyebrow{color:#fff;font-size:16px}
.hero .eyebrow img{filter:brightness(0) invert(1);width:28px;height:28px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font:500 18px/1.5 'Hind',sans-serif;margin-bottom:10px}
.ticks svg{width:18px;height:18px;fill:#fff;flex:none;margin-top:5px}
.hero .btn{margin:0 0 26px}
.hero .wrap>div:first-child{position:relative;z-index:2}
.hc{position:absolute;z-index:2;right:0;top:30px;bottom:48px;width:38%;overflow:hidden}
.hc .s::before{content:'';position:absolute;left:0;top:14px;bottom:0;width:16px;background:#fff}
.hc .s{position:absolute;inset:0;opacity:0;transform:translateX(100%);transition:transform .45s ease-in,opacity .45s;overflow:hidden}
.hc .s.on{transition:transform .6s cubic-bezier(.2,.7,.2,1) .45s,opacity .1s .45s}
.hc .s:not(.on):not(.out){transition:none}
.hc .s.out{opacity:1;transform:translateX(-100%)}
.hc .s.on{opacity:1;transform:none}
.hc img{position:absolute;left:18px;top:0;width:calc(100% - 18px);height:100%;object-fit:cover}
/* services */
.svc{background:#f4f6fb;position:relative;overflow:hidden}
.svc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cards4{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:20px 20px 60px}
.cards4>div:nth-child(2n){transform:translateY(50px)}
.sk{background:#fff;transform:skewX(-6deg);box-shadow:0 10px 30px rgba(9,23,140,.1);text-align:center;padding:40px 26px;transition:background .4s,color .4s,box-shadow .4s}
.sk h3,.sk .ic{transform:none}
.sk .ic{width:70px;height:70px;margin:0 auto 14px;object-fit:contain;transition:filter .4s}
.sk h3{font:italic 500 21px/1.4 'Roboto',sans-serif;color:#222;transition:color .4s}
.sk:hover{background:var(--nd);box-shadow:0 14px 34px rgba(9,23,140,.35)}
.sk:hover h3,.sk:hover p{color:#fff}
.sk:hover .ic{filter:brightness(0) invert(1)}
.sk .stars{color:var(--o);letter-spacing:3px;font-size:13px;margin-bottom:8px}
.sk p{font-size:15px;line-height:1.7;margin-top:8px;color:#666;transition:color .4s}
.svc .txt p{margin:20px 0 28px;font-size:17px}
.svc .txt .li{display:flex;gap:14px}
.svc .txt .li img{width:32px;height:32px;flex:none;margin-top:8px}
.mq{background:var(--n);overflow:hidden;color:#fff}
.mq .tr{display:flex;width:max-content;animation:mq 55s linear infinite}
.mq .it{display:flex;align-items:center;font:400 35px/1 'Hind',sans-serif;padding:14px 40px;white-space:nowrap}
.mq .it b{font-weight:400;font-size:35px;margin-right:12px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* about home */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ab .pic img{width:100%;max-width:560px}
.ab p{margin-top:16px;font-size:16.5px}
.ab .ex{display:flex;align-items:center;gap:14px;margin-top:22px;font:600 19px 'Roboto',sans-serif;color:#222}
.ab .ex img{width:36px}
.ab .btn{margin-top:26px}
.ab.al .txt p{text-align:justify;margin-top:14px;font-size:15.5px}
/* photo strip */
.zz{overflow:hidden;padding:30px 0}
.zz .tr{display:flex;width:max-content;animation:zz 80s linear infinite}
.zz img{width:20vw;max-width:360px;min-width:230px;border-radius:20px;margin:0 1vw;height:auto}
.zz img:nth-child(odd){margin-top:40px}.zz img:nth-child(even){margin-bottom:40px}
@keyframes zz{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* products home */
.pr4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
.pc{position:relative;padding-bottom:0}
.pc .im{width:100%;aspect-ratio:1/1.05;object-fit:cover}
.pc .cd{background:#fff;margin:-90px 14px 0;position:relative;transform:skewX(-4deg);box-shadow:0 10px 28px rgba(0,0,0,.14);padding:26px 22px 30px;text-align:center;transition:background .4s}
.pc .cd img{width:44px;margin:0 auto 10px;transition:filter .4s}
.pc h3{font:700 18px/1.35 'Roboto',sans-serif;color:var(--nd);transition:color .4s}
.pc p{font-size:14.5px;line-height:1.65;margin-top:8px;transition:color .4s}
.pc:hover .cd{background:var(--nd)}.pc:hover h3,.pc:hover p{color:#fff}.pc:hover .cd img{filter:brightness(0) invert(1)}
/* form section */
.fs{position:relative;background:#0b1a1f url(../img/bg-form.webp) center/cover;color:#fff}
.fs::before{content:"";position:absolute;inset:0;background:rgba(2,16,22,.88)}
.fs .wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.fs .eyebrow{color:#fff}
.fs img.cp{width:100%;max-width:480px}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.f .full{grid-column:1/-1}
.f input,.f textarea{width:100%;background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;padding:20px 22px;font:400 16px 'Hind',sans-serif;outline:0;border-radius:0;transition:border .3s}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.75)}
.f input:focus,.f textarea:focus{border-color:var(--o)}
.f textarea{min-height:130px;resize:vertical}
.f .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.msg{grid-column:1/-1;font-weight:500;font-size:15px}
.msg.ok{color:#7ee08a}.msg.err{color:#ffb1a6}
.lt .f input,.lt .f textarea{background:#fff;color:#222;border:1px solid #dfe3ee;box-shadow:0 2px 10px rgba(9,23,140,.05)}
.lt .f input::placeholder,.lt .f textarea::placeholder{color:#8a8f9c}
.lt .msg.ok{color:#1a7f37}.lt .msg.err{color:#c62828}
.lt .f input:focus,.lt .f textarea:focus{border-color:var(--n)}
/* talk banner */
.tk{background:var(--n);color:#fff;position:relative;overflow:hidden}
.tk::after{content:"";position:absolute;inset:0;background:url(../img/shape1.webp) right center/contain no-repeat;opacity:.18}
.tk .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:60px;padding-bottom:60px}
.tk .eyebrow{color:#fff}.tk .eyebrow img{filter:brightness(0) invert(1)}
.tk .h2{color:#fff}
/* why */
.wy{background:#000514 url(../img/shape2.webp) right top/50% no-repeat;color:#fff}
.wy .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:46px}
.wc{background:#fff;color:#444;padding:28px 24px 30px;text-align:center;border:1px solid #fff;display:flex;flex-direction:column;transition:transform .4s}
.wc:hover{transform:translateY(-8px)}
.wc h3{font:700 21px/1.3 'Roboto',sans-serif;color:#0a0a0a;min-height:56px}
.wc img{width:84px;height:84px;object-fit:contain;margin:16px auto}
.wc p{font-size:15px;line-height:1.65}
.wc strong{color:#111}
/* clients */
.cl .box{overflow:hidden;margin-top:40px}
.cl .tr{display:flex;width:max-content;animation:cl 60s linear infinite}
.cl .tr:hover{animation-play-state:paused}
.cl .lg{width:230px;height:130px;margin:0 14px;border:1px solid #ececf3;background:#fff;display:grid;place-items:center;padding:20px;box-shadow:0 4px 14px rgba(9,23,140,.05)}
.cl .lg img{max-height:80px;width:auto;object-fit:contain}
@keyframes cl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* footer */
.ft{background:#0a1485;color:#fff;font-size:15px}
.ft .g{display:grid;grid-template-columns:1.2fr .8fr 1.1fr 1fr;gap:40px;padding:80px 0 50px}
.ft h4{font:700 24px 'Roboto',sans-serif;margin:0 0 24px}
.ft .row{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;line-height:1.7;font-weight:500}
.ft .row i{width:44px;height:44px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;flex:none}
.ft .row svg{width:18px;height:18px;fill:#fff}
.ft li{margin-bottom:16px;font-weight:500}
.ft a:hover{color:var(--o)}
.ft iframe{width:100%;height:190px;border:0;display:block}
.ft .cp{border-top:1px solid rgba(255,255,255,.25);padding:22px 0;text-align:left;font-weight:500}
/* page banner */
.pb{position:relative;background:#06104f center/cover;color:#fff;text-align:center;padding:130px 20px}
.pb::before{content:"";position:absolute;inset:0;background:rgba(0,10,60,.45)}
.pb h1{position:relative;font:500 54px/1.2 'Roboto',sans-serif}
/* about page */
.vm{background:#f4f6fb url(../img/shape3.webp) center/cover}
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:40px;max-width:1000px;margin-left:auto;margin-right:auto}
.vc{background:#fff;transform:skewX(-4deg);padding:40px 38px;box-shadow:0 10px 30px rgba(9,23,140,.1)}
.vc h3{font:700 26px 'Roboto',sans-serif;color:var(--nd);margin-bottom:10px}
.bn{background:#eef2fb}
.bn .pic{position:relative;max-width:460px}.bn .pic::before{content:"";position:absolute;right:-24px;bottom:-24px;width:78%;height:78%;background:var(--nd);z-index:0}.bn .pic img{position:relative;z-index:1}
.bn .ab{grid-template-columns:1.1fr .9fr}
.ck{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:22px}
.ck li{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:#333;line-height:1.5}
.ck svg{width:18px;height:18px;fill:var(--n);flex:none;margin-top:3px}
.ppl{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.ppl.rv2{grid-template-columns:1.2fr .8fr}
.ppl img{width:100%;max-width:480px}
.ppl h2{font:700 36px 'Roboto',sans-serif;color:var(--h)}
.ppl h3{font:500 20px 'Roboto',sans-serif;color:var(--n);margin:4px 0 16px}
.ppl p{text-align:justify;margin-top:12px;font-size:15.5px}
.cv{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.cv .sk{padding:36px 24px;text-align:center;transform:skewX(-5deg)}
.cv .sk h3{font-style:italic;font-size:20px;font-weight:700;color:var(--nd)}
.cv .sk:hover h3{color:#fff}
/* products page */
.pp{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pp.r .pic{order:2}
.pp img{width:100%}
.pp h2{font:700 38px/1.25 'Roboto',sans-serif;color:var(--h);margin-bottom:14px}
.pp p{margin-top:12px;text-align:justify}
.hr{border:0;border-top:4px solid #eef0f8;margin:0}
/* services page */
.sv4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:50px}
.sv4 .sk{padding:36px 22px 30px}
/* contact */
.ct{display:grid;grid-template-columns:1.2fr .8fr;gap:60px}
.ct form.f{grid-template-columns:1fr 1fr}
.git h3{font:700 32px 'Roboto',sans-serif;color:var(--h);margin-bottom:26px}
.gi{display:flex;gap:18px;margin-bottom:26px}
.gi i{width:50px;height:50px;border-radius:50%;background:var(--n);display:grid;place-items:center;flex:none}
.gi svg{width:20px;height:20px;fill:#fff}
.gi h4{font:700 20px 'Roboto',sans-serif;color:var(--h);line-height:1.3}
.gi a:hover{color:var(--o)}
.gi p{line-height:1.6}
/* floats */
.wa{position:fixed;left:16px;bottom:16px;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:90;box-shadow:2px 2px 6px rgba(0,0,0,.35);animation:beat .5s infinite alternate}
.wa svg{width:32px;height:32px;fill:#fff}
@keyframes beat{to{transform:scale(1.07)}}
.gq{position:fixed;top:50%;right:0;transform:translateY(-50%);background:var(--n);color:#fff;padding:20px 11px;border-radius:8px 0 0 8px;font:700 16px 'Roboto',sans-serif;writing-mode:vertical-lr;z-index:90;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.gq:hover{background:var(--o)}
/* reveal */
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-50px)}.rv.r{transform:translateX(50px)}
.rv.l.in,.rv.r.in{transform:none}
.sk.rv{transform:translateY(36px) skewX(-6deg)}.sk.rv.in{transform:skewX(-6deg)}
.cards4>div:nth-child(2n).rv{transform:translateY(86px)}.cards4>div:nth-child(2n).rv.in{transform:translateY(50px)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}.mq .tr,.zz .tr,.cl .tr,.wa{animation:none}html{scroll-behavior:auto}}
/* tablet */
@media (max-width:1100px){
.nav{gap:22px}.nav a{font-size:14px}
.h2{font-size:38px}.hero h1{font-size:60px}
.pr4,.sv4,.cv{grid-template-columns:1fr 1fr}
.wy .grid{grid-template-columns:1fr 1fr}
.ft .g{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
.topbar .wrap{justify-content:center;flex-wrap:wrap}
.hdr .wrap{min-height:84px}
.logo img{height:66px}
.burger{display:block}
.nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 14px 22px rgba(0,0,0,.12);max-height:0;overflow:hidden;transition:max-height .4s}
.nav.open{max-height:520px}
.nav a{padding:15px 24px;border-top:1px solid #eee;font-size:16px}
.nav .loc{margin:16px 24px;text-align:center;transform:none;display:block}.nav .loc span{transform:none}
.hdr .loc.hd{display:none}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.sec{padding:60px 0}
.hero .wrap,.svc .wrap,.ab,.fs .wrap,.pp,.ppl,.ppl.rv2,.ct{grid-template-columns:1fr;gap:36px}
.hero .wrap{min-height:0;padding-top:50px;padding-bottom:50px}
.hc{position:relative;top:auto;right:auto;bottom:auto;width:100%;margin:0;aspect-ratio:4/3;justify-self:auto}
.pp.r .pic{order:0}
.ppl.rv2 .pic{order:-1}
.bn .ab{grid-template-columns:1fr}
.tk .wrap{flex-direction:column;align-items:flex-start}
.pb{padding:90px 20px}.pb h1{font-size:42px}
}
/* phone */
@media (max-width:640px){
.topbar{display:none}
.cards4>div:nth-child(2n),.cards4>div:nth-child(2n).rv,.cards4>div:nth-child(2n).rv.in{transform:none}
.cards4{align-items:stretch;grid-auto-rows:1fr}.cards4>div{height:auto;align-self:stretch}
.cards4 .sk{height:100%;display:flex;flex-direction:column;justify-content:center}
body{font-size:15.5px;line-height:1.7}
.wrap{padding:0 18px}
.topbar{font-size:13px}.topbar .wrap{gap:8px 16px;padding-top:8px;padding-bottom:8px}.topbar i{width:28px;height:28px}.topbar svg{width:13px;height:13px}
.sec{padding:46px 0}
.h2{font-size:30px}.h2 em{font-size:28px}
.hero h1{font-size:40px;margin:12px 0 18px}
.hero .eyebrow{font-size:13px}
.ticks li{font-size:16px}
.cards4{grid-template-columns:1fr 1fr;gap:14px;padding:10px 8px 50px}
.sk{padding:24px 12px}.sk h3{font-size:15px}.sk .ic{width:52px;height:52px}
.mq .it{font-size:24px;padding:10px 26px}.mq .it b{font-size:24px}
.zz img{width:80vw;max-width:none;min-width:0;margin:0 2vw}.zz img:nth-child(odd),.zz img:nth-child(even){margin-top:0;margin-bottom:0}
.pr4,.sv4,.cv,.wy .grid,.two{grid-template-columns:1fr}
.pc .cd{margin:-70px 12px 0}.pc .im{aspect-ratio:4/3}
form.f,.ct form.f{grid-template-columns:1fr;gap:14px}
.f input,.f textarea{padding:16px 16px}
.ft .g{grid-template-columns:1fr;padding:54px 0 30px;gap:30px}
.ft h4{margin-bottom:16px}
.pb{padding:70px 16px}.pb h1{font-size:34px}
.ck{grid-template-columns:1fr}
.ppl h2,.pp h2{font-size:30px}
.vc{padding:28px 22px}
.cl .lg{width:170px;height:100px;margin:0 8px}
.wa{width:52px;height:52px}.wa svg{width:27px;height:27px}
.gq{font-size:14px;padding:14px 8px}
.btn{padding:16px 32px}
.tk .wrap{padding-top:44px;padding-bottom:44px}
}

html,body{overflow-x:clip}