/*==================================================
NAVBAR
==================================================*/

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:18px 0;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:all .35s ease;

}

.navbar.scrolled{

    padding:12px 0;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#000;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:800;

}

.logo-title{

    display:block;

    font-size:22px;

    font-weight:800;

}

.logo-subtitle{

    display:block;

    font-size:12px;

    color:var(--muted);

}

.nav-links{

    list-style:none;

    display:flex;

    gap:34px;

}

.nav-links a{

    font-weight:600;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--accent);

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

.mobile-toggle{

    display:none;

    background:none;

    border:none;

    font-size:32px;

    cursor:pointer;

}

.mobile-menu{

    display:none;

    position:fixed;

    top:88px;

    left:0;

    width:100%;

    background:#fff;

    padding:25px;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

    z-index:999;

}

.mobile-menu.active{

    display:block;

}

.mobile-menu a{

    display:block;

    padding:14px 0;

    font-weight:600;

}

.mobile-cta{

    margin-top:15px;

    background:#000;

    color:#fff;

    padding:14px;

    border-radius:14px;

    text-align:center;

}