.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* AICODE-NOTE: На мобиле шапка максимально компактная (паддинг 8px), чтобы
       пиксельная атмосфера сайта не терялась за «размазанной» полосой.
       На планшете+ паддинг возвращается через @media ниже. */
    padding: 8px 0;
    background: transparent;
    transition: background var(--transition-base);
}

/* AICODE-NOTE: Зефирный оттенок — нежно-розовый с молочным подтоном (как маршмеллоу).
   Градиент даёт живой перелив, blur усиливает «воздушность». */
.header--scrolled {
    background: linear-gradient(180deg, rgba(255, 226, 236, 0.88) 0%, rgba(253, 214, 227, 0.82) 100%);
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    box-shadow: 0 4px 18px rgba(197, 130, 160, 0.18);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-lg);
}

/* AICODE-NOTE: Nav + CTA скрыты на мобильных, появляются с 1024px */
.header__nav {
    display: none;
}

.header__nav-list {
    display: flex;
    gap: var(--sp-xl);
    align-items: center;
}

.header__nav-link {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--transition-fast);
    position: relative;
    padding: 4px 2px;
}

.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary-dark);
    transition: width var(--transition-base);
}

.header__nav-link:hover {
    color: var(--color-primary-dark);
}

.header__nav-link:hover::after {
    width: 100%;
}

/* AICODE-NOTE: Десктопный CTA — белая пилюля с пиксельным лавандовым бордером (как в оригинале).
   Кнопка двухэтажная: основной текст «Записаться на консультацию» + мелкая сноска
   «*без оплаты на первом этапе». flex column выстраивает их одна под другой. */
.header__cta {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    --frame-w: 2px;
    --frame-step: 5px;
    --frame-color: var(--color-primary);
    --frame-bg: #ffffff;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.2;
    padding: 6px 18px;
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    transition: color var(--transition-fast);
    position: relative;
    isolation: isolate;
    background: var(--frame-color);
    clip-path: polygon(
        var(--frame-step) 0, calc(100% - var(--frame-step)) 0,
        calc(100% - var(--frame-step)) var(--frame-step), 100% var(--frame-step),
        100% calc(100% - var(--frame-step)), calc(100% - var(--frame-step)) calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) 100%, var(--frame-step) 100%,
        var(--frame-step) calc(100% - var(--frame-step)), 0 calc(100% - var(--frame-step)),
        0 var(--frame-step), var(--frame-step) var(--frame-step)
    );
}

.header__cta::before {
    content: '';
    position: absolute;
    inset: var(--frame-w);
    background: var(--frame-bg);
    z-index: -1;
    clip-path: inherit;
}

.header__cta-main {
    font-weight: 500;
    line-height: 1.2;
}

.header__cta-note {
    font-size: 0.78em;
    color: var(--color-text-muted);
    line-height: 1.1;
}

.header__cta:hover {
    --frame-bg: var(--color-primary);
    color: #fff;
}

.header__cta:hover .header__cta-note {
    color: rgba(255, 255, 255, 0.85);
}

/* AICODE-NOTE: Бургер — светло-розовый круг (цвет hero-фона) как на оригинале magicfitness.pro.
   ВАЖНО: базовое правило ДОЛЖНО стоять до медиазапроса @media(min-width:900px),
   иначе позднее правило display:flex переопределит display:none из медиа-блока.
   Размер 44×44 — минимум по Apple HIG для touch-таргета. */
.burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    z-index: 110;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: var(--transition-base);
    backdrop-filter: blur(6px);
}

/* AICODE-NOTE: Десктопная навигация при ≥900px.
   В оригинале magicfitness.pro меню равномерно РАСТЯНУТО от левого края
   контейнера до CTA-кнопки справа. Реализовано через flex-grow на .header__nav
   и justify-content: space-between на списке пунктов. */
@media (min-width: 900px) {
    .header {
        padding: var(--sp-md) 0;
    }

    .header__inner {
        justify-content: space-between;
        gap: var(--sp-lg);
    }

    .header__nav {
        display: block;
        flex: 1 1 auto;
    }

    .header__nav-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp-md);
        width: 100%;
        max-width: 720px;
        margin: 0 auto 0 var(--sp-2xl);
        padding-right: var(--sp-xl);
    }

    .header__nav-link {
        font-size: var(--fs-md);
    }

    .header__cta {
        display: inline-flex;
        flex-shrink: 0;
        font-size: var(--fs-sm);
        padding: 8px 22px;
    }

    .burger {
        display: none;
    }
}

.burger:hover {
    background: rgba(255, 255, 255, 0.7);
}

.burger__line {
    width: 18px;
    height: 2px;
    background: #3a2540;
    border-radius: 0;
    transition: var(--transition-base);
}

.burger--open .burger__line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.burger--open .burger__line:nth-child(2) {
    opacity: 0;
}

.burger--open .burger__line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-bg-hero);
    padding: 100px var(--sp-xl) var(--sp-xl);
    transition: right var(--transition-base);
    z-index: 105;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-menu--open {
    right: 0;
}

.mobile-menu__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 104;
}

.mobile-menu__overlay--visible {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

.mobile-menu__link {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--color-text);
}

/* AICODE-NOTE: CTA в мобильном меню — оформлена ТОЧНО как .hero__cta:
   пиксель-рамка с лесенкой в углах (clip-path), фиолетовый внешний
   контур + белая внутренняя заливка через ::before.
   Две строки: основной текст (pixel-font) + тонкая подпись (body-font).
   Это визуальная константа через весь сайт: в хиро, в десктопной шапке
   и здесь — один и тот же стиль CTA. */
.mobile-menu__cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-lg);
    font-family: var(--font-pixel);
    font-size: var(--fs-xs);
    line-height: 1.2;
    padding: 12px 22px;
    color: var(--color-text);
    background: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
    isolation: isolate;
    text-align: center;
    --frame-w: 3px;
    --frame-step: 8px;
    clip-path: polygon(
        var(--frame-step) 0, calc(100% - var(--frame-step)) 0,
        calc(100% - var(--frame-step)) var(--frame-step), 100% var(--frame-step),
        100% calc(100% - var(--frame-step)), calc(100% - var(--frame-step)) calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) 100%, var(--frame-step) 100%,
        var(--frame-step) calc(100% - var(--frame-step)), 0 calc(100% - var(--frame-step)),
        0 var(--frame-step), var(--frame-step) var(--frame-step)
    );
}

.mobile-menu__cta-main {
    font-size: inherit;
    line-height: 1.2;
}

/* AICODE-NOTE: Мелкая подпись — body-шрифт в ~68% кегля (идентично hero),
   чтобы приписка «*без оплаты на первом этапе» оставалась читаемой. */
.mobile-menu__cta-note {
    font-family: var(--font-body);
    font-size: 0.68em;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.2;
}

/* AICODE-NOTE: ::before — внутренняя белая плашка, inset на --frame-w
   создаёт эффект «рамка + фон». clip-path: inherit повторяет лесенку. */
.mobile-menu__cta::before {
    content: '';
    position: absolute;
    inset: var(--frame-w);
    background: #ffffff;
    z-index: -1;
    clip-path: inherit;
}

.mobile-menu__cta:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
}

.mobile-menu__cta:hover .mobile-menu__cta-note {
    color: rgba(255, 255, 255, 0.85);
}

.mobile-menu__cta:hover::before {
    background: var(--color-primary);
}