/* Fluid particles fill the hero while staying behind its content and CTAs. */
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-container {
    z-index: 2;
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: normal;
    filter: blur(0.3px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 41%, rgba(0, 0, 0, 0.18) 49%, #000 61%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 41%, rgba(0, 0, 0, 0.18) 49%, #000 61%);
}

.hero-visual .server-illustration {
    z-index: 2;
}

@media (max-width: 768px) {
    /* Keep the full effect present but understated behind mobile copy. */
    .hero-particles {
        opacity: 0.58;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 62%, rgba(0, 0, 0, 0.35) 73%, #000 88%);
        mask-image: linear-gradient(to bottom, transparent 0%, transparent 62%, rgba(0, 0, 0, 0.35) 73%, #000 88%);
    }
}