/* Тема сайта: светлый первый экран с коллажем из двух фотографий, синий акцент, шрифт 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: #f1f5f8;
  --ink: #16232c;
  --dim: #5d7280;
  --line: #dde5ea;
  --line-2: #eef2f5;

  --accent: #1a6ea8;
  --accent-h: #145a8a;
  --accent-soft: #e5f0f7;
  --on-accent: #ffffff;
  --link: #145a8a;
  --link-h: #1a6ea8;

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

  --field-bg: #ffffff;
  --field-line: #d3dee5;
  --chip-bg: #f1f5f8;
  --mark: #ffe8a3;
  --track: #e3ebf0;
  --opt-bg: #f7fafc;
  --opt-line: #dde5ea;
  --score-bg: #eef4f8;

  --hdr-bg: rgba(255,255,255,.92);
  --hdr-line: #e3eaee;
  --hdr-ink: #16232c;
  --hdr-dim: #5d7280;
  --hdr-active: #1a6ea8;

  --foot-bg: #123a52;
  --foot-ink: #e8f0f5;
  --foot-dim: #a3bccd;
  --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(10, minmax(0, 1fr)); gap: 0; }
.strip__i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 6px 18px; text-align: center; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line-2); 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:last-child { border-right: 0; }
.strip__i:hover { background: #fff; color: var(--ink); }
.strip__i.is-on { background: #fff; }
.strip__i.is-on::after { transform: scaleX(1); }
.strip__ic { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); }
.strip__ic svg { width: 30px; height: 30px; }
.strip__t { font-size: .82rem; line-height: 1.2; 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(5, 1fr); }
  .strip__i:nth-child(5n) { border-right: 0; }
  .strip__i:nth-child(-n+5) { border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 620px) {
  .strip__in { grid-template-columns: repeat(3, 1fr); }
  .strip__i { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .strip__i:nth-child(3n) { border-right: 0; }
  .strip__t { font-size: .76rem; }
}


/* Планшеты: коллаж уходит под текст, колонка одна.
   Правило нужно здесь, ниже базового: иначе двухколоночная сетка темы перебивает базовую. */
@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; } }

/* ── РСЯ: десктопные места. НЕ УДАЛЯТЬ при правках. ──
   .ad-desk (у тренажёра) держит резерв, чтобы контент не прыгал;
   .ad-side (сайдбар) резерва намеренно НЕ имеет: пустой блок схлопывается. */
.ad-desk, .ad-side { display: none; }
@media (min-width: 1024px) {
  .ad-desk { display: block; min-height: 300px; margin: 1.5rem 0; }
  .ad-side { display: block; margin-bottom: 1rem; }
}