/* css/style.css */
:root {
    /* Color Palette */
    --primary: #0F4C81;
    --secondary: #2EC4B6;
    --accent: #F4A261;
    --success: #22C55E;
    --dark: #0B1220;
    --light: #F9FBFF;
    
    /* Gradients */
    --grad-primary: linear-gradient(135deg, #0F4C81, #2EC4B6);
    --grad-accent: linear-gradient(135deg, #F4A261, #E76F51);
    --grad-dark: linear-gradient(135deg, #0B1220, #1A2A40);
    --grad-multi: linear-gradient(135deg, #0F4C81, #7B61FF, #00C6A7);
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Poppins', sans-serif;
    
    /* Utilities */
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-soft: 0 10px 30px rgba(15, 76, 129, 0.08);
    --shadow-hover: 0 20px 40px rgba(15, 76, 129, 0.15);
}

body {
    font-family: var(--font-body);
    background-color: var(--light);
    color: #4A5568;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--dark);
    font-weight: 700;
}

/* Utilities */
.text-primary-dark { color: var(--primary) !important; }
.text-accent { color: var(--accent) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-dark-custom { background-color: var(--dark); }
.bg-gradient-primary { background: var(--grad-primary); }
.bg-gradient-dark { background: var(--grad-dark); }
.font-outfit { font-family: var(--font-heading); }
.font-poppins { font-family: var(--font-body); }
.fs-sm { font-size: 0.875rem; }
.fs-xs { font-size: 0.75rem; }

/* Gradients */
.text-gradient {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-multi {
    background: var(--grad-multi);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism */
.bg-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* Premium Cards */
.premium-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
}
.premium-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

/* Buttons */
.btn-gradient-primary {
    background: var(--grad-primary);
    background-size: 200% auto;
    transition: 0.5s;
    border: none;
}
.btn-gradient-primary:hover {
    background-position: right center;
    color: #fff;
    transform: translateY(-2px);
}

/* Header & Nav */
.navbar { padding: 15px 0; transition: all 0.3s ease; }
.navbar.sticky-active {
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.dropdown-hover:hover > .dropdown-menu { display: block; margin-top: 0; }

/* Hero Section */
.hero-slider { height: 90vh; min-height: 600px; position: relative; }
.hero-slide { height: 100%; position: relative; background-size: cover; background-position: center; }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,18,32,0.9) 0%, rgba(15,76,129,0.6) 50%, rgba(46,196,182,0.2) 100%);
}
.hero-content { position: relative; z-index: 2; top: 50%; transform: translateY(-50%); }

/* Blob Shapes & Dividers */
.blob-shape {
    position: absolute; filter: blur(60px); z-index: 0; opacity: 0.4;
    border-radius: 50%;
}
.shape-1 { top: -100px; left: -100px; width: 300px; height: 300px; background: var(--primary); }
.shape-2 { bottom: -100px; right: -50px; width: 250px; height: 250px; background: var(--secondary); }

/* Footer */
.gradient-strip { height: 4px; width: 100%; background: var(--grad-multi); position: absolute; top: 0; left: 0; }
.social-icon { width: 40px; height: 40px; color: var(--light); text-decoration: none; }
.social-icon:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); }

/* Back to Top */
.back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
    opacity: 0; visibility: hidden; z-index: 999; text-decoration: none;
}
.back-to-top.active { opacity: 1; visibility: visible; }