/* ============================================================================================
   UMEY — design code публичной части. Тёмная тема.
   Один файл на главную, тесты, задания компаний, вузы и студентов, работодателей и рейтинг.

   Три правила, из которых выведено всё остальное.

   1. ОДНО ТЁМНОЕ ПОЛОТНО. Светлых секций нет вовсе — значит нет и перехода «тёмный блок → белый
      блок», который ломал страницу пополам. Глубину даёт не смена цвета фона, а поднятые
      поверхности: карточка светлее полотна на несколько процентов, панель — ещё чуть светлее.
      Разделы различаются смыслом и ритмом, а не цветом.

   2. РАЗМЕР — ИЗ ШКАЛЫ, А НЕ НА ГЛАЗ. Типографика, отступы, радиусы, глубина и длительности живут
      токенами ниже. У карточки нет своего padding, у секции — своего margin.

   3. НА ТЁМНОМ ГЛУБИНА ДЕЛАЕТСЯ СВЕТОМ, А НЕ ТЕНЬЮ. Тень на почти чёрном не видна. Поэтому у
      поверхности есть световая кромка сверху (inset-блик) и рамка из белого с малой
      прозрачностью, а настоящая тень остаётся только у того, что можно нажать.

   Карточка — не единственный способ показать содержимое: для перечислений есть строки с волосяной
   линией (`pub-rows`), для списков — галочки (`pub-checks`), для чисел — полоса без рамок
   (`pub-stats`), для акцента — поднятая панель (`pub-panel`).
   ============================================================================================ */

:root {
  /* --- цвет: тёмная база, сине-фиолетовые акценты ------------------------------------------- */
  --pub-base: #070a14;         /* полотно страницы */
  --pub-base-2: #0a0e1c;
  --pub-raise: #0f1526;        /* карточка: поднятая поверхность */
  --pub-raise-2: #141b30;      /* панель: ещё одна ступень вверх */
  --pub-line: rgba(255, 255, 255, .09);
  --pub-line-strong: rgba(255, 255, 255, .17);
  --pub-text: #f2f4ff;
  --pub-text-2: rgba(226, 231, 252, .74);   /* вторичный текст: ~9:1 на карточке */
  --pub-text-3: rgba(222, 228, 250, .56);   /* подписи: ~6:1, ниже не опускаемся */
  --pub-accent: #b9acff;       /* акцентный текст и подписи разделов */
  --pub-blue: #4b7bff;
  --pub-violet: #8a6cff;
  --pub-brand: linear-gradient(120deg, var(--pub-blue), var(--pub-violet));
  --pub-ok: #4fd6a8;

  /* --- типографика: одна лестница ----------------------------------------------------------- */
  --pub-display: clamp(38px, 5.6vw, 72px);
  --pub-h2: clamp(28px, 3.6vw, 44px);
  --pub-h3: clamp(20px, 1.5vw, 23px);
  --pub-lead: clamp(17px, 1.4vw, 20px);
  --pub-body: 17px;
  --pub-secondary: 16px;
  --pub-caption: 14px;
  --pub-eyebrow: 13px;

  /* --- отступы: одна шкала ------------------------------------------------------------------ */
  --pub-s1: 4px;
  --pub-s2: 8px;
  --pub-s3: 12px;
  --pub-s4: 16px;
  --pub-s5: 24px;
  --pub-s6: 32px;
  --pub-s7: 48px;
  --pub-s8: 64px;
  --pub-s9: 96px;
  --pub-section: clamp(60px, 7vw, 100px);
  --pub-page: 1200px;
  --pub-gutter: 24px;

  /* --- форма и глубина ---------------------------------------------------------------------- */
  --pub-r1: 10px;
  --pub-r2: 14px;
  --pub-r3: 20px;
  --pub-r4: 28px;
  --pub-pill: 999px;
  --pub-el1: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4);
  --pub-el2: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(138, 108, 255, .18);

  /* --- движение ----------------------------------------------------------------------------- */
  --pub-fast: 150ms;
  --pub-mid: 200ms;
  --pub-slow: 250ms;
  --pub-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================================================
   Полотно
   ============================================================================================ */

body.pub {
  margin: 0;
  color: var(--pub-text);
  font-size: var(--pub-body);
  line-height: 1.65;
  /* Одно полотно на всю страницу: тёмная база и четыре мягких свечения в фирменных синем и
     фиолетовом, расставленные по высоте. Страница не выглядит плоской и нигде не обрывается —
     менять цвет фона на светлый больше незачем. */
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(138, 108, 255, .28), transparent 66%),
    radial-gradient(900px 540px at 2% 4%, rgba(75, 123, 255, .22), transparent 64%),
    radial-gradient(1000px 700px at 96% 42%, rgba(93, 91, 255, .12), transparent 66%),
    radial-gradient(900px 640px at -8% 78%, rgba(75, 123, 255, .1), transparent 62%),
    var(--pub-base);
  background-attachment: fixed;
}

/* Верх страницы: та же база, чуть больше света и волосяная сетка, гаснущая вниз. Границы внизу
   нет и быть не может — цвет там тот же, что у полотна. */
.pub-top { position: relative; }
.pub-top::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 88px 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 86%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 86%);
}

.pub-shell {
  width: min(var(--pub-page), calc(100% - var(--pub-gutter) * 2));
  margin: 0 auto;
}

.pub-skip { position: absolute; left: -9999px; }
.pub-skip:focus {
  left: var(--pub-s4); top: var(--pub-s3); z-index: 90;
  padding: var(--pub-s3) var(--pub-s5);
  border-radius: var(--pub-r2);
  color: #0a0e1c; background: var(--pub-accent);
}

/* ============================================================================================
   Шапка: одна и та же на всех публичных страницах
   ============================================================================================ */

.pub-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(7, 10, 20, .82);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--pub-line);
}
.pub-header-inner {
  display: flex; align-items: center; gap: var(--pub-s5);
  min-height: 76px; padding: var(--pub-s3) 0;
}
.pub-brand {
  display: inline-flex; align-items: center; gap: var(--pub-s3);
  color: var(--pub-text); font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none;
}
.pub-brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--pub-r1); background: var(--pub-brand);
  box-shadow: 0 8px 22px rgba(102, 96, 255, .35);
}
.pub-brand-mark svg { width: 20px; height: 20px; }
/* Меню — часть дизайна, а не строчка ссылок: пункты стоят на своей подложке, у активного она
   видна сразу. Скриптов на публичных страницах нет, поэтому меню не прячется за кнопку. */
.pub-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pub-s1);
  margin-left: auto; padding: var(--pub-s1);
  border-radius: var(--pub-pill); background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pub-nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--pub-s4);
  border-radius: var(--pub-pill);
  color: var(--pub-text-2); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: color var(--pub-fast) var(--pub-ease), background-color var(--pub-fast) var(--pub-ease);
}
.pub-nav a:hover { color: var(--pub-text); background: rgba(255, 255, 255, .07); }
.pub-nav a[aria-current="page"] {
  color: var(--pub-text); background: rgba(138, 108, 255, .26);
  box-shadow: inset 0 0 0 1px rgba(170, 150, 255, .42);
}
.pub-nav a.pub-nav-cta {
  margin-left: var(--pub-s2); color: #fff; background: var(--pub-brand);
  box-shadow: 0 8px 22px rgba(92, 96, 245, .4);
}
.pub-nav a.pub-nav-cta:hover { filter: brightness(1.08); }

/* ============================================================================================
   Первый экран
   ============================================================================================ */

.pub-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
.pub-eyebrow {
  display: inline-flex; align-items: center; gap: var(--pub-s2);
  margin: 0 0 var(--pub-s5);
  color: var(--pub-accent); font-size: var(--pub-eyebrow); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pub-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pub-brand); box-shadow: 0 0 0 5px rgba(138, 108, 255, .16);
}
.pub-hero h1 {
  max-width: 19ch; margin: 0;
  font-size: var(--pub-display); line-height: 1.03; letter-spacing: -.04em; font-weight: 700;
}
.pub-hero h1 em { color: var(--pub-accent); font-style: normal; }
.pub-lead {
  max-width: 58ch; margin: var(--pub-s5) 0 0;
  color: var(--pub-text-2); font-size: var(--pub-lead); line-height: 1.55;
}
.pub-actions { display: flex; flex-wrap: wrap; gap: var(--pub-s3); margin-top: var(--pub-s6); }

/* Числа — полосой без рамок: рамка вокруг каждого числа превращает факт в плашку. */
.pub-stats {
  display: flex; flex-wrap: wrap; gap: var(--pub-s5) var(--pub-s8);
  margin: var(--pub-s7) 0 0; padding: var(--pub-s5) 0 0;
  border-top: 1px solid var(--pub-line);
  list-style: none;
}
.pub-stats li { display: grid; gap: var(--pub-s1); }
.pub-stats strong { font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -.03em; }
.pub-stats span { color: var(--pub-text-3); font-size: var(--pub-caption); }

/* Поднятая поверхность в первом экране: показывает, что человек получит, и даёт экрану опору. */
.pub-float {
  position: relative;
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  padding: var(--pub-s6);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r4);
  background:
    radial-gradient(620px 300px at 88% 0%, rgba(138, 108, 255, .2), transparent 70%),
    var(--pub-raise);
  box-shadow: var(--pub-el1);
}
.pub-float-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--pub-s3); margin-bottom: var(--pub-s5);
}
.pub-float-head p { margin: 0; color: var(--pub-text-3); font-size: var(--pub-caption); }
.pub-float-head strong { font-size: var(--pub-h3); letter-spacing: -.02em; }
.pub-float-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pub-s3); }
.pub-float-cell {
  padding: var(--pub-s4) var(--pub-s5);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r2);
  background: rgba(255, 255, 255, .03);
}
.pub-float-cell b { display: block; font-size: 22px; letter-spacing: -.02em; }
.pub-float-cell span { color: var(--pub-text-3); font-size: var(--pub-caption); }
.pub-float-note { margin: var(--pub-s5) 0 0; color: var(--pub-text-3); font-size: var(--pub-caption); }

/* ============================================================================================
   Кнопки
   ============================================================================================ */

.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pub-s2);
  min-height: 52px; padding: 0 var(--pub-s6);
  border: 1px solid transparent; border-radius: var(--pub-r2);
  font-size: 16px; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: transform var(--pub-mid) var(--pub-ease), box-shadow var(--pub-mid) var(--pub-ease),
              background-color var(--pub-mid) var(--pub-ease), color var(--pub-mid) var(--pub-ease),
              border-color var(--pub-mid) var(--pub-ease);
}
.pub-btn:hover { transform: translateY(-2px); }
.pub-btn-primary { color: #fff; background: var(--pub-brand); box-shadow: 0 14px 34px rgba(92, 96, 245, .4); }
.pub-btn-primary:hover { box-shadow: 0 18px 42px rgba(92, 96, 245, .5); }
.pub-btn-ghost { color: var(--pub-text); border-color: var(--pub-line-strong); background: rgba(255, 255, 255, .05); }
.pub-btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(170, 150, 255, .45); }
.pub-btn-light { color: var(--pub-text); border-color: var(--pub-line-strong); background: rgba(255, 255, 255, .06); }

/* ============================================================================================
   Разделы: смысл различается, цвет — нет
   ============================================================================================ */

.pub-section { padding: var(--pub-section) 0 0; }
.pub-section:last-of-type { padding-bottom: var(--pub-section); }
/* Первый раздел после первого экрана: у героя уже есть нижний отступ, и полный отступ секции
   сверху давал пустую полосу ~230px под числами. */
.pub-top + .pub-section { padding-top: var(--pub-s5); }
.pub-section-head { max-width: 62ch; margin: 0 0 var(--pub-s7); }
.pub-section h2 {
  margin: 0; font-size: var(--pub-h2); line-height: 1.1; letter-spacing: -.03em; font-weight: 700;
}
.pub-section-head p { margin: var(--pub-s4) 0 0; color: var(--pub-text-2); font-size: var(--pub-lead); line-height: 1.55; }

/* Волосяная линия вместо цветной полосы: отделяет, но не разрезает страницу. */
.pub-sep {
  height: 1px; margin: var(--pub-section) 0 0; border: 0;
  background: linear-gradient(90deg, transparent, var(--pub-line-strong) 18%, var(--pub-line-strong) 82%, transparent);
}

/* ============================================================================================
   Карточки — один радиус, одна рамка, одна глубина, один внутренний layout
   ============================================================================================ */

.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pub-s4); }
.pub-grid-wide { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.pub-card {
  /* Строки: шапка, заголовок, описание, плашки, подвал. Описание тянется, остальное стоит на
     своих местах — поэтому подвалы карточек в ряду всегда на одной линии, а «своих» отступов у
     карточки нет вовсе. */
  display: grid; grid-template-rows: auto auto 1fr auto auto; align-content: start;
  /* Шрифт и высота строки — свои, а не от страницы: та же карточка стоит и на tests.html
     (body.pub, 17px/1.65), и на главной (16px/1.55), и должна выглядеть одинаково. */
  font-size: var(--pub-body); line-height: 1.65;
  padding: var(--pub-s6);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r3);
  color: inherit; background: var(--pub-raise); text-decoration: none;
  box-shadow: var(--pub-el1);
}
a.pub-card {
  transition: transform var(--pub-mid) var(--pub-ease), box-shadow var(--pub-mid) var(--pub-ease),
              border-color var(--pub-mid) var(--pub-ease), background-color var(--pub-mid) var(--pub-ease);
}
a.pub-card:hover {
  transform: translateY(-3px); border-color: rgba(170, 150, 255, .4);
  background: var(--pub-raise-2); box-shadow: var(--pub-el2);
}
a.pub-card:focus-visible { border-color: var(--pub-violet); }
.pub-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pub-s4); margin-bottom: var(--pub-s5); }
.pub-card-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--pub-r2); color: #fff; background: var(--pub-brand);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(92, 96, 245, .3);
}
.pub-card-mark.green { background: linear-gradient(145deg, #12876b, #35c79e); box-shadow: 0 10px 24px rgba(30, 160, 128, .28); }
.pub-card-mark.orange { background: linear-gradient(145deg, #c9702a, #ffb45b); box-shadow: 0 10px 24px rgba(190, 120, 50, .28); }
.pub-card-mark.violet { background: linear-gradient(145deg, #6845e3, #a88dff); }
.pub-card-mark.graphite { background: linear-gradient(145deg, #2a3350, #59648a); box-shadow: none; }
/* Заголовок группы направлений стоит прямо в сетке и занимает всю строку: карточки остаются
   одной сеткой (поиск на главной и совпадение с tests.html держатся на этом), а группа начинается
   с новой строки. */
.pub-grid-group {
  grid-column: 1 / -1; margin: var(--pub-s5) 0 0;
  color: var(--pub-accent); font-size: var(--pub-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pub-grid-group:first-child { margin-top: 0; }
/* В каталоге с группами до четырёх колонок: самая большая группа (4) встаёт в одну строку. */
.pub-grid:has(> .pub-grid-group) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pub-card-num { color: var(--pub-text-3); font-size: var(--pub-caption); font-weight: 700; letter-spacing: .08em; }
.pub-card h3 { margin: 0 0 var(--pub-s3); font-size: var(--pub-h3); line-height: 1.28; letter-spacing: -.02em; }
.pub-card p { margin: 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.6; }
.pub-tags { display: flex; flex-wrap: wrap; gap: var(--pub-s2); margin: var(--pub-s5) 0 0; }
.pub-tags span {
  padding: 6px var(--pub-s3); border: 1px solid var(--pub-line); border-radius: var(--pub-r1);
  color: var(--pub-text-2); background: rgba(255, 255, 255, .05);
  font-size: var(--pub-caption); font-weight: 600; line-height: 1.3;
}
.pub-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pub-s4);
  margin-top: var(--pub-s5); padding-top: var(--pub-s4); border-top: 1px solid var(--pub-line);
}
.pub-card-foot strong { color: var(--pub-accent); font-size: var(--pub-secondary); }
.pub-card-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--pub-line-strong); border-radius: 50%; color: var(--pub-text);
  transition: color var(--pub-fast) var(--pub-ease), background-color var(--pub-fast) var(--pub-ease),
              border-color var(--pub-fast) var(--pub-ease);
}
.pub-card-arrow svg { width: 19px; height: 19px; }
a.pub-card:hover .pub-card-arrow { color: #fff; border-color: transparent; background: var(--pub-violet); }

/* ============================================================================================
   Не-карточные способы показать содержимое
   ============================================================================================ */

.pub-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.pub-rows li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--pub-s4);
  padding: var(--pub-s5) 0; border-top: 1px solid var(--pub-line);
  font-size: var(--pub-secondary); line-height: 1.6; color: var(--pub-text-2);
}
.pub-rows li:last-child { border-bottom: 1px solid var(--pub-line); }
.pub-rows li::before {
  content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 3px;
  background: var(--pub-brand);
}
.pub-rows strong { display: block; color: var(--pub-text); font-size: var(--pub-body); }

.pub-checks { display: grid; gap: var(--pub-s3); margin: 0; padding: 0; list-style: none; }
.pub-checks li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--pub-s3);
  font-size: var(--pub-secondary); line-height: 1.6; color: var(--pub-text-2);
}
.pub-checks li::before {
  content: "✓"; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; color: var(--pub-ok); background: rgba(79, 214, 168, .14);
  font-size: 13px; font-weight: 700;
}

.pub-steps { counter-reset: pub-step; display: grid; margin: 0; padding: 0; list-style: none; }
.pub-steps li {
  counter-increment: pub-step;
  display: grid; grid-template-columns: 52px 1fr; gap: var(--pub-s5);
  padding: var(--pub-s6) 0; border-top: 1px solid var(--pub-line);
}
.pub-steps li:last-child { border-bottom: 1px solid var(--pub-line); }
.pub-steps li::before {
  content: counter(pub-step);
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--pub-line); border-radius: var(--pub-r2);
  color: var(--pub-accent); background: rgba(255, 255, 255, .04);
  font-size: 19px; font-weight: 700;
}
.pub-steps strong { display: block; margin-bottom: var(--pub-s2); font-size: var(--pub-h3); letter-spacing: -.015em; color: var(--pub-text); }
.pub-steps p { margin: 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.6; }

/* Панель: ещё одна ступень поднятия для акцента. Не другой цвет секции, а поверхность выше. */
.pub-panel {
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r4);
  background:
    radial-gradient(620px 320px at 84% 8%, rgba(138, 108, 255, .26), transparent 68%),
    var(--pub-raise-2);
  box-shadow: var(--pub-el1);
}
.pub-panel h2, .pub-panel h3 { margin: 0; letter-spacing: -.03em; }
.pub-panel p { color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.6; }
.pub-panel-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 56px); align-items: center; }

.pub-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.pub-split-narrow { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

.pub-note { margin: var(--pub-s6) 0 0; color: var(--pub-text-3); font-size: var(--pub-secondary); line-height: 1.65; }
.pub-link { color: var(--pub-accent); font-weight: 600; }

/* ============================================================================================
   Призыв и подвал
   ============================================================================================ */

.pub-cta { margin: var(--pub-section) 0 var(--pub-s9); }
.pub-cta-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: clamp(32px, 4vw, 64px);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r4);
  background:
    radial-gradient(640px 320px at 84% 0%, rgba(138, 108, 255, .34), transparent 66%),
    radial-gradient(520px 280px at 6% 100%, rgba(75, 123, 255, .22), transparent 68%),
    var(--pub-raise-2);
  box-shadow: var(--pub-el1);
}
.pub-cta h2 { max-width: 22ch; margin: 0; font-size: var(--pub-h2); line-height: 1.12; letter-spacing: -.03em; }
.pub-cta p { max-width: 54ch; margin: var(--pub-s4) 0 0; color: var(--pub-text-2); font-size: var(--pub-lead); line-height: 1.55; }
.pub-cta .pub-actions { margin-top: 0; }

.pub-footer { padding: 0 0 var(--pub-s8); color: var(--pub-text-3); font-size: var(--pub-caption); }
.pub-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pub-s5) var(--pub-s6);
  padding-top: var(--pub-s6); border-top: 1px solid var(--pub-line);
}
.pub-footer p { margin: 0; }
.pub-footer a { color: var(--pub-text-2); font-weight: 600; }
.pub-footer nav { display: flex; flex-wrap: wrap; gap: var(--pub-s3) var(--pub-s5); }
.pub-footer .pub-brand { color: var(--pub-text); font-size: 16px; }

/* ============================================================================================
   Адаптивность: те же токены, другая композиция
   ============================================================================================ */

@media (max-width: 1000px) {
  .pub-split, .pub-split-narrow, .pub-panel-split, .pub-cta-inner { grid-template-columns: 1fr; }
  .pub-cta-inner { align-items: start; }
}

@media (max-width: 900px) {
  :root { --pub-gutter: 16px; }
  /* Меню переносится по строкам, поэтому липкая шапка съедала бы пол-экрана телефона. */
  .pub-header { position: static; }
  .pub-header-inner { flex-wrap: wrap; gap: var(--pub-s3); }
  .pub-nav { width: 100%; margin-left: 0; padding: 0; background: none; box-shadow: none; }
  .pub-nav a.pub-nav-cta { margin-left: 0; }
  .pub-float { padding: var(--pub-s5); }
  /* Прикреплённый фон на телефоне рисуется рывками, поэтому там он обычный. */
  body.pub, body.pub-canvas { background-attachment: scroll; }
}

@media (max-width: 560px) {
  .pub-grid, .pub-grid-wide { grid-template-columns: 1fr; }
  .pub-btn { width: 100%; }
  .pub-nav a { padding: 0 var(--pub-s3); font-size: 14px; }
  .pub-float-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-float-cell { padding: var(--pub-s3) var(--pub-s4); }
  .pub-float-cell b { font-size: 19px; }
  .pub-steps li { grid-template-columns: 44px 1fr; gap: var(--pub-s4); padding: var(--pub-s5) 0; }
  .pub-steps li::before { width: 44px; height: 44px; font-size: 17px; }
  .pub-stats { gap: var(--pub-s5) var(--pub-s6); }
}

@media (prefers-reduced-motion: reduce) {
  .pub-btn, a.pub-card, .pub-card-arrow, .pub-nav a { transition: none; }
  .pub-btn:hover, a.pub-card:hover { transform: none; }
}

/* ============================================================================================
   Главная и рейтинг: тот же design code поверх их собственных макетов

   Обе страницы построены раньше и на своих стилях; переписывать их целиком — отдельная работа.
   Здесь они переводятся на тёмное полотно и общие токены, а их вёрстка остаётся на месте.
   ============================================================================================ */

body.pub-canvas {
  color: var(--pub-text);
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(138, 108, 255, .28), transparent 66%),
    radial-gradient(900px 540px at 2% 4%, rgba(75, 123, 255, .22), transparent 64%),
    radial-gradient(1000px 700px at 96% 42%, rgba(93, 91, 255, .12), transparent 66%),
    radial-gradient(900px 640px at -8% 78%, rgba(75, 123, 255, .1), transparent 62%),
    var(--pub-base);
  background-attachment: fixed;
  /* Токены страницы переопределяются, а не дублируются в правилах. */
  --paper: var(--pub-base);
  --white: var(--pub-raise);
  --ink: var(--pub-base);
  --ink-2: var(--pub-base-2);
  --card: var(--pub-raise);
  --soft: var(--pub-raise);
  --surface: var(--pub-raise);
  --line: var(--pub-line);
  --text: var(--pub-text);
  --sub: var(--pub-text-2);
  --muted: var(--pub-text-2);
  /* Подписи полей и ссылки в тексте рейтинга. Раньше они были вписаны тёмными (#344054, #465bd4)
     и на тёмном полотне давали 1,7:1 и 3,2:1. */
  --label: var(--pub-text-2);
  --link: var(--pub-accent);
  --blue: var(--pub-blue);
  --violet: var(--pub-violet);
  --shadow: var(--pub-el1);
}

/* Макет продукта в первом экране главной нарочно светлый: это изображение приложения, и на тёмной
   странице он читается как скриншот. Но полотно выше переопределило `--text` светлым для всей
   страницы, и макет, который красит текст этой же переменной, получил почти белые подписи на
   светлом фоне (контраст около 1:1). Поэтому светлому блоку возвращается его собственная палитра —
   один раз, на весь блок, без привязки к ширине экрана. Серые подписи макета подняты до AA (4,5:1
   и выше на фоне макета): вписанные в preview-v3.css #777f90–#8a91a1 давали 3–4:1. */
body.pub-canvas .product-window,
body.pub-canvas .ranking-float,
body.pub-canvas .privacy-float {
  --text: #171a23;
  --mock-sub: #545b6b;
  color: var(--text);
}
body.pub-canvas .window-bar,
body.pub-canvas .candidate small,
body.pub-canvas .score-ring small,
body.pub-canvas .score-copy > span,
body.pub-canvas .score-copy p,
body.pub-canvas .skill,
body.pub-canvas .skill b,
body.pub-canvas .ranking-float > span,
body.pub-canvas .ranking-float small,
body.pub-canvas .privacy-float small { color: var(--mock-sub); }
body.pub-canvas .product-window .verified { color: #0f6b52; background: #dcf7ee; }
body.pub-canvas .ranking-float > b { color: #0f6b52; }

/* Первому экрану главной больше не нужно растворение: под ним такое же тёмное полотно. */
body.pub-canvas .hero { background: transparent; }
body.pub-canvas .hero::after { content: none; }

/* Первый экран главной: высота от содержимого, а не от окна.

   Было `min-height: 940px` плюс отступы 142/110px. В окне повыше следующая строка с числами уже
   видна, в окне пониже — ещё нет, и один и тот же экран выглядел в Chrome и Яндекс Браузере
   по-разному. Теперь высота считается от содержимого, а отступы — от ширины (vw), а не от высоты
   окна: при одинаковой ширине композиция совпадает в любом браузере. Полоса с числами
   по-прежнему заходит под экран на 52px — это осознанный «крючок», который показывает, что
   страница продолжается. */
body.pub-canvas .hero {
  min-height: 0;
  padding: clamp(40px, 4.6vw, 84px) 0 clamp(36px, 4vw, 64px);
  align-items: start;
}
body.pub-canvas .hero-layout { align-items: center; }
/* На невысоком окне ноутбука (у Яндекс Браузера панели выше, и полезной высоты остаётся меньше)
   первый экран поджимается по вертикали — так до полосы с числами доезжают оба браузера. Ширина
   при этом ни при чём, поэтому условие только по высоте. */
@media (min-width: 1000px) and (max-height: 860px) {
  body.pub-canvas .hero { padding: clamp(18px, 1.8vw, 34px) 0 var(--pub-s3); }
  body.pub-canvas .hero-layout { gap: clamp(32px, 4vw, 56px); }
}

/* Светлые поверхности главной и рейтинга становятся поднятыми тёмными: белых блоков, от которых
   надо было уйти, на странице не остаётся ни одного. */
body.pub-canvas .stats,
body.pub-canvas .role-card,
body.pub-canvas .ranking-demo,
body.pub-canvas .trust-card,
body.pub-canvas .filters,
body.pub-canvas .results-panel,
body.pub-canvas .ranking-row,
body.pub-canvas .status {
  border: 1px solid var(--pub-line);
  background: var(--pub-raise);
  box-shadow: var(--pub-el1);
}
body.pub-canvas .role-card { border-radius: var(--pub-r3); }
body.pub-canvas .role-card:hover { background: var(--pub-raise-2); border-color: rgba(170, 150, 255, .4); box-shadow: var(--pub-el2); }
body.pub-canvas .ranking-row:hover { background: var(--pub-raise-2); box-shadow: var(--pub-el2); }
body.pub-canvas .role-meta span,
body.pub-canvas .ranking-demo-head button,
body.pub-canvas .chip,
body.pub-canvas .rank {
  color: var(--pub-text-2); background: rgba(255, 255, 255, .05); border-color: var(--pub-line);
}
body.pub-canvas .field input[type="search"],
body.pub-canvas .field select,
body.pub-canvas .reset,
body.pub-canvas .role-tools input {
  color: var(--pub-text); background: rgba(255, 255, 255, .04); border-color: var(--pub-line-strong);
}
body.pub-canvas .role-arrow { color: var(--pub-text); border-color: var(--pub-line-strong); background: rgba(255, 255, 255, .05); }
body.pub-canvas .role-card:hover .role-arrow { color: #fff; border-color: transparent; background: var(--pub-violet); }
body.pub-canvas .button-secondary { color: var(--pub-text); border-color: var(--pub-line-strong); background: rgba(255, 255, 255, .05); }
body.pub-canvas .stats { grid-template-columns: repeat(3, 1fr); }
body.pub-canvas .stat { border-color: var(--pub-line); }
body.pub-canvas .kicker, body.pub-canvas .eyebrow { color: var(--pub-accent); }
body.pub-canvas h1 em, body.pub-canvas h2 em { color: var(--pub-accent); }
body.pub-canvas .verified { color: var(--pub-ok); background: rgba(79, 214, 168, .14); }
body.pub-canvas .privacy-foot,
body.pub-canvas .build,
body.pub-canvas .summary-row,
body.pub-canvas .empty-chips,
body.pub-canvas .role-search-status { color: var(--pub-text-3); }
body.pub-canvas footer { color: var(--pub-text-3); }
body.pub-canvas footer a { color: var(--pub-text-2); }

/* Мелочи рейтинга, которые остались светлыми: кнопки мобильных фильтров, ползунок и список
   значений у select. Раскрывающийся список рисует система, и без явных цветов он приходил белым
   текстом по белому. */
body.pub-canvas .filter-open,
body.pub-canvas .filter-close {
  color: var(--pub-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--pub-line-strong);
}
/* У ползунка своя подложка от браузера — на тёмном она приходит белой полосой. */
body.pub-canvas input[type="range"] { accent-color: var(--pub-violet); background: transparent; }
body.pub-canvas option { color: var(--pub-text); background: var(--pub-raise); }
body.pub-canvas .chip button { color: inherit; }
body.pub-canvas .mobile-backdrop.open { background: rgba(3, 5, 12, .62); }
body.pub-canvas .trust-line span { background: rgba(79, 214, 168, .16); }
body.pub-canvas .trust-line { color: var(--pub-ok); }

/* Две тёмные полосы главной во всю ширину становятся панелями на общем полотне. */
body.pub-canvas .dark-section,
body.pub-canvas .audience-section {
  padding: var(--pub-s7) 0;
  background: transparent;
}
body.pub-canvas .dark-section > .shell,
body.pub-canvas .audience-section > .shell {
  padding: clamp(28px, 3.4vw, 56px);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r4);
  background:
    radial-gradient(640px 340px at 86% 6%, rgba(138, 108, 255, .26), transparent 68%),
    var(--pub-raise-2);
  box-shadow: var(--pub-el1);
}

/* Ритм разделов — из той же шкалы, что на публичных страницах. */
/* Отступ раздела делится пополам между верхом и низом: подряд стоящие разделы раньше давали
   по 200–280px пустоты (полный отступ снизу у одного плюс полный сверху у следующего). */
body.pub-canvas .section { padding: clamp(36px, 4vw, 56px) 0; }
body.pub-canvas .quote-section { padding: clamp(36px, 4vw, 56px) 0; }
body.pub-canvas .closing-section { padding: clamp(36px, 4vw, 56px) 0 var(--pub-section); }

/* Путь новичка: у шага своё действие, но ни один шаг не обязателен. */
body.pub-canvas .process-step .text-link { margin-top: var(--pub-s3); color: var(--pub-accent); font-size: var(--pub-caption); }

/* Сравнение «резюме / курсы / UMEY» и четыре ответа о данных: карточки на той же поверхности, что
   карточки тестов. На телефоне колонки встают друг под другом. */
body.pub-canvas .compare-grid,
body.pub-canvas .data-grid { display: grid; gap: var(--pub-s4); }
body.pub-canvas .compare-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
body.pub-canvas .data-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
body.pub-canvas .compare-card,
body.pub-canvas .data-card {
  padding: var(--pub-s6);
  border: 1px solid var(--pub-line); border-radius: var(--pub-r3);
  background: var(--pub-raise); box-shadow: var(--pub-el1);
}
body.pub-canvas .compare-card-accent {
  border-color: rgba(170, 150, 255, .4);
  background: radial-gradient(420px 220px at 90% 0%, rgba(138, 108, 255, .22), transparent 70%), var(--pub-raise-2);
}
body.pub-canvas .compare-card h3,
body.pub-canvas .data-card h3 { margin: 0 0 var(--pub-s4); font-size: var(--pub-h3); line-height: 1.28; letter-spacing: -.02em; }
body.pub-canvas .compare-card dl { display: grid; gap: var(--pub-s5); margin: 0; }
body.pub-canvas .compare-card dt { color: var(--pub-text-3); font-size: var(--pub-caption); font-weight: 700; }
body.pub-canvas .compare-card dd { margin: var(--pub-s1) 0 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.55; }
body.pub-canvas .compare-card-accent dd { color: var(--pub-text); }
body.pub-canvas .data-card p { margin: 0; color: var(--pub-text-2); font-size: var(--pub-secondary); line-height: 1.6; }
body.pub-canvas .data-section .section-heading a { color: var(--pub-accent); }