/* ============================================================
   Хакатон «Формула выбора» — МГПУ, онлайн
   Макеты: Figma «Лендинг онлайн-хакатона "Формула выбора"»
   Desktop 32:773 (1440) · Tablet 39:2339 (744) · Mobile 46:5491 (375)

   Вёрстка десктопная (канва 1440). Все размеры и координаты — из макета.
   Картинки лежат в img/formula/ (см. комментарии у каждого блока).

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

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

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

/* Корень тянется во всю ширину окна, а канва макета (1440) — это секции
   внутри. Так подложка и декор могут выходить за пределы канвы и обрезаются
   только по краю окна, а не по краю колонки.
   min-width — контентная колонка: ниже 1216px десктопная раскладка уже не
   умещается и включается адаптив. */
.fv {
    position: relative;
    min-width: var(--fv-col);
    overflow: hidden;
    padding-bottom: 120px;
    background: var(--fv-bg);
    color: var(--fv-white);
    font-family: '~', 'Proxima Nova', 'Inter', system-ui, sans-serif;
    font-weight: 400;
}

/* Контентная колонка. position: relative — точка отсчёта для декора,
   который в макете привязан к колонке, а не к канве. */
.fv__w {
    position: relative;
    z-index: 2;
    display: flow-root;
    width: 100%;
    max-width: var(--fv-canvas);
    margin: 0 auto;
    padding: 0 var(--fv-gutter);
}

.fv__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

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

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

.fv__blob--1 {
    left: -292.79px; top: 83.27px; width: 697.53px; height: 419.74px;
    border-radius: 50%;
    transform: rotate(30deg);
    filter: blur(151.425px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.fv__blob--2 {
    left: 838.21px; top: 442.26px; width: 697.53px; height: 419.74px;
    border-radius: 50%;
    transform: rotate(30deg);
    filter: blur(151.425px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.fv__blob--3 {
    left: 912.21px; top: 220.27px; width: 697.53px; height: 419.74px;
    border-radius: 50%;
    transform: rotate(30deg);
    filter: blur(151.425px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #006732 0%, rgba(0, 103, 50, 0) 100%);
}
.fv__blob--4 {
    left: 583.49px; top: 413.11px; width: 1098.84px; height: 725.47px;
    border-radius: 362.737px;
    transform: rotate(134.679deg); transform-origin: 0 0;
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
}
.fv__blob--5 {
    left: -427.00px; top: 4148.00px; width: 830.00px; height: 830.00px;
    border-radius: 50%;
    filter: blur(76.6626px);
    opacity: 0.5;
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.fv__blob--6 {
    left: -11.93px; top: 3052.00px; width: 1462.85px; height: 920.00px;
    border-radius: 50%;
    transform: rotate(30deg);
    filter: blur(262.215px);
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.fv__blob--7 {
    left: 226.00px; top: 2780.00px; width: 988.00px; height: 769.00px;
    border-radius: 384.5px;
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
}
.fv__blob--8 {
    left: 2362.58px; top: 3813.46px; width: 899.12px; height: 1730.91px;
    border-radius: 449.559px;
    transform: rotate(120deg); transform-origin: 0 0;
    filter: blur(185px);
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
}
.fv__blob--9 {
    left: 1165.58px; top: 3333.46px; width: 899.12px; height: 1730.91px;
    border-radius: 449.559px;
    transform: rotate(120deg); transform-origin: 0 0;
    filter: blur(185px);
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
}
.fv__blob--10 {
    left: 0.00px; top: 272.00px; width: 1440.00px; height: 1440.00px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.9;
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D07B2 0%, rgba(77, 7, 178, 0) 78%);
}
.fv__blob--11 {
    left: -886.00px; top: 1023.00px; width: 1624.00px; height: 1624.00px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.5;
    background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, #02ADEE 100%);
}
.fv__blob--12 {
    left: 1267.68px; top: 1785.34px; width: 1624.00px; height: 1624.00px;
    border-radius: 812px;
    transform: rotate(135deg); transform-origin: 0 0;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #0B0C0C 15.8654%, rgba(11, 12, 12, 0) 100%);
}
.fv__blob--13 {
    left: 1403.66px; top: 3732.34px; width: 899.89px; height: 899.89px;
    border-radius: 449.944px;
    transform: rotate(135deg); transform-origin: 0 0;
    filter: blur(77px);
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #0B0C0C 15.8654%, rgba(11, 12, 12, 0) 100%);
}
.fv__blob--14 {
    left: 737.97px; top: 2541.63px; width: 1098.84px; height: 1098.84px;
    border-radius: 549.421px;
    transform: rotate(134.679deg); transform-origin: 0 0;
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
}
.fv__blob--15 {
    left: 2125.53px; top: 4318.72px; width: 1273.89px; height: 1273.89px;
    border-radius: 636.947px;
    transform: rotate(134.679deg); transform-origin: 0 0;
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
}
.fv__blob--16 {
    left: 1303.53px; top: 4487.72px; width: 1273.89px; height: 1273.89px;
    border-radius: 636.947px;
    transform: rotate(134.679deg); transform-origin: 0 0;
    opacity: 0.9;
    background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
}
.fv__blob--17 {
    left: 706.00px; top: 1537.00px; width: 1098.00px; height: 1098.00px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.9;
    background: radial-gradient(50.00% 50.00% at 50.00% 50.00%, #4D08B0 0%, rgba(77, 8, 176, 0) 77.8846%);
}

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

.fv__h2 {                        /* Desktop/Headline/H2/Bold Italic */
    font-weight: 700;
    font-style: italic;
    font-size: 64px;
    line-height: 72px;
    text-align: center;
}

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

/* ============================================================
   1. БАННЕР
   ============================================================ */
.fv-hero { height: 661px; padding-top: 48px; }

/* Точка отсчёта для абсолютного 3D-объекта — контентная колонка,
   поэтому координаты макета уменьшены на 112 (боковое поле) и на 48
   (padding-top секции). */
.fv-hero__body { position: relative; }

/* --- строка логотипов --- */
.fv-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 24px;
}
.fv-logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fv-logos__x { flex: 0 0 10px; width: 10px; height: 10px; }
.fv-logos__x svg { display: block; width: 100%; height: 100%; }
.fv-logos__i { flex: 0 0 auto; }
.fv-logos__i--fond   { width: 125px; height: 41px; }
.fv-logos__i--academy{ width: 100px; height: 39px; }
.fv-logos__i--first  { width: 24px;  height: 47px; }
.fv-logos__i--decade { width: 68px;  height: 47px; }
.fv-logos__i--mgpu   { width: 70px;  height: 51.96px; }

/* 3D-объект баннера. Бокс — рамка «img» из макета (864, 119, 526×526),
   она же держит место в потоке на мобильных.
   Сам экспорт больше рамки: это склейка объектов, которые в макете вылезают
   за неё влево и вверх и обрезаются только канвой. Отношения постоянны на
   всех разрешениях (рамка везде квадратная), поэтому заданы в процентах:
   659 / 526 = 125.285%, 710.5 / 526 = 135.076%, −83 / 526 = −15.779%,
   −105 / 526 = −19.962%. */
.fv-hero__media {
    position: absolute;
    left: 752px;    /* 864 − 112 */
    top: 71px;      /* 119 − 48 */
    width: 526px;
    height: 526px;
}
.fv-hero__media img {
    display: block;
    position: absolute;
    left: -15.779%;
    top: -19.962%;
    width: 125.285%;
    height: 135.076%;
    object-fit: contain;
}

.fv-hero__content {
    position: relative;
    z-index: 1;
    margin-top: 99px;   /* 199 − 48 − 51.96 (высота строки логотипов) */
    width: 638px;
}

/* Дата — тег-пилюля: белая плашка с чёрным текстом. */
.fv-hero__date {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;

    background: var(--fv-white);
    color: var(--fv-bg);
    font-size: 16px;
    line-height: 24px;
}
.fv-hero__title { margin-top: 24px; width: 722px; font-weight: 700; font-size: 48px; line-height: 56px; }
.fv-hero__desc  { margin-top: 24px; width: 580px; font-size: 20px; line-height: 1.2; }
.fv-hero__lead  { margin-top: 32px; width: 471.42px; font-weight: 700; font-size: 24px; line-height: 32px; }
.fv-hero__content .fv-btn { margin-top: 32px; }

/* ============================================================
   2. ЧТО ЗА ХАКАТОН (карточка с вырезанными углами)
   ============================================================ */
.fv-intro { padding-top: 120px; }

/* Фон карточки — цельный экспорт блока: в нём и заливка с подсветкой,
   и вырезанные углы (в альфе), и 3D-объект справа. */
.fv-intro__card {
    position: relative;
    width: 100%;
    height: 524px;
    background: url('img/formula/intro.webp') no-repeat 0 0 / 100% 100%;
}
.fv-intro__text {
    position: absolute;
    left: 80px;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 642px;
    font-size: 24px;
    line-height: 32px;
}
.fv-intro__text b { font-weight: 700; }

/* ============================================================
   3. ЗАДАЧА
   ============================================================ */
.fv-task { padding-top: 120px; }

.fv-task__stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;   /* заголовок 72 + 40 = 112 от верха секции */
}
.fv-task__row { display: flex; gap: 8px; }

/* --- левая фиолетовая карточка --- */
.fv-task__about {
    position: relative;
    flex: 0 0 604px;
    height: 512px;
    padding: 32px;
    border-radius: var(--fv-radius);
    background: var(--fv-purple);
}
.fv-task__about h3 {
    margin: 0;
    width: 540px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
}
.fv-task__about p {
    position: absolute;
    left: 32px;
    top: 256px;
    width: 540px;
    font-size: 24px;
    line-height: 32px;
}

/* --- правая карточка «профиля» --- */
.fv-task__profile {
    position: relative;
    flex: 0 0 604px;
    height: 512px;
    border-radius: var(--fv-radius);
    background: var(--fv-card);
    overflow: hidden;
}
/* фиолетовая подсветка карточки (эллипс из макета) */
.fv-task__profile::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 1098.84px;
    height: 1098.84px;
    margin-left: -549.42px;
    border-radius: 50%;
    background: radial-gradient(38.6% 38.6% at 51.6% 48.3%, rgba(41, 41, 41, .9) 0%, rgba(41, 41, 41, 0) 100%);
}
.fv-task__profile-name,
.fv-task__profile-sub {
    position: absolute;
    left: 32px;
    font-size: 24px;
    line-height: 32px;
    white-space: nowrap;
}
.fv-task__profile-name { top: 48px;  font-weight: 700; }
.fv-task__profile-sub  { top: 112px; }

.fv-task__avatar,
.fv-task__add {
    position: absolute;
    top: 32px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.fv-task__avatar { left: 508px; overflow: hidden; background: #262626; }
.fv-task__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* «+» — два прямоугольника, как в макете */
.fv-task__add { left: 436px; background: #262626; }
.fv-task__add::before,
.fv-task__add::after {
    content: '';
    position: absolute;
    left: 31px;
    top: 16px;
    width: 2px;
    height: 32px;
    background: var(--fv-white);
}
.fv-task__add::after { transform: rotate(90deg); }

/* --- бегущая строка карточек курсов --- */
.fv-ticker {
    position: absolute;
    left: 0;
    top: 238px;
    width: 100%;
    padding-left: 32px;
    overflow: hidden;
    -webkit-mask-image: none;
}
.fv-ticker__track {
    display: flex;
    width: max-content;
    animation: fv-ticker 36s linear infinite;
}
/* Два одинаковых набора: сдвиг ровно на половину дорожки даёт
   бесшовный цикл. Хвостовой отступ входит в набор, иначе на стыке
   пропадает зазор между карточками. */
.fv-ticker__set {
    display: flex;
    gap: 8px;
    padding-right: 8px;
}
/* from задан явно: без него браузер берёт текущий transform, и при
   перерисовке дорожка может дёрнуться. Паузы по ховеру нет — строка
   должна ехать непрерывно. */
@keyframes fv-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fv-tile {
    position: relative;
    flex: 0 0 242px;
    width: 242px;
    height: 242px;
    border-radius: var(--fv-radius);
    background: var(--fv-card);
    overflow: hidden;
    box-shadow: inset 0 2px 8px -3px var(--tile-edge),
                inset 0 -19px 42px 2px var(--tile-glow);
}
/* верхний ореол */
.fv-tile::before {
    content: '';
    position: absolute;
    left: 46px;
    top: -121px;
    width: 392px;
    height: 392px;
    border-radius: 50%;
    opacity: .21;
    filter: blur(17.85px);
    background: radial-gradient(50% 50% at 50% 50%, var(--tile-halo) 0%, transparent 100%);
}
/* нижняя подсветка (Vector 1129) */
.fv-tile::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 256px;
    height: 93px;
    margin-left: -128px;
    filter: blur(23px);
    background: radial-gradient(78% 100% at 50% 118%, var(--tile-glow) 0%, transparent 72%);
}
.fv-tile--purple { --tile-edge: #702C9F; --tile-glow: #4D08B0; --tile-halo: #702C9F; }
.fv-tile--blue   { --tile-edge: #62D3FD; --tile-glow: #02ADEE; --tile-halo: #02ADEE; }
.fv-tile--green  { --tile-edge: #31FC94; --tile-glow: #006732; --tile-halo: #006732; }
.fv-tile--blue::before,
.fv-tile--green::before { left: 37px; top: -132px; }

.fv-tile__name {
    position: absolute;
    left: 24px;
    top: 32px;
    width: 209px;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}
.fv-tile__rate {
    position: absolute;
    left: 24px;
    top: 131px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    line-height: 32px;
}
.fv-tile__rate svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
/* оценка залита градиентом сверху вниз, как в макете */
.fv-tile__rate span {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- полоса статистики --- */
.fv-stats { display: flex; gap: 8px; }
.fv-stats__i {
    flex: 1 1 0;
    height: 144px;
    padding: 32px;
    border-radius: var(--fv-radius);
    background: var(--fv-violet);
    overflow: hidden;
}
.fv-stats__i b { display: block; font-weight: 700; font-size: 40px; line-height: 48px; }
.fv-stats__i span { display: block; font-size: 24px; line-height: 32px; }

/* --- лидерборд --- */
.fv-board {
    position: relative;
    height: 371px;
    border-radius: var(--fv-radius);
    background: var(--fv-card);
    overflow: hidden;
}
/* голубое свечение слева */
.fv-board::before {
    content: '';
    position: absolute;
    left: -826px;
    top: -68px;
    width: 1222px;
    height: 568px;
    border-radius: 50%;
    opacity: .5;
    filter: blur(191px);
    background: radial-gradient(53% 53% at 56.8% 50.2%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
}
.fv-board__title {
    position: absolute;
    left: 32px;
    top: 32px;
    width: 540px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
}
.fv-board__desc {
    position: absolute;
    left: 32px;
    top: 160px;
    width: 540px;
    font-size: 24px;
    line-height: 32px;
}
.fv-board__tabs {
    position: absolute;
    left: 623px;
    top: 45px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.fv-board__tabs b { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.fv-board__tabs svg { display: block; width: 24px; height: 24px; }
.fv-board__tabs i { font-style: normal; color: rgba(255, 255, 255, .6); }

.fv-board__list {
    position: absolute;
    left: 623px;
    top: 93px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 561px;
}
.fv-board__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--fv-radius);
    overflow: hidden;
    font-size: 20px;
    line-height: 28px;
}
/* цветное свечение строки */
.fv-board__row::before {
    content: '';
    position: absolute;
    left: -138px;
    top: -31px;
    width: 386px;
    height: 106px;
    border-radius: 50%;
    filter: blur(70px);
    background: var(--row-glow);
}
/* кружок под номером */
.fv-board__row::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.fv-board__row--1 { --row-glow: #470A9F; }
.fv-board__row--1::before { left: -140px; width: 375px; filter: blur(45px); }
.fv-board__row--2 { --row-glow: #02ADEE; }
.fv-board__row--3 { --row-glow: #006732; }
.fv-board__row--4 { --row-glow: rgba(118, 118, 118, .8); }
.fv-board__team {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}
.fv-board__team i { width: 18px; font-style: normal; text-align: center; }
.fv-board__score { position: relative; z-index: 1; }

/* --- «Не бойся, если это твоя первая ML-задача» --- */
.fv-first {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 168px;
    padding: 32px;
    border-radius: var(--fv-radius);
    background: var(--fv-card);
    overflow: hidden;
}
.fv-first::before,
.fv-first::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}
.fv-first::before {
    left: 341px; top: -322px; width: 1164.74px; height: 1108.49px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(112, 44, 159, .55) 0%, rgba(112, 44, 159, 0) 100%);
}
.fv-first::after {
    left: -468px; top: -434px; width: 1054.35px; height: 1095.18px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(77, 8, 176, .5) 0%, rgba(77, 8, 176, 0) 100%);
}
.fv-first__title {
    position: relative;
    z-index: 1;
    width: 423px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.fv-first__note {
    position: relative;
    z-index: 1;
    width: 572px;
    padding: 24px;
    border-radius: var(--fv-radius);
    background: var(--fv-card);
    font-size: 20px;
    line-height: 28px;
}
/* Карабин. В экспорте — объект, обрезанный карточкой (270×168 в макете),
   поэтому бокс = рамка «img» по горизонтали и вся высота карточки по
   вертикали, а не 270×104 из макета: объект в макете отцентрован в рамке
   и вылезает за неё вверх и вниз. */
.fv-first__media {
    position: absolute;
    left: 333px;
    top: 0;
    z-index: 1;
    width: 270px;
    height: 168px;
}
.fv-first__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- наклейки «обучи» и «вычисли» --- */
.fv-sticker { position: absolute; z-index: 4; }
.fv-sticker--learn { left: calc(50% - 678px);  top: 143px;  width: 140px; }   /* 42 − 720 | 23 + 120 */
.fv-sticker--calc  { left: calc(50% + 494px);  top: 1473px; width: 185.7px; } /* 1214 − 720 | 1353 + 120 */

/* Наклон впечён в экспорт, поэтому transform не докручивает стикер, а только
   покачивает его вверх-вниз — как «облачка» на «Хакатоне в Омске». */
.fv-sticker img {
    display: block;
    width: 100%;
    height: auto;
    animation: fv-float-y 4s ease-in-out infinite;
}
.fv-sticker--calc img { animation-duration: 5s; }
.fv-sticker--team img { animation-duration: 4.5s; }
@keyframes fv-float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ============================================================
   4. КАК ПРОХОДИТ
   ============================================================ */
.fv-how { padding-top: 120px; }

/* Колонка карточек уже контентной — 864 по центру канвы. */
.fv-how__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 864px;
    margin: 40px auto 0;
}
.fv-how__i {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 32px 32px 24px;
    border-radius: var(--fv-radius);
    overflow: hidden;
}
.fv-how__i:nth-child(1) { background: var(--fv-purple); }
.fv-how__i:nth-child(2) { background: var(--fv-violet); }
.fv-how__i:nth-child(3) { background: var(--fv-indigo); }
.fv-how__i:nth-child(4) { background: var(--fv-card); }
.fv-how__media { flex: 0 0 158px; width: 158px; height: 140px; }
.fv-how__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fv-how__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 626px;
    font-size: 24px;
    line-height: 32px;
}
.fv-how__text b { font-weight: 700; font-style: italic; }

/* декор секции: координаты макета минус боковое поле 112 */
.fv-how__deco { position: absolute; z-index: 0; pointer-events: none; }
.fv-how__deco img { display: block; width: 100%; height: auto; }
/* top = координата макета + padding-top секции (декор висит на <section>,
   а отсчёт у него от верха секции, т.е. до её внутреннего отступа).
   У звезды в экспорте — весь объект (491×491), а в макете он отцентрован
   в рамке 491×354, поэтому ещё −68.6 по вертикали: 186 − 68.6 + 120. */
.fv-how__deco--star { left: calc(50% - 938px); top: 237.4px; width: 491.13px; } /* −218 − 720 */
.fv-how__deco--blob { left: calc(50% + 460px); top: 747px;   width: 396px; }    /* 1180 − 720 | 627 + 120 */
.fv-sticker--team   { left: calc(50% + 381px); top: 656px;   width: 298.8px; }  /* 1101 − 720 | 536 + 120 */

/* ============================================================
   5. ЧТО ПОЛУЧИШЬ
   ============================================================ */
.fv-gains { padding-top: 120px; }
/* Пять карточек лежат в разметке подряд, а раскладываются сеткой: на
   десктопе большая карточка с фото занимает правую колонку в двух строках
   (201 + 8 + 201 = 410 — ровно её высота по макету). */
.fv-gains__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 40px;
}
.fv-gain--1     { grid-column: 1; grid-row: 1; }
.fv-gain--2     { grid-column: 1; grid-row: 2; }
.fv-gain--photo { grid-column: 2; grid-row: 1 / span 2; }
.fv-gain--3     { grid-column: 1; grid-row: 3; }
.fv-gain--4     { grid-column: 2; grid-row: 3; }

.fv-gain {
    position: relative;
    height: 201px;
    border-radius: var(--fv-radius);
    background: var(--fv-violet);
    overflow: hidden;
}
.fv-gain--dark { background: var(--fv-card); }
.fv-gain__text {
    position: absolute;
    left: 32px;
    top: 32px;
    width: 382px;
    font-size: 24px;
    line-height: 32px;
}
.fv-gain__text b { display: block; font-weight: 700; }
/* В экспортах — сами объекты (246 и 236 в макете), а не рамки «img» 200×200:
   объект в макете больше рамки и вылезает из неё, обрезает его только
   карточка. Поэтому бокс = габарит объекта, привязка — к правому краю
   карточки (на планшете карточка тянется, а объект в макете стоит справа). */
.fv-gain__media { position: absolute; }
.fv-gain--1 .fv-gain__media { right: -23px; top: 32px; width: 246px; height: 246px; }
.fv-gain--2 .fv-gain__media { right: -12px; top: 32px; width: 246px; height: 246px; }
.fv-gain--3 .fv-gain__media { right: -5px;  top: 25px; width: 236px; height: 236px; }
.fv-gain--4 .fv-gain__media { right: 0;     top: 24px; width: 236px; height: 236px; }
.fv-gain__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* большая карточка с фото — цельный экспорт (вырез угла уже в альфе) */
.fv-gain--photo {
    height: 410px;
    background: url('img/formula/gain-photo.webp') no-repeat 0 0 / 100% 100%;
}

/* ============================================================
   6. ФИНАЛЬНЫЙ БЛОК
   ============================================================ */
.fv-final { padding-top: 120px; }
.fv-final__card {
    position: relative;
    width: 100%;
    height: 401px;
    background: url('img/formula/final.webp') no-repeat 0 0 / 100% 100%;
}
.fv-final__text {
    position: absolute;
    left: 80px;
    top: 74px;
    width: 564px;
}
.fv-final__title { font-weight: 700; font-style: italic; font-size: 40px; line-height: 1.1; }
.fv-final__desc  { margin-top: 24px; width: 512px; font-size: 20px; line-height: 28px; }
.fv-final__text .fv-btn { margin-top: 24px; }

/* доступность: у кого выключены анимации — бегущая строка стоит */
@media (prefers-reduced-motion: reduce) {
    .fv-ticker__track { animation: none; }
    .fv-sticker img { animation: none; }
}

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

/* ============================================================
   ПЛАНШЕТ 744–1215 — макет Landing - Tablet (39:2339), канва 744
   ============================================================ */
@media (min-width: 744px) and (max-width: 1215px) {
    .fv__w { padding: 0 76px; }
    .fv__bg { top: -144px; height: 7272px; }

    /* ---------- 1. БАННЕР ---------- */
    .fv-hero { height: 754px; }
    .fv-logos__i--mgpu { width: 70px; height: 51.96px; }
    .fv-hero__media { left: 301px; top: 353px; width: 340px; height: 340px; }
    .fv-hero__content { margin-top: 72px; width: 471px; }
    .fv-hero__title { width: 449px; font-size: 40px; line-height: 48px; }
    .fv-hero__desc  { width: 280px; font-size: 16px; }
    .fv-hero__lead  { width: 280px; font-size: 16px; line-height: 20px; }

    /* ---------- 2. ЧТО ЗА ХАКАТОН ---------- */
    /* Колонка на планшете тянется (на 1215 это 1063px, а не 592 из макета),
       а арт впечён в фон карточки — при 100% 100% он бы растянулся почти
       вдвое. Ограничиваем ширину карточки шириной макета и держим пропорцию
       экспорта через aspect-ratio, как на «Хакатоне в Омске». */
    .fv-intro__card {
        width: 100%;
        max-width: 592px;
        aspect-ratio: 1184 / 1668;
        height: auto;
        margin: 0 auto;
        background-image: url('img/formula/intro-tab.webp');
    }
    .fv-intro__text { left: 24px; top: 64px; width: 544px; gap: 24px; }

    /* ---------- 3. ЗАДАЧА ---------- */
    .fv-task__row { flex-direction: column; }
    .fv-task__about,
    .fv-task__profile { flex: 0 0 auto; width: 100%; }

    .fv-task__about {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 344px;
        padding: 24px;
    }
    .fv-task__about h3 { width: 100%; }
    .fv-task__about p  { position: static; width: 100%; font-size: 18px; line-height: 22px; }

    /* Карточка на планшете тянется шире макета, поэтому аватар и «+»
       привязаны к правому краю, а не к левому: в макете они стоят справа
       (592 − 508 − 64 = 20 и 592 − 436 − 64 = 92). */
    .fv-task__profile { height: 458px; }
    .fv-task__profile-name { top: 40px; left: 24px; }
    .fv-task__profile-sub  { top: 96px; left: 24px; }
    .fv-task__avatar { left: auto; right: 20px; top: 24px; }
    .fv-task__add    { left: auto; right: 92px; top: 24px; }
    .fv-ticker { top: 192px; padding-left: 24px; }

    /* статистика — сетка 2×2 */
    .fv-stats { flex-wrap: wrap; }
    .fv-stats__i { flex: 0 0 calc(50% - 4px); height: 128px; padding: 24px; }

    /* лидерборд — заголовок сверху, строки под ним;
       ширины не фиксированные, а по карточке (в макете это 544 из 592) */
    .fv-board { height: 590px; }
    .fv-board__title { left: 24px; top: 24px; width: calc(100% - 48px); }
    .fv-board__desc  { left: 24px; top: 144px; width: calc(100% - 48px); }
    .fv-board__tabs  { left: 24px; top: 272px; }
    .fv-board__list  { left: 24px; top: 320px; width: calc(100% - 48px); }

    /* «Не бойся» — заголовок и врезка в колонку */
    .fv-first {
        display: block;
        height: 272px;
        padding: 24px;
    }
    .fv-first__note { width: 100%; margin-top: 56px; }
    .fv-first__media { left: auto; right: -11px; top: -4px; width: 270px; height: 168px; }

    .fv-sticker--learn { left: 4.570%;   top: 176px;  width: 85px; }      /* 34 / 744 | 56 + 120 */
    .fv-sticker--calc  { left: 84.005%;  top: 1342px; width: 112.95px; }  /* 625 / 744 | 1222 + 120 */

    /* ---------- 4. КАК ПРОХОДИТ ---------- */
    .fv-how__list { width: 100%; }
    .fv-how__i { align-items: center; padding: 24px; }
    .fv-how__media { flex: 0 0 86px; width: 86px; height: 76px; }
    .fv-how__text { gap: 8px; width: auto; flex: 1 1 0; min-width: 0; }

    .fv-how__deco--star { left: -16.129%; top: 81.5px; width: 276.08px; } /* −120 / 744 | 0 − 38.5 + 120 */
    .fv-how__deco--blob { left: 83.333%;  top: 766px;  width: 208px; }    /* 620 / 744 | 646 + 120 */
    .fv-sticker--team   { left: 74.866%;  top: 589px;  width: 181px; }    /* 557 / 744 | 469 + 120 */

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .fv-gains { padding-top: 142px; }
    /* та же причина, что у карточки «что за хакатон»: сетка не тянется
       шире макета, иначе арт в большой карточке растягивается */
    .fv-gains__grid {
        grid-template-columns: 1fr;
        max-width: 592px;
        margin-left: auto;
        margin-right: auto;
    }
    .fv-gains__grid > * { grid-column: 1; grid-row: auto; }
    .fv-gain--photo {
        aspect-ratio: 1184 / 804;
        height: auto;
        background-image: url('img/formula/gain-photo-tab.webp');
    }
    .fv-gain__text { left: 24px; top: 24px; }

    /* ---------- 6. ФИНАЛ ---------- */
    .fv-final__card {
        width: 100%;
        max-width: 592px;
        aspect-ratio: 1184 / 1150;
        height: auto;
        margin: 0 auto;
        background-image: url('img/formula/final-tab.webp');
    }
    .fv-final__text { left: 24px; top: 64px; width: 544px; }
}

/* --- пятна планшетного макета (канва 744) --- */
@media (min-width: 744px) and (max-width: 1215px) {
    .fv__blob-t--1 {
        left: -40.828%; top: 5249.78px; width: 90.188%; height: 1474.04px;
        border-radius: 50%;
        transform: rotate(105deg);
        filter: blur(55.9907px);
        opacity: 0.7;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #64238D 0%, rgba(100, 35, 141, 0) 100%);
    }
    .fv__blob-t--2 {
        left: 45.027%; top: 4647.98px; width: 88.844%; height: 1451.00px;
        border-radius: 50%;
        filter: blur(46.645px);
        opacity: 0.8;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #64238D 0%, rgba(100, 35, 141, 0) 100%);
    }
    .fv__blob-t--3 {
        left: 36.425%; top: 5439.98px; width: 75.134%; height: 1228.00px;
        border-radius: 50%;
        filter: blur(46.645px);
        opacity: 0.5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #64238D 0%, rgba(100, 35, 141, 0) 100%);
    }
    .fv__blob-t--4 {
        left: -38.441%; top: 5084.98px; width: 67.608%; height: 883.62px;
        border-radius: 50%;
        filter: blur(46.4693px);
        opacity: 0.5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-t--5 {
        left: 84.400%; top: 4939.57px; width: 115.342%; height: 858.14px;
        border-radius: 429.072px;
        transform: rotate(96.194deg); transform-origin: 0 0;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-t--6 {
        left: -15.496%; top: 4330.58px; width: 126.364%; height: 591.27px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(168.521px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-t--7 {
        left: 69.736%; top: 4859.17px; width: 70.523%; height: 329.98px;
        border-radius: 50%;
        transform: rotate(135deg);
        filter: blur(94.0511px);
        background: radial-gradient(53.05% 53.05% at 56.75% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-t--8 {
        left: 93.639%; top: 4274.61px; width: 97.262%; height: 1393.07px;
        border-radius: 361.814px;
        transform: rotate(124.579deg); transform-origin: 0 0;
        filter: blur(148.892px);
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
    }
    .fv__blob-t--9 {
        left: 162.510%; top: 4712.09px; width: 90.393%; height: 1294.70px;
        border-radius: 336.262px;
        transform: rotate(120deg); transform-origin: 0 0;
        filter: blur(138.377px);
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
    }
    .fv__blob-t--10 {
        left: 7.796%; top: 4050.98px; width: 84.444%; height: 489.00px;
        border-radius: 244.5px;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-t--11 {
        left: 44.355%; top: 2214.98px; width: 79.032%; height: 1131.00px;
        border-radius: 50%;
        filter: blur(46.0838px);
        opacity: 0.9;
        background: radial-gradient(50.00% 50.00% at 50.00% 50.00%, #4D08B0 0%, rgba(77, 8, 176, 0) 77.8846%);
    }
    .fv__blob-t--12 {
        left: -115.663%; top: 1567.64px; width: 191.508%; height: 1424.82px;
        border-radius: 50%;
        filter: blur(131.603px);
        opacity: 0.5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, #02ADEE 100%);
    }
    .fv__blob-t--13 {
        left: 138.307%; top: 2236.48px; width: 191.508%; height: 1424.82px;
        border-radius: 712.41px;
        transform: rotate(135deg); transform-origin: 0 0;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #0B0C0C 15.8654%, rgba(11, 12, 12, 0) 100%);
    }
    .fv__blob-t--14 {
        left: -29.838%; top: 2593.98px; width: 60.753%; height: 1290.00px;
        border-radius: 226px;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-t--15 {
        left: 40.605%; top: 499.90px; width: 80.681%; height: 361.21px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(130.311px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-t--16 {
        left: 49.164%; top: 308.85px; width: 80.681%; height: 361.21px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(130.311px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #006732 0%, rgba(0, 103, 50, 0) 100%);
    }
    .fv__blob-t--17 {
        left: -46.774%; top: 590.98px; width: 193.548%; height: 1440.00px;
        border-radius: 50%;
        filter: blur(50px);
        opacity: 0.9;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D07B2 0%, rgba(77, 7, 178, 0) 78%);
    }
    .fv__blob-t--18 {
        left: -36.936%; top: 159.25px; width: 82.832%; height: 370.84px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(133.785px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-t--19 {
        left: 67.123%; top: 450.66px; width: 130.488%; height: 640.96px;
        border-radius: 320.48px;
        transform: rotate(134.679deg); transform-origin: 0 0;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
}

/* ============================================================
   МОБИЛЬНЫЕ ≤743 — макет Landing - Mobile (46:5491), канва 375
   ============================================================ */
@media (max-width: 743px) {
    .fv { padding-bottom: 80px; }
    .fv__w { padding: 0 16px; }
    .fv__bg { top: -122px; height: 6026px; }
    .fv__blob-t { display: none; }
    .fv__blob-m { display: block; }

    .fv__h2 { font-size: 40px; line-height: 48px; }
    .fv .fv-btn { width: 100%; }

    /* ---------- 1. БАННЕР ---------- */
    .fv-hero { height: auto; padding-top: 16px; }
    .fv-logos { gap: 14px; }
    .fv-logos__x { flex-basis: 6px; width: 6px; height: 6px; }
    .fv-logos__i--fond   { width: 58.22px; height: 19.1px; }
    .fv-logos__i--academy{ width: 56.33px; height: 21.97px; }
    .fv-logos__i--first  { width: 11.94px; height: 23.39px; }
    .fv-logos__i--decade { width: 37.56px; height: 25.93px; }
    .fv-logos__i--mgpu   { width: 35.08px; height: 26.04px; }

    /* 3D-объект встаёт в поток между логотипами и текстом. Бокс — рамка
       макета 324×324, арт вылезает из неё по тем же процентам, что и на
       десктопе, и на поток не влияет. */
    .fv-hero__media {
        position: relative;
        left: auto;
        top: auto;
        width: 324px;
        height: 324px;
        margin: 16px 0 0 12px;
    }
    .fv-hero__content { margin-top: 24px; width: 100%; }
    .fv-hero__title { margin-top: 16px; width: 100%; font-size: 40px; line-height: 48px; }
    .fv-hero__desc  { margin-top: 16px; width: 100%; font-size: 16px; }
    .fv-hero__lead  { margin-top: 24px; width: 100%; font-size: 16px; line-height: 20px; }
    .fv-hero__content .fv-btn { margin-top: 24px; }

    /* ---------- 2. ЧТО ЗА ХАКАТОН ---------- */
    .fv-intro { padding-top: 80px; }
    .fv-intro__card {
        width: 100%;
        max-width: 344px;
        aspect-ratio: 688 / 1408;
        height: auto;
        margin: 0 auto;
        background-image: url('img/formula/intro-mob.webp');
    }
    .fv-intro__text {
        left: 24px;
        top: 48px;
        width: calc(100% - 48px);
        gap: 16px;
        font-size: 18px;
        line-height: 22px;
    }
    .fv-intro__text p:first-child { font-size: 20px; line-height: 26px; }

    /* ---------- 3. ЗАДАЧА ---------- */
    .fv-task { padding-top: 80px; }
    .fv-task__row { flex-direction: column; }
    .fv-task__about,
    .fv-task__profile { flex: 0 0 auto; width: 100%; }

    .fv-task__about {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 368px;
        padding: 24px;
    }
    .fv-task__about h3 { width: 100%; font-size: 24px; line-height: 32px; }
    .fv-task__about p  { position: static; width: 100%; font-size: 18px; line-height: 22px; }

    .fv-task__profile { height: 324px; }
    .fv-task__profile-name,
    .fv-task__profile-sub { left: 24px; font-size: 18px; line-height: 22px; }
    .fv-task__profile-name { top: 40px; }
    .fv-task__profile-sub  { top: 70px; }
    .fv-task__avatar,
    .fv-task__add { top: 24px; width: 48px; height: 48px; }
    .fv-task__avatar { left: auto; right: 24px; }
    .fv-task__add    { left: auto; right: 80px; }
    .fv-task__add::before,
    .fv-task__add::after { left: 23px; top: 12px; height: 24px; }

    .fv-ticker { top: 140px; padding-left: 24px; }
    .fv-tile { flex-basis: 160px; width: 160px; height: 160px; }
    .fv-tile__name { left: 16px; top: 32px; width: 138px; font-size: 18px; line-height: 22px; }
    .fv-tile__rate { left: 16px; top: 106px; font-size: 16px; line-height: 22px; }
    .fv-tile::after { width: 160px; margin-left: -80px; height: 59px; }

    .fv-stats { flex-wrap: wrap; }
    .fv-stats__i { flex: 0 0 calc(50% - 4px); height: 102px; padding: 24px; }
    .fv-stats__i b { font-size: 24px; line-height: 32px; }
    .fv-stats__i span { font-size: 18px; line-height: 22px; }

    .fv-board { height: 448px; }
    .fv-board__title { left: 24px; top: 24px; width: calc(100% - 48px); font-size: 24px; line-height: 32px; }
    .fv-board__desc  { left: 24px; top: 104px; width: calc(100% - 48px); font-size: 18px; line-height: 22px; }
    .fv-board__tabs  { left: 24px; top: 194px; font-size: 18px; line-height: 24px; }
    .fv-board__list  { left: 24px; top: 234px; width: calc(100% - 48px); }
    .fv-board__row   { padding: 12px 16px; font-size: 16px; line-height: 22px; }
    .fv-board__row::after { left: 11px; top: 9px; width: 28px; height: 28px; }
    .fv-board__team { gap: 20px; }

    .fv-first { display: block; height: 272px; padding: 24px; }
    .fv-first__title { width: 100%; font-size: 24px; line-height: 32px; }
    .fv-first__note {
        width: 100%;
        margin-top: 40px;
        padding: 16px;
        font-size: 18px;
        line-height: 22px;
    }
    .fv-first__media { left: auto; right: -8px; top: 61px; width: 118px; height: 74px; }

    .fv-sticker--learn { left: 4.267%;   top: 122px;  width: 68px; }   /* 16 / 375 | 42 + 80 */
    .fv-sticker--calc  { left: 73.600%;  top: 1084px; width: 84px; }   /* 276 / 375 | 1004 + 80 */

    /* ---------- 4. КАК ПРОХОДИТ ---------- */
    .fv-how { padding-top: 80px; }
    .fv-how__list { width: 100%; }
    .fv-how__i { align-items: flex-start; gap: 16px; padding: 24px 16px; }
    .fv-how__media { flex: 0 0 64px; width: 64px; height: 58px; }
    .fv-how__text { gap: 8px; width: auto; flex: 1 1 0; min-width: 0; font-size: 18px; line-height: 22px; }
    .fv-how__text b { font-size: 24px; line-height: 32px; }

    .fv-how__deco--star { left: -13.067%; top: 91px;  width: 111.03px; } /* −49 / 375 | 27 − 16 + 80 */
    /* в мобильном макете клякса нарисована поверх последней карточки */
    .fv-how__deco--blob { left: 86.933%;  top: 789px; width: 84px; z-index: 3; } /* 326 / 375 | 709 + 80 */
    .fv-sticker--team   { left: 63.600%;  top: 483px; width: 127.5px; transform: rotate(8deg); }  /* 238.5 / 375 | 403 + 80 */

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .fv-gains { padding-top: 92px; }
    .fv-gains__grid { max-width: 344px; margin-left: auto; margin-right: auto; }
    .fv-gains__grid > * { grid-row: auto; }
    .fv-gain--1,
    .fv-gain--2,
    .fv-gain--photo { grid-column: 1 / -1; }
    .fv-gain--3 { grid-column: 1; }
    .fv-gain--4 { grid-column: 2; }
    .fv-gain { height: 186px; }
    .fv-gain--photo {
        aspect-ratio: 688 / 468;
        height: auto;
        background-image: url('img/formula/gain-photo-mob.webp');
    }
    .fv-gain__text {
        left: 16px;
        top: 24px;
        width: calc(100% - 32px);
        font-size: 18px;
        line-height: 22px;
    }
    .fv-gain--1 .fv-gain__media { right: -13.8px; top: 91.2px; width: 147.6px; height: 147.6px; }
    .fv-gain--2 .fv-gain__media { right: -7.2px;  top: 91.2px; width: 147.6px; height: 147.6px; }
    .fv-gain--3 .fv-gain__media { right: -1.2px;  top: 94.2px; width: 141.6px; height: 141.6px; }
    .fv-gain--4 .fv-gain__media { right: 0;       top: 91.2px; width: 141.6px; height: 141.6px; }

    /* Figma набирает этот шрифт примерно на 1% плотнее браузера, и три блока
       из-за этого брали на строку больше, чем в макете. Компенсируем трекингом
       ровно там, где не хватает 2–5px. */
    .fv-intro__text p:first-child,
    .fv-final__title { letter-spacing: -0.02em; }
    .fv-gain--3 .fv-gain__text b { letter-spacing: -0.03em; }

    /* ---------- 6. ФИНАЛ ---------- */
    .fv-final { padding-top: 80px; }
    .fv-final__card {
        width: 100%;
        max-width: 344px;
        aspect-ratio: 688 / 868;
        height: auto;
        margin: 0 auto;
        background-image: url('img/formula/final-mob.webp');
    }
    .fv-final__text { left: 24px; top: 40px; width: calc(100% - 48px); }
    .fv-final__title { font-size: 24px; line-height: 32px; }
    .fv-final__desc  { margin-top: 24px; width: 100%; font-size: 18px; line-height: 22px; }
}

/* --- пятна мобильного макета (канва 375) --- */
@media (max-width: 743px) {
    .fv__blob-m--1 {
        left: -35.097%; top: 4982.55px; width: 99.419%; height: 819.01px;
        border-radius: 50%;
        transform: rotate(105deg);
        filter: blur(31.1096px);
        opacity: 0.7;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #64238D 0%, rgba(100, 35, 141, 0) 100%);
    }
    .fv__blob-m--2 {
        left: -39.733%; top: 4817.00px; width: 60.198%; height: 396.56px;
        border-radius: 50%;
        filter: blur(20.8551px);
        opacity: 0.5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-m--3 {
        left: 53.925%; top: 4633.05px; width: 184.398%; height: 476.80px;
        border-radius: 238.401px;
        transform: rotate(92.6394deg); transform-origin: 0 0;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-m--4 {
        left: 13.600%; top: 4299.00px; width: 119.467%; height: 1153.00px;
        border-radius: 50%;
        filter: blur(31.5795px);
        opacity: 0.8;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #64238D 0%, rgba(100, 35, 141, 0) 100%);
    }
    .fv__blob-m--5 {
        left: 54.506%; top: 4306.81px; width: 98.429%; height: 232.14px;
        border-radius: 50%;
        transform: rotate(142.159deg);
        filter: blur(66.1627px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-m--6 {
        left: -22.879%; top: 3824.79px; width: 137.942%; height: 301.10px;
        border-radius: 50%;
        transform: rotate(44.7498deg);
        filter: blur(85.8185px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-m--7 {
        left: 137.137%; top: 4030.72px; width: 107.810%; height: 778.30px;
        border-radius: 202.143px;
        transform: rotate(124.579deg); transform-origin: 0 0;
        filter: blur(83.185px);
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #5037A0 0%, rgba(80, 55, 160, 0) 100%);
    }
    .fv__blob-m--8 {
        left: -9.333%; top: 3672.00px; width: 118.400%; height: 307.00px;
        border-radius: 153.5px;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-m--9 {
        left: -39.200%; top: 2304.00px; width: 84.000%; height: 803.00px;
        border-radius: 157.5px;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
    .fv__blob-m--10 {
        left: 24.000%; top: 2141.33px; width: 124.267%; height: 896.34px;
        border-radius: 50%;
        filter: blur(36.5222px);
        opacity: 0.9;
        background: radial-gradient(50.00% 50.00% at 50.00% 50.00%, #4D08B0 0%, rgba(77, 8, 176, 0) 77.8846%);
    }
    .fv__blob-m--11 {
        left: -98.641%; top: 1889.12px; width: 172.911%; height: 648.42px;
        border-radius: 50%;
        filter: blur(59.8908px);
        opacity: 0.5;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, #02ADEE 100%);
    }
    .fv__blob-m--12 {
        left: 130.667%; top: 2193.50px; width: 172.911%; height: 648.42px;
        border-radius: 324.209px;
        transform: rotate(135deg); transform-origin: 0 0;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #0B0C0C 15.8654%, rgba(11, 12, 12, 0) 100%);
    }
    .fv__blob-m--13 {
        left: -103.733%; top: 735.00px; width: 307.200%; height: 1152.00px;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0.9;
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #4D07B2 0%, rgba(77, 7, 178, 0) 78%);
    }
    .fv__blob-m--14 {
        left: 11.759%; top: 167.68px; width: 118.537%; height: 267.49px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(96.4989px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-m--15 {
        left: 24.334%; top: 26.21px; width: 118.537%; height: 267.49px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(96.4989px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #006732 0%, rgba(0, 103, 50, 0) 100%);
    }
    .fv__blob-m--16 {
        left: -62.386%; top: 466.60px; width: 118.250%; height: 266.84px;
        border-radius: 50%;
        transform: rotate(30deg);
        filter: blur(96.2645px);
        background: radial-gradient(53.05% 53.05% at 56.76% 50.16%, #02ADEE 0%, rgba(2, 173, 238, 0) 100%);
    }
    .fv__blob-m--17 {
        left: 94.641%; top: 505.49px; width: 186.282%; height: 461.20px;
        border-radius: 230.6px;
        transform: rotate(119.127deg); transform-origin: 0 0;
        opacity: 0.9;
        background: radial-gradient(43.11% 43.11% at 51.62% 48.30%, #64238D 0%, rgba(126, 65, 174, 0) 100%);
    }
}

/* ============================================================
   УЗКИЕ МОБИЛЬНЫЕ ≤375 — карточки «что за хакатон» и «финал»
   растут по контенту
   ============================================================
   До 376px карточка упирается в max-width 344px и полностью повторяет
   макет 375. Ниже ширина падает, карточка по aspect-ratio укорачивается,
   а текст наоборот набирает строки — и налезает на кнопку и на арт
   (микросхему в одной карточке, фото в другой).

   Поэтому здесь высоту задаёт контент: текст в потоке плюс нижний паддинг
   под арт (его доля от ширины карточки). Арт при этом не тянем, а кладём
   двумя слоями одной и той же картинки, обе — в натуральном масштабе по
   ширине, как на «Хакатоне в Омске»:
     - фон карточки прижат к верху — рамка и вырезы сверху;
     - ::after прижат к низу       — арт и вырезы снизу.
   Лишняя высота уходит в стык слоёв. Середина у обоих экспортов ровная
   (#1A1A1A у intro до 920-й строки, #712CA1 у final до 531-й), поэтому оба
   слоя в точке стыка дают один и тот же цвет и шва не видно. Высота ::after
   задана через aspect-ratio, т.е. привязана к ширине, а не к высоте
   карточки: на 344 оба слоя совпадают ровно, ниже — расходятся только
   внутри ровной зоны. */
@media (max-width: 375px) {
    .fv-intro__card,
    .fv-final__card {
        aspect-ratio: auto;
        height: auto;
        background-size: 100% auto;   /* натуральный масштаб, прижат к верху */
    }
    /* низ = доля арта от ширины + зазор до текста как на 375 */
    .fv-intro__card { padding: 48px 24px 70.93%; }        /* (1408 − 920) / 688 */
    .fv-final__card { padding: 40px 24px calc(42% + 39.5px); } /* (868 − 579) / 688 + зазор */

    /* текст в потоке — он и задаёт высоту карточки */
    .fv-intro__text,
    .fv-final__text {
        position: relative;
        left: auto;
        top: auto;
        z-index: 1;
        width: auto;
    }

    .fv-intro__card::after,
    .fv-final__card::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
    }
    .fv-intro__card::after {
        aspect-ratio: 688 / 1238;
        background-image: url('img/formula/intro-mob.webp');
    }
    .fv-final__card::after {
        aspect-ratio: 688 / 760;
        background-image: url('img/formula/final-mob.webp');
    }
}

/* ============================================================
   Модалка анкеты — стили перенесены из style-new.css
   Базовые стили формы приходят из 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%; }
}