/* Variant B, "Magnetic constellation": a canvas of coloured dots behind the hero content. */
.hero { position: relative; isolation: isolate; }
.hero-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 700px) { .hero-dots { opacity: 0.55; } }