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

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

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

.hover-scale {
    transition: transform 0.2s ease-in-out;
}

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

.shadow-custom {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Animation pour le scroll smooth */
html {
    scroll-behavior: smooth;
}

/* Style personnalisé pour les boutons */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300 inline-flex items-center justify-center;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-800 px-6 py-3 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-flex items-center justify-center;
}

/* Style pour les cartes */
.feature-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
}

/* Style pour le menu mobile */
.mobile-menu {
    @apply fixed inset-0 bg-white z-50 transform transition-transform duration-300;
}

.mobile-menu.active {
    @apply translate-x-0;
}

.mobile-menu:not(.active) {
    @apply translate-x-full;
}

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

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Timeline styles */
.timeline-dot {
    @apply absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-600 rounded-full;
}

.timeline-line {
    @apply absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-blue-200;
}

/* Beta program styles */
.beta-card {
    @apply bg-white/10 p-6 rounded-xl backdrop-blur-sm transition-all duration-300 hover:bg-white/20;
}

.beta-badge {
    @apply inline-block px-4 py-2 bg-blue-100 text-blue-800 rounded-full font-semibold;
}

/* Form styles */
input, select, textarea {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200;
}

/* Custom shadows */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

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

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

/* Background gradients */
.bg-gradient-primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.bg-gradient-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Pricing specific styles */
.pricing-card {
    @apply bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden;
}

.pricing-badge {
    @apply absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm;
}

/* Workflow specific styles */
.workflow-step {
    @apply relative bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
}

.workflow-connector {
    @apply absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200;
}

/* Responsive text utilities */
.text-responsive {
    @apply text-base md:text-lg lg:text-xl;
}

/* Custom animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

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

/* Animation classes */
.hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
}

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

/* Video styles */
.hero-video {
    @apply w-full max-w-lg mx-auto rounded-2xl shadow-xl overflow-hidden;
}

.hero-video video {
    @apply w-full h-full object-cover;
}

/* Optional: Animation pour l'apparition de la vidéo */
.hero-video {
    animation: fadeIn 0.5s ease-in-out;
}

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