@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

/* Buttons */
.btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg px-6 py-3 transition-colors;
}

.btn-secondary {
    @apply bg-secondary-500 hover:bg-secondary-600 text-white font-medium rounded-lg px-6 py-3 transition-colors;
}

.btn-outline {
    @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-medium rounded-lg px-4 py-2 transition-colors;
}

.btn-white {
    @apply bg-white text-primary-500 hover:bg-gray-100 font-medium rounded-lg px-6 py-3 transition-colors;
}

.btn-transparent {
    @apply border border-white text-white hover:bg-white hover:bg-opacity-10 font-medium rounded-lg px-6 py-3 transition-colors;
}

.btn-primary-sm {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg px-4 py-2 text-sm transition-colors;
}

.btn-secondary-sm {
    @apply bg-secondary-500 hover:bg-secondary-600 text-white font-medium rounded-lg px-4 py-2 text-sm transition-colors;
}

.btn-purple-sm {
    @apply bg-purple-500 hover:bg-purple-600 text-white font-medium rounded-lg px-4 py-2 text-sm transition-colors;
}

/* Feature Cards */
.feature-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow;
}

.feature-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-white mb-4;
}

.feature-icon i {
    @apply w-6 h-6;
}

/* AI Output */
.ai-output {
    @apply text-gray-800 dark:text-gray-200;
}

/* CTA Section */
.cta-section {
    background-image: radial-gradient(circle at top right, rgba(109, 40, 217, 0.8), rgba(139, 92, 246, 0.9));
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-section h1 {
    animation: fadeIn 0.8s ease-out;
}
.hero-section p {
    animation: fadeIn 0.8s ease-out 0.2s forwards;
    opacity: 0;
}
.hero-section div:last-child {
    animation: fadeIn 0.8s ease-out 0.4s forwards;
    opacity: 0;
}