:root {
    --primary: #1d5ca8;
    --primary-dark: #102b52;
    --primary-soft: #e8f0fb;
    --accent: #45aec4;
    --accent-soft: #e5f5f8;
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-muted: #edf2f8;
    --text: #182941;
    --text-muted: #5c6c82;
    --text-light: #8795a8;
    --border: #d9e2ed;
    --success: #17765f;
    --danger: #b94050;
    --shadow-sm: 0 3px 12px rgba(16, 43, 82, .06);
    --shadow: 0 14px 36px rgba(16, 43, 82, .11);
    --shadow-lg: 0 26px 64px rgba(16, 43, 82, .16);
    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 15px;
}

body {
    background: var(--bg);
    color: var(--text);
}

body::before {
    opacity: .36;
    background-image: linear-gradient(rgba(29, 92, 168, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 92, 168, .025) 1px, transparent 1px);
}

a { color: var(--primary); }

.navbar {
    background: rgba(255, 255, 255, .96);
    border-color: #e0e7f0;
    box-shadow: 0 4px 16px rgba(16, 43, 82, .05);
}

.navbar-brand { color: var(--primary-dark); }
.navbar-brand::before { background: var(--primary-dark); border-radius: 8px; }
.nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--primary-dark); background: var(--primary-soft); }

.home-hero {
    color: #fff;
    background: linear-gradient(112deg, #102b52 0%, #173e72 62%, #1d5ca8 100%);
    border: 0;
}

.home-hero h1 { color: #fff; }
.home-hero .home-eyebrow { color: #8ed9e7; }
.home-hero-copy > p:not(.home-eyebrow) { color: #d9e6f6; }
.home-hero .home-text-link { color: #fff; }
.home-stat { color: #d9e6f6; border-color: rgba(255, 255, 255, .22); }
.home-stat strong { color: #fff; }
.home-art-frame { border-color: rgba(255, 255, 255, .5); }
.home-art-caption { color: #fff; background: #1d5ca8; }
.home-hero-carousel { width: min(100%, 390px); margin: 0; border: 8px solid #fff; border-radius: 10px; transform: rotate(2deg); }
.home-hero-carousel .home-banner-slide > a,
.home-hero-carousel .home-banner-slide > div { aspect-ratio: 1.05; }
.home-hero-carousel .home-banner-slide img,
.home-hero-carousel .home-banner-slide video { object-fit: cover; }
.home-hero-carousel .home-banner-title { left: 16px; bottom: 16px; max-width: calc(100% - 32px); font-size: 14px; }
.home-hero-carousel .home-banner-controls { right: auto; bottom: 14px; left: 14px; }
.home-banner-placeholder { width: min(100%, 390px); aspect-ratio: 1.05; background: #fff; border: 8px solid rgba(255,255,255,.75); border-radius: 10px; transform: rotate(2deg); }
.home-section-carousel { width: min(100%, 1180px); margin: 0 auto 28px; border-radius: 8px; }
.home-section-carousel .home-banner-slide > a,
.home-section-carousel .home-banner-slide > div { aspect-ratio: 1180 / 330; }
.home-section-carousel .home-banner-title { background: rgba(16, 43, 82, .88); }

.home-section-heading h2,
.home-community h2,
.home-contact h2 { color: var(--primary-dark); }
.home-about { background: var(--primary-dark); }
.home-about-label { color: #8ed9e7; }
.home-community { background: #eaf1fa; }
.home-class-link,
.home-class-link:nth-child(3n),
.home-class-link:nth-child(3n+1),
.home-class-link:nth-child(3n+2) { background: #1d5ca8; }
.home-class-link:nth-child(3n+2) { background: #177d98; }
.home-class-link:nth-child(3n) { background: #29476f; }
.home-class-link:hover { background: var(--primary-dark); }

.hero-section,
.gallery-header {
    color: #fff;
    background: linear-gradient(115deg, #102b52, #1d5ca8);
    border-color: #183f72;
}

.hero-section h1,
.gallery-header h1 { color: #fff; }
.hero-section p,
.gallery-header p:last-child { color: #d9e6f6; }
.hero-section .home-eyebrow,
.gallery-header .home-eyebrow { color: #8ed9e7; }
.hero-section::after { border-color: rgba(142, 217, 231, .15); }

.admin-header { background: linear-gradient(112deg, #102b52, #194b88 78%, #2469ad); }
.admin-header p { color: #d4e2f3; }
.admin-quick-nav { border-color: var(--border); box-shadow: 0 4px 14px rgba(16, 43, 82, .06); }
.admin-quick-nav a:hover,
.admin-quick-nav a:focus-visible { color: var(--primary-dark); background: var(--primary-soft); }
.admin-overview,
.form-container,
.card,
.material-card { border-color: var(--border); }
.admin-overview-heading h2 { color: var(--primary-dark); }
.admin-metric { border-color: var(--primary); }
.admin-metric:nth-child(2),
.admin-metric:nth-child(3),
.admin-metric:nth-child(4) { border-color: var(--accent); }

.category-tile,
.category-tile:nth-child(3n),
.category-tile:nth-child(3n+1) { background: linear-gradient(140deg, #174982, #286ab0); }
.category-tile:nth-child(3n+2) { background: linear-gradient(140deg, #146f88, #2395ad); }
.category-tile:hover,
.category-tile.active { background: var(--primary-dark); }
.btn-filter:hover,
.btn-filter.active { background: var(--primary-dark); border-color: var(--primary-dark); }

.card,
.premium-card,
.form-container,
.material-card,
.gallery-item,
.review-item,
.review-form { border-radius: 8px; box-shadow: var(--shadow-sm); }
.section-title { border-color: var(--primary-soft); }
.card-title,
.section-title { color: var(--text); }
.modern-btn,
.submit-btn { color: #fff; background: var(--primary); border-radius: 7px; }
.modern-btn:hover,
.submit-btn:hover { color: #fff; background: var(--primary-dark); box-shadow: 0 8px 18px rgba(29, 92, 168, .2); }
.modern-btn.btn-outline { color: var(--primary); border-color: var(--primary); background: transparent; }
.modern-btn.btn-outline:hover { color: var(--primary-dark); background: var(--primary-soft); }
.modern-btn.btn-success { background: var(--success); }
.btn-primary { background: var(--primary-dark) !important; }
.modern-input,
.modern-select,
select.modern-input { color: var(--text); background: #fbfcfe; border-color: var(--border); border-radius: 7px; }
.modern-input:focus,
select.modern-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 92, 168, .14); }

.auth-page { background: linear-gradient(135deg, #e7eef8, #f7f9fc 58%, #eaf4f8); }
.auth-card,
.auth-container { border-color: var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.auth-title,
.auth-header h1 { color: var(--primary-dark); }
.auth-resource-links a { color: var(--primary); }
.course-header { background: linear-gradient(115deg, #e7eef8, #f9fbfd); border-color: var(--border); }
.course-header h1 { color: var(--primary-dark); }

.home-social-links a { transition: transform .2s ease, background .2s ease, color .2s ease; }
.home-social-links a:hover { color: var(--primary-dark); background: var(--primary-soft); transform: translateY(-3px); }
.home-social-icon { background: #1d5ca8; }
.home-social-links a:nth-child(2) .home-social-icon { background: #277aa7; }
.home-social-links a:nth-child(3) .home-social-icon { background: #d14855; }
.home-social-links a:nth-child(4) .home-social-icon { background: #24354c; }
.whatsapp-float { background: #148268; box-shadow: 0 8px 24px rgba(16, 43, 82, .24); }
.whatsapp-float::after { border-color: #148268; }
.whatsapp-float:hover { color: #fff; background: #0d684f; }
.home-banner-title { background: rgba(16, 43, 82, .9); border-color: #55c0d5; }
.admin-banner-edit { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.admin-banner-edit label { display:grid; gap:5px; color:var(--text-muted); font-size:11px; font-weight:700; }
.admin-banner-edit .modern-input { min-width:0; padding:8px 10px; font-size:12px; }
.admin-banner-edit button { justify-self:start; }

.review-form { border-top-color: var(--primary); }
.review-form h3,
.review-item-heading strong,
.admin-review-heading strong,
.gallery-item-copy h2 { color: var(--primary-dark); }
.review-notice { color: #0e6655; background: #e6f5ef; border-color: #c5e8da; }
.review-stars { color: #e0a42e; }
.review-status { color: #8b541a; background: #fff1dd; }
.review-status.is-published { color: #0e6655; background: #e6f5ef; }
.gallery-header { border: 0; }
.gallery-admin { border-color: var(--border); }
.gallery-item,
.gallery-preview-item { background: #fff; border-color: var(--border); }
.watermarked-player { background: #081626; }

@media (max-width: 600px) {
    .home-hero { padding-right: 22px; padding-left: 22px; }
    .home-hero-art { min-height: 0; }
    .home-hero-carousel { width: min(100%, 390px); }
    .home-hero-carousel .home-banner-slide > a,
    .home-hero-carousel .home-banner-slide > div { aspect-ratio: 1.2; }
    .home-section-carousel { width:calc(100% - 32px); margin:0 auto 22px; }
    .home-section-carousel .home-banner-slide > a,
    .home-section-carousel .home-banner-slide > div { aspect-ratio:16 / 9; }
    .admin-banner-edit { grid-template-columns:1fr; }
    .admin-banner-edit button { width:100%; }
    .review-layout { gap: 18px; }
    .gallery-page { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-social-links a,
    .star-rating label,
    .whatsapp-float,
    .whatsapp-float::after { animation: none; transition: none; }
}

.home-hero {
    isolation: isolate;
    display: flex;
    min-height: clamp(600px, calc(100vh - 74px), 820px);
    align-items: center;
    padding: 0;
    background: #102b52;
}

.home-hero::before,
.home-hero::after { content: none; }

.home-hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(120deg, #102b52, #2058a8);
}

.home-hero-background::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 20, 39, .94) 0%, rgba(9, 31, 59, .8) 42%, rgba(10, 30, 55, .23) 100%),
                linear-gradient(0deg, rgba(7, 20, 39, .34), transparent 50%);
    content: "";
    pointer-events: none;
}

.home-hero-background .home-hero-carousel {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.home-hero-carousel .home-banner-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero-carousel .home-banner-slide > a,
.home-hero-carousel .home-banner-slide > div {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
}

.home-hero-carousel .home-banner-slide img,
.home-hero-carousel .home-banner-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
}

.home-hero-carousel .home-banner-title { display: none; }
.home-hero-carousel .home-banner-controls { z-index: 2; right: 28px; bottom: 26px; left: auto; }

.home-hero-inner {
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    min-height: inherit;
    grid-template-columns: minmax(0, 1fr);
    padding: 76px 0;
}

.home-hero-copy { max-width: 660px; }
.home-hero-copy > p:not(.home-eyebrow) { max-width: 560px; }
.home-hero-proof {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 26px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}
.home-hero-proof strong { color: #fff; font: 700 24px 'Space Grotesk', sans-serif; }

@media (max-width: 600px) {
    .home-hero { min-height: 660px; }
    .home-hero-inner {
        width: calc(100% - 40px);
        min-height: inherit;
        padding: 54px 0 62px;
        align-items: flex-start;
    }
    .home-hero-copy { max-width: 100%; }
    .home-hero h1 { max-width: 530px; font-size: clamp(40px, 11vw, 58px); }
    .home-hero-copy > p:not(.home-eyebrow) { max-width: 440px; }
    .home-hero-carousel .home-banner-slide img,
    .home-hero-carousel .home-banner-slide video { object-position: 66% center; }
    .home-hero-background::after {
        background: linear-gradient(90deg, rgba(7, 20, 39, .9), rgba(9, 31, 59, .58) 70%, rgba(10, 30, 55, .24)),
                    linear-gradient(0deg, rgba(7, 20, 39, .5), transparent 70%);
    }
    .home-hero-carousel .home-banner-controls { right: 20px; bottom: 18px; }
}
