:root {
    --color-text: #1c1f24;
    --color-text-muted: #5b6270;
    --color-background: #ffffff;
    --color-background-muted: #f4f5f7;
    --color-accent: #1f4e79;
    --color-border: #dde1e6;
    --radius: 12px;
    /* Закреплённая часть шапки: на десктопе — вся шапка; якоря секций встают сразу под ней. */
    /* 64px + нижняя рамка 1px */
    --header-sticky-height: 65px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1, h2, h3, h4 {
    line-height: 1.25;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* header */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 64px;
}

.header__logo {
    font-weight: 700;
    font-size: 20px;
    color: var(--color-text);
    text-decoration: none;
}

/* menu */
.menu {
    display: flex;
    gap: 24px;
}

.menu__item {
    color: var(--color-text-muted);
    text-decoration: none;
}

.menu__item:hover {
    color: var(--color-accent);
}

/* btn */
.btn {
    display: inline-block;
    /* Высота: 12 + 24 + 12 + рамка 2 × 2 = 52px. По бокам 20px — «Открыть калькулятор» держится в одну строку в трёх колонках от 961px. */
    padding: 12px 20px;
    border-radius: var(--radius);
    border: 2px solid var(--color-accent);
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    text-align: center;
}

.btn_theme_primary {
    background: var(--color-accent);
    color: #ffffff;
}

.btn_theme_outline {
    background: transparent;
    color: var(--color-accent);
}

.btn_background_white {
    background: #ffffff;
}

/* hero */
.hero {
    /* Высота первого экрана: весь вьюпорт минус шапка (64px) — без белой полосы снизу. */
    --hero-height: clamp(560px, calc(100vh - var(--header-sticky-height)), 1040px);
    /* Колонка фото пропорциональна высоте экрана (0.72 ≈ пропорция снимка 2:3), но не шире 46% —
       иначе на широком невысоком окне снимок обрезается по пояс и выглядит «приближенным». */
    --hero-photo-width: min(calc(var(--hero-height) * 0.72), 46vw);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hero-photo-width);
    min-height: var(--hero-height);
    /* Тон повторяет фон снимка по высоте кадра — шва между фото и страницей нет. */
    background: linear-gradient(to bottom, #e9e8ee 0%, #e8e7ec 30%, #e6e4e9 43%, #e1dfe4 65%, #dcdadd 86%, #dcdadd 100%);
}

.hero__content {
    display: flex;
    flex-direction: column;
    /* Колонка текста — по центру высоты фото. */
    justify-content: center;
    min-width: 0;
    /* Левый край — по сетке контейнера (как у логотипа), справа — зазор до фото. */
    padding: 40px 56px 40px max(20px, calc(((100vw - 1120px) / 2) + 20px));
}

.hero__label {
    max-width: 580px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cfd0d8;
    font-size: 15px;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.hero__title {
    max-width: 580px;
    margin-bottom: 24px;
    font-size: 44px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hero__text {
    max-width: 580px;
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__media {
    position: relative;
    min-width: 0;
}

.hero__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Верх кадра целиком (воздух над головой), обрезается только низ — ниже рук. */
    object-position: 50% 0;
    /* Левый край снимка мягко растворяется в фоне; 10% — растушёвка проходит по фону, не по жакету. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000000 10%);
    mask-image: linear-gradient(to right, transparent 0, #000000 10%);
}

/* pains: «С чем ко мне приходят» — список слева, карточка бесплатного разбора справа */
.pains {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0 48px;
    /* Список и карточка — каждый по высоте содержимого, выровнены по верху. */
    align-items: start;
    padding-top: 72px;
    padding-bottom: 72px;
    /* Якорь #consultation: блок под закреплённой шапкой, заголовок — после 72px отступа. */
    scroll-margin-top: var(--header-sticky-height);
}

.pains__title {
    grid-column: 1 / -1;
}

.pains__column {
    min-width: 0;
}

.pains__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pains__point {
    position: relative;
    padding: 13px 0 13px 30px;
    border-bottom: 1px solid var(--color-border);
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
}

.pains__point::before {
    content: "✕";
    position: absolute;
    top: 13px;
    left: 2px;
    color: #b54a44;
    font-weight: 700;
}

/* Последний пункт без линии: концовка «Не знаете, с чего начать?…» читается выводом из списка. */
.pains__point:last-child {
    border-bottom: 0;
}

.pains__call {
    margin-top: 12px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
}

.pains-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    /* Акцентная полоса — только у предложения бесплатного разбора (здесь и в полосе-повторе). */
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-background);
}

.pains-offer__title {
    font-size: 20px;
    text-wrap: balance;
}

.pains-offer__duration {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent);
}

.pains-offer__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.pains-offer__button {
    align-self: stretch;
    /* Кнопка сразу после текста — карточка по высоте содержимого. */
    margin-top: 24px;
}

/* section */
.section {
    padding: 72px 0;
    scroll-margin-top: var(--header-sticky-height);
}

.section_theme_muted {
    background: var(--color-background-muted);
}

.section__title {
    margin-bottom: 32px;
    font-size: 32px;
    text-wrap: balance;
}

/* about */
.about {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about__text {
    /* ~75 знаков в строке */
    max-width: 720px;
}

.about__paragraph {
    text-wrap: pretty;
}

.about__paragraph + .about__paragraph {
    margin-top: 16px;
}

/* facts */
.facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.facts__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
}

.facts__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.facts__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.facts__title {
    font-size: 20px;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: balance;
}

.facts__caption {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.facts__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.facts__point {
    position: relative;
    padding: 11px 0 11px 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}

.facts__point:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.facts__point::before {
    content: "";
    position: absolute;
    /* Середина первой строки: 11px отступа + 24px / 2 − 5px / 2 */
    top: 21px;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--color-accent);
}

.facts__note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cards_columns_two {
    grid-template-columns: repeat(2, 1fr);
}

.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.card_wide {
    grid-column: 1 / -1;
}

.card__badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 6px;
    background: #e3eef8;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
}

.card__badge_theme_white {
    background: #ffffff;
}

/* Бесплатные материалы: светлый тон акцентного цвета вместо белой карточки с рамкой. */
.card_theme_tinted {
    border-color: transparent;
    background: #eef3f8;
}

.card__title {
    font-size: 20px;
    text-wrap: balance;
}

.card__text {
    margin-bottom: 8px;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

/* Описание в широкой карточке — не длиннее ~75 знаков в строке. */
.card__text_width_limited {
    max-width: 720px;
}

.card__subtitle {
    margin-top: 4px;
    font-size: 17px;
    text-wrap: balance;
}

.card__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Маркер — квадрат 5px, как в плитках «Обо мне»; разделителей между пунктами нет (списки внутри карточек услуг). */
.card__point {
    position: relative;
    padding-left: 18px;
    text-wrap: pretty;
}

.card__point::before {
    content: "";
    position: absolute;
    /* Середина строки: 27px / 2 − 5px / 2 ≈ 11px, +1px на оптическую середину строчных букв */
    top: 12px;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--color-accent);
}

.card__point + .card__point {
    margin-top: 6px;
}

.card__format {
    color: var(--color-text-muted);
    text-wrap: pretty;
}

/* Тихая ссылка-мост из материалов к бесплатному разбору. */
.card__link {
    align-self: flex-start;
    color: var(--color-accent);
    font-size: 15px;
    text-decoration: none;
}

.card__link:hover {
    text-decoration: underline;
}

/* Одиночная кнопка карточки прижата к низу — в ряду кнопки стоят на одной линии. */
.card__button {
    margin-top: auto;
}

/* Цена и действие прижаты к низу карточки. */
.card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.card__price {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

/* «Мест нет» — статус, а не кнопка. */
.card__status {
    color: var(--color-text-muted);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

/* services-note: короткая оговорка под карточками услуг */
.services-note {
    margin-top: 16px;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* offer-band: повтор бесплатного разбора после услуг */
.offer-band {
    margin-top: 24px;
}

.offer-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    min-height: 176px;
    padding: 32px 40px;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-background);
}

.offer-band__content {
    min-width: 0;
}

.offer-band__title {
    font-size: 20px;
    text-wrap: balance;
}

.offer-band__duration {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent);
}

.offer-band__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.offer-band__button {
    flex-shrink: 0;
    min-width: 220px;
}

/* social */
.social {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Схема карточки: название → описание → «Перейти» внизу. */
.social__item {
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    text-decoration: none;
}

.social__item[href]:hover {
    border-color: var(--color-accent);
}

.social__title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.social__text {
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.social__action {
    margin-top: auto;
    padding-top: 16px;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.social__item[href]:hover .social__action {
    text-decoration: underline;
}

.social__note {
    margin-top: 20px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* footer */
.footer {
    padding: 48px 0;
    background: var(--color-text);
    color: #c9ced6;
    font-size: 15px;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__name {
    font-weight: 700;
    color: #ffffff;
}

.footer__copyright {
    color: #8a909a;
    font-size: 14px;
}

.footer__link {
    color: #c9ced6;
}

/* узкий десктоп: колонка текста 560px, зазор до фото 48px */
@media (min-width: 1101px) and (max-width: 1199px) {
    .hero__content {
        padding-right: 48px;
    }

    .hero__label,
    .hero__title,
    .hero__text {
        max-width: 560px;
    }

    .hero__title {
        font-size: 42px;
    }

    .hero__text {
        font-size: 17px;
    }
}

/* tablet */
@media (max-width: 1100px) and (min-width: 801px) {
    .hero__title {
        /* Нижняя граница 24px: на 801–900px заголовок держит три строки рядом с колонкой фото 2:3. */
        font-size: clamp(24px, calc((100vw - var(--hero-photo-width) - 60px) / 12.2), 44px);
    }

    .hero {
        /* Колонка фото в пропорции снимка 2:3: кадр виден целиком по ширине, фигура не обрезается.
           Ширина — 46% экрана, но не больше, чем позволяет высота вьюпорта (минус шапка). */
        --hero-photo-width: min(46vw, calc((100vh - var(--header-sticky-height)) / 1.5));
        --hero-height: calc(var(--hero-photo-width) * 1.5);
    }

    .hero__content {
        justify-content: center;
        padding-top: 32px;
        padding-right: 40px;
        padding-bottom: 32px;
    }

    .hero__text {
        margin-bottom: 28px;
        font-size: 17px;
    }

    .pains {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
    }

    .pains-offer {
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* узкий планшет: рядом с карточкой список уходит в 3–4 строки на пункт и карточка пустеет —
   список на всю ширину, карточка под ним в строку (текст слева, кнопка справа) */
@media (max-width: 960px) and (min-width: 801px) {
    .pains {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pains__title {
        margin-bottom: 0;
    }

    .pains-offer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 40px;
        align-items: center;
    }

    .pains-offer__title,
    .pains-offer__duration,
    .pains-offer__text {
        grid-column: 1;
    }

    .pains-offer__text {
        margin-bottom: 0;
    }

    .pains-offer__button {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        margin-top: 0;
    }
    /* Три колонки материалов здесь уже 230px — кнопки переносятся: карточки в столбик, кнопка по ширине текста. */
    .cards {
        grid-template-columns: 1fr;
    }

    .cards_columns_two {
        grid-template-columns: repeat(2, 1fr);
    }

    .card__button {
        align-self: flex-start;
        min-width: 240px;
    }
}

/* mobile */
@media (max-width: 800px) {
    /* Шапка в две строки: логотип (8px + 28px) и меню (44px). При прокрутке строка логотипа уезжает вверх,
       закреплена только строка меню с нижней линией: 44px + 1px. */
    :root {
        --header-logo-row-height: 36px;
        --header-sticky-height: 45px;
    }

    .header {
        top: calc(-1 * var(--header-logo-row-height));
    }

    .header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: auto;
        padding-top: 8px;
    }

    .header__logo {
        font-size: 17px;
        line-height: 28px;
    }

    .menu {
        gap: 0 16px;
        /* Страховка при увеличенном системном шрифте: меню прокручивается само, страница — нет. */
        overflow-x: auto;
        font-size: 15px;
    }

    /* Зона нажатия пункта меню — 44px по высоте; пункт не переносится внутри себя. */
    .menu__item {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
    }

    .facts,
    .cards,
    .social,
    .footer__inner {
        grid-template-columns: 1fr;
    }

    /* Кнопка карточки — на всю ширину отдельной строкой; статус «Мест нет» остаётся в строке с ценой. */
    .card__button {
        width: 100%;
    }

    .section {
        padding: 48px 0;
    }

    .section__title {
        margin-bottom: 24px;
        font-size: 24px;
        line-height: 1.25;
    }

    /* Основной текст на телефоне — единый 16px / 1.55; 14px — только метки и сноски. */
    .about__paragraph,
    .card__text,
    .card__point,
    .card__format,
    .social__text,
    .pains__point {
        font-size: 16px;
        line-height: 1.55;
    }

    /* Середина строки 16px × 1.55 ≈ 25px: 25px / 2 − 5px / 2 = 10px, +1px на оптическую середину строчных букв. */
    .card__point::before {
        top: 11px;
    }

    .card__title,
    .facts__title,
    .pains-offer__title,
    .offer-band__title {
        font-size: 18px;
    }

    .card,
    .facts__item,
    .social__item {
        padding: 24px 20px;
    }

    .offer-band__inner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 24px 20px;
    }

    .offer-band__button {
        min-width: 0;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
        background: none;
    }

    .hero__media {
        order: -1;
        /* Фото ужимается на низких экранах, чтобы основная кнопка оставалась в первом экране.
           Вычитаемое = шапка (36 + 45px) + 363px: тексты и основная кнопка (до 353px на 375px) + 10px запаса;
           первая строка — для браузеров без svh. */
        height: clamp(220px, calc(100vh - (var(--header-logo-row-height) + var(--header-sticky-height)) - 363px), 340px);
        height: clamp(220px, calc(100svh - (var(--header-logo-row-height) + var(--header-sticky-height)) - 363px), 340px);
        background: #e9e8ee;
    }

    .hero__photo {
        /* Кадр по лицу, руке и плечам. */
        object-position: 50% 30%;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Отступы первого экрана поджаты, чтобы основная кнопка помещалась и на 375x667 при фото 220px. */
    .hero__content {
        padding: 16px 20px 8px;
    }

    .hero__label {
        margin-bottom: 12px;
        padding-bottom: 10px;
        font-size: 14px;
        line-height: 1.45;
    }

    .hero__title {
        margin-bottom: 12px;
        font-size: clamp(22px, calc((100vw - 40px) / 12.2), 34px);
    }

    .hero__text {
        margin-bottom: 18px;
        font-size: 16px;
        line-height: 1.55;
    }

    .hero__actions {
        flex-direction: column;
    }

    .pains__title {
        margin-bottom: 0;
    }

    .pains {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .pains__point {
        padding: 12px 0 12px 28px;
    }

    .pains__point::before {
        top: 12px;
    }

    .pains__call {
        font-size: 16px;
    }

    .pains-offer {
        padding: 24px 20px;
    }
}

/* узкий телефон (320–359px): логотип и 4 пункта меню — каждый в одну строку, первый экран плотнее */
@media (max-width: 359px) {
    .header__logo {
        font-size: 15px;
    }

    .menu {
        column-gap: 10px;
    }

    /* Основная кнопка здесь в две строки (76px) — чтобы она осталась в первом экране 320x640 при фото 220px,
       первый экран плотнее. */
    .hero__content {
        padding-top: 12px;
    }

    .hero__label {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .hero__title {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .hero__text {
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.5;
    }
}