/* ============================================================
   Осенний буткемп «Вектор ИИ» — короткий лендинг регистрации
   Макеты: Figma «Лендинг Вектор ИИ — DZN»
   Desktop 717:13775 (1440) · Tablet 733:6858 (744) · Mobile 733:6458 (375)

   Вёрстка десктопная (канва 1440). Все размеры и координаты — из макета.
   Страница ровно в три экрана: баннер, описание, финальный призыв.

   Картинки лежат в img/bootcamp-autumn/ (см. комментарии у каждого блока).
   Файлы mask-*.svg — это не арт, а формы карточек со ступенчатым вырезом
   угла: тем же слоем они лежат и в макете. Подключены через mask-image,
   чтобы вырез не запекался в растр и не тянулся вместе с фотографией.

   Страница тёмная: шапка и подвал сайта остаются светлыми, тёмная зона —
   это только .ba.
   ============================================================ */

:root {
    --ba-bg:     #0B0C0C;  /* фон страницы, он же цвет «чёрных» пятен подложки */
    --ba-white:  #FFFFFF;
    --ba-card:   #1A1A1A;  /* верх градиента большой карточки */
    --ba-purple: #702C9F;  /* яркие карточки-плашки формата */
    --ba-violet: #5037A0;
    --ba-indigo: #3B2876;  /* плашка для педагогов */
    --ba-radius: 16px;
    --ba-canvas: 1440px;
    --ba-col:    1216px;   /* контентная колонка — она всегда ровно такая */
    /* Боковое поле: 112px на канве 1440 и сжимается до нуля к 1216px.
       Так между 1216 и 1440 колонка остаётся 1216, а ужимаются только поля —
       вся внутренняя раскладка остаётся пиксельной, как в макете. */
    --ba-gutter: clamp(0px, calc((100% - 1216px) / 2), 112px);
}

/* ------------------------------------------------------------
   Каркас
   ------------------------------------------------------------ */
.ba, .ba * { box-sizing: border-box; }

/* Корень тянется во всю ширину окна, а канва макета (1440) — это секции
   внутри. Так подложка и декор могут выходить за пределы канвы и обрезаются
   только по краю окна, а не по краю колонки.
   min-width — контентная колонка: ниже 1216px десктопная раскладка уже не
   умещается и включается адаптив. */
.ba {
    position: relative;
    min-width: var(--ba-col);
    overflow: hidden;
    padding-bottom: 120px;
    /* Две собственные заливки фрейма макета, которые лежат под пятнами:
       скошенные радиальные градиенты, поэтому они вынесены в bg-glow*.svg
       ровно тем же SVG, что отдаёт Figma. У SVG preserveAspectRatio="none",
       так что слой тянется по всей тёмной зоне и обрезается только окном —
       как подложка на соседних лендингах (см. .vec в style-new.css).
       Без него страница заметно темнее по краям и вверху. */
    background-color: var(--ba-bg);
    background-image: url('img/bootcamp-autumn/bg-glow.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    color: var(--ba-white);
    font-family: '~', 'Proxima Nova', 'Inter', system-ui, sans-serif;
    font-weight: 400;
}

/* Контентная колонка. position: relative — точка отсчёта для декора,
   который в макете привязан к колонке, а не к канве.
   overflow не задаём: 3D-объект баннера в макете выходит за правый край
   колонки, обрезать его нельзя. */
.ba__w {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ba-canvas);
    margin: 0 auto;
    padding: 0 var(--ba-gutter);
}

.ba section {
    position: relative;
    width: 100%;
}

/* Канва для градиентных пятен — центрированные 1440 без overflow: пятна
   привязаны к её координатам (как в макете), но свободно выходят за края
   и обрезаются только окном. Нулевая точка — верх тёмной зоны, как у слоя
   background в макете. Сам градиентный фон здесь не лежит: он на .ba,
   иначе тянулся бы не по окну, а по канве. */
.ba__bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--ba-canvas);
    pointer-events: none;
    z-index: 0;
}

/* Градиентные пятна: слой background из макета, разобранный на элементы
   (эллипс + Layer blur в Figma = border-radius + filter: blur). Порядок в
   разметке = порядок отрисовки в макете, менять нельзя: «чёрные» пятна
   приглушают лежащие под ними фиолетовые.
   Три набора — свой на каждое разрешение, у макетов они разные:
   .ba__blob (десктоп, канва 1440, координаты в px),
   .ba__blob-t (планшет, канва 744) и .ba__blob-m (мобильные, канва 375) —
   там канва тянется по ширине окна, поэтому по горизонтали проценты. */
.ba__blob,
.ba__blob-t,
.ba__blob-m { position: absolute; border-radius: 50%; }
.ba__blob-t,
.ba__blob-m { display: none; }

.ba__blob--1 {
    left: -150px; top: 0; width: 850px; height: 850px;
    filter: blur(76.66px);
    opacity: .5;
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.ba__blob--2 {
    left: -870px; top: 56px; width: 1700px; height: 1700px;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.3%, #0B0C0C 15.87%, rgba(11, 12, 12, 0) 100%);
}
.ba__blob--3 {
    left: 844px; top: -106px; width: 830px; height: 830px;
    filter: blur(76.66px);
    opacity: .5;
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.ba__blob--4 {
    left: 560px; top: 63px; width: 1315px; height: 1338px;
    filter: blur(94.3px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #0B0C0C 0%, rgba(11, 12, 12, 0) 100%);
}
.ba__blob--5 {
    left: 824px; top: 6px; width: 520px; height: 530px;
    filter: blur(94.3px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #8523A0 0%, rgba(133, 35, 160, 0) 100%);
}
.ba__blob--6 {
    left: 0; top: 142px; width: 1440px; height: 1440px;
    filter: blur(94.3px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D08B0 0%, rgba(77, 8, 176, 0) 74.03%);
}
/* В макете это градиент от прозрачного к чёрному с почти нулевым
   горизонтальным радиусом — на 2310px он вырождается в сплошной круг. */
.ba__blob--7 {
    left: -435px; top: 1347px; width: 2310px; height: 2310px;
    filter: blur(150px);
    background: #000;
}
.ba__blob--8 {
    left: 27.5px; top: 1139px; width: 1385px; height: 1385px;
    filter: blur(150px);
    opacity: .7;
    background: radial-gradient(47.96% 47.96% at 50% 50%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
}

/* ------------------------------------------------------------
   Типографика и кнопка
   ------------------------------------------------------------ */
/* :where() — нулевая специфичность, иначе этот сброс перебивал бы
   margin-top у заголовков и описаний и отступы из макета не работали. */
.ba :where(p, h1, h2, h3) { margin: 0; }

/* Склейка, где перенос строки портит запись: «8–11» не должно рваться
   по тире. */
.ba-nb { white-space: nowrap; }

/* Кнопка (Buttons / Main).
   Селектор с префиксом .ba обязателен: страница лежит внутри <div class="🦄">,
   а в CSS сайта есть `.🦄 button { display: block; width: 100%; font-size: 0;
   background: none; border: none; }` со специфичностью (0,1,1). Одного класса
   .ba-btn (0,1,0) не хватает — кнопка становится невидимым блоком. */
.ba .ba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 206px;
    height: 54px;
    padding: 12px 24px;
    border: 0;
    border-radius: 99px;
    background: var(--ba-white);
    color: var(--ba-bg);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background .2s;
}
.ba .ba-btn:hover { background: #DCDCDC; }

/* ============================================================
   1. ЭКРАН 1. ШАПКА
   ============================================================ */
/* Высота задана явно: содержимое внутри позиционируется абсолютно
   по координатам макета. */
.ba-hero { height: 699px; padding-top: 48px; }
.ba-hero__body { position: relative; }

/* --- строка логотипов: Фонд x Академия ИИ x НТО --- */
.ba-logos { display: flex; align-items: center; gap: 24px; }
.ba-logos__i img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ba-logos__i--fond    { width: 125px; height: 41px; }
.ba-logos__i--academy { width: 100px; height: 39px; }
.ba-logos__i--nto     { width: 130px; height: 33px; }
.ba-logos__x { flex: 0 0 10px; width: 10px; height: 10px; }
.ba-logos__x svg { display: block; width: 100%; height: 100%; }

/* --- заголовок, ключевое сообщение, кнопка --- */
/* Ширина 528, а не 518 из макета: в Figma ключевое сообщение разбито на
   четыре строки, а в браузерном начертании третья («…интеллект»
   Национальной») длиннее на 6px и срывалась на пятую. Десять лишних
   пикселей текстовому блоку ничего не ломают — 3D-объект начинается на 608. */
.ba-hero__content {
    position: absolute;
    left: 0;
    top: 105px;          /* 153 в макете − 48 padding-top секции */
    width: 528px;
}
.ba-hero__title {
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
}
.ba-hero__desc {
    margin-top: 24px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.ba-hero__content .ba-btn { margin-top: 32px; }

/* 3D-объект баннера. Координаты макета минус боковое поле (112) и
   padding-top секции (48). Справа объект выходит за колонку на 24px —
   так в макете, поэтому колонку не обрезаем. */
.ba-hero__media {
    position: absolute;
    left: 608px;
    top: 0;
    width: 632px;
    height: 492px;
}
.ba-hero__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- три коротких тезиса под баннером --- */
.ba-intro {
    position: absolute;
    left: 0;
    top: 511px;          /* 559 − 48 */
    width: 100%;
    height: 108px;
}
/* разделительная линия из макета: 1px, белый с прозрачностью 0.2 */
.ba-intro::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: 1px;
    background: var(--ba-white);
    opacity: .2;
}
.ba-intro__i {
    position: absolute;
    top: 0;
    padding-top: 36px;
}
.ba-intro__i:nth-child(1) { left: 0;     width: 340px; }
.ba-intro__i:nth-child(2) { left: 417px; width: 280px; }
.ba-intro__i:nth-child(3) { left: 832px; width: 260px; }
/* квадратный маркер 8×8 — он же перекрывает линию */
.ba-intro__i::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--ba-white);
}
.ba-intro__i p { font-size: 20px; line-height: 1.2; }
.ba-intro__muted { opacity: .5; }

/* ============================================================
   2. ЭКРАН 2. ОПИСАНИЕ
   ============================================================ */
.ba-about { padding-top: 120px; }

/* Большая карточка слева и четыре плашки формата справа — две равные
   колонки по 604 (298 + 8 + 298). */
.ba-about__grid { display: flex; gap: 8px; }

/* --- общий текст про буткемп --- */
.ba-lead {
    position: relative;
    flex: 0 0 calc(50% - 4px);
    min-width: 0;
    height: 472px;
    padding: 32px;
    border-radius: var(--ba-radius);
    overflow: hidden;
    background: linear-gradient(180deg, var(--ba-card) 27.08%, var(--ba-violet) 100%);
}
.ba-lead__text { width: 456px; font-size: 24px; line-height: 32px; }
.ba-lead__text b { font-weight: 700; }
/* Бокс — габарит самого объекта (450×450), а не рамка «img»: в макете он
   вылезает за низ карточки, обрезает его только она сама. */
.ba-lead__media {
    position: absolute;
    right: 0;
    bottom: -178px;
    width: 450px;
    height: 450px;
}
.ba-lead__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- четыре компактные плашки формата --- */
.ba-facts {
    display: flex;
    flex: 0 0 calc(50% - 4px);
    min-width: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}
.ba-fact {
    flex: 0 0 calc(50% - 4px);
    height: 232px;
    padding: 32px;
    border-radius: var(--ba-radius);
    overflow: hidden;
    background: var(--ba-purple);
    font-size: 20px;
    line-height: 28px;
}
.ba-fact:nth-child(3),
.ba-fact:nth-child(4) {
    background: linear-gradient(184.6deg, #682A93 4.19%, var(--ba-violet) 94.77%);
}

/* --- узкая плашка для педагогов ---
   Форма со ступенчатым вырезом угла — маска, заливка плоская. */
.ba-teachers {
    position: relative;
    width: 100%;
    height: 194px;
    margin-top: 8px;
    background: var(--ba-indigo);
    -webkit-mask: url('img/bootcamp-autumn/mask-teachers.svg') no-repeat 0 0 / 100% 100%;
            mask: url('img/bootcamp-autumn/mask-teachers.svg') no-repeat 0 0 / 100% 100%;
}
.ba-teachers__title {
    position: absolute;
    left: 32px;
    top: 32px;
    width: 386px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.ba-teachers__desc {
    position: absolute;
    left: 644px;
    top: 35px;
    width: 539px;
    font-size: 20px;
    line-height: 28px;
}

/* --- рукописные стикеры-выноски «отправь» и «запусти» ---
   Целиком экспорты: и выноска, и текст, и наклон. Бокс — габарит
   экспорта, привязка — по центру рамки «img» из макета. */
.ba-sticker {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
/* Наклон впечён в экспорт, поэтому transform не докручивает стикер, а
   только покачивает его — как наклейки на «Формуле выбора» и «Хакатоне
   в Омске»: та же связка 4s ease-in-out infinite. */
.ba-sticker img { display: block; width: 100%; height: auto; }
.ba-sticker--send img { animation: ba-float-x 4s   ease-in-out infinite; }
.ba-sticker--run  img { animation: ba-float-y 4.6s ease-in-out infinite; }
@keyframes ba-float-x {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}
@keyframes ba-float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
/* доступность: у кого выключены анимации — наклейки стоят */
@media (prefers-reduced-motion: reduce) {
    .ba-sticker img { animation: none; }
}

.ba-sticker--send { left: calc(50% + 222.8px); top: 58px;  width: 158.5px; }
.ba-sticker--run  { left: calc(50% - 268.8px); top: 720px; width: 166px; }

/* ============================================================
   3. ЭКРАН 3. ФИНАЛЬНЫЙ ПРИЗЫВ
   ============================================================ */
.ba-final { padding-top: 120px; }

/* Карточка — цельный экспорт: в нём и градиент, и ступенчатый вырез угла
   (в альфе), и фото со стрелкой. Бокс ровно по экспорту, поэтому
   растягивать картинку нечему. */
.ba-final__card {
    position: relative;
    width: 100%;
    height: 401px;
    background: url('img/bootcamp-autumn/final-media.webp') no-repeat 0 0 / 100% 100%;
}

.ba-final__text {
    position: absolute;
    left: 80px;
    top: 74px;
    z-index: 2;
    width: 410px;
}
.ba-final__title {
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    line-height: 1.1;
}
.ba-final__desc {
    margin-top: 24px;
    font-size: 20px;
    line-height: 28px;
}
.ba-final__text .ba-btn { margin-top: 24px; }

/* ============================================================
   АДАПТИВ. Общая часть: канва распущена по ширине окна
   ============================================================ */
@media (max-width: 1215px) {
    .ba { min-width: 0; width: 100%; }
    .ba section { width: 100%; }
    .ba__w { width: 100%; }
    /* канва распущена — подложку тянем по ширине окна */
    .ba__bg { left: 0; width: 100%; transform: none; }
    .ba__blob { display: none; }
    .ba__blob-t { display: block; }
}

/* ============================================================
   ПЛАНШЕТ 744–1215 — макет Tablet (733:6858), канва 744
   ============================================================ */
@media (min-width: 744px) and (max-width: 1215px) {
    .ba { padding-bottom: 80px; }
    /* Колонка зафиксирована по макету (744 − 76×2 = 592) и просто
       центрируется: выше 744 растягивать её нечем — вся раскладка блока
       карточек пиксельная, а картинки в них поехали бы по пропорции.
       Тянется только подложка с пятнами. */
    .ba__w { max-width: 744px; padding: 0 76px; }
    .ba { background-image: url('img/bootcamp-autumn/bg-glow-tab.svg'); }

    /* ---------- 1. ШАПКА ---------- */
    .ba-hero { height: 632px; }
    .ba-logos { gap: 24px; }
    .ba-logos__i--fond    { width: 98px;  height: 33px; }
    .ba-logos__i--academy { width: 81px;  height: 31px; }
    .ba-logos__i--nto     { width: 104px; height: 27px; }
    .ba-logos__x { flex-basis: 9px; width: 9px; height: 9px; }

    .ba-hero__content { top: 105px; width: 383px; }
    .ba-hero__title { font-size: 40px; line-height: 48px; }
    .ba-hero__desc  { margin-top: 16px; width: 280px; font-size: 16px; line-height: 20px; }
    .ba-hero__content .ba-btn { margin-top: 32px; height: 48px; }

    /* В макете объект уходит за правый край колонки на 52px — держим его
       за правый край, а не за левый: колонка тут тянется. */
    .ba-hero__media {
        left: auto;
        right: -52px;
        top: 114px;
        width: 332px;
        height: 258px;
    }

    /* ---------- три тезиса ----------
       В макете это три колонки по 176 с равными промежутками — на растущей
       колонке они так же расходятся по краям. */
    .ba-intro { display: flex; justify-content: space-between; top: 453px; height: 131px; }
    .ba-intro__i:nth-child(1),
    .ba-intro__i:nth-child(2),
    .ba-intro__i:nth-child(3) { position: relative; left: auto; width: 176px; }
    .ba-intro__i p { font-size: 16px; }

    /* ---------- 2. ОПИСАНИЕ ---------- */
    .ba-about { padding-top: 120px; }
    /* Блок карточек не тянется шире макета: иначе плашки и выноски
       разъезжаются, а фото в финале ломает пропорцию. */
    .ba-about__grid,
    .ba-teachers {
        max-width: 592px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Колонка: flex-basis начинает задавать высоту, поэтому обе карточки
       переводим на auto и растягиваем по ширине. */
    .ba-about__grid { flex-direction: column; }
    .ba-lead,
    .ba-facts { flex: 0 0 auto; width: 100%; }

    .ba-lead { height: 440px; padding: 24px; }
    .ba-lead__text { width: 544px; max-width: 100%; }

    .ba-facts { flex-direction: row; }
    .ba-fact { padding: 24px; }
    .ba-fact:nth-child(1),
    .ba-fact:nth-child(2) { height: 188px; }
    .ba-fact:nth-child(3),
    .ba-fact:nth-child(4) { height: 216px; }

    .ba-teachers {
        width: 100%;
        height: auto;
        aspect-ratio: 592 / 245.165;
        -webkit-mask-image: url('img/bootcamp-autumn/mask-teachers-tab.svg');
                mask-image: url('img/bootcamp-autumn/mask-teachers-tab.svg');
    }
    .ba-teachers__title,
    .ba-teachers__desc {
        position: relative;
        left: auto;
        top: auto;
        width: 544px;
        max-width: 100%;
    }
    .ba-teachers__title { padding: 24px 24px 0; }
    .ba-teachers__desc  { margin-top: 16px; padding: 0 24px; }

    /* Блок карточек зафиксирован по ширине и отцентрован, поэтому стикеры
       тоже считаем от его центра (296 = половина 592), а не от края окна. */
    .ba-sticker--send { left: calc(50% - 333.9px); top: 409.5px;  width: 118.88px; }
    .ba-sticker--run  { left: calc(50% + 70.7px);  top: 1233.3px; width: 124.5px; }

    /* ---------- 3. ФИНАЛ ----------
       162 — это расстояние от низа плашки педагогов до карточки в макете
       (у блока Gains в Figma внизу остаётся запас под выноску «запусти»). */
    .ba-final { padding-top: 162px; }
    .ba-final__card {
        max-width: 592px;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 592 / 595;
        background-image: url('img/bootcamp-autumn/final-media-tab.webp');
    }
    .ba-final__text  { left: 24px;  top: 64px; width: 544px; max-width: calc(100% - 48px); }
    .ba-final__desc  { width: 464px; max-width: 100%; }
}

/* --- пятна планшетного макета (канва 744) --- */
@media (min-width: 744px) and (max-width: 1215px) {
    .ba__blob-t--1 {
        left: -32.865%; top: -13.89px; width: 99.28%; height: 738.64px;
        filter: blur(66.63px);
        opacity: .5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .ba__blob-t--2 {
        left: -102.18%; top: 34.78px; width: 198.56%; height: 1477.28px;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.3%, #0B0C0C 15.87%, rgba(11, 12, 12, 0) 100%);
    }
    .ba__blob-t--3 {
        left: 52.32%; top: -106px; width: 96.94%; height: 721.26px;
        filter: blur(66.61px);
        opacity: .5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .ba__blob-t--4 {
        left: 24.53%; top: 40.86px; width: 153.59%; height: 1162.71px;
        filter: blur(81.93px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #0B0C0C 0%, rgba(11, 12, 12, 0) 100%);
    }
    .ba__blob-t--5 {
        left: 50%; top: 25.35px; width: 51.76%; height: 392.53px;
        filter: blur(69.84px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #8523A0 0%, rgba(133, 35, 160, 0) 100%);
    }
    .ba__blob-t--6 {
        left: -34.14%; top: 109.51px; width: 168.19%; height: 1251.34px;
        filter: blur(81.96px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D08B0 0%, rgba(77, 8, 176, 0) 74.03%);
    }
    .ba__blob-t--7 {
        left: -84.95%; top: 1304.64px; width: 269.81%; height: 2007.36px;
        filter: blur(130.38px);
        background: #000;
    }
    .ba__blob-t--8 {
        left: -49.46%; top: 1602px; width: 198.92%; height: 1480px;
        filter: blur(185.59px);
        opacity: .7;
        background: radial-gradient(47.96% 47.96% at 50% 50%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
    }
}

/* ============================================================
   МОБИЛЬНЫЕ ≤743 — макет Mobile (733:6458), канва 375
   ============================================================ */
@media (max-width: 743px) {
    .ba { padding-bottom: 80px; }
    /* Та же логика, что и на планшете: колонка по макету (375 − 16×2 = 343),
       ниже 375 сужается вместе с окном. */
    .ba__w { max-width: 376px; padding: 0 16px; }
    .ba { background-image: url('img/bootcamp-autumn/bg-glow-mob.svg'); }
    .ba__blob-t { display: none; }
    .ba__blob-m { display: block; }

    .ba .ba-btn { width: 100%; }

    /* ---------- 1. ШАПКА ----------
       На мобильных баннер собирается в поток: логотипы, 3D-объект,
       текст с кнопкой, тезисы. */
    .ba-hero { height: auto; padding-top: 16px; }
    .ba-logos { gap: 13.95px; }
    .ba-logos__i--fond    { width: 56.95px; height: 19.18px; }
    .ba-logos__i--academy { width: 47.07px; height: 18.01px; }
    .ba-logos__i--nto     { width: 60.43px; height: 15.69px; }
    .ba-logos__x { flex-basis: 6px; width: 6px; height: 6px; }

    .ba-hero__media {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 300px;
        max-width: 100%;
        height: 230px;
        margin: 44.82px 0 0 22px;
    }

    .ba-hero__content {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-top: 23px;
    }
    .ba-hero__title { font-size: 40px; line-height: 48px; }
    .ba-hero__desc  { margin-top: 16px; width: auto; font-size: 16px; line-height: 20px; }
    .ba-hero__content .ba-btn { margin-top: 24px; height: 54px; }

    /* ---------- три тезиса: колонка, линия вертикальная ---------- */
    .ba-intro {
        position: relative;
        display: block;
        left: auto;
        top: auto;
        height: auto;
        margin-top: 56px;
    }
    .ba-intro::before {
        left: 4px;
        top: 4px;
        width: 1px;
        height: 182px;
    }
    .ba-intro__i:nth-child(1),
    .ba-intro__i:nth-child(2),
    .ba-intro__i:nth-child(3) {
        position: relative;
        left: auto;
        width: 100%;
        padding: 0 0 0 32px;
    }
    .ba-intro__i + .ba-intro__i { margin-top: 32px; }
    .ba-intro__i p { font-size: 16px; }

    /* ---------- 2. ОПИСАНИЕ ---------- */
    .ba-about { padding-top: 80px; }
    .ba-about__grid,
    .ba-teachers {
        max-width: 344px;
        margin-left: auto;
        margin-right: auto;
    }
    .ba-about__grid { flex-direction: column; }
    .ba-lead,
    .ba-facts { flex: 0 0 auto; width: 100%; }

    .ba-lead { height: 420px; padding: 32px; }
    .ba-lead__text { width: auto; font-size: 20px; line-height: 26px; }
    .ba-lead__media { bottom: -104px; width: 260px; height: 260px; }

    .ba-facts { flex-direction: column; flex-wrap: nowrap; }
    .ba-fact {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        padding: 24px;
        background: var(--ba-purple);
        font-size: 18px;
        line-height: 22px;
    }
    .ba-fact:nth-child(3) { background: var(--ba-purple); }
    .ba-fact:nth-child(4) { background: linear-gradient(182.34deg, #682A93 4.19%, var(--ba-violet) 94.77%); }

    .ba-teachers {
        width: 100%;
        height: auto;
        aspect-ratio: 344 / 226;
        -webkit-mask-image: url('img/bootcamp-autumn/mask-teachers-mob.svg');
                mask-image: url('img/bootcamp-autumn/mask-teachers-mob.svg');
    }
    .ba-teachers__title,
    .ba-teachers__desc {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        font-size: 18px;
        line-height: 22px;
    }
    .ba-teachers__title { padding: 24px 24px 0; }
    .ba-teachers__desc  { margin-top: 16px; padding: 0 24px 24px; }

    /* 172 = половина 344, ширины блока карточек */
    .ba-sticker--send { left: calc(50% - 175.6px); top: 381.3px;  width: 79.25px; }
    .ba-sticker--run  { left: calc(50% + 75.9px);  top: 1224.8px; width: 83px; }

    /* ---------- 3. ФИНАЛ ---------- */
    .ba-final { padding-top: 80px; }
    .ba-final__card {
        max-width: 344px;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 344 / 494;
        background-image: url('img/bootcamp-autumn/final-media-mob.webp');
    }
    /* Текст в потоке: ниже 376px колонка сужается, строк становится больше,
       и абсолютный блок налезал бы на фото. В потоке он растит карточку. */
    .ba-final__text {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        padding: 40px 24px 0;
    }
    .ba-final__title { font-size: 24px; line-height: 32px; }
    .ba-final__desc  { width: auto; font-size: 18px; line-height: 22px; }
    .ba-final__text .ba-btn { margin-top: 24px; }
}

/* ============================================================
   УЗКИЕ МОБИЛЬНЫЕ ≤375 — карточка с общим текстом растёт по контенту
   ============================================================
   До 375px колонка равна макету и высота карточки совпадает с ним. Ниже
   ширина падает, текст набирает лишние строки и налезает на 3D-объект.
   Поэтому высоту начинает задавать контент, а низ карточки резервируется
   под видимую часть объекта (260 − 104 = 156). */
@media (max-width: 375px) {
    .ba-lead { height: auto; min-height: 420px; padding-bottom: 156px; }
}

/* --- пятна мобильного макета (канва 375) --- */
@media (max-width: 743px) {
    .ba__blob-m--1 {
        left: -78.24%; top: -25.68px; width: 150.37%; height: 563.9px;
        filter: blur(50.86px);
        opacity: .5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .ba__blob-m--2 {
        left: -188.25%; top: 11.47px; width: 396.14%; height: 1485.53px;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.3%, #0B0C0C 15.87%, rgba(11, 12, 12, 0) 100%);
    }
    .ba__blob-m--3 {
        left: 16.12%; top: -96px; width: 146.83%; height: 550.63px;
        filter: blur(50.85px);
        opacity: .5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .ba__blob-m--4 {
        left: 30.02%; top: 96.12px; width: 232.64%; height: 887.64px;
        filter: blur(62.55px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #0B0C0C 0%, rgba(11, 12, 12, 0) 100%);
    }
    .ba__blob-m--5 {
        left: 12.60%; top: 4.27px; width: 78.40%; height: 299.67px;
        filter: blur(53.32px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #8523A0 0%, rgba(133, 35, 160, 0) 100%);
    }
    .ba__blob-m--6 {
        left: -77.20%; top: 248.53px; width: 254.75%; height: 955.31px;
        filter: blur(62.57px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D08B0 0%, rgba(77, 8, 176, 0) 74.03%);
    }
    .ba__blob-m--7 {
        left: -148.40%; top: 1731px; width: 397.33%; height: 1490px;
        filter: blur(96.78px);
        background: #000;
    }
    .ba__blob-m--8 {
        left: -93.07%; top: 1942px; width: 286.67%; height: 1075px;
        filter: blur(179.74px);
        opacity: .7;
        background: radial-gradient(47.96% 47.96% at 50% 50%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
    }
}

/* ============================================================
   Модалка анкеты — стили перенесены с лендинга «Формула выбора»
   Базовые стили формы приходят из b-order-form.css и style-form.css
   (подключены рядом с разметкой в HTML), здесь — только надстройка.
   Без неё модалка ломается: в CSS сайта есть
   `.🦄 button { display: block; width: 100%; font-size: 0 }`,
   и кнопки формы становятся невидимыми.
   Модалка светлая (белая карточка), поэтому цвета здесь не из тёмной
   палитры страницы, а те же, что у соседних лендингов.
   ============================================================ */
.b-order-subtitle.green { display: flex; align-items: center; gap: 8px; }
.b-order-subtitle.green svg { height: 24px; width: 24px; min-width: 24px; }
.b-order-subtitle.green span { font-size: 16px; line-height: 22px; color: #209F6D; font-weight: 400; }
.b-order-title { margin-bottom: 25px; }
.b-reg-field.first { flex: 0 0 60%; }
.b-reg-field.second { flex: 0 0 36.5%; }
.input-subtext { font-weight: 400; font-size: 16px; line-height: 24px; color: #B2B4B2; margin: 24px 0 8px; }
.🦄 .b-order-politic label { max-width: none; margin-left: 0; margin-top: 16px; }
.🦄 .b-order-politic .m-form-policy__text { font-size: 16px; max-width: 610px; color: #0B0C0C; }
.b-order-button button { margin-left: unset; }
.buttons { display: flex; justify-content: flex-start; gap: 32px; }
.🦄 .b-order-button button { padding: 12px 31px; max-width: unset; border-radius: 99px; }
.🦄 .b-order-button--white button { background-color: white; color: #46255D; border: 1px solid #46255D; padding: 12px 24px; }
.🦄 .b-order-button--white button:hover { background-color: rgb(220, 220, 220) !important; }
.🦄 .b-order-button { margin-top: 48px; }
.b-reg-field__input.telephone span { width: 90%; }
.b-reg-field__input.telephone.not-empty span { width: unset; }
.input-subtext.--bday { display: flex; justify-content: flex-start; margin-top: 0; }
.b-order-form-group-inputs.--first-row { align-items: flex-end; }
.b-reg-field__select-panel.error span { color: var(--color50); }
.🦄 .m-send-image { max-width: unset; }
.🦄 .m-send-title { max-width: 500px; margin: 32px auto 16px; }
.🦄 .b-order-forms-result .b-order-button { margin-top: 32px; justify-content: center; }
.🦄 .b-order-forms-result .b-order-button button { gap: 8px; }
.🦄 .b-order-forms-result p { font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; }

/* На мобильных базовый b-order-form.css разворачивает строку полей в
   колонку. В колонке flex-basis первой строки (ФИО / дата рождения)
   начинает задавать высоту, а align-items: flex-end — жать поля по
   контенту вместо растягивания. Поэтому здесь оба правила снимаем. */
@media screen and (max-width: 743px) {
    .b-order-form-group-inputs.--first-row { align-items: unset; }
    .b-reg-field.first,
    .b-reg-field.second { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   Экран успеха анкеты (Figma 717-16751): картинка во всю ширину окна.
   Общий стиль .m-send-image ограничивает её 242/290px под старый компас.
   ============================================================ */

#anketaForm .m-send-image {
    max-width: 544px;
}