:root {
    --text-50: #f1f2f4;
    --text-100: #e2e6e9;
    --text-200: #c5ccd3;
    --text-300: #a9b3bc;
    --text-400: #8c99a6;
    --text-500: #6f7f90;
    --text-600: #596673;
    --text-700: #434c56;
    --text-800: #2c333a;
    --text-900: #16191d;
    --text-950: #0b0d0e;

    --background-50: #f0f2f5;
    --background-100: #e0e6eb;
    --background-200: #c2ccd6;
    --background-300: #a3b3c2;
    --background-400: #8599ad;
    --background-500: #667f99;
    --background-600: #52667a;
    --background-700: #3d4c5c;
    --background-800: #29333d;
    --background-900: #14191f;
    --background-950: #0a0d0f;

    --primary-50: #ebf2f9;
    --primary-100: #d8e5f3;
    --primary-200: #b0cbe8;
    --primary-300: #89b1dc;
    --primary-400: #6297d0;
    --primary-500: #3b7dc4;
    --primary-600: #2f649d;
    --primary-700: #234b76;
    --primary-800: #17324f;
    --primary-900: #0c1927;
    --primary-950: #060d14;

    --secondary-50: #edf2f7;
    --secondary-100: #dbe5f0;
    --secondary-200: #b7cbe1;
    --secondary-300: #93b1d2;
    --secondary-400: #6f98c3;
    --secondary-500: #4b7eb4;
    --secondary-600: #3c6590;
    --secondary-700: #2d4b6c;
    --secondary-800: #1e3248;
    --secondary-900: #0f1924;
    --secondary-950: #080d12;

    --accent-50: #ecf2f9;
    --accent-100: #d9e5f2;
    --accent-200: #b3cbe6;
    --accent-300: #8cb1d9;
    --accent-400: #6697cc;
    --accent-500: #407dbf;
    --accent-600: #336499;
    --accent-700: #264b73;
    --accent-800: #19324d;
    --accent-900: #0d1926;
    --accent-950: #060d13;
}

/* Base and Typography */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-800);
    background-color: #fff; /* Use a clean white background for readability */
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

footer {
    margin-top: auto;
}

a {
    color: var(--primary-500);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--primary-600);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header & Navbar */
.header {
    background-color: #fff;
    border-bottom: 1px solid var(--background-100);
}
.navbar {
    padding: 0.75rem 1rem;
}
.navbar-brand {
    font-size: 1.5rem;
    color: var(--text-900) !important;
}
.nav-link {
    color: var(--text-700) !important;
    font-weight: 500;
    transition: color 0.2s;
}
.nav-link.active, .nav-link:hover {
    color: var(--primary-500) !important;
}
.dropdown-menu {
    border-radius: 0.5rem;
    border-color: var(--background-100);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/assets/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}
.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

/* Cards */
.card {
    border-radius: 0.5rem;
    border: 1px solid var(--background-100);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Sections */
section {
    padding: 80px 0;
}
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--text-900);
}

/* Buttons */
.btn {
    border-radius: 0.25rem;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease-in-out;
}
.btn-primary {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    transform: translateY(-2px);
}
.btn-outline-primary {
    color: var(--primary-500);
    border-color: var(--primary-500);
}
.btn-outline-primary:hover {
    background-color: var(--primary-500);
    color: #fff;
}

/* Footer */
.footer {
    background-color: var(--background-50);
    color: var(--text-700);
    padding: 60px 0;
    border-top: 1px solid var(--background-100);
}
.footer h5 {
    font-weight: 700;
    color: var(--text-900);
}

/* Utility Overrides from previous design */
.bg-light {
    background-color: var(--background-50) !important;
}
.text-muted {
    color: var(--text-500) !important;
}
.shadow-sm {
     box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
.border-0 {
    border: 0 !important;
}