.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.32;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
  animation: orbFloat 14s ease-in-out infinite alternate;
}

.hero-orb-1 {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -120px;
  background: #7c3cff;
}

.hero-orb-2 {
  width: 460px;
  height: 460px;
  top: 20%;
  right: -140px;
  background: #00d4ff;
  animation-duration: 18s;
}

.hero-orb-3 {
  width: 420px;
  height: 420px;
  bottom: -180px;
  left: 38%;
  background: #ff2bd6;
  animation-duration: 22s;
}

@keyframes orbFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(40px, -30px, 0) scale(1.08);
  }
}

@media (max-width: 768px) {
  .hero-orb {
    filter: blur(60px);
    opacity: 0.26;
  }

  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    width: 280px;
    height: 280px;
  }
}

#tsparticles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
}