.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.grad{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    #0a0a0c   0%,
    #101828  34%,
    #16386f  62%,
    #1f63c9  82%,
    #2F80ED 100%);
}


.grad-glow{
  position:absolute;
  left:50%;
  bottom:-20vh;
  width:120vw;
  height:90vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 70% at 50% 100%,
    #5ea8ff             0%,
    rgba(47,128,237,0.55) 35%,
    transparent          70%);
  filter:blur(30px);
}

.grain{
  position:absolute;
  inset:-50%;
  width:200%;
  height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.22;
  mix-blend-mode:soft-light;
  animation:grainShift 0.6s steps(2) infinite;
}

.grain.coarse{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  opacity:0.12;
  mix-blend-mode:overlay;
  animation-duration:0.9s;
}
@keyframes grainShift{
  0%  { transform:translate(0, 0); }
  100%{ transform:translate(-8%, 6%); }
}

@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
}