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

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(147, 51, 234, 0.5); }
    50% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.8); }
    100% { box-shadow: 0 0 5px rgba(147, 51, 234, 0.5); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes grid {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

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

.animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-gradient {
    background: linear-gradient(-45deg, #9333ea, #4f46e5, #2563eb, #7c3aed);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.animate-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid 20s linear infinite;
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow:hover {
    animation: glow 2s ease-in-out infinite;
}

.gradient-text {
    background: linear-gradient(45deg, #9333ea, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mobile-menu {
    animation: slideDown 0.3s ease-out;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #9333ea;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7c3aed;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-primary {
    @apply bg-purple-600 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300;
}

.btn-primary:hover {
    @apply bg-purple-700 transform scale-105;
}

.btn-secondary {
    @apply bg-transparent border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-semibold transition-all duration-300;
}

.btn-secondary:hover {
    @apply bg-purple-600 text-white transform scale-105;
}

.section-padding {
    @apply py-20;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold mb-8 text-center;
}

.section-subtitle {
    @apply text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto;
}

.features-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-8;
}

.stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-8;
}

@media (max-width: 768px) {
    .section-padding {
        @apply py-12;
    }
    
    .section-title {
        @apply text-2xl;
    }
    
    .section-subtitle {
        @apply text-lg;
    }
}

.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-600;
}

.bg-gradient {
    @apply bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900;
}

.shadow-custom {
    box-shadow: 0 10px 30px -5px rgba(147, 51, 234, 0.3);
}

.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-300;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-red-500 text-sm mt-1;
}

.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-300;
}

.nav-link.active {
    @apply text-white font-semibold;
}

.footer-link {
    @apply text-gray-400 hover:text-white transition-colors duration-300;
}

.footer-title {
    @apply text-white text-lg font-semibold mb-4;
}

.social-icon {
    @apply text-gray-400 hover:text-white transition-colors duration-300;
}

.spinner {
    @apply animate-spin h-5 w-5 text-white;
}

.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-700;
}

.alert-error {
    @apply bg-red-100 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 text-blue-700;
}