/* =========================================================
   VERRALINQ MOBILE + TABLET NAVIGATION
   Isolated side-panel system
========================================================= */

.vlq-mobile-toggle,
.vlq-mobile-overlay,
.vlq-mobile-panel {
    display: none;
}

@media (max-width: 1100px) {

    .site-header__inner {
        gap: 18px;
    }

    .header-nav,
    .header-actions {
        display: none;
    }

    .site-header {
        height: 74px;
    }

    .brand__logo {
        width: 176px;
        max-height: 48px;
    }


    /* =====================================================
       TOGGLE BUTTON
    ====================================================== */

    .vlq-mobile-toggle {
        width: 48px;
        height: 48px;
        margin-left: auto;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
        border-radius: 14px;
        border: 1px solid rgba(1, 71, 209, 0.15);
        background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 100%);
        color: #071633;
        cursor: pointer;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 10px 24px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
        transition:
            transform 280ms var(--ease-premium),
            border-color 240ms ease,
            box-shadow 280ms ease;
    }

    .vlq-mobile-toggle:hover {
        transform: translateY(-1px);
        border-color: rgba(1, 71, 209, 0.28);
        box-shadow:
            0 2px 5px rgba(15, 23, 42, 0.05),
            0 16px 32px rgba(1, 71, 209, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .vlq-mobile-toggle span {
        width: 20px;
        height: 2px;
        display: block;
        border-radius: 999px;
        background: #071633;
        transition:
            transform 340ms var(--ease-premium),
            opacity 220ms ease,
            width 280ms var(--ease-premium);
    }

    body.vlq-menu-open .vlq-mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.vlq-menu-open .vlq-mobile-toggle span:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    body.vlq-menu-open .vlq-mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* =====================================================
       BACKDROP OVERLAY
    ====================================================== */

    .vlq-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 1400;
        display: block;
        opacity: 0;
        visibility: hidden;
        background:
            radial-gradient(circle at 82% 10%, rgba(1, 71, 209, 0.18), transparent 36%),
            rgba(2, 6, 23, 0.58);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition:
            opacity 380ms ease,
            visibility 380ms ease;
    }

    body.vlq-menu-open .vlq-mobile-overlay {
        opacity: 1;
        visibility: visible;
    }


    /* =====================================================
       SLIDING SIDE PANEL
    ====================================================== */

    .vlq-mobile-panel {
        width: min(420px, calc(100vw - 24px));
        height: calc(100vh - 24px);
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 1500;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateX(calc(100% + 28px)) scale(0.985);
        border-radius: 28px;
        border: 1px solid rgba(203, 213, 225, 0.72);
        background:
            radial-gradient(circle at 84% 12%, rgba(1, 71, 209, 0.11), transparent 34%),
            radial-gradient(circle at 15% 94%, rgba(8, 155, 83, 0.08), transparent 28%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 249, 255, 0.98) 100%);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow:
            0 44px 120px rgba(2, 6, 23, 0.34),
            0 16px 38px rgba(15, 23, 42, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
        transition:
            transform 620ms var(--ease-premium),
            opacity 360ms ease,
            visibility 360ms ease;
    }

    body.vlq-menu-open .vlq-mobile-panel {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
    }

    .vlq-mobile-panel__top {
        min-height: 92px;
        padding: 22px 22px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    }

    .vlq-mobile-panel__brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .vlq-mobile-panel__brand img {
        display: block;
        width: 176px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .vlq-mobile-panel__close {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 1px solid rgba(203, 213, 225, 0.88);
        background: rgba(255, 255, 255, 0.92);
        color: #071633;
        cursor: pointer;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 10px 22px rgba(15, 23, 42, 0.07);
        transition:
            transform 280ms var(--ease-premium),
            border-color 240ms ease,
            color 240ms ease;
    }

    .vlq-mobile-panel__close svg {
        width: 22px;
        height: 22px;
    }

    .vlq-mobile-panel__close:hover {
        transform: rotate(4deg) translateY(-1px);
        color: #0147D1;
        border-color: rgba(1, 71, 209, 0.26);
    }

    .vlq-mobile-panel__content {
        min-height: 0;
        flex: 1;
        padding: 28px 22px 22px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .vlq-mobile-panel__eyebrow {
        margin: 0 0 18px;
        color: #60708C;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }


    /* =====================================================
       MENU LINKS
    ====================================================== */

    .vlq-mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .vlq-mobile-menu__link {
        min-height: 62px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 0 18px;
        border-radius: 18px;
        border: 1px solid rgba(221, 229, 238, 0.98);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
        color: #071633;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -0.018em;
        opacity: 0;
        transform: translateX(24px);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.025),
            0 12px 24px rgba(15, 23, 42, 0.045);
        transition:
            transform 360ms var(--ease-premium),
            border-color 260ms ease,
            background 260ms ease,
            box-shadow 360ms ease,
            color 240ms ease,
            opacity 280ms ease;
    }

    .vlq-mobile-menu__link svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: #6B7A92;
        transition:
            transform 320ms var(--ease-premium),
            color 240ms ease;
    }

    .vlq-mobile-menu__link:hover,
    .vlq-mobile-menu__link--active {
        color: #0147D1;
        border-color: rgba(1, 71, 209, 0.24);
        background: linear-gradient(135deg, rgba(238, 244, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
        box-shadow:
            0 2px 5px rgba(15, 23, 42, 0.04),
            0 18px 34px rgba(1, 71, 209, 0.10);
    }

    .vlq-mobile-menu__link:hover svg,
    .vlq-mobile-menu__link--active svg {
        color: #0147D1;
        transform: translateX(3px);
    }

    body.vlq-menu-open .vlq-mobile-menu__link {
        opacity: 1;
        transform: translateX(0);
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(1) { transition-delay: 120ms; }
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(2) { transition-delay: 165ms; }
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(3) { transition-delay: 210ms; }
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(4) { transition-delay: 255ms; }
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(5) { transition-delay: 300ms; }
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(6) { transition-delay: 345ms; }


    /* =====================================================
       PANEL ACTIONS
    ====================================================== */

    .vlq-mobile-panel__actions {
        margin-top: auto;
        padding-top: 24px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vlq-mobile-panel__login,
    .vlq-mobile-panel__demo {
        min-height: 56px;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 15px;
        font-weight: 720;
        line-height: 1;
        letter-spacing: -0.014em;
        cursor: pointer;
    }

    .vlq-mobile-panel__login {
        border: 1px solid rgba(203, 213, 225, 0.94);
        background: rgba(255, 255, 255, 0.96);
        color: #071633;
    }

    .vlq-mobile-panel__demo {
        border: 1px solid rgba(1, 71, 209, 0.96);
        background: linear-gradient(180deg, #1765F2 0%, #0954E4 42%, #0147D1 100%);
        color: #FFFFFF;
    }

    .vlq-mobile-panel__bottom {
        min-height: 62px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        gap: 11px;
        border-top: 1px solid rgba(226, 232, 240, 0.94);
        background: rgba(255, 255, 255, 0.70);
    }

    .vlq-mobile-panel__bottom span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        background: #089B53;
    }

    .vlq-mobile-panel__bottom p {
        margin: 0;
        color: #60708C;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.4;
    }

    body.vlq-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 620px) {
    .site-header__inner {
        padding: 0 16px;
    }

    .site-header {
        height: 72px;
    }

    .brand__logo {
        width: 160px;
        max-height: 46px;
    }

    .vlq-mobile-toggle {
        width: 46px;
        height: 46px;
    }

    .vlq-mobile-panel {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        top: 8px;
        right: 8px;
        border-radius: 24px;
    }

    .vlq-mobile-panel__content {
        padding: 22px 18px 18px;
    }

    .vlq-mobile-menu__link {
        min-height: 58px;
        font-size: 15px;
    }
}
/* =========================================================
   MOBILE MENU PERFORMANCE OPTIMISATION PASS
   Smoother panel motion on older Android devices
========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------------------
       1. Overlay — remove expensive backdrop blur
    ------------------------------------------------------ */

    .vlq-mobile-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(2, 6, 23, 0.58);
        transition:
            opacity 240ms ease,
            visibility 240ms ease;
        will-change: opacity;
    }


    /* -----------------------------------------------------
       2. Side panel — lighter blur, lighter shadows,
          transform-only motion
    ------------------------------------------------------ */

    .vlq-mobile-panel {
        transform: translate3d(calc(100% + 28px), 0, 0);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            0 28px 72px rgba(2, 6, 23, 0.28),
            0 10px 24px rgba(15, 23, 42, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.94);
        transition:
            transform 420ms var(--ease-premium),
            opacity 220ms ease,
            visibility 220ms ease;
        will-change: transform, opacity;
    }

    body.vlq-menu-open .vlq-mobile-panel {
        transform: translate3d(0, 0, 0);
    }


    /* -----------------------------------------------------
       3. Menu link reveal — shorter travel, shorter timing
    ------------------------------------------------------ */

    .vlq-mobile-menu__link {
        transform: translate3d(12px, 0, 0);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.02),
            0 8px 16px rgba(15, 23, 42, 0.04);
        transition:
            transform 250ms var(--ease-premium),
            opacity 190ms ease,
            border-color 220ms ease,
            background 220ms ease,
            box-shadow 240ms ease,
            color 200ms ease;
        will-change: transform, opacity;
    }

    body.vlq-menu-open .vlq-mobile-menu__link {
        transform: translate3d(0, 0, 0);
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(1) {
        transition-delay: 55ms;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(2) {
        transition-delay: 80ms;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(3) {
        transition-delay: 105ms;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(4) {
        transition-delay: 130ms;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(5) {
        transition-delay: 155ms;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(6) {
        transition-delay: 180ms;
    }


    /* -----------------------------------------------------
       4. Hamburger transition — slightly quicker
    ------------------------------------------------------ */

    .vlq-mobile-toggle {
        transition:
            transform 220ms var(--ease-premium),
            border-color 200ms ease,
            box-shadow 220ms ease;
    }

    .vlq-mobile-toggle span {
        transition:
            transform 260ms var(--ease-premium),
            opacity 180ms ease,
            width 220ms var(--ease-premium);
    }
}


/* =========================================================
   EXTRA-LIGHT PHONE MODE
   Targets smaller/older devices where blur + stagger can feel heavy
========================================================= */

@media (max-width: 420px) {

    .vlq-mobile-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background:
            radial-gradient(circle at 84% 12%, rgba(1, 71, 209, 0.08), transparent 30%),
            linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
        box-shadow:
            0 20px 48px rgba(2, 6, 23, 0.24),
            0 8px 18px rgba(15, 23, 42, 0.12);
    }

    .vlq-mobile-menu__link {
        opacity: 1;
        transform: none;
        will-change: auto;
        transition:
            border-color 180ms ease,
            background 180ms ease,
            color 180ms ease;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(1),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(2),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(3),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(4),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(5),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(6) {
        transition-delay: 0ms;
    }
}

/* =========================================================
   ULTRA-LIGHT MOBILE MENU MODE
   For smaller / older phones such as Galaxy S9
   Prioritises smoothness over glass-heavy effects
========================================================= */

@media (max-width: 420px) {

    /* -----------------------------------------------------
       1. Remove expensive visual layers
    ------------------------------------------------------ */

    .vlq-mobile-overlay {
        background: rgba(2, 6, 23, 0.48);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition:
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .vlq-mobile-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        background: #FFFFFF;

        box-shadow:
            0 18px 42px rgba(2, 6, 23, 0.22);

        border: 1px solid rgba(203, 213, 225, 0.72);

        transform: translate3d(100%, 0, 0);
        transition:
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms ease,
            visibility 180ms ease;

        will-change: transform;
    }

    body.vlq-menu-open .vlq-mobile-panel {
        transform: translate3d(0, 0, 0);
    }


    /* -----------------------------------------------------
       2. Strip heavy card shadows
    ------------------------------------------------------ */

    .vlq-mobile-menu__link {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;

        box-shadow: none !important;

        background: #FFFFFF;
        border: 1px solid rgba(221, 229, 238, 0.95);

        transition:
            color 160ms ease,
            border-color 160ms ease,
            background-color 160ms ease;
    }

    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(1),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(2),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(3),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(4),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(5),
    body.vlq-menu-open .vlq-mobile-menu__link:nth-child(6) {
        transition-delay: 0ms !important;
    }


    /* -----------------------------------------------------
       3. Simplify active / hover state
    ------------------------------------------------------ */

    .vlq-mobile-menu__link:hover,
    .vlq-mobile-menu__link--active {
        background: #EEF4FF;
        border-color: rgba(1, 71, 209, 0.24);
        box-shadow: none !important;
    }

    .vlq-mobile-menu__link:hover svg,
    .vlq-mobile-menu__link--active svg {
        transform: none !important;
    }


    /* -----------------------------------------------------
       4. Lighten top/bottom/action surfaces
    ------------------------------------------------------ */

    .vlq-mobile-panel__close,
    .vlq-mobile-panel__login,
    .vlq-mobile-panel__demo {
        box-shadow: none !important;
    }

    .vlq-mobile-panel__top,
    .vlq-mobile-panel__bottom {
        background: #FFFFFF;
    }


    /* -----------------------------------------------------
       5. Remove hamburger micro-animation complexity
    ------------------------------------------------------ */

    .vlq-mobile-toggle {
        box-shadow:
            0 4px 12px rgba(15, 23, 42, 0.08);
    }

    .vlq-mobile-toggle,
    .vlq-mobile-toggle span {
        transition-duration: 180ms !important;
    }
}
/* =========================================================
   MOBILE HEADER ALIGNMENT CONSISTENCY
   Keeps hamburger position identical across every page
========================================================= */

@media (max-width: 1100px) {
    .site-header__inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}