/* =========================================================
   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{

        display:none;

    }

    .top-nudge-inner{

        gap:8px;

        padding:9px 10px;

        border-radius:16px;

        flex-wrap:nowrap;
        box-shadow:0 14px 36px rgba(0,0,0,.28);

    }

    .top-nudge.show{

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

    }

    .top-nudge-pill{

        padding:7px 9px;
        font-size:.72rem;
        gap:5px;

    }

    .top-nudge p{

        min-width:0;
        font-size:.78rem;
        line-height:1.25;

    }

    .top-nudge-btn{

        padding:8px 10px;
        border-radius:12px;
        font-size:.75rem;
        gap:5px;

    }

    .top-nudge-close{

        width:32px;
        height:32px;
        border-radius:10px;
        flex:0 0 auto;

    }

}

@media(max-width:420px){

    .top-nudge-pill{

        display:none;

    }

    .top-nudge p{

        font-size:.76rem;

    }

    .top-nudge-btn{

        padding:8px 9px;

    }

}



/* =========================================================
   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 .mobile-client-area-btn{

    display:flex;
    width:100%;
    min-height:72px;
    padding:0;
    border-radius:22px;
    background:transparent;
    border:0;

}

.mobile-menu-links .mobile-client-area-btn:hover{

    transform:translateX(4px);

}

.mobile-menu-links .mobile-client-area-btn .client-area-content{

    width:100%;
    min-height:72px;

}

.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){

    header{

        width:100%;

    }

    .nav{

        min-height:72px;
        gap:12px;

    }

    .logo{

        display:flex;
        align-items:center;
        flex:0 0 auto;

    }

    .logo img{

        display:block;
        max-width:154px;
        height:auto;

    }

    .nav-right{

        margin-left:auto;
        gap:10px;

    }

    .nav-links{

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

    }

    .nav-links > a[href="/pricing/"],
    .nav-links > a[href="/faqs/"],
    .nav-links > a[href="/buy-now/"],
    .nav-links > .theme-toggle{

        display:none;

    }

    .nav-links > a[href="/features/"]{

        display:inline-flex;
        align-items:center;
        min-height:44px;
        padding:0 10px;
        font-size:.9rem;
        white-space:nowrap;

    }

    .nav-links > .client-area-btn{

        display:inline-flex;
        min-width:0;
        height:44px;
        border-radius:14px;

    }

    .nav-links > .client-area-btn .client-area-content{

        height:44px;
        padding:0 11px;
        gap:7px;

    }

    .nav-links > .client-area-btn .client-area-text small,
    .nav-links > .client-area-btn .client-area-arrow{

        display:none;

    }

    .mobile-menu-toggle{

        display:flex;

    }

}

@media(max-width:420px){

    .mobile-menu-inner{

        padding:22px;

    }

    .mobile-menu-links a{

        padding:18px;
        font-size:1rem;

    }

    .logo img{

        max-width:136px;

    }

    .nav-links > a[href="/features/"]{

        display:none;

    }

    .nav-links > .client-area-btn .client-area-icon{

        display:none;

    }

}