/* Add after the header styles but before .header-content */
header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(147, 51, 234, 0.2) 0%, rgba(15, 15, 15, 0) 50%);
    transform: rotate(30deg);
    z-index: 1;
    animation: gradientMove 15s infinite alternate;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at right bottom, rgba(107, 33, 168, 0.3) 0%, rgba(15, 15, 15, 0) 70%);
    z-index: 1;
}

/* Floating shapes */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    z-index: 1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at center, #9333ea, transparent 70%);
    top: 10%;
    right: 15%;
    animation: float1 20s infinite alternate;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, #6b21a8, transparent 70%);
    bottom: 15%;
    left: 10%;
    animation: float2 15s infinite alternate;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at center, #8b5cf6, transparent 70%);
    top: 40%;
    left: 30%;
    animation: float3 18s infinite alternate;
}

.header-content {
    max-width: 800px;
    position: relative;
    z-index: 2;
}

@keyframes gradientMove {
    0% {
        transform: rotate(30deg) translateY(0);
    }
    100% {
        transform: rotate(30deg) translateY(-5%);
    }
}

@keyframes float1 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-30px, 30px);
    }
}

@keyframes float2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, -20px);
    }
}

@keyframes float3 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-20px, -20px);
    }
}