/* ══════════════════════════════════
   HERO AESTHETIC BACKGROUND
══════════════════════════════════ */

/* 1. Engineering Dot Grid Overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(var(--border-light) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

/* 2. Slow Moving Aurora / Mesh Gradient */
.hero-aurora {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    background: #FFFFFF;
}

.hero-aurora::before, .hero-aurora::after {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15; /* Subtle elegance, not overwhelming */
    animation: auroraFlow 20s ease-in-out infinite alternate;
}

.hero-aurora::before {
    background: var(--brand-teal);
    top: -20%;
    left: -10%;
    animation-delay: 0s;
}

.hero-aurora::after {
    background: var(--brand-navy);
    bottom: -10%;
    right: -10%;
    animation-direction: alternate-reverse;
    animation-delay: -5s;
}

@keyframes auroraFlow {
    0% { transform: translate(0%, 0%) scale(0.9); }
    50% { transform: translate(5%, 15%) scale(1.1); }
    100% { transform: translate(-10%, 10%) scale(1); }
}

/* Ensure hero content stays above background */
.hero-container {
    position: relative;
    z-index: 2;
}