html {
    scroll-behavior: smooth
}

.gradient-bg {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #4f46e5 100%)
}

.gradient-text {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.pattern-grid {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")
}

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite
}