/* ==========================================================================
   tgcars — лендинг. Палитра снята пипеткой с инвесторской презентации
   (тгкарс_инвестор.pdf), чтобы сайт и презентация читались как одно целое.

   Шрифт — Golos Text (Paratype, SIL OFL). Презентация растровая, имени шрифта
   в ней нет; Golos подобран по начертаниям — геометрический гротеск с круглыми
   овалами и характерной «д». Файлы лежат РЯДОМ, а не на CDN: строгая CSP
   разрешает только self, а зарубежные CDN в РФ ненадёжны — та самая причина,
   по которой домен уезжает с Cloudflare.
   ========================================================================== */

/* Кириллица и латиница разнесены по unicode-range: браузер качает только тот
   файл, который реально нужен странице. */
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-cyr-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-lat-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-cyr-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-lat-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-cyr-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-lat-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-cyr-800.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    src: url('assets/fonts/golos-lat-800.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
    /* Фирменные цвета из презентации */
    --navy-deep: #070F36;   /* тёмный фон титульной */
    --navy: #0D1E70;        /* основной синий логотипа */
    --navy-mid: #303183;    /* правый край градиентной пилюли */
    --purple: #7454A7;      /* середина градиента */
    --purple-light: #9F7FC0;/* левый край градиента */
    --lavender: #DCE3F6;    /* фон слайдов */
    --lavender-card: #C7CDFF;
    --ink: #1B2559;
    --ink-soft: #4A5480;
    --white: #FFFFFF;
    --danger: #E8323C;

    /* Ночные фоны — со слайдов 17-18 презентации (сине-фиолетовый разлёт) */
    --night: #151563;
    --night-violet: #2B1A6E;

    --grad-brand: linear-gradient(100deg, var(--purple-light) 0%, var(--navy-mid) 100%);
    --grad-dark: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #1A2E8C 100%);
    /* Фон тёмных секций: слева синий, справа фиолетовый — как на финальном слайде */
    --grad-night: linear-gradient(115deg, #0B1240 0%, var(--night) 48%, var(--night-violet) 100%);

    /* Текст на тёмном */
    --on-dark: rgba(255, 255, 255, .78);
    --on-dark-dim: rgba(255, 255, 255, .58);

    --radius-pill: 999px;
    --radius-lg: 28px;
    --radius-md: 20px;

    --shadow-card: 0 18px 48px rgba(13, 30, 112, .10);
    --shadow-float: 0 24px 64px rgba(7, 15, 54, .28);

    --wrap: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--lavender);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

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

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ============================= Шапка ============================= */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(220, 227, 246, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(13, 30, 112, .08);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

/* ТЗ: «Лого слева убираем» — в шапке логотипа нет, он раскрывается в футере.
   Место логотипа занимает меню, прижатое влево. */
.nav {
    display: flex;
    gap: 28px;
    margin-right: auto;
    flex-wrap: wrap;
}

.nav a {
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .18s, color .18s;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--purple); }

/* ============================= Кнопки ============================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s, box-shadow .16s, background .16s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--grad-brand);
    color: var(--white);
    box-shadow: 0 10px 26px rgba(48, 49, 131, .32);
}
.btn--primary:hover { box-shadow: 0 16px 34px rgba(48, 49, 131, .42); }

.btn--ghost {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, .38);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .2); }

.btn--light {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-card);
}

.btn--lg { padding: 18px 34px; font-size: 17px; }

/* ============================= Первый экран ============================= */

.hero {
    position: relative;
    background: var(--grad-dark);
    color: var(--white);
    padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 120px);
    overflow: hidden;
}

/* Диагональные световые пятна — отсылка к бликам фар на титульной презентации */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
.hero::before {
    width: 620px; height: 620px;
    background: rgba(116, 84, 167, .5);
    top: -220px; right: -160px;
}
.hero::after {
    width: 460px; height: 460px;
    background: rgba(26, 46, 140, .55);
    bottom: -200px; left: -140px;
}

.hero__inner { position: relative; z-index: 1; }

.bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 15px;
    font-weight: 600;
    margin-inline: auto;
}

.hero__bubble-row { display: flex; justify-content: center; }

/* Ротация лозунгов: три сменяющих друг друга заголовка (ТЗ, стр. 1).
   Все три лежат в потоке друг на друге, видимый переключается по таймеру. */
.hero__slogans {
    position: relative;
    margin: 34px auto 0;
    max-width: 940px;
    text-align: center;
    /* Высота задаётся самым длинным лозунгом: он лежит в потоке, остальные
       спозиционированы поверх — так блок не «прыгает» при смене. */
}

.slogan {
    font-size: clamp(30px, 5.4vw, 58px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

.slogan:not(.slogan--spacer) {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}
.slogan.is-active { opacity: 1; transform: translateY(0); }

/* Невидимый двойник самого длинного лозунга — держит высоту блока */
.slogan--spacer { visibility: hidden; }

.slogan em {
    font-style: normal;
    background: linear-gradient(96deg, #C7CDFF 0%, #9F7FC0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__cta {
    margin-top: clamp(32px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.hero__note { font-size: 15px; color: rgba(255, 255, 255, .72); margin: 0; text-align: center; }

/* Точки-индикаторы под ротацией */
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.dots button {
    width: 30px; height: 4px;
    border: 0; padding: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background .25s;
}
.dots button.is-active { background: var(--purple-light); }

/* ============================= Партнёры ============================= */

.partners {
    background: var(--white);
    padding: 34px 0;
}
.partners__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 72px);
    flex-wrap: wrap;
}
.partners__label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    font-weight: 700;
}
.partners__names {
    display: contents;  /* на широком экране названия — прямые дети flex-строки */
}
.partners__item {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    color: var(--navy);
    opacity: .78;
    letter-spacing: -.01em;
}

/* ============================= Секции ============================= */

.section { padding: clamp(56px, 8vw, 96px) 0; }

/* Тёмная секция. Ритм страницы: тёмный герой → светлая полоса партнёров →
   тёмные шаги → светлые варианты → тёмные тарифы → тёмный низ. Чередование
   не даёт длинной странице слипнуться в одно полотно. */
.section--night {
    position: relative;
    background: var(--grad-night);
    color: var(--white);
    overflow: hidden;
}
.section--night .section__lead { color: var(--on-dark); }

/* Световые пятна по краям — та же оптика, что в первом экране */
.section--night::before,
.section--night::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
}
.section--night::before {
    width: 520px; height: 520px;
    background: rgba(116, 84, 167, .34);
    top: -180px; left: -160px;
}
.section--night::after {
    width: 480px; height: 480px;
    background: rgba(26, 46, 140, .4);
    bottom: -220px; right: -140px;
}
.section--night > .wrap { position: relative; z-index: 1; }

.section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }

.section__title {
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}
.section__lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft); margin: 0; }

/* ---- Шаги с иллюстрациями ----
   Как в референсе: не общая линейка скриншотов, а пара «описание + экран» на
   каждый шаг. Стороны чередуются, чтобы взгляд шёл зигзагом.

   Геометрия взята из презентации: скруглённый треугольник (слайд 7), крупные
   пилюли с градиентом и круги. Формы сделаны на CSS, без картинок — их можно
   красить переменными и они ничего не весят. */

.steps { display: grid; gap: clamp(20px, 3vw, 34px); }

.step {
    position: relative;
    border-radius: var(--radius-lg);
    padding: clamp(26px, 3.6vw, 46px);
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    overflow: hidden;
    /* Стеклянная карточка на тёмном: чуть светлее фона + тонкая грань.
       Сплошная заливка на градиенте секции смотрелась бы заплаткой. */
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
}

/* Чётные шаги — картинка слева. `order` меняет только визуальный порядок:
   в разметке и для скринридера текст остаётся первым. */
.step:nth-child(even) { grid-template-columns: .75fr 1.25fr; }
.step:nth-child(even) .step__body { order: 2; }
.step:nth-child(even) .step__visual { order: 1; }


/* Крупная цифра-водяной знак в углу карточки. Только контур — заливка спорила
   бы с текстом. Это и есть основная «геометрия» блока. */
.step::before {
    content: attr(data-num);
    position: absolute;
    top: -.28em;
    right: .12em;
    font-size: clamp(120px, 17vw, 230px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .09);
    pointer-events: none;
    user-select: none;
}
.step:nth-child(even)::before { right: auto; left: .12em; }

/* Скруглённый треугольник — мотив со слайда 7. Мягкая «подушка» и вписанный
   треугольник; лежит за телефоном и задаёт глубину. */
.step__visual {
    position: relative;
    display: flex;
    justify-content: center;
}
.step__visual::before {
    content: '';
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    top: 8%;
    border-radius: 34% 34% 34% 34% / 40% 40% 30% 30%;
    background: linear-gradient(150deg, rgba(159, 127, 192, .5), rgba(48, 49, 131, .3));
    filter: blur(2px);
    z-index: 0;
}

.step__body { position: relative; z-index: 1; }

.step__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }

/* Номер в «пилюле» с градиентом — форма прямо из презентации */
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    flex-shrink: 0;
}
.step__title { font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; margin: 0; }

.step__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.step__list li {
    position: relative;
    padding-left: 26px;
    color: var(--on-dark);
    font-size: 16px;
}
.step__list li::before {
    content: '';
    position: absolute;
    left: 0; top: .5em;
    width: 10px; height: 10px;
    /* Скруглённый треугольник в миниатюре — тот же мотив, что за телефоном */
    border-radius: 34% 34% 34% 34% / 40% 40% 30% 30%;
    background: linear-gradient(140deg, var(--purple-light), var(--navy-mid));
}
.step__text { margin: 0; color: var(--on-dark); font-size: 16px; }

/* Телефон рядом с шагом */
.phone {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 264px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 34px;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(7, 15, 54, .45);
}

.phone__screen {
    aspect-ratio: 9 / 19.5;
    border-radius: 24px;
    background: var(--grad-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    overflow: hidden;
}
.phone__screen img {
    border-radius: 24px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Со скриншотом внутри тёмный градиент-подложка не нужен — он бы просвечивал
   по краям при округлении. */
.phone__screen:has(img) { background: none; padding: 0; }
/* ---- Два варианта работы ---- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 3vw, 30px); }

.plan {
    border-radius: var(--radius-lg);
    padding: clamp(26px, 3.6vw, 40px);
    background: var(--white);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}
.plan--dark { background: var(--grad-dark); color: var(--white); box-shadow: var(--shadow-float); }

.plan__badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 18px;
}
.plan--dark .plan__badge { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }

.plan__title { font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; margin: 0 0 22px; line-height: 1.2; }

.plan__features { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 20px; }

/* Кнопки в обеих карточках — на одном уровне. Списки преимуществ разной длины,
   поэтому кнопку прижимаем к низу через `margin-top: auto`, а не подгоняем
   отступы руками: карточки в гриде и так растянуты до общей высоты
   (`align-items: stretch` по умолчанию), значит и кнопки совпадут.
   `align-self: start` не даёт кнопке растянуться на всю ширину карточки. */
.plan > .btn {
    margin-top: auto;
    align-self: start;
}
.plan__feature-title {
    display: flex;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 5px;
    align-items: baseline;
}
.plan__plus { color: var(--purple-light); font-weight: 800; }
.plan--dark .plan__plus { color: #C7CDFF; }
/* Описание сдвинуто вправо, под ТЕКСТ заголовка, а не под «+»: отступ
   складывается из ширины плюса и gap-а в .plan__feature-title. Так сразу видно,
   что это пояснение к пункту, а не самостоятельный абзац. */
.plan__feature-text {
    color: var(--ink-soft);
    font-size: 15.5px;
    margin: 0;
    padding-left: 24px;
}
.plan--dark .plan__feature-text { color: rgba(255, 255, 255, .74); }

/* ---- Тарифы ---- */

.tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2.6vw, 26px); }

.tariff {
    position: relative;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--radius-lg);
    padding: clamp(26px, 3.4vw, 36px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Выделенный тариф — градиентная грань сверху вместо сплошной рамки */
.tariff--accent { border-color: rgba(159, 127, 192, .5); }
.tariff--accent::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--grad-brand);
}

.tariff__name { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: var(--white); }
.tariff__tag { font-size: 14px; color: var(--on-dark-dim); margin: 0 0 20px; }

.tariff__price {
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 6px;
    background: linear-gradient(100deg, #C7CDFF 0%, var(--purple-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Страховка: даже при системном увеличении шрифта или в другой локали
       цена не вылезет за карточку. Перенос — только когда иначе никак. */
    overflow-wrap: anywhere;
}

/* Цена словом, а не числом («Бесплатно», «Индивидуально»). Кегль меньше:
   «Индивидуально» — 14 знаков, при 38px оно шире карточки (290px минус
   отступы ≈ 218px). Заодно единообразно: числовая цена остаётся главной,
   словесные читаются как пояснение. */
.tariff__price--text { font-size: clamp(24px, 2.7vw, 29px); }
.tariff__price-note { font-size: 14px; color: var(--on-dark-dim); margin: 0 0 22px; }
.tariff__body { margin: 0; color: var(--on-dark); font-size: 15.5px; flex-grow: 1; }
.tariff__example {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 14.5px;
    color: var(--white);
}

/* ---- Финальный призыв ---- */

.cta {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: clamp(36px, 6vw, 68px);
    text-align: center;
    box-shadow: var(--shadow-float);
}
.cta__title { font-size: clamp(26px, 3.8vw, 40px); font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; }
.cta__lead { font-size: clamp(16px, 2vw, 19px); color: var(--on-dark); margin: 0 0 30px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Одинаковая ширина: тексты разной длины («Написать на почту» / «Написать в
   MAX») иначе дают кнопки разного размера, и пара выглядит небрежно. */
.cta__actions .btn { min-width: 232px; }

/* ============================= Футер ============================= */

.footer {
    background: var(--navy-deep);
    color: rgba(255, 255, 255, .74);
    padding: clamp(44px, 6vw, 68px) 0 32px;
}
.footer__top {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
}
.footer__logo { width: 168px; margin-bottom: 16px; }
.footer__about { font-size: 15px; margin: 0; max-width: 320px; }

.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.footer__col-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
    font-weight: 700;
    margin: 0 0 14px;
}
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__links a { text-decoration: none; font-size: 15.5px; transition: color .18s; }
.footer__links a:hover { color: var(--white); }

.footer__bottom {
    margin-top: clamp(32px, 5vw, 52px);
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}

/* ============================= Адаптив ============================= */

@media (max-width: 860px) {
    .footer__top { grid-template-columns: 1fr; }

    /* Телефон уходит под текст. Сбрасываем order у чётных шагов, иначе на
       мобильном картинка оказалась бы ВЫШЕ своего описания. */
    .step,
    .step:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
    .step:nth-child(even) .step__body,
    .step:nth-child(even) .step__visual { order: initial; }

    /* В одну колонку карточка читается как отдельный экран: заголовок и кнопка
       по центру, список — по-прежнему слева, иначе маркеры разъезжаются и текст
       становится «лесенкой». */
    .step__head { justify-content: center; }
    .step__title { text-align: center; }
    .step__text { text-align: center; }

    .plan { align-items: center; text-align: center; }
    .plan__badge { align-self: center; }
    /* Кнопка тоже по центру: `align-self: start` из десктопной версии прижал бы
       её к левому краю. */
    .plan > .btn { align-self: center; }

    /* Тарифы тоже читаются как отдельные экраны — всё по центру. */
    .tariff { align-items: center; text-align: center; }
    .tariff__example { width: 100%; }

    /* А вот список преимуществ — по левому краю, как и списки в шагах.
       По центру заголовок «+ Быстрый запуск…» и описание «Позволяет…» имеют
       разную длину, поэтому их левые края не совпадают и пункт выглядит
       съехавшим. Слева они выстраиваются по одной линии и читаются легче:
       центрированный многострочный текст рвёт взгляд на каждой строке. */
    .plan__features { text-align: left; }
}

/* Партнёры. На широком — всё в одну строку; когда места мало, подпись
   «Наши партнёры» встаёт отдельной строкой, а названия выстраиваются под ней.
   Иначе подпись и логотипы переносятся вперемешку и связь теряется. */
@media (max-width: 760px) {
    .partners__inner {
        flex-direction: column;
        gap: 18px;
    }
    .partners__names {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Больше воздуха, чем на широком экране: в столбик названия иначе
           слипаются в сплошной текст. */
        gap: 14px clamp(28px, 9vw, 52px);
    }
}

@media (max-width: 620px) {
    /* Две кнопки по 232px с зазором перестают помещаться в строку — ставим в
       столбик во всю ширину. min-width сбрасываем, иначе они останутся узкими
       и разной длины. */
    .cta__actions { flex-direction: column; align-items: stretch; }
    .cta__actions .btn { min-width: 0; width: 100%; }

    .header__inner { min-height: 64px; gap: 12px; }
    .nav { gap: 16px; font-size: 14px; }
    .nav a { font-size: 14px; }
    /* На узком экране кнопка в шапке занимает много места — прячем,
       призыв к действию всё равно дублируется в первом экране и внизу. */
    .header .btn { display: none; }
}