/* ============================================================
   Хакатон «Пульс города» — Омск, 2026
   Макет: Figma «Лендинг хакатона "Пульс города"» / Landing - Desktop (105:8509)

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

:root {
    --hak-ink:      #0B0C0C;  /* Grey/60 — основной текст и кнопки */
    --hak-white:    #FFFFFF;  /* Grey/00 */
    --hak-card:     #F6F6F6;  /* серые карточки */
    --hak-card-2:   #F2F5F6;  /* серые карточки (вариант) */
    --hak-lime:     #A9FF74;  /* акцентный салатовый */
    --hak-green:    #21C176;  /* «Public» в лидерборде */
    --hak-blue:     #5AD2FF;  /* голубые свечения */
    --hak-radius:   16px;
    --hak-canvas:   1440px;
    --hak-col:      1216px;   /* контентная колонка — она всегда ровно такая */
    /* Боковое поле: 112px на канве 1440 и сжимается до нуля к 1216px.
       Так между 1216 и 1440 колонка остаётся 1216, а ужимаются только поля —
       вся внутренняя раскладка (сетки, ряды карточек) остаётся пиксельной.
       Проценты здесь считаются от ширины секции: и в padding у .hak__w,
       и в left/right у декораций это одна и та же база. */
    --hak-gutter:   clamp(0px, calc((100% - 1216px) / 2), 112px);
}

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

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

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

/* Градиентные круги: слой «background» из макета, разобранный на элементы
   (эллипс + Layer blur в Figma = border-radius + filter: blur).
   Порядок в разметке = порядок отрисовки в макете, менять нельзя.
   Три набора — свой на каждое разрешение, у макетов они разные:
   .hak__blob (десктоп, канва 1440, координаты в px),
   .hak__blob-t (планшет) и .hak__blob-m (мобильные) — там канва тянется по
   ширине окна, поэтому по горизонтали проценты от 744 и 375 соответственно:
   так слой растягивается ровно как раньше растягивался цельный SVG. */
.hak__blob,
.hak__blob-t,
.hak__blob-m {
    position: absolute;
    border-radius: 50%;
}
.hak__blob-t,
.hak__blob-m { display: none; }
/* синий */
.hak__blob--blue-1 {
    left: -576.35px; top: 2337.85px; width: 881.56px; height: 1095.12px;
    transform: rotate(45deg);
    filter: blur(166.37px);
    background: radial-gradient(58.11% 49.49% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%);
}
/* жёлтый */
.hak__blob--yellow-1 {
    left: 818.86px; top: 3109.69px; width: 732.46px; height: 745px;
    opacity: .8;
    filter: blur(118.27px);
    background: radial-gradient(53.38% 52.72% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%);
}
/* зелёный */
.hak__blob--green-1 {
    left: 1078.46px; top: 2748px; width: 459.17px; height: 874.9px;
    filter: blur(85.85px);
    background: radial-gradient(74.43% 45.42% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%);
}
/* зелёный_2 */
.hak__blob--green-2 {
    left: 250.23px; top: 3678.55px; width: 459.17px; height: 874.9px;
    transform: rotate(-45deg);
    filter: blur(85.85px);
    background: radial-gradient(74.43% 45.42% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%);
}
/* зелёный_3 */
.hak__blob--green-3 {
    left: -339.86px; top: 1896px; width: 687.97px; height: 700px;
    filter: blur(94.57px);
    background: radial-gradient(53.39% 52.71% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%);
}
/* синий_2 */
.hak__blob--blue-2 {
    left: 1048.01px; top: 235.53px; width: 652.05px; height: 663.22px;
    filter: blur(105.29px);
    background: radial-gradient(53.38% 52.72% at 56.75% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%);
}
/* жёлтый_2 */
.hak__blob--yellow-2 {
    left: -382.16px; top: 278px; width: 732.46px; height: 745px;
    opacity: .8;
    filter: blur(118.27px);
    background: radial-gradient(53.38% 52.72% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%);
}
/* синий_3 */
.hak__blob--blue-3 {
    left: 808px; top: 2063px; width: 1030.36px; height: 1048px;
    filter: blur(166.37px);
    background: radial-gradient(53.38% 52.72% at 56.75% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%);
}
/* зелёный_4 */
.hak__blob--green-4 {
    left: 467.51px; top: 682px; width: 1029.35px; height: 1047.36px;
    filter: blur(141.5px);
    background: radial-gradient(53.39% 52.71% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%);
}
/* зелёный_5 */
.hak__blob--green-5 {
    left: -47.5px; top: 3299px; width: 1503px; height: 1503px;
    opacity: .9;
    filter: blur(68.44px);
    background: radial-gradient(50% 50% at 50% 50%, #A9FF74 0%, rgba(169, 255, 116, 0) 77.88%);
}
/* белый */
.hak__blob--white-1 {
    left: -63px; top: 3910.54px; width: 1503px; height: 1503px;
    opacity: .9;
    filter: blur(68.44px);
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 77.88%);
}
/* зелёный_6 */
.hak__blob--green-6 {
    left: 773.22px; top: -180.94px; width: 1031.66px; height: 722.16px;
    transform: rotate(25.5859deg);
    filter: blur(123.95px);
    background: radial-gradient(47.81% 62.39% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%);
}
/* зелёный_7 */
.hak__blob--green-7 {
    left: -427.65px; top: -1.64px; width: 1031.66px; height: 722.16px;
    transform: rotate(25.5859deg);
    filter: blur(123.95px);
    background: radial-gradient(47.81% 62.39% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%);
}
/* белый_2 */
.hak__blob--white-2 {
    left: 364.25px; top: 1600px; width: 865.75px; height: 880.9px;
    filter: blur(119.01px);
    background: #FFFFFF;
}

/* --- круги планшетного макета (канва 744) --- */
.hak__blob-t--1 { left: 29.14%; top: 4514.44px; width: 41.37%; height: 586.44px; transform: rotate(-45deg); filter: blur(57.54px);
    background: radial-gradient(74.43% 45.42% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-t--2 { left: -31.18%; top: 4304px; width: 162.5%; height: 1209px; opacity: 0.9; filter: blur(55.05px);
    background: radial-gradient(50% 50% at 50% 50%, #A9FF74 0%, rgba(169, 255, 116, 0) 77.88%); }
.hak__blob-t--3 { left: 66.13%; top: 3404px; width: 61.69%; height: 994px; filter: blur(85.85px);
    background: radial-gradient(81.46% 44.71% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-t--4 { left: 49.46%; top: 3907px; width: 88.44%; height: 765px; opacity: 0.8; filter: blur(118.27px);
    background: radial-gradient(56.38% 50.44% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%); }
.hak__blob-t--5 { left: 47.31%; top: 2682.54px; width: 119.89%; height: 1079.93px; filter: blur(144.08px);
    background: radial-gradient(57.41% 49.85% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-t--6 { left: -82.48%; top: 2871.63px; width: 118.49%; height: 1284.28px; transform: rotate(15deg); filter: blur(166.37px);
    background: radial-gradient(63.06% 47.6% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-t--7 { left: -46.77%; top: 2318px; width: 92.47%; height: 990px; filter: blur(94.57px);
    background: radial-gradient(62.63% 47.73% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-t--8 { left: 10.35%; top: 624px; width: 115.32%; height: 1211px; filter: blur(141.5px);
    background: radial-gradient(61.98% 47.94% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }
.hak__blob-t--9 { left: 62.37%; top: 170px; width: 58.2%; height: 582px; filter: blur(86.28px);
    background: radial-gradient(60.41% 48.49% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-t--10 { left: 34.54%; top: -163.44px; width: 107.69%; height: 560.86px; transform: rotate(32.5709deg); filter: blur(96.26px);
    background: radial-gradient(47.81% 62.39% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }
.hak__blob-t--11 { left: -25%; top: 306.42px; width: 52.97%; height: 554.55px; transform: rotate(1.8262deg); opacity: 0.8; filter: blur(78.05px);
    background: radial-gradient(61.88% 47.97% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%); }
.hak__blob-t--12 { left: -46.06%; top: 34.51px; width: 99.54%; height: 518.38px; transform: rotate(27.4121deg); filter: blur(88.97px);
    background: radial-gradient(47.81% 62.39% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }

/* --- круги мобильного макета (канва 375) --- */
.hak__blob-m--1 { left: 21.2%; top: 4743.09px; width: 63.28%; height: 452.12px; transform: rotate(-45deg); filter: blur(44.36px);
    background: radial-gradient(74.43% 45.42% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-m--2 { left: -29.07%; top: 4671px; width: 158.13%; height: 1307px; opacity: 0.9; filter: blur(44.76px);
    background: radial-gradient(110.2% 22.69% at 50% 50%, #A9FF74 0%, rgba(169, 255, 116, 0) 77.88%); }
.hak__blob-m--3 { left: 43.73%; top: 3556px; width: 122.4%; height: 994px; filter: blur(85.85px);
    background: radial-gradient(81.46% 44.71% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-m--4 { left: 40.8%; top: 4009px; width: 128.8%; height: 796px; opacity: 0.8; filter: blur(105.75px);
    background: radial-gradient(67.76% 46.47% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%); }
.hak__blob-m--5 { left: 64.53%; top: 3341px; width: 96.53%; height: 612px; filter: blur(81.73px);
    background: radial-gradient(68.84% 46.27% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-m--6 { left: -54.49%; top: 2911.38px; width: 142.73%; height: 1117.28px; transform: rotate(12.4693deg); filter: blur(118.61px);
    background: radial-gradient(79.32% 44.9% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-m--7 { left: -36%; top: 2477px; width: 130.93%; height: 906px; filter: blur(67.42px);
    background: radial-gradient(72.84% 45.63% at 56.76% 50.16%, #8EFF64 0%, rgba(142, 255, 100, 0) 100%); }
.hak__blob-m--8 { left: -24.27%; top: 1027.67px; width: 178.67%; height: 945.65px; filter: blur(110.49px);
    background: radial-gradient(61.98% 47.94% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }
.hak__blob-m--9 { left: 50.4%; top: 222px; width: 70.03%; height: 353px; filter: blur(52.33px);
    background: radial-gradient(60.41% 48.49% at 56.76% 50.16%, #0CBCFF 0%, rgba(12, 188, 255, 0) 100%); }
.hak__blob-m--10 { left: 25.64%; top: 39.69px; width: 150.31%; height: 394.56px; transform: rotate(32.5709deg); filter: blur(67.72px);
    background: radial-gradient(47.81% 62.39% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }
.hak__blob-m--11 { left: -43.01%; top: 515.53px; width: 77.52%; height: 389.55px; transform: rotate(1.8262deg); opacity: 0.8; filter: blur(44.69px);
    background: radial-gradient(60.32% 48.53% at 56.76% 50.16%, #F8FF3B 0%, rgba(248, 255, 59, 0) 100%); }
.hak__blob-m--12 { left: -75.59%; top: 302.27px; width: 151.92%; height: 342.51px; transform: rotate(55.2293deg); filter: blur(50.95px);
    background: radial-gradient(46.39% 68.15% at 56.76% 50.16%, #6CEBC7 0%, rgba(108, 235, 199, 0) 100%); }

/* Контентная колонка. ВАЖНО: абсолютно позиционированные декорации
   вешаются на <section>, а не сюда — тогда их left/top совпадают
   с координатами макета один в один. */
.hak__w {
    position: relative;
    z-index: 2;
    display: flow-root;
    width: 100%;
    max-width: var(--hak-canvas);
    margin: 0 auto;
    padding: 0 var(--hak-gutter);
}

/* Секция = канва макета: абсолютные декорации внутри считаются от её левого
   края, поэтому их left/top совпадают с координатами макета один в один.
   overflow не задаём — декор должен выходить за края канвы. */
.hak section {
    position: relative;
    width: 100%;
    max-width: var(--hak-canvas);
    margin: 0 auto;
}

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

/* ---- Типографика макета ---- */
.hak__h2 {                       /* Desktop/Headline/H2/Bold Italic */
    font-weight: 700;
    font-style: italic;
    font-size: 64px;
    line-height: 72px;
}

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

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

/* --- строка логотипов --- */
.hak-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 24px;
}
.hak-logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hak-logos__x { flex: 0 0 10px; width: 10px; height: 10px; }
.hak-logos__i { flex: 0 0 auto; }
.hak-logos__i--fond    { width: 125px;   height: 41px; }
.hak-logos__i--academy { width: 100px;   height: 39px; }
.hak-logos__i--omsk-obl{ width: 137px;   height: 38.28px; }
.hak-logos__i--school21{ width: 41px;    height: 41px; }
.hak-logos__i--omgtu   { width: 113.99px;height: 37.09px; }
.hak-logos__i--pmifi   { width: 63.59px; height: 55px; }
.hak-logos__i--city    { width: 56px;    height: 49px; }
.hak-logos__i--omsk    { width: 106px;   height: 38.21px; }

/* --- текстовая колонка --- */
.hak-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 654px;
}

.hak-hero__date {
    display: inline-flex;
    align-items: center;
    flex: 0 0 24px;
    height: 24px;
    margin-top: 96px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--hak-ink);
    color: var(--hak-white);
    font-size: 16px;
    line-height: 24px;
}
.hak-hero__title {
    margin-top: 24px;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
}
.hak-hero__desc {
    margin-top: 24px;
    width: 691px;
    font-size: 20px;
    line-height: 1.2;
}
.hak-hero__lead {
    margin-top: 32px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

/* --- кнопка + стикер в одну строку --- */
.hak-hero__cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

/* --- 3D-объект справа: img/hackathon/hero.webp ---
   Экспорт 1194×984 = ровно 2× бокса макета, поэтому картинка занимает его
   целиком, без внутренних смещений.
   ВНИМАНИЕ: точка отсчёта — .hak__w, а она начинается на 48px ниже канвы
   (padding-top секции), поэтому из координат макета вычитается 48. */
.hak-hero__media {
    position: absolute;
    left: calc(691px + var(--hak-gutter));   /* 803 в макете − 112 */
    top: 72.5px;         /* 120.5 в макете − 48 */
    width: 597px;
    height: 492px;
    z-index: 1;
}
.hak-hero__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- стикер «места ограничены»: img/hackathon/sticker.webp ---
   Наклон впечён в экспорт, поэтому transform не нужен. Бокс 322.96×98.99 —
   это повёрнутый на −5.02° габарит блока 317.93×71.44 из макета; в макете он
   лежит со сдвигом −2.66 / −5.13 от рамки слоя (338, 571).
   Точка отсчёта, как и у картинки баннера, — .hak__w, поэтому −48.
   На десктопе стикер вынесен из потока (в макете это отдельный слой
   баннера), на планшете и мобильных встаёт в строку/колонку рядом с кнопкой. */
.hak-sticker {
    position: absolute;
    left: calc(223.34px + var(--hak-gutter));  /* 338 − 2.66 − 112 */
    top: 517.87px;       /* 571 − 5.13 − 48 */
    z-index: 4;
    flex: 0 0 322.96px;
    width: 322.96px;
}
.hak-sticker img { display: block; width: 100%; height: auto; }

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

/* Фон карточки — цельный экспорт экрана: в нём уже и заливка с подсветкой,
   и вырезанные углы (в альфе), и насечки, и 3D-объект с фото.
   Экспорт 2524×1034 = ровно 2× бокса макета. */
.hak-intro__card {
    position: relative;
    width: 1262px;
    height: 517px;
    margin-left: -46px;   /* карточка выходит за колонку влево (x=66 в макете) */
    background: url('img/hackathon/intro.webp') no-repeat 0 0 / 100% 100%;
}

.hak-intro__text {
    position: absolute;
    left: 126px;
    top: 89px;
    width: 642px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-size: 24px;
    line-height: 32px;
}
.hak-intro__text b { font-weight: 700; }

/* ============================================================
   3. РЕАЛЬНЫЕ ДАННЫЕ ОМСКИХ СМИ
   ============================================================ */
.hak-media { padding-top: 120px; }

.hak-media__title { text-align: center; }

/* --- бегущая строка --- */
/* Идёт из края в край окна. Секция жёстко 1440, поэтому строка выходит за её
   края отрицательным отступом; лишнее режется по краю окна (overflow: hidden
   у .hak). Контейнер отступа центрирован по канве, поэтому 50% — её середина.
   min() страхует от положительного отступа, если 100vw окажется меньше
   ширины секции (например из-за полосы прокрутки). */
.hak-ticker {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 80px;
    margin-top: 40px;
    margin-left: min(0px, calc(50% - 50vw));
    padding: 24px 0;
    overflow: hidden;
}
/* свечение под текстом */
.hak-ticker::before,
.hak-ticker::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.hak-ticker::before { top: 31.95px; height: 15.1px; background: #6BFE90; filter: blur(19px); }
.hak-ticker::after  { top: 36.99px; height: 5px;    background: var(--hak-lime); filter: blur(8px); }

.hak-ticker__track {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: max-content;
    animation: hak-marquee 32s linear infinite;
}
/* четыре одинаковых набора: прокрутка на -25% = ровно один набор, при этом
   дорожка всегда шире окна + набора, иначе в конце цикла видна прореха */
.hak-ticker__set {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-right: 24px;
}
.hak-ticker__item {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    text-transform: uppercase;
    white-space: nowrap;
}
.hak-ticker__item i { font-style: normal; color: #00BD2F; }
/* значение вниз — красным */
.hak-ticker__item i.--down { color: #E31E24; }
@keyframes hak-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

/* --- карточка с задачей --- */
.hak-task {
    position: relative;
    height: 464px;
    margin-top: 40px;
    padding: 64px 80px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    background:
        radial-gradient(665px 665px at 1173px 272px, #B2EB39 0%, rgba(178, 235, 57, 0) 78%),
        var(--hak-card);
}
.hak-task__title {
    position: relative;
    z-index: 2;
    width: 720px;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
}
.hak-task__desc {
    position: relative;
    z-index: 2;
    width: 642px;
    margin-top: 32px;
    font-size: 24px;
    line-height: 32px;
}
/* 3D-объект: img/hackathon/task.webp */
.hak-task__obj {
    position: absolute;
    left: 930px;
    top: 0;
    width: 286px;
    height: 464px;
    overflow: hidden;
}
.hak-task__obj img {
    position: absolute;
    left: -72px;
    top: -8px;
    width: 496px;
    height: 496px;
    object-fit: contain;
}

/* --- нижний ряд: лидерборд + фото + подсказка --- */
.hak-cards {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.hak-cards > * { flex: 0 0 400px; height: 374px; }

/* лидерборд */
.hak-lb {
    padding: 32px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    background: var(--hak-card);
}
.hak-lb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.hak-lb__tabs { display: flex; align-items: center; gap: 16px; }
.hak-lb__tab  { display: flex; align-items: center; gap: 8px; }
.hak-lb__tab img { display: block; width: 24px; height: 24px; }
.hak-lb__tab--on { color: var(--hak-green); }

.hak-lb__rows { display: flex; flex-direction: column; gap: 2px; }
.hak-lb__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 16px 24px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    font-size: 20px;
    line-height: 28px;
}
.hak-lb__row:nth-child(1) { background: linear-gradient(90deg, rgba(1, 225, 57, .70) 0%, rgba(1, 225, 57, 0) 82%); }
.hak-lb__row:nth-child(2) { background: linear-gradient(90deg, rgba(3, 236, 149, .55) 0%, rgba(3, 236, 149, 0) 82%); }
.hak-lb__row:nth-child(3) { background: linear-gradient(90deg, rgba(110, 230, 169, .50) 0%, rgba(110, 230, 169, 0) 82%); }
.hak-lb__row:nth-child(4) { background: linear-gradient(90deg, rgba(208, 206, 206, .45) 0%, rgba(208, 206, 206, 0) 82%); }
.hak-lb__team { display: flex; align-items: center; gap: 20px; }
.hak-lb__num  { width: 18px; text-align: center; }

/* фотокарточка со срезанными углами — цельный экспорт экрана: фото, срезы
   углов (в альфе) и подсветка уже внутри.
   Экспорт 800×748 = ровно 2× бокса 400×374 из .hak-cards. */
.hak-photo-lb {
    background: url('img/hackathon/task-2.webp') no-repeat 0 0 / 100% 100%;
}

/* салатовая карточка-подсказка */
.hak-hint {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    background: var(--hak-lime);
    font-size: 24px;
    line-height: 32px;
}
.hak-hint b { font-weight: 700; }

/* декоративный кубик: img/hackathon/cube.webp
   Поворот впечён в экспорт, поэтому transform не нужен. Бокс — габарит
   объекта из макета (в макете это повёрнутый квадрат 270×270, отсюда 330.68),
   объект показывается целиком и свободно выходит за канву.
   На десктопе привязан к правому-нижнему углу секции. */
.hak-media__cube {
    position: absolute;
    left: auto;
    top: auto;
    right: calc(var(--hak-gutter) - 112px);   /* край канвы */
    bottom: -160px;
    width: 330.68px;
    height: 330.68px;
    z-index: 3;
    pointer-events: none;
}
.hak-media__cube picture,
.hak-media__cube img { display: block; width: 100%; height: 100%; object-fit: contain; }

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

.hak-how__title { text-align: center; }

.hak-how__list {
    width: 864px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hak-how__item {
    position: relative;
    display: flex;
    gap: 24px;
    height: 176px;
    padding: 24px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    background:
        radial-gradient(279px 209px at -45px 72px, var(--hak-blue) 0%, rgba(90, 210, 255, 0) 78%),
        var(--hak-card);
}
/* иллюстрации: img/hackathon/how-1…4.webp */
.hak-how__img {
    position: relative;
    flex: 0 0 158px;
    width: 158px;
    height: 120px;
    overflow: hidden;
}
.hak-how__img img { position: absolute; }
.hak-how__item:nth-child(1) .hak-how__img img { left: -4px;  top: -23px; width: 166px; height: 166px; }
.hak-how__item:nth-child(2) .hak-how__img img { left: 5px;   top: -15px; width: 148px; height: 148px; }
.hak-how__item:nth-child(3) .hak-how__img img { left: 0;     top: -12px; width: 148px; height: 148px; }
.hak-how__item:nth-child(4) .hak-how__img img { left: -5px;  top: -25px; width: 168px; height: 168px; }

.hak-how__text { padding-top: 7px; }
.hak-how__name {
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    line-height: 32px;
}
.hak-how__desc {
    width: 452px;
    margin-top: 16px;
    font-size: 24px;
    line-height: 32px;
}
.hak-how__item:nth-child(3) .hak-how__desc,
.hak-how__item:nth-child(4) .hak-how__desc { width: 579px; }

/* --- нарисованные «облачка»: img/hackathon/team.webp и participate.webp ---
   Текст и наклон впечены в экспорт, поэтому ни подписи, ни transform не нужны.
   Бокс — габарит повёрнутой группы из макета (рамка слоя её подрезает, но
   обрезать не надо), высота берётся из пропорции картинки.
   top = координата в макете + padding-top секции (облачка висят на <section>). */
.hak-bubble {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}
.hak-bubble img { display: block; width: 100%; height: auto; }
.hak-bubble--team {
    /* привязка к правому краю: на канве 1440 это ровно координата макета
       (1440 − 1171 − 222.09 = 46.91), а когда поля сжимаются — облачко
       упирается в край экрана с отступом 16px и не вылезает за него */
    left: auto;
    right: max(16px, calc(var(--hak-gutter) - 65.09px));
    top: 444px;
    width: 222.09px;
}
.hak-bubble--join {
    /* на канве 1440 даёт 60px из макета, ниже — упор в левый край с 16px */
    left: max(16px, calc(var(--hak-gutter) - 52px));
    top: 612.86px;       /* 492.86 в макете + 120 */
    width: 214.9px;
}
/* лёгкое «плавание» — как у похожих плашек в index-new
   (.how__deco--team img и .levels__participate img): та же связка
   4s ease-in-out infinite, «собери команду» по вертикали, «участвуй» по
   горизонтали. Амплитуду взял 10px вместо 20px, чтобы было сдержаннее.
   Анимируем вложенный <img>, чтобы не трогать позиционирование обёртки. */
@keyframes hak-float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes hak-float-x {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(10px); }
}
.hak-bubble--team img { animation: hak-float-y 4s ease-in-out infinite; }
.hak-bubble--join img { animation: hak-float-x 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .hak-bubble img { animation: none; }
}

/* --- декоративные 3D-объекты по краям --- */
/* В макете видна только та часть объекта, что попала в канву, но обрезать
   их не нужно: на широком экране объект показывается целиком и уходит
   за край канвы — режется уже по краю окна (overflow у .hak). */
.hak-how__deco {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.hak-how__deco img { position: absolute; }
/* img/hackathon/deco-ball.webp */
.hak-how__deco--ball { left: calc(var(--hak-gutter) - 112px); top: 209px; width: 216px; height: 275px; }
.hak-how__deco--ball img { left: -154.87px; top: -64.34px; width: 408.23px; height: 408.23px; transform: rotate(-79.19deg); }
/* img/hackathon/deco-pear.webp */
.hak-how__deco--pear { left: calc(1139px + var(--hak-gutter)); top: 635px; width: 189px; height: 234px; }
.hak-how__deco--pear img { left: -48.03px; top: -51px; width: 320px; height: 320px; }

/* ============================================================
   5. ЧТО ПОЛУЧИШЬ
   ============================================================ */
.hak-gains { padding-top: 120px; }

.hak-gains__grid {
    position: relative;
    width: 1216px;
    height: 728px;
}
.hak-gains__title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
}

.hak-gains__card {
    position: absolute;
    padding: 32px;
    border-radius: var(--hak-radius);
    overflow: hidden;
    font-size: 24px;
    line-height: 32px;
    background: var(--hak-card-2);
}
.hak-gains__card b { font-weight: 700; }
/* заливка карточек различается по брейкпоинтам — см. медиазапросы */
.hak-gains__card--1,
.hak-gains__card--4,
.hak-gains__card--5 { background: var(--hak-lime); }
.hak-gains__card--1 { left: 409px; top: 112px; width: 400px; height: 200px; }
.hak-gains__card--2 { left: 817px; top: 112px; width: 399px; height: 200px; }
.hak-gains__card--3 { left: 409px; top: 320px; width: 400px; height: 200px; }
.hak-gains__card--4 { left: 817px; top: 320px; width: 399px; height: 200px; }
.hak-gains__card--5 { left: 409px; top: 528px; width: 400px; height: 200px; }

/* кубок: img/hackathon/cup.webp */
.hak-gains__cup {
    position: absolute;
    left: 0;
    top: 66px;
    width: 401px;
    height: 246px;
    pointer-events: none;
}
.hak-gains__cup img { position: absolute; left: 94.82px; top: -30px; width: 292.18px; height: 292.18px; }

/* звезда: img/hackathon/star.webp
   Экспорт 798×458 = 399×229: по ширине это рамка слоя, по высоте — объект,
   который вылезает из неё на 6.51px вверх. Отсюда бокс и сдвиг top.
   На планшете и мобильных объект в макете меньше, поэтому бокс пересчитан
   от него так, чтобы сама звезда внутри экспорта встала на своё место. */
.hak-gains__star {
    position: absolute;
    left: 817px;
    top: 521.49px;       /* 528 − 6.51 */
    width: 399px;
    height: 229px;
    pointer-events: none;
}
.hak-gains__star img { display: block; width: 100%; height: 100%; }

/* фотокарточка с «перфорацией» — цельный экспорт экрана: фото, срезы углов
   (в альфе) и заливка с градиентом уже внутри.
   Экспорт 802×816 = ровно 2× бокса 401×408. */
.hak-gains__photo {
    position: absolute;
    left: 0;
    top: 320px;
    width: 401px;
    height: 408px;
    background: url('img/hackathon/gains.webp') no-repeat 0 0 / 100% 100%;
}

/* ============================================================
   6. ФИНАЛЬНЫЙ БЛОК
   ============================================================ */
.hak-final { padding-top: 120px; padding-bottom: 120px; }

/* карточка — цельный экспорт экрана: заливка с подсветкой, срезанные углы
   (в альфе), насечки и фото уже внутри.
   Экспорт 2432×813 = ровно 2× бокса 1216×406. */
.hak-final__card {
    position: relative;
    width: 1216px;
    height: 406px;
    background: url('img/hackathon/final.webp') no-repeat 0 0 / 100% 100%;
}

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

/* ============================================================
   АДАПТИВ — общее для планшета и мобильных
   Десктопная сетка жёстко привязана к канве 1440, поэтому
   ниже 1216px (это ширина контентной колонки) её нужно распустить.
   ============================================================ */
@media (max-width: 1215px) {
    .hak    { min-width: 0; width: 100%; }
    .hak section { width: 100%; }
    /* канва распущена — держать ширину в 1440 больше не нужно */
    .hak-ticker { min-width: 0; }
    .hak__w { width: 100%; }
    /* канва распущена по ширине окна, поэтому фон здесь остаётся цельным
       экспортом из макета (bg-tab.svg / bg-mob.svg), а не набором кругов */
    .hak__bg   { left: 0; width: 100%; transform: none; }
    .hak__blob { display: none; }
    .hak__blob-t { display: block; }
    .hak-how__deco { overflow: hidden; }

    /* стикер возвращается в поток — он стоит рядом с кнопкой */
    .hak-sticker { position: static; }

    /* «Как проходит» — список во всю ширину колонки */
    .hak-how__list { width: 100%; margin: 40px auto 0; }
    .hak-how__item { height: auto; }
    .hak-how__desc,
    .hak-how__item:nth-child(3) .hak-how__desc,
    .hak-how__item:nth-child(4) .hak-how__desc { width: 100%; }

    /* «Что получишь» — из абсолютной раскладки в grid */
    .hak-gains__grid {
        display: grid;
        width: 100%;
        height: auto;
        column-gap: 8px;
        row-gap: 8px;
    }
    .hak-gains__title {
        position: static;
        grid-column: 1 / -1;
        margin-bottom: 32px;
    }
    .hak-gains__card,
    .hak-gains__cup,
    .hak-gains__photo {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
    }
}

/* ============================================================
   ПЛАНШЕТ 744–1215 — макет Landing - Tablet (95:6120), канва 744
   ============================================================ */
@media (min-width: 744px) and (max-width: 1215px) {
    .hak__w { padding: 0 76px; }
    .hak__bg { top: -40px; height: 5513px; }

    /* ---------- 1. БАННЕР ---------- */
    .hak-hero { height: 738px; padding-top: 48px; }
    .hak-hero__content { width: 100%; }
    .hak-hero__date  { margin-top: 72px; }
    .hak-hero__title { margin-top: 24px; max-width: 592px; font-size: 40px; line-height: 48px; }
    .hak-hero__desc  { margin-top: 16px; width: 280px; font-size: 16px; line-height: 1.2; }
    .hak-hero__lead  { margin-top: 32px; width: 270px; font-size: 16px; line-height: 20px; }
    .hak-hero__cta   { margin-top: 24px; gap: 32px; }
    .hak-hero__media {
        left: auto;
        right: 64px;
        top: 348px;
        width: 327px;
        height: 256px;
    }
    .hak-sticker { flex-basis: 323px; width: 323px; }

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

    /* ---------- 3. СМИ ---------- */
    .hak-media { padding-top: 120px; }
    .hak-ticker { margin-top: 40px; }

    .hak-task { height: 787px; padding: 24px; }
    .hak-task__title { width: 100%; max-width: 544px; }
    .hak-task__desc  { width: 100%; max-width: 544px; }
    .hak-task__obj { left: 105px; top: 479px; width: 382px; height: 308px; }
    .hak-task__obj img { left: 50%; top: -61px; width: 496px; height: 496px; transform: translateX(-50%); }

    .hak-cards { flex-wrap: wrap; }
    .hak-cards > * { flex: 0 0 calc(50% - 4px); height: auto; }
    .hak-cards .hak-hint { flex: 0 0 100%; }

    .hak-lb { padding: 24px; }
    .hak-lb__head { margin-bottom: 24px; font-size: 16px; line-height: 20px; }
    .hak-lb__row  { height: 44px; padding: 12px 16px; font-size: 16px; line-height: 20px; }
    .hak-lb__team { gap: 10px; }

    .hak-photo-lb { align-self: flex-start; aspect-ratio: 586 / 556;
                    background-image: url('img/hackathon/task-2-tab.webp'); }
    .hak-hint { padding: 24px 24px 40px; gap: 16px; }

    .hak-media__cube { left: auto; right: -20px; top: 1540.08px; bottom: auto; width: 171.5px; height: 171.5px; }

    /* ---------- 4. КАК ПРОХОДИТ ---------- */
    .hak-how { padding-top: 120px; }
    .hak-how__desc { margin-top: 8px; }
    /* свечение у левого края, как на десктопе (там `at -45px 72px`).
       -33px — центр эллипса из планшетного макета, размер тоже его: 210×157 */
    .hak-how__item { min-height: 125px; padding: 24px; gap: 24px; align-items: center;
        background: radial-gradient(210px 157px at -33px 50%, var(--hak-blue) 0%, rgba(90, 210, 255, 0) 78%), var(--hak-card); }
    .hak-how__img  { flex-basis: 100px; width: 100px; height: 76px; }
    .hak-how__text { padding-top: 0; }
    .hak-how__item:nth-child(1) .hak-how__img img { left: -2.53px; top: -14.56px; width: 105.06px; height: 105.06px; }
    .hak-how__item:nth-child(2) .hak-how__img img { left: 3.16px;  top: -9.49px;  width: 93.67px;  height: 93.67px; }
    .hak-how__item:nth-child(3) .hak-how__img img { left: 0;       top: -7.6px;   width: 93.67px;  height: 93.67px; }
    .hak-how__item:nth-child(4) .hak-how__img img { left: -3.16px; top: -15.82px; width: 106.33px; height: 106.33px; }

    /* экспорт один, с десктопным наклоном: отдельных -tab/-mob для облачек нет.
       z-index ниже .hak__w (2): в планшетном макете это облачко лежит в дереве
       до контентного фрейма, то есть заходит под первую карточку */
    .hak-bubble--team { left: auto; right: 22px; top: 192px; width: 151px; z-index: 1; }
    .hak-bubble--join { left: 2px;  top: 558px; width: 127px; }

    .hak-how__deco--ball { left: 0; top: 120px; width: 88px; height: 122px; }
    .hak-how__deco--ball img { left: -66.96px; top: -29.1px; width: 182.5px; height: 182.5px; transform: rotate(-79.15deg); }
    .hak-how__deco--pear { left: auto; right: 0; top: 710px; width: 119px; height: 155px; }
    .hak-how__deco--pear img { left: -30.2px; top: -33.8px; width: 201.6px; height: 201.6px; }

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .hak-gains { padding-top: 120px; }
    /* строки 4–5 резиновые: их высоту задаёт фотокарточка, которая держит
       пропорцию экспорта, а карточки в этих строках тянутся по ним — тогда низ
       .hak-gains__card--5 совпадает с низом фото на любой ширине диапазона */
    .hak-gains__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 146px 146px auto auto; }
    .hak-gains__card { height: 146px; padding: 24px; }
    .hak-gains__cup  { grid-column: 1; grid-row: 2; height: 146px; }
    .hak-gains__cup img { left: 104px; top: -19px; width: 186px; height: 186px; }
    .hak-gains__card--1 { grid-column: 2; grid-row: 2; }
    .hak-gains__card--2 { grid-column: 1; grid-row: 3; background: var(--hak-lime); }
    .hak-gains__card--3 { grid-column: 2; grid-row: 3; }
    .hak-gains__card--4 { grid-column: 2; grid-row: 4; }
    .hak-gains__card--5 { grid-column: 2; grid-row: 5; background: var(--hak-card-2); }
    .hak-gains__card--4,
    .hak-gains__card--5 { height: auto; min-height: 146px; }
    .hak-gains__photo {
        grid-column: 1;
        grid-row: 4 / span 2;
        align-self: start;
        height: auto;
        aspect-ratio: 584 / 594;
        background-image: url('img/hackathon/gains-tab.webp');
    }
    .hak-gains__star { position: absolute; left: -208.8px; top: 398px; width: 324.5px; height: 186.23px; }

    /* ---------- 6. ФИНАЛ ---------- */
    .hak-final { padding-top: 120px; padding-bottom: 120px; }
    .hak-final__card {
        width: 100%;
        max-width: 592px;    /* ширина карточки в планшетном макете: выше не растём */
        aspect-ratio: 1184 / 1334;
        height: auto;
        margin: 0 auto;
        background-image: url('img/hackathon/final-tab.webp');
    }
    .hak-final__text  { left: 24px; top: 64px; width: 544px; }
    .hak-final__sub   { width: 512px; }
}

/* ============================================================
   МОБИЛЬНЫЕ ≤743 — макет Landing - Mobile (105:9206), канва 375
   ============================================================ */
@media (max-width: 743px) {
    .hak__w { padding: 0 16px; }
    .hak__bg { top: -122px; height: 5978px; }
    .hak__blob-t { display: none; }
    .hak__blob-m { display: block; }

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

    /* ---------- 1. БАННЕР ---------- */
    .hak-hero { height: auto; padding-top: 16px; }
    .hak-logos { gap: 14px; }
    .hak-logos__x          { flex-basis: 6px; width: 6px; height: 6px; }
    .hak-logos__i--fond    { width: 59px;    height: 19.35px; }
    .hak-logos__i--academy { width: 55.9px;  height: 21.8px; }
    .hak-logos__i--omsk-obl{ width: 67.04px; height: 18.73px; }
    .hak-logos__i--school21{ width: 20.96px; height: 20.96px; }
    .hak-logos__i--omgtu   { width: 56px;    height: 18.22px; }
    .hak-logos__i--pmifi   { width: 35.84px; height: 31px; }
    .hak-logos__i--city    { width: 33.28px; height: 29px; }
    .hak-logos__i--omsk    { width: 51.44px; height: 18.54px; }

    /* картинка встаёт в поток между логотипами и текстом */
    .hak-hero__media { position: static; margin-top: 16px; width: 100%; height: 265px; }

    .hak-hero__content { width: 100%; }
    .hak-hero__date  { margin-top: 24px; }
    .hak-hero__title { margin-top: 16px; font-size: 40px; line-height: 48px; }
    .hak-hero__desc  { margin-top: 16px; width: 100%; font-size: 16px; line-height: 1.2; }
    .hak-hero__lead  { margin-top: 24px; font-size: 16px; line-height: 20px; }
    .hak-hero__cta   { width: 100%; margin-top: 24px; flex-direction: column; align-items: center; gap: 16px; }
    .hak-sticker { flex: 0 0 auto; width: 322px; max-width: 100%; }

    /* ---------- 2. ЧТО ЗА ХАКАТОН ---------- */
    .hak-intro { padding-top: 64px; }
    .hak-intro__card {
        width: 100%;
        max-width: 344px;    /* ширина карточки в мобильном макете: выше не растём */
        aspect-ratio: 688 / 1495;
        height: auto;
        margin: 0 auto;
        background-image: url('img/hackathon/intro-mob.webp');
    }
    .hak-intro__text { left: 24px; top: 49px; width: calc(100% - 48px); gap: 16px; font-size: 18px; line-height: 22px; }
    .hak-intro__text p:first-child { font-size: 20px; line-height: 26px; }

    /* ---------- 3. СМИ ---------- */
    .hak-media { padding-top: 80px; }
    .hak-media__title { margin: 0 32px 24px; }
    .hak-ticker { height: 74px; margin-top: 0; }
    .hak-ticker__item { font-size: 20px; line-height: 26px; }
    .hak-ticker__set  { padding-right: 16px; }

    .hak-task { height: 645px; padding: 24px; }
    .hak-task__title { width: 100%; font-size: 24px; line-height: 32px; }
    .hak-task__desc  { width: 100%; margin-top: 16px; font-size: 18px; line-height: 22px; }
    .hak-task__obj { left: 42px; top: 414px; width: 260px; height: 231px; }
    .hak-task__obj img { left: 50%; top: -45px; width: 368px; height: 368px; transform: translateX(-50%); }

    .hak-cards { flex-direction: column; }
    .hak-cards > * { flex: 0 0 auto; width: 100%; height: auto; }

    .hak-lb { padding: 24px; }
    .hak-lb__head { margin-bottom: 24px; font-size: 18px; line-height: 22px; }
    .hak-lb__row  { height: 46px; padding: 12px 16px; font-size: 18px; line-height: 22px; }
    .hak-lb__team { gap: 10px; }

    .hak-photo-lb { aspect-ratio: 688 / 652; background-image: url('img/hackathon/task-2-mob.webp'); }
    .hak-hint { padding: 24px 24px 32px; gap: 8px; font-size: 18px; line-height: 22px; }

    .hak-media__cube {
        left: auto;
        right: -4.02px;
        top: auto;
        bottom: -40px;
        width: 106px;
        height: 88px;
    }

    /* ---------- 4. КАК ПРОХОДИТ ---------- */
    .hak-how { padding-top: 116px; padding-bottom: 90px; }
    /* свечение у левого края, как на планшете и десктопе; -33px — центр
       эллипса из мобильного макета (там слева оно только у четвёртой карточки) */
    .hak-how__item { min-height: 0; padding: 24px 16px; gap: 16px; align-items: flex-start;
        background: radial-gradient(210px 157px at -33px 50%, var(--hak-blue) 0%, rgba(90, 210, 255, 0) 78%), var(--hak-card); }
    .hak-how__img  { flex-basis: 64px; width: 64px; height: 76px; }
    .hak-how__text { padding-top: 0; }
    .hak-how__desc { margin-top: 8px; font-size: 18px; line-height: 22px; }
    .hak-how__item:nth-child(1) .hak-how__img img { left: -18px;    top: -12.03px; width: 100px;   height: 100px; }
    .hak-how__item:nth-child(2) .hak-how__img img { left: -14.84px; top: -9.49px;  width: 93.67px; height: 93.67px; }
    .hak-how__item:nth-child(3) .hak-how__img img { left: -15px;    top: -7.6px;   width: 93.67px; height: 93.67px; }
    .hak-how__item:nth-child(4) .hak-how__img img { left: -14.5px;  top: -9.16px;  width: 93px;    height: 93px; }

    .hak-bubble--team { left: auto; right: 13px; top: 172px; width: 130px; transform: rotate(4deg); }
    .hak-bubble--join { left: 45px; top: auto; bottom: 28px; width: 109px; transform: rotate(-25deg); }

    .hak-how__deco--ball { left: 0; top: 140px; width: 42px; height: 52px; }
    .hak-how__deco--ball img { left: -23.97px; top: -12.22px; width: 76.71px; height: 76.71px; transform: rotate(-79.19deg); }
    /* z-index ниже .hak__w (2): груша уходит под карточку */
    .hak-how__deco--pear { left: auto; right: 0; top: auto; bottom: -2px; width: 86px; height: 114px; z-index: 1; }
    .hak-how__deco--pear img { left: -23px; top: -22px; width: 153px; height: 153px; }

    /* ---------- 5. ЧТО ПОЛУЧИШЬ ---------- */
    .hak-gains { padding-top: 80px; }
    .hak-gains__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 146px 146px auto 146px; }
    .hak-gains__card { height: 146px; padding: 24px 16px; font-size: 18px; line-height: 22px; }
    .hak-gains__cup  { grid-column: 1; grid-row: 2; height: 146px; }
    .hak-gains__cup img { left: 22px; top: 0; width: 154px; height: 154px; }
    .hak-gains__card--1 { grid-column: 2; grid-row: 2; }
    .hak-gains__card--2 { grid-column: 1; grid-row: 3; background: var(--hak-lime); }
    .hak-gains__card--3 { grid-column: 2; grid-row: 3; }
    .hak-gains__card--4 { grid-column: 1; grid-row: 5; }
    .hak-gains__card--5 { grid-column: 2; grid-row: 5; background: var(--hak-card-2); }
    .hak-gains__photo {
        grid-column: 1 / -1;
        grid-row: 4;
        align-self: start;
        height: auto;
        aspect-ratio: 688 / 706;
        background-image: url('img/hackathon/gains-mob.webp');
    }
    .hak-gains__star { position: absolute; left: -99.9px; top: 387px; width: 232px; height: 133.2px; }

    /* ---------- 6. ФИНАЛ ---------- */
    .hak-final { padding-top: 80px; padding-bottom: 80px; }
    .hak-final__card {
        width: 100%;
        max-width: 344px;    /* ширина карточки в мобильном макете: выше не растём */
        aspect-ratio: 688 / 1076;
        height: auto;
        margin: 0 auto;
        background-image: url('img/hackathon/final-mob.webp');
    }
    .hak-final__text  { left: 24px; top: 40px; width: calc(100% - 48px); }
    .hak-final__title { font-size: 24px; line-height: 32px; }
    .hak-final__sub   { width: 100%; margin-top: 16px; font-size: 18px; line-height: 22px; }
}

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

   Поэтому здесь: высоту задаёт контент (текст в потоке + нижний
   паддинг под фото), а не пропорция. Арт при этом не тянем, а
   кладём двумя слоями одной и той же картинки, обе — в натуральном
   масштабе по ширине:
     - фон карточки прижат к верху  — рамка, вырез угла, заголовок;
     - ::after прижат к низу        — фото с подсветкой, нижние углы.
   Лишняя высота уходит в стык слоёв (верх ::after, 40% высоты
   карточки). В арте вся середина — ровный #f6f6f6, поэтому оба слоя
   в точке стыка дают один и тот же цвет и шва не видно. Пропорции
   фото и вырезов сохраняются на любой ширине. */
@media (max-width: 375px) {
    .hak-final__card {
        aspect-ratio: auto;
        height: auto;
        background-size: 100% auto;   /* натуральный масштаб, прижат к верху */
        /* низ = высота фото (63.66% ширины карточки) + зазор 45px как на 390 */
        padding: 40px 24px calc(63.66% + 45px);
    }
    /* текст в потоке — он и задаёт высоту карточки */
    .hak-final__text {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
    }
    /* нижний слой: фото в натуральных пропорциях, прижато к низу.
       40% сверху — с запасом, чтобы перекрыть фото верхнего слоя,
       но стык остался в ровной зоне арта. */
    .hak-final__card::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 40%;
        bottom: 0;
        background: url('img/hackathon/final-mob.webp') no-repeat bottom center / 100% auto;
    }
}

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