:root { 
        --brand-green: #0e5d1f; 
        --brand-orange: #f2994a; 
        --brand-gold: #d4af37; 
    }

    /* 1. Header & Navbar Core */
    .main-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: #fff; }
    
    .navbar { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: space-between !important; 
        height: 80px; 
        padding: 0 5% !important; 
        flex-wrap: nowrap !important;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }

    .logo-container img { max-height: 60px; width: auto; display: block; transition: 0.3s; }

    /* 2. Desktop Navigation */
    .nav-links { display: flex; list-style: none; gap: 15px; margin: 0; padding: 0; }
    .nav-links > li { position: relative; }
    .nav-links a { 
        text-decoration: none; color: #444; font-weight: 700; font-size: 0.8rem;
        text-transform: uppercase; padding: 10px 5px; transition: 0.3s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--brand-green); }

    /* Dropdowns (Desktop) */
    .dropdown-menu, .submenu {
        position: absolute; background: #fff; min-width: 220px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 8px;
        padding: 10px 0; opacity: 0; visibility: hidden; transition: 0.3s;
        list-style: none; border: 1px solid #f0f0f0;
    }
    .dropdown-menu { top: 100%; left: 0; }
    .submenu { top: 0; left: 100%; }

    .nav-item.dropdown:hover > .dropdown-menu,
    .dropdown-menu li:hover > .submenu { opacity: 1; visibility: visible; }

    .dropdown-menu a { display: block; padding: 12px 20px; font-size: 0.85rem; border: none !important; }
    .dropdown-menu a:hover { background: #f9f9f9; color: var(--brand-green); }

    /* 3. Header Right (Badge & Toggle) */
    .header-right { 
        display: flex !important; 
        align-items: center !important; 
        gap: 12px; 
        flex-shrink: 0; 
    }
    
    .mode-badge { 
        display: inline-flex;
        align-items: center;
        padding: 6px 12px; 
        border-radius: 50px; 
        font-weight: 800; 
        font-size: 0.65rem;
        text-transform: uppercase; 
        border: 1px solid; 
        white-space: nowrap; 
        line-height: 1;
    }
    .premium-badge { background: linear-gradient(45deg, #d4af37, #b8860b); color: #fff; border: none !important; }
    
    .mobile-toggle { 
        display: none; 
        font-size: 1.5rem; 
        color: var(--brand-green); 
        cursor: pointer; 
        line-height: 1;
    }

    /* 4. Mobile Responsiveness (Unified) */
    @media (max-width: 1100px) {
        .mobile-toggle { display: block !important; }
        
        .nav-links {
            display: none; 
            position: absolute; 
            top: 80px; 
            left: 0; 
            width: 100%;
            background: #fff; 
            flex-direction: column; 
            gap: 0; 
            padding: 20px 0;
            max-height: calc(100vh - 80px); 
            overflow-y: auto; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            z-index: 9999;
        }
        
        .nav-links.active { display: flex !important; }
        
        .nav-links a { 
            padding: 15px 5%; 
            width: 100%; 
            display: block; 
            border-bottom: 1px solid #f5f5f5; 
        }
        
        /* Mobile Dropdown Logic */
        .dropdown-menu, .submenu { 
            position: static; 
            opacity: 1; 
            visibility: visible; 
            box-shadow: none; 
            padding-left: 20px; 
            display: none; 
        }
        
        .nav-item.dropdown.open > .dropdown-menu,
        .dropdown-item.open > .submenu { display: block; }

        .site-logo { max-height: 45px !important; }
        .mode-badge { padding: 5px 10px !important; font-size: 0.6rem !important; }
    }