/* ==========================================================================
   МЕЖВУЗ — стили сайта
   Тема светлая: белая бумага, чертёжная сетка, синька в линиях,
   оранжевый акцент. Тёмный вариант сохранён — см. [data-theme="dark"] ниже.
   ========================================================================== */

:root {
  /* поверхности */
  --bg:         #ffffff;
  --bg-2:       #f4f6f9;   /* чередующиеся секции */
  --bg-3:       #eaeef4;   /* плашки, ячейки логотипов */
  --panel:      #ffffff;
  --footer-bg:  #141414;   /* подвал инвертирован — держит низ страницы */

  /* линии */
  --line:       rgba(15, 55, 105, .12);
  --line-2:     rgba(15, 55, 105, .22);
  --grid:       rgba(15, 55, 105, .055);
  /* Фирменный узор из брендбука: поле точек цвета основного синего,
     плотнее к правому краю. Заменяет прежнюю миллиметровку из линий. */
  --dot:        rgba(41, 70, 209, .16);
  --dot-lg:     rgba(41, 70, 209, .34);
  --dot-step:   56px;
  /* Строка точек, растущих слева направо: повторяется по вертикали и
     растягивается на всю ширину, поэтому переход размера всегда виден
     целиком, каким бы ни был экран. */
  --dots:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%2272%22%20viewBox%3D%220%200%201440%2072%22%3E%3Cg%20fill%3D%22%232946d1%22%3E%3Ccircle%20cx%3D%2236.0%22%20cy%3D%2236.0%22%20r%3D%223.60%22%20opacity%3D%220.090%22%2F%3E%3Ccircle%20cx%3D%22108.0%22%20cy%3D%2236.0%22%20r%3D%223.84%22%20opacity%3D%220.098%22%2F%3E%3Ccircle%20cx%3D%22180.0%22%20cy%3D%2236.0%22%20r%3D%224.15%22%20opacity%3D%220.107%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2236.0%22%20r%3D%224.49%22%20opacity%3D%220.116%22%2F%3E%3Ccircle%20cx%3D%22324.0%22%20cy%3D%2236.0%22%20r%3D%224.85%22%20opacity%3D%220.126%22%2F%3E%3Ccircle%20cx%3D%22396.0%22%20cy%3D%2236.0%22%20r%3D%225.24%22%20opacity%3D%220.136%22%2F%3E%3Ccircle%20cx%3D%22468.0%22%20cy%3D%2236.0%22%20r%3D%225.64%22%20opacity%3D%220.146%22%2F%3E%3Ccircle%20cx%3D%22540.0%22%20cy%3D%2236.0%22%20r%3D%226.05%22%20opacity%3D%220.156%22%2F%3E%3Ccircle%20cx%3D%22612.0%22%20cy%3D%2236.0%22%20r%3D%226.48%22%20opacity%3D%220.167%22%2F%3E%3Ccircle%20cx%3D%22684.0%22%20cy%3D%2236.0%22%20r%3D%226.91%22%20opacity%3D%220.177%22%2F%3E%3Ccircle%20cx%3D%22756.0%22%20cy%3D%2236.0%22%20r%3D%227.36%22%20opacity%3D%220.188%22%2F%3E%3Ccircle%20cx%3D%22828.0%22%20cy%3D%2236.0%22%20r%3D%227.82%22%20opacity%3D%220.199%22%2F%3E%3Ccircle%20cx%3D%22900.0%22%20cy%3D%2236.0%22%20r%3D%228.28%22%20opacity%3D%220.210%22%2F%3E%3Ccircle%20cx%3D%22972.0%22%20cy%3D%2236.0%22%20r%3D%228.75%22%20opacity%3D%220.221%22%2F%3E%3Ccircle%20cx%3D%221044.0%22%20cy%3D%2236.0%22%20r%3D%229.23%22%20opacity%3D%220.232%22%2F%3E%3Ccircle%20cx%3D%221116.0%22%20cy%3D%2236.0%22%20r%3D%229.72%22%20opacity%3D%220.243%22%2F%3E%3Ccircle%20cx%3D%221188.0%22%20cy%3D%2236.0%22%20r%3D%2210.21%22%20opacity%3D%220.254%22%2F%3E%3Ccircle%20cx%3D%221260.0%22%20cy%3D%2236.0%22%20r%3D%2210.71%22%20opacity%3D%220.266%22%2F%3E%3Ccircle%20cx%3D%221332.0%22%20cy%3D%2236.0%22%20r%3D%2211.21%22%20opacity%3D%220.277%22%2F%3E%3Ccircle%20cx%3D%221404.0%22%20cy%3D%2236.0%22%20r%3D%2211.72%22%20opacity%3D%220.288%22%2F%3E%3Ccircle%20cx%3D%221476.0%22%20cy%3D%2236.0%22%20r%3D%2212.24%22%20opacity%3D%220.300%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  /* текст */
  --text:       #141414;
  --text-dim:   #51637a;
  --text-mute:  #7d8fa3;
  --on-dark:    #dce7f2;
  --on-dark-dim:#93a7bb;

  /* Фирменные цвета — «Руководство по использованию МЕЖВУЗ», стр. 10.
     Синий 2946D1, зелёный 07BD89, голубой 0076AA (только внутри градиента),
     белый FFFFFF, чёрный 141414. Иные оттенки брендбук запрещает.
     Зелёный на белом даёт 2,43:1 — для мелкого текста этого мало
     (ГОСТ Р 52872-2019, WCAG 1.4.3), поэтому у него два регистра:
     --green-br — точный фирменный, для заливок и градиента,
     --blue/--green — тот же тон, затемнённый до 4,94:1, для подписей. */
  --accent:     #2946d1;   /* заливки: кнопки, полосы */
  --accent-ink: #2139ad;   /* тот же синий там, где он текст и нажатие */
  --accent-2:   #0076aa;   /* голубой: допустим только в градиенте */
  --green-br:   #07bd89;   /* точный фирменный зелёный: заливки, градиент */
  --blue:       #05805c;   /* тот же тон для подписей на белом */
  --blue-soft:  rgba(7, 189, 137, .12);
  --green:      #05805c;
  /* Фирменный градиент: синий → голубой → зелёный. Последовательность
     и значения менять нельзя (брендбук, стр. 11). */
  --brand-gradient: linear-gradient(135deg, #2946d1 0%, #0076aa 52%, #07bd89 100%);
  --brand-gradient-x: linear-gradient(90deg, #2946d1 0%, #0076aa 52%, #07bd89 100%);

  --font:       'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap:       1240px;
  --pad:        clamp(16px, 4vw, 40px);
  --r:          4px;
  --shadow:     0 18px 44px -26px rgba(15, 40, 80, .45);
  --shadow-sm:  0 2px 10px -4px rgba(15, 40, 80, .28);
}

/* Тёмная тема прототипа. Включается атрибутом на <html data-theme="dark">. */
[data-theme="dark"] {
  --bg:         #08131f;
  --bg-2:       #0b1a2b;
  --bg-3:       #102539;
  --panel:      #0e1f31;
  --footer-bg:  #050d16;

  --line:       rgba(120, 190, 255, .16);
  --line-2:     rgba(120, 190, 255, .30);
  --grid:       rgba(120, 190, 255, .10);
  --dot:        rgba(150, 195, 255, .14);
  --dot-lg:     rgba(150, 195, 255, .3);
  --dot-step:   56px;
  --dots:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%2272%22%20viewBox%3D%220%200%201440%2072%22%3E%3Cg%20fill%3D%22%2396c3ff%22%3E%3Ccircle%20cx%3D%2236.0%22%20cy%3D%2236.0%22%20r%3D%223.60%22%20opacity%3D%220.090%22%2F%3E%3Ccircle%20cx%3D%22108.0%22%20cy%3D%2236.0%22%20r%3D%223.84%22%20opacity%3D%220.098%22%2F%3E%3Ccircle%20cx%3D%22180.0%22%20cy%3D%2236.0%22%20r%3D%224.15%22%20opacity%3D%220.107%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2236.0%22%20r%3D%224.49%22%20opacity%3D%220.116%22%2F%3E%3Ccircle%20cx%3D%22324.0%22%20cy%3D%2236.0%22%20r%3D%224.85%22%20opacity%3D%220.126%22%2F%3E%3Ccircle%20cx%3D%22396.0%22%20cy%3D%2236.0%22%20r%3D%225.24%22%20opacity%3D%220.136%22%2F%3E%3Ccircle%20cx%3D%22468.0%22%20cy%3D%2236.0%22%20r%3D%225.64%22%20opacity%3D%220.146%22%2F%3E%3Ccircle%20cx%3D%22540.0%22%20cy%3D%2236.0%22%20r%3D%226.05%22%20opacity%3D%220.156%22%2F%3E%3Ccircle%20cx%3D%22612.0%22%20cy%3D%2236.0%22%20r%3D%226.48%22%20opacity%3D%220.167%22%2F%3E%3Ccircle%20cx%3D%22684.0%22%20cy%3D%2236.0%22%20r%3D%226.91%22%20opacity%3D%220.177%22%2F%3E%3Ccircle%20cx%3D%22756.0%22%20cy%3D%2236.0%22%20r%3D%227.36%22%20opacity%3D%220.188%22%2F%3E%3Ccircle%20cx%3D%22828.0%22%20cy%3D%2236.0%22%20r%3D%227.82%22%20opacity%3D%220.199%22%2F%3E%3Ccircle%20cx%3D%22900.0%22%20cy%3D%2236.0%22%20r%3D%228.28%22%20opacity%3D%220.210%22%2F%3E%3Ccircle%20cx%3D%22972.0%22%20cy%3D%2236.0%22%20r%3D%228.75%22%20opacity%3D%220.221%22%2F%3E%3Ccircle%20cx%3D%221044.0%22%20cy%3D%2236.0%22%20r%3D%229.23%22%20opacity%3D%220.232%22%2F%3E%3Ccircle%20cx%3D%221116.0%22%20cy%3D%2236.0%22%20r%3D%229.72%22%20opacity%3D%220.243%22%2F%3E%3Ccircle%20cx%3D%221188.0%22%20cy%3D%2236.0%22%20r%3D%2210.21%22%20opacity%3D%220.254%22%2F%3E%3Ccircle%20cx%3D%221260.0%22%20cy%3D%2236.0%22%20r%3D%2210.71%22%20opacity%3D%220.266%22%2F%3E%3Ccircle%20cx%3D%221332.0%22%20cy%3D%2236.0%22%20r%3D%2211.21%22%20opacity%3D%220.277%22%2F%3E%3Ccircle%20cx%3D%221404.0%22%20cy%3D%2236.0%22%20r%3D%2211.72%22%20opacity%3D%220.288%22%2F%3E%3Ccircle%20cx%3D%221476.0%22%20cy%3D%2236.0%22%20r%3D%2212.24%22%20opacity%3D%220.300%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  --text:       #dce7f2;
  --text-dim:   #8ba3ba;
  --text-mute:  #61798f;

  --accent-ink: #8a9bf4;
  --green-br:   #07bd89;
  --blue:       #07bd89;   /* на тёмном фоне фирменный зелёный даёт 7,6:1 */
  --blue-soft:  rgba(7, 189, 137, .14);
  --green:      #07bd89;

  --shadow:     0 24px 60px -24px rgba(0, 0, 0, .75);
  --shadow-sm:  0 2px 10px -4px rgba(0, 0, 0, .6);
}

/* --- Базовое ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен побеждать любые display из компонентов ниже */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  /* Фирменный узор: точки нарастают от мелких слева к крупным справа. */
  background-image: var(--dots);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Типографика --------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Фирменный зелёный светлый: на белом это 2,43:1. Утолщаем начертание —
     у переменного JetBrains Mono есть вес до 700, штрих становится плотнее
     и надпись читается заметно лучше без ухода от цвета брендбука. */
  font-weight: 600;
  color: var(--green-br);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--green-br); }
.eyebrow--mt { margin-top: 64px; }

.h2 {
  font-size: clamp(24px, 4vw, 44px);
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 16px;
}

.section__lead { color: var(--text-dim); max-width: 62ch; margin: 0 0 36px; }

.hint { font-family: var(--mono); font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.hint--inline { display: inline; }

.row-between {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}

/* --- Кнопки --------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  box-shadow: 0 8px 22px -10px rgba(41, 70, 209, .85);
}
.btn--accent:hover { --btn-bg: #2139ad; --btn-bd: #2139ad; }

.btn--ghost:hover { --btn-bd: var(--accent); color: var(--accent-ink); background: rgba(41, 70, 209, .06); }

.btn--sm  { padding: 9px 16px; font-size: 14px; }
.btn--lg  { padding: 16px 32px; font-size: 16px; }
.btn--block { width: 100%; }

/* --- Панели --------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.panel__title { font-size: 18px; margin: 0 0 18px; font-weight: 800; }
.panel--result { display: grid; gap: 24px; }

/* ==========================================================================
   Строка логотипов учредителей
   ========================================================================== */
.founders-bar {
  position: relative;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 9px 0;
}
.founders-track {
  --dur: 46s;
  display: flex; width: max-content;
  animation: slide-left var(--dur) linear infinite;
}
.founders-set { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.founders-set__logo { display: flex; align-items: center; }
.founders-set__logo img { height: 26px; width: auto; opacity: .8; }
.founders-track .founders-set__logo::before { content: none; }
.founders-track span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: pre;
  display: flex; align-items: center; gap: 10px;
}
.founders-track span::before {
  content: ''; width: 16px; height: 16px; flex: none;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line-2) 3px 4px);
}
@keyframes slide-left { to { transform: translateX(-50%); } }

/* ==========================================================================
   Шапка
   ========================================================================== */
.header {
  /* выше .menu (95): при открытом меню бургер должен оставаться видимым,
     иначе меню нечем закрыть */
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.header.is-stuck { box-shadow: 0 10px 30px -22px rgba(15, 40, 80, .55); }

.header__inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.logo { display: flex; align-items: center; gap: 11px; flex: none; margin-right: auto; }
.logo__mark { width: 40px; height: auto; flex: none; }
.logo__word { height: auto; flex: none; }

/* Полная версия логотипа — с дескриптором «Конкурс профессионального
   развития студентов», как в брендбуке. Ширину сужаем к краю экрана, но не
   ниже 132px: иначе дескриптор перестаёт читаться даже на плотном экране. */
.logo__word--full { width: clamp(146px, 42vw, 168px); }
.logo__word--short { display: none; }

@media (max-width: 620px) {
  .logo__mark { width: 32px; }
  .logo { gap: 9px; }
}

/* Совсем узкие экраны (320px). Брендбук требует охранное поле не меньше
   высоты буквенной части логотипа (стр. 6) — при прежних размерах до кнопок
   оставалось 10px вместо ~40. Уменьшаем сам логотип, дескриптор сохраняем. */
@media (max-width: 360px) {
  .logo__mark { width: 26px; }
  .logo { gap: 7px; }
  .logo__word--full { width: clamp(118px, 37vw, 146px); }
}

.nav-desktop { display: flex; gap: 2px; }
.nav-desktop a { white-space: nowrap; }
.nav-desktop a {
  padding: 9px 12px; border-radius: var(--r); font-size: 15px; font-weight: 600;
  color: var(--text-dim); transition: color .16s, background .16s;
}
.nav-desktop a:hover { color: var(--text); background: var(--blue-soft); }
.nav-desktop a[aria-current="page"] { color: var(--accent-ink); background: rgba(41, 70, 209, .08); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.burger {
  width: 44px; height: 44px; flex: none;
  display: grid; place-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Полноэкранное меню --------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  /* отступ сверху — под шапку, которая лежит поверх оверлея */
  padding: 128px 0 48px;
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }

/* Кнопки действий стоят над списком разделов: на телефоне до них
   приходилось прокручивать всё меню. */
.menu__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.menu__actions .btn { flex: 1 1 220px; max-width: 320px; }

/* Подсказка о регистрации висит поверх открытого меню — прячем её. */
body.is-locked .reg-hint { display: none; }

.menu__grid {
  display: grid; gap: 28px 40px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.menu__group > a {
  display: inline-block;
  font-size: 21px; font-weight: 800; margin-bottom: 12px;
  border-bottom: 1px solid transparent;
}
.menu__group > a:hover { border-color: var(--accent); }
.menu__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.menu__group li a { font-size: 15px; color: var(--text-dim); display: flex; align-items: baseline; gap: 8px; }
.menu__group li a::before { content: '—'; color: var(--green-br); font-family: var(--mono); font-size: 12px; }
.menu__group li a:hover { color: var(--text); }


body.is-locked { overflow: hidden; }

/* ==========================================================================
   Таймлайн «дорожка с платами»
   ========================================================================== */
.pcb {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 22px;
}
/* overflow-x: auto делает и вертикальную обрезку, поэтому кружок «Финала»,
   который на 2px выше остальных, срезался сверху — компенсируем отступом. */
.pcb__scroll { overflow-x: auto; scrollbar-width: thin; padding: 4px 0 6px; }
.pcb__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; min-width: 780px; }

.pcb__node { position: relative; flex: 1; padding-top: 26px; text-align: center; }
.pcb__node::before {
  content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 13px);
}
.pcb__node:first-child::before { left: 50%; }
.pcb__node:last-child::before  { right: 50%; }
.pcb__node.is-done::before,
.pcb__node.is-active::before { background: var(--green-br); opacity: .8; }

/* Точки этапов — сплошные кружки: так они читаются как отметки на шкале,
   а не как незаполненные чекбоксы. */
.pcb__pad {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-mute);
}
.is-done .pcb__pad { background: var(--green-br); }
.is-active .pcb__pad {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(41, 70, 209, .16);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(41, 70, 209, .07); } }

.pcb__date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-mute); display: block; }
.pcb__label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.is-active .pcb__label { color: var(--text); }
.pcb__node.is-final .pcb__label { color: var(--accent-ink); font-weight: 800; letter-spacing: .06em; }
.pcb__node.is-final .pcb__pad { background: var(--accent); width: 24px; height: 24px; top: -2px; }
/* Финал прошёл — точка закрывается зелёным, как остальные вехи: иначе
   синий цвет финала перебивает .is-done и этап выглядит незавершённым. */
.pcb__node.is-final.is-done .pcb__pad { background: var(--green-br); }
.pcb__node.is-final.is-done .pcb__label { color: var(--green-br); }

/* обратный отсчёт */
.countdown {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2);
}
.countdown__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute);
}
.countdown__units { display: flex; gap: 10px; }
.countdown__units span {
  display: flex; align-items: baseline; gap: 5px;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 5px 11px;
}
.countdown__units b {
  font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.countdown__units i {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute);
}

/* ==========================================================================
   HERO главной
   ========================================================================== */
.hero { position: relative; padding: clamp(48px, 8vw, 88px) 0 0; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 780px; height: 780px; border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 189, 137, .10), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  position: relative;
}
/* Без этого колонка грида не сжимается уже самого длинного слова
   («профессионального») и на узких экранах текст уезжает за край. */
.hero__inner > * { min-width: 0; }

.hero__title {
  font-size: clamp(27px, 5.4vw, 62px);
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--accent-ink); }
/* Абзацы текста задаются в админке пустой строкой: pre-line превращает её
   в разрыв абзаца, а одиночные пробелы и переносы не трогает. */
.hero__lead { color: var(--text-dim); max-width: 54ch; margin: 0 0 28px; white-space: pre-line; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Обещание про минуту относится к кнопке регистрации, поэтому стоит под ней.
   Мелким моноширинным его не замечали — набираем как обычный текст. */
.hero__note { font-size: 14px; color: var(--text-dim); margin: 14px 0 0; }
.hero__note::before { content: '✓'; color: var(--green-br); margin-right: 7px; font-weight: 700; }

/* чертёжная рамка вокруг фото */
.hero__frame {
  position: relative;
  /* Снизу поля нет: фигура должна стоять прямо на линии рамки, а не висеть
     над ней — иначе под ней остаётся пустая полоса сетки. */
  padding: 22px 22px 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  /* Рамка с фотографией залита сплошным фоном: сквозь прозрачную подложку
     просвечивал точечный узор страницы и ложился прямо на снимок. */
  background:
    radial-gradient(circle at 50% 65%, rgba(7, 189, 137, .10), transparent 62%),
    var(--bg);
}
.hero__frame img { position: relative; z-index: 1; filter: drop-shadow(0 26px 40px rgba(15, 40, 80, .28)); }
.hero__tick { position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); }
.hero__tick--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero__tick--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hero__tick--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hero__tick--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hero__caption {
  position: absolute; bottom: 10px; right: 16px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
  /* Новое фото шире прежнего, и подпись ложилась прямо на рукав — она
     тонула в тёмной ткани. Подкладываем светлую подложку. */
  padding: 3px 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

/* --- Численные показатели -------------------------------------------------- */
.stats {
  display: grid; gap: 1px;
  /* число показателей задаёт заказчик, поэтому колонки не фиксируем:
     при двух цифрах третья ячейка не должна оставаться пустой */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.stat { background: var(--bg-2); padding: 26px 28px; }
.stat__value {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  display: block; margin-bottom: 10px;
}
.stat__label { font-size: 14px; color: var(--text-dim); white-space: pre-line; line-height: 1.4; }

/* ==========================================================================
   Секции
   ========================================================================== */
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
/* Полупрозрачная заливка: сквозь неё виден точечный узор страницы. */
.section--alt {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  border-block: 1px solid var(--line);
}
.section--slogan { padding-top: clamp(56px, 8vw, 96px); }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }

.slogan {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 22ch;
  margin: 0 0 clamp(48px, 7vw, 80px);
  padding-left: 26px;
  border-left: 3px solid var(--accent);
  text-wrap: balance;
}

/* --- Карточки-чертёжные рамки ---------------------------------------------- */
.cards-draw { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-draw {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 26px 24px 0;
  min-height: 250px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-draw::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.card-draw:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-draw__no { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--text-mute); margin-bottom: 14px; }
.card-draw h3 { font-size: 22px; margin: 0 0 10px; font-weight: 800; letter-spacing: -.01em; }
.card-draw p { margin: 0 0 22px; font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.card-draw__title-block {
  margin-top: auto; margin-inline: -24px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
}
.card-draw__title-block span { padding: 9px 24px; }
.card-draw__title-block span + span { border-left: 1px solid var(--line); }

/* --- Бегущая строка --------------------------------------------------------- */
.marquee {
  position: relative;
  /* Градиента здесь нет намеренно: белый текст на фирменном зелёном даёт
     2,43:1 — ниже нормы ГОСТ Р 52872-2019 (WCAG 1.4.3). На сплошном
     фирменном синем те же хештеги читаются с запасом 7,26:1. */
  background: var(--accent);
  color: #fff;
  padding: 13px 0;
  overflow: hidden;
}
/* Отступ между хештегами живёт внутри набора, а не между наборами: тогда
   сдвиг на половину дорожки совпадает с длиной набора и стык не заметен. */
.marquee__track { --dur: 34s; display: flex; gap: 0; width: max-content; animation: slide-left var(--dur) linear infinite; }
.marquee__set { display: flex; gap: 34px; padding-right: 34px; }
.marquee__track span {
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; white-space: nowrap;
  display: flex; align-items: center; gap: 34px;
}
.marquee__track span::after { content: '◆'; font-size: 8px; opacity: .6; }

/* --- Треки ------------------------------------------------------------------ */
.tracks { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.track {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 26px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.track::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--brand-gradient-x, none) var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.track:hover { transform: translateY(-4px); border-color: var(--green-br); box-shadow: var(--shadow); }
.track:hover::after { transform: scaleX(1); }

.track__icon { width: 56px; height: 56px; margin-bottom: 18px; }
.track__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.track h3 { font-size: 19px; margin: 0 0 10px; font-weight: 800; }
.track p { margin: 0 0 18px; font-size: 15px; color: var(--text-dim); }
.track__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.track__skills span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--text-mute);
}

/* --- Калькулятор ------------------------------------------------------------ */
.calc { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: start; }
.calc__intro { grid-column: 1 / -1; max-width: 62ch; }
/* пока результат не посчитан — форма не должна висеть в половине экрана */
.calc:has(#calcResult[hidden]) .calc__form { grid-column: 1 / -1; max-width: 620px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
}
.field select, .field input, .field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text); font: inherit; font-size: 15px;
}
.field select {
  appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--blue); outline: none; }

.calc__form .btn { margin-top: 8px; }

.calc__result { grid-template-columns: auto 1fr; align-items: center; }
.gauge { position: relative; width: 132px; height: 132px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__bg { fill: none; stroke: var(--line-2); stroke-width: 8; }
.gauge__fg {
  fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1);
}
.gauge__value { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--mono); font-weight: 700; }
.gauge__value b { font-size: 34px; color: var(--accent-ink); }
.gauge__value i { font-style: normal; font-size: 15px; color: var(--text-mute); }
.calc__verdict h3 { margin: 0 0 8px; font-size: 21px; }
.calc__verdict p { margin: 0 0 18px; color: var(--text-dim); font-size: 15px; }

/* --- Тест -------------------------------------------------------------------- */
.quiz { max-width: 760px; }
.quiz__head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.quiz__counter { font-family: var(--mono); font-size: 13px; color: var(--text-mute); flex: none; }
.quiz__counter b { color: var(--accent-ink); font-size: 17px; }
.quiz__bar { flex: 1; height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: 10%; background: var(--accent); transition: width .3s ease; }

.quiz__q { font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 22px; font-weight: 800; letter-spacing: -.01em; }
.quiz__answers { display: grid; gap: 10px; margin-bottom: 22px; }
.quiz__answers button {
  text-align: left; padding: 15px 18px;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r); cursor: pointer; font-size: 15.5px; font-weight: 600;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .16s, background .16s, transform .16s;
}
.quiz__answers button::before {
  content: attr(data-key);
  font-family: var(--mono); font-size: 11px; color: var(--blue);
  border: 1px solid var(--line-2); border-radius: 2px;
  width: 24px; height: 24px; flex: none;
  display: grid; place-content: center;
}
.quiz__answers button:hover { border-color: var(--accent); background: rgba(41, 70, 209, .06); transform: translateX(4px); }
.quiz__nav { display: flex; gap: 10px; }

.quiz-result { max-width: 760px; }
.quiz-result h3 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 10px; color: var(--accent-ink); }
.quiz-result > p { color: var(--text-dim); margin: 0 0 22px; }
.quiz-result__bars { display: grid; gap: 9px; margin-bottom: 24px; }
.qbar { display: grid; grid-template-columns: 190px 1fr 44px; gap: 12px; align-items: center; font-size: 13px; }
.qbar span:first-child { color: var(--text-dim); }
.qbar i { display: block; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.qbar i b { display: block; height: 100%; background: var(--blue); width: 0; transition: width .6s ease; }
.qbar span:last-child { font-family: var(--mono); font-size: 12px; color: var(--text-mute); text-align: right; }
.quiz-result__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- О нас (блок главной) ------------------------------------------------------ */
.about { display: grid; gap: 40px; grid-template-columns: 1.05fr .95fr; align-items: start; }
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--text-dim); }
.ticks li::before { content: '✓'; color: var(--green-br); font-family: var(--mono); font-size: 13px; flex: none; }
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li + li { border-top: 1px solid var(--line); }
.doclist a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; font-size: 15px; font-weight: 600;
  transition: color .16s, padding .16s;
}
.doclist a:hover { color: var(--accent-ink); padding-inline: 6px 0; }
.doclist em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-mute); flex: none; letter-spacing: .06em; }

/* --- Карта талантов ------------------------------------------------------------ */
/* --- Список вузов-участников -------------------------------------------------------- */
.vuz-list {
  display: grid; gap: 22px 34px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.vuz-city b { display: block; font-size: 14px; margin-bottom: 8px; }
.vuz-city ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vuz-city li {
  position: relative; padding-left: 15px;
  font-size: 13.5px; line-height: 1.35; color: var(--text-dim);
}
.vuz-city li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

/* --- Площадка -------------------------------------------------------------------- */
.venue { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
.venue__place { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--accent-ink); margin: 0 0 18px; }
.venue__facts, .facts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.venue__facts div, .facts-grid div { background: var(--bg); padding: 18px 20px; }
.venue__facts b, .facts-grid b { display: block; font-family: var(--mono); font-size: 24px; color: var(--blue); margin-bottom: 4px; }
.venue__facts span, .facts-grid span { font-size: 13px; color: var(--text-dim); }

.plan {
  position: relative; aspect-ratio: 4 / 3;
  border: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, var(--grid) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, var(--grid) 21px 22px),
    var(--bg-2);
  margin-bottom: 14px;
}
.zone {
  position: absolute;
  border: 1px solid var(--line-2);
  background: var(--blue-soft);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 10px;
  transition: background .18s, border-color .18s;
}
.zone:hover { background: rgba(41, 70, 209, .12); border-color: var(--accent); }
.zone b { font-family: var(--mono); font-size: 15px; color: var(--accent-ink); line-height: 1; }
.zone span { font-size: 11px; color: var(--text-dim); line-height: 1.25; }

/* --- Программа (дни) ---------------------------------------------------------------- */
.program { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.day { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); padding: 22px; }
.day__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2);
}
.day__head b { font-size: 17px; font-weight: 800; }
.day__head span { font-family: var(--mono); font-size: 11px; color: var(--text-mute); letter-spacing: .06em; }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.day li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; font-size: 14.5px; }
.day time { font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 2px; }
.day li p { margin: 0 0 4px; color: var(--text-dim); }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--text-mute);
}
.tag--церемония { color: var(--accent-ink); border-color: rgba(41, 70, 209, .45); }
.tag--компетенции,
.tag--соревнования { color: var(--blue); border-color: rgba(7, 189, 137, .4); }
.tag--деловая { color: var(--accent-ink); border-color: rgba(41, 70, 209, .3); }

/* --- Новости ------------------------------------------------------------------------- */
.news { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.news-card {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 24px; background: var(--panel);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.news-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.news-card__meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.news-card h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.news-card__more { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--blue); letter-spacing: .08em; }

/* --- Цитаты ---------------------------------------------------------------- */
/* Портрет, имя и должность, под ними цитата. Фотографии вырезаны по силуэту,
   поэтому под ними мягкий фирменный градиент. Абзацы — через pre-line. */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.quote {
  margin: 0; padding: 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 20px;
}
.quote__head { display: flex; align-items: center; gap: 20px; }
.quote__photo {
  flex: none; width: 128px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(160deg, rgba(41, 70, 209, .16), rgba(0, 118, 170, .10) 52%, rgba(7, 189, 137, .16));
}
.quote__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote__who { display: grid; gap: 6px; }
.quote__who b { font-size: 18px; font-weight: 800; color: var(--text); }
.quote__who span { font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.quote__text {
  margin: 0; padding-left: 20px; border-left: 2px solid var(--green-br);
  font-size: 16px; line-height: 1.6; color: var(--text); white-space: pre-line;
}
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .quote { padding: 20px; gap: 16px; }
  .quote__head { gap: 14px; }
  .quote__photo { width: 96px; }
  .quote__who b { font-size: 16px; }
  .quote__who span { font-size: 13px; }
  .quote__text { font-size: 15px; padding-left: 14px; }
}
html[data-bvi="on"] .quote__photo { background: none; }

/* --- Логотипы спонсоров и организаторов ---------------------------------------------------------------- */
.logos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.logos--sponsors { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.logos--organizers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.logo-cell {
  position: relative;
  background: var(--bg-3);
  min-height: 124px;
  display: grid; place-content: center; text-align: center;
  padding: 22px 18px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--text-dim);
  transition: background .18s, color .18s;
}
.logo-cell:hover { background: var(--bg); color: var(--text); }
.logo-cell__img { max-width: 150px; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.logo-cell__tip {
  /* Раньше подсказка всплывала над ячейкой и обрезалась: у сетки логотипов
     overflow: hidden, а верхнему ряду всплывать некуда. Теперь она просто
     накрывает саму ячейку — видна целиком в любом ряду и на телефоне. */
  position: absolute; inset: 0;
  display: grid; place-content: center;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 2px;
  padding: 8px 10px;
  font-family: var(--font); font-size: 12px; font-weight: 400; line-height: 1.32;
  color: var(--text); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
  z-index: 5;
}
.logo-cell:hover .logo-cell__tip,
.logo-cell:focus .logo-cell__tip,
.logo-cell:focus-visible .logo-cell__tip { opacity: 1; }

/* --- Спонсоры по уровням ------------------------------------------------ */
/* Как на пресс-стене Финала: уровни сверху вниз, логотипы в строку слева.
   Ячейки фиксированной ширины — единственный золотой логотип не растягивается
   на всю ширину, как было бы в общей сетке. */
.sponsors { display: grid; gap: 28px; }
.sponsors__title {
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.sponsors__row { display: flex; flex-wrap: wrap; gap: 12px; }
.sponsors .logo-cell { width: 220px; min-height: 112px; border: 1px solid var(--line); border-radius: var(--r); }
/* Логотипы спонсоров очень разные по пропорциям — от почти квадратного 1С до
   вытянутых АЛС и «артселленс». Общий предел 150×52 из сетки организаторов
   делал первые мелкими, а вторые тонкими полосками; здесь ячейка шире. */
.sponsors .logo-cell__img { max-width: 180px; max-height: 60px; }
.sponsors__tier--gold .logo-cell { width: 300px; min-height: 140px; }
.sponsors__tier--gold .logo-cell__img { max-width: 220px; max-height: 76px; }
/* Бронзовые — два ряда по три, как на пресс-стене Финала. Три ячейки по
   220px с отступами страницы влезают только с ~744px, поэтому порог 760px;
   уже — действуют обычные правила: по две в ряд. */
@media (min-width: 760px) {
  .sponsors__tier--bronze .sponsors__row { display: grid; grid-template-columns: repeat(3, 220px); }
}
/* --- Информационные партнёры -------------------------------------------- */
/* Гибкая строка, а не общая сетка: у СМИ логотипы разной формы и их число
   меняется, а auto-fit оставлял в последнем ряду пустые ячейки — на светлом
   фоне это читалось как обрыв блока. Ячейки той же ширины, что у спонсоров. */
.media-partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.media-partners .logo-cell {
  width: 220px; min-height: 112px;
  border: 1px solid var(--line); border-radius: var(--r);
}
.media-partners .logo-cell__img { max-width: 180px; max-height: 60px; }
/* Квадратные знаки (ТАСС, «Аддитивные технологии») при общем пределе по
   высоте выглядят заметно мельче вытянутых логотипов — даём им больше
   высоты, чтобы оптическая масса в ряду совпадала. */
.media-partners .logo-cell__img--square { max-height: 76px; }
@media (max-width: 520px) {
  .media-partners .logo-cell { width: calc(50% - 6px); min-height: 96px; padding: 16px 12px; }
  .media-partners .logo-cell__img { max-width: 100%; }
}

@media (max-width: 520px) {
  .sponsors .logo-cell { width: calc(50% - 6px); min-height: 96px; padding: 16px 12px; }
  .sponsors__tier--gold .logo-cell { width: 100%; }
  .sponsors .logo-cell__img { max-width: 100%; }
}

/* --- Стать спонсором ---------------------------------------------------------------- */
.section--partner {
  /* Фирменный фон: диагональный градиент синий → голубой → зелёный
     (брендбук, стр. 11). Приглушён, поэтому текст поверх остаётся тёмным
     на светлом и контраст не страдает. */
  background:
    linear-gradient(135deg, rgba(41, 70, 209, .13), rgba(0, 118, 170, .08) 52%, rgba(7, 189, 137, .13)),
    var(--bg-2);
  border-block: 1px solid var(--line);
}
.partner { max-width: 900px; }
.benefits { display: grid; gap: 20px 32px; grid-template-columns: repeat(2, 1fr); margin: 28px 0 32px; }
.benefit { border-left: 2px solid var(--accent); padding-left: 16px; }
.benefit b { display: block; font-size: 16px; margin-bottom: 5px; }
.benefit span { font-size: 14.5px; color: var(--text-dim); }

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ========================================================================== */

/* --- Шапка страницы + хлебные крошки ------------------------------------------ */
.page-hero {
  padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 4vw, 44px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
  margin: 0 0 18px;
}
.breadcrumbs a { color: var(--blue); }
.breadcrumbs a:hover { color: var(--accent-ink); }
.breadcrumbs span::after { content: '/'; margin-left: 8px; opacity: .5; }
.breadcrumbs span:last-child::after { content: ''; }

.page-hero h1 {
  font-size: clamp(26px, 4.6vw, 52px);
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.06; letter-spacing: -.025em; font-weight: 800;
  margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.page-hero p { color: var(--text-dim); max-width: 64ch; margin: 0; font-size: 17px; }

/* --- Этапы (О Конкурсе) --------------------------------------------------------- */
.stages { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stage {
  position: relative; padding: 26px 22px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel);
}
.stage__no {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  color: var(--accent-ink); display: block; margin-bottom: 14px;
}
.stage h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.stage p { margin: 0; font-size: 15px; color: var(--text-dim); }

.two-col { display: grid; gap: 40px; grid-template-columns: 1.05fr .95fr; align-items: start; }
.two-col p { color: var(--text-dim); }
.two-col p:first-child { margin-top: 0; }

.experts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 28px; }
.expert { background: var(--bg); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.expert b { font-size: 16px; }
.expert span { font-size: 14px; color: var(--text-dim); }

.values { display: grid; gap: 16px; }
.value { border-left: 2px solid var(--blue); padding-left: 14px; }
.value b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.value span { font-size: 14px; color: var(--text-dim); }

/* --- Компетенции (Программа) ------------------------------------------------------ */
.comps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.comp { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); padding: 24px; }
.comp__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.comp__icon { width: 42px; height: 42px; flex: none; }
.comp__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.comp h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.comp__zone { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--blue); }
.comp__modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comp__modules li {
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  padding: 8px 10px; background: var(--bg-2); border-radius: 2px;
}

/* --- Деловая программа ------------------------------------------------------------- */
.biz-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.biz {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 240px); gap: 20px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.biz time { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .04em; }
.biz b { display: block; font-size: 17px; margin-bottom: 4px; }
.biz span { font-size: 14px; color: var(--text-dim); }
/* Место — это теперь полноценный адрес зала, а не короткая пометка: переносим
   по словам, иначе длинная строка растягивала страницу на телефоне. */
.biz em { font-style: normal; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text-mute); }

/* --- Церемонии ---------------------------------------------------------------------- */
.ceremonies { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ceremony { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--panel); padding: 26px; }
.ceremony h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.ceremony__meta { font-family: var(--mono); font-size: 12px; color: var(--blue); margin: 0 0 12px; }
.ceremony p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* --- Документы ---------------------------------------------------------------------- */
.doc-section + .doc-section { margin-top: clamp(48px, 7vw, 80px); }
.doc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.doc-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); padding: 24px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.doc-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.doc-card__icon { width: 28px; height: 28px; color: var(--green-br); margin-bottom: 6px; }
.doc-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.doc-card b { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.doc-card__d { font-size: 14px; color: var(--text-dim); }
.doc-card em {
  font-style: normal; margin-top: auto; padding-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-mute);
}

/* --- Партнёрские пакеты --------------------------------------------------------------- */
.packages__more { margin-top: 22px; }
.packages { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.package {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.package--accent { border-color: var(--accent); box-shadow: var(--shadow); }
.package__badge {
  position: absolute; top: -11px; left: 24px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}
.package h3 { margin: 0; font-size: 20px; font-weight: 800; }
.package > p { margin: 0; font-size: 15px; color: var(--text-dim); }
.package ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.package li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--text-dim); }
.package li::before { content: '✓'; color: var(--green-br); font-family: var(--mono); font-size: 12px; flex: none; }
.package .btn { margin-top: auto; }

/* --- Фильтр по тегам -------------------------------------------------------------------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter__btn {
  padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 100px;
  background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--text-dim);
  transition: border-color .16s, color .16s, background .16s;
}
.filter__btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.filter__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-count { font-family: var(--mono); font-size: 12px; color: var(--text-mute); margin: 0 0 28px; }

/* --- Список новостей --------------------------------------------------------------------- */
.news-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.news-item {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); padding: 26px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.news-item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.news-item__meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.news-item h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.28; }
.news-item p { margin: 0; font-size: 15px; color: var(--text-dim); }

/* --- Страница новости ---------------------------------------------------------------------- */
/* Колонка статьи выключена влево — как заголовок и хлебные крошки над ней */
.article { max-width: 800px; margin-inline: 0; }
.article__meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--text-mute); margin-bottom: 16px; }
.article__body p { margin: 0 0 20px; color: var(--text-dim); font-size: 17px; line-height: 1.7; }
.article__back { margin-top: 36px; }

/* --- Фотобанк ------------------------------------------------------------------------------- */
.albums { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.album {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.album:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.album__cover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-2); }
.album__cover svg { width: 100%; height: 100%; display: block; }
.album__cover rect { fill: var(--bg-3); }
.album__cover circle { fill: rgba(41, 70, 209, .30); }
.album__cover path { fill: rgba(7, 189, 137, .22); }
.album__cover em {
  position: absolute; right: 10px; bottom: 8px;
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.album__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.album__body b { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.album__count { font-family: var(--mono); font-size: 11px; color: var(--blue); letter-spacing: .08em; }

/* --- Контакты ---------------------------------------------------------------------------------- */
.contact-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.contact-card { display: flex; flex-direction: column; }
.contact-card .btn { margin-top: auto; align-self: flex-start; }
.contact-card h3 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.contact-card__org { margin: 0 0 18px; color: var(--text-dim); font-size: 15px; }
.contact-card dl { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14.5px; }
.contact-card dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); padding-top: 3px; }
.contact-card dd { margin: 0; color: var(--text-dim); }
.contact-card dd a:hover { color: var(--accent-ink); }

.socials-big { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.social-big {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--panel);
  transition: border-color .18s, transform .18s;
}
.social-big:hover { border-color: var(--accent); transform: translateY(-2px); }
.social-big b { font-size: 17px; }
.social-big span { font-family: var(--mono); font-size: 11px; color: var(--blue); }

.routes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.route { border-left: 2px solid var(--blue); padding-left: 16px; }
.route b { display: block; font-size: 16px; margin-bottom: 4px; }
.route span { font-size: 14.5px; color: var(--text-dim); }

/* ==========================================================================
   Подвал
   ========================================================================== */
.footer {
  background: var(--footer-bg);
  color: var(--on-dark);
  padding: clamp(48px, 6vw, 72px) 0 0;
}
.footer__grid { display: grid; gap: 36px; grid-template-columns: 1.3fr 1fr 1fr .8fr; padding-bottom: 48px; }
.logo--footer { margin-bottom: 12px; }
.logo--footer .logo__mark { width: 42px; }
.logo--footer .logo__word { width: 140px; }
.footer__tagline {
  margin: 0 0 24px; max-width: 260px;
  font-size: 13.5px; line-height: 1.45; color: var(--on-dark-dim);
}
.footer__col h4 { font-size: 15px; margin: 0 0 14px; font-weight: 800; }
.footer__col p { margin: 0 0 7px; font-size: 14.5px; color: var(--on-dark-dim); }
.footer__col a:hover { color: var(--accent-2); }
.footer__col .hint { margin-top: 10px; color: rgba(255, 255, 255, .45); }
.footer__socials-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-dim); margin: 0 0 10px;
}
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a {
  padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r);
  font-family: var(--mono); font-size: 12px; color: var(--on-dark-dim);
  transition: border-color .16s, color .16s;
}
.socials a:hover { border-color: var(--accent); color: var(--accent-2); }

.footer__nav { display: flex; flex-direction: column; gap: 8px; }
.footer__nav a { font-size: 14.5px; color: var(--on-dark-dim); }

.footer__bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; color: rgba(255, 255, 255, .45);
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--accent-2); }

/* Регистрация закрыта (галочка «Регистрация открыта» в админке снята):
   прячем все кнопки, открывающие форму, и подпись под кнопкой на главной. */
.no-registration [data-register],
.no-registration .hero__note { display: none !important; }

/* ==========================================================================
   Модальные окна
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(13, 27, 42, .55); backdrop-filter: blur(6px); }
.modal__box {
  position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  animation: pop .22s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 30px 70px -30px rgba(13, 27, 42, .6);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; font-size: 24px; line-height: 1;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; color: var(--text-mute);
}
.modal__close:hover { border-color: var(--accent); color: var(--accent-ink); }
.modal__title { font-size: 24px; margin: 0 0 10px; }
.form { margin-top: 20px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-dim); margin-bottom: 16px; cursor: pointer; }
.check span { line-height: 1.45; }
.check a { color: var(--accent-ink); text-decoration: underline; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.form__ok { margin: 14px 0 0; font-size: 14px; color: var(--green); font-family: var(--mono); text-align: center; }

/* --- Появление при скролле ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-desktop a { padding: 9px 9px; font-size: 14px; }
}

@media (max-width: 1080px) {
  .nav-desktop { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 420px; }
  .calc, .about, .venue, .two-col { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .qbar { grid-template-columns: 140px 1fr 40px; }
  .biz { grid-template-columns: 130px 1fr; }
  .biz em { grid-column: 2; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .header__inner { min-height: 64px; gap: 10px; }

  /* На телефоне из шапки убираем кнопку регистрации: она дублируется в меню
     под бургером и большой кнопкой на первом экране. Кнопка версии для
     слабовидящих остаётся — для государственного сайта она важнее.
     Размер логотипа задан выше через clamp: ужимать его здесь нельзя,
     иначе дескриптор становится нечитаемым. */
  .header__actions .btn--accent { display: none; }
  .countdown { gap: 12px; }
  .countdown__units { gap: 6px; flex-wrap: wrap; }
  .countdown__units span { padding: 4px 9px; }
  .venue__facts, .facts-grid { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .calc__result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qbar { grid-template-columns: 1fr; gap: 4px; }
  .qbar span:last-child { text-align: left; }
  .modal { padding: 12px; align-items: start; }
  .modal__box { margin-top: 20px; }
  .biz { grid-template-columns: 1fr; gap: 6px; }
  .biz em { grid-column: 1; }
  .contact-card dl { grid-template-columns: 1fr; gap: 2px 0; }
  .contact-card dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }

  /* Ленты — исключение из правила выше: они продолжают ехать, иначе
     показывали бы только часть логотипов и хештегов. Остановить их можно
     кнопкой на самой ленте — этого и требует стандарт доступности. */
  .founders-track,
  .marquee__track {
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   Сведения об операторе ПДн в подвале
   ========================================================================== */
.footer__operator {
  padding-bottom: 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 28px;
  max-width: 760px;
}
.footer__operator h4 { font-size: 15px; margin: 0 0 12px; font-weight: 800; }
.footer__operator p { margin: 0 0 6px; font-size: 14px; color: var(--on-dark-dim); }
.footer__operator .hint { margin-top: 10px; color: rgba(255, 255, 255, .45); }
.footer__operator a { text-decoration: underline; }

/* ==========================================================================
   Уведомление об использовании cookie
   ========================================================================== */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 115;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -12px 40px -20px rgba(15, 40, 80, .5);
}
.cookie__inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-block: 18px;
}
.cookie__text { margin: 0; flex: 1 1 460px; font-size: 14.5px; color: var(--text-dim); line-height: 1.5; }
.cookie__text a { color: var(--accent-ink); text-decoration: underline; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .cookie__inner { gap: 14px; }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1; }
}

/* ==========================================================================
   Юридические страницы: политика и согласие
   ========================================================================== */
.legal { max-width: 800px; margin-inline: 0; }
.legal__warning {
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  background: rgba(41, 70, 209, .06);
  padding: 18px 22px;
  margin-bottom: 32px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
}
.legal__warning b { color: var(--text); }
.legal__meta { margin-bottom: 28px; }
.legal__section + .legal__section { margin-top: 34px; }
.legal__section h2 {
  font-size: 21px; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 12px;
}
.legal__section p { margin: 0 0 12px; color: var(--text-dim); font-size: 16px; line-height: 1.65; }

/* ==========================================================================
   ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ (БВИ)
   ГОСТ Р 52872-2019, ориентир по контрасту и управлению — WCAG 2.1 AA.
   Режим включается атрибутами на <html> из assets/js/a11y.js.
   ========================================================================== */

/* --- кнопка включения в шапке ------------------------------------------- */
.btn-bvi {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-dim);
  transition: border-color .16s, color .16s;
}
.btn-bvi:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-bvi svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Подпись прячем всегда: ширина шапки ограничена макетом (1160px) и не растёт
   вместе с экраном, поэтому на мониторе от 1600px надпись отжимала меню и
   «О Конкурсе» разваливалось на две строки. Название кнопки читает
   вспомогательная техника — оно в aria-label и в title. */
.btn-bvi span { display: none; white-space: nowrap; }

/* --- панель настроек ----------------------------------------------------- */
.bvi {
  position: relative; z-index: 101;
  background: var(--bg);
  border-bottom: 2px solid var(--text);
}
.bvi__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
  padding-block: 12px;
}
.bvi__group { display: flex; align-items: center; gap: 10px; }
.bvi__group--end { margin-left: auto; }
.bvi__label { font-size: 14px; font-weight: 700; }
.bvi__row { display: flex; gap: 6px; }

.bvi__btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 2px solid currentColor; border-radius: 3px;
  background: transparent; cursor: pointer;
  font-weight: 700; line-height: 1;
}
.bvi__btn[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: 2px; }
.bvi__btn--size-1 { font-size: 14px; }
.bvi__btn--size-2 { font-size: 19px; }
.bvi__btn--size-3 { font-size: 25px; }

/* образцы цветовых схем */
.bvi__btn--scheme-bw    { background: #fff;     color: #000; }
.bvi__btn--scheme-wb    { background: #000;     color: #fff; }
.bvi__btn--scheme-blue  { background: #9dd1ff;  color: #063462; }
.bvi__btn--scheme-beige { background: #f7f3d6;  color: #4d4b43; }
.bvi__btn--scheme-green { background: #3b2716;  color: #a9e44d; }
.bvi__btn[class*="scheme-"]::after { content: 'A'; font-size: 17px; }

.bvi__exit {
  height: 40px; padding: 0 18px;
  border: 2px solid currentColor; border-radius: 3px;
  background: transparent; cursor: pointer; font-weight: 700;
}
.bvi__exit:hover, .bvi__btn:hover { outline: 2px solid currentColor; outline-offset: 2px; }

/* ==========================================================================
   Сам режим: перекрашиваем через переменные, гасим всё декоративное
   ========================================================================== */
html[data-bvi="on"] body {
  background-image: none;
  background: var(--bg);
  color: var(--text);
}

/* Тени, скругления, полупрозрачность и подложки в БВИ не нужны */
html[data-bvi="on"] * {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  animation: none !important;
  transition: none !important;
}

html[data-bvi="on"] .hero::before,
html[data-bvi="on"] .hero__caption { display: none; }

html[data-bvi="on"] .hero__frame,
html[data-bvi="on"] .plan,
html[data-bvi="on"] .section--partner,
html[data-bvi="on"] .album__cover { background-image: none; background: var(--bg); }

/* Границы и текст — одним цветом, никаких полутонов */
html[data-bvi="on"] {
  --bg-2: var(--bg);
  --bg-3: var(--bg);
  --panel: var(--bg);
  --footer-bg: var(--bg);
  --text-dim: var(--text);
  --text-mute: var(--text);
  --on-dark: var(--text);
  --on-dark-dim: var(--text);
  --line: currentColor;
  --line-2: currentColor;
  --grid: transparent;
  /* фирменный узор в версии для слабовидящих не рисуем */
  --dot: transparent;
  --dot-lg: transparent;
  --blue: var(--text);
  --blue-soft: transparent;
  --green: var(--text);
  --green-br: var(--text);
  /* фирменный градиент в БВИ разворачиваем в сплошной цвет текста:
     полутона и цветные переходы здесь запрещены */
  --brand-gradient: none;
  --brand-gradient-x: none;
  --accent: var(--text);
  --accent-ink: var(--text);
  --accent-2: var(--text);
  --shadow: none;
  --shadow-sm: none;
}

html[data-bvi="on"] .header,
html[data-bvi="on"] .footer,
html[data-bvi="on"] .founders-bar,
html[data-bvi="on"] .pcb,
html[data-bvi="on"] .section--alt,
html[data-bvi="on"] .page-hero,
html[data-bvi="on"] .marquee { background: var(--bg); color: var(--text); }

html[data-bvi="on"] .btn,
html[data-bvi="on"] .filter__btn,
html[data-bvi="on"] .socials a,
html[data-bvi="on"] .field select,
html[data-bvi="on"] .field input,
html[data-bvi="on"] .field textarea,
html[data-bvi="on"] .quiz__answers button {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 2px solid currentColor !important;
}
html[data-bvi="on"] .btn:hover,
html[data-bvi="on"] .filter__btn:hover { outline: 2px solid currentColor; outline-offset: 2px; transform: none; }

html[data-bvi="on"] a { text-decoration: underline; }
html[data-bvi="on"] .btn, html[data-bvi="on"] .logo { text-decoration: none; }

html[data-bvi="on"] .panel,
html[data-bvi="on"] .track,
html[data-bvi="on"] .card-draw,
html[data-bvi="on"] .stage,
html[data-bvi="on"] .comp,
html[data-bvi="on"] .ceremony,
html[data-bvi="on"] .doc-card,
html[data-bvi="on"] .package,
html[data-bvi="on"] .news-item,
html[data-bvi="on"] .news-card,
html[data-bvi="on"] .album,
html[data-bvi="on"] .day,
html[data-bvi="on"] .social-big,
html[data-bvi="on"] .logo-cell,
html[data-bvi="on"] .stat {
  background: var(--bg); border: 2px solid currentColor;
}

/* При крупном шрифте шапка и лента учредителей не помещаются в строку —
   разрешаем перенос вместо горизонтальной прокрутки */
html[data-bvi="on"] .header__inner { flex-wrap: wrap; padding-block: 10px; }
html[data-bvi="on"] .nav-desktop { order: 3; width: 100%; flex-wrap: wrap; margin-left: 0; }

html[data-bvi="on"] .founders-track { width: auto; flex-wrap: wrap; }
html[data-bvi="on"] .founders-set { flex-wrap: wrap; gap: 10px 28px; padding-right: 0; }
html[data-bvi="on"] .founders-set[aria-hidden="true"] { display: none; }

html[data-bvi="on"] .marquee__track { width: auto; flex-wrap: wrap; }
html[data-bvi="on"] .pcb__track { min-width: 0; flex-wrap: wrap; gap: 20px; }
html[data-bvi="on"] .pcb__node { flex: 1 1 200px; }

/* Появление по скроллу в БВИ отключаем: контент виден сразу */
html[data-bvi="on"] .reveal { opacity: 1 !important; transform: none !important; }

/* --- цветовые схемы ------------------------------------------------------- */
html[data-bvi-scheme="bw"]    { --bg: #ffffff; --text: #000000; }
html[data-bvi-scheme="wb"]    { --bg: #000000; --text: #ffffff; }
html[data-bvi-scheme="blue"]  { --bg: #9dd1ff; --text: #063462; }
html[data-bvi-scheme="beige"] { --bg: #f7f3d6; --text: #4d4b43; }
html[data-bvi-scheme="green"] { --bg: #3b2716; --text: #a9e44d; }

/* --- масштаб -------------------------------------------------------------- */
/* zoom меняет размер всей вёрстки пропорционально — так же, как масштаб в
   браузере, и не требует переписывать сотни px-значений в компонентах */
html[data-bvi-size="1"] body { zoom: 1; }
html[data-bvi-size="2"] body { zoom: 1.25; }
html[data-bvi-size="3"] body { zoom: 1.6; }
html[data-bvi="on"] .bvi { zoom: 1; }

/* --- межбуквенный интервал ------------------------------------------------- */
html[data-bvi-spacing="mid"] body { letter-spacing: .08em; word-spacing: .12em; }
html[data-bvi-spacing="big"] body { letter-spacing: .16em; word-spacing: .24em; }

/* --- изображения ----------------------------------------------------------- */
html[data-bvi-images="gray"] img,
html[data-bvi-images="gray"] .track__icon,
html[data-bvi-images="gray"] .album__cover { filter: grayscale(1) contrast(1.2); }
html[data-bvi-images="off"] img:not(.logo__mark):not(.logo__word),
html[data-bvi-images="off"] .album__cover,
html[data-bvi-images="off"] .hero__visual { display: none; }

/* Панель БВИ на узких экранах */
@media (max-width: 900px) {
  .bvi__inner { gap: 12px 20px; }
  .bvi__group--end { margin-left: 0; width: 100%; }
  .bvi__exit { width: 100%; }
}

/* ==========================================================================
   Подсказка у кнопки регистрации
   Всплывает один раз под шапкой, закрывается крестиком.
   ========================================================================== */
.reg-hint {
  /* Живёт внутри кнопки, поэтому сбрасываем унаследованное от неё:
     без этого текст не переносится и идёт жирным по центру. */
  white-space: normal; text-align: left; font-weight: 400; cursor: default;
  position: absolute; top: calc(100% + 12px); right: 0;
  display: flex; align-items: flex-start; gap: 12px;
  width: 320px; max-width: calc(100vw - 32px); padding: 13px 14px 13px 16px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 16px 40px -22px rgba(15, 40, 80, .55);
  font-size: 14px; line-height: 1.45; color: var(--text-dim);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.reg-hint.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* уголок, направленный на кнопку в шапке */
.reg-hint::before {
  content: ''; position: absolute; top: -6px; right: var(--arrow-right, 38px);
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--panel);
  border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
}

.reg-hint__close {
  flex: none; width: 22px; height: 22px; margin: -2px -4px 0 0;
  background: transparent; border: 0; border-radius: 3px;
  font-size: 19px; line-height: 1; color: var(--text-mute); cursor: pointer;
}
.reg-hint__close:hover { color: var(--accent-ink); }

html[data-bvi="on"] .reg-hint { box-shadow: none; border: 2px solid currentColor; }

/* --------------------------------------------------------------------------
   Узкие экраны: страховка от горизонтальной прокрутки
   -------------------------------------------------------------------------- */

/* У кнопок стоит nowrap ради аккуратной формы, но длинные надписи
   («Зарегистрироваться как посетитель») при 320px вылезали за экран. */
@media (max-width: 430px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Мобильные: размер областей нажатия (ГОСТ Р 52872-2019 / WCAG 2.5.8 — от 24px)
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .footer__col a,
  .footer__legal a,
  .contact-card dd a,
  .article__back a,
  .vuz-city a,
  .breadcrumbs a {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* --------------------------------------------------------------------------
   Телефон: шкала этапов целиком, без прокрутки
   -------------------------------------------------------------------------- */

/* В строку четыре этапа не помещаются — дорожка уезжала в горизонтальную
   прокрутку, и посетитель видел два этапа из четырёх, не догадываясь об
   остальных. Складываем её в сетку 2×2: точка слева от подписи.
   Порог 900px: дорожке нужно 780px плюс поля макета (до 40px с каждой
   стороны), поэтому на 800–880px «Финал Конкурса» ещё срезался справа. */
@media (max-width: 900px) {
  .pcb { padding: 18px 0 16px; }
  .pcb__scroll { overflow-x: visible; padding: 0; }
  .pcb__track {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    align-items: start;
  }
  .pcb__node { flex: none; padding: 0 0 0 24px; text-align: left; }
  /* пунктир между соседями в сетке показывал бы связь, которой нет */
  .pcb__node::before { display: none; }
  .pcb__pad {
    top: 2px; left: 0; transform: none;
    width: 14px; height: 14px;
  }
  .pcb__node.is-final .pcb__pad { top: 1px; width: 16px; height: 16px; }
  .pcb__date { font-size: 10px; letter-spacing: .06em; }
  .pcb__label { display: block; font-size: 12px; line-height: 1.25; }
}

/* --------------------------------------------------------------------------
   Схема площадки: расшифровка номеров
   -------------------------------------------------------------------------- */

.zone { overflow: hidden; }
.zone span { overflow-wrap: break-word; }

/* Расшифровка нужна на телефоне, где в зонах остаются только номера. */
.plan-legend {
  display: none;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  gap: 6px 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.plan-legend li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline; }
.plan-legend b { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.plan-legend span { font-size: 12.5px; color: var(--text-dim); line-height: 1.3; }

@media (max-width: 620px) {
  /* В зоне остаётся только номер: название в 90 px по ширине не помещается. */
  .zone span { display: none; }
  .zone { justify-content: center; align-items: center; padding: 4px; }
  .zone b { font-size: 13px; }
  .plan-legend { display: grid; }
}

/* --------------------------------------------------------------------------
   Яндекс Карты
   -------------------------------------------------------------------------- */

.ymap {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.ymap--compact { aspect-ratio: 4 / 3; }
.ymap__frame { display: block; width: 100%; height: 100%; border: 0; }

/* Заглушка до согласия: карта грузится только по нажатию, чтобы cookie
   Яндекса не появлялись у посетителя без его ведома. */
.ymap__ask {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 22px; text-align: center;
  background:
    radial-gradient(circle, var(--dot) 2.6px, transparent 2.7px),
    var(--bg-2);
}
.ymap__ask p { margin: 0; max-width: 460px; font-size: 13.5px; color: var(--text-dim); }

@media (max-width: 620px) {
  .ymap { aspect-ratio: 3 / 4; }
  .ymap--compact { aspect-ratio: 1 / 1; }
}

/* В версии для слабовидящих внешние карты не показываем: они не поддаются
   увеличению шрифта и смене цветовой схемы. */
html[data-bvi="on"] .ymap { display: none; }

/* --------------------------------------------------------------------------
   Версия для слабовидящих: логотипы в монохроме
   -------------------------------------------------------------------------- */

/* Цветные логотипы — фирменный знак, эмблемы учредителей и партнёров — на
   чёрном и коричневом фоне превращались в нечитаемые пятна, а тёмно-синий
   дескриптор пропадал совсем. Переводим их в одну краску: на светлых схемах
   в чёрную, на тёмных — в белую. Полупрозрачность тоже снимаем. */
html[data-bvi="on"] .founders-set__logo img,
html[data-bvi="on"] .logo-cell__img { opacity: 1; }

html[data-bvi="on"][data-bvi-scheme="bw"] .logo img,
html[data-bvi="on"][data-bvi-scheme="bw"] .founders-set__logo img,
html[data-bvi="on"][data-bvi-scheme="bw"] .logo-cell__img,
html[data-bvi="on"][data-bvi-scheme="blue"] .logo img,
html[data-bvi="on"][data-bvi-scheme="blue"] .founders-set__logo img,
html[data-bvi="on"][data-bvi-scheme="blue"] .logo-cell__img,
html[data-bvi="on"][data-bvi-scheme="beige"] .logo img,
html[data-bvi="on"][data-bvi-scheme="beige"] .founders-set__logo img,
html[data-bvi="on"][data-bvi-scheme="beige"] .logo-cell__img {
  filter: brightness(0);
}

html[data-bvi="on"][data-bvi-scheme="wb"] .logo img,
html[data-bvi="on"][data-bvi-scheme="wb"] .founders-set__logo img,
html[data-bvi="on"][data-bvi-scheme="wb"] .logo-cell__img,
html[data-bvi="on"][data-bvi-scheme="green"] .logo img,
html[data-bvi="on"][data-bvi-scheme="green"] .founders-set__logo img,
html[data-bvi="on"][data-bvi-scheme="green"] .logo-cell__img {
  filter: brightness(0) invert(1);
}

/* Знак «Республика Мордовия» пока текстовый: в монохроме его штриховка
   тоже должна следовать цвету схемы. */
html[data-bvi="on"] .founders-track span::before {
  border-color: currentColor;
  background: none;
}

/* Ссылка на первоисточник под текстом новости */
.article__source {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-mute);
}
.article__source a { color: var(--blue); text-decoration: underline; }

/* Герб и вертикальные знаки в ленте учредителей выше горизонтальных: при
   единой высоте 26px герб превращался в неразличимое пятнышко. */
.founders-set__logo img[src*="mordovia"] { height: 34px; }

/* --------------------------------------------------------------------------
   Фотографии в новостях
   -------------------------------------------------------------------------- */

/* Карточка с фотографией: снимок занимает всю ширину карточки, поэтому
   внутренние отступы переносим на содержимое под ним. */
.news-card--photo,
.news-item--photo { padding: 0; overflow: hidden; }

.news-card__photo,
.news-item__photo {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.news-card__photo img,
.news-item__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.news-card--photo:hover .news-card__photo img,
.news-item--photo:hover .news-item__photo img { transform: scale(1.03); }

/* Внутренние поля карточки с фотографией */
.news-card--photo > *:not(.news-card__photo) { margin-inline: 24px; }
.news-card--photo > .news-card__meta { margin-top: 20px; }
.news-card--photo > .news-card__more { margin-bottom: 22px; }

.news-item--photo > *:not(.news-item__photo) { margin-inline: 26px; }
.news-item--photo > .news-item__meta { margin-top: 22px; }
.news-item--photo > .news-card__more { margin-bottom: 24px; }

/* Фотография в самом материале */
.article__photo {
  margin: 0 0 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.article__photo img { display: block; width: 100%; height: auto; }

/* На узком экране текст занимает всю ширину, и узор оказывается прямо под
   строками — там он должен быть едва различим. */
@media (max-width: 760px) {
  body {
    --dot: rgba(41, 70, 209, .1);
    --dot-lg: rgba(41, 70, 209, .18);
  }
}

/* Карта на API Яндекса занимает контейнер целиком */
.ymap__api { width: 100%; height: 100%; }

/* Название вуза — ссылка на карту: подчёркиваем только при наведении,
   чтобы список не выглядел как сплошное поле ссылок. */
.vuz-city a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.vuz-city a:hover,
.vuz-city a:focus-visible { color: var(--accent-ink); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   План площадки с расположением компетенций
   -------------------------------------------------------------------------- */

.scheme { margin: 0 0 12px; }

.scheme__plan {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
}
.scheme__plan img { display: block; width: 100%; height: auto; }

/* Номер зоны на плане */
.scheme__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 40, 80, .35);
  transition: transform .16s ease;
}
.scheme__pin:hover,
.scheme__pin:focus-visible { transform: translate(-50%, -50%) scale(1.15); z-index: 3; }

/* Подсказка с названием компетенции */
.scheme__tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 200px; padding: 6px 10px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.3;
  text-align: center; box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
  z-index: 4;
}
.scheme__pin:hover .scheme__tip,
.scheme__pin:focus .scheme__tip,
.scheme__pin:focus-visible .scheme__tip { opacity: 1; }

/* Расшифровка номеров под планом */
.scheme__legend {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 5px 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.scheme__legend li { display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: baseline; }
.scheme__legend b { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); }
.scheme__legend span { font-size: 12.5px; color: var(--text-dim); line-height: 1.3; }

.scheme__empty {
  margin: 0; padding: 26px; text-align: center;
  font-size: 13.5px; color: var(--text-mute);
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2);
}


/* --------------------------------------------------------------------------
   Кнопка остановки бегущих лент
   -------------------------------------------------------------------------- */

/* Движущийся блок обязан иметь способ его остановить (ГОСТ Р 52872-2019,
   WCAG 2.2.2). Кнопка небольшая, у правого края ленты. */
/* Под кнопкой лента плавно уходит в фон — иначе логотип проезжает прямо
   под ней и обе вещи читаются хуже. */
.founders-bar::after,
.marquee::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 58px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg-3) 62%);
}
.marquee::after { background: linear-gradient(90deg, transparent, var(--accent) 62%); }

.strip-stop {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  z-index: 4;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--bg); color: var(--text-dim);
  cursor: pointer; opacity: .8;
  transition: opacity .16s ease, border-color .16s ease, color .16s ease;
}
.strip-stop:hover,
.strip-stop:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent-ink); }
.strip-stop svg { width: 11px; height: 11px; fill: currentColor; }

/* На синей ленте с хештегами кнопка светлая */
.marquee .strip-stop {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.marquee .strip-stop:hover,
.marquee .strip-stop:focus-visible { background: rgba(255, 255, 255, .3); border-color: #fff; color: #fff; }

/* Остановленная лента */
.is-stopped .founders-track,
.is-stopped .marquee__track { animation-play-state: paused !important; }

@media (max-width: 620px) {
  .strip-stop { width: 22px; height: 22px; right: 5px; }
  .strip-stop svg { width: 9px; height: 9px; }
  .founders-bar::after, .marquee::after { width: 44px; }
}

/* В версии для слабовидящих затемнение у края лишнее */
html[data-bvi="on"] .founders-bar::after,
html[data-bvi="on"] .marquee::after { display: none; }


/* Компетенция, которая проходит не на арене */
.scheme__legend--apart {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.scheme__legend--apart b { color: var(--text-mute); }