body{margin:0;background:#07090D;color:#F4F7FB;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#00E5FF}a:hover{color:#7DF2FF}
*{box-sizing:border-box}
:focus-visible{outline:2px solid #00E5FF;outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.navlink{position:relative;color:#9BA7B8;text-decoration:none;font-size:14px;padding:10px 4px;transition:color .3s ease}
.navlink::after{content:'';position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:linear-gradient(90deg,#00E5FF,#4263FF);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.navlink:hover{color:#F4F7FB}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}
footer .navlink::after{left:0;right:0;bottom:-3px}
.logo svg{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.logo:hover svg{transform:rotate(-10deg) scale(1.08)}
.btn-p{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:#00E5FF;color:#07090D;text-decoration:none;font-weight:600;font-size:15px;padding:0 22px;height:48px;border-radius:999px;border:0;cursor:pointer;font-family:Inter,sans-serif;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background .3s ease}
.btn-p::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-20deg);transition:left .8s cubic-bezier(.2,.8,.2,1)}
.btn-p:hover{color:#07090D;transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(0,229,255,.6),0 0 0 4px rgba(0,229,255,.12)}
.btn-p:hover::before{left:125%}
.btn-p.auto::before{animation:shine 5s ease-in-out 2.6s infinite}
@keyframes shine{0%{left:-75%}25%,100%{left:125%}}
.btn-p svg,.btn-g svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-p:hover svg,.btn-g:hover svg{transform:translateX(5px)}
.btn-g{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;color:#F4F7FB;text-decoration:none;font-weight:500;font-size:15px;padding:0 22px;height:48px;border-radius:999px;border:1px solid #2A3444;background:transparent;cursor:pointer;font-family:Inter,sans-serif;transition:border-color .3s ease}
.btn-g::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,229,255,.16),rgba(66,99,255,.16));transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.btn-g:hover{border-color:#00E5FF;color:#F4F7FB}
.btn-g:hover::before{transform:scaleX(1)}
.gridbg{background-image:linear-gradient(#141A24 1px,transparent 1px),linear-gradient(90deg,#141A24 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 30%,transparent 80%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.span2{grid-column:span 2}
.card{position:relative;background:#0D1118;border:1px solid #1C2330;border-radius:20px;transition:translate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .4s ease}
.card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#00E5FF,rgba(0,229,255,0) 35%,rgba(66,99,255,0) 65%,#4263FF);-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 .5s ease;pointer-events:none}
.card:hover{translate:0 -6px;box-shadow:0 30px 60px -24px rgba(0,0,0,.9),0 0 80px -30px rgba(0,229,255,.35)}
.card:hover::after{opacity:1}
.card:hover .tag{border-color:#2E3B50;color:#C5CEDB}
.chip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:1px solid #1C2330;color:#9BA7B8;font-family:Inter,sans-serif;font-size:15px;padding:16px 18px;border-radius:14px;cursor:pointer;min-height:56px;transition:all .25s ease}
.chip:hover{border-color:#2E3B50;color:#F4F7FB}
.chip.on{border-color:#00E5FF;color:#F4F7FB;background:#0A1A1F}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#9BA7B8;border:1px solid #232C3A;border-radius:999px;padding:5px 10px;transition:border-color .3s ease,color .3s ease,background .3s ease}
.card .tag:hover,.tag:hover{border-color:#00E5FF;color:#F4F7FB;background:#0A1A1F}
.mono{font-family:'JetBrains Mono',monospace}
.flow{stroke-dasharray:4 12;animation:flow 2.4s linear infinite}
.flow.b{animation-duration:3.2s}
.flow.c{animation-duration:2.8s}
@keyframes flow{to{stroke-dashoffset:-64}}
.spin{transform-origin:300px 300px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bob{animation:bob 6s ease-in-out infinite}
.bob.d2{animation-delay:-2s}.bob.d3{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rangebtn{background:transparent;border:0;color:#9BA7B8;font-family:'JetBrains Mono',monospace;font-size:12px;padding:0 12px;height:30px;border-radius:8px;cursor:pointer}
.rangebtn.on{background:#1C2330;color:#F4F7FB}
.faqbtn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:transparent;border:0;color:#F4F7FB;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:500;text-align:left;padding:26px 0;cursor:pointer;min-height:44px}
.faqicon{transition:transform .3s ease;flex:none}
.faqicon.open{transform:rotate(45deg)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:#C5CEDB;font-weight:500}
.inp{width:100%;background:#07090D;border:1px solid #232C3A;border-radius:12px;color:#F4F7FB;font-family:Inter,sans-serif;font-size:15px;padding:0 14px;height:48px}
.inp:focus{border-color:#00E5FF;outline:none}
textarea.inp{height:110px;padding:12px 14px;resize:vertical}
.svc-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#C5CEDB;border:1px solid #232C3A;border-radius:999px;padding:0 14px;height:40px;cursor:pointer}
.svc-check input{accent-color:#00E5FF}
.menubtn{display:none}
.dash-side{display:flex}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hero atmosphere */
.gridhot{background-image:linear-gradient(#1D3A4C 1px,transparent 1px),linear-gradient(90deg,#1D3A4C 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(260px circle at var(--sx,72%) var(--sy,38%),#000,transparent 72%);mask-image:radial-gradient(260px circle at var(--sx,72%) var(--sy,38%),#000,transparent 72%)}
.spot{background:radial-gradient(560px circle at var(--sx,72%) var(--sy,38%),rgba(0,229,255,.08),transparent 60%)}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.a1{width:560px;height:560px;right:0;top:2%;background:radial-gradient(circle,rgba(0,229,255,.20),transparent 65%);animation:drift 18s ease-in-out infinite}
.a2{width:640px;height:640px;right:20%;top:28%;background:radial-gradient(circle,rgba(66,99,255,.20),transparent 65%);animation:drift 24s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,50px) scale(1.12)}}
/* hero entrance */
.in{animation:inup 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes inup{from{opacity:0;transform:translateY(26px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.li{display:inline-block;animation:lineup 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes lineup{from{transform:translateY(110%) rotate(3deg)}to{transform:none}}
.shim{background:linear-gradient(90deg,#00E5FF 0%,#9AF6FF 22%,#4263FF 50%,#00E5FF 75%,#9AF6FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 7s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.uline path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s cubic-bezier(.65,0,.35,1) 1.2s forwards}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s cubic-bezier(.65,0,.35,1) both}
@keyframes draw{to{stroke-dashoffset:0}}
.fade{animation:fade 1.4s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pop{transform-box:fill-box;transform-origin:center;animation:pop 1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.popin{animation:popin 1.1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popin{from{opacity:0;scale:.8;translate:0 18px}to{opacity:1;scale:1;translate:0 0}}
.pulsering{transform-box:view-box;transform-origin:300px 300px;animation:ring 3.6s cubic-bezier(.2,.6,.2,1) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}
.spin2{transform-box:view-box;transform-origin:300px 300px;animation:spin 40s linear infinite reverse}
.breathe{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
.twinkle{animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.1}50%{opacity:.9}}
.tilt{transform:perspective(1200px) rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -9deg));transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.par2{transform:translate3d(calc(var(--mx,0) * -26px),calc(var(--my,0) * -26px),0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.par3{transform:translate3d(calc(var(--mx,0) * 14px),calc(var(--my,0) * 14px),0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tick{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;opacity:0;translate:0 14px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.tick.on{opacity:1;translate:0 0}
.scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:#7A8699;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em}
.scrollcue:hover{color:#00E5FF}
.mouse{width:22px;height:34px;border:1.5px solid #2E3B50;border-radius:12px;display:flex;justify-content:center;padding-top:6px;transition:border-color .3s}
.scrollcue:hover .mouse{border-color:#00E5FF}
.wheel{width:3px;height:7px;border-radius:2px;background:#00E5FF;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
/* marquee */
.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)}
.track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.capitem{display:flex;align-items:center;gap:16px;padding:30px 40px}
.capitem svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.capitem:hover svg{transform:rotate(180deg) scale(1.2)}
.capl{transition:color .3s ease}
.capitem:hover .capl{color:#00E5FF}
/* card internals */
.wire{background:linear-gradient(90deg,#1C2330 0%,#1C2330 35%,#00E5FF 50%,#1C2330 65%,#1C2330 100%);background-size:300% 100%;animation:wire 2.2s linear infinite}
@keyframes wire{from{background-position:100% 0}to{background-position:0 0}}
.diamond{transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.card:hover .diamond{transform:rotate(225deg)}
.cal span{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.card:hover .cal span:nth-child(n+8){transform:scaleY(1.15)}
.caret{display:inline-block;width:7px;height:14px;background:#00E5FF;margin-left:4px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bar{transform-origin:bottom}
.ind{background:#0A0D13;transition:background .4s ease}
.ind:hover{background:#0F151E}
.ind h3{transition:color .3s ease}
.ind:hover h3{color:#00E5FF}
.arr{display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ind:hover .arr{transform:translateX(6px)}
.stepdot{transition:box-shadow .5s ease,background .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.step-li:hover .stepdot{box-shadow:0 0 0 8px rgba(0,229,255,.08),0 0 36px rgba(0,229,255,.45);background:#0A1A1F;transform:scale(1.1)}
.step-li h3{transition:color .3s ease}
.step-li:hover h3{color:#00E5FF}
.stepline{transform-origin:left}
.prin{transition:padding .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease}
.prin:hover{padding-left:10px;border-color:#00E5FF}
.blogc .bimg{transition:background-color .6s ease}
.blogc .bimg svg{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.blogc:hover .bimg svg{transform:scale(1.15) translateX(-12px)}
.blogc h3{transition:color .3s ease}
.blogc:hover h3{color:#00E5FF}
.readmore{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#9BA7B8;transition:color .3s ease,gap .3s ease}
.blogc:hover .readmore{color:#00E5FF;gap:14px}
.faqbtn{transition:color .3s ease}
.faqbtn:hover{color:#00E5FF}
.faqbtn:hover .faqicon{transform:rotate(90deg)}
.faqbtn:hover .faqicon.open{transform:rotate(45deg)}
.inp{transition:border-color .3s ease,box-shadow .3s ease}
.inp:focus{border-color:#00E5FF;box-shadow:0 0 0 4px rgba(0,229,255,.12)}
.svc-check{transition:border-color .3s ease,color .3s ease,background .3s ease}
.svc-check:hover{border-color:#00E5FF;color:#F4F7FB;background:#0A1A1F}
.bigword{background:linear-gradient(90deg,#0F141C 0%,#0F141C 40%,#1A3A48 50%,#0F141C 60%,#0F141C 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 2s cubic-bezier(.2,.8,.2,1)}
.bigword:hover{background-position:0 0}
/* scroll-driven reveals (browsers without support show content normally) */
@supports (animation-timeline: view()){
.reveal{animation:rv linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
.reveal-c{animation:rvc linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
.dash-tilt{animation:dtilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.bar{animation:bar linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
.drawv{stroke-dasharray:1;animation:drawv linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.stepline{animation:sl linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
}
@keyframes rv{from{opacity:0;transform:translateY(60px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rvc{from{opacity:0;transform:translateY(70px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dtilt{from{opacity:.25;transform:perspective(1600px) rotateX(26deg) scale(.86) translateY(40px)}to{opacity:1;transform:none}}
@keyframes bar{from{scale:1 0}to{scale:1 1}}
@keyframes drawv{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sl{from{transform:scaleX(0)}to{transform:none}}
/* stagger delays — keep after all animation rules */
.t1{animation-delay:.1s}.t2{animation-delay:.25s}.t3{animation-delay:.4s}.t4{animation-delay:.6s}.t5{animation-delay:.8s}.t6{animation-delay:1s}.t7{animation-delay:1.2s}.t8{animation-delay:1.5s}.t9{animation-delay:1.9s}
@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span2{grid-column:span 2}}
@media (max-width:900px){.navlinks{display:none}.menubtn{display:inline-flex}.hero-grid{grid-template-columns:minmax(0,1fr)}.dash-side{display:none}.hide-sm{display:none}}
@media (max-width:640px){.wrap{padding:0 18px}.svc-grid{grid-template-columns:minmax(0,1fr)}.span2{grid-column:span 1}.faqbtn{font-size:17px}}
@media (max-width:900px){.scrollcue{display:none}}
@media (prefers-reduced-motion:reduce){.flow,.spin,.spin2,.bob,.pulse,.in,.li,.draw,.fade,.pop,.popin,.pulsering,.breathe,.twinkle,.track,.wheel,.shim,.aurora,.wire,.caret,.uline path,.btn-p.auto::before,.reveal,.reveal-c,.dash-tilt,.bar,.drawv,.stepline{animation:none!important}.draw,.uline path,.drawv{stroke-dashoffset:0}.packets{display:none}.tilt,.par2,.par3{transform:none}.card:hover,.btn-p:hover{transform:none;translate:none}}