/* ==========================================================
   XGLOBAL™ ECOSYSTEM COMMAND NAVIGATION
   ----------------------------------------------------------
   PREMIUM ENTERPRISE / DIGITAL ECOSYSTEM UI
   ----------------------------------------------------------
   • Fully responsive
   • Desktop command navigation
   • Immersive mega menu
   • Tablet optimized
   • Mobile command drawer
   • Glass / depth architecture
   • Animated intelligence accents
   • Touch friendly
   • Keyboard friendly
   • No framework required
   • Bootstrap Icons compatible
   ========================================================== */


/* ==========================================================
   XGLOBAL™ DESIGN SYSTEM
   ========================================================== */

:root {

    /* Core XGlobal colors */
    --xg-nav-blue:
        #3b82f6;

    --xg-nav-blue-light:
        #60a5fa;

    --xg-nav-cyan:
        #22d3ee;

    --xg-nav-purple:
        #8b5cf6;

    --xg-nav-violet:
        #a78bfa;


    /* Background system */
    --xg-nav-bg:
        rgba(2, 6, 23, .94);

    --xg-nav-bg-solid:
        #020617;

    --xg-nav-panel:
        rgba(5, 12, 28, .985);

    --xg-nav-panel-2:
        rgba(9, 19, 40, .98);

    --xg-nav-card:
        rgba(255,255,255,.045);


    /* Borders */
    --xg-nav-border:
        rgba(255,255,255,.085);

    --xg-nav-border-light:
        rgba(255,255,255,.12);

    --xg-nav-border-active:
        rgba(96,165,250,.35);


    /* Typography */
    --xg-nav-white:
        #ffffff;

    --xg-nav-text:
        rgba(255,255,255,.88);

    --xg-nav-muted:
        rgba(255,255,255,.56);

    --xg-nav-subtle:
        rgba(255,255,255,.34);


    /* Radius */
    --xg-nav-radius-sm:
        10px;

    --xg-nav-radius-md:
        15px;

    --xg-nav-radius-lg:
        22px;

    --xg-nav-radius-xl:
        30px;


    /* Shadows */
    --xg-nav-shadow:
        0 30px 100px rgba(0,0,0,.52);

    --xg-nav-shadow-soft:
        0 15px 45px rgba(0,0,0,.28);


    /* Motion */
    --xg-nav-ease:
        cubic-bezier(.2,.8,.2,1);

    --xg-nav-fast:
        180ms var(--xg-nav-ease);

    --xg-nav-normal:
        300ms var(--xg-nav-ease);

}


/* ==========================================================
   NAVIGATION ROOT
   ========================================================== */

.xg-nav {

    position: sticky;

    top: 0;

    z-index: 99999;

    width: 100%;

    isolation: isolate;

    color:
        var(--xg-nav-white);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* ==========================================================
   NAVIGATION ATMOSPHERE
   ========================================================== */

.xg-nav::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 12% 50%,
            rgba(59,130,246,.10),
            transparent 24%
        ),

        radial-gradient(
            circle at 88% 50%,
            rgba(139,92,246,.08),
            transparent 24%
        );

}


/* ==========================================================
   NAVIGATION BAR
   ========================================================== */

.xg-nav-bar {

    position: relative;

    z-index: 2000;

    width: 100%;

    min-height: 78px;

    background:

        linear-gradient(
            180deg,
            rgba(5,11,25,.985),
            rgba(2,6,23,.96)
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    box-shadow:
        0 8px 35px rgba(0,0,0,.18);

    backdrop-filter:
        blur(26px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%);

}


/* ==========================================================
   TOP ENERGY LINE
   ========================================================== */

.xg-nav-bar::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent 5%,
            rgba(59,130,246,.5),
            rgba(34,211,238,.8),
            rgba(139,92,246,.7),
            transparent 95%
        );

    opacity: .75;

}


/* ==========================================================
   NAVIGATION CONTAINER
   ========================================================== */

.xg-nav-container {

    width:
        min(
            1480px,
            calc(100% - 36px)
        );

    min-height:
        78px;

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

}


/* ==========================================================
   BRAND
   ========================================================== */

.xg-nav-brand {

    position: relative;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        225px;

    color:
        #fff;

    text-decoration:
        none;

}


/* Brand ambient glow */

.xg-nav-brand::before {

    content: "";

    position: absolute;

    left: -12px;

    width: 55px;
    height: 55px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.16),
            transparent 70%
        );

    pointer-events:
        none;

}


/* ==========================================================
   BRAND LOGO
   ========================================================== */

.xg-nav-brand-logo {

    position: relative;

    width:
        46px;

    height:
        46px;

    object-fit:
        contain;

    filter:

        drop-shadow(
            0 0 16px
            rgba(96,165,250,.28)
        );

    transition:
        transform .4s var(--xg-nav-ease);

}


.xg-nav-brand:hover
.xg-nav-brand-logo {

    transform:
        scale(1.06)
        rotate(-2deg);

}


/* ==========================================================
   BRAND TEXT
   ========================================================== */

.xg-nav-brand-text {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.xg-nav-brand-title {

    font-size:
        20px;

    font-weight:
        850;

    letter-spacing:
        -.035em;

}


.xg-nav-brand-subtitle {

    margin-top:
        6px;

    color:
        var(--xg-nav-subtle);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


/* ==========================================================
   DESKTOP MENU
   ========================================================== */

.xg-nav-menu {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        3px;

}


/* ==========================================================
   NAVIGATION GROUP
   ========================================================== */

.xg-nav-group {

    position:
        static;

}


/* ==========================================================
   NAVIGATION TRIGGER
   ========================================================== */

.xg-nav-trigger {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        48px;

    padding:
        0 14px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    background:
        transparent;

    color:
        var(--xg-nav-text);

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        -.005em;

    cursor:
        pointer;

    transition:
        color var(--xg-nav-fast),
        background var(--xg-nav-fast),
        border-color var(--xg-nav-fast),
        transform var(--xg-nav-fast);

}


/* Active underline */

.xg-nav-trigger::after {

    content: "";

    position:
        absolute;

    left:
        15px;

    right:
        15px;

    bottom:
        4px;

    height:
        2px;

    border-radius:
        999px;

    background:

        linear-gradient(
            90deg,
            var(--xg-nav-blue),
            var(--xg-nav-cyan),
            var(--xg-nav-purple)
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform var(--xg-nav-normal);

}


.xg-nav-trigger:hover,
.xg-nav-group.is-open
.xg-nav-trigger {

    color:
        #fff;

    background:
        rgba(255,255,255,.055);

    border-color:
        rgba(255,255,255,.09);

}


.xg-nav-group.is-open
.xg-nav-trigger::after {

    transform:
        scaleX(1);

}


/* ==========================================================
   TRIGGER ICON
   ========================================================== */

.xg-nav-trigger-icon {

    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:

        linear-gradient(
            135deg,
            rgba(59,130,246,.15),
            rgba(139,92,246,.14)
        );

    color:
        #9dc5ff;

    font-size:
        12px;

}


/* ==========================================================
   CHEVRON
   ========================================================== */

.xg-nav-chevron {

    font-size:
        9px;

    color:
        rgba(255,255,255,.45);

    transition:
        transform var(--xg-nav-normal);

}


.xg-nav-group.is-open
.xg-nav-chevron {

    transform:
        rotate(180deg);

    color:
        #8fc1ff;

}


/* ==========================================================
   MEGA BACKDROP
   ========================================================== */

.xg-nav-mega-backdrop {

    position:
        fixed;

    inset:
        78px 0 0;

    z-index:
        10;

    background:
        rgba(0,0,0,.52);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    transition:
        opacity var(--xg-nav-normal),
        visibility var(--xg-nav-normal);

}


.xg-nav.has-open-menu
.xg-nav-mega-backdrop {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* ==========================================================
   MEGA MENU
   ========================================================== */

.xg-nav-mega {

    position:
        absolute;

    top:
        100%;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    padding:
        14px
        18px
        26px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-12px)
        scale(.985);

    transform-origin:
        top center;

    transition:
        opacity var(--xg-nav-normal),
        transform var(--xg-nav-normal),
        visibility var(--xg-nav-normal);

}


.xg-nav-group.is-open
.xg-nav-mega {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);

}


/* ==========================================================
   MEGA INNER
   ========================================================== */

.xg-nav-mega-inner {

    position:
        relative;

    z-index:
        1001;

    width:
        min(
            1440px,
            calc(100% - 10px)
        );

    margin:
        auto;

    padding:
        28px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.105);

    border-radius:
        0 0
        30px
        30px;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(59,130,246,.14),
            transparent 28%
        ),

        radial-gradient(
            circle at 100% 0%,
            rgba(139,92,246,.13),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            rgba(7,17,37,.995),
            rgba(3,9,22,.995)
        );

    box-shadow:
        var(--xg-nav-shadow);

    backdrop-filter:
        blur(35px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(35px)
        saturate(170%);

    pointer-events:
        auto;

}


/* ==========================================================
   MEGA DECORATIVE GRID
   ========================================================== */

.xg-nav-mega-inner::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(96,165,250,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.035) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events:
        none;

}


/* ==========================================================
   MEGA GRID
   ========================================================== */

.xg-mega-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(220px,.9fr)
        repeat(2,minmax(250px,1fr))
        minmax(220px,.85fr);

    gap:
        28px;

}


/* ==========================================================
   INTRODUCTION PANEL
   ========================================================== */

.xg-mega-intro {

    position:
        relative;

    min-height:
        270px;

    padding:
        24px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        22px;

    background:

        linear-gradient(
            145deg,
            rgba(59,130,246,.15),
            rgba(139,92,246,.08)
        );

}


/* Animated orb */

.xg-mega-intro::before {

    content: "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -100px;

    bottom:
        -110px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(34,211,238,.24),
            rgba(59,130,246,.10),
            transparent 70%
        );

    animation:
        xgNavOrb 8s ease-in-out infinite;

}


@keyframes xgNavOrb {

    0%,
    100% {

        transform:
            scale(.9)
            translate(0,0);

    }

    50% {

        transform:
            scale(1.15)
            translate(-10px,-8px);

    }

}


/* ==========================================================
   INTRO ICON
   ========================================================== */

.xg-mega-intro-icon {

    position:
        relative;

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        16px;

    background:

        linear-gradient(
            135deg,
            rgba(59,130,246,.20),
            rgba(34,211,238,.12),
            rgba(139,92,246,.18)
        );

    color:
        #b9d6ff;

    font-size:
        21px;

    box-shadow:
        0 10px 35px
        rgba(59,130,246,.12);

}


/* ==========================================================
   INTRO TEXT
   ========================================================== */

.xg-mega-intro h3 {

    position:
        relative;

    margin:
        0 0 10px;

    font-size:
        22px;

    line-height:
        1.15;

    letter-spacing:
        -.035em;

}


.xg-mega-intro p {

    position:
        relative;

    margin:
        0;

    max-width:
        260px;

    color:
        var(--xg-nav-muted);

    font-size:
        12px;

    line-height:
        1.75;

}


/* ==========================================================
   INTRO LINK
   ========================================================== */

.xg-mega-intro-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        24px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(96,165,250,.15);

    border-radius:
        10px;

    background:
        rgba(96,165,250,.07);

    color:
        #b6d2ff;

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        gap var(--xg-nav-fast),
        background var(--xg-nav-fast),
        border-color var(--xg-nav-fast);

}


.xg-mega-intro-link:hover {

    gap:
        12px;

    background:
        rgba(96,165,250,.12);

    border-color:
        rgba(96,165,250,.25);

}


/* ==========================================================
   MEGA COLUMN
   ========================================================== */

.xg-mega-column {

    min-width:
        0;

}


/* ==========================================================
   COLUMN HEADING
   ========================================================== */

.xg-mega-column-title {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 13px;

    padding:
        0 5px;

    color:
        rgba(255,255,255,.38);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.xg-mega-column-title i {

    color:
        #70a9ff;

}


/* ==========================================================
   MEGA LINK
   ========================================================== */

.xg-mega-link {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        38px minmax(0,1fr);

    gap:
        11px;

    padding:
        10px;

    margin-bottom:
        5px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    color:
        #fff;

    text-decoration:
        none;

    transition:
        transform var(--xg-nav-fast),
        background var(--xg-nav-fast),
        border-color var(--xg-nav-fast);

}


.xg-mega-link:hover {

    transform:
        translateX(4px);

    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.075),
            rgba(255,255,255,.035)
        );

    border-color:
        rgba(96,165,250,.10);

}


/* ==========================================================
   LINK ICON
   ========================================================== */

.xg-mega-link-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.11),
            rgba(139,92,246,.08)
        );

    color:
        #9dc6ff;

    font-size:
        14px;

    transition:
        transform var(--xg-nav-fast),
        background var(--xg-nav-fast);

}


.xg-mega-link:hover
.xg-mega-link-icon {

    transform:
        scale(1.08);

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.20),
            rgba(34,211,238,.12)
        );

}


/* ==========================================================
   LINK TEXT
   ========================================================== */

.xg-mega-link strong {

    display:
        block;

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        750;

}


.xg-mega-link small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.43);

    font-size:
        9px;

    line-height:
        1.45;

}


/* ==========================================================
   FEATURED CARDS
   ========================================================== */

.xg-mega-feature {

    position:
        relative;

    display:
        block;

    padding:
        13px;

    margin-bottom:
        7px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.035);

    color:
        #fff;

    text-decoration:
        none;

    transition:
        transform var(--xg-nav-fast),
        background var(--xg-nav-fast),
        border-color var(--xg-nav-fast);

}


.xg-mega-feature::after {

    content: "";

    position:
        absolute;

    width:
        80px;

    height:
        80px;

    right:
        -35px;

    top:
        -35px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(96,165,250,.16),
            transparent 70%
        );

    pointer-events:
        none;

}


.xg-mega-feature:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.065);

    border-color:
        rgba(96,165,250,.18);

}


/* ==========================================================
   FEATURE TOP
   ========================================================== */

.xg-mega-feature-top {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.xg-mega-feature-icon {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.16),
            rgba(139,92,246,.13)
        );

    color:
        #a9cbff;

}


.xg-mega-feature strong {

    font-size:
        11px;

    font-weight:
        750;

}


.xg-mega-feature small {

    display:
        block;

    margin-top:
        7px;

    color:
        rgba(255,255,255,.43);

    font-size:
        9px;

    line-height:
        1.5;

}


/* ==========================================================
   MEGA FOOTER
   ========================================================== */

.xg-mega-footer {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        22px;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


.xg-mega-footer-text {

    color:
        rgba(255,255,255,.35);

    font-size:
        9px;

}


.xg-mega-footer-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(96,165,250,.10);

    border-radius:
        10px;

    background:
        rgba(96,165,250,.06);

    color:
        #b9d3ff;

    font-size:
        9px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        background var(--xg-nav-fast),
        border-color var(--xg-nav-fast);

}


.xg-mega-footer-link:hover {

    background:
        rgba(96,165,250,.12);

    border-color:
        rgba(96,165,250,.20);

}


/* ==========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.xg-nav-mobile-toggle {

    display:
        none;

    margin-left:
        auto;

    width:
        46px;

    height:
        46px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    color:
        #fff;

    font-size:
        19px;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.06);

}


/* ==========================================================
   MOBILE OVERLAY
   ========================================================== */

.xg-nav-mobile-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        99998;

    background:
        rgba(0,0,0,.68);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


body.xg-nav-mobile-open
.xg-nav-mobile-overlay {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* ==========================================================
   MOBILE COMMAND PANEL
   ========================================================== */

.xg-nav-mobile-panel {

    position:
        fixed;

    top:
        0;

    right:
        0;

    z-index:
        99999;

    width:
        min(
            430px,
            94vw
        );

    height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(59,130,246,.16),
            transparent 34%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(139,92,246,.10),
            transparent 35%
        ),

        #050d1d;

    border-left:
        1px solid
        rgba(255,255,255,.10);

    box-shadow:
        -35px 0 100px
        rgba(0,0,0,.55);

    transform:
        translateX(105%);

    visibility:
        hidden;

    transition:
        transform .35s var(--xg-nav-ease),
        visibility .35s ease;

}


body.xg-nav-mobile-open
.xg-nav-mobile-panel {

    transform:
        translateX(0);

    visibility:
        visible;

}


/* ==========================================================
   MOBILE HEADER
   ========================================================== */

.xg-mobile-head {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.xg-mobile-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.xg-mobile-brand-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(96,165,250,.12);

    border-radius:
        13px;

    background:
        rgba(59,130,246,.10);

    color:
        #a6caff;

}


.xg-mobile-brand strong {

    display:
        block;

    font-size:
        14px;

    font-weight:
        800;

}


.xg-mobile-brand small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.42);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.xg-mobile-close {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.045);

    color:
        #fff;

    cursor:
        pointer;

}


/* ==========================================================
   MOBILE CONTENT
   ========================================================== */

.xg-mobile-content {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    padding:
        14px
        14px
        30px;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(96,165,250,.3)
        transparent;

}


/* ==========================================================
   MOBILE GROUP
   ========================================================== */

.xg-mobile-group {

    margin-bottom:
        8px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.025);

}


.xg-mobile-group-button {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        42px minmax(0,1fr) 20px;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px;

    border:
        0;

    background:
        transparent;

    color:
        #fff;

    text-align:
        left;

    cursor:
        pointer;

    touch-action:
        manipulation;

}


/* ==========================================================
   MOBILE GROUP ICON
   ========================================================== */

.xg-mobile-group-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(96,165,250,.08);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.11),
            rgba(139,92,246,.08)
        );

    color:
        #a4c9ff;

}


/* ==========================================================
   MOBILE GROUP TEXT
   ========================================================== */

.xg-mobile-group-text strong {

    display:
        block;

    font-size:
        13px;

    font-weight:
        750;

}


.xg-mobile-group-text small {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(255,255,255,.40);

    font-size:
        9px;

}


/* ==========================================================
   MOBILE CHEVRON
   ========================================================== */

.xg-mobile-group-chevron {

    color:
        rgba(255,255,255,.40);

    font-size:
        10px;

    transition:
        transform .25s ease;

}


.xg-mobile-group.is-open
.xg-mobile-group-chevron {

    transform:
        rotate(180deg);

}


/* ==========================================================
   MOBILE LINKS ACCORDION
   ========================================================== */

.xg-mobile-links {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .3s ease;

}


.xg-mobile-group.is-open
.xg-mobile-links {

    grid-template-rows:
        1fr;

}


.xg-mobile-links-inner {

    min-height:
        0;

    overflow:
        hidden;

    padding:
        0 10px;

}


.xg-mobile-group.is-open
.xg-mobile-links-inner {

    padding-bottom:
        10px;

}


/* ==========================================================
   MOBILE LINK
   ========================================================== */

.xg-mobile-link {

    display:
        grid;

    grid-template-columns:
        35px minmax(0,1fr);

    gap:
        10px;

    padding:
        10px;

    border-radius:
        11px;

    color:
        #fff;

    text-decoration:
        none;

    transition:
        background .18s ease;

    touch-action:
        manipulation;

}


.xg-mobile-link:hover,
.xg-mobile-link:active {

    background:
        rgba(255,255,255,.045);

}


.xg-mobile-link-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(255,255,255,.045);

    color:
        #9bc2ff;

    font-size:
        13px;

}


.xg-mobile-link strong {

    display:
        block;

    font-size:
        11px;

    line-height:
        1.3;

}


.xg-mobile-link small {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(255,255,255,.40);

    font-size:
        9px;

    line-height:
        1.45;

}


/* ==========================================================
   MOBILE FOOTER
   ========================================================== */

.xg-mobile-footer {

    flex:
        0 0 auto;

    padding:
        14px 20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.30);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-align:
        center;

    text-transform:
        uppercase;

}


/* ==========================================================
   LARGE TABLET
   ========================================================== */

@media (max-width: 1250px) {

    .xg-nav-container {

        gap:
            12px;

    }


    .xg-nav-brand {

        min-width:
            190px;

    }


    .xg-nav-trigger {

        padding:
            0 10px;

    }


    .xg-nav-trigger-label {

        font-size:
            11px;

    }


    .xg-mega-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}


/* ==========================================================
   TABLET / MOBILE SWITCH
   ========================================================== */

@media (max-width: 900px) {

    .xg-nav-bar {

        min-height:
            70px;

    }


    .xg-nav-container {

        width:
            min(
                calc(100% - 24px),
                1480px
            );

        min-height:
            70px;

    }


    .xg-nav-menu {

        display:
            none;

    }


    .xg-nav-mobile-toggle {

        display:
            flex;

    }


    .xg-nav-brand {

        min-width:
            0;

    }


    .xg-nav-brand-logo {

        width:
            42px;

        height:
            42px;

    }


    .xg-nav-brand-title {

        font-size:
            18px;

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .xg-nav-container {

        width:
            calc(100% - 18px);

    }


    .xg-nav-mobile-panel {

        width:
            100vw;

        border-left:
            0;

    }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 430px) {

    .xg-nav-bar {

        min-height:
            64px;

    }


    .xg-nav-container {

        min-height:
            64px;

    }


    .xg-nav-brand-logo {

        width:
            38px;

        height:
            38px;

    }


    .xg-nav-brand-title {

        font-size:
            16px;

    }


    .xg-nav-brand-subtitle {

        display:
            none;

    }


    .xg-nav-mobile-toggle {

        width:
            42px;

        height:
            42px;

    }

}


/* ==========================================================
   ACCESSIBILITY — FOCUS
   ========================================================== */

.xg-nav a:focus-visible,
.xg-nav button:focus-visible {

    outline:
        2px solid
        var(--xg-nav-cyan);

    outline-offset:
        3px;

}


/* ==========================================================
   TOUCH DEVICES
   ========================================================== */

@media (hover: none) {

    .xg-nav-trigger:hover,
    .xg-mega-link:hover,
    .xg-mega-feature:hover {

        transform:
            none;

    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .xg-nav *,
    .xg-nav *::before,
    .xg-nav *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}


/* ==========================================================
   CLICK / LAYER SAFETY
   ========================================================== */

.xg-nav-mega,
.xg-nav-mega-inner,
.xg-nav-mega a,
.xg-mega-link,
.xg-mega-feature,
.xg-mega-intro-link,
.xg-mega-footer-link {

    pointer-events:
        auto;

}


.xg-nav-mobile-panel,
.xg-nav-mobile-panel a,
.xg-nav-mobile-panel button {

    pointer-events:
        auto;

    touch-action:
        manipulation;

}



/* =========================================================
   XGLOBAL MOBILE MENU — FORCE OPEN TEST
   TEMPORARY
========================================================= */

@media (max-width: 900px) {

    body.xg-nav-mobile-open .xg-nav-mobile-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    body.xg-nav-mobile-open .xg-nav-mobile-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        display: flex !important;
    }

}

/* ==========================================================
   END — XGLOBAL™ ECOSYSTEM COMMAND NAVIGATION
   ========================================================== */