.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    padding:22px 40px;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    z-index:1000;

    background:rgba(10,10,10,.85);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    margin-left:0;

    font-family:var(--font-heading);
    font-size:2rem;
    letter-spacing:1px;
}

.logo img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.logo span{
    color:var(--color-primary);
}

.nav-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:32px;
}

.nav-links a{
    color:var(--color-muted);
    font-weight:700;
    transition:var(--transition);
}

.nav-links a:hover,
.nav-links a.active{
    color:var(--color-primary);
}

.nav-btn{
    justify-self:end;

    padding:12px 24px;
    border-radius:999px;

    background:var(--color-primary);
    color:#000;

    font-weight:800;
    transition:var(--transition);
}

.nav-btn:hover{
    transform:translateY(-3px);
}