/* Homepage hero background: a lightweight aurora treatment inspired by soft,
   flowing light trails. Kept subtle in the light theme and luminous in dark. */
.hero-band {
    isolation: isolate;
    background-color: #f8fafc;
    background-image:
        radial-gradient(ellipse at 13% 4%, rgba(99, 102, 241, .10), transparent 46%),
        radial-gradient(ellipse at 88% 92%, rgba(34, 211, 238, .08), transparent 40%);
}

html.dark .hero-band {
    background-color: #080912;
    background-image:
        radial-gradient(ellipse at 15% 2%, rgba(79, 70, 229, .22), transparent 48%),
        radial-gradient(ellipse at 90% 96%, rgba(8, 145, 178, .15), transparent 42%),
        linear-gradient(135deg, #080912 0%, #101024 52%, #080912 100%);
}

.hero-aurora {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .68;
    pointer-events: none;
}

html.dark .hero-aurora {
    opacity: .88;
    mix-blend-mode: screen;
}

.hero-band > .max-w-7xl {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .hero-aurora { opacity: .48; }
    html.dark .hero-aurora { opacity: .72; }
}