/**
 * Homepage Menu Navigation - Optimized Styles
 * Version: 2.2.6 - Fixed Mobile Navigation Scroll Animations with !important Rules
 * Glassmorphism & Minimalist Design + Midnight Blue Dark Mode
 */

/* ===== CSS VARIABLES ===== */
:root {
    --hmn-primary: #007AFF;
    --hmn-primary-dark: #0056CC;
    --hmn-text: #1F2937;
    --hmn-text-light: #6B7280;
    --hmn-bg: rgba(255, 255, 255, 0.8);
    --hmn-bg-solid: #FFFFFF;
    --hmn-border: rgba(0, 0, 0, 0.08);
    --hmn-shadow: rgba(0, 0, 0, 0.1);
    --hmn-blur: 20px;
    --hmn-transition: cubic-bezier(0.4, 0, 0.2, 1);
    --hmn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== DARK THEME VARIABLES ===== */
body.dark-theme {
    --hmn-primary: #0A84FF;
    --hmn-primary-dark: #0066CC;
    --hmn-text: #FFFFFF;
    --hmn-text-light: #98989D;
    --hmn-bg: rgba(13, 20, 40, 0.88);
    --hmn-bg-solid: #000000;
    --hmn-border: rgba(37, 99, 235, 0.2);
    --hmn-shadow: rgba(0, 0, 0, 0.3);
    background: #000000;
    color: var(--hmn-text);
}

/* ===== SMOOTH TRANSITIONS ===== */
body, body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.theme-transitioning, body.theme-transitioning * {
    transition: none !important;
}

/* ===== DESKTOP MENU ===== */
@media (min-width: 769px) {
    .hmn-mobile-menu { display: none !important; }
    
    .hmn-desktop-menu {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        width: calc(100% - 80px);
        max-width: 1400px;
        transition: all 0.3s var(--hmn-transition), 
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        visibility: visible;
    }
    
    .hmn-desktop-menu.hmn-scrolled {
        top: 10px;
        width: calc(100% - 40px);
    }
    
    .hmn-desktop-menu.hmn-scrolled .hmn-menu-container {
        padding: 18px 32px;
    }
    
    .hmn-desktop-menu.hmn-scrolled .hmn-logo {
        height: 80px !important;
    }
    
    /* Smooth fade and slide animations for desktop menu */
    .hmn-desktop-menu.hmn-nav-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-30px);
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hmn-desktop-menu.hmn-nav-showing {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: all;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hmn-menu-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 32px;
        background: var(--hmn-bg);
        backdrop-filter: blur(var(--hmn-blur));
        -webkit-backdrop-filter: blur(var(--hmn-blur));
        border: 1px solid var(--hmn-border);
        border-radius: 16px;
        box-shadow: 0 8px 32px var(--hmn-shadow), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
        transition: all 0.3s var(--hmn-transition);
    }
    
    body.dark-theme .hmn-menu-container {
        background: rgba(13, 20, 40, 0.88);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(37, 99, 235, 0.2);
        box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15), 0 1px 0 rgba(37, 99, 235, 0.1) inset;
    }
    
    /* Logo Section (Left) */
    .hmn-logo-section { 
        flex-shrink: 0; 
        display: flex; 
        align-items: center; 
        min-width: 120px;
    }
    .hmn-logo-link { 
        display: flex; 
        align-items: center; 
        text-decoration: none; 
        transition: transform 0.2s ease;
    }
    .hmn-logo-link:hover { 
        transform: scale(1.02); 
    }
    .hmn-logo { 
        height: 80px !important; 
        width: auto; 
        object-fit: contain; 
        display: block; 
        transition: height 0.3s ease;
    }
    .hmn-logo-light { display: block; }
    .hmn-logo-dark { display: none; }
    body.dark-theme .hmn-logo-light { display: none; }
    body.dark-theme .hmn-logo-dark { display: block; }
    
    /* Navigation Section (Center) */
    .hmn-nav-section { 
        flex: 1; 
        display: flex; 
        justify-content: center; 
        min-width: 0;
    }
    .hmn-nav-list { 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        flex-wrap: wrap;
        justify-content: center;
    }
    .hmn-nav-item { position: relative; }
    
    .hmn-nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        color: var(--hmn-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        border-radius: 10px;
        transition: color 0.2s ease, background-image 0.2s ease;
        position: relative;
        background: none;
    }
    
    .hmn-nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(-50%);
        border-radius: 1px;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    .hmn-nav-link:hover { 
        background: none; 
        color: var(--hmn-primary); 
    }
    
    .hmn-nav-link:hover::after {
        width: 80%;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-nav-link { 
        color: rgba(255, 255, 255, 0.9); 
    }
    
    body.dark-theme .hmn-nav-link::after {
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
    }
    
    body.dark-theme .hmn-nav-link:hover { 
        background: none; 
        color: rgba(96, 165, 250, 1); 
    }
    
    .hmn-nav-link.hmn-active { 
        background: none; 
        color: var(--hmn-primary); 
        font-weight: 600; 
    }
    
    .hmn-nav-link.hmn-active::after {
        width: 90%;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-nav-link.hmn-active { 
        background: none; 
        color: rgba(96, 165, 250, 1); 
    }
    
    body.dark-theme .hmn-nav-link.hmn-active::after {
        width: 90%;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    .hmn-nav-arrow { font-size: 10px; transition: transform 0.2s var(--hmn-transition); }
    .hmn-nav-item.hmn-mega-active .hmn-nav-arrow { transform: rotate(180deg); }
    
    /* ===== ACTIONS SECTION (Right) ===== */
    .hmn-actions-section { 
        flex-shrink: 0; 
        display: flex; 
        align-items: center; 
        gap: 8px;
        min-width: 0;
    }
    
    .hmn-theme-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid var(--hmn-border);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        padding: 0;
    }
    
    .hmn-theme-toggle:hover { background: rgba(0, 122, 255, 0.08); border-color: var(--hmn-primary); transform: scale(1.05); }
    body.dark-theme .hmn-theme-toggle { border-color: rgba(37, 99, 235, 0.35); }
    body.dark-theme .hmn-theme-toggle:hover { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.5); }
    .hmn-theme-toggle:active { transform: scale(0.95); }
    
    .hmn-theme-icon {
        position: absolute;
        font-size: 18px;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body:not(.dark-theme) .hmn-theme-toggle .sun-icon { opacity: 0; transform: rotate(-180deg); pointer-events: none; }
    body:not(.dark-theme) .hmn-theme-toggle .moon-icon { opacity: 1; transform: rotate(0deg); color: var(--hmn-primary); }
    body.dark-theme .hmn-theme-toggle .sun-icon { opacity: 1; transform: rotate(0deg); color: #FDB813; }
    body.dark-theme .hmn-theme-toggle .moon-icon { opacity: 0; transform: rotate(180deg); pointer-events: none; }
    
    .hmn-theme-toggle.theme-switching { animation: themeSwitch 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    @keyframes themeSwitch {
        0%, 100% { transform: scale(1) rotate(0deg); }
        25% { transform: scale(1.1) rotate(-10deg); }
        75% { transform: scale(1.1) rotate(10deg); }
    }
    
    /* ===== DESKTOP REGISTER & LOGIN BUTTONS ===== */
    .hmn-desktop-register-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        color: #FFFFFF !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    .hmn-desktop-register-button:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
        color: #FFFFFF !important;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    .hmn-desktop-login-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(0, 122, 255, 0.1);
        color: var(--hmn-primary) !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
        border: 1px solid rgba(0, 122, 255, 0.3);
        cursor: pointer;
        position: relative;
    }
    
    .hmn-desktop-login-button:hover {
        transform: translateY(-1px);
        background: rgba(0, 122, 255, 0.15);
        color: var(--hmn-primary) !important;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
        border-color: rgba(0, 122, 255, 0.5);
    }
    
    body.dark-theme .hmn-desktop-register-button {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-desktop-register-button:hover {
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-desktop-login-button {
        background: rgba(37, 99, 235, 0.1);
        color: rgba(96, 165, 250, 1) !important;
        border-color: rgba(37, 99, 235, 0.3);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }
    
    body.dark-theme .hmn-desktop-login-button:hover {
        background: rgba(37, 99, 235, 0.15);
        color: rgba(96, 165, 250, 1) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        border-color: rgba(37, 99, 235, 0.5);
    }

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    
    /* Large Desktop (1400px+) */
    @media (min-width: 1400px) {
        .hmn-desktop-menu {
            width: calc(100% - 120px);
            max-width: 1600px;
        }
        
        .hmn-menu-container {
            gap: 40px;
            padding: 20px 40px;
        }
        
        .hmn-logo { height: 90px !important; }
        .hmn-desktop-menu.hmn-scrolled .hmn-logo { height: 85px !important; }
    }
    
    /* Medium Desktop (1024px - 1399px) */
    @media (min-width: 1024px) and (max-width: 1399px) {
        .hmn-desktop-menu {
            width: calc(100% - 60px);
        }
        
        .hmn-menu-container {
            gap: 16px;
            padding: 16px 24px;
        }
        
        .hmn-logo { height: 75px !important; }
        .hmn-desktop-menu.hmn-scrolled .hmn-logo { height: 70px !important; }
        
        .hmn-desktop-register-button,
        .hmn-desktop-login-button {
            padding: 6px 12px;
            font-size: 12px;
        }
    }
    
    /* Small Desktop / Large Tablet (769px - 1023px) */
    @media (min-width: 769px) and (max-width: 1023px) {
        .hmn-desktop-menu {
            width: calc(100% - 40px);
            top: 15px;
        }
        
        .hmn-menu-container {
            gap: 12px;
            padding: 14px 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .hmn-logo-section {
            order: 1;
            flex-basis: 100%;
            justify-content: center;
            margin-bottom: 8px;
        }
        
        .hmn-nav-section {
            order: 2;
            flex-basis: 100%;
            justify-content: center;
        }
        
        .hmn-actions-section {
            order: 3;
            flex-basis: 100%;
            justify-content: center;
            gap: 6px;
        }
        
        .hmn-logo { height: 60px !important; }
        .hmn-desktop-menu.hmn-scrolled .hmn-logo { height: 55px !important; }
        
        .hmn-desktop-register-button,
        .hmn-desktop-login-button {
            padding: 6px 10px;
            font-size: 11px;
            flex: 1;
            max-width: 120px;
        }
        
        .hmn-nav-link {
            padding: 8px 12px;
            font-size: 13px;
        }
    }
    
    /* Tablet View (481px - 1023px) - Show Mobile Menu */
    @media (min-width: 481px) and (max-width: 1023px) {
        .hmn-desktop-menu { 
            display: none !important; 
            visibility: hidden !important;
        }
        .hmn-mobile-menu { 
            display: block !important; 
            visibility: visible !important;
        }
        
        /* Adjust mobile island for tablets */
        .hmn-mobile-navbar {
            top: 20px;
            left: 20px;
            right: 20px;
            border-radius: 25px;
            display: block !important;
            visibility: visible !important;
        }
        
        .hmn-mobile-navbar-container {
            padding: 20px 28px;
            min-height: 85px;
        }
        
        .hmn-mobile-logo {
            height: 65px !important;
        }
    }
    
    /* Small Mobile (320px - 480px) - Compact Island */
    @media (max-width: 480px) {
        .hmn-mobile-navbar {
            top: 10px;
            left: 10px;
            right: 10px;
            border-radius: 15px;
        }
        
        .hmn-mobile-navbar-container {
            padding: 14px 18px;
            min-height: 70px;
        }
        
        .hmn-mobile-logo {
            height: 50px !important;
        }
        
        .hmn-mobile-register-button {
            padding: 6px 8px;
            font-size: 10px;
        }
    }

    /* ===== CTA BUTTON ===== */
    .hmn-cta-section { flex-shrink: 0; }
    
    .hmn-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--hmn-primary), var(--hmn-primary-dark));
        color: #FFFFFF !important;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
        transition: box-shadow 0.2s ease;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        will-change: auto;
    }
    
    .hmn-cta-button:hover { box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3); }
    body.dark-theme .hmn-cta-button { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
    body.dark-theme .hmn-cta-button:hover { box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); }
    .hmn-cta-button:active { transform: translateY(0); }
    
    /* ===== MEGA MENU ===== */
    .hmn-mega-menu-container {
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 80px);
        max-width: 1400px;
        z-index: 9999;
        pointer-events: none;
    }
    
    .hmn-mega-menu {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--hmn-bg);
        backdrop-filter: blur(var(--hmn-blur));
        -webkit-backdrop-filter: blur(var(--hmn-blur));
        border: 1px solid var(--hmn-border);
        border-radius: 16px;
        box-shadow: 0 20px 60px var(--hmn-shadow), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s var(--hmn-spring);
        pointer-events: none;
    }
    
    body.dark-theme .hmn-mega-menu {
        background: rgba(13, 20, 40, 0.88);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(37, 99, 235, 0.2);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(37, 99, 235, 0.1) inset;
    }
    
    .hmn-mega-menu.hmn-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }
    
    .hmn-mega-menu-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; padding: 32px; }
    .hmn-mega-column { min-width: 0; }
    .hmn-mega-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--hmn-text-light); margin: 0 0 16px 0; }
    body.dark-theme .hmn-mega-title { color: rgba(96, 165, 250, 1); }
    
    .hmn-mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    
    .hmn-mega-link {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        border-radius: 10px;
        text-decoration: none;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    
    .hmn-mega-link:hover { background: rgba(0, 122, 255, 0.06); transform: translateX(3px); }
    body.dark-theme .hmn-mega-link:hover { background: rgba(37, 99, 235, 0.15); }
    
    .hmn-mega-icon { width: 20px; height: 20px; font-size: 16px; color: var(--hmn-primary); flex-shrink: 0; margin-top: 2px; }
    body.dark-theme .hmn-mega-icon { color: rgba(96, 165, 250, 1); }
    
    .hmn-mega-content { flex: 1; min-width: 0; }
    .hmn-mega-label { display: block; font-size: 14px; font-weight: 600; color: var(--hmn-text); margin-bottom: 2px; }
    body.dark-theme .hmn-mega-label { color: rgba(255, 255, 255, 0.95); }
    .hmn-mega-desc { display: block; font-size: 12px; color: var(--hmn-text-light); line-height: 1.4; }
    body.dark-theme .hmn-mega-desc { color: rgba(255, 255, 255, 0.6); }
}

/* ===== MOBILE MENU ===== */
@media (max-width: 1023px) {
    .hmn-desktop-menu { display: none !important; }
    
    .hmn-mobile-menu {
        display: block !important;
    }
    
    body.hmn-mobile-open { 
        overflow: hidden !important; 
        /* Position and top are handled by JavaScript to prevent scroll jump */
    }
    
    /* Mobile Navigation Bar (Island Style) */
    .hmn-mobile-navbar {
        position: fixed;
        top: 15px;
        left: 15px;
        right: 15px;
        z-index: 10000;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
        transition: all 0.3s ease;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    body.dark-theme .hmn-mobile-navbar {
        background: #1F2937;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    }
    
    .hmn-mobile-navbar.hmn-hidden { 
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
    }
    
    /* Mobile navbar smooth animations */
    .hmn-mobile-navbar {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        visibility: visible;
    }
    
    .hmn-mobile-navbar.hmn-nav-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hmn-mobile-navbar.hmn-nav-showing {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: all;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hmn-mobile-navbar-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        min-height: 80px;
        position: relative;
        gap: 0;
        border-radius: 20px;
    }
    
    /* Logo - Center positioning */
    .hmn-mobile-navbar-container .hmn-mobile-logo-section {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    /* Logo Section */
    .hmn-mobile-logo-section {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    
    .hmn-mobile-logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: none;
    }
    
    .hmn-mobile-logo-link:hover {
        transform: none;
    }
    
    .hmn-mobile-logo {
        height: 60px !important;
        width: auto;
        object-fit: contain;
        display: block;
        transition: height 0.3s ease;
        margin: 0;
    }
    
    .hmn-mobile-logo.hmn-logo-light {
        display: block;
    }
    
    .hmn-mobile-logo.hmn-logo-dark {
        display: none;
    }
    
    body.dark-theme .hmn-mobile-logo.hmn-logo-light {
        display: none;
    }
    
    body.dark-theme .hmn-mobile-logo.hmn-logo-dark {
        display: block;
    }
    
    /* Navigation Section */
    .hmn-mobile-nav-section {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .hmn-mobile-nav-list {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
    
    .hmn-mobile-nav-item {
        position: relative;
        flex-shrink: 0;
    }
    
    .hmn-mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        color: var(--hmn-text);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        border-radius: 15px;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        white-space: nowrap;
    }
    
    .hmn-mobile-nav-link:hover {
        background: rgba(0, 122, 255, 0.02);
        color: var(--hmn-primary);
        transform: none;
        box-shadow: none;
    }
    
    .hmn-mobile-nav-link.hmn-active {
        background: rgba(0, 122, 255, 0.15);
        color: var(--hmn-primary);
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
    }
    
    /* Actions Section - Right positioning */
    .hmn-mobile-actions-section {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        justify-content: flex-end;
    }
    
    .hmn-mobile-cta-button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: linear-gradient(135deg, var(--hmn-primary), var(--hmn-primary-dark));
        color: #FFFFFF !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: 25px;
        white-space: nowrap;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        min-height: 44px;
        border: none;
        cursor: pointer;
    }
    
    .hmn-mobile-cta-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
    }
    
    /* Mobile Login Button Styling */
    .hmn-mobile-login-button {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        background: rgba(0, 122, 255, 0.1);
        color: #007aff !important;
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        border-radius: 15px;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
        min-height: 32px;
        border: 1px solid rgba(0, 122, 255, 0.3);
        cursor: pointer;
        position: relative;
    }
    
    .hmn-mobile-login-button:hover {
        transform: translateY(-1px);
        background: rgba(0, 122, 255, 0.15);
        color: #007aff !important;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
        border-color: rgba(0, 122, 255, 0.5);
    }
    
    body.dark-theme .hmn-mobile-login-button {
        background: rgba(37, 99, 235, 0.1);
        color: rgba(96, 165, 250, 1) !important;
        border-color: rgba(37, 99, 235, 0.3);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }
    
    body.dark-theme .hmn-mobile-login-button:hover {
        background: rgba(37, 99, 235, 0.15);
        color: rgba(96, 165, 250, 1) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        border-color: rgba(37, 99, 235, 0.5);
    }

    /* Записване Button Specific Styling */
    .hmn-mobile-register-button {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        color: #FFFFFF !important;
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        border-radius: 15px;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        min-height: 32px;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    @keyframes gradientShift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    
    .hmn-mobile-register-button:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
        color: #FFFFFF !important;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-mobile-register-button {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-mobile-register-button:hover {
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    .hmn-mobile-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        border-radius: 12px;
        transition: background-color 0.2s ease;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Remove hover effects from hamburger toggle */
    .hmn-mobile-toggle:hover {
        background: none !important;
        transform: none !important;
    }
    
    .hmn-mobile-toggle:hover .hmn-hamburger span {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    .hmn-mobile-toggle:active {
        background: none !important;
        transform: none !important;
    }
    
    .hmn-mobile-toggle:focus {
        outline: none !important;
        background: none !important;
    }
    
    .hmn-mobile-toggle .hmn-hamburger {
        width: 20px;
        height: 16px;
        position: relative;
        display: block;
    }
    
    .hmn-mobile-toggle .hmn-hamburger span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transition: all 0.25s var(--hmn-spring);
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    .hmn-mobile-toggle .hmn-hamburger span:nth-child(1) {
        top: 0px;
    }
    
    .hmn-mobile-toggle .hmn-hamburger span:nth-child(2) {
        top: 7px;
    }
    
    .hmn-mobile-toggle .hmn-hamburger span:nth-child(3) {
        top: 14px;
    }
    
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
    }
    
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(2) {
        opacity: 0;
    }
    
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(3) {
        top: 7px;
        transform: rotate(-45deg);
    }
    
    
    .hmn-mobile-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    
    .hmn-hamburger { width: 24px; height: 20px; position: relative; display: block; }
    .hmn-hamburger span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transition: all 0.25s var(--hmn-spring);
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    .hmn-hamburger span:nth-child(1) { top: 0px; }
    .hmn-hamburger span:nth-child(2) { top: 9px; }
    .hmn-hamburger span:nth-child(3) { top: 18px; }
    
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(1) { top: 9px; transform: rotate(45deg); }
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(2) { opacity: 0; }
    .hmn-mobile-toggle.hmn-active .hmn-hamburger span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
    
    .hmn-mobile-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 60px !important;
        display: flex;
        align-items: center;
    }
    
    .hmn-mobile-logo img { height: 100%; width: auto; }
    
    /* ===== MOBILE THEME TOGGLE ===== */
    .hmn-mobile-actions { display: flex; align-items: center; gap: 8px; }
    
    .hmn-mobile-theme-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    
    .hmn-mobile-theme-toggle:active { transform: scale(0.92); background: rgba(0, 122, 255, 0.1); }
    body.dark-theme .hmn-mobile-theme-toggle:active { background: rgba(37, 99, 235, 0.2); }
    
    .hmn-mobile-theme-toggle .hmn-theme-icon {
        position: absolute;
        font-size: 18px;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    body:not(.dark-theme) .hmn-mobile-theme-toggle .sun-icon { opacity: 0; transform: rotate(-180deg); }
    body:not(.dark-theme) .hmn-mobile-theme-toggle .moon-icon { opacity: 1; transform: rotate(0deg); color: var(--hmn-primary); }
    body.dark-theme .hmn-mobile-theme-toggle .sun-icon { opacity: 1; transform: rotate(0deg); color: #FDB813; }
    body.dark-theme .hmn-mobile-theme-toggle .moon-icon { opacity: 0; transform: rotate(180deg); }
    
    .hmn-mobile-cta {
        padding: 8px 16px;
        background: linear-gradient(135deg, var(--hmn-primary), var(--hmn-primary-dark));
        color: #FFFFFF !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
    }
    
    body.dark-theme .hmn-mobile-cta { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%); }
    
    .hmn-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s var(--hmn-transition);
    }
    
    .hmn-mobile-overlay.hmn-active { opacity: 1; visibility: visible; }
    
    body.dark-theme .hmn-mobile-overlay {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
    
    /* Mobile Dropdown Content - Simple Dropdown */
    .hmn-mobile-dropdown {
        position: fixed;
        top: 100px;
        left: 15px;
        right: 15px;
        bottom: 20px;
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    body.dark-theme .hmn-mobile-dropdown {
        background: rgba(13, 20, 40, 0.8);
        backdrop-filter: blur(25px) saturate(200%);
        -webkit-backdrop-filter: blur(25px) saturate(200%);
        border: 1px solid rgba(37, 99, 235, 0.3);
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15),
                    0 2px 0 rgba(37, 99, 235, 0.1) inset;
    }
    
    .hmn-mobile-dropdown.hmn-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    
    .hmn-mobile-dropdown-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .hmn-mobile-dropdown-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    /* Scrollable Navigation Section */
    .hmn-mobile-nav-scrollable {
        flex: 1;
        overflow-y: auto;
        padding: 20px 20px 0 20px;
        max-height: calc(100vh - 200px);
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 122, 255, 0.3) transparent;
    }
    
    .hmn-mobile-nav-scrollable::-webkit-scrollbar {
        width: 4px;
    }
    
    .hmn-mobile-nav-scrollable::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .hmn-mobile-nav-scrollable::-webkit-scrollbar-thumb {
        background: rgba(0, 122, 255, 0.3);
        border-radius: 2px;
    }
    
    .hmn-mobile-nav-scrollable::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 122, 255, 0.5);
    }
    
    /* Fixed Bottom Section */
    .hmn-mobile-nav-fixed {
        flex-shrink: 0;
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    body.dark-theme .hmn-mobile-nav-fixed {
        background: rgba(13, 20, 40, 0.05);
        border-top: 1px solid rgba(37, 99, 235, 0.1);
    }
    
    /* Mobile Nav List - Full Width */
    .hmn-mobile-nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .hmn-mobile-nav-item {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .hmn-mobile-nav-item:last-child {
        margin-bottom: 0;
    }
    
    /* Gradient Login Button */
    .hmn-mobile-login-gradient {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%) !important;
        background-size: 200% 200% !important;
        color: #FFFFFF !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
        animation: gradientShift 3s ease-in-out infinite !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .hmn-mobile-login-gradient:hover {
        transform: translateY(-1px) !important;
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%) !important;
        background-size: 200% 200% !important;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4) !important;
        color: #FFFFFF !important;
        animation: gradientShift 1s ease-in-out infinite !important;
    }
    
    body.dark-theme .hmn-mobile-login-gradient {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%) !important;
        background-size: 200% 200% !important;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
        animation: gradientShift 3s ease-in-out infinite !important;
    }
    
    body.dark-theme .hmn-mobile-login-gradient:hover {
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%) !important;
        background-size: 200% 200% !important;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4) !important;
        animation: gradientShift 1s ease-in-out infinite !important;
    }
    
    /* Gradient Separator Line */
    .hmn-mobile-gradient-separator {
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            #0051ff 10%,
            #007aff 30%,
            #00a8ff 50%,
            #007aff 70%,
            #0051ff 90%,
            transparent);
        box-shadow: 0 0 15px rgba(0, 122, 255, 0.3);
        animation: shimmer 4s ease-in-out infinite;
        margin: 20px 0;
        border-radius: 1px;
    }
    
    body.dark-theme .hmn-mobile-gradient-separator {
        background: linear-gradient(90deg, 
            transparent, 
            #0099ff 10%,
            #00ccff 30%,
            #ffffff 50%,
            #00ccff 70%,
            #0099ff 90%,
            transparent);
        box-shadow: 0 0 20px rgba(0, 204, 255, 0.4);
    }
    
    @keyframes shimmer {
        0%, 100% {
            opacity: 0.7;
        }
        50% {
            opacity: 1;
        }
    }
    
    /* Social Media Icons */
    .hmn-mobile-social-section {
        width: 100%;
        margin-top: 15px;
    }
    
    .hmn-mobile-social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .hmn-mobile-social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        color: #FFFFFF;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        animation: gradientShift 3s ease-in-out infinite;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    }
    
    .hmn-mobile-social-link:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 122, 255, 0.25);
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    .hmn-mobile-social-link i {
        font-size: 18px;
    }
    
    body.dark-theme .hmn-mobile-social-link {
        background: linear-gradient(135deg, #007aff 0%, #00a8ff 25%, #0051d5 75%, #001f66 100%);
        background-size: 200% 200%;
        animation: gradientShift 3s ease-in-out infinite;
    }
    
    body.dark-theme .hmn-mobile-social-link:hover {
        background: linear-gradient(135deg, #00a8ff 0%, #007aff 20%, #0051d5 60%, #001f66 100%);
        background-size: 200% 200%;
        animation: gradientShift 1s ease-in-out infinite;
    }
    
    .hmn-mobile-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        background: var(--hmn-bg-solid);
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.4s var(--hmn-spring);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.dark-theme .hmn-mobile-panel { background: rgba(13, 20, 40, 0.98); }
    .hmn-mobile-panel.hmn-active { transform: translateX(0); }
    .hmn-mobile-panel-inner { padding: 90px 20px 40px; }
    
    .hmn-mobile-nav-list { 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        display: flex; 
        flex-direction: column; 
        gap: 8px; 
    }
    
    .hmn-mobile-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px;
        background: linear-gradient(135deg, var(--hmn-primary), var(--hmn-primary-dark));
        border: none;
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.2s ease;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
    }
    
    body.dark-theme .hmn-mobile-nav-link { 
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
    
    .hmn-mobile-nav-link:hover {
        box-shadow: 0 2px 6px rgba(0, 122, 255, 0.1);
        transform: none;
    }
    
    .hmn-mobile-nav-link:active { 
        transform: none;
        box-shadow: 0 1px 4px rgba(0, 122, 255, 0.15);
    }
    
    body.dark-theme .hmn-mobile-nav-link:hover {
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
        transform: none;
    }
    
    body.dark-theme .hmn-mobile-nav-link:active { 
        transform: none;
        box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
    }
    
    .hmn-mobile-nav-icon { width: 20px; text-align: center; font-size: 18px; color: #FFFFFF; }
    body.dark-theme .hmn-mobile-nav-icon { color: #FFFFFF; }
    .hmn-mobile-nav-label { flex: 1; font-size: 15px; font-weight: 600; color: #FFFFFF; text-align: center; }
    body.dark-theme .hmn-mobile-nav-label { color: #FFFFFF; }
    .hmn-mobile-nav-arrow { font-size: 14px; color: #FFFFFF; }
    body.dark-theme .hmn-mobile-nav-arrow { color: #FFFFFF; }
    
    .hmn-mobile-divider { height: 1px; background: var(--hmn-border); margin: 16px 0; }
    .hmn-mobile-action .hmn-mobile-nav-link { background: linear-gradient(135deg, var(--hmn-primary), var(--hmn-primary-dark)); border-color: transparent; }
    body.dark-theme .hmn-mobile-action .hmn-mobile-nav-link { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%); }
    .hmn-mobile-action .hmn-mobile-nav-icon, .hmn-mobile-action .hmn-mobile-nav-label { color: #FFFFFF; }
}

/* ===== PAGE TRANSITION ===== */
.hmn-page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hmn-bg-solid);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--hmn-transition);
    pointer-events: none;
}

body.dark-theme .hmn-page-transition {
    background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
                rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
}

.hmn-page-transition.hmn-active { opacity: 1; visibility: visible; pointer-events: all; }

.hmn-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 122, 255, 0.1);
    border-top-color: var(--hmn-primary);
    border-radius: 50%;
    animation: hmnSpin 0.8s linear infinite;
}

body.dark-theme .hmn-loader-spinner {
    border-color: rgba(37, 99, 235, 0.2);
    border-top-color: rgba(59, 130, 246, 1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    animation: hmnSpin 0.8s linear infinite, spinnerGlow 2s ease-in-out infinite;
}

@keyframes hmnSpin { to { transform: rotate(360deg); } }
@keyframes spinnerGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5); }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.hmn-nav-link:focus, .hmn-cta-button:focus, .hmn-mobile-nav-link:focus, .hmn-theme-toggle:focus, .hmn-mobile-theme-toggle:focus {
    outline: 2px solid var(--hmn-primary);
    outline-offset: 2px;
}

/* ===== GSAP ANIMATION ENHANCEMENTS ===== */
.hmn-desktop-menu, .hmn-nav-item, .hmn-logo, .hmn-cta-button { will-change: auto; }
.hmn-nav-link { backface-visibility: hidden; transform: translateZ(0); }
.hmn-cta-button { cursor: pointer; user-select: none; }
.hmn-mega-menu { backface-visibility: hidden; }
.hmn-mobile-nav-item { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .hmn-nav-link, .hmn-logo, .hmn-cta-button, .hmn-mega-item { animation: none !important; transition: none !important; }
}

/* ===== ELEMENTOR DARK MODE SUPPORT ===== */
body.dark-theme .elementor, body.dark-theme .elementor-location-header, body.dark-theme .elementor-location-footer { background: transparent !important; }
body.dark-theme .elementor-section { background-color: transparent !important; }
body.dark-theme .elementor-section.elementor-section-boxed > .elementor-container { background: transparent !important; }
body.dark-theme .elementor-top-section { background: transparent !important; }
body.dark-theme .elementor-container, body.dark-theme .elementor-column { position: relative; z-index: 10; }
body.dark-theme .elementor-inner-section { background: rgba(13, 20, 40, 0.3) !important; border-radius: 16px; }
body.dark-theme .elementor-widget-wrap { position: relative; z-index: 10; }

/* ===== ELEMENTOR TEXT ===== */
body.dark-theme .elementor-widget-heading .elementor-heading-title { color: rgba(255, 255, 255, 0.95) !important; }
body.dark-theme .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.7) !important; }
body.dark-theme .elementor-widget-text-editor p, body.dark-theme .elementor-widget-text-editor li { color: rgba(255, 255, 255, 0.7) !important; }
body.dark-theme .elementor-widget-text-editor a { color: rgba(96, 165, 250, 1) !important; }

/* ===== ELEMENTOR BUTTONS ===== */
body.dark-theme .elementor-button { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%) !important; color: white !important; border-color: rgba(37, 99, 235, 0.5) !important; }
body.dark-theme .elementor-button:hover { background: linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(14, 165, 233, 1) 100%) !important; }

/* ===== ELEMENTOR ICONS ===== */
body.dark-theme .elementor-icon { color: rgba(96, 165, 250, 1) !important; fill: rgba(96, 165, 250, 1) !important; }

/* ===== ELEMENTOR DIVIDERS ===== */
body.dark-theme .elementor-divider-separator { border-color: rgba(37, 99, 235, 0.3) !important; }

/* ===== ELEMENTOR SPACERS ===== */
body.dark-theme .elementor-spacer { background: transparent !important; }

/* ===== ELEMENTOR FORMS ===== */
body.dark-theme .elementor-field-group input, body.dark-theme .elementor-field-group textarea, body.dark-theme .elementor-field-group select {
    background: rgba(13, 20, 40, 0.7) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-theme .elementor-field-group input::placeholder, body.dark-theme .elementor-field-group textarea::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
body.dark-theme .elementor-field-group input:focus, body.dark-theme .elementor-field-group textarea:focus { border-color: rgba(37, 99, 235, 0.6) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; }

/* ===== ELEMENTOR ACCORDIONS ===== */
body.dark-theme .elementor-accordion .elementor-accordion-item { border-color: rgba(37, 99, 235, 0.3) !important; background: rgba(13, 20, 40, 0.3) !important; }
body.dark-theme .elementor-accordion .elementor-tab-title { color: rgba(255, 255, 255, 0.9) !important; background: rgba(37, 99, 235, 0.1) !important; }
body.dark-theme .elementor-accordion .elementor-tab-content { color: rgba(255, 255, 255, 0.7) !important; background: rgba(13, 20, 40, 0.2) !important; }

/* ===== ELEMENTOR TABS ===== */
body.dark-theme .elementor-tabs .elementor-tab-title { color: rgba(255, 255, 255, 0.7) !important; background: rgba(37, 99, 235, 0.1) !important; border-color: rgba(37, 99, 235, 0.3) !important; }
body.dark-theme .elementor-tabs .elementor-tab-title.elementor-active { color: rgba(96, 165, 250, 1) !important; background: rgba(37, 99, 235, 0.25) !important; border-color: rgba(37, 99, 235, 0.5) !important; }
body.dark-theme .elementor-tabs .elementor-tab-content { color: rgba(255, 255, 255, 0.7) !important; background: rgba(13, 20, 40, 0.3) !important; border-color: rgba(37, 99, 235, 0.3) !important; }

/* ===== ELEMENTOR TESTIMONIALS ===== */
body.dark-theme .elementor-testimonial { background: rgba(13, 20, 40, 0.5) !important; border-color: rgba(37, 99, 235, 0.35) !important; }
body.dark-theme .elementor-testimonial__text { color: rgba(255, 255, 255, 0.85) !important; }
body.dark-theme .elementor-testimonial__name { color: rgba(255, 255, 255, 0.95) !important; }
body.dark-theme .elementor-testimonial__title { color: rgba(96, 165, 250, 1) !important; }

/* ===== ELEMENTOR PROGRESS BARS ===== */
body.dark-theme .elementor-progress-bar { background: rgba(37, 99, 235, 0.2) !important; }
body.dark-theme .elementor-progress-bar .elementor-progress-bar-inner { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(14, 165, 233, 0.8) 100%) !important; }

/* ===== ELEMENTOR COUNTERS ===== */
body.dark-theme .elementor-counter-number { color: rgba(96, 165, 250, 1) !important; }
body.dark-theme .elementor-counter-title { color: rgba(255, 255, 255, 0.9) !important; }

/* ===== ELEMENTOR IMAGE BOX ===== */
body.dark-theme .elementor-image-box-wrapper { background: rgba(13, 20, 40, 0.3) !important; border-radius: 12px; padding: 20px; }
body.dark-theme .elementor-image-box-title { color: rgba(255, 255, 255, 0.95) !important; }
body.dark-theme .elementor-image-box-description { color: rgba(255, 255, 255, 0.7) !important; }

/* ===== ELEMENTOR POPUPS ===== */
body.dark-theme .elementor-popup-modal { background: rgba(13, 20, 40, 0.95) !important; }
body.dark-theme .elementor-popup-modal .dialog-widget-content { background: rgba(13, 20, 40, 0.95) !important; }