body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

.glow {
  position: fixed;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}

.glow.one {
  width: 320px;
  height: 320px;
  background: #a855f7;
  top: 8%;
  left: 12%;
}

.glow.two {
  width: 360px;
  height: 360px;
  background: #8b5cf6;
  right: 8%;
  top: 18%;
}

.glow.three {
  width: 320px;
  height: 320px;
  background: #c084fc;
  left: 45%;
  bottom: 6%;
  transform: translateX(-50%);
}