.hero-works-bg {
    position: relative !important;
    z-index: 1;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(-45deg, 
        #1a1a1a, #0f2318, #053651, #032841, 
        #021a30, #0d0d0d, #000000, #000000
    ) !important;
    background-size: 600% 600% !important;
    animation: gradientShift 45s ease infinite;
}

.hero-works-bg::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: 
        radial-gradient(ellipse 800px 400px at 20% 30%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 60%),
        radial-gradient(ellipse 600px 300px at 80% 20%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 25%, transparent 55%),
        radial-gradient(ellipse 500px 600px at 60% 10%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 70%);
    animation: floatWhiteLights 35s ease-in-out infinite;
    z-index: -1;
}

.hero-works-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle 300px at 25% 40%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%),
        radial-gradient(circle 200px at 75% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
        linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 55%, transparent 70%);
    background-size: 100% 100%, 100% 100%, 600% 600%;
    animation: moveWhiteSpots 25s ease-in-out infinite, shimmer 30s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes floatWhiteLights {
    0%, 100% { transform: translate(0px, 0px) rotate(0deg); opacity: 1; }
    20% { transform: translate(30px, -20px) rotate(72deg); opacity: 0.8; }
    40% { transform: translate(-15px, 35px) rotate(144deg); opacity: 0.9; }
    60% { transform: translate(25px, -10px) rotate(216deg); opacity: 0.7; }
    80% { transform: translate(-20px, -25px) rotate(288deg); opacity: 0.85; }
}

@keyframes moveWhiteSpots {
    0% { background-position: 0% 0%, 100% 0%, 0% 50%; }
    25% { background-position: 100% 25%, 0% 25%, 25% 75%; }
    50% { background-position: 75% 100%, 25% 100%, 100% 50%; }
    75% { background-position: 25% 75%, 75% 50%, 75% 25%; }
    100% { background-position: 0% 0%, 100% 0%, 0% 50%; }
}

@keyframes shimmer {
    0% { background-position: -300% -300%; opacity: 0.3; }
    50% { background-position: 300% 300%; opacity: 0.5; }
    100% { background-position: -300% -300%; opacity: 0.3; }
}