/* ---------- Base ---------- */
:root {
    --blue: #2B3DFF;
    --blue-light: #4256FF;
    --lime: #B6FF4A;
    --header-bg: #E9EBFF;
    --dark: #111111;
    --light-bg: #F4F2EE;
    --gray: #6B6B6B;
    --border: #E6E6E6;

    /* контейнер ступенями, как в Bootstrap 5 (+ ступень макета 1576).
       Вся вёрстка считается от --container, поэтому меняется только он */
    --gutter: 20px;
    --container: calc(100vw - var(--gutter) * 2);

    /* шапка: высота и на сколько она сжимается после начала прокрутки */
    --header-h: 70px;
    --header-collapse: 18px;
    --white: #FFFFFF;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Noto Sans', Arial, sans-serif;
}

@media (min-width: 576px)  { :root { --gutter: 16px; --container: 540px; } }
@media (min-width: 768px)  { :root { --container: 720px; } }
@media (min-width: 992px)  { :root { --container: 960px; } }
@media (min-width: 1200px) { :root { --container: 1140px; } }
@media (min-width: 1400px) { :root { --container: 1320px; } }
@media (min-width: 1680px) { :root { --gutter: 32px; --container: 1576px; } }

/* до 1680: шапка ниже — 60px, после прокрутки 46px */
@media (max-width: 1679.98px) { :root { --header-h: 60px; --header-collapse: 14px; } }

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* плавная прокрутка по якорям */
html {
    scroll-behavior: smooth;
    /* мобильные браузеры не укрупняют мелкий текст сами (Chrome Android, Safari) —
       размеры остаются такими, как в стилях */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* при переходе по якорю секция не прячется под шапкой */
section[id] {
    scroll-margin-top: calc(var(--header-h) - var(--header-collapse)); /* высота шапки после прокрутки */
}

/* «Обо мне» ведёт на самый верх страницы */
#about {
    scroll-margin-top: var(--header-h);
}

body {
    padding-top: var(--header-h); /* место под фиксированную шапку */
    font-family: var(--font-body);
    color: var(--dark);
    background: var(--light-bg); /* под прозрачной шапкой в самом верху — светлый фон */
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

/* контентные картинки и иконки нельзя выделить и перетащить мышью */
img,
svg {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 100%;
    font-weight: 500;
    white-space: nowrap;
    transition: transform .2s ease, filter .2s ease;
}

.btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn--blue {
    background: var(--blue);
    color: var(--white);
}

.btn--lime {
    background: var(--lime);
    color: var(--dark);
}

.btn--outline {
    border: 1px solid var(--white);
    color: var(--white);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, .1);
    filter: none;
}

.btn--lg {
    height: 48px;
    padding: 0 32px;
}

/* ---------- Header ---------- */
.header {
    /* фиксирована сверху (вне потока) — её изменения не сдвигают страницу.
       Уменьшение при прокрутке сделано только трансформациями (без изменения
       высоты и размеров шрифта) — поэтому анимация плавная, без подёргиваний */
    --shift: 0px;        /* сдвиг содержимого шапки */
    --logo-scale: 1;
    --btn-scale: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(17, 17, 17, .06);
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    transition: transform .3s ease;
}

/* после начала прокрутки (класс ставит скрипт): шапка уезжает вверх на --header-collapse
   (70 → 52px), а содержимое опускается на половину, чтобы остаться по центру */
.header.is-scrolled {
    --shift: calc(var(--header-collapse) / 2);
    --logo-scale: .82;
    --btn-scale: .86;
    transform: translateY(calc(var(--header-collapse) * -1));
}

.header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1920px;
    height: var(--header-h);
    margin: 0 auto;
    padding: 0 64px;
}

.header .logo {
    transform: translateY(var(--shift)) scale(var(--logo-scale));
    transform-origin: left center;
    transition: transform .3s ease;
}

.header .btn {
    transform: translateY(var(--shift)) scale(var(--btn-scale));
    transform-origin: right center;
    transition: transform .3s ease, filter .2s ease;
}

.header .btn:hover {
    transform: translateY(calc(var(--shift) - 1px)) scale(var(--btn-scale));
}

/* кнопка в шапке скрыта, пока виден первый экран (в hero есть своя кнопка);
   появляется, когда hero прокручен (класс ставит скрипт): проявляется из нуля
   и делает «импульс» — чуть больше, чуть меньше, свой размер.
   Импульс — на отдельном свойстве scale, чтобы не спорить с transform */
/* появление — только анимацией (без параллельного перехода прозрачности: два механизма
   на одном свойстве и давали мерцание); скрытие — короткий переход, он задан только здесь */
.header:not(.show-cta) .btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, opacity .2s ease, visibility 0s linear .2s;
}

.header.show-cta .btn {
    animation: header-btn-in .5s cubic-bezier(.25, .8, .35, 1) both;
}

@keyframes header-btn-in {
    0%   { opacity: 0; scale: .92; }
    45%  { opacity: 1; scale: 1.04; }
    100% { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .header.show-cta .btn { animation: none; }
}

.logo {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    line-height: 100%;
    color: var(--blue);
}

@media (max-width: 1679.98px) {
    .header .logo { font-size: 28px; }
}

.nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%, var(--shift, 0px)); /* ровно по центру шапки, независимо от лого и кнопки */
    transition: transform .3s ease;
    display: flex;
    gap: 30px;
}

.nav__link {
    position: relative;
    font-size: 14px;
    color: var(--dark);
    transition: color .2s ease;
}

/* подсветка пункта текущей секции (класс ставит скрипт) */
.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform .25s ease;
    opacity: 0.6;
}

.nav__link.is-active {
    color: var(--blue);
}

.nav__link.is-active::after {
    transform: scaleX(1);
}

.nav__link:hover {
    color: var(--blue);
}

.header .btn {
    font-size: 14px;
}

/* ---------- Бургер (до 992px) ---------- */
.burger {
    display: none;
}

@media (max-width: 991.98px) {
    /* на планшетах и телефонах шапка выровнена по контейнеру */
    .header__inner {
        position: static; /* панель меню позиционируется от шапки — на всю ширину экрана */
        max-width: calc(var(--container) + var(--gutter) * 2);
        padding: 0 var(--gutter);
    }

    .header.is-open {
        background: var(--white);
    }

    .header .btn {
        margin-left: auto;
    }

    .burger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;   /* зона нажатия не меньше 44px */
        height: 44px;
        margin-left: 8px;
        margin-right: -10px; /* линии — по краю контейнера */
        border: 0;
        background: none;
        cursor: pointer;
        transform: translateY(var(--shift));
        transition: transform .3s ease;
    }

    .burger__lines,
    .burger__lines::before,
    .burger__lines::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--dark);
        transition: transform .25s ease, background-color .2s ease;
    }

    .burger__lines {
        position: relative;
    }

    .burger__lines::before,
    .burger__lines::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .burger__lines::before { transform: translateY(-7px); }
    .burger__lines::after  { transform: translateY(7px); }

    /* открыто — крестик */
    .header.is-open .burger__lines { background-color: transparent; }
    .header.is-open .burger__lines::before { transform: rotate(45deg); }
    .header.is-open .burger__lines::after  { transform: rotate(-45deg); }

    /* меню — выпадающая панель под шапкой */
    .nav {
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 4px calc((100% - var(--container)) / 2) 20px;
        border-bottom: 1px solid rgba(17, 17, 17, .06);
        background: var(--white);
        box-shadow: 0 16px 32px rgba(17, 17, 17, .08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }

    .header.is-open .nav {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav__link {
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        font-size: 18px;
    }

    .nav__link:last-child {
        border-bottom: 0;
    }

    .nav__link::after {
        display: none;
    }
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Hero ---------- */
.hero {
    display: flex;
    flex-direction: column;
    /* вся высота экрана минус шапка (--header-h).
       Потолок 1010px — чтобы на 1080 экран был заполнен целиком,
       а на очень высоких экранах hero не превращался в пустое синее поле.
       На низких экранах — по контенту */
    min-height: min(calc(100svh - var(--header-h)), 1010px);
    background: var(--blue);
    overflow: hidden;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 616px;
    /* свободное место делится 1 : 2 — сверху вдвое меньше, чем снизу
       (контент заметно выше центра). Минимум — 64px сверху, 80px снизу */
    grid-template-rows: minmax(64px, 1fr) auto minmax(80px, 2fr);
    grid-template-areas:
        ".       .    "
        "content stats"
        ".       .    ";
    align-items: start;
    flex: 1;
    /* min-height: 817px; */
}

.hero__content {
    grid-area: content;
    position: relative;
    z-index: 2;
}

/* надзаголовок в стиле .section__eyebrow — без плашки,
   чтобы не спорить с лаймовой кнопкой */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--lime);
}

.badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lime);
}

.hero__title {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 900;
    line-height: 107%;
    letter-spacing: -0.014em; /* -1.4% */
    color: var(--white);
}

.accent {
    color: var(--lime);
    font-style: italic;
}

.underline {
    position: relative;
    display: inline-block;
}

.underline__svg {
    position: absolute;
    left: -20px;
    bottom: -22px;
    width: 275px;
    height: 12px;
}

.hero__text {
    max-width: 600px;
    margin-top: 48px;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: rgba(255, 255, 255, .85);
}

.hero__content .btn {
    margin-top: 32px;
}

/* Photo + circle — позиционируются относительно контейнера */
.hero__visual {
    /* лежит в той же строке грида, что текст и карточки, — поэтому
       при вертикальном центрировании двигается вместе с ними */
    grid-column: 1 / -1;
    grid-row: 2 / -1; /* от строки контента до низа — до бегущей строки */
    align-self: stretch;
    position: relative;
    pointer-events: none;
}

/* обёртка фото и круга — на десктопе и планшетах не влияет на раскладку */
.hero__figure {
    display: contents;
}

.hero__circle {
    position: absolute;
    top: 8px;
    left: calc(50% - 446px); /* центр круга на 160px левее центра экрана, как в макете */
    width: 572px;
    height: 572px;
    border-radius: 50%;
    background: var(--blue-light);
}

.hero__photo {
    position: absolute;
    top: 37px;
    left: calc(50% - 220px);
    width: 400px;
    /* естественная высота 757px; если до ленты дальше — фото чуть
       увеличивается, чтобы всегда уходить под ленту (+40px) */
    height: max(757px, calc(100% - 37px + 40px));
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

/* Stats */
.stats {
    grid-area: stats;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
}

.stats__row {
    display: flex;
    gap: 24px;
}

.stats__row--1 .stat:first-child {
    flex: 0 0 233px;
}

.stats__row--2 .stat:first-child {
    flex: 0 0 177px;
}

.stats__row .stat:last-child {
    flex: 1;
}

.stat {
    padding: 12px 24px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(4px);
    color: var(--white);
}

.stat--wide {
    padding-top: 20px;
}

/* кнопка hero: короткий текст и подпись под ней — только на телефонах;
   на остальных ширинах обёртка не влияет на раскладку */
.hero__cta {
    display: contents;
}

.hero__btn-short,
.hero__note {
    display: none;
}

/* точки ленты карточек — только на телефонах */
.stats__dots {
    display: none;
}

.stat__head {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.stat__num {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 100%;
}

.stat__num sup {
    font-family: var(--font-body);
    font-size: 34px;
    font-weight: 400;
    vertical-align: 6px;
    margin-left: 2px;
}

.stat__num--md {
    font-size: 32px;
    line-height: 100%;
}

.stat__label {
    padding-bottom: 4px;
    font-size: 16px;
    line-height: 133%;
    font-weight: 300;
    letter-spacing: 0.02em; /* 2% */
    opacity: 0.9;

}

.stat--wide .stat__label {
    padding-bottom: 0;
}

/* продолжение подписи — только в компактном списке на телефоне */
.stat__more {
    display: none;
}

.stat__text {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 300;
    line-height: 133%;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, .7);
}

/* ---------- Hero: контейнер 1320 (1400–1679, напр. 1600×740) ----------
   всё уменьшено пропорционально контейнеру: 1320 / 1576 ≈ 0.84 */
@media (max-width: 1679.98px) {
    .hero__inner {
        grid-template-columns: 1fr 540px;
        grid-template-rows: minmax(48px, 1fr) auto minmax(64px, 2fr);
    }

    .badge { font-size: 14px; }

    .hero__title { font-size: 60px; }

    .underline__svg {
        left: -16px;
        bottom: -18px;
        width: 230px;
        height: 10px;
    }

    .hero__text {
        max-width: 420px;
        margin-top: 40px;
        font-size: 14px;
    }

    .hero__content .btn { margin-top: 28px; }

    /* кнопка: шрифт 16 → 14, высота и поля в той же пропорции (0.875) */
    .hero .btn--lg {
        height: 42px;
        padding: 0 28px;
        font-size: 14px;
    }

    .hero__circle {
        top: 7px;
        left: calc(50% - 374px); /* центр круга так же на 0.84 × 160px левее центра */
        width: 480px;
        height: 480px;
    }

    .hero__photo {
        top: 31px;
        left: calc(50% - 184px);
        width: 336px;
        height: max(634px, calc(100% - 31px + 40px));
    }

    .stats { gap: 20px; margin-top: 30px; }
    .stats__row { gap: 20px; }
    .stats__row--1 .stat:first-child { flex-basis: 206px; }
    .stats__row--2 .stat:first-child { flex-basis: 156px; }

    .stat { padding: 10px 20px 14px; border-radius: 18px; }
    .stat--wide { padding-top: 16px; }
    .stat__num { font-size: 40px; }
    .stat__num sup { font-size: 28px; vertical-align: 5px; }
    .stat__num--md { font-size: 27px; }
    .stat__label { font-size: 14px; }
    .stat__text { margin-top: 12px; }
}

/* ---------- Hero: контейнер 1140 (1200–1399, напр. 1366×640) ----------
   масштаб от макета: 1140 / 1576 ≈ 0.72; шрифты не мельче 12–14px */
@media (max-width: 1399.98px) {
    .hero__inner {
        grid-template-columns: 1fr 448px; /* карточки не заходят на фото */
        grid-template-rows: minmax(40px, 1fr) auto minmax(56px, 2fr);
    }

    .badge {
        font-size: 12px;
        gap: 6px;
    }
    
    .badge::before {
        width: 4px;
        height: 4px;
    }

    .hero__title { font-size: 52px; }

    .underline__svg {
        left: -14px;
        bottom: -16px;
        width: 200px;
        height: 9px;
    }

    .hero__text {
        max-width: 390px;
        margin-top: 32px;
    }

    .hero__content .btn { margin-top: 24px; }

    .hero .btn--lg {
        height: 40px;
        padding: 0 24px;
    }

    .hero__circle {
        top: 6px;
        left: calc(50% - 336px); /* круг и фото чуть левее — чтобы карточки не заходили на фото */
        width: 414px;
        height: 414px;
    }

    .hero__photo {
        top: 27px;
        left: calc(50% - 173px);
        width: 290px;
        height: max(548px, calc(100% - 27px + 40px));
    }

    .stats { gap: 14px; margin-top: 24px; }
    .stats__row { gap: 14px; }
    .stats__row--1 .stat:first-child { flex-basis: 190px; }
    .stats__row--2 .stat:first-child { flex-basis: 132px; }

    .stat { padding: 10px 16px 12px; border-radius: 16px; }
    .stat--wide { padding-top: 14px; }
    .stat__num { font-size: 34px; }
    .stat__num sup { font-size: 24px; vertical-align: 4px; }
    .stat__num--md { font-size: 23px; }
    .stat__label { font-size: 13px; }
    .stat__text { margin-top: 10px; }
}

/* ---------- Hero: контейнер 960 (992–1199, планшеты в альбомной ориентации) ----------
   композиция та же, что на десктопе, только компактнее */
@media (max-width: 1199.98px) {
    .hero__inner {
        grid-template-columns: 1fr 330px;
    }

    .hero__title { font-size: 44px; }

    /* подчёркивание в em — масштабируется вместе с заголовком на всех ступенях ниже */
    .underline__svg {
        left: -.28em;
        bottom: -.3em;
        width: 3.82em;
        height: .17em;
    }

    .hero__text {
        max-width: 330px;
        margin-top: 28px;
    }

    .hero__content .btn { margin-top: 22px; }

    /* экран выше относительно ширины, чем на десктопе: фото не растягиваем
       по высоте (иначе обрезаются плечи), а ставим своим размером на бегущую строку */
    .hero__circle {
        top: auto;
        bottom: 101px;
        left: calc(50% - 283px);
        width: 377px;
        height: 377px;
    }

    .hero__photo {
        top: auto;
        bottom: -40px;
        left: calc(50% - 135px);
        width: 264px;
        height: auto;
    }

    .stats { gap: 12px; margin-top: 20px; }
    .stats__row { gap: 12px; }
    .stats__row--1 .stat:first-child { flex-basis: 140px; }
    .stats__row--2 .stat:first-child { flex-basis: 110px; }

    .stat { padding: 10px 14px 12px; border-radius: 14px; }
    .stat--wide { padding-top: 12px; }
    .stat__num { font-size: 30px; }
    .stat__num sup { font-size: 21px; vertical-align: 4px; }
    .stat__num--md { font-size: 20px; }
    .stat__text { margin-top: 8px; }
}

/* ---------- Hero: до 992 (планшеты вертикально) ----------
   текст на всю ширину сверху; ниже — карточки слева и фото справа,
   фото снизу уходит под бегущую строку, как на десктопе */
@media (max-width: 991.98px) {
    .hero__inner {
        grid-template-columns: 400px 1fr;
        grid-template-rows: minmax(48px, 1fr) auto 40px auto minmax(48px, 1fr);
        grid-template-areas:
            ".       .     "
            "content content"
            ".       .     "
            "stats   visual"
            ".       visual";
    }

    .hero__title { font-size: 56px; }

    .hero__text {
        max-width: 480px;
        margin-top: 36px;
        font-size: 16px;
    }

    .hero__content .btn { margin-top: 28px; }

    /* на сенсорных экранах кнопка крупнее: 48px — удобно попадать пальцем */
    .hero .btn--lg {
        height: 48px;
        padding: 0 32px;
        font-size: 16px;
    }

    .hero__visual {
        grid-area: visual;
        align-self: stretch;
    }

    /* фото и круг привязаны к низу — фото уходит под бегущую строку на 40px */
    .hero__photo {
        top: auto;
        bottom: -40px;
        left: calc(50% - 140px);
        width: 280px;
        height: auto;
    }

    .hero__circle {
        top: auto;
        bottom: 110px;
        left: calc(50% - 298px);
        width: 400px;
        height: 400px;
    }

    .stats { grid-area: stats; margin-top: 0; }
    .stats__row--1 .stat:first-child { flex-basis: 176px; }
    .stats__row--2 .stat:first-child { flex-basis: 128px; }

    .stat__num { font-size: 32px; }
    .stat__num sup { font-size: 22px; }
    .stat__num--md { font-size: 22px; }
}

/* ---------- Hero: до 768 (большие телефоны, маленькие планшеты) ----------
   всё в одну колонку: текст → карточки → фото (уходит под бегущую строку) */
@media (max-width: 767.98px) {
    .hero__inner {
        grid-template-columns: 1fr;
        grid-template-rows: 40px auto 32px auto 380px;
        grid-template-areas:
            "."
            "content"
            "."
            "stats"
            "visual";
    }

    .hero__title { font-size: 48px; }

    .hero__text { max-width: 440px; }

    .hero__photo {
        left: calc(50% - 110px);
        width: 220px;
    }

    .hero__circle {
        bottom: 78px;
        left: calc(50% - 157px); /* в одну колонку круг — по центру фото */
        width: 314px;
        height: 314px;
    }

    .stats__row--1 .stat:first-child { flex-basis: 200px; }
    .stats__row--2 .stat:first-child { flex-basis: 150px; }
}

/* ---------- Высота экрана на телефонах ----------
   --svh — экран при развёрнутой панели браузера (не меняется при прокрутке).
   Синий фон hero, фото, кнопка и бэджи привязаны к нему: синяя секция визуально ровно
   в один такой экран, фото стоит на её нижней границе. Когда панель браузера сворачивается,
   ниже просто виден светлый фон следующей секции — ничего не двигается и не «парит».
   --bar оставлен 0 — запас под возможный отступ снизу */
@media (max-width: 575.98px) {
    :root { --svh: 100vh; --bar: 0px; }
}
@supports (height: 100svh) {
    @media (max-width: 575.98px) {
        :root { --svh: 100svh; }
    }
}

/* ---------- Hero: до 576 (телефоны; целевой экран 375×640) ----------
   всё главное — в первом экране: заголовок в 3 строки, абзац и кнопка,
   справа — фото в полный рост на круге, как на десктопе, до низа блока */
@media (max-width: 575.98px) {
    /* высота — по содержимому, не зависит от высоты окна:
       фото привязано к абзацу, и при любой высоте экрана ничего не сдвигается
       (на 375×640 hero чуть выше экрана — это нормально) */
    .hero {
        min-height: 0;
        overflow: hidden;
        overflow: clip; /* clip, а не hidden: иначе не работает «прилипание» фото */
        background: none; /* синий фон — «прилипающая» панель ниже */
    }

    /* синяя панель высотой в экран (от шапки до низа --svh): стоит на месте, пока прокручивается
       hero, и уезжает вместе с ним. Всё содержимое hero — поверх неё */
    .hero::before {
        content: '';
        order: -2;
        position: sticky;
        /* «прилипает» вплотную к низу уже сжатой шапки (шапка при прокрутке поднимается на
           --header-collapse) — иначе между ними просвечивает полоса фона */
        top: calc(var(--header-h) - var(--header-collapse));
        display: block;
        height: calc(var(--svh) - var(--header-h) + var(--header-collapse));
        margin-bottom: calc(var(--header-h) - var(--header-collapse) - var(--svh));
        background: var(--blue);
        pointer-events: none;
    }

    /* точки не нужны — карточки идут столбиком */
    .hero .stats__dots {
        display: none;
    }

    /* элементы текста становятся ячейками сетки — так фото встаёт рядом с абзацем */
    .hero__content {
        display: contents;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) 116px; /* minmax(0) — длинные карточки не распирают колонку */
        column-gap: 12px;
        /* сверху — отступ от бегущей строки; кнопка — внизу блока, 84px от низа hero,
           свободное место — между абзацем и кнопкой */
        /* после кнопки — карточки, а под ними «дорожка» для прокрутки:
           84px (отступ под кнопкой) + высота кнопки с подписью (--cta-h) + 16px зазор.
           Ровно столько, чтобы к концу hero карточки встали над кнопкой */
        --cta-h: 61px;
        /* свободное место первого экрана делится 1 : 2 — над абзацем и под ним:
           на высоких экранах абзац опускается ближе к кнопке (и к появляющимся карточкам) */
        grid-template-rows: 20px auto auto minmax(0, 1fr) auto minmax(20px, 2fr) auto auto calc(84px + var(--bar) + var(--cta-h) + 72px); /* 72 — карточки в конце над кнопкой; линия их появления на 40px выше кнопки */
        grid-template-areas:
            ".     .     "
            "badge badge "
            "title title "
            ".     .     "
            "text  .     "
            ".     .     "
            "cta   cta   "
            "stats .     "
            ".     .     ";
    }

    /* первый экран (от абзаца до отступа под кнопкой) не ниже фото —
       раньше это задавала высота .hero__visual, теперь она тянется до конца hero */
    /* первый экран (до низа кнопки с отступом 84px) — не ниже экрана:
       тогда кнопка при загрузке стоит ровно там, где потом «прилипнет»,
       а карточки начинаются ниже экрана и не видны. 35px — бегущая строка с отступом */
    .hero__inner::before {
        content: '';
        grid-column: 1;
        grid-row: 1 / 8;
        min-height: calc(var(--svh) + var(--bar) - var(--header-h) - 35px);
    }

    .hero__inner::after {
        content: '';
        grid-column: 2;
        grid-row: 5 / 8;
        min-height: 358px;
    }

    /* текст — поверх круга и фото */
    .badge,
    .hero__title,
    .hero__text,
    .hero__cta {
        position: relative;
        z-index: 2;
    }

    /* кнопка и подпись — одна группа слева; подпись по центру относительно кнопки */
    .hero__cta {
        grid-area: cta; /* на всю ширину сетки; фото справа лежит под ней */
        justify-self: start;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* кнопка «прилипает», как фото: при прокрутке стоит на месте, 84px от низа экрана
       (отступ — margin, чтобы кнопка отпускала ровно тогда же, когда фото).
       Карточки проезжают позади неё (z-index ниже) и проявляются — прозрачность ставит скрипт */
    .hero .hero__cta {
        position: sticky;
        z-index: 3;
        top: calc(var(--svh) - var(--cta-h) - 84px);
        margin-bottom: calc(84px + var(--bar)); /* отпускает вместе с фото — когда низ hero у самого низа экрана */
    }

    /* кнопка короче — «бесплатно» уходит в подпись под ней */
    .hero__btn-full { display: none; }
    .hero__btn-short { display: inline; }

    .hero__note {
        display: block;
        margin: 8px 0 0;
        font-size: 10px;
        line-height: 130%;
        text-transform: uppercase;
        color: var(--lime);
    }

    .badge { grid-area: badge; justify-self: start; margin-bottom: 0; }
    .badge::before { display: none; } /* без точки на телефонах */
    .hero__title { grid-area: title; }

    /* «Привет, я Олег!» — в одну строку */
    .hero__br { display: none; }

    .hero__title {
        margin-top: 16px;
        font-size: 38px;
        line-height: 110%;
    }

    .hero__text {
        grid-area: text;
        max-width: none;
        margin-top: 64px;
        font-size: 12px;
    }

    .hero__content .btn {
        position: relative; /* для расширенной зоны нажатия */
        min-width: 190px;
        margin-top: 0;
    }

    /* кнопка по левому краю, по ширине текста; визуально компактная —
       в пропорции к абзацу 12px */
    .hero .btn--lg {
        height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }

    /* невидимое расширение зоны нажатия: 40 → 48px по высоте */
    .hero .btn--lg::before {
        content: '';
        position: absolute;
        inset: -4px 0;
    }

    /* фото — справа, от абзаца до низа hero; частично уходит за правый край экрана.
       Круг — за фото, в тех же пропорциях, что на десктопе */
    .hero__visual {
        grid-column: 2;
        grid-row: 5 / -1; /* от абзаца до низа hero — по этой высоте фото «едет» */
        align-self: stretch;
    }

    /* фото с кругом «прилипает» к низу экрана: при прокрутке стоит на месте,
       ногами ровно по нижнему краю, а текст и карточки уезжают вверх;
       отпускает, когда низ фото доходит до низа hero.
       Низ фото — на нижней границе синей панели (низ --svh).
       Высота — фото (≈360) − 2px */
    .hero__figure {
        --figure-h: 358px;
        display: block;
        position: sticky;
        top: calc(var(--svh) + var(--bar) - var(--figure-h)); /* низ — на нижней границе синей панели */
        height: var(--figure-h);
    }

    .hero__photo {
        top: auto;
        bottom: 0; /* до низа hero */
        left: auto;
        right: -50px;
        width: 190px;
        max-width: none; /* шире своей колонки */
        height: auto;
    }

    .hero__circle {
        /* сдвиг по направлению прокрутки (скрипт): стартует сразу и резко, потом мягко тормозит.
           will-change — круг заранее на своём слое, без задержки на первом кадре */
        transition: transform .7s cubic-bezier(.15, .85, .3, 1);
        will-change: transform;
        top: auto;
        bottom: 102px;
        left: auto;
        right: -25px;
        width: 272px;
        height: 272px;
    }

    /* карточки — столбиком в левой колонке, под первым экраном:
       появляются при прокрутке, пока фото стоит справа */
    .stats {
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        margin-top: 0;
    }

    .stats__row { display: contents; }

    /* пилюли в ряду растягиваются на всю ширину колонки — ряды ровные:
       Cambridge International / 12+ лет + 80+ студентов / 7.5 IELTS + 5 стран */
    .stats .stat,
    .stats__row .stat:first-child,
    .stats__row .stat:last-child {
        flex: 1 1 auto;
    }

    /* тезисы-«пилюли»: число + короткая подпись в одну строку, без описания;
       лаймовым — число и ключевое слово (12+ лет, 7.5 IELTS, 5 стран) */
    /* пилюли по ширине содержимого; какие помещаются рядом — встают в один ряд */
    .stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 6px; /* между рядами — больше: длиннее прокрутка, ряды появляются реже */
        align-items: stretch;
        /* при загрузке карточки спрятаны за кнопкой: верх — на уровне верха кнопки
           (поднимаем на высоту кнопки с отступом под ней) */
        margin-top: calc(-84px - var(--bar) - var(--cta-h));
    }

    .stat,
    .stat--wide {
        max-width: 100%;
        padding: 6px 10px 7px;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 12px; /* как у карточек на десктопе — в пропорции к размеру */
        background: rgba(255, 255, 255, .08);
    }

    .stat__text,
    .stat__desk,
    .stat__dash,
    .stat--wide .stat__rest { display: none; } /* «Cambridge International» — без подписи */

    /* первая строка — число и ключевое слово (лаймовые), вторая — белое пояснение */
    /* сетка, а не flex с переносом: так ширина пилюли = ширине её текста
       (у flex с переносом ширина считалась как будто всё в одну строку — оставался пустой хвост справа) */
    .stats .stat__head {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        justify-items: start;
        column-gap: 6px;
        row-gap: 0;
    }
    .stats .stat__label { display: contents; }
    .stat__more,
    .stat__rest {
        display: block;
        grid-column: 1 / -1;
        margin-top: 4px;
        font-size: 12px;
        line-height: 130%;
        white-space: nowrap;
    }
    .stat__num { font-size: 20px; color: var(--lime); }
    .stat__num sup { font-size: 14px; vertical-align: 3px; }
    .stat__num--md { font-size: 20px; line-height: 115%; color: var(--white); } /* Cambridge / International — в две строки, чуть крупнее остальных */
    .stats .stat--wide { flex-basis: 100%; } /* всегда отдельным рядом, на всю ширину колонки */
    .stat__key {
        font-size: 13px;
        line-height: 130%;
        color: var(--lime);
    }

    /* точки: активная — крупнее и белая, остальные — полупрозрачные белые */
    .stats__dots {
        grid-area: dots;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        gap: 2px;
    }

    .stats__dot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;   /* зона нажатия больше самой точки */
        height: 20px;
        margin: -7px 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .stats__dot::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .35);
        transition: transform .25s ease, background-color .25s ease;
    }

    .stats__dot.is-active::before {
        background: var(--white);
        transform: scale(1.4); /* 6 → ~8px */
    }
}

/* совсем узкие экраны (до 360): фото меньше — чтобы голова не заходила на заголовок */
@media (max-width: 359.98px) {
    .hero__photo {
        right: -44px;
        width: 160px;
    }

    .hero__inner::after { min-height: 303px; } /* фото 303px — до низа первого экрана */
    .hero__figure { --figure-h: 303px; }

    /* пилюли чуть мельче и могут заходить на край фото — колонка здесь всего ~150px */
    .stats .stat { max-width: none; padding: 5px 12px 6px; }
    .stat__num { font-size: 18px; }
    .stat__num--md { font-size: 18px; }
    .stat__more, .stat__rest { font-size: 11px; }

    /* «Привет, я Олег!» при 38px не помещается в строку на 320 — здесь заголовок мельче */
    .hero__title { font-size: 32px; }

    .hero__circle {
        bottom: 86px;
        right: -22px;
        width: 229px;
        height: 229px;
    }
}

/* высокие телефоны (от 760px по высоте, напр. 375×812, 390×844, 430×932):
   всё в hero крупнее — меньше пустого места в первом экране */
@media (max-width: 575.98px) and (min-height: 760px) {
    .hero__inner { --cta-h: 70px; } /* кнопка 46 + 10 + подпись 14 */

    .badge { font-size: 13px; }
    .hero__title { margin-top: 20px; font-size: min(44px, 10.8vw); } /* «Привет, я Олег!» — в одну строку */
    .hero__text { padding-right: 24px; font-size: 13px; } /* не заходит на лицо — фото здесь крупнее */

    .hero .btn--lg {
        height: 46px;
        padding: 0 24px;
        font-size: 15px;
    }
    .hero__note { margin-top: 10px; font-size: 11px; }

    /* фото и круг — в тех же пропорциях, на ~17% крупнее */
    .hero__figure { --figure-h: 418px; }
    /* сдвинуто вправо сильнее пропорции — бэджи слева не заходят на лицо */
    .hero__photo { right: -76px; width: 222px; }
    .hero__circle {
        bottom: 120px;
        right: -47px;
        width: 318px;
        height: 318px;
    }

}

/* ---------- Ticker ---------- */
.ticker {
    padding: 12px 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
    height: fit-content;
    margin-bottom: 8px;
    background: var(--lime);
}

.ticker__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: ticker 40s linear infinite;
}

.ticker:hover .ticker__track {
    animation-play-state: paused;
}

.ticker__list {
    display: flex;
    align-items: center;
}

.ticker__list li {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--dark);
}

.ticker__list li::before {
    content: '';
    width: 4px;
    height: 4px;
    margin: 0 52px;
    border-radius: 50%;
    background: var(--dark);
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

/* контейнер 1320 (1400–1679): строка ниже и мельче */
@media (max-width: 1679.98px) {
    .ticker { padding: 10px 0; }
    .ticker__list li { font-size: 12px; }
    .ticker__list li::before { margin: 0 44px; }
}

/* телефоны: бегущая строка — наверху hero, сразу под шапкой; ниже и мельче */
@media (max-width: 575.98px) {
    .ticker {
        order: -1;
        margin: 8px 0 0;
        padding: 8px 0;
    }
    .ticker__list li { font-size: 10px; }
    .ticker__list li::before {
        width: 2px;
        height: 2px;
        margin: 0 16px;
    }
}

/* =========================================================
   Секции
   ========================================================= */
.section {
    padding: 48px 0 88px;
}

.section--light {
    background: var(--light-bg);
    color: var(--dark);
}

.section--blue {
    background: var(--blue);
    color: var(--white);
}

.section__head {
    margin-bottom: 48px;
}

.section__eyebrow {
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--blue);
}

.section--blue .section__eyebrow {
    color: var(--lime);
}

.section__title {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: -0.01em; /* -1% */
}

.section__title em {
    font-style: italic;
    color: var(--blue);
}

.section--blue .section__title em {
    color: var(--lime);
}

.section__subtitle {
    margin-top: 16px;
    font-size: 16px;
    line-height: 130%;
    color: var(--gray);
}

.section--blue .section__subtitle {
    color: rgba(255, 255, 255, .75);
}

/* ---------- Кому подойдёт ---------- */
.audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.audience__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 181px;
    padding: 32px 40px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
}

.audience__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.audience__text {
    font-size: 16px;
    line-height: 140%;
}

/* ---------- Секции: заголовки и отступы по ступеням ----------
   общие для всех секций; масштаб — как у hero */
@media (max-width: 1679.98px) {
    .section__title { font-size: 46px; }
    .section__head { margin-bottom: 40px; }
}

@media (max-width: 1399.98px) {
    .section { padding: 44px 0 72px; }
    .section__eyebrow { font-size: 14px; }
    .section__title { font-size: 40px; }
    .section__subtitle { font-size: 15px; }
}

@media (max-width: 991.98px) {
    .section { padding: 40px 0 64px; }
    .section__title { font-size: 36px; }
    .section__head { margin-bottom: 32px; }
}

/* перенос только для телефонов (например, пустая строка между абзацами подзаголовка) */
.br-mobile { display: none; }

@media (max-width: 575.98px) {
    .br-mobile { display: inline; }
    .section { padding: 40px 0 56px; }
    .section__eyebrow { font-size: 12px; }
    .section__title {
        margin-top: 24px;
        font-size: 32px;
    }
    .section__subtitle {
        margin-top: 12px;
        font-size: 14px;
        line-height: 140%;
    }
    .section__head { margin-bottom: 24px; }
}

/* ---------- CTA внутри секций («Кому подойдёт», «Отзывы») ----------
   кнопка по центру, под ней короткая подпись; открывает модалку записи */
.section__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
    text-align: center;
}

.section__cta-note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 130%;
    color: rgba(17, 17, 17, .55);
}

@media (max-width: 1399.98px) {
    .section__cta { margin-top: 40px; }
}

@media (max-width: 991.98px) {
    .section__cta { margin-top: 32px; }
}

/* телефоны — как кнопка в hero: 40px, 13px, зона нажатия расширена до 48px;
   подпись — капсом 10px, как под кнопкой hero */
@media (max-width: 575.98px) {
    .section__cta { margin-top: 28px; }
    .section__cta .btn {
        position: relative;
        height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }
    .section__cta .btn::before {
        content: '';
        position: absolute;
        inset: -4px 0;
    }
    .section__cta-note {
        margin-top: 8px;
        font-size: 10px;
        text-transform: uppercase;
    }
}

/* выделенные ключевые фразы в текстах */
.audience__text strong { font-weight: 600; }
.step__text strong { font-weight: 600; color: var(--white); }

/* ---------- Кому подойдёт: адаптив ---------- */
@media (max-width: 1399.98px) {
    .audience { gap: 24px; }
    .audience__item {
        min-height: 160px;
        padding: 28px 32px;
    }
    .audience__text { font-size: 15px; }
}

@media (max-width: 1199.98px) {
    .audience { gap: 20px; }
    .audience__item {
        gap: 16px;
        padding: 24px;
    }
    .audience__icon { width: 40px; height: 40px; }
}

/* планшет: 2 колонки */
@media (max-width: 991.98px) {
    .audience {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .audience__item { min-height: 140px; }
}

/* телефон: одна колонка, карточки компактные — иконка слева, текст справа */
@media (max-width: 575.98px) {
    .audience {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .audience__item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        min-height: 0;
        padding: 16px 20px 16px 16px;
        border-radius: 14px;
        text-align: left;
    }
    .audience__icon { width: 36px; height: 36px; }
    .audience__text {
        font-size: 14px;
        line-height: 135%;
    }
}

/* ---------- Как проходят уроки ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step {
    min-height: 232px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
}

.step__num {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 900;
    line-height: 100%;
    color: rgba(255, 255, 255, .6);
}

.step__title {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
}

.step__text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 150%;
    font-weight: 300;
    color: rgba(255, 255, 255, .8);
}

/* ---------- Как проходят уроки: адаптив ---------- */
@media (max-width: 1399.98px) {
    .step {
        min-height: 210px;
        padding: 22px;
    }
    .step__num { font-size: 36px; }
    .step__title { font-size: 18px; }
    .step__text { font-size: 15px; }
}

@media (max-width: 1199.98px) {
    .steps { gap: 20px; }
    .step {
        min-height: 0;
        padding: 20px;
        border-radius: 18px;
    }
    .step__num { font-size: 32px; }
    .step__text { font-size: 14px; }
}

/* планшет и телефон: карточки друг под другом, внутри — как на десктопе:
   номер, заголовок, текст */
@media (max-width: 991.98px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .step { padding: 20px 24px; }
    .step__title { margin-top: 10px; }
    .step__text { margin-top: 8px; }
}

@media (max-width: 575.98px) {
    .steps { gap: 10px; }
    .step {
        padding: 18px 20px 20px;
        border-radius: 14px;
    }
    .step__num { font-size: 28px; }
    .step__title { margin-top: 16px; font-size: 16px; } /* отступ от номера — побольше */
    .step__text {
        margin-top: 12px;
        line-height: 140%;
    }
}

/* ---------- Результаты студентов ---------- */
.cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
}

/* subgrid: строки «витрина / заголовок / текст» общие для всех карточек —
   если заголовок где-то перенесётся на 2 строки, тексты всё равно начнутся на одном уровне */
.case {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    padding: 16px 16px 32px;
    border-radius: 24px;
    background: var(--white);
}

.case__title {
    margin-top: 28px;
    padding: 0 16px;
    font-size: 22px;
    font-weight: 500;
    line-height: 130%;
}

.case__text {
    margin-top: 12px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray);
}

/* общая «витрина» кейса */
.case__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 248px;
    padding: 28px;
    border-radius: 16px;
    background: var(--blue);
    color: var(--white);
    overflow: hidden;
}

/* кейс 1 — диалог */
.case__visual--chat {
    gap: 12px;
}

.case__levels {
    position: absolute;
    top: 24px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

.case__level {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    border-radius: 100px;
}

.case__level--from {
    border: 1px solid rgba(255, 255, 255, .4);
    color: rgba(255, 255, 255, .8);
}

.case__level--to {
    background: var(--lime);
    color: var(--dark);
}

.case__level-arrow {
    width: 40px;
    height: 12px;
    color: rgba(255, 255, 255, .6);
}

.case__bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 130%;
}

.case__bubble--in {
    align-self: flex-start;
    margin-top: 32px;
    border-bottom-left-radius: 4px;
    background: rgba(255, 255, 255, .14);
}

.case__bubble--out {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--lime);
    color: var(--dark);
}

/* кейс 2 — шкала IELTS */
.case__visual--score {
    align-items: flex-start;
}

.case__score {
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 900;
    line-height: 90%;
    color: var(--lime);
}

.case__score span {
    font-size: 48px;
}

.case__score-label {
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
}

.case__scale {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    width: 100%;
    margin-top: 28px;
}

.case__scale span {
    height: 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .18);
}

.case__scale .is-on {
    background: var(--lime); /* набранные баллы — лаймовые */
}

.case__scale .is-target {
    background: var(--lime);
}

/* половина деления — для балла x.5 (7.5 → закрашена половина восьмого) */
.case__scale .is-half {
    background: linear-gradient(to right, var(--lime) 50%, rgba(255, 255, 255, .18) 50%);
}

/* подписи 1 и 9 — по центру первого и последнего деления: та же сетка, что у шкалы */
.case__scale-legend {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.case__scale-legend span {
    text-align: center;
}

.case__scale-legend span:last-child {
    grid-column: 9;
}

/* кейс 3 — путь до оффера */
.case__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: 15px;
}

.case__step::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 2px; /* круг 10px в «ячейке» 14px — как у галочки, текст всех шагов на одной линии */
    border: 2px solid rgba(255, 255, 255, .6);
}

.case__step--done {
    background: var(--lime);
    color: var(--dark);
    font-weight: 500;
}

.case__step--done::before {
    /* круг и галочка — одна SVG-картинка: всегда концентричны, даже когда
       строка оказывается на дробной позиции (раньше фон-картинка и скругление
       округлялись к пикселям по-разному, и галочка «уезжала» на полпикселя) */
    width: 14px;
    height: 14px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23111111'/%3E%3Cpath d='M4.3 6.95 6.2 8.85l3.6-4' fill='none' stroke='%23B6FF4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.case__note {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

/* логотипы компаний */
.companies {
    margin-top: 64px;
}

.companies__title {
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray);
}

.companies__list {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.companies__item {
    display: grid;
    place-items: center;
    height: 112px;
    padding: 16px;
    border-radius: 16px;
    background: var(--white);
}

/* логотипы разной формы выровнены по «площади» (размеры в width/height),
   в один тон, цвет — при наведении */
.companies__item img {
    max-width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}

.companies__item:hover img {
    filter: none;
    opacity: 1;
}

.companies__item--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    /* как логотипы: в покое серые и приглушённые, цвет — по наведению */
    border: 1px dashed rgba(0, 0, 0, .18);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
    color: rgba(58, 58, 58, .7);
    transition: color .2s ease, border-color .2s ease;
}

.companies__item--text:hover {
    border-color: rgba(43, 61, 255, .4);
    color: #3A3A3A;
}

.companies__item--text svg {
    width: 24px;
    height: 24px;
    color: rgba(58, 58, 58, .5);
    transition: color .2s ease;
}

.companies__item--text:hover svg {
    color: var(--blue);
}

/* ---------- Результаты студентов: адаптив ---------- */
@media (max-width: 1679.98px) {
    .cases { column-gap: 20px; }
    .case__visual { height: 228px; padding: 24px; }
    .case__levels { top: 20px; left: 24px; }
    .case__title { margin-top: 24px; font-size: 20px; }
    .case__text { font-size: 15px; }
    .case__score { font-size: 88px; }
    .companies { margin-top: 56px; }
    .companies__list { gap: 12px; }
    .companies__item { height: 100px; }
}

@media (max-width: 1399.98px) {
    .case { padding: 14px 14px 28px; border-radius: 20px; }
    .case__visual { height: 212px; padding: 22px; border-radius: 14px; }
    .case__levels { top: 18px; left: 22px; }
    .case__bubble { padding: 10px 14px; font-size: 14px; }
    .case__score { font-size: 80px; }
    .case__score span { font-size: 40px; }
    .case__score-label { font-size: 14px; }
    .case__scale { margin-top: 22px; }
    .case__step { padding: 10px 14px; font-size: 14px; }
    .case__title { padding: 0 12px; font-size: 18px; }
    .case__text { padding: 0 12px; font-size: 14px; }
    .companies { margin-top: 48px; }
    .companies__item { height: 88px; padding: 12px; border-radius: 14px; }
    .companies__item--text { font-size: 13px; }
}

/* до 1200: кейсы по одному в ряд — иллюстрация слева, заголовок и текст справа;
   логотипы — 7 в ряд, две текстовые плитки под ними */
@media (max-width: 1199.98px) {
    .cases {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .case {
        grid-row: auto;
        grid-template-columns: 360px 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 32px;
        padding: 14px;
    }
    .case__visual { grid-row: 1 / 3; height: 200px; }
    .case__title { align-self: end; margin-top: 0; padding: 0 16px 0 0; font-size: 20px; }
    .case__text { align-self: start; padding: 0 16px 0 0; font-size: 15px; }

    .companies__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .companies__item:not(.companies__item--text) { flex: 0 0 calc((100% - 6 * 12px) / 7); }
    .companies__item--text {
        flex: 1 0 calc(50% - 6px); /* не сжимаются — всегда отдельной строкой под логотипами */
        flex-direction: row;
        gap: 10px;
        height: 64px;
    }
}

@media (max-width: 991.98px) {
    .case { grid-template-columns: 280px 1fr; column-gap: 24px; }
    .case__visual { height: 196px; padding: 20px; }
    .case__levels { top: 16px; left: 20px; }
    .case__score { font-size: 72px; }
    .case__title { font-size: 18px; }
    .case__text { font-size: 14px; }
    .companies__item:not(.companies__item--text) {
        flex-basis: calc((100% - 3 * 12px) / 4);
        height: 80px;
    }
}

/* телефоны: кейс — иллюстрация сверху, текст под ней; логотипы по 4 в ряд */
@media (max-width: 575.98px) {
    .cases { row-gap: 12px; }
    .case {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 10px 10px 20px;
        border-radius: 18px;
    }
    .case__visual { grid-row: auto; height: 190px; padding: 18px; border-radius: 12px; }
    .case__levels { top: 14px; left: 18px; font-size: 12px; }
    .case__bubble { font-size: 13px; }
    .case__bubble--in { margin-top: 28px; }
    .case__score { font-size: 64px; }
    .case__score span { font-size: 32px; }
    .case__scale { margin-top: 16px; }
    .case__step { padding: 8px 12px; font-size: 13px; }
    .case__steps { gap: 8px; }
    .case__note { margin-top: 10px; font-size: 12px; }
    .case__title { margin-top: 16px; padding: 0 8px; font-size: 17px; }
    .case__text { margin-top: 8px; padding: 0 8px; font-size: 14px; line-height: 140%; }

    .companies { margin-top: 36px; }
    .companies__title { font-size: 12px; }
    .companies__list { gap: 8px; margin-top: 14px; }
    .companies__item:not(.companies__item--text) { flex-basis: calc((100% - 3 * 8px) / 4); }
    .companies__item {
        height: 60px;
        padding: 8px;
        border-radius: 12px;
    }
    .companies__item--text {
        flex: 1 0 100%;
        height: 48px;
        font-size: 13px;
    }
    .companies__item--text svg { width: 20px; height: 20px; }
}

/* ---------- Отзывы ---------- */
/* overflow-x: clip (а не hidden) — обрезает ленту по ширине страницы,
   но не ломает position: sticky у стрелок */
.section--reviews {
    overflow-x: clip;
}

/* 3 карточки ровно на ширину контейнера, соседние карточки — в полях
   за контейнером; градиент начинается ровно на границе контейнера */
.reviews {
    --edge: calc((100vw - var(--container)) / 2);   /* реальное поле от края экрана до контейнера */
    --gutter-x: calc(var(--edge) + 200px);          /* лента и градиенты выходят за край экрана ещё на 200px */
    --gap: 24px;
    --fade-solid: 64px; /* через сколько px от границы контейнера градиент становится сплошным */
    --nav-top: 156px;   /* стрелка начинает с уровня середины фото: отступ карточки + ½ фото − ½ стрелки */
    --arrow: 48px;      /* размер стрелки */
    position: relative;
    display: flow-root; /* чтобы margin у .reviews__nav не «схлопывался» с заголовком */
    margin-inline: calc(var(--gutter-x) * -1); /* лента на всю ширину экрана */
}

.reviews__track {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    padding-inline: var(--gutter-x); /* карточки выровнены по контейнеру */
    overflow-x: auto;
    scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
    display: none;
}

/* градиенты в полях: прозрачные на границе контейнера → сплошной фон к краю экрана */
.reviews::before,
.reviews::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--gutter-x);
    pointer-events: none;
    transition: opacity .3s ease;
}

.reviews::before {
    left: 0;
    background: linear-gradient(to left, rgba(244, 242, 238, 0), var(--light-bg) var(--fade-solid));
}

.reviews::after {
    right: 0;
    background: linear-gradient(to right, rgba(244, 242, 238, 0), var(--light-bg) var(--fade-solid));
}

.reviews.is-start::before,
.reviews.is-end::after {
    opacity: 0;
}

/* Стрелки в полях поверх градиента.
   sticky + высота 0: пока секция на экране, стрелки держатся
   по центру экрана и не уезжают при чтении длинных карточек */
.reviews__nav {
    position: sticky;
    top: calc(50vh - 24px);
    z-index: 2;
    height: 0;
    padding-top: 1px;     /* не даёт верхнему и нижнему margin «схлопнуться» между собой */
    margin-top: var(--nav-top);                    /* сверху: стрелка начинает с уровня фото */
    margin-bottom: calc(var(--nav-top) + var(--arrow) - 1px); /* снизу: тот же отступ от низа карточек (+ стрелка − 1px) */
}

/* трек поднимаем обратно: nav-top + 1 + nav-top + стрелка − 1 */
.reviews__nav + .reviews__track {
    margin-top: calc(var(--nav-top) * -2 - var(--arrow));
}

.reviews__arrow {
    position: absolute;
    top: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue);
    cursor: pointer;
    transition: transform .2s ease, opacity .3s ease;
}

.reviews__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.reviews__arrow--prev {
    left: calc(var(--gutter-x) - var(--edge) / 2 - 24px); /* по центру видимого поля за контейнером */
}

.reviews__arrow--next {
    right: calc(var(--gutter-x) - var(--edge) / 2 - 24px);
}

.reviews__arrow--prev:hover {
    transform: translateX(-4px);
}

.reviews__arrow--next:hover {
    transform: translateX(4px);
}

.reviews__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.review {
    /* 3 карточки и 2 промежутка — ровно ширина контейнера */
    flex: 0 0 calc((var(--container) - 2 * var(--gap)) / 3);
    padding: 40px 16px 32px;
    border-radius: 24px;
    background: var(--white);
    scroll-snap-align: start;
}

.review__person {
    margin-bottom: 32px;
    text-align: center;
}

.review__photo {
    width: 240px;
    height: 240px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--border);
    object-fit: cover;
    color: transparent; /* прячем alt, пока нет фото */
}

.review__name {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: 36px;
    font-style: italic;
    font-weight: 400;
    line-height: 110%;
}

.review__role {
    margin-top: 8px;
    font-size: 18px;
    line-height: 130%;
    color: var(--gray);
}

.review__box {
    padding: 16px 16px 20px;
    border: 1px solid var(--border);
    border-radius: 24px;
}

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

.review__label {
    font-size: 16px;
    line-height: 110%;
    text-transform: uppercase;
    color: var(--blue);
}

.review__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-left: 10px;
}

.review__list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    font-style: italic;
    font-weight: 600; /* пункты «Цель» и «Результаты» — жирные */
    line-height: 130%;
}

.review__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-style: normal;
}

.review__quote {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 150%;
}

.review__quote::before {
    content: '“';
    height: 24px;
    margin: 0 0 -8px -16px;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 900;
    line-height: 80%;
    color: var(--lime);
}

/* кнопка «Читать полностью» — только на телефонах */
.review__more {
    display: none;
}

/* ---------- Отзывы: адаптив ---------- */
@media (max-width: 1679.98px) {
    .reviews { --nav-top: 108px; }
    .review { padding: 32px 16px 28px; }
    .review__photo { width: 200px; height: 200px; }
    .review__name { margin-top: 24px; font-size: 32px; }
    .review__role { font-size: 16px; }
    .review__person { margin-bottom: 28px; }
}

@media (max-width: 1399.98px) {
    .reviews { --gap: 20px; --nav-top: 84px; }
    .review {
        padding: 28px 14px 24px;
        border-radius: 20px;
    }
    .review__photo { width: 160px; height: 160px; }
    .review__name { margin-top: 20px; font-size: 28px; }
    .review__person { margin-bottom: 24px; }
    .review__box { padding: 14px 14px 16px; border-radius: 18px; }
    .review__label { font-size: 14px; }
    .review__list { gap: 10px; margin-top: 12px; }
    .review__list li { font-size: 15px; }
    .review__quote { gap: 18px; margin-top: 28px; padding: 0 16px; }
}

/* поля за контейнером узкие (< 70px): стрелки остаются по краям, но становятся
   меньше, на белом круге с тенью (могут лечь на край карточки) и не выходят за экран */
@media (max-width: 1279.98px) {
    /* поля узкие — градиент становится сплошным ровно у края экрана, иначе его почти не видно */
    .reviews { --arrow: 40px; --nav-top: 88px; --fade-solid: var(--edge); }
    .reviews__arrow {
        width: var(--arrow);
        height: var(--arrow);
        padding: 9px;
        border-radius: 50%;
        background: var(--white);
        box-shadow: 0 4px 14px rgba(17, 17, 17, .12);
    }
    .reviews__arrow--prev {
        left: max(calc(var(--gutter-x) - var(--edge) / 2 - var(--arrow) / 2),
                  calc(var(--gutter-x) - var(--edge) + 6px));
    }
    .reviews__arrow--next {
        right: max(calc(var(--gutter-x) - var(--edge) / 2 - var(--arrow) / 2),
                   calc(var(--gutter-x) - var(--edge) + 6px));
    }
}

@media (max-width: 575.98px) {
    .reviews { --arrow: 36px; --nav-top: 66px; }
    .reviews__arrow { padding: 8px; }
}

/* планшет: 2 карточки в ряд */
@media (max-width: 1199.98px) {
    .review { flex-basis: calc((var(--container) - var(--gap)) / 2); }
}

/* сенсорные экраны: лента листается свайпом и «прилипает» к карточке */
@media (max-width: 991.98px) {
    .reviews { --gap: 16px; --nav-top: 78px; }
    .reviews__track {
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter-x);
    }
    .review__photo { width: 140px; height: 140px; }
    .review__name { font-size: 26px; }
}

/* одна карточка + край следующей — видно, что ленту можно листать.
   Край следующей карточки лежит внутри контейнера — градиент заходит в контейнер
   ровно на ширину этого края и плавно гасит его к краю экрана */
@media (max-width: 767.98px) {
    .reviews {
        --fade-in: calc(var(--container) * .14 - var(--gap));
        --fade-solid: calc(var(--fade-in) + var(--edge));
    }
    .reviews::after { width: calc(var(--gutter-x) + var(--fade-in)); }
    /* слева предыдущая карточка — только в узком поле: градиент не заходит в контейнер */
    .reviews::before {
        background: linear-gradient(to left, rgba(244, 242, 238, 0), var(--light-bg) var(--edge));
    }
    .review { flex-basis: calc(var(--container) * .86); }
}

@media (max-width: 575.98px) {
    .reviews { --gap: 12px; }
    .review {
        padding: 24px 12px 12px;
        border-radius: 18px;
    }
    .review__photo { width: 120px; height: 120px; }
    .review__name { margin-top: 16px; font-size: 24px; }
    .review__role { margin-top: 6px; font-size: 14px; }
    .review__person { margin-bottom: 20px; }
    .review__box { padding: 12px 12px 14px; border-radius: 16px; }
    .review__box + .review__box { margin-top: 10px; }
    .review__label { font-size: 12px; }
    .review__list { gap: 4px; margin-top: 10px; padding-left: 4px; }
    .review__list li {
        padding-left: 10px;
        font-size: 12px;
    }
    .review__quote {
        gap: 14px;
        margin-top: 16px;
        padding: 0 12px;
        font-size: 12px;
    }
    .review__quote::before {
        margin: 0 0 -8px -8px;
        font-size: 52px;
    }

    /* длинный отзыв свёрнут: текст занимает всё свободное место карточки
       (минимум ~7 строк), низ плавно растворяется; кнопка — всегда по низу.
       Карточки одной высоты, видимая часть текста — немного разная */
    .review { display: flex; flex-direction: column; }
    .review.is-clamped .review__quote {
        flex: 1 1 0;
        min-height: 150px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
    }
    .review.is-clamped.is-expanded .review__quote {
        flex: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* во время сворачивания растворение снизу возвращается сразу */
    .review.is-clamped.is-collapsing .review__quote {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
    }

    .review__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: flex-start;
        margin: 0 0 0 12px; /* сразу под текстом отзыва */
        padding: 6px 0;
        border: 0;
        background: none;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--blue);
        cursor: pointer;
    }

    .review__more::after {
        content: '';
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .3s ease;
    }

    .review.is-expanded .review__more::after { transform: translateY(1px) rotate(-135deg); }

    .review__more[hidden] { display: none; }
    .review.is-clamped .review__quote { margin-bottom: 10px; }

    /* пока все отзывы свёрнуты — карточки одной высоты, кнопки на одном уровне */
    .reviews__track:not(:has(.is-expanded)) { align-items: stretch; }
}

/* ---------- Формат занятий ---------- */
/* «лента параметров»: 4 колонки без карточек, разделены тонкими вертикальными линиями */
.formats {
    --col-gap: 80px; /* разделитель стоит ровно посередине промежутка */
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 одинаковые колонки контента */
    column-gap: var(--col-gap);
}

.format {
    position: relative;
    padding: 40px 0 44px; /* первая колонка — от левого края контейнера, последняя — до правого */
}

/* вертикальные разделители — концы уходят в прозрачность */
.format + .format::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--col-gap) / -2);
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, .18) 25%,
        rgba(255, 255, 255, .18) 75%,
        rgba(255, 255, 255, 0));
}

/* «или» на линии между «Онлайн» и «Очно» — формат на выбор */
.format--or::before {
    content: 'или';
    position: absolute;
    top: 52px;
    left: calc(var(--col-gap) / -2); /* на разделителе */
    z-index: 1;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--lime);
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 130%;
    transform: translate(-50%, -50%);
}

.format__visual {
    display: flex;
    align-items: center;
    height: 48px;
    color: var(--lime);
}

.format--or .format__visual {
    padding-left: 12px; /* место под «или» */
}

.format__icon {
    width: 44px;
    height: 44px;
}

.format__week {
    display: flex;
    gap: 4px;
}

.format__week li {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 10px;
    color: rgba(255, 255, 255, .6);
}

.format__week .is-on {
    border-color: var(--lime);
    background: var(--lime);
    color: var(--dark);
    font-weight: 500;
}

.format__title {
    margin-top: 24px;
    font-size: 22px;
    font-weight: 500;
    line-height: 130%;
}

.format__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 150%;
    color: rgba(255, 255, 255, .75);
}

/* ---------- Формат занятий: адаптив ---------- */
@media (max-width: 1679.98px) {
    .formats { --col-gap: 64px; }
    .format__title { font-size: 20px; }
    .format__text { font-size: 15px; }
}

@media (max-width: 1399.98px) {
    .formats { --col-gap: 48px; }
    .format { padding: 32px 0 36px; }
    .format--or::before { top: 44px; }
    .format__title { margin-top: 20px; font-size: 18px; }
    .format__text { font-size: 14px; }
    .format__week li { width: 26px; height: 26px; }
}

/* до 1200: три ряда —
   1) Индивидуально
   2) Онлайн | или | Очно в Белграде
   3) 1–2 раза в неделю
   между «Онлайн» и «Очно» — вертикальная линия с «или», горизонтальных линий нет */
@media (max-width: 1199.98px) {
    .formats {
        --col-gap: 48px;
        grid-template-columns: 1fr 1fr;
    }
    .format:first-child,
    .format:last-child { grid-column: 1 / -1; }

    /* содержимое пунктов — по центру */
    .format {
        padding: 28px 0;
        text-align: center;
    }
    .format__visual { justify-content: center; }
    .format--or .format__visual { padding-left: 0; }

    /* горизонтальных линий между рядами нет — только вертикальная с «или» */
    .format + .format:not(.format--or)::after { content: none; }
    /* «Очно в Белграде»: вместо линии сверху — вертикальная слева, между колонками */
    .format + .format--or::after {
        top: 0;
        bottom: 0;
        left: calc(var(--col-gap) / -2);
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .18) 25%,
            rgba(255, 255, 255, .18) 75%,
            rgba(255, 255, 255, 0));
    }
    .format--or::before { top: 52px; }
}

@media (max-width: 991.98px) {
    .format--or::before { top: 52px; }
}

@media (max-width: 575.98px) {
    .formats { --col-gap: 32px; }
    .format { padding: 24px 0; }
    .format--or::before { top: 48px; font-size: 12px; padding: 3px 8px; }
    .format__visual { height: 40px; }
    .format__icon { width: 36px; height: 36px; }
    .format__title { margin-top: 14px; font-size: 16px; }
    .format__text { margin-top: 6px; font-size: 13px; line-height: 140%; }
    .format__week { gap: 4px; }
    .format__week li { width: 30px; height: 30px; font-size: 10px; }
}

/* ---------- Стоимость ---------- */
.section--price {
    padding-top: 48px;
}

.plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Черта на одном уровне: название и цена в одну строку,
   а блок длительности всегда высотой в 2 строки (см. .plan__meta) */
.plan {
    position: relative;
    overflow: hidden;
    padding: 40px 28px 24px;
    border-radius: 24px;
    background: var(--white);
    text-align: center;
}

/* первая карточка — высота по контенту, остальные тянутся */
.plan:first-child {
    align-self: start;
}

.plan--popular {
    background: var(--blue);
    color: var(--white);
}

/* декоративный круг */
.plan--popular::before {
    content: '';
    position: absolute;
    top: -6px;
    right: -120px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--blue-light);
}

.plan > * {
    position: relative;
}

.plan__name {
    font-family: var(--font-display);
    font-size: 32px;
    font-style: italic;
    font-weight: 700;
    line-height: 110%;
    white-space: nowrap;
}

.plan--popular .plan__name {
    color: var(--lime);
}

.plan__price {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 800;
    line-height: 100%;
}

.plan__currency {
    margin-left: 4px;
    font-size: 55%;
    line-height: 0;
}

.plan__from {
    font-size: 32px;
    font-weight: 400;
    line-height: 0;
}

.plan__meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* текст прижат к черте */
    margin-top: 28px;
    min-height: calc(2 * 1.3em + 34px); /* 2 строки текста + padding-bottom (+2px запас на округление) */
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
    font-size: 18px;
    line-height: 130%;
}

.plan--popular .plan__meta {
    border-color: rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .85);
}

.plan__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    text-align: left;
}

.plan__list li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 130%;
    color: #555555;
}

.plan__list li::before {
    content: '✓';
    position: absolute;
    top: -3px;
    left: 0;
    font-size: 20px;
    color: #6070FF;
}

.plan--popular .plan__list li {
    color: rgba(255, 255, 255, .8);
}

.plan--popular .plan__list li::before {
    color: var(--lime);
}

.bonus {
    margin-top: 32px;
    padding: 24px 32px 28px;
    border-radius: 24px;
    background: var(--lime);
}

.bonus__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

.bonus__list {
    margin-top: 8px;
    padding-left: 12px;
}

.bonus__list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 140%;
}

.bonus__list li::before {
    content: '•';
    position: absolute;
    left: 0;
}

.bonus__list em {
    font-weight: 500;
}

/* ---------- Стоимость: адаптив ---------- */
@media (max-width: 1679.98px) {
    .plan { padding: 36px 22px 24px; }
    .plan__name { font-size: 26px; } /* «Групповой/Парный» помещается в карточку */
    .plan__price { font-size: 64px; }
    .plan__from { font-size: 28px; }
    .plan__meta { font-size: 17px; }
}

@media (max-width: 1399.98px) {
    .plan {
        padding: 32px 18px 22px;
        border-radius: 20px;
    }
    .plan__name { font-size: 22px; }
    .plan__price { margin-top: 10px; font-size: 54px; }
    .plan__from { font-size: 24px; }
    .plan__meta {
        margin-top: 22px;
        padding-bottom: 26px;
        min-height: calc(2 * 1.3em + 28px);
        font-size: 15px;
    }
    .plan__list { gap: 10px; margin-top: 20px; }
    .plan__list li { font-size: 13px; padding-left: 22px; }
    .plan__list li::before { font-size: 18px; }
    .bonus { padding: 22px 28px 24px; border-radius: 20px; }
    .bonus__title { font-size: 22px; }
    .bonus__list li { font-size: 15px; }
}

/* планшеты: 2 × 2 */
@media (max-width: 1199.98px) {
    .plans { grid-template-columns: repeat(2, 1fr); }
    .plan { padding: 32px 28px 24px; }
    .plan__name { font-size: 28px; }
    .plan__price { font-size: 60px; }
    .plan__from { font-size: 26px; }
    .plan__meta { font-size: 16px; }
    .plan__list li { font-size: 14px; }
}

/* телефоны: тарифы друг под другом */
@media (max-width: 575.98px) {
    .plans {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .plan {
        padding: 28px 20px 22px;
        border-radius: 18px;
    }
    .plan:first-child { align-self: stretch; }
    .plan__name { font-size: 26px; }
    .plan__price { font-size: 56px; }
    .plan__from { font-size: 24px; }
    .plan__meta {
        min-height: 0; /* в одну колонку выравнивать черту не с чем */
        margin-top: 16px;
        padding-bottom: 20px;
        font-size: 14px;
    }
    .plan__list { gap: 8px; margin-top: 16px; }
    .plan__list li { font-size: 13px; }
    .plan--popular::before { right: -110px; }
    .bonus {
        margin-top: 20px;
        padding: 18px 18px 20px;
        border-radius: 18px;
    }
    .bonus__title { font-size: 18px; }
    .bonus__list { padding-left: 4px; }
    .bonus__list li { padding-left: 14px; font-size: 13px; }
    .bonus__list li + li { margin-top: 6px; }
}

/* ---------- CTA ---------- */
.cta {
    padding: 64px 0 76px;
    text-align: center;
}

.cta__title {
    font-size: 54px;
    line-height: 108%;
}

.cta__text {
    text-wrap: balance; /* строки примерно равной длины — без одиноких слов в конце */
    margin-top: 16px;
    font-weight: 300;
    font-size: 18px;
    line-height: 150%;
    color: rgba(255, 255, 255, .85);
}

.cta__actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

/* ---------- CTA: адаптив (у заголовка свой размер — масштабируем его отдельно) ---------- */
@media (max-width: 1679.98px) {
    .cta__title { font-size: 46px; }
}

@media (max-width: 1399.98px) {
    .cta { padding: 56px 0 64px; }
    .cta__title { font-size: 40px; }
    .cta__text { font-size: 16px; }
    .cta__actions { margin-top: 32px; }
}

@media (max-width: 991.98px) {
    .cta { padding: 48px 0 56px; }
    .cta__title { font-size: 42px; } /* на планшетах и телефонах — крупнее обычных заголовков секций */
    .cta__text { font-size: 15px; }
    .cta__actions { gap: 16px; }
}

/* телефоны: кнопки друг под другом, по ширине текста */
@media (max-width: 575.98px) {
    .cta { padding: 44px 0 52px; }
    .cta__title { font-size: 36px; }
    .cta__text {
        margin-top: 14px;
        font-size: 14px;
    }
    .cta__actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }
    /* кнопки — как кнопка в hero на телефоне: 40px, 13px, ширина по тексту,
       зона нажатия расширена до 48px невидимой рамкой */
    .cta__actions .btn {
        position: relative;
        height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }
    .cta__actions .btn::before {
        content: '';
        position: absolute;
        inset: -4px 0;
    }
}

/* ---------- Footer ---------- */
.footer {
    background: var(--dark);
    color: var(--white);
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 144px;
}

.footer__logo {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    line-height: 100%;
}

.footer__logo span {
    color: var(--blue);
}

.footer__info {
    font-size: 14px;
    line-height: 130%;
    color: rgba(255, 255, 255, .55);
}

.footer__logo {
    justify-self: start;
}

.footer__links {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.footer__link {
    font-size: 14px;
    line-height: 130%;
    color: rgba(255, 255, 255, .5);
    transition: color .2s ease;
}

/* подчёркнуто только слово, без стрелки */
.footer__link-text {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}

.footer__link:hover {
    color: var(--lime);
}

.footer__link:hover .footer__link-text {
    text-decoration-color: var(--lime);
}

/* ---------- Footer: адаптив ---------- */
.footer__link { white-space: nowrap; } /* стрелка не отрывается от слова */

@media (max-width: 1399.98px) {
    .footer__inner { height: 120px; }
    .footer__logo { font-size: 32px; }
}

@media (max-width: 991.98px) {
    .footer__inner { height: 112px; }
    .footer__logo { font-size: 30px; }
    .footer__info { font-size: 13px; }
}

/* телефоны: логотип и ссылки в одной строке, подпись — ниже через тонкую линию */
@media (max-width: 767.98px) {
    .footer__inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo links"
            "info info";
        row-gap: 20px;
        height: auto;
        padding: 28px var(--gutter) 24px;
    }
    .footer__logo { grid-area: logo; font-size: 28px; }
    .footer__links { grid-area: links; gap: 6px; }
    .footer__info {
        grid-area: info;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        font-size: 12px;
    }
    /* «Преподаватель английского» — первой строкой, «Онлайн · Очно в Белграде» — второй */
    .footer__role,
    .footer__formats {
        display: block;
        white-space: nowrap;
    }
    .footer__sep { display: none; }
}

/* ---------- Модальное окно записи ---------- */
html.has-modal { overflow: hidden; } /* страница под окном не прокручивается */

/* место под полосу прокрутки зарезервировано всегда — когда модалка прячет полосу,
   контент и шапка не сдвигаются вправо */
html { scrollbar-gutter: stable; }

.modal {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 30px 80px rgba(17, 17, 17, .35);
    overflow: auto;
}

.modal::backdrop {
    background: rgba(17, 17, 17, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.modal[open] { animation: modal-in .35s cubic-bezier(.25, .8, .25, 1); }
.modal[open]::backdrop { animation: modal-fade-in .35s ease; }
.modal.is-closing { animation: modal-out .25s ease forwards; }
.modal.is-closing::backdrop { animation: modal-fade-out .25s ease forwards; }

@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes modal-fade-in { from { opacity: 0; } }
@keyframes modal-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .modal[open], .modal[open]::backdrop { animation: none; }
}

.modal__box {
    position: relative;
    padding: 56px 56px 52px;
    overflow: hidden;
    text-align: center;
}

/* декоративный круг — как в hero */
.modal__box::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--blue-light);
    pointer-events: none;
}

.modal__box > * { position: relative; }

.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    cursor: pointer;
    transition: background-color .2s ease;
}

.modal__close:hover { background: rgba(255, 255, 255, .22); }
.modal__close svg { width: 20px; height: 20px; }

.modal__eyebrow {
    font-size: 14px;
    letter-spacing: .02em;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--lime);
}

.modal__title {
    margin-top: 20px;
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 900;
    line-height: 108%;
    letter-spacing: -0.01em;
}

.modal__title em {
    font-style: italic;
    color: var(--lime);
}

.modal__text {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 300;
    line-height: 150%;
    color: rgba(255, 255, 255, .85);
    text-wrap: balance;
}

.modal__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* телефоны: окно — «шторка» снизу экрана, кнопки друг под другом */
@media (max-width: 575.98px) {
    .modal {
        width: 100vw;
        max-height: calc(100dvh - 24px);
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
    }
    .modal[open] { animation-name: modal-sheet-in; }
    .modal.is-closing { animation-name: modal-sheet-out; }

    .modal__box { padding: 56px 20px calc(32px + env(safe-area-inset-bottom)); } /* сверху — место под крестик */
    .modal__close { top: 12px; right: 12px; width: 36px; height: 36px; }
    .modal__eyebrow { font-size: 12px; }
    .modal__title { font-size: 30px; }
    .modal__text { font-size: 14px; }
    .modal__actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 32px;
    }
    /* кнопки — как в hero и в секции записи на телефоне */
    .modal__actions .btn {
        position: relative;
        height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }
    .modal__actions .btn::before {
        content: '';
        position: absolute;
        inset: -4px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__circle { transition: none; }
}

@keyframes modal-sheet-in { from { transform: translateY(100%); } }
@keyframes modal-sheet-out { to { transform: translateY(100%); } }

/* ---------- 404 ----------
   заголовок масштабируется в той же пропорции к «404», что и на десктопе (200 : 32).
   синий экран как hero: крупное «404», заголовок и «карточка словаря» */
.notfound {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 64px 0 80px;
    overflow: hidden;
    background: var(--blue);
    color: var(--white);
    text-align: center;
}

.notfound__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: var(--blue-light);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.notfound__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notfound__code {
    font-family: var(--font-display);
    font-size: 200px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lime);
}

.notfound__title {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: -0.01em;
}

.notfound__title em {
    font-style: italic;
    color: var(--lime);
}

/* карточка словаря */
.notfound__card {
    width: min(100%, 420px);
    margin-top: 32px;
    padding: 24px 28px 26px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: left;
}

.notfound__label {
    font-size: 12px;
    letter-spacing: .02em;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--lime);
}

.notfound__word {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
}

.notfound__ipa {
    margin-top: 4px;
    font-size: 15px;
    line-height: 140%;
    color: rgba(255, 255, 255, .6);
}

.notfound__translation {
    margin-top: 10px;
    font-size: 17px;
    line-height: 140%;
}

.notfound__example {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 14px;
    font-weight: 300;
    line-height: 150%;
    color: rgba(255, 255, 255, .8);
}

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

@media (max-width: 1399.98px) {
    .notfound__code { font-size: 168px; }
    .notfound__title { font-size: 26px; }
}

@media (max-width: 991.98px) {
    .notfound__circle { width: 520px; height: 520px; }
    .notfound__code { font-size: 140px; }
    .notfound__title { font-size: 22px; }
}

/* телефоны: кнопки друг под другом — как в секции записи */
@media (max-width: 575.98px) {
    .notfound { padding: 40px 0 56px; }
    .notfound__circle { width: 380px; height: 380px; }
    .notfound__code { font-size: 112px; }
    .notfound__title { font-size: 18px; }
    .notfound__card { margin-top: 24px; padding: 18px 20px 20px; border-radius: 16px; }
    .notfound__word { font-size: 24px; }
    .notfound__ipa { font-size: 14px; }
    .notfound__translation { font-size: 15px; }
    .notfound__example { font-size: 13px; }
    .notfound__actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }
    .notfound__actions .btn {
        position: relative;
        height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }
    .notfound__actions .btn::before {
        content: '';
        position: absolute;
        inset: -4px 0;
    }
}