/* =========================================================
   TOP NUDGE BAR
========================================================= */

.top-nudge{

    position:fixed;

    bottom:18px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(-24px);

    width:
        min(92%,720px);

    z-index:3000;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s;

}

.top-nudge.show{

    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);

}

.top-nudge-inner{

    display:flex;
    align-items:center;
    gap:18px;

    padding:14px 18px;

    border-radius:22px;

    background:
        rgba(31,31,41,.82);

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

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

}

[data-theme="light"] .top-nudge-inner{

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

    border:
        1px solid rgba(15,23,42,.08);

}

.top-nudge-pill{

    display:flex;
    align-items:center;
    gap:8px;

    white-space:nowrap;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c4dff
        );

    color:#fff;

    padding:
        10px 14px;

    border-radius:999px;

    font-size:.82rem;
    font-weight:700;

}

.top-nudge p{

    flex:1;

    font-size:.95rem;

    color:var(--text);

}

.top-nudge-btn{

    display:flex;
    align-items:center;
    gap:8px;

    white-space:nowrap;

    color:#fff;

    background:var(--green);

    padding:
        12px 16px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.top-nudge-btn:hover{

    transform:translateY(-2px);

}

.top-nudge-close{

    width:38px;
    height:38px;

    border:none;

    background:transparent;

    color:var(--muted);

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}

.top-nudge-close:hover{

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

    color:var(--text);

}

@media(max-width:680px){

    .top-nudge{

        top:12px;

    }

    .top-nudge-inner{

        gap:12px;

        padding:14px;

        border-radius:20px;

        flex-wrap:wrap;

    }

    .top-nudge p{

        width:100%;

        order:3;

        font-size:.9rem;

    }

}



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

.nav-actions{

    display:flex;
    align-items:center;
    gap:12px;

}

.mobile-menu-toggle{

    width:52px;
    height:52px;

    border-radius:16px;

    border:
        1px solid var(--border);

    background:var(--surface-2);

    display:none;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.mobile-menu-toggle span{

    width:18px;
    height:2px;

    border-radius:999px;

    background:var(--text);

    transition:.25s;

}

/* =========================================================
   FULLSCREEN MENU
========================================================= */

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:4000;

    background:
        rgba(8,8,12,.72);

    backdrop-filter:
        blur(18px);

    opacity:0;
    visibility:hidden;

    transition:.35s;

}

.mobile-menu.show{

    opacity:1;
    visibility:visible;

}

.mobile-menu-inner{

    position:absolute;

    inset:0;

    background:var(--bg);

    padding:28px;

    display:flex;
    flex-direction:column;

    transform:
        translateY(18px);

    transition:.4s ease;

}

.mobile-menu.show .mobile-menu-inner{

    transform:translateY(0);

}

.mobile-menu-top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:50px;

}

.mobile-close{

    width:52px;
    height:52px;

    border-radius:16px;

    border:
        1px solid var(--border);

    background:var(--surface-2);

    color:var(--text);

    font-size:1.2rem;

    cursor:pointer;

}

.mobile-menu-links{

    display:flex;
    flex-direction:column;

    gap:14px;

}

.mobile-menu-links a{

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px;

    border-radius:22px;

    background:var(--surface-2);

    border:
        1px solid var(--border);

    color:var(--text);

    font-size:1.15rem;
    font-weight:700;

    transition:.25s;

}

.mobile-menu-links a:hover{

    transform:translateX(4px);

    border-color:
        rgba(86,45,212,.35);

}

.mobile-menu-links i{

    font-size:1.4rem;

    color:var(--primary);

}

.mobile-menu-footer{

    margin-top:auto;

}

.mobile-menu-footer .btn{

    width:100%;

    height:58px;

    border-radius:18px;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .nav-links{

        display:none;

    }

    .mobile-menu-toggle{

        display:flex;

    }

}