.hero{
  --pointer-x:72%;
  --pointer-y:32%;
  isolation:isolate;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(69,142,255,.18),transparent 29%),
    linear-gradient(118deg,#06183d 0%,#0a2b69 62%,#104c9c 100%);
  transition:background-position .8s ease-out;
}

.hero:before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 23% 42%,rgba(30,112,255,.18),transparent 24%),
    radial-gradient(circle at 77% 26%,rgba(79,161,255,.22),transparent 22%),
    radial-gradient(circle at 66% 83%,rgba(255,143,55,.09),transparent 19%);
  filter:blur(34px);
  animation:heroGlowDrift 15s ease-in-out infinite alternate;
}

.hero:after{
  width:540px;
  height:540px;
  right:-185px;
  top:-245px;
  z-index:0;
  opacity:.68;
  filter:blur(18px);
  animation:heroOrbFloat 12s ease-in-out infinite alternate;
}

.hero-grid{z-index:0;animation:gridBreathe 9s ease-in-out infinite alternate}

.hero-aurora{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.38;
  background:linear-gradient(105deg,transparent 26%,rgba(75,148,255,.12) 43%,rgba(255,255,255,.08) 50%,transparent 64%);
  transform:translateX(-45%);
  animation:auroraSweep 14s ease-in-out infinite;
}

.hero-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-sparkles i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d9ecff;
  opacity:0;
  box-shadow:0 0 7px 2px rgba(156,205,255,.55),0 0 18px 5px rgba(93,154,255,.18);
  animation:sparklePulse 5.8s ease-in-out infinite;
}
.hero-sparkles i:before,.hero-sparkles i:after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);border-radius:999px;opacity:.72}
.hero-sparkles i:before{width:1px;height:14px}.hero-sparkles i:after{width:14px;height:1px}
.hero-sparkles i:nth-child(1){left:7%;top:24%;animation-delay:.4s}
.hero-sparkles i:nth-child(2){left:18%;top:77%;animation-delay:3.2s;transform:scale(.7)}
.hero-sparkles i:nth-child(3){left:47%;top:18%;animation-delay:1.9s;transform:scale(.65)}
.hero-sparkles i:nth-child(4){left:54%;top:71%;animation-delay:4.1s;background:#ffbd78;color:#ffbd78;box-shadow:0 0 8px 2px rgba(255,152,63,.42)}
.hero-sparkles i:nth-child(5){left:88%;top:17%;animation-delay:2.7s;transform:scale(.8)}
.hero-sparkles i:nth-child(6){left:94%;top:69%;animation-delay:5s;transform:scale(.6)}
.hero-sparkles i:nth-child(7){left:64%;top:9%;animation-delay:4.8s;transform:scale(.55)}
.hero-sparkles i:nth-child(8){left:34%;top:88%;animation-delay:1.1s;transform:scale(.55)}

@keyframes heroGlowDrift{0%{transform:translate3d(-2%,-2%,0) scale(.96)}100%{transform:translate3d(6%,4%,0) scale(1.08)}}
@keyframes heroOrbFloat{0%{transform:translate3d(0,0,0) scale(.96)}100%{transform:translate3d(-36px,34px,0) scale(1.08)}}
@keyframes gridBreathe{0%{opacity:.09}100%{opacity:.15}}
@keyframes auroraSweep{0%,18%{transform:translateX(-55%);opacity:0}48%,62%{opacity:.42}82%,100%{transform:translateX(58%);opacity:0}}
@keyframes sparklePulse{0%,72%,100%{opacity:0}78%{opacity:.2;transform:scale(.65) rotate(0)}84%{opacity:.95;transform:scale(1.08) rotate(45deg)}91%{opacity:.12;transform:scale(.78) rotate(90deg)}}

@media(max-width:720px){
  .hero:before{filter:blur(45px);opacity:.75}
  .hero-aurora{opacity:.24}
  .hero-sparkles i:nth-child(n+6){display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero:before,.hero:after,.hero-grid,.hero-aurora,.hero-sparkles i{animation:none!important}
  .hero-aurora{display:none}
  .hero-sparkles i{opacity:.22}
}