/* ==================================================================
   4. ASSETS/CSS/STYLE.CSS - Enterprise Modern Design
   ================================================================== */
:root {
    --dark-blue: #0a192f;
    --charcoal: #1e2a3a;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --glass-bg: rgba(255,255,255,0.92);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: #1f2937; background: var(--white); scroll-behavior: smooth; }
.glass-nav { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 1rem 0; }
.navbar-brand { font-size: 1.5rem; letter-spacing: -0.5px; }
.btn-primary { background: var(--primary); border: none; padding: 0.6rem 1.5rem; border-radius: 8px; font-weight: 500; transition: all 0.2s; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37,99,235,0.2); }
.hero-section { min-height: 85vh; display: flex; align-items: center; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); padding-top: 80px; }
.slide-content h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; background: linear-gradient(135deg, #0a192f, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-modern { border: none; border-radius: 20px; transition: all 0.3s; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.02); backdrop-filter: blur(0); border: 1px solid rgba(0,0,0,0.05); }
.card-modern:hover { transform: translateY(-5px); box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1); }
.section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; }
.badge-featured { background: linear-gradient(135deg, #2563eb, #1e40af); color: white; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; }
.metric-card { text-align: center; padding: 1.5rem; border-radius: 24px; background: var(--white); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.05); }
.metric-number { font-size: 2.8rem; font-weight: 800; color: var(--primary); }
footer { background: #0f172a; color: #e2e8f0; }
footer a { color: #94a3b8; transition: 0.2s; }
footer a:hover { color: white; }
@media (max-width: 768px) { .hero-section { min-height: 70vh; text-align: center; } .slide-content h1 { font-size: 2rem; } .section-title { font-size: 1.8rem; } }