.hero {
  position: relative;
  overflow: hidden;
}

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(7, 10, 24, 0.45) 0%, rgba(5, 6, 15, 0.92) 42%, #05060f 76%),
    linear-gradient(180deg, #070817 0%, #05060f 100%);
  pointer-events: none;
}

.hero-fx__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.82;
}

.hero-fx::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 18% 26%, rgba(31, 162, 255, 0.18), transparent 32%),
    radial-gradient(circle at 84% 34%, rgba(164, 69, 242, 0.16), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(236, 72, 153, 0.10), transparent 30%);
  filter: blur(28px);
  opacity: 0.74;
}

.hero-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(5, 6, 15, 0.82) 0%, rgba(5, 6, 15, 0.62) 24%, rgba(5, 6, 15, 0.18) 48%, rgba(5, 6, 15, 0) 72%),
    linear-gradient(90deg, rgba(5, 6, 15, 0.16), rgba(5, 6, 15, 0.56) 42%, rgba(5, 6, 15, 0.56) 58%, rgba(5, 6, 15, 0.16));
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content::before {
  content: "";
  position: absolute;
  inset: -68px -110px;
  background: radial-gradient(ellipse at center, rgba(5, 6, 15, 0.78) 0%, rgba(5, 6, 15, 0.44) 44%, rgba(5, 6, 15, 0) 74%);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-fx__canvas {
    opacity: 0.68;
  }

  .hero-content::before {
    inset: -46px -34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx__canvas {
    opacity: 0.58;
  }
}