.site-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 100;

    transition: top var(--transition-default);
}

.site-header.is-scrolled {
    top: 12px;
}

.site-header.is-scrolled .navbar {
    background-color: rgba(7, 7, 10, 0.82);

    border-color: rgba(255, 255, 255, 0.12);

    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(255, 70, 92, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

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

    height: 68px;

    background-color: rgba(8, 8, 11, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: var(--radius-large);

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

    transition:
        background-color var(--transition-default),
        border-color var(--transition-default),
        box-shadow var(--transition-default),
        backdrop-filter var(--transition-default);
}

.navbar__menu {
    display: contents;
}

.navbar__logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.navbar__logo-mark {
    color: var(--color-accent);
    font-size: 12px;
}

.navbar__links {
    display: flex;
    align-items: center;
    gap: 36px;
}

.navbar__links a {
    font-size: 14px;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.navbar__links a:hover {
    color: var(--color-text-primary);
}

.navbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 18px;

    font-size: 14px;
    font-weight: 500;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

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

.navbar__cta:hover {
    color: var(--color-background);
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.navbar__toggle {
    display: none;
}