body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
}
#dynamic-background {
    position: fixed;
    inset: 0;
    z-index: -10;
    opacity: 1;
    transition: background 1.5s ease-in-out;
    overflow: hidden;
}
#dynamic-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}
.gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 25s infinite ease-in-out;
    mix-blend-mode: screen;
    will-change: transform;
}

.gradient-sphere:nth-child(1) {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.8) 0%, rgba(124, 58, 237, 0) 75%);
    width: 500px;
    height: 500px;
    top: 10%;
    left: 10%;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-sphere:nth-child(2) {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.7) 0%, rgba(59, 130, 246, 0) 75%);
    width: 700px;
    height: 700px;
    bottom: 15%;
    right: 15%;
    animation-delay: 4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-sphere:nth-child(3) {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, rgba(239, 68, 68, 0) 75%);
    width: 400px;
    height: 400px;
    top: 50%;
    left: 30%;
    animation-delay: 8s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-sphere:nth-child(4) {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.6) 0%, rgba(16, 185, 129, 0) 75%);
    width: 600px;
    height: 600px;
    bottom: 20%;
    left: 20%;
    animation-delay: 12s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(10%, 15%) scale(1.05);
    }
    50% {
        transform: translate(-5%, 20%) scale(0.95);
    }
    75% {
        transform: translate(15%, -10%) scale(1.1);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
a {
    text-decoration: none;
}

svg {
    vertical-align: middle;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .col-span-3 {
        grid-column: span 1 !important;
    }
}