.hero{background:radial-gradient(ellipse at 70% 38%,rgba(0,112,255,.19),transparent 28%),radial-gradient(ellipse at 83% 72%,rgba(0,211,235,.08),transparent 26%),linear-gradient(135deg,#020610 0%,#030918 48%,#02050d 100%)}
.hero:before{z-index:-3;background:linear-gradient(90deg,rgba(2,6,16,.98) 0 31%,rgba(2,7,18,.24) 63%,rgba(2,5,13,.78))}
.hero:after{content:"";position:absolute;z-index:-1;width:600px;height:600px;right:5%;top:10%;border-radius:50%;background:radial-gradient(circle,transparent 35%,rgba(0,126,255,.035) 36%,transparent 37%,transparent 48%,rgba(0,199,255,.025) 49%,transparent 50%);animation:spin 45s linear infinite}
.hero-grid{z-index:-2;opacity:.1;background-size:72px 72px;transform:perspective(700px) rotateX(62deg) scale(1.6) translateY(210px);transform-origin:center bottom;mask-image:linear-gradient(to bottom,transparent,black 55%,transparent)}
.hero-stars{position:absolute;z-index:-1;inset:80px 0 90px 38%;opacity:.32;background-image:radial-gradient(circle,#22c9ff 1px,transparent 1.5px),radial-gradient(circle,#196ff6 .7px,transparent 1.2px);background-position:0 0,17px 13px;background-size:41px 41px,29px 29px;mask-image:radial-gradient(ellipse at 65% 48%,black 0,transparent 68%);animation:stars-drift 18s linear infinite}
.data-wave{position:absolute;z-index:-1;right:-8%;width:73%;height:300px;border-radius:50%;opacity:.52;background-image:radial-gradient(circle,#0e9cff 1.15px,transparent 1.6px);background-size:10px 10px;mask-image:linear-gradient(90deg,transparent 2%,black 22%,black 78%,transparent 98%);transform:perspective(700px) rotateX(67deg) rotateZ(-7deg)}
.data-wave:after{content:"";position:absolute;inset:42% 0 auto;height:2px;background:linear-gradient(90deg,transparent,#07b9ff 25%,#176dff 55%,#05d9e8 80%,transparent);box-shadow:0 0 16px #087dff,0 0 34px rgba(0,151,255,.65)}
.data-wave--back{top:255px;animation:wave-float 8s ease-in-out infinite}
.data-wave--front{top:455px;right:-2%;width:82%;opacity:.38;transform:perspective(700px) rotateX(69deg) rotateZ(5deg);animation:wave-float 9s 1.4s ease-in-out infinite reverse}
.hero-logo{width:360px;height:360px;object-fit:contain;mix-blend-mode:normal;filter:saturate(1.12) contrast(1.04) drop-shadow(0 18px 24px rgba(0,42,120,.65)) drop-shadow(0 0 20px rgba(0,174,255,.2));animation:logo-float 5.5s ease-in-out infinite;transform-origin:50% 65%;will-change:transform}
.logo-halo{width:330px;height:330px;background:radial-gradient(circle,rgba(0,151,255,.46),rgba(0,86,255,.12) 42%,transparent 70%);filter:blur(54px);opacity:.38;animation:halo-breathe 4s ease-in-out infinite}
@keyframes logo-float{0%,100%{transform:translateY(0) rotateY(-2deg)}50%{transform:translateY(-15px) rotateY(3deg) scale(1.012)}}
@keyframes halo-breathe{50%{opacity:.55;transform:scale(1.08)}}
@keyframes wave-float{0%,100%{translate:0 0}50%{translate:-22px -14px}}
@keyframes stars-drift{to{background-position:41px 20px,46px 42px}}
@media(max-width:1000px){.hero-logo{width:285px;height:285px}.data-wave{width:90%;right:-22%}}
@media(max-width:760px){.hero:after{width:420px;height:420px;right:-30%;top:25%}.hero-stars{inset:45% -20% 5% 0}.data-wave{top:54%;width:130%;right:-55%;opacity:.33}.data-wave--front{top:67%}.hero-logo{width:260px;height:260px}}
@media(max-width:430px){.hero-logo{width:215px;height:215px}}
@media(prefers-reduced-motion:reduce){.hero-stars,.data-wave,.hero-logo,.logo-halo{animation:none}}