.hero{--pointer-x:0px;--pointer-y:0px;--tilt-x:0deg;--tilt-y:0deg;--scroll-y:0px}
.motion-toggle{display:block;margin:22px auto 0;padding:8px 12px;border:1px solid #6b95c42b;border-radius:20px;background:#0b1420;color:#a3b8d1;font:10px Arial,sans-serif;letter-spacing:.3px;cursor:pointer;position:relative;z-index:4}.motion-toggle:hover{border-color:#8ecaff80;color:#e6f3ff}.motion-toggle:focus-visible{outline:2px solid #77caff;outline-offset:4px}
.motion-on .brand-symbol{transform:translateX(-50%) perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));animation:brand-float 8s ease-in-out infinite;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.motion-on .brand-horizon{transform:translate3d(var(--pointer-x),calc(var(--pointer-y) + var(--scroll-y)),0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.motion-on .brand-aura{transform:translate3d(calc(var(--pointer-x)*-2),calc(var(--pointer-y)*-2),0);animation:aura-breathe 9s ease-in-out infinite;transition:transform 1.2s ease}
.motion-on .hero h1 span{background-image:linear-gradient(110deg,#83a9d4 15%,#c4eaff 35%,#fff 45%,#91b7de 58%,#83a9d4 80%);background-size:240% 100%;animation:title-light 10s ease-in-out infinite}
.motion-on .infra-panel{transform:perspective(1400px) rotateX(calc(var(--tilt-x)*-.25)) rotateY(calc(var(--tilt-y)*-.25));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.service{--spot-x:50%;--spot-y:50%;isolation:isolate}.service:after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(300px circle at var(--spot-x) var(--spot-y),#59aaff14,transparent 70%);opacity:0;transition:opacity .4s}.motion-on .service:hover:after{opacity:1}
.motion-on .hero-copy{animation:hero-arrive 1s ease both}.motion-on .brand-logo img{transition:filter .4s,transform .4s}.motion-on .brand-logo:hover img{filter:drop-shadow(0 0 9px #64caff70);transform:translateY(-2px)}
@keyframes brand-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes aura-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes title-light{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes hero-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
body:not(.motion-on) .reveal-ready{opacity:1;translate:none;transition:none}
.motion-suspended .brand-symbol,.motion-suspended .brand-aura,.motion-suspended .hero h1 span{animation-play-state:paused}
@media(max-width:760px){.motion-toggle{font-size:9px;margin-top:16px}.motion-on .brand-symbol{animation-duration:10s}.motion-on .infra-panel{transform:none}}
@media(prefers-reduced-motion:reduce){.motion-on .brand-symbol,.motion-on .brand-aura,.motion-on .hero h1 span,.motion-on .hero-copy{animation:none}.motion-on .brand-horizon,.motion-on .infra-panel{transform:none;transition:none}.motion-on .brand-symbol{transform:translateX(-50%);transition:none}.service:after{display:none}}
.motion-on .hero-copy{animation:none}
/* Logo floats autonomously; pointer effects remain on the panel and cards. */
.motion-on .brand-symbol{transform:translateX(-50%);transition:none}
.motion-on .brand-horizon{transform:none;transition:none}
.motion-on .brand-aura{transform:none;transition:none}
/* Autonomous particle waves retain the original G silhouette. */
.logo-wave{position:absolute;left:50%;top:-35px;width:600px;height:600px;transform:translateX(-50%);pointer-events:none;display:none}
.wave-ready .logo-wave{display:block}
.motion-on .wave-ready .brand-symbol,.wave-ready .brand-symbol{opacity:.085;animation:none;translate:none;filter:none}
.wave-ready .brand-aura{background:radial-gradient(ellipse at center,#1276be18,transparent 65%)}
@media(max-width:760px){.logo-wave{width:min(396px,106vw);height:auto;aspect-ratio:1;top:-23px}}
@media(prefers-reduced-motion:reduce){.logo-wave{display:none!important}.wave-ready .brand-symbol{opacity:.9}}