.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-dot {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: var(--dot-color, rgba(240, 165, 0, 0.6));
  opacity: var(--dot-opacity, 0.7);
  box-shadow: 0 0 12px var(--glow-color, rgba(240, 165, 0, 0.45));
  mix-blend-mode: screen;
  will-change: transform;
}