/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

h1,
h2,
h3,
p,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Roboto-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Geologica';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/GeologicaRoman-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Geologica';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/GeologicaRoman-Bold.woff2') format('woff2');
}

/* ==========================================================================
   Base
   ========================================================================== */

:root {
    --color-text: #333333;
    --color-text-dark: #1A1C20;
    --color-bg-light: #F1F8FF;
    --color-bg-primary: #FDFDFD;
    --color-accent: #FFD012;
    --color-accent-hover: #FEDE59;
    --color-accent-active: #EEBF00;
    --color-blue-active: #006DE9;
    --color-blue: #0077FF;
    --color-white: #FFFFFF;
    --color-line: #CFE7FF;
    --container: 1200px;
    --shadow-card: 0 13px 19.3px rgba(0, 58, 124, 0.08);
    --color-error: #FC5C6C; /* Figma 231:647 — состояние ошибки в форме */
    --color-placeholder: #B2B2B2;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg-primary);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
}

.br-desktop,
.br-wide {
    display: none;
}

@media (min-width: 1280px) {
    .br-wide {
        display: inline;
    }
}

@media (min-width: 768px) {
    .br-mobile {
        display: none;
    }
}

@media (min-width: 1024px) {
    .br-desktop {
        display: inline;
    }

}

/* .br-narrow — перенос для всего, что уже широкого десктопа: до 1280 «Ты решаешь.»
   не помещается в строку целиком и «Ты» повисает в конце предыдущей */
@media (min-width: 1280px) {
    .br-narrow {
        display: none;
    }
}

.u-nowrap {
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Buttons */

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    padding: 16px 36px;
    border-radius: 20px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.0357em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-text);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
}

.btn--primary:active {
    background: var(--color-accent-active);
}

/* На ховере белая кнопка становится синей с белой обводкой — обводку держим всегда,
   прозрачной, иначе на переходе прыгает размер */
.btn--white {
    border: 2px solid transparent;
    background: var(--color-white);
    color: var(--color-blue);
}

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

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

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    position: relative;
    background: var(--color-bg-primary);
}

.header__inner {
    display: flex;
    align-items: center;
    padding: 13px 16px;
}

.header__burger {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

/* Иконку переключаем по aria-expanded — отдельный класс состояния не нужен */
.header__burger-icon--close,
.header__burger[aria-expanded='true'] .header__burger-icon--menu {
    display: none;
}

.header__burger[aria-expanded='true'] .header__burger-icon--close {
    display: block;
}

.header__logo {
    display: block;
    flex: 0 0 auto;
    margin: 0 auto;
}

.header__logo img {
    width: 98px;
    height: 40px;
}

/* Burger takes 40px on the left; compensate on the right so the logo stays centered */
.header__inner::after {
    content: '';
    width: 40px;
    flex: 0 0 auto;
}

.header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--color-bg-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.header__nav.is-open {
    display: block;
}

.header__menu {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 16px;
}

.header__link {
    display: flex;
    align-items: center;
    height: 55px;
    padding: 0 7px;
    font-size: 16px;
    line-height: 14px;
    white-space: nowrap;
    color: var(--color-text);
}

/* Ховер пункта меню: синий, чуть жирнее и подчёркнутый */
.header__link:hover {
    font-weight: 500;
    text-decoration: underline;
    color: var(--color-blue);
}

/* На планшете меню во всю ширину экрана, и кнопка на 700+ пикселей выглядит нелепо */
@media (min-width: 768px) and (max-width: 1023px) {
    .header__login {
        max-width: 160px;
    }
}

/* В макете мобильного хедера кнопки «Войти» нет, но и попасть в аккаунт с телефона
   тогда неоткуда — показываем её последним пунктом в раскрытом меню (VS-8641) */
.header__login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 32px);
    height: 55px;
    margin: 0 16px 24px;
    border: 2px solid var(--color-accent);
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    line-height: 14px;
    color: var(--color-text);
}

/* «Войти»: в покое только жёлтая рамка, на ховере заливается ею же */
.header__login:hover {
    background: var(--color-accent);
}

.header__login:active {
    border-color: var(--color-accent-active);
    background: var(--color-accent-active);
}

@media (min-width: 1024px) {
    .header {
        background: var(--color-bg-light);
    }

    .header__inner {
        padding: 22px max(40px, calc((100% - var(--container)) / 2));
    }

    .header__inner::after,
    .header__burger {
        display: none;
    }

    .header__logo {
        margin: 0 15px;
    }

    .header__logo img {
        width: 130px;
        height: 55px;
    }

    .header__nav {
        display: flex;
        align-items: center;
        position: static;
        flex: 1 1 auto;
        margin-left: 40px;
        background: none;
        box-shadow: none;
    }

    .header__menu {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 0;
        margin-left: auto;
    }

    .header__login {
        display: flex;
        align-items: center;
        width: auto;
        height: 55px;
        margin: 0 0 0 48px;
        padding: 0 30px;
        border: 2px solid var(--color-accent);
        border-radius: 20px;
        font-weight: 700;
        font-size: 16px;
        line-height: 14px;
        color: var(--color-text-dark);
    }
}

@media (min-width: 1280px) {
    .header__nav {
        margin-left: 181px; /* 196px in Figma minus 15px logo container padding */
    }

    .header__login {
        margin-left: 222px;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: 48px 16px 0;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.hero__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.hero__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 35px;
    color: var(--color-text);
}

.hero__title-top {
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.hero__title-accent {
    position: relative;
    color: var(--color-blue);
}

.hero__title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 54px;
    height: 5px;
    background: url('../img/hero-underline.svg') no-repeat center / 100% 100%;
}

.hero__lead {
    font-size: 16px;
    line-height: 1.19;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero__features {
    display: flex;
    justify-content: center;
    height: 130px;
    gap: 20px;
    padding: 0 16px;
}

.hero__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 96px;
    font-size: 12px;
    text-align: center;
}

.hero__feature img {
    width: 48px;
    height: 48px;
}

.hero__feature span {
    width: 81px;
}

.hero__feature:nth-child(3) span {
    width: 86px;
}

/* Visual: photo, checklist card, handwritten notes. Absolute layout from Figma */
.hero__visual {
    position: relative;
    width: 360px;
    height: 593px;
    margin: 0 calc((100% - 360px) / 2); /* при 360 даёт -16px: визуал от края экрана, как в Figma */
}

.hero__glow {
    position: absolute;
    left: 64px;
    top: 267px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: var(--color-white);
    filter: blur(22px);
}

.hero__shadow {
    position: absolute;
    max-width: none;
    left: 30px;
    top: 495px;
    width: 390px;
    height: 98px;
}

.hero__shadow img {
    width: 100%;
    height: 100%;
    max-width: none;
}

.hero__photo {
    position: absolute;
    z-index: 2; /* на мобилке фото поверх карточки (порядок слоёв Figma) */
    left: 9px;
    top: 213px;
    width: 339px;
    height: 372px;
}

.hero__card {
    position: absolute;
    left: 65px;
    top: 0;
    width: 231px;
    height: 248px;
    padding: 16px 11px 28px;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.hero__card li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--color-line);
    font-size: 15px;
    line-height: 1.2; /* Figma: auto — гипотеза, подобрано по референсу (шаг строк ~42px) */
    color: var(--color-text);
}

.hero__card li:last-child {
    border-bottom: 0;
}

.hero__card li::before {
    content: '';
    flex: 0 0 auto;
    width: 12px; /* Figma 10×7 — бокс пути; с обводкой 2px SVG 12×10 */
    height: 10px;
    background: url('../img/icon-check.svg') no-repeat center / contain;
}

.hero__note {
    position: absolute;
    z-index: 3;
}

/* подписи для макета 1024–1279, в остальных диапазонах не участвуют */
.hero__note1024 {
    display: none;
    max-width: none;
}

.hero__note--left {
    left: 16px;
    top: 310px;
    width: 61px;
    height: 29px;
}

.hero__note--right {
    left: 275px;
    top: 277px;
    width: 69px;
    height: 33px;
}

.hero__arrow {
    position: absolute;
    z-index: 3;
}

.hero__arrow--left {
    left: 51px;
    top: 340px;
    width: 42px;
    height: 38px;
}

.hero__arrow--right {
    left: 275px;
    top: 311px;
    width: 28px;
    height: 40px;
}

@media (min-width: 1024px) {
    .hero {
        padding: 0 max(40px, calc((100% - var(--container)) / 2));
    }

    .hero__inner {
        position: relative;
        display: block;
        height: 720px;
        max-width: var(--container);
        margin: 0 auto;
    }

    .hero__text {
        position: absolute;
        left: 0;
        top: 111px;
        width: 578px;
        text-align: left;
    }

    .hero__title {
        font-size: 40px;
        line-height: 50px;
    }

    .hero__title-top {
        margin-bottom: 6px;
    }

    .hero__title-accent::after {
        bottom: -6px;
        width: 95px;
        height: 7px;
    }

    .hero__lead {
        font-size: 20px;
        line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    }

    .hero__actions {
        position: absolute;
        left: 0;
        top: 426px;
        flex-direction: row;
        gap: 24px;
    }

    .hero__features {
        position: absolute;
        left: 0;
        top: 538px;
        height: auto;
        gap: 40px;
        padding: 0;
    }

    .hero__feature {
        align-items: flex-start;
        gap: 6px;
        width: auto;
        font-size: 14px;
        line-height: 18px;
        text-align: left;
    }

    .hero__feature span,
    .hero__feature:nth-child(3) span {
        width: 131px;
    }

    .hero__feature:nth-child(2) span {
        width: 121px;
    }

    .hero__feature:nth-child(3) span {
        width: 179px;
    }

    .hero__visual {
        position: absolute;
        right: 0;
        top: 0;
        width: 663px;
        height: 720px;
        margin: 0;
        transform-origin: 100% 0;
    }

    .hero__glow {
        left: 106px;
        top: 104px;
        width: 562px;
        height: 562px;
        filter: blur(43px);
    }

    /* Figma: группа «плашка» 190:109. Её видимая область задана маской 592.5x196.2 в точке (796, 553),
       а экспорт приходит канвой 672x188, где маска начинается в (40.2, 3) — значит канва ложится
       в (755.8, 550), то есть left = 755.8 − 657 (визуал) ≈ 99 */
    .hero__shadow {
        left: 99px;
        top: 550px;
        width: 673px;
        height: 188px;
    }

    .hero__photo {
        z-index: auto; /* на десктопе карточка поверх фото */
        left: 0;
        top: 0;
        width: 656px;
        height: 721px;
    }

    .hero__card {
        left: 435px;
        top: 63px;
    }

    .hero__note--left {
        left: -14px;
        top: 186px;
        width: 120px;
        height: 56px;
    }

    .hero__note--right {
        left: 620px;
        top: 361px;
        width: 117px;
        height: 55px;
    }

    .hero__arrow--left {
        left: 56px;
        top: 246px;
        width: 83px;
        height: 76px;
    }

    .hero__arrow--right {
        left: 652px;
        top: 420px;
        width: 48px;
        height: 67px;
    }
}

/* 1280–1380: подпись «Контролирую каждый этап» лежит на 74px правее визуала, а у края
   экрана здесь всего 40px — она срезалась. Уменьшаем визуал на 10% и отодвигаем от края:
   одного масштаба не хватало (74 × 0.9 всё ещё больше 40). Верхняя граница 1380, а не 1350:
   на 1351 в натуральную величину подписи не хватало ещё 6px */
@media (min-width: 1280px) and (max-width: 1380px) {
    .hero__visual {
        right: 36px;
        transform: scale(0.9);
        transform-origin: 100% 100%;
    }
}

/* 1024–1279: макета нет — гипотеза, визуал масштабируем, текст ужимаем */
/* 1024–1279: отдельный макет от дизайнера (Figma 227:100, фрейм «1 экран» 227:124).
   Координаты в спеке отсчитаны от края экрана 1024, а у секции padding 32 — поэтому всё,
   что правее текста, пересчитано относительно контейнера и группы «студент». */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero {
        padding: 0 32px;
    }

    /* 791 — высота фрейма в Figma, но фото уходит ниже (195 + 644 = 839) и там его не режут.
       Даём контейнеру высоту по фото, иначе низ снимка срезается */
    .hero__inner {
        height: 839px;
        max-width: none;
    }

    .hero__text {
        top: 80px;
        width: 578px;
    }

    .hero__lead {
        width: 433px;
        font-size: 18px;
    }

    .hero__actions {
        top: 391px;
    }

    /* Figma: блок 332px, поэтому преимущества переносятся 2 + 1.
       justify-content сбрасываем: с центрированием строки разъезжаются и третий пункт
       оказывается не под первым, а посередине */
    .hero__features {
        top: 499px;
        width: 332px;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 32px;
    }

    /* группа «студент» 672×644 в точке (381, 195) — правым краем выходит за контейнер */
    .hero__visual {
        right: -61px;
        top: 195px;
        width: 672px;
        height: 644px;
        transform: none;
    }

    .hero__photo {
        left: 0;
        top: 0;
        width: 586px;
        height: 644px;
    }

    /* экспорт плашки приходит канвой 601×168, маска внутри в точке (35.9, 2.7),
       а по спеке она должна лежать в (143.2, 453) — отсюда сдвиг канвы */
    .hero__shadow {
        left: 107px;
        top: 450px;
        width: 601px;
        height: 168px;
    }

    .hero__card {
        left: auto;
        right: 61px;
        top: -115px;
    }

    .hero__glow {
        left: 382px;
        top: -91px;
        width: 562px;
        height: 562px;
    }

    /* здесь подпись и стрелка приходят одной картинкой */
    .hero__note,
    .hero__arrow {
        display: none;
    }

    .hero__note1024 {
        display: block;
        position: absolute;
        z-index: 3;
    }

    .hero__note1024--left {
        left: -108px;
        top: 394px;
        width: 189px;
        height: 114px;
    }

    .hero__note1024--right {
        left: 482px;
        top: 159px;
        width: 115px;
        height: 122px;
    }
}

/* 768–1023: макета нет — гипотеза, мобильная раскладка с ограничением ширины */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__inner {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how {
    padding: 48px 16px;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.how__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 16px;
    border-radius: 32px;
    background: var(--color-white);
}

.how__title {
    padding: 0 24px;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    text-align: center;
    color: var(--color-text);
}

.how__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.how__step {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 24px;
    border-radius: 20px;
    background: var(--color-line);
}

/* Бейдж: белый круг 37px, цифра 42.75px цвета карточки выходит за круг */
.how__num {
    position: relative;
    display: block;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--color-white);
}

.how__num span {
    position: absolute;
    left: 1px;
    top: -4px;
    font-weight: 700;
    font-size: 42.75px;
    line-height: 53px;
    color: var(--color-line);
}

.how__step-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.how__step-text {
    font-size: 14px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

/* На мобилке ширину тексту задаём правым отступом карточки: при 360 остаётся макетные 154px,
   поэтому строки рвутся там же, где в Figma, а текст не прилипает к левому краю узкой колонкой */
@media (max-width: 767px) {
    .how__step {
        padding-right: 118px;
    }

    /* в Figma текст пятой карточки уже остальных (147 против 154), поэтому «что» уходит
       во вторую строку — добираем отступом, чтобы строка рвалась сама, без <br> */
    .how__step:nth-child(5) {
        padding-right: 130px;
    }
}

/* уже 360 макета нет: отступ убираем совсем, иначе текст рвётся почти на каждом слове */
@media (max-width: 359px) {
    .how__step,
    .how__step:nth-child(5) {
        padding-right: 24px;
    }
}

/* Ширины текстов из Figma — только на десктопе; на мобилке по решению заказчика текст на всю ширину карточки */
@media (min-width: 1024px) {
    .how__step:nth-child(1) .how__step-text {
        max-width: 154px;
    }

    .how__step:nth-child(2) .how__step-text,
    .how__step:nth-child(4) .how__step-text {
        max-width: 155px;
    }

    .how__step:nth-child(5) .how__step-text {
        max-width: 147px;
    }
}

.how__arrow {
    display: none;
    position: absolute;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .how__inner {
        max-width: 480px;
    }
}

@media (min-width: 1024px) {
    .how {
        padding: 40px max(40px, calc((100% - var(--container)) / 2)) 80px;
    }

    .how__inner {
        gap: 40px;
        padding: 40px 32px;
    }

    .how__title {
        font-size: 40px;
        text-align: left;
    }

    .how__steps {
        flex-direction: row;
        gap: 20px;
        min-height: 201px; /* 291 (fixed inner) − 50 (title) − 40 (gap) */
    }

    .how__step {
        flex: 1 1 0;
        min-width: 0;
    }

    .how__step:nth-child(3) .how__step-title {
        max-width: 131px;
    }
}

/* 1024–1279: пять карточек в ряд слишком узкие — переносим на две строки (3 + 2), вторая по центру */
@media (min-width: 1024px) and (max-width: 1279px) {
    .how__steps {
        flex-wrap: wrap;
        justify-content: center;
        min-height: 0;
    }

    .how__step {
        flex: 0 0 calc((100% - 40px) / 3); /* три карточки и два гэпа по 20px */
    }

    /* ширины текстов из Figma рассчитаны на узкую карточку пятиколоночного ряда */
    .how__step .how__step-text,
    .how__step:nth-child(3) .how__step-title {
        max-width: none;
    }
}

/* Стрелки между карточками. Боксы узлов в Figma повёрнутые (59×56 при отрисованных 58×32),
   поэтому координаты сняты с референса figma/desktop/img_1.png относительно белой плашки — гипотеза ±3px */
@media (min-width: 1280px) {
    .how__arrow {
        display: block;
    }

    .how__arrow--1 {
        left: 200px;
        top: 112px;
    }

    .how__arrow--2 {
        left: 676px;
        top: 114px;
    }

    .how__arrow--3 {
        left: 439px;
        top: 305px;
    }

    .how__arrow--4 {
        left: 925px;
        top: 302px;
    }
}

/* ==========================================================================
   Carousel (общий модуль: эксперты, чат)
   ========================================================================== */

.carousel__track {
    display: flex;
    gap: var(--carousel-gap, 20px);
    /* поля под тень карточек (overflow режет box-shadow), компенсированы margin'ами */
    padding: var(--carousel-bleed, 24px) var(--carousel-bleed-x, 24px) var(--carousel-bleed-bottom, 44px);
    margin: calc(-1 * var(--carousel-bleed, 24px)) calc(-1 * var(--carousel-bleed-x, 24px)) calc(-1 * var(--carousel-bleed-bottom, 44px));
    scroll-padding-left: var(--carousel-bleed-x, 24px); /* снап от края контента, а не padding-box */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

.carousel__item {
    flex: 0 0 var(--carousel-item, 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always; /* ТЗ п.3: по одной карточке за жест */
}

.carousel__dots {
    position: relative;
    z-index: 1; /* поверх нижнего поля трека, иначе клики по точкам уходят в трек */
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.carousel__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #D8ECFF;
}

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

.carousel--light .carousel__dot {
    background: var(--color-white);
}

.carousel--light .carousel__dot.is-active {
    background: var(--color-blue);
}

/* ==========================================================================
   Experts
   ========================================================================== */

.experts {
    padding: 48px 16px;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.experts__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: var(--container);
    margin: 0 auto;
}

.experts__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.experts__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    color: var(--color-text);
}

.experts__title-accent {
    position: relative;
    color: var(--color-blue);
}

.experts__title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 48px;
    height: 6px; /* SVG 78×10 с обводкой, пропорционально */
    background: url('../img/experts-underline.svg') no-repeat center / 100% 100%;
}

.experts__lead {
    font-size: 16px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.experts__carousel {
    --carousel-gap: 24px;
    /* на мобилке карточка во всю ширину, соседняя не выглядывает — как в секции чата,
       и ширина ограничена так же, чтобы на широких телефонах слайд не растягивался */
    --carousel-item: 100%;
    /* width обязателен: с одним лишь max-width авто-маргины в flex-колонке делают ширину
       по контенту, а контент — карточки шириной 100%, и блок распирает наружу */
    width: 100%;
    max-width: 360px;
    /* поля под тень карточки — как у слайдера чата; на 1px больше bleed трека,
       чтобы в них не показывался край соседней карточки */
    padding: 0 16px;
    margin: 0 auto;
}

.experts__carousel .carousel__track {
    --carousel-bleed-x: 15px;
}

/* Карусель экспертов должна быть во всю ширину экрана, как слайдер чата: иначе её поля
   под тень съедают ширину карточки. Поэтому боковые отступы секции переносим на текст */
@media (max-width: 767px) {
    .experts {
        padding-left: 0;
        padding-right: 0;
    }

    .experts__text,
    .experts__actions {
        padding-left: 16px;
        padding-right: 16px;
    }
}


.carousel__item img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 8px 14px rgba(0, 58, 124, 0.05); /* слабее макетной: по краям трека тень обрезается */
}

.experts__actions {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* контейнер во всю ширину, ограничиваем только текст: иначе трек пришлось бы выпускать
       наружу через 100vw, а vw считается вместе с полосой прокрутки и даёт горизонтальный скролл */
    .experts__text,
    .experts__actions {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* три карточки одновременно — логика индикатора та же, что на десктопе */
    .experts__carousel {
        --carousel-gap: 20px;
        --carousel-item: calc((100% - 2 * var(--carousel-gap)) / 3);
        max-width: none;
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .experts {
        padding: 80px max(40px, calc((100% - var(--container)) / 2));
    }

    .experts__inner {
        display: grid;
        grid-template-columns: 461px 708px;
        grid-template-rows: 1fr auto;
        justify-content: space-between;
        column-gap: 31px;
        row-gap: 24px;
    }

    .experts__text {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
    }

    .experts__title {
        width: 578px; /* шире колонки — как в Figma */
        font-size: 40px;
    }

    .experts__title-accent::after {
        bottom: -5px;
        width: 78px;
        height: 10px;
    }

    .experts__lead {
        width: 357px;
        font-size: 20px;
    }

    .experts__carousel {
        --carousel-gap: 20px;
        --carousel-item: calc((100% - 40px) / 3);
        max-width: none;
        padding: 0;
        grid-column: 2;
        grid-row: 1 / 3;
    }

    /* полей по бокам нет: в макете ровно три карточки, а в поле было видно край соседней.
       Тень при этом режется по краям — поэтому у карточек карусели она ослаблена (см. .carousel__item img) */
    .experts__carousel .carousel__track {
        --carousel-bleed-x: 0px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        scroll-padding-left: 0;
    }

    .carousel__item img {
        border-radius: 20px;
        box-shadow: 0 8px 14px rgba(0, 58, 124, 0.05);
    }

    .experts__actions {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        flex-direction: row;
    }
}

/* 1024–1279: колонки не влезают в 944px — гипотеза */
@media (min-width: 1024px) and (max-width: 1279px) {
    .experts__inner {
        grid-template-columns: minmax(0, 1fr) 560px;
    }

    /* колонка 560 — три карточки были бы по 173px, поэтому здесь их две (по 270, как в макете) */
    .experts__carousel {
        --carousel-item: calc((100% - var(--carousel-gap)) / 2);
    }

    .experts__title,
    .experts__lead {
        width: auto;
    }

    .experts__title {
        font-size: 32px;
    }

    /* карточки 173px нечитаемы — показываем две */
    .experts__carousel {
        --carousel-item: calc((100% - 20px) / 2);
    }
}

/* ==========================================================================
   Chat
   ========================================================================== */

.chat {
    padding: 48px 0;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.chat__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: var(--container);
    margin: 0 auto;
}

.chat__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
    text-align: center;
}

.chat__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    color: var(--color-text);
}

.chat__title-accent {
    color: var(--color-blue);
}

.chat__lead {
    font-size: 16px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.chat__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.25;
}

.chat__list li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.chat__list li::before {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 10px;
    background: url('../img/icon-check.svg') no-repeat center / contain;
}

.chat__visual {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chat__carousel {
    max-width: 360px; /* шире слайдер на мобилке не растягиваем */
    margin: 0 auto;
    --carousel-gap: 16px; /* Figma 14.45 — при 14.45 в поле контейнера торчит 1.5px соседней карточки */
    --carousel-item: 100%;
    --carousel-bleed: 0px;
    --carousel-bleed-x: 15px; /* на 1px меньше паддинга 16, чтобы край соседней карточки не показывался */
    --carousel-bleed-bottom: 44px;
    padding: 16px;
    border-radius: 32px;
    background: var(--color-line);
}

.chat__carousel .carousel__item img {
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}

.chat__card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    /* по ширине карточки внутри слайдера: слайдер 360 минус его паддинги 16 */
    width: calc(100% - 32px);
    max-width: 328px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.chat__card-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
}

.chat__steps {
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 14px;
    line-height: 1.25;
}

.chat__steps li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat__steps li::before {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: url('../img/icon-check-round.svg') no-repeat center / contain;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .chat__inner {
        max-width: 480px;
    }
}

@media (min-width: 1024px) {
    .chat {
        padding: 80px max(40px, calc((100% - var(--container)) / 2));
    }

    .chat__inner {
        display: grid;
        grid-template-columns: 461px 708px;
        justify-content: space-between;
        /* в макете текст выровнен по верху голубого блока, а не по центру колонки */
        align-items: start;
        column-gap: 31px;
    }

    .chat__text {
        padding: 0;
        text-align: left;
    }

    .chat__title {
        font-size: 40px;
    }

    .chat__lead {
        font-size: 20px;
    }

    .chat__list {
        gap: 12px;
        font-family: 'Geologica', Arial, sans-serif;
        font-size: 16px;
    }

    .chat__list li {
        justify-content: flex-start;
    }

    .chat__visual {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .chat__carousel {
        --carousel-item: 417.7px;
        --carousel-gap: 14.45px;
        --carousel-bleed-x: 0px;
        --carousel-bleed-bottom: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 13px;
        flex: 1 1 auto;
        min-width: 0;
        height: 654px;
        padding: 24px;
    }

    .chat__carousel {
        max-width: none;
    }

    /* трек шириной в одну карточку и по центру блока: в Figma карточка прижата влево, по решению — центрируем */
    .chat__carousel .carousel__track {
        width: var(--carousel-item);
        margin-left: auto;
        margin-right: auto;
    }

    .chat__carousel .carousel__item img {
        box-shadow: none;
    }

    .chat__carousel .carousel__dots {
        margin-top: 0;
    }

    .chat__card {
        flex: 0 0 209px;
        width: auto;
        max-width: none;
        margin: 0;
    }
}

/* 1024–1279: макета нет — гипотеза */
@media (min-width: 1024px) and (max-width: 1279px) {
    .chat__inner {
        grid-template-columns: minmax(0, 1fr) 560px;
    }

    .chat__title {
        font-size: 32px;
    }

    .chat__lead {
        font-size: 18px;
    }

    /* узкая колонка: мобильная картинка 328 (source media ≥1280 в HTML), высота по контенту */
    .chat__carousel {
        --carousel-item: 100%;
        height: auto;
    }

    .chat__carousel .carousel__track {
        width: auto;
    }
}

/* ==========================================================================
   Safety («Твои деньги под защитой»)
   ========================================================================== */

.safety {
    padding: 48px 16px;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.safety__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: var(--container);
    margin: 0 auto;
}

.safety__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.safety__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    color: var(--color-text);
}

.safety__lead {
    font-size: 16px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.safety__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    padding: 24px 0;
}

.safety__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 0 0 50%;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
}

.safety__item img {
    position: relative;
    width: 80px;
    height: 80px;
}

/* Мобилка: номер шага — синий кружок в правом верхнем углу иконки */
.safety__item {
    position: relative;
}

.safety__item::after {
    content: attr(data-num);
    position: absolute;
    top: 0;
    left: calc(50% + 16px); /* 56px от левого края иконки 80px по центру */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-blue);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
}

.safety__item:nth-child(1) span { width: 92px; }
.safety__item:nth-child(2) span { width: 97px; }
.safety__item:nth-child(3) span { width: 101px; }
.safety__item:nth-child(4) span { width: 119px; }
.safety__item:nth-child(5) span { width: 125px; }

@media (min-width: 768px) and (max-width: 1023px) {
    .safety__inner {
        max-width: 480px;
    }
}

@media (min-width: 1024px) {
    .safety {
        padding: 80px max(40px, calc((100% - var(--container)) / 2));
    }

    .safety__inner {
        display: grid;
        grid-template-columns: 461px 708px;
        justify-content: space-between;
        align-items: center;
        column-gap: 31px;
    }

    .safety__text {
        text-align: left;
    }

    .safety__title {
        font-size: 40px;
    }

    .safety__lead {
        font-size: 20px;
    }

    .safety__steps {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }

    .safety__item {
        flex: 1 1 0;
        align-items: flex-start;
        padding: 24px 0;
        text-align: left;
    }

    .safety__item::after {
        content: none;
    }
}

/* 1024–1279: макета нет — гипотеза */
@media (min-width: 1024px) and (max-width: 1279px) {
    .safety__inner {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .safety__title {
        font-size: 32px;
    }

    .safety__lead {
        font-size: 18px;
    }
}

/* ==========================================================================
   Plates («Если что-то пойдёт не так» / «Полная конфиденциальность»)
   ========================================================================== */

.plates {
    padding: 0 16px 20px;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-text-dark);
}

.plates__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--container);
    margin: 0 auto;
}

.plate {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 24px;
    overflow: hidden;
    border-radius: 32px;
}

.plate--blue {
    height: 374px;
    background: var(--color-line);
}

.plate--green {
    height: 367px;
    background: #BCEAA4;
}

.plate__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.plate__text {
    font-size: 14px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

/* Картинка + размытое пятно позади (координаты Figma) */
.plate__pic {
    position: absolute;
}

.plate__pic::before {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.plate__pic img {
    position: relative;
}

.plate__pic--buoy {
    right: -13px; /* Figma 360: x=115 при ширине 328 → правый край за плашкой на 13px */
    top: 144px;
    width: 226px;
    height: 226px;
}

.plate__pic--buoy::before {
    left: 53px;
    top: 18px;
    width: 129px;
    height: 129px;
    background: #D8ECFF;
    filter: blur(13.5px);
}

.plate__pic--folder {
    right: -12px; /* Figma 360: x=147 + 193 = 340 при ширине 328 */
    top: 182px;
    width: 193px;
    height: 193px;
}

.plate__pic--folder img {
    width: 193px;
    height: 193px;
}

.plate__pic--folder::before {
    left: 29.41px;
    top: 27.57px;
    width: 134.18px;
    height: 134.18px;
    background: #8AD764;
    filter: blur(26.8px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .plates__inner {
        max-width: 480px;
    }
}

@media (min-width: 1024px) {
    .plates {
        padding: 0 max(40px, calc((100% - var(--container)) / 2)) 20px;
    }

    .plates__inner {
        flex-direction: row;
    }

    .plate {
        flex: 1 1 0;
        min-width: 0;
        height: 269px;
        padding: 40px;
    }

    .plate__title {
        width: 353px;
    }

    .plate__text {
        width: 336px;
    }

    .plate__pic--buoy {
        right: 24px; /* 590 − 340 − 226 */
        top: 54px;
    }

    .plate__pic--buoy::before {
        left: 53px;
        top: 18px;
    }

    .plate__pic--folder {
        right: 33px; /* 590 − 347 − 210 */
        top: 62px;
        width: 210px;
        height: 210px;
    }

    .plate__pic--folder img {
        width: 210px;
        height: 210px;
    }

    .plate__pic--folder::before {
        left: 32px;
        top: 30px;
        width: 146px;
        height: 146px;
    }
}

/* 1024–1279: макета нет — гипотеза, картинки меньше и в правом нижнем углу */
@media (min-width: 1024px) and (max-width: 1279px) {
    .plate {
        padding: 32px;
    }

    .plate__title,
    .plate__text {
        width: auto;
        max-width: calc(100% - 150px);
    }

    .plate__pic--buoy,
    .plate__pic--folder {
        top: auto;
        right: 16px;
        bottom: 16px;
        width: 160px;
        height: 160px;
    }

    .plate__pic--buoy img,
    .plate__pic--folder img {
        width: 160px;
        height: 160px;
    }

    .plate__pic--buoy::before,
    .plate__pic--folder::before {
        left: 25px;
        top: 20px;
        width: 100px;
        height: 100px;
    }
}

/* ==========================================================================
   CTA («Ты выбираешь. Ты решаешь. Ты контролируешь.»)
   ========================================================================== */

.cta {
    padding: 0 16px 40px;
    background: var(--color-bg-light);
    font-family: 'Geologica', Arial, sans-serif;
    color: var(--color-white);
}

.cta__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.cta__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 144px; /* Figma: место под каракули */
    padding: 24px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--color-blue);
}

.cta__text {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.cta__title {
    width: 289px; /* Figma: фикс, шире контента (280) */
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
}

.cta__lead {
    font-size: 20px;
    line-height: 1.25; /* Figma: auto = 1.25 по метрикам Geologica: (1950 + 550) / 2000 */
    color: var(--color-bg-light);
}

/* На мобилке ограничиваем лид: 210px — ширина самой длинной строки при макетных переносах
   («безопасные условия,»), поэтому переносы держатся как в Figma на любой ширине,
   а текст не растягивается под каракулю */
@media (max-width: 767px) {
    .cta__lead {
        max-width: 210px;
    }
}

.cta__action {
    position: relative; /* якорь для каракули: она должна стоять над кнопкой, а не от верха карточки */
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.cta__note {
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    color: var(--color-bg-light);
}

/* Каракули: бокс в Figma повёрнутый, позиция снята с референса (гипотеза ±5px).
   Считаем от кнопки, а не от верха карточки: на широких экранах лид занимает меньше строк,
   карточка становится ниже и при фиксированном top остриё уезжало под кнопку.
   Остриё стрелки в SVG — точка (115, 193) при размере 206×198. */
.cta__doodle {
    position: absolute;
    left: 50%;
    margin-left: -74px; /* при 360 даёт макетные left: 90px — остриё правее центра, как в Figma */
    bottom: calc(100% + 22px); /* 198 − 193 = 5 до низа картинки, в Figma остриё в 27px над кнопкой */
    pointer-events: none;
}

.cta__doodle img {
    width: 206px;
    height: 198px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    padding: 40px 16px;
    background: var(--color-bg-light);
    font-family: 'Roboto', Arial, sans-serif;
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
}

.footer__text {
    font-size: 12px;
    line-height: 16px;
    color: #627386;
}

.footer__copy {
    flex: 0 0 auto;
    font-weight: 300;
    font-size: 12px;
    line-height: 10px;
    white-space: nowrap;
    color: var(--color-text-dark);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cta__inner,
    .footer__inner {
        max-width: 480px;
    }

    /* макета нет — гипотеза: заголовок по ширине. Лид тут в две строки, а каракуля привязана
       к кнопке снизу, поэтому места под неё нужно больше мобильных 144 — иначе текст лежит на стрелке */
    .cta__card {
        gap: 240px;
    }

    .cta__title {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .cta {
        padding: 0 max(40px, calc((100% - var(--container)) / 2)) 80px;
    }

    .cta__card {
        flex-direction: row;
        align-items: center;
        gap: 13px;
        padding: 40px;
    }

    .cta__text {
        flex: 1 1 0;
        min-width: 0;
    }

    .cta__title {
        width: 631px; /* шире колонки — как в Figma */
        font-size: 40px;
    }

    .cta__action {
        flex: 1 1 0;
        align-items: flex-end;
        padding: 0 32px;
    }

    .cta__note {
        text-align: right;
    }

    .cta__action {
        position: static; /* на десктопе каракуля позиционируется от карточки */
    }

    .cta__doodle {
        left: 498px;
        margin-left: 0;
        top: 40px;
        bottom: auto;
    }

    .cta__doodle img {
        width: 316px;
        height: 159px;
    }

    .footer {
        padding: 40px max(40px, calc((100% - var(--container)) / 2));
    }

    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 72px;
        text-align: left;
    }

    .footer__text {
        width: 605px;
    }
}

/* 1024–1279: макета нет — гипотеза */
@media (min-width: 1024px) and (max-width: 1279px) {
    .cta__title {
        width: auto;
        font-size: 32px;
    }

    .cta__lead {
        font-size: 18px;
    }

    .cta__action {
        padding: 0;
    }

    /* Между текстом и кнопкой на 1024 свободно ~220px, поэтому каракулю уменьшаем
       и ставим от правого края: кнопка тут 261px шириной плюс 40px паддинга карточки */
    .cta__doodle {
        left: auto;
        right: 321px;
        top: 50%;
        bottom: auto;
        margin-left: 0;
        transform: translateY(-50%);
    }

    .cta__doodle img {
        width: 170px;
        height: 86px;
    }

    .footer__text {
        width: auto;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Modal (форма email)
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow-y: auto; /* низкий вьюпорт: коробка не должна уезжать за экран */
    overscroll-behavior: contain;
    font-family: 'Geologica', Arial, sans-serif;
}

.modal[hidden] {
    display: none;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 38, 50, 0.83); /* #1A2632, opacity .83 */
}

.modal__box {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 328px;
    padding: 48px 24px 40px;
    border-radius: 20px;
    background: var(--color-white);
}

.modal__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px; /* зона клика 44×44, иконка визуально на 14/14 от угла */
    height: 44px;
    padding: 0;
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal__field {
    display: flex;
    flex-direction: column;
}

.modal__input {
    width: 100%;
    height: 55px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--color-bg-light);
    font-size: 16px;
    color: var(--color-text);
    outline: none;
}

.modal__input::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

.modal__field.is-invalid .modal__input {
    border-color: var(--color-error);
}

/* Figma: сообщение под полем, 12px, с отступом 16px слева и 4px от поля */
.modal__error {
    margin-top: 4px;
    padding: 0 16px;
    font-family: 'Geologica', Arial, sans-serif;
    font-size: 12px;
    line-height: 1.25;
    color: var(--color-error);
}

.modal__error[hidden] {
    display: none;
}

@media (min-width: 1024px) {
    .modal__box {
        max-width: 574px;
        padding: 60px 40px;
    }

    .modal__close {
        width: 55px;
        height: 55px;
    }
}

body.is-modal-open {
    position: fixed; /* iOS Safari: overflow:hidden не держит скролл */
    inset: 0;
    overflow: hidden;
}

.modal__params {
    display: none;
}