@layer base {
    body { font-family: 'Noto Sans', sans-serif; }
    h1, h2, h3, h4 { font-family: 'Lexend', sans-serif; }
}
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
.hero-overlay { background: linear-gradient(180deg, rgba(12, 68, 179, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%); }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out both;
}

/* Modal Styles */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}