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

:root {
    --primary: #ce1212;
    --dark: #0a0a0a;
    --light: #f8f9fa;
    --gray: #64748b;
}

@layer base {
    body {
        font-family: 'Inter', sans-serif;
        @apply bg-white text-dark antialiased;
    }
    h1, h2, h3 {
        font-family: 'Montserrat', sans-serif;
        @apply tracking-tighter;
    }
}

/* Modern Components */
.glass-nav {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-gradient {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3), rgba(0,0,0,0.8));
}

.btn-modern {
    @apply px-8 py-4 bg-primary text-white font-bold uppercase tracking-widest text-xs transition-all duration-300 hover:bg-red-700 hover:shadow-[0_0_20px_rgba(206,18,18,0.4)] active:scale-95;
}

.card-hover {
    @apply transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border border-transparent hover:border-gray-100;
}

/* -------------------------------------------------------------------------- */
/* TAILWIND MODERN FORM DESIGN                                               */
/* -------------------------------------------------------------------------- */

.form-card {
    @apply bg-white p-8 md:p-12 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100;
}

.label-modern {
    @apply block text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500 mb-2 ml-1;
}

.input-modern {
    @apply w-full bg-gray-50 border-2 border-gray-200 rounded-2xl px-6 py-4 text-sm text-dark placeholder-gray-400 focus:bg-white focus:border-dark focus:ring-2 focus:ring-gray-200 outline-none transition-all duration-300;
}

.select-modern {
    @apply appearance-none cursor-pointer pr-12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1rem;
}

.btn-confirm {
    @apply w-full py-5 bg-primary text-white font-black uppercase tracking-[0.2em] text-xs rounded-2xl transition-all duration-300 hover:bg-dark hover:shadow-2xl active:scale-[0.98] flex items-center justify-center gap-3;
}

/* -------------------------------------------------------------------------- */

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.line-accent {
    @apply h-1 w-20 bg-primary mb-6;
}