/* AVANGARD fx layer. Decorative nodes are injected by fx.js (aria-hidden). Safe to load without JS. */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* 1. Living background: aurora blobs (transform-only drift) + film grain */
.fx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#05060d 0%,#0b0d1c 100%)}
.fx-blob{position:absolute;width:58vmax;height:58vmax;border-radius:50%;will-change:transform}
.fx-blob--1{left:-16vmax;top:-20vmax;background:radial-gradient(closest-side,rgba(91,108,255,.5),rgba(91,108,255,0));animation:drift1 42s ease-in-out infinite alternate}
.fx-blob--2{right:-20vmax;top:6vmax;background:radial-gradient(closest-side,rgba(139,92,246,.46),rgba(139,92,246,0));animation:drift2 50s ease-in-out infinite alternate}
.fx-blob--3{left:12vmax;bottom:-30vmax;background:radial-gradient(closest-side,rgba(34,211,238,.3),rgba(34,211,238,0));animation:drift3 56s ease-in-out infinite alternate}
.fx-blob--4{right:6vmax;bottom:-26vmax;width:44vmax;height:44vmax;background:radial-gradient(closest-side,rgba(255,107,87,.14),rgba(255,107,87,0));animation:drift4 64s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(22vmax,16vmax,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-24vmax,18vmax,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(20vmax,-14vmax,0) scale(1.12)}}
@keyframes drift4{to{transform:translate3d(-18vmax,-12vmax,0) scale(1.2)}}
.fx-bg:after{content:"";position:absolute;inset:0;opacity:.07;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 2. Hero: perspective grid, canvas, 3D glass shapes, entrance, shimmer */
.fx-grid{position:absolute;left:-10%;right:-10%;bottom:0;height:60%;perspective:520px;perspective-origin:50% 0;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 35%,transparent 100%);mask-image:linear-gradient(to top,transparent 0,#000 35%,transparent 100%)}
.fx-grid i{position:absolute;left:0;right:0;bottom:0;height:200%;transform:rotateX(64deg);transform-origin:50% 100%;overflow:hidden}
.fx-grid b{position:absolute;left:0;right:0;top:-80px;bottom:0;background-image:linear-gradient(rgba(139,92,246,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.26) 1px,transparent 1px);background-size:80px 80px;animation:gridmove 3.2s linear infinite}
@keyframes gridmove{to{transform:translateY(80px)}}
.fx-cv{position:absolute;inset:0;width:100%;height:100%}
.fx-scene{position:absolute;inset:0;perspective:900px;--px:0;--py:0;--sy:0}
.fx-s{position:absolute;transform-style:preserve-3d;translate:calc(var(--px)*var(--k,20)*1px) calc(var(--py)*var(--k,20)*1px + var(--sy)*var(--ks,-60)*1px);animation:shapeIn 1.6s .5s both cubic-bezier(.2,.8,.2,1)}
@keyframes shapeIn{from{opacity:0;scale:.6}}
.fx-spin{width:100%;height:100%;transform-style:preserve-3d;animation:spin3 26s linear infinite}
@keyframes spin3{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(336deg) rotateY(360deg)}}
.fx-s--c1{--k:34;--ks:-120;--h:75px;right:11%;top:21%;width:150px;height:150px}
.fx-s--c2{--k:-22;--ks:-60;--h:32px;left:47%;top:13%;width:64px;height:64px}
.fx-s--c2 .fx-spin{animation-duration:18s;animation-direction:reverse}
.fx-spin i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.34);border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(91,108,255,.1) 55%,rgba(34,211,238,.18));box-shadow:inset 0 0 28px rgba(139,92,246,.45),0 0 26px rgba(91,108,255,.28)}
.fx-spin i:nth-child(1){transform:translateZ(var(--h))}
.fx-spin i:nth-child(2){transform:rotateY(180deg) translateZ(var(--h))}
.fx-spin i:nth-child(3){transform:rotateY(90deg) translateZ(var(--h))}
.fx-spin i:nth-child(4){transform:rotateY(-90deg) translateZ(var(--h))}
.fx-spin i:nth-child(5){transform:rotateX(90deg) translateZ(var(--h))}
.fx-spin i:nth-child(6){transform:rotateX(-90deg) translateZ(var(--h))}
.fx-s--ring{--k:48;--ks:-170;right:2%;top:46%;width:320px;height:320px}
.fx-s--ring .fx-spin{animation:ringspin 20s linear infinite}
@keyframes ringspin{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
.fx-s--ring b{position:absolute;inset:0;border-radius:50%;border:12px solid transparent;background:conic-gradient(from 0deg,#22d3ee,#5b6cff,#8b5cf6,#22d3ee) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.75;filter:drop-shadow(0 0 14px rgba(91,108,255,.8))}
.fx-s--o1,.fx-s--o2{border-radius:50%}
.fx-s--o1{--k:-40;--ks:-90;right:35%;top:60%;width:104px;height:104px}
.fx-s--o2{--k:26;--ks:-40;right:42%;top:7%;width:52px;height:52px}
.fx-s--o1 u,.fx-s--o2 u{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),rgba(167,139,250,.9) 22%,#5b3fd1 55%,#150f45 100%);box-shadow:0 0 50px 6px rgba(139,92,246,.5),inset -10px -14px 26px rgba(5,6,13,.6);animation:bob 7s ease-in-out infinite alternate}
.fx-s--o2 u{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(103,232,249,.9) 24%,#0e7490 58%,#06222b 100%);box-shadow:0 0 40px 4px rgba(34,211,238,.5),inset -6px -8px 16px rgba(5,6,13,.6);animation-duration:9s}
@keyframes bob{to{transform:translateY(-18px)}}

@keyframes rise{from{opacity:0;translate:0 26px;filter:blur(8px)}}
.hero .eyebrow{animation:rise .9s .05s both cubic-bezier(.2,.8,.2,1)}
.hero__lead{animation:rise .9s .8s both cubic-bezier(.2,.8,.2,1)}
.hero__cta{animation:rise .9s .95s both cubic-bezier(.2,.8,.2,1)}
.hero__stats{animation:rise .9s 1.1s both cubic-bezier(.2,.8,.2,1)}
@keyframes letterIn{from{opacity:0;translate:0 .45em;scale:.7;filter:blur(14px)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-200% 0}}
.hero__title span:nth-child(1){--i:0}.hero__title span:nth-child(2){--i:1}.hero__title span:nth-child(3){--i:2}.hero__title span:nth-child(4){--i:3}.hero__title span:nth-child(5){--i:4}.hero__title span:nth-child(6){--i:5}.hero__title span:nth-child(7){--i:6}.hero__title span:nth-child(8){--i:7}
.hero__title span{transition:transform .35s cubic-bezier(.3,1.5,.5,1);animation:letterIn 1.1s calc(var(--i,0)*80ms + 150ms) both cubic-bezier(.2,.9,.2,1)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title span{background:linear-gradient(100deg,#eef0ff 0%,#bcc6ff 20%,#8ff0ff 38%,#eef0ff 55%,#d6ccff 76%,#eef0ff 100%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:letterIn 1.1s calc(var(--i,0)*80ms + 150ms) both cubic-bezier(.2,.9,.2,1),shimmer 8s calc(var(--i,0)*-420ms) linear infinite}
}
@media(hover:hover) and (pointer:fine){.hero__title span:hover{transform:translateY(-.05em) skewX(-6deg)}}
.hero.fx-off *,.hero.fx-off *:before,.hero.fx-off *:after,.fx-off.hero{animation-play-state:paused!important}

/* 3. Glass cards: spotlight lives in the card background (--mx/--my); tilt via inline transform */
.rv{transform:none;translate:0 34px;scale:.97;filter:blur(10px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1),filter .8s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),var(--d,0s),0s,0s}
.rv.in{opacity:1;transform:none;translate:none;scale:none;filter:none}
.cards>.rv:nth-child(3n+2),.fit__grid>.rv:nth-child(3n+2),.steps>.rv:nth-child(2){--d:.09s}
.cards>.rv:nth-child(3n),.fit__grid>.rv:nth-child(3n),.steps>.rv:nth-child(3),.cases>.rv:nth-child(2){--d:.18s}
.steps>.rv:nth-child(4){--d:.27s}
@media(hover:hover) and (pointer:fine){
  .card:hover,.case:hover,.plan:hover,.steps li:hover,.fit__grid div:hover{transform:translateY(-4px)}
  .card:hover,.case:hover,.plan:hover,.steps li:hover,.fit__grid div:hover,.form:focus-within{box-shadow:var(--glow),0 30px 70px -24px rgba(139,92,246,.7)}
}
.plan--hit:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 54px 4px rgba(139,92,246,.55),0 0 110px 8px rgba(91,108,255,.35);animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.plan--hit:after{padding:2px;background:conic-gradient(from var(--angle),#22d3ee,#5b6cff 25%,#8b5cf6 50%,#ff6b57 62%,#8b5cf6 75%,#22d3ee);animation:angle 5s linear infinite}
@keyframes angle{to{--angle:360deg}}
.fx-off .plan--hit:before,.fx-off .plan--hit:after{animation-play-state:paused}

/* 4. Scroll choreography: progress, nav, heading sweep, dividers */
.fx-prog{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#22d3ee,#8b5cf6 60%,#ff6b57);box-shadow:0 0 14px rgba(139,92,246,.9);pointer-events:none}
html.fx .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;transition:background .35s}
html.fx.fx-scrolled .nav{background:rgba(5,6,13,.7);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
html.fx .nav:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.9),rgba(34,211,238,.8),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
html.fx.fx-scrolled .nav:after{opacity:1}
.sec__head:after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;border-radius:2px;background:linear-gradient(90deg,#22d3ee,#8b5cf6 55%,#ff6b57 92%,transparent);box-shadow:0 0 14px rgba(139,92,246,.8);transform-origin:0 50%;transition:transform 1.2s .25s cubic-bezier(.2,.8,.2,1)}
html.fx .sec__head:not(.in):after{transform:scaleX(0)}
.sec:before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.7) 30%,rgba(34,211,238,.6) 70%,transparent);pointer-events:none}
.sec:after{content:"";position:absolute;left:var(--pad);top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px #22d3ee,0 0 26px 7px rgba(139,92,246,.7);pointer-events:none;animation:travel 10s linear infinite}
.sec:nth-of-type(2n):after{animation-duration:13s;animation-delay:-5s}
@keyframes travel{0%{transform:translateX(0);opacity:0}10%,90%{opacity:1}100%{transform:translateX(calc(100vw - 2*var(--pad) - 5px));opacity:0}}
.fx-deco{position:absolute;z-index:-1;pointer-events:none;translate:0 calc(var(--py,0)*1px)}
.fx-deco--ring{right:-14%;top:8%;width:min(70vw,620px);aspect-ratio:1;border-radius:50%;border:2px solid transparent;background:conic-gradient(from 0deg,rgba(34,211,238,.5),transparent 30%,rgba(139,92,246,.5) 55%,transparent 80%,rgba(34,211,238,.5)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:rot 70s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.fx-deco--orb{left:-12%;top:20%;width:min(60vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.3),transparent)}
.contact .fx-deco--orb{left:auto;right:-10%;top:auto;bottom:-20%;background:radial-gradient(closest-side,rgba(255,107,87,.2),rgba(139,92,246,.18) 55%,transparent)}

/* 5. Ticker: glowing masked edges, pause on hover */
.ticker:hover .ticker__row{animation-play-state:paused}

/* 6. Cursor glow */
.fx-cur{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.17),rgba(34,211,238,.05) 60%,transparent);pointer-events:none;z-index:40;opacity:0;transition:opacity .5s;will-change:transform}
.fx-cur.on{opacity:1}
@media(hover:none),(pointer:coarse){.fx-cur{display:none}}

/* Small screens: lighter everything */
@media(max-width:700px){
  .fx-blob{width:80vmax;height:80vmax}
  .fx-blob--3,.fx-blob--4{display:none}
  .fx-s--ring,.fx-s--c2,.fx-s--o2{display:none}
  .fx-s--c1{--h:36px;right:7%;top:auto;bottom:11%;width:72px;height:72px;opacity:.95}
  .fx-s--o1{right:7%;top:auto;bottom:34%;width:54px;height:54px}
  .fx-grid{height:40%}
  .rv{filter:blur(6px);translate:0 24px}
  .fx-deco--ring{display:none}
  .fx-bg:after{opacity:.05}
}

/* Reduced motion: nothing moves, everything is revealed at once (static decor stays visible) */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.rv.in{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important}
  .fx-cur{display:none!important}
  .sec:after{display:none}
  .sec__head:after,html.fx .sec__head:not(.in):after{transform:none!important}
  .ticker{transform:none;margin:0 0 40px}
}