/* =========================================================
   Инженер строительного контроля — лендинг ВИШ
   Порядок: шрифты → переменные → база → утилиты → компоненты
            (в порядке следования секций) → адаптив
   ========================================================= */

/* ---------- Шрифт Inter (variable, локальные субсеты) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Переменные ---------- */
:root {
  /* фирменная палитра */
  --navy-950: #000D1F;
  --navy-900: #001123;
  --navy-850: #06182C;
  --navy-800: #081F37;
  --navy-700: #12294A;
  --navy-600: #2A4468;
  --ink: #14213D;
  --ink-soft: #55607A;
  --gold: #C9A227;
  --gold-light: #E3C97A;
  --red: #C60B1B;
  --red-dark: #A80916;

  /* фоны и линии */
  --bg-soft: #F5F7FA;
  --bg-soft-alt: #F4F6FA;
  --bg-field: #F7F9FC;
  --bg-client: #EEF1F6;
  --line: #E3E8F0;
  --line-strong: #D7DEEA;
  --line-field: #DBE2EC;

  /* тени */
  --shadow-card: 0 4px 24px rgba(20, 33, 61, .06);
  --shadow-raised: 0 10px 34px rgba(20, 33, 61, .16);
  --shadow-side: 0 14px 40px rgba(20, 33, 61, .18);
  --shadow-price: 0 30px 70px rgba(0, 7, 18, .45);

  --container-width: 1160px;
}

/* ---------- База ---------- */
* { box-sizing: border-box; }

/* переходы по якорям меню — плавные, с отступом от края окна */
html { scroll-behavior: smooth; }
:target,
section[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

::selection { background: var(--gold); color: var(--navy-900); }

[hidden] { display: none; }

/* ---------- Утилиты ---------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 44px;
}

/* ---------- Кнопки ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.button--primary { background: var(--red); color: #fff; }
.button--primary:hover { background: var(--red-dark); }

.button--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.button--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.button--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.button--outline:hover { background: var(--ink); color: #fff; }

.button--compact { font-size: 14px; padding: 12px 22px; }
.button--large { font-size: 16px; padding: 18px 34px; }
.button--ghost.button--large { padding: 18px 30px; }
.button--outline.button--large { padding: 16px 32px; }
.button--block { display: flex; width: 100%; padding: 14px; }

.button__arrow { font-size: 18px; }

/* Кнопки-стрелки слайдеров */
.slider-button {
  width: 52px;
  height: 44px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s, border-color .18s;
}

.slider-button--filled { border: none; background: var(--navy-700); color: #fff; }
.slider-button--filled:hover:not(:disabled) { background: var(--gold); color: #0B1B31; }

.slider-button--outlined { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.slider-button--outlined:hover:not(:disabled) { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* лента докручена до края — крутить в эту сторону больше нечего */
.slider-button:disabled { opacity: .35; cursor: default; }

.slider-button__icon--flipped { transform: scaleX(-1); }

/* =========================================================
   Формы заявок
   Классы forma_wrap / forma / success / error / btn / sendform / label
   оставлены как есть — на них завязана внешняя интеграция.
   ========================================================= */
.forma { display: flex; flex-direction: column; gap: 12px; }
/* повышенная специфичность, чтобы перекрыть display у вариантов формы */
.forma[hidden],
.lead-form--strip .forma[hidden] { display: none; }

.lead-form__field { display: block; }

.lead-form__input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
}

.lead-form__submit {
  background: var(--red);
  color: #fff;
  border: none;
  font-weight: 700;
  text-align: center;
  transition: background .18s ease;
}
.lead-form__submit:hover { background: var(--red-dark); }

.lead-form__policy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.lead-form__checkbox {
  flex-shrink: 0;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

/* Подсветка чекбокса, когда согласие не отмечено */
.lead-form__policy.is-invalid .lead-form__checkbox {
  outline: 2px solid #ffb3ba;
  outline-offset: 2px;
  border-radius: 2px;
}
.lead-form--final .lead-form__policy.is-invalid .lead-form__checkbox { outline-color: var(--red); }

.lead-form__success-title { margin: 0 0 6px; font-size: 22px; }
.lead-form__success-text { margin: 0; }

.forma_wrap .error { display: none; }

/* --- Вариант в тёмной полосе под первым экраном --- */
.lead-form--strip .forma { display: block; }
.lead-form__row { display: flex; flex-wrap: wrap; gap: 12px; }
.lead-form--strip .lead-form__field { flex: 1 1 200px; }
.lead-form--strip .lead-form__input {
  height: 56px;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
}
.lead-form--strip .lead-form__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 8px;
  font-size: 16px;
}
.lead-form--strip .lead-form__error { color: #ffb3ba; font-size: 14px; margin-top: 10px; }
.lead-form--strip .lead-form__policy { margin-top: 14px; }
.lead-form--strip .label { color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.4; }
.lead-form--strip .label a { color: var(--gold-light); }
.lead-form--strip .success {
  background: var(--navy-700);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 26px 28px;
  color: #fff;
}
.lead-form--strip .lead-form__success-text { color: rgba(255, 255, 255, .75); }

/* --- Вариант в боковой карточке программы --- */
.lead-form--sidebar .lead-form__input {
  height: 52px;
  border: 1px solid var(--navy-600);
  background: var(--navy-800);
  color: #fff;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
}
.lead-form--sidebar .lead-form__submit {
  padding: 17px;
  border-radius: 10px;
  font-size: 16px;
}
.lead-form--sidebar .lead-form__error { color: #ffb3ba; font-size: 13px; }
.lead-form--sidebar .lead-form__checkbox { width: 17px; height: 17px; margin-top: 2px; }
.lead-form--sidebar .label { color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.4; }
.lead-form--sidebar .label a { color: var(--gold-light); }
.lead-form--sidebar .success {
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 22px;
  color: #fff;
}
.lead-form--sidebar .lead-form__success-title { font-size: 20px; }
.lead-form--sidebar .lead-form__success-text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }

/* --- Вариант в блоке стоимости --- */
.lead-form--final .forma { gap: 14px; }
.lead-form--final .lead-form__input {
  height: 56px;
  border: 1px solid var(--line-field);
  background: var(--bg-field);
  color: var(--navy-900);
  border-radius: 10px;
  padding: 0 18px;
}
.lead-form--final .lead-form__submit {
  margin-top: 4px;
  padding: 20px;
  border-radius: 10px;
  font-size: 17px;
}
.lead-form--final .lead-form__error { color: #ffb3ba; font-size: 14px; }
.lead-form--final .label { color: rgba(0, 17, 35, .55); font-size: 13px; line-height: 1.4; }
.lead-form--final .label a { color: #A8161F; text-decoration: underline; }
.lead-form--final .success {
  background: var(--bg-field);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 26px 28px;
  color: var(--navy-900);
}
.lead-form--final .lead-form__success-text { color: rgba(0, 17, 35, .65); }

/* --- Вариант в модалке «Перезвоните мне» --- */
.lead-form--callback .lead-form__input {
  height: 54px;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
}
.lead-form--callback .lead-form__submit {
  padding: 16px;
  border-radius: 8px;
  font-size: 16px;
}
.lead-form--callback .lead-form__error { color: #ffb3ba; font-size: 14px; }
.lead-form--callback .label { color: rgba(255, 255, 255, .55); font-size: 13px; line-height: 1.4; }
.lead-form--callback .label a { color: var(--gold-light); }
.lead-form--callback .success { color: #fff; }
.lead-form--callback .lead-form__success-title { font-size: 20px; }
.lead-form--callback .lead-form__success-text { color: rgba(255, 255, 255, .75); }

/* --- Вариант в модалке «Полная программа» --- */
.lead-form--program .lead-form__input {
  height: 54px;
  border: 1px solid var(--navy-600);
  background: var(--navy-800);
  color: #fff;
  border-radius: 10px;
  padding: 0 18px;
  outline: none;
}
.lead-form--program .lead-form__submit {
  padding: 17px;
  border-radius: 10px;
  font-size: 16px;
}
.lead-form--program .lead-form__hint {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  line-height: 1.4;
}
.lead-form--program .lead-form__error { color: #ffe0e3; font-size: 14px; }
.lead-form--program .label { color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.4; }
.lead-form--program .label a { color: var(--gold-light); text-decoration: underline; }
.lead-form--program .success { color: #fff; }
.lead-form--program .lead-form__success-text { color: rgba(255, 255, 255, .85); }

/* =========================================================
   Шапка
   ========================================================= */
/* Плашка Актиона: логотип слева, кнопка входа id2 справа.
   Ширину не ограничиваем — полоса идёт от края до края, как на других лендингах. */
.topbar {
  position: relative;
  z-index: 41;
  background: #222;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.topbar__logo {
  height: 22px;
  width: auto;
  max-width: 55vw;
  display: block;
  flex-shrink: 0;
}

.header {
  position: relative;
  z-index: 40;
  background: rgba(0, 17, 35, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--navy-800);
}

.header__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img { height: 30px; width: auto; display: block; }

.header__nav { display: flex; gap: 26px; margin: 0 auto; }
.header__nav-link { color: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 500; }
.header__nav-link:hover { color: #fff; }

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__phone { color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; }

.header__burger {
  display: none;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.header__burger-line { width: 18px; height: 2px; background: #fff; display: block; }

.mobile-menu {
  background: var(--navy-900);
  border-top: 1px solid var(--navy-800);
  padding: 16px 20px 24px;
}

.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }

.mobile-menu__link {
  color: #fff;
  padding: 12px 0;
  font-weight: 600;
  border-bottom: 1px solid var(--navy-800);
}

.mobile-menu__phone {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin: 18px 0 12px;
}

/* =========================================================
   Первый экран
   ========================================================= */
.hero {
  position: relative;
  background: var(--navy-950) url("../img/hero-bg.webp") right center / cover no-repeat;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(0, 13, 31, .94) 0%, rgba(0, 13, 31, .85) 32%, rgba(0, 13, 31, .4) 50%, rgba(0, 13, 31, 0) 62%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 72px 20px;
}

.hero__content { max-width: 620px; }

.hero__kicker {
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.hero__title {
  font-size: 70px;
  line-height: .9em;
  letter-spacing: -1px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 22px;
}

.hero__lead {
  font-size: 20px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 32px;
  max-width: 540px;
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 36px;
  margin-bottom: 40px;
  max-width: 560px;
}

.hero__fact { display: flex; flex-direction: column; gap: 14px; }
.hero__fact-icon { display: block; width: 40px; height: 40px; }
.hero__fact-text { color: #fff; font-size: 15px; line-height: 1.35; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* =========================================================
   Полоса с формой
   ========================================================= */
.lead-strip {
  background: var(--navy-900);
  border-top: 1px solid var(--navy-800);
  padding: 44px 0;
}

.lead-strip__title {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 24px;
}

.lead-strip__accent { color: var(--gold-light); }

.lead-strip__note {
  color: rgba(255, 255, 255, .75);
  font-size: 17px;
  margin: 20px 0 0;
}
.lead-strip__note a { color: var(--gold-light); font-weight: 700; }

/* =========================================================
   Цифры
   ========================================================= */
.numbers { background: #fff; padding: 72px 0; }

.numbers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.numbers__card {
  background: var(--bg-soft-alt);
  border-radius: 16px;
  padding: 34px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.numbers__card--dark { background: var(--navy-700); }

.numbers__value {
  font-size: 62px;
  line-height: .9;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -2px;
}

.numbers__card--dark .numbers__value { color: var(--gold-light); }

.numbers__rating { display: flex; align-items: center; gap: 8px; }
.numbers__star { flex-shrink: 0; color: var(--gold); }

/* Плюс и звезда всплывают после того, как счётчик добежал */
.num-mark {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) scale(.7);
  transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.num-mark--in { opacity: 1; transform: none; }

.numbers__label {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.numbers__label b { color: var(--ink); }

.numbers__card--dark .numbers__label { color: rgba(255, 255, 255, .72); }
.numbers__card--dark .numbers__label b { color: #fff; }

/* =========================================================
   Навыки
   ========================================================= */
.skills { background: var(--bg-soft); padding: 96px 0; }

.skills__title { max-width: 780px; }

.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.skills__card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.skills__card--feature {
  grid-column: span 2;
  background: var(--navy-700);
  padding: 40px 38px;
  box-shadow: var(--shadow-raised);
  justify-content: center;
}

.skills__icon { color: var(--gold); margin-bottom: 18px; }
.skills__card--feature .skills__icon { color: var(--gold-light); margin-bottom: 24px; }

.skills__card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}

.skills__card--feature .skills__card-title {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
}

.skills__card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.skills__card--feature .skills__card-text {
  font-size: 17px;
  color: rgba(255, 255, 255, .76);
  max-width: 540px;
}

/* =========================================================
   Программа
   ========================================================= */
.program { background: #fff; padding: 96px 0; }

.program__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 56px;
  align-items: start;
}

.program .section-title { margin-bottom: 12px; }

.program__lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 40px;
}

.modules { display: flex; flex-direction: column; gap: 10px; }

.module {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.module__head {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  user-select: none;
}

.module__num {
  min-width: 30px;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
}

.module__title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.module__chevron {
  color: var(--ink-soft);
  display: inline-flex;
  transition: transform .2s;
}

.module--open .module__chevron { transform: rotate(180deg); }

.module__body { display: none; padding: 0 24px 22px 68px; }
.module--open .module__body { display: block; }

.module__topics {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.module__topic {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.module__topic::before { content: "•"; color: var(--gold); }

.program__cta-row { margin-top: 32px; }

.program__side { position: sticky; top: 92px; }

.program-cta {
  background: var(--navy-700);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: var(--shadow-side);
}

.program-cta__kicker {
  margin: 0 0 12px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.program-cta__title {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.program-cta__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

.program__side-note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.program__side-note a { color: var(--ink); font-weight: 700; }

/* =========================================================
   Как проходит обучение (слайдер скриншотов платформы)
   ========================================================= */
.learning { background: #fff; padding: 40px 0 96px; }

.learning__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.learning__gallery {
  background: var(--navy-700);
  border-radius: 20px;
  padding: 22px;
  overflow: hidden;
}

.learning__viewport { overflow: hidden; border-radius: 12px; }

.learning__track {
  display: flex;
  width: 400%;
  transition: transform .4s ease;
}

.learning__slide { width: 25%; }

.learning__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.learning__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.learning__info {
  background: var(--bg-soft);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.learning__kicker {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.learning__caption-title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.learning__caption-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.learning__nav {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.learning__counter {
  min-width: 56px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Преимущества
   ========================================================= */
.advantages { background: var(--bg-soft); padding: 96px 0; }

.advantages__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.advantage {
  border-radius: 14px;
  padding: 34px 32px;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.advantage--narrow { grid-column: span 5; }
.advantage--wide { grid-column: span 7; }
.advantage--dark { background: var(--navy-700); }

.advantage__icon { display: block; width: 44px; height: 44px; margin-bottom: 22px; }

.advantage__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.advantage__title--narrow { max-width: 270px; }

.advantage__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.advantage--dark .advantage__title { color: #fff; }
.advantage--dark .advantage__text { color: rgba(255, 255, 255, .78); }

/* =========================================================
   Лекторы
   ========================================================= */
.lectors { background: #fff; padding-top: 96px; }

.lectors__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 76px;
}
.lectors__head .section-title { margin: 0; }

.lectors__nav { display: flex; gap: 10px; }

.lectors__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 40px;
  padding-left: max(20px, calc((100% - 1160px) / 2 + 20px));
  scroll-padding-left: max(20px, calc((100% - 1160px) / 2 + 20px));
  scrollbar-width: none;
}

.lectors__track-tail { flex: 0 0 4px; }

.lector {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--bg-soft);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lector__photo {
  position: relative;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #FDFEFF 26%, #E9EEF6 58%, #D2DCEA 100%);
}

.lector__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.lector__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lector__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.lector__role {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lector__toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  text-align: left;
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
}

.lector__objects-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lector__objects-list[hidden] { display: none; }

.lector__object {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.lector__object::before { content: "•"; color: var(--gold); }

/* =========================================================
   Эксперт на связи (анимированный чат)
   ========================================================= */
.expert { background: var(--navy-900); padding: 96px 0; }

.expert__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.expert__content { max-width: 410px; }

.expert__title {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

.expert__lead {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .75);
}

.expert__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.expert__item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 16px;
}

.expert__icon { flex: 0 0 32px; color: var(--gold); }

.expert__chat { position: relative; }

/* --- скелетон, который гаснет при «загрузке» чата --- */
.shimmer {
  background: linear-gradient(90deg, #0C2140 25%, #1B355A 50%, #0C2140 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}

.chat-skeleton {
  position: absolute;
  inset: 0;
  border: 1px solid var(--navy-700);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  transition: opacity .45s ease;
}

.chat-skeleton[hidden] { display: none; }
.chat-skeleton--fading { opacity: 0; }

.chat-skeleton__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #0B2038;
}

.chat-skeleton__avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }

.chat-skeleton__lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.chat-skeleton__line { border-radius: 6px; }
.chat-skeleton__line--name { height: 12px; width: 58%; }
.chat-skeleton__line--status { height: 9px; width: 26%; animation-delay: .15s; }

.chat-skeleton__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 8px 0;
}

.chat-skeleton__bubble--user {
  align-self: flex-end;
  width: 72%;
  height: 68px;
  border-radius: 14px 14px 4px 14px;
  animation-delay: .1s;
}

.chat-skeleton__bubble--expert {
  align-self: flex-start;
  width: 84%;
  height: 118px;
  border-radius: 14px 14px 14px 4px;
  animation-delay: .25s;
}

.chat-skeleton__bubble--short {
  align-self: flex-end;
  width: 46%;
  height: 42px;
  border-radius: 14px 14px 4px 14px;
  animation-delay: .35s;
}

.chat-skeleton__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #0B2038;
}

.chat-skeleton__field { flex: 1; height: 44px; border-radius: 10px; }
.chat-skeleton__send { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; animation-delay: .2s; }

/* --- сама карточка чата --- */
.chat {
  background: var(--navy-700);
  border: 1px solid var(--navy-800);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 8, 20, .3);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.chat--visible { opacity: 1; transform: none; }

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--navy-800);
}

.chat__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #E9EEF6 60%, #D2DCEA 100%);
}

.chat__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.chat__name { color: #fff; font-weight: 700; font-size: 15px; }

.chat__status {
  margin-top: 4px;
  color: #6BCB77;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat__status-dot {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6BCB77;
}

.chat__body {
  height: 420px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
}

.chat__message {
  padding: 12px 16px;
  font-size: 15px;
  animation: msgIn .4s cubic-bezier(.2, .7, .3, 1) both;
}

.chat__message--user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 14px 14px 4px 14px;
  line-height: 1.45;
}

.chat__message--expert {
  align-self: flex-start;
  max-width: 86%;
  background: var(--navy-900);
  color: #fff;
  border-radius: 14px 14px 14px 4px;
  line-height: 1.5;
}

.chat__typing {
  align-self: flex-start;
  background: var(--navy-900);
  padding: 15px 18px;
  border-radius: 14px 14px 14px 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: msgIn .3s ease both;
}
.chat__typing[hidden] { display: none; }

.chat__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: dotBounce 1.1s infinite;
}
.chat__dot:nth-child(2) { animation-delay: .16s; }
.chat__dot:nth-child(3) { animation-delay: .32s; }

.chat__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--navy-800);
}

.chat__input {
  flex: 1;
  background: var(--navy-900);
  border-radius: 10px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, .4);
  font-size: 14px;
}

.chat__send {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
}

/* =========================================================
   Процесс обучения (появление шагов по скроллу)
   --sp = прогресс появления от 0 до 1, его выставляет main.js
   ========================================================= */
.process { background: var(--bg-soft); padding: 96px 0; }

.process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.process__probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1600px;
  pointer-events: none;
  visibility: hidden;
}

.step {
  --sp: 1;
  display: flex;
  flex-direction: column;
  opacity: var(--sp);
  transform: translateY(calc((1 - var(--sp)) * 28px));
  transition: opacity .12s linear, transform .12s linear;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.step__num {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-size: 20px;
  font-weight: 800;
  display: grid;
  place-items: center;
  transform: scale(calc(0.62 + 0.38 * var(--sp)));
  transition: transform .12s linear;
}

.step__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(20, 33, 61, .18) 100%);
  transform: scaleX(var(--sp));
  transform-origin: left center;
  transition: transform .12s linear;
}

.step__card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.step__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =========================================================
   Образец диплома
   Разворот свёрстан в фиксированных 912px и масштабируется
   переменной --cert-scale (её считает main.js).
   ========================================================= */
/* снизу отступа нет: следом идут белые «Отзывы», иначе воздух удваивается */
.certificate { background: #fff; padding: 96px 0 0; }

.certificate__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 44px;
}
.certificate__head .section-title { margin: 0; }

.certificate__lead {
  margin: 0;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.certificate__stage {
  width: 100%;
  max-width: 912px;
  margin: 0 auto;
  aspect-ratio: 912 / 758;
  overflow: hidden;
}

.certificate__scaler {
  width: 912px;
  transform: scale(var(--cert-scale, 1));
  transform-origin: top left;
}

.certificate__spread {
  width: 912px;
  height: 654px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #141414;
  background-image:
    url("../img/diploma/pattern.webp"),
    url("../img/diploma/ornament.webp"),
    url("../img/diploma/background.webp");
  background-position: 0 0, 100% 0, 0 0;
  background-size: 385px, contain, contain;
  background-repeat: repeat, no-repeat, no-repeat;
}

.certificate__page { position: relative; }
.certificate__page--left { padding: 54px 20px 40px 50px; }
.certificate__page--right { padding: 52px 20px 40px 50px; }

.certificate__rule {
  position: absolute;
  left: 50px;
  right: 20px;
  height: 1px;
  background: #9AA0A6;
}
.certificate__rule--top { top: 100px; }
.certificate__rule--bottom { top: 452px; }

.certificate__kind { margin: 0; font-size: 11px; line-height: 1.3; }

.certificate__registry {
  position: absolute;
  left: 50px;
  right: 20px;
  top: 492px;
  padding-right: 20px;
  display: flex;
  align-items: flex-start;
}

.certificate__registry-value {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  text-align: right;
}

.certificate__school {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.certificate__fields {
  margin-top: 62px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.certificate__field { display: flex; align-items: flex-start; gap: 10px; }

.certificate__field-label {
  margin: 0;
  width: 190px;
  font-size: 12px;
  line-height: 16px;
}
.certificate__field-label--wide { width: 150px; }
.certificate__field-label--place { width: 160px; }

.certificate__field-value {
  flex: 1;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.certificate__stamp {
  position: absolute;
  right: 46px;
  bottom: 6px;
  width: 150px;
  height: auto;
  display: block;
}

.certificate__issuer {
  position: absolute;
  left: 50px;
  right: 20px;
  top: 480px;
}

.certificate__issuer-name {
  margin: 0;
  max-width: 320px;
  font-size: 11px;
  line-height: 14px;
}

.certificate__signature {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}

.certificate__signature-name { flex: 1; font-size: 14px; line-height: 1.35; }

.certificate__edge {
  width: 912px;
  height: 100px;
  background: url("../img/diploma/edge.webp") 0 0 / cover no-repeat;
  mix-blend-mode: multiply;
}

/* =========================================================
   Отзывы выпускников
   ========================================================= */
.reviews { background: #fff; padding: 96px 0; }

.reviews .section-title { margin-bottom: 12px; }

.reviews__lead {
  margin: 0 0 44px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.reviews__lead b { color: var(--ink); font-weight: 700; }

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.review {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.review__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* фото выпускника; фон виден, пока картинка не догрузилась */
.review__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-client);
  object-fit: cover;
}

.review__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.review__role {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.review__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 16px;
}

.review__stars {
  color: var(--gold);
  font-size: 17px;
  letter-spacing: 3px;
}

.review__score {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.review__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* длинный отзыв свёрнут до пяти строк, пока не нажали «Читать полностью» */
.review__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review__toggle {
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(198, 11, 27, .35);
  background: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
  transition: color .18s ease, border-color .18s ease;
}
.review__toggle:hover {
  color: var(--ink);
  border-bottom-color: rgba(20, 33, 61, .35);
}

/* =========================================================
   Стоимость и запись
   ========================================================= */
/* Фон секции светлее самой плашки — иначе её тёмный левый край с ней сливается */
.price {
  position: relative;
  background: var(--navy-800);
  padding-bottom: 96px;
}

.price__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 82% 0%, rgba(29, 57, 96, .95) 0%, rgba(8, 31, 55, 0) 70%),
    radial-gradient(900px 500px at 8% 100%, rgba(29, 57, 96, .9) 0%, rgba(8, 31, 55, 0) 68%);
}

.price__intro { position: relative; padding-top: 96px; padding-bottom: 36px; }

.price__title { color: #fff; margin: 0 0 12px; }

.price__lead {
  margin: 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}

.price__card {
  position: relative;
  max-width: 1120px;
  width: calc(100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-price);
}

.price__info {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  background-color: var(--navy-850);
  background-image:
    linear-gradient(100deg, rgba(4, 16, 32, .96) 0%, rgba(4, 16, 32, .9) 34%, rgba(4, 16, 32, .5) 66%, rgba(4, 16, 32, .2) 100%),
    url("../img/price-bg.webp");
  background-size: cover, cover;
  background-position: center, 64% center;
  background-repeat: no-repeat, no-repeat;
}

.price__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold);
}

.price__value {
  margin-top: 16px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #fff;
}

.price__note { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, .62); }

.price__divider { height: 1px; background: rgba(255, 255, 255, .14); }

.price__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.price__badge {
  border: 1px solid rgba(201, 162, 39, .6);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 700;
}

.price__seats {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
}

.price__seats-count {
  min-width: 26px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.price__tax {
  margin: auto 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #fff;
}

.price__form { background: #fff; padding: 44px 100px; }

.price__form-title {
  margin: 0 0 24px;
  max-width: 440px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.22;
  color: var(--navy-900);
}

/* =========================================================
   Вопросы и ответы
   ========================================================= */
.faq { background: #fff; padding: 96px 0; }

.faq__title { text-align: center; margin-bottom: 40px; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq__item:hover,
.faq__item--open { border-color: var(--line-strong); }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border: none;
  background: none;
  text-align: left;
  user-select: none;
}

.faq__question-text {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.faq__chevron {
  display: inline-flex;
  color: var(--ink-soft);
  transition: transform .25s ease;
}
.faq__item--open .faq__chevron { transform: rotate(180deg); }

/* раскрытие переключением display — как у аккордеона программы.
   Анимировать высоту не стали намеренно: если транзишн почему-то
   не отработает, ответ просто не откроется, а это ломает экран */
.faq__answer { display: none; }
.faq__item--open .faq__answer { display: block; }

.faq__answer-text {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* =========================================================
   Другие курсы школы
   ========================================================= */
.courses { background: var(--bg-soft); padding: 96px 0; }

.courses .section-title { margin-bottom: 12px; }

.courses__lead {
  margin: 0 0 44px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.courses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.course__kicker {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.course__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
  text-wrap: pretty;
}

.course__facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.course__fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.course__icon { flex-shrink: 0; margin-top: 1px; }

.course__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}

/* =========================================================
   Почему мы + логотипы клиентов
   ========================================================= */
.about { background: var(--bg-soft); padding: 96px 0; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.about .section-title { margin-bottom: 40px; }

.about__facts { display: flex; flex-direction: column; gap: 30px; }

.about-fact__value {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
}

.about-fact__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.about__summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 600;
}

.clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
  width: 80%;
  margin-left: auto;
}

.client {
  position: relative;
  height: 84px;
  background: var(--bg-client);
  border-radius: 12px;
}

.client__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
}

.client__logo--gazstroyproekt { width: 150px; height: 34px; }
.client__logo--moskapstroy    { width: 60px;  height: 44px; }
.client__logo--ekoniva        { width: 120px; height: 30px; }
.client__logo--fosagro        { width: 130px; height: 26px; }
.client__logo--argos          { width: 130px; height: 32px; }
.client__logo--aeroflot       { width: 130px; height: 26px; }
.client__logo--auchan         { width: 110px; height: 22px; }
.client__logo--rolf           { width: 100px; height: 22px; }
.client__logo--transneft      { width: 150px; height: 34px; }
.client__logo--pik            { width: 90px;  height: 22px; }

/* =========================================================
   Подвал
   ========================================================= */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .6);
  padding: 56px 0 40px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 40px;
  align-items: start;
}

.footer__col-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.footer__col-title--accent { color: var(--gold); }

.footer__brand { display: flex; flex-direction: column; gap: 14px; }

.footer__phone {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: color .18s ease;
}
.footer__phone:hover { color: var(--gold-light); }

.footer__docs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer__link { color: rgba(255, 255, 255, .72); transition: color .18s ease; }
.footer__link:hover { color: #fff; }

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  text-align: right;
}

.footer__social-links { display: flex; gap: 10px; justify-content: flex-end; }

.social-link {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .75);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
  transform: translateY(-2px);
}

.footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, .1);
  margin: 36px 0 20px;
}

.footer__copyright {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

/* =========================================================
   Модальные окна
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 7, 18, .7);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: ovFade .2s ease;
}
.modal[hidden] { display: none; }

.modal__dialog {
  width: 100%;
  border-radius: 18px;
  animation: ovPop .25s ease;
}

.modal__dialog--callback {
  max-width: 440px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  padding: 34px;
}

.modal__dialog--program {
  max-width: 460px;
  background: var(--navy-700);
  padding: 36px;
  box-shadow: 0 14px 40px rgba(0, 7, 18, .5);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.modal__dialog--program .modal__header { margin-bottom: 20px; }

.modal__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.modal__dialog--program .modal__title { font-size: 26px; }

.modal__close {
  background: none;
  border: none;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 255, 255, .6);
}
.modal__dialog--program .modal__close { font-size: 28px; color: rgba(255, 255, 255, .85); }

/* =========================================================
   Анимации
   ========================================================= */
@keyframes ovFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ovPop {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -100% 0; }
}

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------
   Появление по прокрутке
   Прячем только при живом JS (класс на <html> ставит инлайн-строка
   в <head>), иначе без скриптов страница осталась бы пустой.
   Двигаем исключительно opacity и transform — перерисовки нет.
   --------------------------------------------------------- */
.js-anim [data-reveal],
.js-anim [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
}

.js-anim .reveal--ready {
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.js-anim .reveal--in { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Блик на кнопках: узкая световая полоса пробегает по кнопке
   на наведении. Один псевдоэлемент, анимируем только transform.
   --------------------------------------------------------- */
.button,
.lead-form__submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after,
.lead-form__submit::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 35%;
  height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(0) skewX(-18deg);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.button:hover::after,
.lead-form__submit:hover::after { transform: translateX(560%) skewX(-18deg); }

/* на светлых кнопках белый блик не читается — притемняем */
.button--outline::after { background: linear-gradient(100deg, transparent, rgba(11, 27, 49, .12), transparent); }

/* ---------------------------------------------------------
   Тактильность: нажатие проседает, карточки чуть всплывают
   --------------------------------------------------------- */
.button,
.lead-form__submit,
.slider-button { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }

.button:active,
.lead-form__submit:active,
.slider-button:active:not(:disabled) { transform: translateY(1px); }

.skills__card,
.advantage,
.numbers__card,
.review,
.course {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}

.skills__card:hover,
.advantage:hover,
.numbers__card:hover,
.review:hover,
.course:hover { transform: translateY(-4px); }

.course:hover { box-shadow: var(--shadow-raised); }

/* стрелка «Подробнее о курсе» подаётся вперёд вместе с карточкой */
.course__arrow { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.course:hover .course__arrow { transform: translateX(4px); }

.skills__icon,
.advantage__icon { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.skills__card:hover .skills__icon,
.advantage:hover .advantage__icon { transform: scale(1.08); }

.lector { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.lector:hover { transform: translateY(-4px); }

/* логотипы заказчиков оживают под курсором */
.client__logo { transition: filter .4s ease, opacity .4s ease; }
.client:hover .client__logo { filter: grayscale(0); opacity: 1; }

/* =========================================================
   Адаптив
   ========================================================= */
@media (min-width: 961px) {
  .mobile-menu { display: none; }
}

@media (max-width: 980px) {
  .process__steps .step__line { display: none; }
}

@media (max-width: 960px) {
  .header__nav,
  .header__actions { display: none; }

  .header__burger { display: flex; margin-left: auto; }

  .hero__title { font-size: 34px; }

  .learning__grid,
  .expert__grid,
  .about__grid,
  .price__card { grid-template-columns: 1fr; }

  .skills__grid { grid-template-columns: 1fr; }
  .skills__card--feature { grid-column: auto; padding: 28px 26px; }

  .program__layout { grid-template-columns: 1fr; gap: 36px; }
  .program__side { position: static; }

  /* в одну колонку чат не растягиваем на всю ширину, а высоту отдаём
     содержимому — на узкой карточке реплики иначе срезает сверху */
  .expert__chat { max-width: 400px; }
  .chat__body { height: auto; min-height: 420px; }

  .courses__grid { grid-template-columns: 1fr 1fr; }

  .advantages__grid { grid-template-columns: 1fr; }
  .advantage--narrow,
  .advantage--wide { grid-column: auto; }
  /* в одну колонку два светлых блока встают подряд, поэтому меняем местами
     «Обучение лицензировано» и «Экономию времени» — цвета снова чередуются */
  .advantage:nth-child(-n+2) { order: 1; }
  .advantage:nth-child(3) { order: 3; }
  .advantage:nth-child(4) { order: 2; }
  .advantage:nth-child(n+5) { order: 4; }

  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__social { align-items: flex-start; text-align: left; }
}

@media (max-width: 700px) {
  .container,
  .hero__inner { padding-left: 16px; padding-right: 16px; }

  .lead-strip,
  .numbers,
  .skills,
  .program,
  .learning,
  .advantages,
  .expert,
  .process,
  .reviews,
  .faq,
  .courses,
  .about { padding-top: 56px; padding-bottom: 56px; }

  .faq__title { margin-bottom: 28px; }
  .faq__question { gap: 12px; padding: 18px 18px; }
  .faq__question-text { font-size: 16px; }
  .faq__answer-text { padding: 0 18px 20px; font-size: 15px; }

  .certificate { padding-top: 56px; }

  .reviews__lead,
  .courses__lead { font-size: 16px; margin-bottom: 28px; }

  .reviews__grid,
  .courses__grid { grid-template-columns: 1fr; gap: 16px; }

  .review,
  .course { padding: 24px 20px; }

  .hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .lectors { padding-top: 56px; }
  .lectors__head { margin-bottom: 36px; }

  .section-title,
  .lead-strip__title,
  .expert__title { font-size: 27px; line-height: 1.2; }

  .skills__card-title,
  .program-cta__title,
  .learning__caption-title,
  .advantage__title,
  .course__title,
  .step__title,
  .price__form-title { font-size: 19px; }

  .hero { min-height: auto; background-position: 74% center; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(0, 13, 31, .9) 0%, rgba(0, 13, 31, .72) 45%, rgba(0, 13, 31, .95) 100%);
  }
  .hero__title { font-size: 34px; letter-spacing: -.5px; }
  .hero__lead { font-size: 17px; }
  .hero__facts {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    margin-bottom: 32px;
  }

  .numbers__value { font-size: 44px; letter-spacing: -1px; }

  .program__layout { gap: 28px; }

  .chat { max-width: 100%; }
  .chat__body { min-height: 340px; }

  .clients { width: 100%; margin-left: 0; }

  .price { padding-bottom: 0; }
  .price__intro { padding-top: 56px; padding-bottom: 56px; }
  .price__card { width: calc(100% - 32px); border-radius: 16px; }
  .price__info { padding: 32px 20px; }
  .price__form { padding: 32px 20px; }
}

/* Форма под первым экраном: два поля в ряд перестают помещаться —
   ставим поля и кнопку в одну колонку. Остальные формы вертикальные изначально. */
@media (max-width: 670px) {
  .lead-form--strip .lead-form__row { flex-direction: column; }
  /* в колонке flex-basis задаёт высоту, поэтому сбрасываем */
  .lead-form--strip .lead-form__field { flex: 0 0 auto; }
  .lead-form--strip .lead-form__submit { width: 100%; }
}

/* Проступающие чернила в дипломе */
.ink__word { display: inline-block; white-space: nowrap; }

/* до прокрутки до диплома текст уже разобран на символы, но ещё не проявлен */
.ink--ready .ink__char { opacity: 0; }

.ink--running .ink__char {
  animation: ink-appear 1500ms ease-out forwards;
  will-change: opacity, filter;
}

@keyframes ink-appear {
  from { opacity: 0; filter: blur(3px); }
  to   { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior: auto; }

  .step {
    --sp: 1 !important;
    transition: none !important;
  }

  .ink--ready .ink__char,
  .ink--running .ink__char {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
  }

  .js-anim [data-reveal],
  .js-anim [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .faq__chevron { transition: none !important; }

  .button::after,
  .lead-form__submit::after { display: none; }

  .skills__card:hover,
  .advantage:hover,
  .numbers__card:hover,
  .lector:hover,
  .review:hover,
  .course:hover,
  .course:hover .course__arrow,
  .button:active,
  .lead-form__submit:active,
  .slider-button:active:not(:disabled) { transform: none; }
}