html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    @apply min-h-screen bg-gradient-to-br from-gray-50 to-white text-gray-800 antialiased;
}

.gradient-text {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.neon-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
    transition: box-shadow 0.3s ease;
}

.neon-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.25);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.2), transparent);
    margin: 4rem 0;
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
}

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

@keyframes subtle-pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.5;
    }
}

.header {
    @apply z-50 bg-white bg-opacity-70 backdrop-blur-sm p-6 rounded-b-xl fixed top-0 left-0 right-0;
}

.button-gradient {
    @apply inline-flex items-center justify-center p-0.5 mb-4 overflow-hidden text-sm font-semibold text-gray-900 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 hover:bg-gradient-to-l hover:text-white focus:ring-4 focus:ring-blue-200 transition-all duration-300 transform hover:scale-105;
}

.button-inner {
    @apply px-6 py-3 bg-white rounded-full group-hover:bg-opacity-0 text-gray-900 group-hover:text-white transition-all duration-300;
}

.card {
    @apply bg-white p-8 rounded-2xl shadow-lg border border-gray-100 neon-glow card-hover;
}

.footer {
    @apply bg-white bg-opacity-70 backdrop-blur-sm p-8 text-center text-gray-600 text-sm rounded-t-xl mt-16;
}