:root {
            --primary: #D97A2B; /* Warm Academic Accent */
            --secondary: #281C59; /* Deep Intellectual Tone */
            --base: #FFFFFF;
        }

        body {
            font-family: 'Mulish', sans-serif;
            background-color: var(--base);
            color: var(--secondary);
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Editorial Typography */
        h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
        p { line-height: 1.8; font-weight: 400; opacity: 0.9; }

        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid rgba(40, 28, 89, 0.1);
            transition: opacity 0.3s ease;
        }
        header.scrolled { opacity: 0.9; backdrop-filter: blur(10px); }

        .btn-enroll {
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            transition: all 0.3s ease;
        }
        .btn-enroll:hover { background: var(--primary); color: white; }

        /* Hero */
        .hero-split { min-height: 90vh; display: flex; flex-wrap: wrap; }
        .hero-left { background: var(--secondary); color: white; flex: 0 0 60%; padding: 10% 8%; display: flex; flex-direction: column; justify-content: center; }
        .hero-right { flex: 0 0 40%; background: #f4f4f4; overflow: hidden; position: relative; }
        .hero-img { width: 100%; height: 100%; object-fit: cover; transition: transform 10s ease; }
        .hero-right:hover .hero-img { transform: scale(1.1); }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(30px); transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .line-draw { height: 1px; background: white; width: 0; transition: width 1.5s ease; }
        .line-draw.active { width: 100%; }

        /* Grids */
        .editorial-card { 
            background: rgba(255,255,255,0.05); 
            padding: 3rem; 
            transition: all 0.4s ease; 
            border: 1px solid rgba(255,255,255,0.1);
        }
        .editorial-card:hover { background: white; color: var(--secondary); transform: translateY(-10px); }

        /* Split Fixed Section */
        .split-fixed-container { display: flex; position: relative; }
        .split-text { width: 60%; padding: 10% 8%; }
        .split-image-container { width: 40%; height: 100vh; position: sticky; top: 0; overflow: hidden; }

        /* Mobile Nav Overlay */
        #mobile-nav {
            position: fixed;
            inset: 0;
            background: var(--secondary);
            z-index: 2000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }

        /* Course Detail Modal */
        #modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(40, 28, 89, 0.8);
            backdrop-blur: 8px;
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .modal-content {
            background: white;
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 4rem;
            position: relative;
        }

        @media (max-width: 1024px) {
            .hero-left, .hero-right { flex: 0 0 100%; min-height: 50vh; }
            .split-image-container { display: none; }
            .split-text { width: 100%; }
        }