:root {
            --color-primary: #004aad;       
            --color-accent: #ff9800;        
            --color-accent-hover: #ffa726;
            --color-text-heading: #004aad;
            --color-text-body: #333; 
            --color-bg-light: #f8f8f8;
            --color-card-bg: #ffffff;
            --color-shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.15);
            --gradient-primary: linear-gradient(135deg, #004aad, #007bff);
            --gradient-accent: linear-gradient(135deg, #ff9800, #ff5722);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Montserrat', sans-serif; 
            background-color: var(--color-bg-light); 
            color: var(--color-text-body); 
            line-height: 1.7; 
            text-rendering: optimizeLegibility; 
            scroll-behavior: smooth; 
            font-size: 16px;
        }
        .container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
        
        /* RESPONSIVE FONT SCALING */
        h1 { font-size: clamp(1.8rem, 5vw, 2.2rem); }
        h2 { font-size: clamp(1.4rem, 4vw, 1.6rem); }
        h3 { font-size: clamp(1.2rem, 3vw, 1.3rem); }
        
        .interactive-btn { 
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; 
            border: none; cursor: pointer; will-change: transform, box-shadow, background; 
            outline: none;
        }
        .interactive-btn:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 10px 20px rgba(0, 74, 173, 0.4); 
        }
        .interactive-btn:focus { 
            outline: 2px solid var(--color-accent); 
            outline-offset: 2px;
        }
        .interactive-btn:active { 
            transform: scale(0.98); 
            box-shadow: none; 
            background: var(--gradient-accent); 
        }
        
        .hidden { display: none !important; }
        .text-center { text-align: center; }
        .mt-6 { margin-top: 1.5rem; }

        /* HEADER & NAVIGATION */
        .header { background: var(--color-primary); color: white; position: sticky; top: 0; z-index: 1000; box-shadow: var(--color-shadow-lg); }
        .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
        .logo-link { 
            color: white; 
            padding: 0.5rem 1rem; 
            font-weight: 700; 
            border-radius: 8px; 
            text-decoration: none; 
            background: transparent; 
            transition: background 0.3s ease; 
        }
        .logo-link:active { background: var(--gradient-accent); }
        
        /* HAMBURGER BUTTON */
        .menu-button { background: transparent; border-radius: 8px; padding: 0.5rem; }
        .menu-button:hover { background: rgba(255, 255, 255, 0.2); }
        .menu-button svg { width: 24px; height: 24px; stroke: white; }
        
        .dropdown-menu { 
            background: var(--color-primary); 
            position: absolute; 
            right: 1rem; 
            margin-top: 0.5rem; 
            width: 200px; 
            border-radius: 8px; 
            box-shadow: var(--color-shadow-lg); 
            z-index: 50; 
            opacity: 0; 
            transform: translateY(-10px); 
            transition: opacity 0.3s ease, transform 0.3s ease; 
        }
        .dropdown-menu.is-open { opacity: 1; transform: translateY(0); }
        .dropdown-link { 
            display: block; 
            padding: 0.75rem 1.25rem; 
            color: white; 
            text-decoration: none; 
            font-weight: 600; 
            transition: background 0.3s ease; 
        }
        .dropdown-link:hover { background: var(--gradient-accent); color: white; }

        /* FRONT IMAGE BANNER */
        .front-image-banner { 
            width: 100%; 
            overflow: hidden; 
            margin-bottom: 2rem; 
            box-shadow: var(--color-shadow-lg); 
            animation: fadeIn 1.2s ease-out; 
        }
        .front-image { width: 100%; height: 200px; object-fit: cover; display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
        /* CARD & CONTENT STYLES */
        .card { 
            background: var(--color-card-bg); 
            border-radius: 12px; 
            box-shadow: var(--color-shadow-lg); 
            padding: 1.5rem; 
            margin-bottom: 2rem; 
            opacity: 0; 
            transform: translateY(20px); 
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
        }
        .card.is-loaded { opacity: 1; transform: translateY(0); }
        .section-title { 
            font-size: clamp(1.4rem, 4vw, 1.6rem); 
            font-weight: 700; 
            margin-bottom: 1rem; 
            border-bottom: 3px solid var(--color-accent); 
            padding-bottom: 0.3rem; 
            display: inline-block; 
        }
        
        /* MODERN ACTION BUTTON */
        .action-button { 
            font-weight: 600; 
            padding: 0.8rem 2rem; 
            border-radius: 12px; 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
            color: white; 
            text-decoration: none; 
            width: 100%; 
            max-width: 320px; 
            font-size: clamp(0.95rem, 2.5vw, 1rem); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 0.5rem; 
            background: var(--gradient-primary); 
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 
        }
        .action-button:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 8px 20px rgba(0, 74, 173, 0.4); 
            background: var(--gradient-accent); 
        }
        .action-button:focus { 
            outline: 2px solid var(--color-accent); 
            outline-offset: 2px; 
        }
        .blue-btn { background: var(--gradient-primary); }
        .blue-btn:hover { background: var(--gradient-accent); }
        .accent-btn { background: var(--gradient-accent); }
        .accent-btn:hover { background: var(--gradient-primary); }
        
        /* ENHANCED FOLLOW BUTTON */
        .social-ig-btn { 
            background: transparent; 
            border: 2px solid transparent; 
            border-image: var(--gradient-accent) 1; 
            padding: 0.8rem 2rem; 
            border-radius: 12px; 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
            color: var(--color-primary); 
            font-weight: 700; 
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-image 0.3s ease, background 0.3s ease; 
        }
        .social-ig-btn:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4); 
            background: var(--gradient-accent); 
            color: white; 
            border-image: var(--gradient-primary) 1; 
        }
        .social-ig-btn svg { width: 24px; height: 24px; transition: transform 0.3s ease; }
        .social-ig-btn:hover svg { transform: scale(1.2); }

        .connect-buttons-container { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            gap: 1rem; 
            margin-top: 1.5rem; 
        }

        /* DEMO DISCLAIMER CARD */
        .demo-disclaimer-card { 
            background: #fff3e0; 
            border: 2px solid var(--color-accent); 
            padding: 1.5rem; 
            margin-bottom: 2rem; 
            color: #555; 
            animation: none; 
            transform: none; 
            opacity: 1; 
        }
        .demo-disclaimer-card .cta-inline-btn { 
            padding: 0.6rem 1.5rem; 
            margin-top: 1rem; 
            font-size: clamp(0.9rem, 2vw, 0.95rem); 
            max-width: 280px; 
        }

        /* STUDENT HIGHLIGHTS */
        .student-highlights-container { 
            display: flex; 
            flex-wrap: nowrap; 
            overflow-x: auto; 
            gap: 1rem; 
            padding-bottom: 1rem; 
            scroll-behavior: smooth; 
            -ms-overflow-style: none; 
            scrollbar-width: none; 
        }
        .student-highlights-container::-webkit-scrollbar { display: none; }
        .highlight-item { 
            flex: 0 0 140px; 
            text-align: center; 
            padding: 1rem; 
            border-radius: 10px; 
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); 
            transition: transform 0.3s ease; 
            background: var(--color-card-bg); 
        }
        .highlight-item:hover { transform: translateY(-5px); }
        .highlight-photo { 
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            object-fit: cover; 
            margin: 0 auto 0.5rem; 
            border: 3px solid var(--color-primary); 
        }

        /* GALLERY */
        .gallery-container { 
            display: flex; 
            flex-wrap: nowrap; 
            overflow-x: auto; 
            gap: 1rem; 
            padding-bottom: 1rem; 
            scroll-behavior: smooth; 
            -ms-overflow-style: none; 
            scrollbar-width: none; 
        }
        .gallery-container::-webkit-scrollbar { display: none; }
        .gallery-image { 
            width: 100%; 
            max-width: 300px; 
            height: auto; 
            border-radius: 8px; 
            object-fit: cover; 
        }

        /* FOOTER */
        .footer { 
            background: var(--color-primary); 
            color: white; 
            padding: 1.5rem 0; 
            margin-top: 2rem; 
            text-align: center; 
            font-size: clamp(0.8rem, 2vw, 0.9rem); 
        }
        .footer a { color: white; text-decoration: underline; font-weight: 600; }

        /* MEDIA QUERIES */
        @media (min-width: 640px) {
            .container { padding: 0 1.5rem; }
            .front-image { height: 300px; }
            .card { padding: 2rem; }
            .student-highlights-container, .gallery-container { 
                flex-wrap: wrap; 
                justify-content: center; 
                gap: 1.5rem; 
            }
            .highlight-item { flex: 0 0 160px; }
            .gallery-image { max-width: 350px; }
            .connect-buttons-container { flex-direction: row; justify-content: center; flex-wrap: wrap; }
        }

        @media (min-width: 1024px) {
            .container { padding: 0 2rem; }
            .front-image { height: 450px; }
            .navbar { padding: 1.5rem 0; }
            .student-highlights-container, .gallery-container { 
                display: grid; 
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
                gap: 2rem; 
            }
            .highlight-item { flex: 0 0 200px; }
            .gallery-image { max-width: 400px; }
        }

        @media (min-width: 1280px) {
            .front-image { height: 500px; }
            .highlight-item { flex: 0 0 220px; }
            .gallery-image { max-width: 450px; }
        }