:root {
            --bg-header: #D8D8D8;
            --text-sage: #647E68;
            --accent-red: #F96666;
            --deep-blue: #182747;
            --white: #ffffff;
        }

        body {
            font-family: 'Libre Franklin', sans-serif;
            background-color: var(--white);
            color: var(--text-sage);
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .heading-font {
            font-family: 'Libre Franklin', sans-serif;
            font-weight: 900;
            text-transform: uppercase;
            color: var(--deep-blue);
            letter-spacing: -0.02em;
        }

        /* Cinematic Scroll Reveals */
        .reveal-right {
            opacity: 0;
            transform: translateX(100px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-100px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-center {
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .active-reveal {
            opacity: 1;
            transform: translate(0, 0);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-header); }
        ::-webkit-scrollbar-thumb { background: var(--deep-blue); }

        /* Navigation Dropdown */
        #nav-menu {
            transition: transform 0.4s ease-in-out, opacity 0.3s ease;
            transform: translateY(-20px);
            pointer-events: none;
            opacity: 0;
        }
        #nav-menu.open {
            transform: translateY(0);
            pointer-events: auto;
            opacity: 1;
        }

        /* Hero Zoom Effect */
        .hero-bg {
            animation: slowZoom 20s infinite alternate;
        }
        @keyframes slowZoom {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        /* Belt Timeline Line */
        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--bg-header);
            transform: translateX(-50%);
            z-index: 0;
        }
        .timeline-progress {
            position: absolute;
            left: 50%;
            top: 0;
            width: 4px;
            background: var(--accent-red);
            transform: translateX(-50%);
            transition: height 0.5s ease;
            z-index: 1;
        }

        .btn-glow:hover {
            box-shadow: 0 0 20px var(--accent-red);
            background-color: var(--accent-red);
            color: white;
        }

        /* Pulse CTA */
        .pulse {
            animation: pulse-red 2s infinite;
        }
        @keyframes pulse-red {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 102, 102, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(249, 102, 102, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 102, 102, 0); }
        }

        /* Card Transitions */
        .karate-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .karate-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(24, 39, 71, 0.15);
        }

        /* Staggered Text Reveal */
        .stagger-text span {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
        }
        .stagger-active span {
            animation: textFadeUp 0.5s forwards;
        }
        @keyframes textFadeUp {
            to { opacity: 1; transform: translateY(0); }
        }

        /* Filter Tabs */
        .filter-btn.active {
            background-color: var(--accent-red);
            color: white;
            border-color: var(--accent-red);
        }

        /* Page Container */
        .view-section { display: none; }
        .view-section.active { display: block; }