/* =========================================================
   Studio — original site, palette sampled from the logo
   ========================================================= */

:root{
  /* logo gradient stops */
  --navy:#031738; --royal:#02388C; --blue:#0151CE; --electric:#1361E0; --glow:#3E81F6;
  /* surfaces */
  --bg:#020A1C; --bg-2:#041230; --surface:#06163A; --surface-2:#0A1F4A;
  --line:rgba(150,180,255,.12); --line-2:rgba(150,180,255,.2);
  /* text */
  --white:#FFFFFF; --ice:#EAF1FF; --muted:#8E9BB8; --muted-2:#5C6A88;
  --grad:linear-gradient(135deg,#031738 0%,#02388C 45%,#0151CE 85%,#1361E0 100%);
  --grad-bright:linear-gradient(135deg,#0151CE 0%,#1361E0 55%,#3E81F6 100%);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --r:20px; --r-lg:28px;
  --pad:clamp(20px,4vw,56px);
  --display:"Stack Sans Notch","Inter",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ice);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{width:1em;height:1em;flex:none}
::selection{background:var(--electric);color:#fff}
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.accent{color:var(--glow)}
.grad-text{background:linear-gradient(90deg,#fff 0%,#9CC0FF 40%,#3E81F6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;margin:0;color:var(--white);line-height:1}
.h2{font-size:clamp(32px,4.5vw,64px);font-weight:600}
.split-lines .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;padding-right:.08em;margin-right:-.08em}
.split-lines .line>.li{display:inline-block;will-change:transform}

/* grain */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(3%,-6%)}60%{transform:translate(-2%,5%)}80%{transform:translate(6%,-2%)}100%{transform:translate(0,0)}}

/* tag / chip */
.tag{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);padding:9px 14px;border:1px solid var(--line-2);border-radius:99px;background:rgba(19,97,224,.08);margin-bottom:22px}
.tag i{width:8px;height:8px;border-radius:2px;background:var(--grad-bright);box-shadow:0 0 12px var(--glow);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.6);opacity:.6}}
.chip{display:inline-block;font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.chip--light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff}
.card{background:linear-gradient(180deg,rgba(14,36,84,.55),rgba(6,22,58,.55));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(8px)}
.glass{background:rgba(6,22,58,.55);border:1px solid var(--line-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* roll text hover */
.roll{display:inline-flex;overflow:hidden;vertical-align:top;line-height:1.25}
.roll>span{display:block;position:relative;transition:transform .55s var(--ease)}
.roll>span::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
a:hover .roll>span,a.roll:hover>span,button:hover .roll>span{transform:translateY(-100%)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border-radius:99px;font:600 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:box-shadow .4s var(--ease),background .4s}
.btn__icon{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;font-size:18px;transition:transform .5s var(--ease)}
.btn__icon svg{transition:transform .5s var(--ease)}
.btn:hover .btn__icon svg{animation:chev .6s var(--ease)}
@keyframes chev{0%{transform:translateX(0)}45%{transform:translateX(140%)}46%{transform:translateX(-140%)}100%{transform:translateX(0)}}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--primary{background:var(--grad-bright);color:#fff;box-shadow:0 10px 30px -10px rgba(19,97,224,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--primary::before{background:linear-gradient(135deg,#1361E0,#3E81F6 60%,#7AA8FF)}
.btn--primary .btn__icon{background:#fff;color:var(--electric)}
.btn--primary:hover{box-shadow:0 16px 40px -10px rgba(62,129,246,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--light{background:#fff;color:var(--navy)}
.btn--light::before{background:var(--ice)}
.btn--light .btn__icon{background:var(--navy);color:#fff}
.btn--ghost{padding:7px 22px 7px 7px;color:var(--ice);border:1px solid var(--line-2)}
.btn--ghost::before{background:rgba(255,255,255,.06)}
.btn__play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);font-size:14px;transition:background .4s,transform .5s var(--ease)}
.btn--ghost:hover .btn__play{background:var(--electric);transform:scale(1.08)}

.ulink{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.ulink:hover{background-position:0 100%;background-size:100% 1px}

/* =========== LOADER =========== */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg)}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:22px;position:relative;z-index:2}
.loader__mark{width:84px;height:auto;overflow:visible}
.loader__stroke{stroke-dasharray:4200;stroke-dashoffset:4200}
.loader__count{font:600 13px/1 var(--display);letter-spacing:.3em;color:var(--muted)}
.loader__panel{position:absolute;inset:0;background:var(--grad);transform:translateY(100%)}
html:not(.js) .loader,.reduce .loader{display:none}

/* progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;background:var(--grad-bright);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--glow)}

/* =========== CURSOR =========== */

/* =========== NAV =========== */
.nav{position:fixed;top:14px;left:50%;z-index:100;width:calc(100% - 2*var(--pad));max-width:1320px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 12px 10px 12px;border-radius:99px;border:1px solid transparent;transition:background .5s,border-color .5s,transform .6s var(--ease),backdrop-filter .5s}
.nav.is-scrolled{background:rgba(2,10,28,.6);border-color:var(--line);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.nav.is-hidden{transform:translate(-50%,-140%)}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 6px 20px -6px rgba(19,97,224,.7);transition:transform .6s var(--ease)}
.nav__logo img{width:22px;height:auto}
.nav__brand:hover .nav__logo{transform:rotate(-8deg) scale(1.06)}
.nav__name{font:600 20px/1 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.02em}
.nav__links{display:flex;gap:2px;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.nav__links a{position:relative;margin:10px 12px;font:600 13px/1.25 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.nav__links a:hover,.nav__links a.is-active{color:#fff}
.nav__menu{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;border:1px solid var(--line-2);font:600 13px/1.25 var(--body);letter-spacing:.08em;text-transform:uppercase;transition:background .3s}
.nav__menu:hover{background:rgba(255,255,255,.06)}
.nav__burger{position:relative;width:16px;height:10px}
.nav__burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav__burger i:first-child{top:0}.nav__burger i:last-child{top:8px}
.menu-open .nav__burger i:first-child{top:4px;transform:rotate(45deg)}
.menu-open .nav__burger i:last-child{top:4px;transform:rotate(-45deg)}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none}
.menu__bg{position:absolute;inset:0;background:var(--grad);clip-path:circle(0% at calc(100% - 70px) 40px)}
.menu__inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:120px var(--pad) 40px;max-width:1320px;margin:0 auto}
.menu__links{display:flex;flex-direction:column}
.menu__links a{display:flex;align-items:baseline;gap:18px;overflow:hidden;font:600 clamp(40px,8vw,96px)/1.02 var(--display);text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding:6px 0}
.menu__links a span{display:inline-block;transition:margin .6s var(--ease),color .3s}
.menu__links a em{font:500 14px/1 var(--body);font-style:normal;color:rgba(255,255,255,.55)}
.menu__links a:hover span{margin-left:20px;color:#BFD5FF}
.menu__foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:rgba(255,255,255,.8)}
.menu__socials{display:flex;gap:22px}
.menu-open .menu{visibility:visible;pointer-events:auto}

/* floating tiles (glossy 3D) */
.tile{position:absolute;z-index:3;display:grid;place-items:center;width:var(--s,70px);height:var(--s,70px);border-radius:24%;color:#fff;font-size:calc(var(--s,70px)*.42);background:linear-gradient(145deg,#5C97FF 0%,#1361E0 40%,#02388C 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -6px 14px rgba(3,23,56,.6),0 24px 40px -12px rgba(1,81,206,.65),0 0 0 1px rgba(255,255,255,.08);rotate:var(--rot,0deg);pointer-events:none}
.tile::after{content:"";position:absolute;inset:6% 10% 55% 10%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);filter:blur(2px)}
.tile svg{position:relative;z-index:1;filter:drop-shadow(0 3px 4px rgba(3,23,56,.5))}
.tile--dark{background:linear-gradient(145deg,#1A2C55,#06163A 60%,#020A1C)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -14px}}

/* =========== HERO =========== */
.hero{position:relative;padding-top:clamp(130px,18vh,190px);overflow:clip}
.hero__glow{position:absolute;inset:-20% -10% auto;height:120vh;background:radial-gradient(50% 45% at 30% 30%,rgba(19,97,224,.35),transparent 70%),radial-gradient(40% 40% at 85% 20%,rgba(2,56,140,.5),transparent 70%);pointer-events:none}
.hero__lines{position:absolute;left:0;right:0;top:12vh;height:70vh;opacity:.35;pointer-events:none}
.hero__lines svg{width:100%;height:100%}
.hero__lines path{fill:none;stroke:url(#none);stroke:rgba(110,160,255,.5);stroke-width:1.2;stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 3.5s var(--ease) .9s forwards}
.hero__lines path:nth-child(2){animation-delay:1.1s;opacity:.6}.hero__lines path:nth-child(3){animation-delay:1.3s;opacity:.35}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:40px;align-items:end}
.hero__title{font-size:clamp(38px,4.9vw,86px);font-weight:600;line-height:.95}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero__right{display:flex;flex-direction:column;gap:22px;padding-bottom:8px;max-width:400px;justify-self:end}
.trust{display:flex;align-items:center;gap:14px}
.trust p{margin:0;font-size:14px;line-height:1.35;color:var(--muted)}
.trust strong{font:600 15px var(--display)}
.trust__chips{display:flex}
.trust__chips span{display:grid;place-items:center;width:40px;height:40px;margin-left:-10px;border-radius:50%;border:2px solid var(--bg);background:var(--grad-bright);font:600 11px var(--display);color:#fff;letter-spacing:.04em}
.trust__chips span:first-child{margin-left:0}
.trust__chips span:nth-child(2){background:linear-gradient(135deg,#02388C,#0151CE)}
.trust__chips span:nth-child(3){background:linear-gradient(135deg,#031738,#02388C)}
.trust__chips span:last-child{background:#fff;color:var(--navy);font-size:16px}
.hero__lede{margin:0;color:var(--muted);font-size:15.5px}
.awards{display:flex;gap:22px}
.award{display:flex;align-items:center;gap:8px;font:600 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.award b{color:#fff;font-family:var(--display);font-size:13px}
.award__laurel{width:46px;height:30px;color:#9CC0FF}
.award__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);color:#9CC0FF}
.tile--a{--s:74px;--rot:-12deg;left:57%;top:11vh}
.tile--b{--s:58px;--rot:14deg;left:49%;top:calc(clamp(130px,18vh,190px) + 15.5vw)}
.tile--c{--s:48px;--rot:8deg;left:6%;top:14vh;opacity:.9}

/* stage */
.stage{position:relative;height:100vh;margin-top:clamp(40px,7vh,80px)}
.stage__grid{position:relative;height:100%}
.stage__item{position:absolute;margin:0;overflow:hidden;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.stage__item img{width:100%;height:100%;object-fit:cover}
.s1{left:var(--pad);top:6%;width:17%;height:40%}
.s2{left:calc(var(--pad) + 2%);top:52%;width:15%;height:38%}
.s3{right:var(--pad);top:4%;width:16%;height:36%}
.s4{right:calc(var(--pad) + 3%);top:46%;width:18%;height:30%}
.s5{left:20%;top:76%;width:12%;height:22%;display:none}
.stage__main{inset:0;border-radius:0;clip-path:inset(8% 22% 8% 22% round 26px);z-index:2}
.stage__main img{transform-origin:50% 50%}
.stage__ui{position:absolute;inset:auto 24% 11% 24%;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.rec{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:rgba(2,10,28,.6);backdrop-filter:blur(8px);font:600 12px/1 var(--display);letter-spacing:.1em;color:#fff}
.rec i{width:8px;height:8px;border-radius:50%;background:#3E81F6;box-shadow:0 0 10px #3E81F6;animation:pulse 1.2s infinite}
.timeline{height:4px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.timeline i{display:block;height:100%;width:100%;background:var(--grad-bright);transform-origin:0 50%;transform:scaleX(.1)}
.tile--d{--s:80px;--rot:-10deg;left:18%;top:12%;z-index:3}
.tile--e{--s:64px;--rot:12deg;right:18%;bottom:14%;z-index:3}

/* =========== LOGOS =========== */
.logos{padding:clamp(40px,7vw,90px) 0;border-bottom:1px solid var(--line)}
.logos__row{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:40px}
.logos__label{margin:0;font:600 12px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;width:max-content;will-change:transform}
.wm{display:flex;align-items:center;padding:0 clamp(26px,3.5vw,52px);font-size:26px;color:#B9C8E6;opacity:.75;white-space:nowrap;transition:opacity .3s,color .3s}
.wm:hover{opacity:1;color:#fff}
.wm b{color:var(--glow)}
.wm--1{font:600 24px var(--display);letter-spacing:.04em}
.wm--2{font:500 28px var(--body);letter-spacing:-.04em}
.wm--3{font:300 26px var(--display);letter-spacing:.35em}
.wm--4{font:italic 700 28px Georgia,serif}
.wm--5{font:600 22px var(--display);letter-spacing:.1em}
.wm--6{font:600 24px var(--body);letter-spacing:-.02em}
.wm--7{font:600 italic 28px var(--display)}

/* =========== ABOUT =========== */
.about{padding:clamp(90px,13vw,170px) 0 clamp(60px,8vw,120px);text-align:center}
.about__text{max-width:1100px;margin:0 auto;font:600 clamp(26px,3.6vw,50px)/1.12 var(--display);text-transform:uppercase;color:#fff}
.about__text .w{display:inline-block;margin-right:.24em;opacity:.16}
.about__media{position:relative;max-width:900px;margin:clamp(50px,7vw,90px) auto 0}
.about__img{margin:0;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -30px rgba(1,81,206,.45)}
.parallax{width:100%;height:120%;object-fit:cover;margin-top:-10%}
.tile--f{--s:76px;--rot:-14deg;left:-30px;top:-30px}
.tile--g{--s:62px;--rot:12deg;right:-24px;bottom:18%;animation-delay:-3s}
.about__chip{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;font-size:14px;color:#fff;white-space:nowrap}
.dot-live{width:9px;height:9px;border-radius:50%;background:#3E81F6;box-shadow:0 0 0 0 rgba(62,129,246,.7);animation:ring 1.8s infinite}
@keyframes ring{70%{box-shadow:0 0 0 10px rgba(62,129,246,0)}100%{box-shadow:0 0 0 0 rgba(62,129,246,0)}}

/* =========== WORK =========== */
.work{position:relative;padding:clamp(60px,8vw,110px) 0 0}
.work::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 30%,rgba(19,97,224,.18),transparent 70%);pointer-events:none}
.work__head{position:sticky;top:34vh;z-index:0;text-align:center;padding:0 var(--pad)}
.work__cards{position:relative;z-index:1;height:1650px;max-width:1320px;margin:-14vh auto 0;padding:0 var(--pad)}
.wcard{position:absolute;display:block;border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);will-change:transform}
.wcard__media{position:relative;width:100%;height:100%}
.wcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,28,0) 45%,rgba(2,10,28,.85))}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.wcard:hover img{transform:scale(1.08);filter:saturate(1.15)}
.wcard__views{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;background:rgba(2,10,28,.55);backdrop-filter:blur(8px);font:600 12px/1 var(--display);letter-spacing:.06em;color:#fff}
.wcard__play{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;font-size:20px;opacity:0;transform:scale(.6);transition:.5s var(--ease)}
.wcard:hover .wcard__play{opacity:1;transform:none}
.wcard__meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;transition:transform .6s var(--ease)}
.wcard:hover .wcard__meta{transform:translateY(-6px)}
.wcard__meta span{font-size:12px;color:#B9C8E6;letter-spacing:.04em}
.wcard__meta h3{font-size:18px;font-weight:600;margin-top:4px}
.w1{left:3%;top:0;width:24%;aspect-ratio:3/4}
.w2{right:4%;top:120px;width:30%;aspect-ratio:4/3}
.w3{left:36%;top:620px;width:22%;aspect-ratio:3/4}
.w4{left:6%;top:960px;width:24%;aspect-ratio:3/4}
.w5{right:7%;top:860px;width:25%;aspect-ratio:3/4}

/* =========== SERVICES =========== */
.services{position:relative;padding:clamp(80px,10vw,150px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head>div{flex:1 1 auto;max-width:980px}
.sec-head__p{max-width:380px;margin:0;color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{position:relative;display:flex;flex-direction:column;min-height:340px;padding:24px;border-radius:var(--r);background:linear-gradient(180deg,#071a42,#041230);border:1px solid var(--line);overflow:hidden;transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease)}
.svc:hover{transform:translateY(-8px);border-color:rgba(62,129,246,.45);box-shadow:0 30px 60px -25px rgba(19,97,224,.6)}
.svc__top{display:flex;justify-content:space-between;align-items:center}
.svc__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-bright);font-size:24px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -8px rgba(19,97,224,.7);transition:transform .6s var(--ease)}
.svc:hover .svc__icon{transform:rotate(-10deg) scale(1.08)}
.svc__num{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.svc__title{margin:auto 0;padding:28px 0;text-align:center;font-size:clamp(26px,2.4vw,34px);font-weight:600;transition:transform .6s var(--ease),letter-spacing .6s var(--ease)}
.svc:hover .svc__title{transform:scale(1.04)}
.svc p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.svc__more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--glow);opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.svc:hover .svc__more{opacity:1;transform:none}
.spot{--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(62,129,246,.2),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(120,170,255,.9),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::before,.spot:hover::after{opacity:1}

/* =========== PROCESS =========== */
.process{padding:clamp(60px,8vw,120px) 0;border-top:1px solid var(--line)}
.process__wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,100px)}
.process__sticky{position:sticky;top:22vh;align-self:start}
.process__p{color:var(--muted);max-width:360px}
.process__meter{display:flex;align-items:center;gap:14px;margin-top:30px;font-family:var(--display)}
.process__meter::before{content:"";order:0}
.process__bar{position:relative;width:180px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.process__bar::after{content:"";position:absolute;inset:0;background:var(--grad-bright);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.process__idx{font-size:28px;color:#fff;min-width:2ch}
.process__meter i{font-style:normal;color:var(--muted)}
.process__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.step{position:relative;padding:34px 34px 34px 110px;min-height:190px;border-radius:var(--r);border:1px solid var(--line);background:rgba(6,22,58,.4);opacity:.4;transform:scale(.97);transition:opacity .6s,transform .6s var(--ease),border-color .6s,background .6s}
.step.is-active{opacity:1;transform:none;border-color:rgba(62,129,246,.4);background:linear-gradient(135deg,rgba(19,97,224,.18),rgba(6,22,58,.6))}
.step__n{position:absolute;left:32px;top:30px;font:600 40px/1 var(--display);background:var(--grad-bright);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:24px;font-weight:600;margin-bottom:10px}
.step p{margin:0;color:var(--muted);max-width:420px}
.step__icon{position:absolute;right:26px;top:26px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);font-size:18px;color:var(--glow);transition:transform .8s var(--ease),background .4s,color .4s}
.step.is-active .step__icon{transform:rotate(360deg);background:var(--electric);color:#fff;border-color:transparent}

/* =========== STATS =========== */
.stats{position:relative;padding:clamp(80px,10vw,150px) 0;background:radial-gradient(60% 50% at 50% 0%,rgba(2,56,140,.45),transparent 70%)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{position:relative;padding:28px 26px;border-radius:var(--r);border:1px solid var(--line);background:rgba(6,22,58,.55);overflow:hidden;transition:transform .6s var(--ease)}
.stat:nth-child(even){margin-top:120px} /* static fallback (reduced motion / no JS) */
.stats--live .stat:nth-child(even){margin-top:0}
.stats--live .stats__grid{padding-bottom:110px}
.stat:hover{border-color:rgba(62,129,246,.4)}
.stat__num{display:flex;align-items:flex-start;font:600 clamp(44px,5vw,72px)/1 var(--display);color:#fff}
.stat__num em{font-style:normal;color:var(--glow)}
.stat p{margin:16px 0 0;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.odo{display:inline-flex;overflow:hidden;height:1em;line-height:1}
.odo__d{display:inline-block;height:1em;overflow:hidden}
.odo__s{display:flex;flex-direction:column}
.odo__s span{display:block;height:1em;line-height:1}

/* =========== TESTIMONIALS =========== */
.testi{padding:clamp(60px,8vw,120px) 0}
.testi__grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:18px}
.rating{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:30px 24px;gap:16px;overflow:hidden}
.rating__score{font:600 54px/1 var(--display);color:#fff}
.rating__score small{font-size:24px;color:var(--muted)}
.rating__stars{display:flex;gap:4px;color:#3E81F6;font-size:18px}
.rating p{margin:0;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.rating__mark{display:grid;place-items:center;width:84px;height:84px;border-radius:22px;background:#fff;box-shadow:0 20px 40px -14px rgba(19,97,224,.6)}
.rating__mark img{width:44px}
.trust--sm .trust__chips span{width:32px;height:32px;font-size:10px}
.trust--sm p{text-transform:none;letter-spacing:0}
.quote{display:flex;flex-direction:column;padding:34px;gap:24px}
.quote__who{display:flex;align-items:center;gap:14px}
.quote__avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-bright);font:600 16px var(--display);color:#fff}
.quote__who b{display:block;font:600 16px var(--display);text-transform:uppercase;color:#fff}
.quote__who span{font-size:13px;color:var(--muted)}
.quote__text{margin:0;flex:1;font:600 clamp(20px,2.1vw,28px)/1.3 var(--display);text-transform:uppercase;color:#fff}
.quote__text .w{display:inline-block;margin-right:.25em}
.quote__nav{display:flex;align-items:center;gap:10px}
.qbtn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);font-size:18px;transition:background .3s,transform .4s var(--ease),border-color .3s}
.qbtn:hover{background:var(--electric);border-color:transparent;transform:scale(1.08)}
.qnext{background:#fff;color:var(--navy)}
.qnext:hover{color:#fff}
.quote__bar{flex:1;height:2px;margin:0 10px;background:var(--line-2);border-radius:2px;overflow:hidden}
.quote__bar i{display:block;height:100%;background:var(--grad-bright);transform-origin:0 50%;transform:scaleX(0)}
.quote__count{font:600 14px var(--display);color:var(--muted)}
.quote__count b{color:#fff}
.mini-stats{display:flex;flex-direction:column;gap:18px}
.mini{flex:1;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.mini__k{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
.mini__v{font:600 48px/1 var(--display);color:#fff;margin-top:20px}
.mini p{margin:8px 0 0;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* =========== TOOLS =========== */
.tools{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.tools__glow{position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 0%,rgba(1,81,206,.35),transparent 70%);pointer-events:none}
.tool-rail{position:relative;overflow:hidden;padding:40px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.tool-rail__track{display:flex;gap:22px;width:max-content;will-change:transform}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:120px;height:120px;border-radius:28px;background:linear-gradient(160deg,#0B2152,#05112B);border:1px solid var(--line);color:#9CC0FF;font-size:40px;will-change:transform;transition:background .4s,color .4s}
.tool span{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tool.is-center{background:#fff;color:var(--electric);box-shadow:0 30px 60px -20px rgba(62,129,246,.8)}
.tool.is-center span{color:var(--navy)}
.tools__pill{display:table;margin:10px auto 0;padding:10px 18px;border-radius:99px;border:1px solid var(--line-2);font-size:13px;color:var(--muted)}

/* =========== PRICING =========== */
.pricing{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line)}
.billing{position:relative;display:inline-flex;margin-top:30px;padding:5px;border-radius:99px;border:1px solid var(--line-2);background:rgba(6,22,58,.6)}
.billing__opt{position:relative;z-index:1;padding:10px 20px;border-radius:99px;font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.billing__opt.is-on{color:#fff}
.billing__opt em{font-style:normal;color:#9CC0FF;margin-left:4px}
.billing__pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:99px;background:var(--grad-bright);transition:transform .6s var(--ease),width .6s var(--ease)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{position:relative;padding:12px;overflow:hidden;transition:transform .6s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan__top{position:relative;padding:28px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.plan__row{display:flex;justify-content:space-between;align-items:center}
.plan__price{display:flex;align-items:baseline;gap:2px;margin:22px 0 10px;font:600 56px/1 var(--display);color:#fff}
.plan__price small{margin-left:8px;font:500 14px var(--body);color:var(--muted)}
.price{display:inline-block;min-width:3ch}
.plan__top p{color:var(--muted);margin:0 0 24px}
.plan__list{padding:26px 28px 18px}
.plan__list>p{margin:0 0 16px;color:var(--muted);font-size:14px}
.plan__list ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.plan__list li{display:flex;align-items:center;gap:12px;font:600 14px var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.plan__list li svg{display:grid;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--electric);color:#fff}
.plan--pro{background:linear-gradient(160deg,#0151CE 0%,#02388C 45%,#031738 100%);border-color:rgba(120,170,255,.35)}
.plan--pro .plan__top{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.plan--pro .plan__top p,.plan--pro .plan__list>p,.plan--pro .plan__price small{color:#C7D8FF}
.plan--pro .plan__list li svg{background:#fff;color:var(--electric)}
.badge-pop{position:relative;overflow:hidden;padding:8px 14px;border-radius:99px;background:#fff;color:var(--electric);font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.badge-pop::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(62,129,246,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.plan-custom{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:18px;padding:30px}
.plan-custom h3{font-size:clamp(22px,2.4vw,32px);font-weight:600;margin:16px 0 8px}
.plan-custom p{margin:0;color:var(--muted)}

/* =========== FAQ =========== */
.faq{padding:clamp(60px,8vw,120px) 0}
.faq__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,90px);align-items:start}
.faq__left{position:sticky;top:20vh}
.faq__left>p{color:var(--muted);margin:20px 0 28px}
.faq__list{display:flex;flex-direction:column;gap:12px}
.qa{border-radius:16px;border:1px solid var(--line);background:rgba(6,22,58,.5);transition:border-color .4s,background .4s}
.qa[open]{border-color:rgba(62,129,246,.4);background:linear-gradient(135deg,rgba(19,97,224,.14),rgba(6,22,58,.6))}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;font:600 clamp(15px,1.4vw,18px)/1.3 var(--display);text-transform:uppercase;color:#fff;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa__ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--electric);font-size:16px;transition:transform .5s var(--ease),background .4s}
.qa[open] .qa__ic{transform:rotate(135deg);background:#fff;color:var(--electric)}
.qa summary:hover .qa__ic{transform:scale(1.1)}
.qa[open] summary:hover .qa__ic{transform:rotate(135deg) scale(1.1)}
.qa__body{overflow:hidden}
.qa__body p{margin:0;padding:0 24px 24px;color:var(--muted);max-width:560px}

/* =========== CTA =========== */
.cta{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px)}
.cta__card{--mx:50%;--my:0%;position:relative;overflow:hidden;padding:clamp(60px,9vw,120px) var(--pad);border-radius:var(--r-lg);text-align:center;background:var(--grad);border:1px solid rgba(120,170,255,.25)}
.cta__spot{position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(62,129,246,.55),transparent 65%);pointer-events:none;transition:background .1s}
.cta__card>*{position:relative}
.cta__title{font-size:clamp(36px,6vw,84px);font-weight:600}
.cta__card p{max-width:540px;margin:22px auto 34px;color:#C7D8FF}
.tag--light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.cta__card .tile{position:absolute}
.tile--h{--s:72px;--rot:-14deg;left:8%;top:18%}
.tile--i{--s:86px;--rot:12deg;right:7%;bottom:14%;animation-delay:-2.5s;background:linear-gradient(145deg,#fff,#DCE8FF);color:var(--electric)}

/* =========== FOOTER =========== */
.footer{position:relative;overflow:hidden;padding-top:clamp(40px,6vw,70px);background:radial-gradient(70% 60% at 50% 110%,rgba(1,81,206,.45),transparent 70%)}
.footer__top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.footer__label{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.footer__mail{font:600 clamp(24px,3.4vw,44px)/1.1 var(--display);text-transform:uppercase;color:#fff}
.footer__socials{display:flex;flex-wrap:wrap;gap:24px}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.arrow-link svg{transition:transform .5s var(--ease)}
.arrow-link:hover svg{transform:translate(3px,-3px) rotate(45deg)}
.arrow-link:hover{color:var(--glow)}
.footer__mid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:26px 0}
.footer__nav{display:flex;flex-wrap:wrap;gap:24px;font:600 13px var(--body);letter-spacing:.1em;text-transform:uppercase}
.footer__nav a:hover{color:var(--glow)}
.footer__copy{margin:0;font-size:13px;color:var(--muted)}
.totop{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--navy);font-size:20px;transition:transform .5s var(--ease)}
.totop svg{transform:rotate(-45deg)}
.totop:hover{transform:translateY(-4px)}
.footer__big{display:flex;align-items:center;justify-content:center;gap:2.4vw;padding:2vw var(--pad) 1vw;line-height:.8;user-select:none}
.footer__mark{width:11vw;height:auto;flex:none;filter:drop-shadow(0 20px 40px rgba(1,81,206,.5));padding:1.6vw;background:#fff;border-radius:2.6vw}
.footer__word{font:600 16vw/.8 var(--display);text-transform:uppercase;letter-spacing:-.02em;background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.footer__word .ch{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text}
.footer__big{overflow:hidden}

/* =========== RESPONSIVE =========== */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .testi__grid{grid-template-columns:1fr 1fr}
  .quote{grid-column:1/-1;order:-1}
  .mini-stats{flex-direction:column}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(even){margin-top:30px}
}
@media (max-width:900px){
  .nav__links{display:none}
  .hero__top{grid-template-columns:1fr}
  .hero__right{justify-self:start}
  .tile--a{left:auto;right:6%;top:9vh;--s:56px}.tile--b,.tile--c{display:none}
  .stage{height:auto;margin-top:50px;padding:0 var(--pad)}
  .stage__grid{height:auto}
  .stage__item:not(.stage__main){display:none}
  .stage__main{position:relative;inset:auto;aspect-ratio:4/5;clip-path:none;border-radius:22px}
  .stage__ui{inset:auto 18px 18px 18px}
  .tile--d{--s:58px;left:2%;top:-24px}.tile--e{--s:50px;right:3%;bottom:-20px}
  .logos__row{grid-template-columns:1fr;gap:20px;text-align:center}
  .work__head{position:relative;top:auto;margin-bottom:40px}
  .work__cards{height:auto;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .wcard{position:relative;inset:auto!important;width:auto!important;aspect-ratio:3/4!important}
  .wcard:nth-child(even){margin-top:40px}
  .wcard:last-child{grid-column:1/-1;aspect-ratio:16/10!important;margin-top:0}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head--center{align-items:center}
  .process__wrap{grid-template-columns:1fr}
  .process__sticky{position:relative;top:auto}
  .plans{grid-template-columns:1fr}
  .plan-custom{flex-direction:column;align-items:flex-start}
  .faq__grid{grid-template-columns:1fr}
  .faq__left{position:relative;top:auto}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .svc{min-height:280px}
  .testi__grid{grid-template-columns:1fr}
  .stats__grid{gap:12px}
  .stat{padding:22px 18px}
  .stat:nth-child(even){margin-top:24px}
  .step{padding:84px 24px 26px 24px;min-height:0}
  .step__n{left:24px;top:24px;font-size:34px}
  .step__icon{right:20px;top:22px}
  .hero__cta .btn--ghost{display:none}
  .about__chip{font-size:12px}
  .tile--f{--s:56px;left:-8px;top:-24px}.tile--g{--s:48px;right:-8px}
  .tile--h{--s:48px;left:4%;top:6%}.tile--i{--s:56px;right:4%;bottom:5%}
  .tool{width:96px;height:96px;font-size:32px;border-radius:22px}
  .plan__price{font-size:46px}
  .footer__mark{width:16vw;border-radius:4vw}
  .nav{top:10px}
  .nav__menu{padding:11px 14px}
}

/* =========== REDUCED MOTION =========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{display:none}
  .hero__lines path{stroke-dashoffset:0}
  .about__text .w{opacity:1}
  .step{opacity:1;transform:none}
}

/* reduced-motion layout tweaks */
.reduce .work__head{position:relative;top:auto;margin-bottom:40px}
.reduce .work__cards{margin-top:0;height:1350px}
.reduce .tool-rail{overflow-x:auto}
.reduce .w4{top:820px}.reduce .w5{top:760px}
@media (max-width:900px){.reduce .work__cards{height:auto}}