/* Тема сайта: светлый первый экран с коллажем из двух фотографий, жжёно-оранжевый акцент (сигнальный жилет), тёплый графит, шрифт Manrope. */
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-cyr.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-lat.woff2') format('woff2'); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212; }

:root {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, Consolas, 'Liberation Mono', monospace;
  /* боковые поля вместо фиксированной ширины: растут вместе с экраном */
  --gut: clamp(20px, 3.2vw, 76px);

  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f7f3ee;
  --ink: #241f19;
  --dim: #6f6257;
  --line: #e6dcd1;
  --line-2: #f2ece4;

  --accent: #bf5417;
  --accent-h: #a34512;
  --accent-soft: #faeadd;
  --on-accent: #ffffff;
  --link: #a34512;
  --link-h: #bf5417;

  --ok: #10715a;
  --ok-bg: #e6f3ef;
  --ok-line: #b6ddd1;
  --bad: #b03a2b;
  --bad-bg: #fbeeeb;
  --warn: #8a5a12;
  --warn-bg: #fbf2e2;

  --field-bg: #ffffff;
  --field-line: #dcd0c3;
  --chip-bg: #f7f3ee;
  --mark: #ffe8a3;
  --track: #ece4da;
  --opt-bg: #faf7f3;
  --opt-line: #e6dcd1;
  --score-bg: #f4ede5;

  --hdr-bg: rgba(255,255,255,.92);
  --hdr-line: #eae1d6;
  --hdr-ink: #241f19;
  --hdr-dim: #6f6257;
  --hdr-active: #bf5417;

  --foot-bg: #2a211b;
  --foot-ink: #f3ece4;
  --foot-dim: #bfae9e;
  --foot-active: #ffffff;
  --foot-line: rgba(255,255,255,.15);

  --tile-ink: #ffffff;
  --tile-ic-bg: rgba(255,255,255,.13);
  --tile-ic: #ffffff;

  --r-block: 14px;
  --r-ctl: 10px;
  --r-tile: 50%;
  --r-chip: 999px;
  --r-mark: 9px;
  --shadow-lg: 0 18px 50px -24px rgba(18,58,82,.45);
}

.hdr { backdrop-filter: saturate(140%) blur(8px); }

.sec--tint { background: var(--tint); }
.cat { box-shadow: 0 1px 2px rgba(22,35,44,.04); }
.cat:hover { box-shadow: 0 10px 26px -18px rgba(18,58,82,.5); }
.logo__mark { border-radius: 9px; }

/* ---------- Первый экран: светлый, поиск слева, две фотографии внахлёст справа ---------- */
.hero { background: linear-gradient(180deg, #f2f7fa 0%, #f7fafc 62%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 72px); padding-block: clamp(40px, 5vw, 76px) clamp(28px, 3vw, 44px); }
.hero h1 { text-wrap: balance; letter-spacing: -.03em; }
.hero h1 .hl { color: var(--accent); }
.hero .lead { max-width: 46ch; }
.hero .hsearch { margin-bottom: 20px; }
.hero .hsearch input { box-shadow: 0 12px 34px -22px rgba(18, 58, 82, .5); }
.hero__cta { margin-top: 0; }
.hero__hint { margin: 16px 0 0; font-size: .88rem; color: var(--dim); }

/* Коллаж: крупный кадр и второй поверх него со сдвигом, как на референсе */
.shots { position: relative; padding: 0 0 46px 0; }
.shots__a { display: block; width: 88%; margin-left: auto; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 32px 70px -38px rgba(16, 48, 68, .55); }
.shots__b { position: absolute; left: 0; bottom: 0; width: 46%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 6px solid var(--bg); box-shadow: 0 26px 52px -30px rgba(16, 48, 68, .5); }



/* Полоса профессий во всю ширину под первым экраном */
.strip { border-top: 1px solid var(--line); background: rgba(255,255,255,.72); }
.strip__in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-2); }
/* Линии между ячейками рисует сам зазор сетки, а не border на каждой плитке: при любом
   числе профессий и на любом брейкпоинте раскладка остаётся ровной, без осиротевшего
   хвоста и без правил nth-child, которые надо править каждый раз вслед за списком. */
.strip__i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 18px; text-align: center; text-decoration: none; color: var(--ink); background: #fff; overflow: hidden;
  transition: background-color .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1); }
/* Подчёркивание выезжает слева направо той же кривой, что и стрелка на кнопке первого экрана */
.strip__i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.strip__i:hover::after, .strip__i:focus-visible::after { transform: scaleX(1); }
.strip__ic { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.strip__i:hover .strip__ic { transform: translateY(-2px) scale(1.08); }
.strip__i:hover { transform: translateY(-1px); }
.strip__i.is-on { background: #fff; }
.strip__i.is-on::after { transform: scaleX(1); }
.strip__ic { display: grid; place-items: center; width: 38px; height: 38px; color: var(--accent); }
.strip__ic svg { width: 30px; height: 30px; }
.strip__t { font-size: .82rem; line-height: 1.25; font-weight: 500; }
.strip__n { font-size: .74rem; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .strip__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .strip__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip__t { font-size: .76rem; } }
@media (prefers-reduced-motion: reduce) { .strip__i, .strip__ic, .strip__i::after { transition: none; } }


/* Планшеты: коллаж уходит под текст, колонка одна.
   Правило нужно здесь, ниже базового: иначе двухколоночная сетка темы перебивает базовую. */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .lead { max-width: none; }
}

/* До 900px коллаж не показываем: фотография уходит фоном всего первого экрана,
   а контент занимает всю ширину. Так блок не растёт вниз на планшетах. */
@media (max-width: 900px) {
  .shots { display: none; }
  .hero { position: relative; isolation: isolate; background: #0f3247; }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: #0f3247 var(--hero-bg, none) center / cover no-repeat;
  }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(11,38,54,.58) 0%, rgba(11,38,54,.78) 55%, rgba(11,38,54,.9) 100%);
  }
  .hero__grid { padding-block: 34px 30px; }
  .hero h1, .hero h1 .hl { color: #fff; }
  .hero .lead { color: rgba(232,241,246,.88); }
  .hero__hint { color: rgba(232,241,246,.72); }
  .hero .hsearch input { background: #fff; border-color: transparent; }
  .hero .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .strip { background: #fff; }
}

/* Карточка раздела с фотографией: снимок на всю площадь, поверх него градиент,
   текст белый. Затемнение снизу плотнее, чтобы описание и счётчик читались. */
.cat--pic { border-color: transparent; color: #fff; }
.cat--pic::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: #16323f var(--cat-img, none) center / cover no-repeat;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.cat--pic::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(175deg, rgba(12,35,48,.5) 0%, rgba(12,35,48,.8) 42%, rgba(12,35,48,.93) 100%);
}
.cat--pic:hover { color: #fff; box-shadow: 0 24px 50px -30px rgba(12,35,48,.7); }
.cat--pic:hover::before { transform: scale(1.05); }
.cat--pic .cat__ic { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.cat--pic .cat__t { color: #fff; text-shadow: 0 1px 12px rgba(10,28,38,.5); }
.cat--pic .cat__d { color: rgba(236,244,248,.9); }
.cat--pic .cat__n { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .cat--pic::before { transition: none; } .cat--pic:hover::before { transform: none; } }

/* ---------- Частые вопросы на главной ----------
   Список с разделителями, а не сетка карточек: вопросы разной длины, и в равных
   плитках они выглядели бы обрубленными. Раскрытие на <details> — работает без JS
   и остаётся доступным с клавиатуры. */
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q { position: relative; display: block; list-style: none; cursor: pointer; padding: 17px 44px 17px 0;
  font-weight: 600; font-size: 1.03rem; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__i:focus-within .faq__q { color: var(--accent); }
/* Плюс, который на раскрытии становится минусом: две полоски, вертикальная прячется */
.faq__q::before, .faq__q::after { content: ''; position: absolute; right: 10px; top: 50%; width: 13px; height: 2px;
  background: var(--accent); border-radius: 2px; transition: transform .24s cubic-bezier(.16, 1, .3, 1); }
.faq__q::before { transform: translateY(-50%); }
.faq__q::after { transform: translateY(-50%) rotate(90deg); }
.faq__i[open] .faq__q::after { transform: translateY(-50%) rotate(0deg); }
.faq__a { max-width: 68ch; padding: 0 44px 20px 0; animation: faq-in .22s cubic-bezier(.16, 1, .3, 1); }
.faq__ans { margin: 0 0 8px; font-size: 1rem; }
.faq__lab { color: var(--accent); font-weight: 700; }
.faq__why { margin: 0 0 12px; color: var(--dim); font-size: .94rem; }
.faq__link { display: inline-block; font-size: .9rem; font-weight: 600; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq__a { animation: none; }
  .faq__q::before, .faq__q::after { transition: none; }
}

/* ---------- Тренажёр: настройки билета и разбор ошибок ---------- */
.tr__setup { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-start; }
.tr__opt { display: flex; flex-direction: column; gap: 7px; }
.tr__optlab { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); font-weight: 600; }
/* Сегменты вместо выпадающих списков: вариантов мало, и все видны сразу */
.tsegs { display: inline-flex; padding: 3px; gap: 3px; background: var(--chip-bg); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.tseg { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--dim); padding: 7px 15px; border-radius: 7px; transition: background-color .16s ease, color .16s ease; }
.tseg:hover { color: var(--ink); }
.tseg.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(22,35,44,.09); }
.tseg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr__hint { flex: 1 1 260px; margin: 0; align-self: center; font-size: .9rem; color: var(--dim); max-width: 62ch; }
.tr__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tr__acts .btn { flex: 1 1 220px; }
/* Ответ, отданный в экзамене: отмечаем сам факт, но не верность */
.tr__list .is-done .tr__dot { background: var(--accent); opacity: .55; }

.tr__work { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.tr__work h3 { margin: 0 0 14px; font-size: 1.12rem; }
.tr__wi { padding: 14px 0; border-bottom: 1px solid var(--line-2); max-width: 72ch; }
.tr__wi:last-child { border-bottom: 0; }
.tr__wq { margin: 0 0 8px; font-weight: 600; }
.tr__wa { margin: 0 0 4px; font-size: .95rem; }
.tr__bad { color: var(--bad); font-weight: 600; }
.tr__okl { color: var(--ok); font-weight: 600; }
.tr__ww { margin: 8px 0 8px; font-size: .93rem; color: var(--dim); }
@media (max-width: 620px) {
  .tr__setup { gap: 14px 20px; }
  .tsegs { width: 100%; }
  .tseg { flex: 1; text-align: center; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .tseg { transition: none; } }

/* ---------- Тренажёр: выбор набора и старт ----------
   Билет начинается не сразу: сначала видно, из чего он соберётся и какие настройки
   выбраны. Так человек не попадает в тест, не поняв, что происходит. */
.tstart { padding: 4px 0 2px; }
.tstart__lead { margin: 0 0 16px; color: var(--dim); max-width: 70ch; }
.tstart__lead b { color: var(--ink); }
.tstart__back { margin-top: 14px; }
.tlink { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: .92rem;
  color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tlink:hover { color: var(--link-h); }

/* Профессии: плитки одного размера, число вопросов — второй строкой */
.tcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tcat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 15px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); font: inherit; text-align: left;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.tcat b { font-size: 1rem; font-weight: 600; }
.tcat span { font-size: .84rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.tcat:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -18px rgba(18,58,82,.5); }
.tcat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Темы: их бывает под сотню, поэтому список прокручивается, а не растёт бесконечно */
.tthemes { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; padding-right: 4px; }
.tth { text-align: left; padding: 10px 13px; cursor: pointer; font: inherit; font-size: .94rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .16s ease; }
.tth:hover, .tth.is-on { border-color: var(--accent); color: var(--ink); }

/* Прогресс одной строкой вместо колонки со списком вопросов: блок больше не растёт
   в высоту под число вопросов и переживает режим «все вопросы». */
.tprog { margin-bottom: 16px; }
.tprog__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.tprog__txt { font-size: .92rem; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.tprog .tlink { margin-left: auto; }
.qa-more { margin-top: 14px; }
@media (max-width: 620px) {
  .tcats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .tprog .tlink { margin-left: 0; }
}

/* Кнопка перехода в СДО на странице входа: главное действие страницы — попасть в систему */
.vhod-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 18px 0 22px; }
.vhod-cta__note { flex: 1 1 260px; font-size: .88rem; color: var(--dim); }