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

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

.feature-card {
    @apply bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition;
}

.feature-icon {
    @apply w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mb-4;
}

.feature-icon i {
    @apply text-white;
}

.timeline {
    @apply relative max-w-2xl mx-auto;
}

.timeline::before {
    content: '';
    @apply absolute left-5 top-0 bottom-0 w-0.5 bg-purple-500;
}

.timeline-step {
    @apply relative pl-16 pb-8;
}

.timeline-marker {
    @apply absolute left-0 w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center font-bold text-white;
}
.example-chip {
    @apply px-3 py-1 bg-gray-700 rounded-full text-sm hover:bg-gray-600 transition cursor-pointer flex items-center;
}
.step-icon {
    @apply transition-all duration-300;
}

.step-text {
    @apply transition-all duration-300;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}
#download-btn {
    @apply hover:scale-105 transform transition-transform;
}