.hero-section {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 55%, #eef1f8 100%);
}

.hero-bg {
    z-index: 0;
}

.hero-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-bg__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 65% at 50% 40%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0.15) 68%, transparent 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg__canvas {
        display: none;
    }

    .hero-bg__scrim {
        background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 253, 0.8) 100%);
    }
}

@media (max-width: 640px) {
    .hero-bg__scrim {
        background:
            radial-gradient(ellipse 90% 70% at 50% 38%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    }
}