/* ============================================================
   eu-premium.css — Premium Design System for EU Regional Pages
   Inspired by: UpScale Skills AI Course aesthetics
   ============================================================ */

:root {
    --eu-primary: #1e3a8a;
    --eu-secondary: #DC1E35;
    --eu-accent: #2EE6D6;
    --eu-bg-dark: #0f172a;
    --eu-glass: rgba(255, 255, 255, 0.05);
    --eu-glass-border: rgba(255, 255, 255, 0.1);
    --eu-shadow-premium: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Premium Typography */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.section-title {
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

/* Glassmorphism Cards */
.premium-card {
    background: var(--eu-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--eu-glass-border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--eu-shadow-premium);
}

.premium-card:hover {
    transform: translateY(-8px);
    border-color: var(--eu-accent);
    box-shadow: 0 20px 40px -10px rgba(46, 230, 214, 0.15);
}

/* Premium Gradients */
.bg-premium-gradient {
    background: linear-gradient(135deg, var(--eu-primary) 0%, #000 100%);
}

.text-gradient {
    background: linear-gradient(to right, #fff, var(--eu-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium Buttons */
.btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #fff;
    color: var(--eu-primary);
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    overflow: hidden;
    z-index: 1;
}

.btn-premium:hover {
    color: #fff;
    background: var(--eu-secondary);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 30, 53, 0.3);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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