/* ============================================
   Котоджем — лендинг
   Шрифт Montserrat, акцент #0068AD
   Без абсолютных значений: rem / % / clamp
   ============================================ */

:root {
  /* Цвета (из фигмы) */
  --color-blue:        #0068AD;  /* основной акцент */
  --color-blue-dark:   #005a96;  /* hover */
  --color-text:        #232323;  /* основной текст */
  --color-text-muted:  #6b7280;
  --color-bg:          #ffffff;  /* фон страницы */
  --color-card:        #ffffff;  /* фон белых карточек */
  --color-soft:        #f0f0f0;  /* разделители / фон под медиа */
  --color-border:      #d9d9d9;

  /* Радиусы и тени */
  --radius-lg: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --radius-md: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  --radius-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.875rem);
  --shadow-card: 0 1rem 2.5rem -1rem rgba(0, 60, 110, 0.18);

  /* Шрифт и базовые отступы */
  --font-sans: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max-width: 90rem;
  --space-section: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --gutter: clamp(2rem, 1.2rem + 2vw, 4rem);     /* боковые поля страницы */
}

/* ============================================
   БАЗА
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; background: #ededed; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.9rem + 0.2vw, 1.125rem);  /* 16..18 */
  line-height: 1.45;
  color: var(--color-text);
  background: #ededed;          /* совпадает с фоном видео cat-cook.mp4 */
  -webkit-font-smoothing: antialiased;
}

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

/* ============================================
   МИКРОАНИМАЦИИ ПРИ СКРОЛЛЕ
   IntersectionObserver добавляет .is-visible,
   плавный fade-in + подъём.
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* stagger для детей: индекс * 70ms */
.reveal--d1 { transition-delay: 0.07s; }
.reveal--d2 { transition-delay: 0.14s; }
.reveal--d3 { transition-delay: 0.21s; }
.reveal--d4 { transition-delay: 0.28s; }
.reveal--d5 { transition-delay: 0.35s; }
.reveal--d6 { transition-delay: 0.42s; }
.reveal--d7 { transition-delay: 0.49s; }
.reveal--d8 { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); }   /* 36..64 */
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3.125rem); }/* 28..50 */
h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.875rem); }/* 18..30 */

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ============================================
   ОБЁРТКА
   ============================================ */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
}

/* ============================================
   ЗАГОЛОВКИ СЕКЦИЙ
   ============================================ */
.section-title {
  color: var(--color-blue);
  text-transform: uppercase;
}
.section-title--center { text-align: center; }
.section-title--inverse { color: #fff; }

/* ============================================
   КНОПКИ
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1em;
  border: 0.125rem solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn--primary {
  background: var(--color-blue);
  color: #fff;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(0, 104, 173, 0.55);
}
.btn--primary:hover { background: var(--color-blue-dark); }

.btn--ghost {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn--ghost:hover { background: rgba(0, 104, 173, 0.08); }

.btn--inverse.btn--primary { background: #fff; color: var(--color-text); }   /* в фигме текст кнопки тёмный #232323 */
.btn--inverse.btn--primary:hover { background: #f0f0f0; }
.btn--inverse.btn--ghost  { color: #fff; border-color: #fff; }
.btn--inverse.btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ============================================
   1. HERO — full-bleed видео фоном, текст справа
   Без затемнения: фон видео белый, как у страницы
   ============================================ */
.hero {
  position: relative;
  min-height: clamp(28rem, 60vh, 44rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-text);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;            /* видео целиком, не обрезается */
  object-position: center;
  pointer-events: none;
  position: relative;
  left: -5rem;
}
.hero__video--mobile { display: none; }   /* на десктопе скрыт */

.hero__content {
  position: relative;
  z-index: 1;
  width: 50%;                     /* правая половина экрана */
  max-width: 40rem;
  margin-left: auto;              /* прижать вправо */
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* выравнивание по левому краю блока */
  text-align: left;
  gap: clamp(0.875rem, 0.6rem + 1vw, 1.5rem);
}

.hero__title {
  text-transform: uppercase;
  color: var(--color-blue);
  text-wrap: balance;
  font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
}

.hero__lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  margin: 0;
  max-width: 32em;
  color: var(--color-text);
}

.hero__date {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1.5rem;
  border: 0.125rem solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
}
.hero__btn:hover { transform: translateY(-1px); text-decoration: none; }

.hero__btn--primary {
  background: var(--color-blue);
  color: #fff;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(0, 0, 0, 0.25);
}
.hero__btn--primary:hover { background: var(--color-blue-dark); }

.hero__btn--ghost {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.hero__btn--ghost:hover { background: rgba(0, 104, 173, 0.08); }

/* ============================================
   2. КАРТОЧКА «ЧТО ЖДЁТ» (синяя)
   В фигме: картинка кастрюли слегка выходит за пределы карточки.
   ============================================ */
.card-info {
  background: var(--color-blue);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.card-info__inner {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .card-info__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.card-info__text .section-title { color: #fff; }
.card-info__text p {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
  margin: 0 0 1em;
  opacity: 0.95;
}

/* Картинка кастрюли слегка выходит за края синей карточки */
.card-info__media {
  position: relative;
  margin: clamp(-0.75rem, -0.5rem + -0.5vw, -1.5rem)
          clamp(-0.75rem, -0.5rem + -0.5vw, -1.5rem)
          clamp(-0.75rem, -0.5rem + -0.5vw, -1.5rem)
          0;
}
.card-info__media img {
  width: 100%;
  display: block;
}

/* ============================================
   3. SPLIT (Если вы давно хотели)
   ============================================ */
/* Без горизонтального padding — иначе секция визуально уже соседей
   (горизонтальный gutter уже есть у .page). */
.split {
  padding: 0;
}

.split__inner {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  align-items: stretch;             /* колонки одной высоты (split__media растянется под split__text) */
}
.split__inner > * { min-width: 0; }   /* grid: дети не выпихивают колонку */

@media (min-width: 62rem) {
  .split__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.split__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.25rem);
  min-width: 0;          /* grid: не даём min-content расширить колонку */
}
.split__text p { margin: 0; }

.split__lead {
  padding: 1rem 1.25rem;
  background: #e5e5e5;             /* чуть темнее */
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.split__media {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--gutter);
}
.split__media img { width: 100%; }

.badge {
  position: absolute;
  right: 6%;
  bottom: 6%;
  background: var(--color-blue);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  max-width: 75%;
  text-align: right;
  box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0,0,0,0.3);
}
.badge__title { display: block; font-weight: 700; font-size: 1.25em; }
.badge__sub   { display: block; opacity: 0.9; font-size: 0.85em; margin-top: 0.25em; }

/* ============================================
   4. РОЛИ — слайдер в .split__media
   В каждый момент видна ОДНА карточка (492×814 по фигме),
   переключение — кликом по точке.
   Структура карточки:
     • белый фон с картинкой кота сверху — 81.94% высоты
     • синяя плашка 431×173 поверх низа картинки
   ============================================ */
.split__media--carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* role-card по центру, когда split__media растянут под высокую колонку */
  gap: 0.75rem;
  padding: 0;
  background: transparent;
  align-self: stretch;              /* растянуть на всю высоту соседней колонки (.split__text) */
}

.split__media-title {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  color: var(--color-blue);
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.roles-carousel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Список карточек. Все, кроме активной, скрыты (JS переключает). */
.roles-carousel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Карточка роли — общая рамка 492×814 (по фигме).
   Скрыта по умолчанию; видна только та, на которой .is-active.
   В фигме: белый Rectangle 492×667 (верх) + синяя плашка 492×173 (низ).
   Скругляем все углы — выглядит аккуратнее.
   box-shadow — ВНЕШНЯЯ (spread >= 0). При overflow:hidden и spread<0
   получается внутренняя синяя обводка, которая и выглядит как
   «обрезанная линия» по периметру (в т.ч. на верхней границе). */
.role-card {
  display: none;
  position: relative;
  width: clamp(15rem, 50%, 31rem);
  aspect-ratio: 492 / 814;
  overflow: hidden;
  background: #fff;
  border-radius: clamp(1rem, 0.8vw, 1.75rem);
  box-shadow: 0 1rem 2rem -0.5rem rgba(0, 60, 110, 0.2);
  animation: roleFade 0.3s ease;
}
.role-card.is-active { display: block; }

@keyframes roleFade {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Картинка кота — от верха до верха синей плашки.
   Используем inset + bottom, чтобы не было перекрытия с .role-card__plate
   (раньше height: 81.94% + plate 21.25% = 103.19%, плашка залезала наверх). */
.role-card__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 25%;                    /* совпадает с .role-card__plate height: 25% */
  background-color: #fff;
  background-size: 102% auto;       /* 102% ширины — обрезается по бокам, без пустых полей */
  background-repeat: no-repeat;
  background-position: center;
}

/* Синяя плашка 492×173 на ВСЮ ширину карточки, прижата к низу */
.role-card__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;                    /* 25% высоты карточки */
  background: var(--color-blue);
  color: #fff;
  padding: 10% 9% 11%;           /* увеличенный вертикальный паддинг */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2em;
  text-align: left;
  box-sizing: border-box;
  z-index: 1;
}

.role-card__title,
.role-card__desc {
  margin: 0;
  color: #fff;
  line-height: 1.15;
}
.role-card__title {
  font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.4rem);
  font-weight: 600;
}
.role-card__desc {
  font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.95rem);
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.3;
}

/* Индикатор — 5 точек (1 активная синяя + 4 серые) */
.roles-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.5rem;
}

.roles-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease;
}
.roles-carousel__dot:hover { background: #b0b0b0; }
.roles-carousel__dot.is-active { background: var(--color-blue); }

/* ============================================
   5. TIMELINE (От заявки до запуска)
   В фигме:
     • белый блок intro 1320×213 (padding 50, r=30) с lead-текстом 30px
     • 5 этапов в зигзаге (Регистрация, Тема, Разработка, Оценка, Финал)
       каждая карточка 654×331, white, r=30, padding 50
     • справа от Финала — текст 654×331 без фона, font-weight 600
     • Заголовки этапов: Montserrat 600 30px UPPERCASE blue
     • Даты:           Montserrat 500 30px blue
     • Описания:       Montserrat 400 30px #2e2e2e
   ============================================ */
.timeline__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
}

/* Белый блок с lead-текстом */
.timeline__intro {
  background: #fff;
  border-radius: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: #2e2e2e;
}
.timeline__intro p {
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);  /* 18..30 */
  line-height: 1.2;
  margin: 0;
}

/* Сетка этапов: 2 колонки, зигзаг по nth-child */
.timeline__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.75rem;
}
.timeline__items > * { min-width: 0; }

.timeline__item {
  background: #fff;
  border-radius: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
  color: #2e2e2e;
}
/* Зигзаг: 1,3,5 слева; 2,4 справа */
.timeline__item:nth-child(odd)  { grid-column: 1; }
.timeline__item:nth-child(even) { grid-column: 2; }

.timeline__stage {
  font-size: clamp(1.25rem, 0.5rem + 2vw, 1.875rem);   /* 20..30 */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0;
  line-height: 1.2;
}

.timeline__date {
  font-size: clamp(1.25rem, 0.5rem + 2vw, 1.875rem);
  font-weight: 500;
  color: var(--color-blue);
  margin: 0;
  line-height: 1.2;
}

.timeline__desc {
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);
  font-weight: 400;
  color: #2e2e2e;
  margin: 0;
  line-height: 1.2;
}

/* Текст справа от Финала (6-й элемент в .timeline__items) */
.timeline__foot {
  grid-column: 2;
  align-self: center;
  text-align: right;
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);
  font-weight: 600;
  color: #2e2e2e;
  margin: 0;
  line-height: 1.2;
}

/* На узких экранах — одна колонка (62rem = 992px — мобилка с 991px и ниже).
   Используем :nth-child в селекторах, чтобы специфичность была >= базовой
   (иначе .timeline__item:nth-child(odd) { grid-column: 1 } бьёт простой class). */
@media (max-width: 62rem) {
  .timeline__items { grid-template-columns: 1fr; }
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even),
  .timeline__foot { grid-column: 1; }
  .timeline__foot { text-align: left; align-self: stretch; }
  .timeline__stage,
  .timeline__date { font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem); }
  .timeline__desc,
  .timeline__foot { font-size: clamp(1rem, 0.85rem + 0.8vw, 1.25rem); }
}

/* ============================================
   6. НОМИНАЦИИ
   В фигме: синий контейнер 1320×268 r=30,
     заголовок "Номинации" 50px белый,
     3 серые таблетки (#f1f1f1) r=30, текст 30px semibold синий
   ============================================ */
.nominations {
  background: var(--color-blue);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  box-shadow: var(--shadow-card);
}

.nominations__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 2.5rem);
}

.nominations .section-title--center { text-align: center; }

.nominations__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.nominations__item {
  background: #f1f1f1;             /* серый, как в фигме */
  color: var(--color-blue);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);  /* 18..30 */
  line-height: 1.2;
  padding: clamp(0.75rem, 0.4rem + 1vw, 1.4rem) clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  border-radius: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  white-space: nowrap;             /* в одну строку, перенос только на новый ряд */
}

/* ============================================
   7. ЧТО ВАЖНО
   В фигме: text слева, белый блок с checklist справа,
     геймпад как декор (вылезает за край слева).
     В блоке: заголовок h3 "На что жюри обратят внимание" 30px semibold,
     8 чек-итемов 30px medium, иконка 43×43 (белый квадрат с синей галочкой).
   ============================================ */
.criteria {
  position: relative;
  overflow: visible;
}

.criteria__inner {
  display: grid;
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
  position: relative;
}

@media (min-width: 62rem) {
  .criteria__inner {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
      "intro checklist"
      "media  checklist";
  }
  .criteria__intro   { grid-area: intro; }
  .criteria__media   { grid-area: media; }
  .criteria__checklist { grid-area: checklist; }
}

.criteria__intro p {
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);   /* 18..30 */
  line-height: 1.2;
  color: #2e2e2e;
  max-width: 32em;
  margin: 0;
}

.criteria__media {
  position: relative;
  margin-top: 1rem;
}
.criteria__media img {
  width: 100%;
  max-width: 28rem;
  display: block;
}

.criteria__checklist {
  position: relative;
  background: #fff;
  border-radius: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding: clamp(2.75rem, 1.5rem + 3vw, 4.25rem) clamp(1.5rem, 0.5rem + 3vw, 3rem) clamp(1.5rem, 0.5rem + 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  box-shadow: 0 0.5rem 1.5rem -0.75rem rgba(0, 60, 110, 0.12);
  overflow: hidden;
}

/* «Лист блокнота» — фоновая SVG из Figma 1:68 (Union) */
.criteria__checklist::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/notebook.svg') no-repeat top center / 100% auto;
  pointer-events: none;
  z-index: 0;
}
.criteria__checklist > * { position: relative; z-index: 1; }

.criteria__checklist-title {
  margin: 0;
  color: var(--color-blue);
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);   /* 18..30 */
  font-weight: 600;
  line-height: 1.2;
}

.checklist {
  display: grid;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem) clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 32rem) {
  .checklist { grid-template-columns: 1fr 1fr; }
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);   /* 18..30 */
  font-weight: 500;
  line-height: 1.2;
  color: #2e2e2e;
}

.checklist__icon {
  flex: none;
  display: inline-block;
  width: clamp(1.75rem, 1.2rem + 1vw, 2.625rem);  /* 28..42 — пропорционально 43×42 в фигме */
  height: auto;
  margin-top: 0.15em;
}

/* ============================================
   8. CTA
   ============================================ */
.cta {
  background: var(--color-blue);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  box-shadow: var(--shadow-card);
}

.cta__inner {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .cta__inner { grid-template-columns: 1.2fr 0.8fr; }
}

.cta__text p { font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem); line-height: 1.2; opacity: 0.95; margin: 0; }

.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.cta__media { display: flex; align-items: center; justify-content: center; }

.cta__media img { width: 100%; }

.cta__placeholder {
  width: 100%;
  aspect-ratio: 445 / 346;
  background: #fff;
  border-radius: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;       /* по центру, не уходит сильно вправо */
}

.cta__placeholder img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  margin: auto;                 /* центрирование внутри flex */
  object-fit: contain;
}

/* ============================================
   9. FAQ
   В фигме: 7 вопросов 30px semibold + ответы 30px regular #2e2e2e,
     разделитель border-top между вопросами, +/− toggle.
   ============================================ */
.faq__inner {
  display: flex;
  flex-direction: column;
  gap: 0;            /* разделители — это border-top */
}

.faq__item {
  border-top: 0.0625rem solid var(--color-border);
  padding: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem) 0;
}
.faq__item:last-child { border-bottom: 0.0625rem solid var(--color-border); }

.faq__q {
  list-style: none;
  cursor: default;
  font-weight: 600;
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);  /* 18..30 */
  line-height: 1.2;
  color: #2e2e2e;
  margin: 0;
}

.faq__a {
  margin-top: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
  color: #2e2e2e;
  font-size: clamp(1.125rem, 0.5rem + 2vw, 1.875rem);
  line-height: 1.2;
  font-weight: 400;
}
.faq__a p { margin: 0; }

/* ============================================
   10. ОРГАНИЗАТОРЫ (фулл-блуд футер)
   В фигме: синий Rectangle 1440×666 (x=-8, w=1440) при родителе 1424 —
   выходит за края. Скругления только сверху r=30.
   В HTML вынесен из .page, чтобы быть на всю ширину viewport.
   ============================================ */
.orgs {
  position: relative;
  width: 100%;
  background: var(--color-blue);
  border-top-left-radius: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-top-right-radius: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--gutter) clamp(2rem, 1.2rem + 2.5vw, 3rem);
  margin-top: var(--space-section);
  color: #fff;
}

.orgs__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.orgs__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 1rem + 1.5vw, 3rem);
  align-items: center;
  justify-content: center;
}

.orgs__item img {
  height: clamp(5rem, 3rem + 4vw, 10.5rem);  /* 80..168 — как в фигме */
  width: auto;
  filter: brightness(0) invert(1);             /* белые логотипы на синем фоне */
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.orgs__item:hover img { opacity: 1; }

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤ 40rem = 640px)
   2-колонки → 1 колонка, карточка роли шире,
   hero текст на всю ширину, таймлайн вертикальный.
   ============================================ */
@media (max-width: 62rem) {
  /* Hero: текст СВЕРХУ, видео ПОД ним (в колонку) */
  .hero {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    background: #ededed;          /* серый как у body, чтобы картинка/видео не на белом */
  }
  .hero__media {
    position: static;             /* видео больше не absolute, идёт в потоке */
    order: 2;
    background: #ededed;
  }
  .hero__video {
    position: relative;
    left: 5rem;                   /* сдвиг вправо на мобилке */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;          /* квадратное видео на мобилке */
    max-height: 18rem;
  }
  /* На мобилке — только картинка (видео не запускаем) */
  .hero__video--desktop { display: none; }
  .hero__video--mobile  { display: block; }
  .hero__content {
    order: 1;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: clamp(1.5rem, 1rem + 3vw, 2.5rem) var(--gutter);
    align-items: center;
    text-align: center;
  }
  .hero__title { font-size: clamp(1.75rem, 1.4rem + 2vw, 2.5rem); }
  .hero__actions { justify-content: center; }

  /* Карточка роли: на всю ширину родителя */
  .role-card {
    width: min(85%, 28rem);
  }
  .roles-carousel__list { padding: 0; }   /* без горизонтального паддинга на мобилке */
  .role-card__title { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); }
  .role-card__desc  { font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem); }

  /* Что ждёт: текст и картинка в колонку */
  .card-info__inner { grid-template-columns: 1fr; }
  .card-info__media { margin: 0; max-width: 28rem; justify-self: center; }

  /* Сплит: текст сверху, карусель снизу */
  .split__inner { grid-template-columns: 1fr; }
  .split__lead { text-align: center; }

  /* Критерии: 1 колонка */
  .criteria__inner { grid-template-columns: 1fr; }
  .criteria__media img { max-width: 22rem; }

  /* CTA: текст сверху, картинка снизу */
  .cta__inner { grid-template-columns: 1fr; }
  .cta__placeholder { max-width: 28rem; margin: 0 auto; }

  /* Чеклист: 1 колонка (а не 2) */
  .checklist { grid-template-columns: 1fr; }

  /* Таймлайн уже 1 колонка в @media (max-width: 40rem) выше */

  /* FAQ */
  .faq__q { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }
  .faq__a  { font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.125rem); }

  /* Секционные отступы — крупнее на мобилке */
  .page { gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
}