.header {

    position: sticky;

    top: 0;

    z-index: 999;

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

    backdrop-filter: blur(15px);

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

.nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 0;
}

.logo-block {

    display: flex;

    align-items: center;

    gap: 15px;
}

.logo-circle {

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background:
            linear-gradient(
                    135deg,
                    var(--main),
                    var(--main-light)
            );

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 28px;

    font-weight: 900;

    box-shadow:
            0 10px 30px rgba(32,47,91,.25);
}

.logo-title {

    font-size: 34px;

    font-weight: 900;

    color: var(--main);
}

.logo-subtitle {

    font-size: 13px;

    color: #64748b;
}

.menu {

    display: flex;

    gap: 35px;
}

.menu a {

    text-decoration: none;

    color: var(--main);

    font-weight: 700;

    transition: .3s;
}

.menu a:hover {
    color: var(--main-light);
}

.mobile-btn {
    display: none;
}