:root {
    --cas-white: #FFFFFF;
    --cas-mauve: #D6C9C5;
    --cas-navy: #0C2C47;
    --cas-yellow: #DA9B2B;
    --cas-green: #2E5749;
    --cas-orange: #BF512C;
    --cas-mint: #ABCBCA;
    --cas-body: #183344;
    --cas-soft: #F7F4F2;
}

html { scroll-behavior: smooth; }

body {
    color: var(--cas-body);
    background: var(--cas-white);
    font-family: "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, h4, h5, .brand-serif {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--cas-navy);
}

a { color: var(--cas-green); }
a:hover { color: var(--cas-orange); }

.site-header {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid rgba(12,44,71,.10);
}

.navbar-brand img {
    height: 58px;
    width: auto;
    object-fit: contain;
}

.navbar .nav-link {
    color: var(--cas-navy);
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--cas-orange); }

.btn-primary {
    --bs-btn-bg: var(--cas-green);
    --bs-btn-border-color: var(--cas-green);
    --bs-btn-hover-bg: #23483b;
    --bs-btn-hover-border-color: #23483b;
}

.btn-warning {
    --bs-btn-bg: var(--cas-yellow);
    --bs-btn-border-color: var(--cas-yellow);
    --bs-btn-color: var(--cas-navy);
    --bs-btn-hover-bg: #c88c22;
    --bs-btn-hover-border-color: #c88c22;
}

.btn-outline-primary {
    --bs-btn-color: var(--cas-green);
    --bs-btn-border-color: var(--cas-green);
    --bs-btn-hover-bg: var(--cas-green);
    --bs-btn-hover-border-color: var(--cas-green);
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(218,155,43,.25), transparent 25%),
        radial-gradient(circle at 15% 85%, rgba(171,203,202,.40), transparent 30%),
        linear-gradient(135deg, #fff 0%, #f8f4f1 100%);
    min-height: 680px;
    display: flex;
    align-items: center;
}

.hero-logo {
    max-width: 520px;
    width: 100%;
    filter: drop-shadow(0 24px 38px rgba(12,44,71,.12));
    border-radius: 2rem;
}

.eyebrow {
    color: var(--cas-orange);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 800;
    font-size: .82rem;
}

.display-title {
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: .98;
}

.section-pad { padding: 5rem 0; }
.bg-soft { background: var(--cas-soft); }
.bg-mint { background: rgba(171,203,202,.35); }
.bg-navy { background: var(--cas-navy); color: white; }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: white; }

.feature-card, .module-card, .plan-card, .dashboard-card {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(12,44,71,.08);
    height: 100%;
}

.icon-circle {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(218,155,43,.18);
    color: var(--cas-orange);
    font-size: 1.25rem;
}

.module-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cas-green);
    color: #fff;
    font-weight: 700;
}

.progress {
    --bs-progress-bg: rgba(171,203,202,.35);
    --bs-progress-bar-bg: var(--cas-yellow);
    height: .7rem;
}

.footer {
    background: #082238;
    color: rgba(255,255,255,.78);
}

.footer a { color: white; text-decoration: none; }

.form-control:focus, .form-select:focus {
    border-color: var(--cas-mint);
    box-shadow: 0 0 0 .25rem rgba(171,203,202,.32);
}

.badge-soft-success { background: rgba(46,87,73,.14); color: var(--cas-green); }
.badge-soft-warning { background: rgba(218,155,43,.18); color: #725010; }
.badge-soft-muted { background: rgba(214,201,197,.5); color: #615654; }

.lesson-sidebar {
    position: sticky;
    top: 100px;
}

.video-placeholder {
    aspect-ratio: 16/9;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--cas-navy), var(--cas-green));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-card {
    border-left: 5px solid var(--cas-yellow);
    border-radius: 1rem;
}

.admin-sidebar {
    min-height: calc(100vh - 72px);
    background: var(--cas-navy);
}

.admin-sidebar .nav-link {
    color: rgba(255,255,255,.78);
    border-radius: .75rem;
    margin-bottom: .25rem;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background: rgba(255,255,255,.12);
    color: white;
}

@media (max-width: 991.98px) {
    .hero { min-height: auto; padding: 5rem 0; }
    .navbar-brand img { height: 48px; }
    .lesson-sidebar { position: static; }
    .admin-sidebar { min-height: auto; }
}