/* ============================================================
   Хуамин — центр тестирования и изучения китайского языка.
   Статическая версия. Палитра фирменного логотипа:
   бордовый лотос с золотой сердцевиной.
   ============================================================ */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-cyr-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  --brand: #9f1041;
  --brand-dark: #6f0b2d;
  --brand-soft: #f8ecf0;
  --primary: #2f7d4c;
  --primary-dark: #24603a;
  --primary-soft: #e8f3ec;
  --accent: #eda12f;
  --ink: #1e2a23;
  --text: #3b463f;
  --muted: #77857c;
  --paper: #fcfdfb;
  --tint: #eff5f0;
  --card: #ffffff;
  --border: #dde7de;
  --success: #2e7d4f;
  --success-bg: #e9f5ee;
  --error: #b3261e;
  --error-bg: #fdecea;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(24, 54, 38, 0.08);
  --container: 1180px;
  --header-h: 116px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: "Golos Text", "Segoe UI", system-ui, sans-serif;
  font-size: 15px; /* плотный «десктопный» масштаб: всё в rem ужимается разом */
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.lead { font-size: 1.12rem; color: var(--text); max-width: 46em; }
.muted { color: var(--muted); font-weight: 400; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 19px; border-radius: 8px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { text-decoration: none; }

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

.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary-soft); }

.btn--small { padding: 8px 16px; font-size: 0.85rem; background: var(--primary); color: #fff; }
.btn--small:hover { background: var(--primary-dark); }

/* Бордовая кнопка линии «Обучение»: после .btn--small, чтобы перебивать её фон. */
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: #850c36; }

.btn--block { width: 100%; }

.btn--lg { padding: 16px 32px; font-size: 1.05rem; border-radius: 12px; }

.btn--provider { background: #fff; color: var(--ink); border-color: var(--border); justify-content: flex-start; }
.btn--provider:hover { border-color: var(--provider-color, var(--primary)); }
.btn__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--provider-color, var(--primary)); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Шапка ---------- */

/* Двухъярусная шапка, как на оригинале: сверху логотип, соцсети, телефон
   и кнопка; ниже — просторная строка навигации.
   Без backdrop-filter: он делает шапку containing block для
   position:fixed и ломает мобильную панель меню. */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.header__top { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header__icons { display: flex; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--primary); color: #fff; text-decoration: none; }
.header__navrow { border-top: 1px solid var(--border); }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; width: 66px; height: 60px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
/* Текст и цвет повторяют фирменный логотип hmct.ru: бордовый,
   мелкая расшифровка над крупным «Хуамин». */
.brand__name { font-weight: 800; font-size: 1.45rem; color: var(--brand); letter-spacing: 0.02em; }
.brand__descr { font-size: 0.72rem; color: var(--brand); max-width: 16em; }

.nav { flex: 1; }
.nav__list { display: flex; align-items: center; justify-content: space-between; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 14px; border: 0; background: none; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.nav__caret { transition: transform 0.15s; }

/* Вторая CTA «Пробный урок»: зелёная контурная, чтобы не спорить с «HSK 2026».
   Идёт после .btn--small в каскаде и возвращает контурный вид. */
.header__cta--trial { background: transparent; color: var(--primary); }
.header__cta--trial:hover { background: var(--primary-soft); }
@media (max-width: 900px) {
  .header__cta--trial { display: none; } /* на мобиле «Пробный урок» живёт в бургер-меню */
}

.nav__drop {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  display: none; flex-direction: column; gap: 2px;
  margin: 6px 0 0; padding: 8px; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
  animation: drop-in 0.18s ease;
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.nav__drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 0.92rem; }
.nav__drop a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }

.nav__item--drop.open > .nav__drop { display: flex; }
.nav__item--drop.open > .nav__toggle { background: var(--primary-soft); color: var(--primary); }
.nav__item--drop.open > .nav__toggle .nav__caret { transform: rotate(180deg); }

/* На ПК с мышью подменю «Экзамены» и «Обучение» раскрываются при наведении.
   Клик-переключатель (класс .open) остаётся запасным вариантом и для тач. */
@media (min-width: 901px) and (hover: hover) {
  .nav__item--drop:hover > .nav__drop,
  .nav__item--drop:focus-within > .nav__drop { display: flex; }
  .nav__item--drop:hover > .nav__toggle,
  .nav__item--drop:focus-within > .nav__toggle { background: var(--primary-soft); color: var(--primary); }
  .nav__item--drop:hover > .nav__toggle .nav__caret,
  .nav__item--drop:focus-within > .nav__toggle .nav__caret { transform: rotate(180deg); }
  /* Прозрачный «мостик» перекрывает зазор между кнопкой и меню,
     чтобы при переходе мыши к пунктам меню оно не закрывалось. */
  .nav__item--drop > .nav__drop::before {
    content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  }
}

.nav__extra { display: none; }

.header__phone { font-weight: 700; color: var(--ink); white-space: nowrap; }
.header__phone:hover { color: var(--primary); text-decoration: none; }
.header__phone-wrap { display: inline-flex; align-items: center; gap: 2px; }

.burger {
  display: none; position: relative; width: 44px; height: 44px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer;
}
.burger__line, .burger__line::before, .burger__line::after {
  content: ""; position: absolute; left: 11px; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s;
}
.burger__line { top: 21px; }
.burger__line::before { left: 0; top: -6px; }
.burger__line::after { left: 0; top: 6px; }
.burger[aria-expanded="true"] .burger__line { background: transparent; }
.burger[aria-expanded="true"] .burger__line::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Секции ---------- */

.section { padding: 68px 0; }
.section--tinted { background: var(--tint); }
.section--cta { background: linear-gradient(120deg, var(--primary-dark), var(--primary)); }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.section__title { margin-bottom: 28px; }
.section__head .section__title { margin-bottom: 0; }

/* Ссылки-«подробнее» оформлены как явные кнопки со стрелкой —
   иначе их не считывают как кликабельные. */
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border: 1.5px solid var(--primary); border-radius: 8px;
  font-weight: 600; font-size: 0.92rem; color: var(--primary); background: var(--card);
  line-height: 1.3; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.link-more::after { content: "→"; font-size: 1.05em; transition: transform 0.15s; }
.link-more:hover { background: var(--primary); color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(47, 125, 76, 0.22); }
.link-more:hover::after { transform: translateX(3px); }

.page-head { padding: 76px 0 12px; }
.page-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Герой ---------- */

.hero {
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(237, 161, 47, 0.12), transparent 60%),
    radial-gradient(50% 80% at 100% 80%, rgba(47, 125, 76, 0.1), transparent 60%),
    var(--tint);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 32px; align-items: center; padding-top: 68px; padding-bottom: 68px; }
.hero__title { font-size: clamp(2.3rem, 5vw, 3.3rem); margin-bottom: 2px; font-weight: 650; letter-spacing: 0.06em; }
.hero__hanzi { color: var(--primary); font-weight: 700; margin-right: 4px; }
.hero__subtitle { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.hero__kicker {
  display: inline-block; margin-bottom: 14px; padding: 6px 14px;
  background: var(--primary-soft); color: var(--primary);
  border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em;
}
.hero__stats { display: flex; gap: 48px; margin: 40px 0 0; flex-wrap: wrap; }
.hero__stats dt { font-size: 1.7rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.hero__stats dd { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 10em; }

.hero__visual { display: flex; justify-content: flex-end; }

/* Орбита: преподаватель в кольце, точки-факты появляются сверху вниз. */
.orbit { position: relative; width: 100%; max-width: 820px; padding-left: 120px; }
.orbit__stage { position: relative; width: 100%; max-width: 730px; aspect-ratio: 1 / 1; margin-left: auto; margin-right: -12px; }
/* Кольцо: форма-«бублик» (радиальная маска) ∩ нижнее растворение
   (линейная маска) — так низ круга тает вместе с фото, как на оригинале. */
.orbit__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    rgba(237, 161, 47, 0.35),
    rgba(47, 125, 76, 0.2),
    rgba(232, 243, 236, 0.95),
    rgba(237, 161, 47, 0.35)
  );
  -webkit-mask:
    radial-gradient(circle closest-side, transparent calc(100% - 42px), #000 calc(100% - 41px)),
    linear-gradient(to bottom right, #000 20%, rgba(0, 0, 0, 0.18) 52%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle closest-side, transparent calc(100% - 42px), #000 calc(100% - 41px)),
    linear-gradient(to bottom right, #000 20%, rgba(0, 0, 0, 0.18) 52%, transparent 80%);
  mask-composite: intersect;
}
/* Вторая тонкая орбита — чуть больше основной; на ней ровно сидят точки-факты.
   Растворяется по той же диагонали (снизу-справа → вверх-влево). */
.orbit__ring-outer {
  position: absolute; inset: -2.3%; border-radius: 50%;
  border: 1.5px solid rgba(47, 125, 76, 0.28);
  -webkit-mask-image: linear-gradient(to bottom right, #000 26%, transparent 72%);
  mask-image: linear-gradient(to bottom right, #000 26%, transparent 72%);
}
.orbit__ring-dash {
  position: absolute; inset: 28px; border-radius: 50%;
  border: 1.5px dashed rgba(47, 125, 76, 0.3);
  animation: orbit-spin 60s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom right, #000 24%, transparent 68%);
  mask-image: linear-gradient(to bottom right, #000 24%, transparent 68%);
}
/* Преподаватель крупный и растворяется к правому нижнему углу, как круг. */
.orbit__photo {
  position: absolute; left: 53%; bottom: 0; transform: translateX(-50%);
  width: 102%; height: auto;
  filter: drop-shadow(0 18px 28px rgba(24, 54, 38, 0.2));
  -webkit-mask-image: linear-gradient(to bottom right, #000 44%, rgba(0, 0, 0, 0.25) 72%, transparent 94%);
  mask-image: linear-gradient(to bottom right, #000 44%, rgba(0, 0, 0, 0.25) 72%, transparent 94%);
}

.orbit__point { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); }
.orbit__dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--primary); border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(47, 125, 76, 0.35);
}
.orbit__label {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 215px; text-align: right;
  font-size: 0.82rem; line-height: 1.35; color: var(--muted);
}
.orbit__label strong { display: block; color: var(--ink); font-size: 0.92rem; }

/* Фото-герой (стажировка в Харбине): большое фото с затемнением и текстом. */
.photo-hero { position: relative; display: flex; align-items: flex-end; min-height: 480px; overflow: hidden; color: #fff; }
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 33, 25, 0.86) 0%, rgba(19, 33, 25, 0.5) 45%, rgba(19, 33, 25, 0.12) 100%);
}
.photo-hero__inner { position: relative; z-index: 1; padding: 52px 0; }
.photo-hero h1 { color: #fff; }
.photo-hero .lead { color: rgba(255, 255, 255, 0.9); }
.photo-hero .hero__kicker { background: rgba(255, 255, 255, 0.18); color: #fff; }
.photo-hero .hero__stats { margin-top: 26px; }
.photo-hero .hero__stats dt { color: var(--accent); }
.photo-hero .hero__stats dd { color: rgba(255, 255, 255, 0.82); }

/* Blur-up: контентные фото проявляются из размытия по мере загрузки —
   эффект «из низкого качества в высокое», как на оригинале. */
.js .img-load { filter: blur(16px); transform: scale(1.04); transition: filter 0.7s ease, transform 0.7s ease; }
.js .img-load.is-loaded { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .img-load { filter: none; transform: none; transition: none; }
}

/* Центры точек лежат ровно на внешней орбите (радиус ≈52.3% стадии), левая дуга. */
.orbit__point--1 { left: 27.9%; top: 2.6%; }
.orbit__point--2 { left: 1.5%; top: 30.4%; }
.orbit__point--3 { left: -0.3%; top: 64.4%; }
.orbit__point--4 { left: 10.5%; top: 84.3%; }

/* Появление: сверху вниз по дуге, подпись догоняет свою точку. */
.js .orbit__point { opacity: 0; }
.js .orbit__label { opacity: 0; transform: translateY(-50%) translateX(8px); }
.orbit.is-live .orbit__point { animation: point-in 0.45s ease-out forwards; }
.orbit.is-live .orbit__label { transition: opacity 0.45s ease, transform 0.45s ease; opacity: 1; transform: translateY(-50%) translateX(0); }
.orbit.is-live .orbit__point--1 { animation-delay: 0.15s; }
.orbit.is-live .orbit__point--2 { animation-delay: 0.55s; }
.orbit.is-live .orbit__point--3 { animation-delay: 0.95s; }
.orbit.is-live .orbit__point--4 { animation-delay: 1.35s; }
.orbit.is-live .orbit__point--1 .orbit__label { transition-delay: 0.4s; }
.orbit.is-live .orbit__point--2 .orbit__label { transition-delay: 0.8s; }
.orbit.is-live .orbit__point--3 .orbit__label { transition-delay: 1.2s; }
.orbit.is-live .orbit__point--4 .orbit__label { transition-delay: 1.6s; }
/* Пульс включается после появления всех точек. */
.orbit.is-live .orbit__dot { animation: orbit-pulse 2.6s ease-out 2.2s infinite; }
.orbit.is-live .orbit__point--2 .orbit__dot { animation-delay: 2.85s; }
.orbit.is-live .orbit__point--3 .orbit__dot { animation-delay: 3.5s; }
.orbit.is-live .orbit__point--4 .orbit__dot { animation-delay: 4.15s; }

@keyframes point-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 14px)) scale(0.4); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes orbit-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 125, 76, 0.35); }
  70% { box-shadow: 0 0 0 16px rgba(47, 125, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 125, 76, 0); }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Факты-чипы под орбитой: заменяют подписи на узких экранах. */
.orbit-facts { display: none; list-style: none; margin: 20px 0 0; padding: 0; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.orbit-facts li {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; font-size: 0.82rem; line-height: 1.35; color: var(--muted);
}
.orbit-facts li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px;
  border-radius: 50%; background: var(--primary); border: 2px solid var(--primary-soft);
}
.orbit-facts strong { display: block; color: var(--ink); font-size: 0.9rem; }

/* ---------- Появление при скролле ---------- */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .reveal:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Сетки и карточки ---------- */

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 4px 16px rgba(24, 54, 38, 0.05);
}

.feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; border-top: 3px solid var(--brand); }
.feature h3 { color: var(--primary); }
.feature p { margin: 0; font-size: 0.94rem; }

/* Карточки уровней (стажировка): цветной кант и подпись под уровень. */
.level-card { border-top: 3px solid var(--primary); }
.level-card__tag { display: block; margin-bottom: 8px; font-weight: 800; font-size: 1.02rem; }
.level-card p { margin: 0; font-size: 0.92rem; color: var(--text); }
.level-card--start { border-top-color: var(--primary); }
.level-card--start .level-card__tag { color: var(--primary); }
.level-card--mid { border-top-color: var(--accent); }
.level-card--mid .level-card__tag { color: #b9791a; }
.level-card--high { border-top-color: #5b79c9; }
.level-card--high .level-card__tag { color: #4a63b0; }

.exam-card { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 18px; display: flex; flex-direction: column; align-items: center; }
.exam-card__icon { height: 44px; width: auto; margin-bottom: 14px; object-fit: contain; }
.exam-card h3 { margin-bottom: 6px; }
.exam-card p { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; flex: 1; }
.exam-card__price { font-weight: 700; color: var(--primary); margin: 0; }

/* ---------- Таблицы ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th, .table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { background: var(--primary-soft); color: var(--primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table__action { text-align: right; white-space: nowrap; }
.table tr.is-past td { color: var(--muted); }
.table--plain { min-width: 0; }

/* Табличные строки как карточки на мобильных: без горизонтального скролла,
   каждая ячейка подписана своим заголовком через data-label. */
@media (max-width: 600px) {
  .table-wrap:has(.table--stack) { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .table--stack { min-width: 0; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 4px 0; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(24, 54, 38, 0.05);
  }
  .table--stack tr:last-child { margin-bottom: 0; }
  .table--stack td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    border: 0; padding: 7px 14px; text-align: right;
  }
  .table--stack td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--muted); text-align: left;
  }
  .table--stack td[data-label=""]::before { display: none; }
  .table--stack td.table__action { justify-content: stretch; padding-top: 10px; }
  .table--stack td.table__action .btn { width: 100%; }
  .table--stack tr.is-past td { color: var(--muted); }
}

/* ---------- Шаги ---------- */

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: step; list-style: none; margin: 0 0 8px; padding: 0; }
.steps--column { grid-template-columns: 1fr; }
.step { counter-increment: step; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px 26px; position: relative; overflow: hidden; }
/* Крупная бледная цифра-водяной знак на фоне карточки — как на оригинале. */
.step::before {
  content: counter(step);
  position: absolute; top: -8px; left: 16px; z-index: 0;
  font-size: 5rem; font-weight: 800; line-height: 1;
  color: var(--primary-soft); pointer-events: none;
}
.step > * { position: relative; z-index: 1; }
.step h3 { font-size: 1.02rem; margin-bottom: 6px; margin-top: 30px; }
.step p { margin: 0; font-size: 0.9rem; color: var(--text); }
.steps--column .step h3 { margin-top: 0; }
.steps--column .step { padding-left: 92px; }
.steps--column .step::before { top: 50%; left: 22px; transform: translateY(-50%); }

/* ---------- Инструкция ---------- */

.instruction { max-width: 800px; }
.instruction-block { margin-bottom: 52px; }
.instruction-block h2 { display: flex; align-items: center; gap: 12px; }
.instruction-block__num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; background: var(--primary); color: #fff;
  border-radius: 50%; font-size: 1rem;
}
.shot { margin: 18px 0 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(24, 54, 38, 0.06);
}
.shot figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

.substeps { margin: 0; padding-left: 22px; }
.substeps li { margin-bottom: 8px; }
.substeps ul { margin-top: 6px; padding-left: 18px; }
.substeps ul li { margin-bottom: 4px; font-size: 0.95rem; }

/* ---------- Уведомления и блоки ---------- */

.notice {
  background: var(--primary-soft); border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 30px;
}
.notice h2 { font-size: 1.2rem; }
.notice p:last-child { margin-bottom: 0; }

.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; }
.alert--success { background: var(--success-bg); color: var(--success); }
.alert--error { background: var(--error-bg); color: var(--error); }
.alert--info { background: var(--primary-soft); color: var(--primary); }

/* ---------- Фотогалерея ---------- */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.gallery li { margin: 0; }
.gallery img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(24, 54, 38, 0.08);
}
.gallery__note { margin: 16px 0 0; }

/* ---------- Фотосекции ---------- */

.photo-band { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.photo-band__img { display: block; width: 100%; height: 420px; object-fit: cover; }
.photo-band__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px 38px;
  background: linear-gradient(to top, rgba(19, 33, 25, 0.78) 0%, rgba(19, 33, 25, 0.35) 45%, rgba(19, 33, 25, 0) 75%);
}
.photo-band__overlay h2, .photo-band__overlay h3 { color: #fff; margin-bottom: 6px; }
.photo-band__overlay p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 40em; }
.photo-band__overlay .btn-row { margin-top: 16px; }

/* ---------- CTA ---------- */

.cta { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; text-align: center; justify-items: center; }
.cta .btn-row { justify-content: center; }
.cta h2, .section--cta h2 { color: #fff; }
.section--cta p { color: rgba(255, 255, 255, 0.85); }
.section--cta .btn--primary { background: var(--accent); color: var(--ink); }
.section--cta .btn--primary:hover { background: #f5b34e; }
.section--cta .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.section--cta .btn--outline:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Развороты ---------- */

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; }
.split--reverse { grid-template-columns: 0.9fr 1.1fr; }
/* Таблицы внутри колонок не должны распирать грид своей min-content шириной. */
.split > * { min-width: 0; }
.split__aside { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.split__aside figure, .split figure { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ---------- Карта офисов ---------- */

/* Показана западная половина России крупным планом:
   на полной карте подписи трёх городов сливались. */
.map-box {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border);
}
.map-box img {
  position: absolute; left: 0; top: -33%;
  width: 200%; max-width: none; height: auto;
}
.map-pin { position: absolute; transform: translate(-50%, -50%); }
.map-pin__dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(47, 125, 76, 0.4);
  animation: orbit-pulse 2.4s ease-out infinite;
}
.map-pin--2 .map-pin__dot { animation-delay: 0.8s; }
.map-pin--3 .map-pin__dot { animation-delay: 1.6s; }
.map-pin__label {
  position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  white-space: nowrap; font-size: clamp(0.66rem, 1.6vw, 0.8rem); font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.92); border-radius: 6px; padding: 1px 8px;
  box-shadow: 0 1px 4px rgba(24, 54, 38, 0.12);
}
/* Метки разведены по сторонам от точки, чтобы не наезжать друг на друга. */
.map-pin--up .map-pin__label { top: auto; bottom: calc(100% + 5px); }
.map-pin--left .map-pin__label { left: auto; right: calc(100% + 7px); top: 50%; transform: translateY(-50%); }
.map-pin--right .map-pin__label { left: calc(100% + 7px); top: 50%; transform: translateY(-50%); }

/* ---------- Списки ---------- */

.ticks { list-style: none; margin: 0 0 1em; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list__label { flex: 0 0 110px; color: var(--muted); font-size: 0.9rem; padding-top: 1px; }

.request-list { list-style: none; margin: 0; padding: 0; }
.request-list li { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--border); }
.request-list li:last-child { border-bottom: 0; }

.tag {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 10px;
  background: var(--accent); color: var(--ink); border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}

.contact-card--main { border-color: var(--primary); }
.contact-card__phone a { font-weight: 700; font-size: 1.05rem; }
.contact-card__map { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.contact-card__map iframe { display: block; width: 100%; height: 200px; border: 0; }

/* ---------- Карточка аккредитации ---------- */

.badge-card { text-align: center; }
.badge-card img { max-width: 200px; margin: 0 auto 14px; display: block; }
.badge-card__name { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.badge-card .btn { margin-top: 6px; }

/* ---------- Дуги с экзаменами (раздел «О нас») ---------- */

.arc-visual { position: relative; max-width: 560px; margin: 0 auto; aspect-ratio: 10 / 9; overflow: hidden; }
.arc-visual__ring {
  position: absolute; left: 50%; transform: translateX(-50%);
  aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 50%;
}
.arc-visual__ring--outer { width: 150%; top: 15%; }
.arc-visual__ring--inner { width: 102%; top: 34%; }
.arc-item { position: absolute; text-align: center; width: 160px; }
.arc-item img { height: 36px; width: auto; object-fit: contain; margin: 0 auto 6px; display: block; }
.arc-item span { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.arc-item--hsk { left: 50%; transform: translateX(-50%); top: 0; }
.arc-item--hskk { left: 0; top: 16%; }
.arc-item--bct { right: 0; top: 16%; }
.arc-item--yct { left: 13%; top: 42%; }
.arc-item--ctcsol { right: 12%; top: 42%; }
.arc-item--cti { left: 50%; transform: translateX(-50%); bottom: 0; width: 200px; }
.arc-item--cti img { height: auto; width: 150px; }
.arc-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(24, 54, 38, 0.2); }
.arc-dot--blue { background: #5b79c9; }
.arc-dot--green { background: var(--primary); }
.arc-dot--1 { left: 49%; top: 20.5%; }
.arc-dot--2 { left: 7%; top: 37%; }
.arc-dot--3 { right: 7%; top: 37%; }
.arc-dot--4 { left: 26.5%; top: 48%; }
.arc-dot--5 { right: 25.5%; top: 48%; }

/* ---------- Герой интенсива ---------- */

.intensive-hero {
  background:
    radial-gradient(70% 100% at 90% 0%, rgba(237, 161, 47, 0.25), transparent 55%),
    linear-gradient(120deg, var(--primary-dark), var(--primary));
  color: #fff; padding: 64px 0;
}
.intensive-hero h1 { color: #fff; margin-bottom: 10px; }
.intensive-hero .lead { color: rgba(255, 255, 255, 0.88); }
.intensive-hero .hero__kicker { background: rgba(255, 255, 255, 0.16); color: #fff; }
.intensive-hero .btn--primary { background: var(--accent); color: var(--ink); }
.intensive-hero .btn--primary:hover { background: #f5b34e; }
.intensive-hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.intensive-hero__teachers { display: flex; gap: 22px; justify-content: center; }
.intensive-hero__teachers figure { margin: 0; text-align: center; }
/* Фигуры вырезаны из фона; полупрозрачная картинка ставится поверх мягкой
   градиентной подложки — она просвечивает сквозь прозрачные области PNG,
   поэтому преподаватели не «висят» в пустоте, а стоят в световом круге. */
.intensive-hero__teachers img {
  width: 176px; height: 220px; object-fit: cover; object-position: top center;
  border-radius: 18px;
  background:
    radial-gradient(70% 52% at 50% 24%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 68%, transparent 82%),
    linear-gradient(180deg, rgba(237, 161, 47, 0.16), rgba(255, 255, 255, 0.05) 45%, rgba(24, 54, 38, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.intensive-hero__teachers figcaption { color: #fff; margin-top: 12px; font-size: 0.9rem; font-weight: 600; }
.intensive-hero__teachers figcaption [lang="zh"] { margin-right: 6px; opacity: 0.85; }

/* Карточки с китайскими названиями и переводом. */
.hanzi-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.hanzi-card [lang="zh"] { display: block; font-size: 1.35rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.hanzi-card p { margin: 0; font-size: 0.9rem; color: var(--muted); }

.badge-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; padding: 0; }
.badge-row li {
  padding: 7px 15px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
}
/* Контурная кнопка на тёмном градиентном герое — белая, а не зелёная. */
.intensive-hero .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.intensive-hero .btn--outline:hover { background: rgba(255, 255, 255, 0.12); }
.intensive-hero__teachers figure { display: flex; flex-direction: column; }

/* Рамка для контентного фото в развороте: контролируемый размер = без пикселизации. */
.media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.media-frame img { display: block; width: 100%; height: auto; }

/* Колонка со стоимостью не переносит числа: «60 000 ₽» остаётся в строке. */
.table--cost td:last-child { white-space: nowrap; text-align: right; padding-left: 14px; }

/* «Открытка» — одиночное фото в герое стажировки: уникальнее, чем пара
   портретов интенсива, и не пикселит (контролируемый размер). */
.intensive-hero__media { display: flex; justify-content: center; }
.harbin-postcard {
  margin: 0; max-width: 420px; background: #fff; padding: 12px 12px 0;
  border-radius: 16px; box-shadow: 0 18px 44px rgba(19, 33, 25, 0.32);
  transform: rotate(-2deg);
}
.harbin-postcard img { display: block; width: 100%; height: auto; border-radius: 9px; }
.harbin-postcard figcaption { padding: 11px 4px 14px; text-align: center; color: var(--text); font-weight: 600; font-size: 0.9rem; }

.center-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.center-list h3 { margin-bottom: 2px; }
.center-list p { margin: 0; }

/* ---------- Экзамены (детально) ---------- */

.exam-detail-list { display: grid; gap: 20px; }
.exam-detail__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.exam-detail__head h2 { margin-bottom: 0; }
.exam-detail__head .muted { margin: 0; font-size: 0.9rem; }
.exam-detail__icon { flex: 0 0 auto; }
.exam-detail__price { margin: 0 0 0 auto; font-weight: 800; color: var(--primary); font-size: 1.1rem; white-space: nowrap; }
.exam-detail__meta { display: flex; gap: 40px; flex-wrap: wrap; margin: 0; }
.exam-detail__meta dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.exam-detail__meta dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }

/* ---------- Курсы ---------- */

.course-card { display: flex; flex-direction: column; }
.course-card__subtitle { color: var(--muted); margin-top: -6px; }
.course-card__pricing { margin: auto 0 16px; padding-top: 12px; border-top: 1px dashed var(--border); }
.course-card__price { font-size: 1.25rem; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.course-card .btn { align-self: flex-start; }

/* ---------- Преподаватели ---------- */

.teacher-card { text-align: center; }
.teacher-card__photo-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 226px; height: 226px; border-radius: 50%; margin-bottom: 16px;
  background: conic-gradient(from 210deg, rgba(237, 161, 47, 0.4), rgba(47, 125, 76, 0.25), rgba(232, 243, 236, 0.9), rgba(237, 161, 47, 0.4));
  padding: 8px;
}
.teacher-card__photo {
  width: 210px; height: 210px; object-fit: cover; object-position: top;
  border-radius: 50%; background: var(--tint); display: block;
}
.teacher-card h3 { margin-bottom: 2px; }
.teacher-card__hanzi { color: var(--primary); font-weight: 700; }
.teacher-card__role { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
.teacher-card__bio { text-align: left; font-size: 0.93rem; background: var(--tint); border-radius: 12px; padding: 16px 18px; }
.teacher-card__bio p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */

.faq { max-width: 800px; }
.faq__group { margin: 34px 0 14px; }
.faq__group:first-child { margin-top: 0; }
.faq__item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform 0.2s; margin-top: -4px;
}
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq__item[open] summary { color: var(--primary); }
/* При закрытии стрелка разворачивается сразу, синхронно со сворачиванием,
   а не ждёт конца анимации (пока details ещё open). */
.faq__item.is-closing summary::after { transform: rotate(45deg); margin-top: -4px; }
.faq__item.is-closing summary { color: var(--ink); }
.faq__item p { padding: 0 20px 18px; margin: 0; }

/* ---------- Формы ---------- */

.form h2 { margin-bottom: 18px; }
.field { margin-bottom: 16px; }
.field__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); }
.field__req { color: var(--error); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font: inherit; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--error); }
.field__hint { font-size: 0.8rem; color: var(--muted); margin: 6px 0 0; }
.field__error { font-size: 0.82rem; color: var(--error); margin: 6px 0 0; display: none; }
.field--error .field__error { display: block; }
.form__consent { font-size: 0.8rem; color: var(--muted); margin: 14px 0 0; }

/* Согласие с чекбоксом в квадрате: нативный input скрыт, рисуем свой квадрат. */
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
/* Нативный чекбокс скрыт визуально. Селектор .consent .consent__box
   перебивает .field input{width:100%}, иначе чекбокс растягивался на всю
   ширину и давал горизонтальный вылет (и ломал липкую шапку). */
.consent .consent__box {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); border: 0; opacity: 0;
}
.consent__mark {
  flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border); border-radius: 5px; background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.consent__box:checked + .consent__mark { background: var(--primary); border-color: var(--primary); }
.consent__box:checked + .consent__mark::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent__box:focus-visible + .consent__mark { box-shadow: 0 0 0 3px var(--primary-soft); }
.consent__text a { color: var(--primary); font-weight: 500; }
.field--error .consent__mark { border-color: var(--error); }
.consent-field { margin-bottom: 18px; }

/* ---------- Кнопка копирования ---------- */

.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--muted); cursor: pointer;
  vertical-align: middle; transition: color 0.15s, border-color 0.15s;
}
.copy-btn:hover { color: var(--primary); border-color: var(--primary); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }
.copy-btn svg { pointer-events: none; }

/* ---------- Документы ---------- */

.doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.doc-card { display: flex; gap: 16px; align-items: flex-start; }
.doc-card__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.doc-card h3 { font-size: 1rem; margin-bottom: 4px; }
.doc-card p { margin: 0 0 8px; font-size: 0.88rem; color: var(--muted); }
.doc-card a { font-weight: 600; font-size: 0.9rem; }

/* ---------- Прочее ---------- */

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose ol, .prose ul { padding-left: 24px; }

.error-page { text-align: center; padding: 40px 0; }
.error-page__code { font-size: 5rem; font-weight: 800; color: var(--primary-soft); -webkit-text-stroke: 2px var(--primary); margin: 0; line-height: 1; }

/* ---------- Футер ---------- */

.footer { background: var(--ink); color: #c7d4ca; margin-top: 40px; }
.footer a { color: #e1ebe4; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1fr 1.1fr; gap: 34px; padding-top: 64px; padding-bottom: 44px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 9px; font-size: 0.92rem; }
.footer__title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #92a498; margin-bottom: 14px; }
.footer .brand__name { color: #fff; }
.footer .brand__descr { color: #92a498; }
.footer__about { font-size: 0.9rem; margin: 14px 0; max-width: 26em; }
.footer__social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid #44544a; border-radius: 999px; font-size: 0.85rem;
}
.footer__social a:hover { border-color: var(--accent); text-decoration: none; }
.footer__social svg { flex: 0 0 auto; }
.footer__contacts li { color: #c7d4ca; }
.footer__contacts .copy-btn { background: transparent; border-color: #44544a; color: #92a498; }
.footer__contacts .copy-btn:hover { color: #fff; border-color: var(--accent); }
.footer__contacts .copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid #34423a; padding-top: 22px; padding-bottom: 26px; font-size: 0.85rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Аудитории «для кого» ---------- */

.audience-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 6px;
}
.audience-card__tag {
  align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--primary); background: var(--primary-soft); padding: 4px 11px; border-radius: 999px;
}
.audience-card h3 { margin: 10px 0 2px; font-size: 1.12rem; }
.audience-card p { margin: 0 0 14px; font-size: 0.94rem; }
.audience-card .link-more { margin-top: auto; }

/* ---------- Отзывы (горизонтальная лента со свайпом) ---------- */

.reviews {
  display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 10px 2px 12px; margin: 0 -2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reviews:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
/* Полоса прокрутки скрыта: на ПК листаем стрелками, на телефоне — свайпом. */
.reviews::-webkit-scrollbar { height: 0; width: 0; display: none; }
/* Распорки по краям ленты: дают крайним карточкам доехать ровно до центра —
   иначе первый и последний отзыв упираются в край и не встают по центру. */
.reviews::before, .reviews::after { content: ""; flex: 0 0 calc(25% + 20px); }
/* В закольцованной ленте распорки не нужны — соседей дают клоны карточек. */
.reviews.is-loop::before, .reviews.is-loop::after { display: none; }
/* Подсказку про свайп показываем только на телефоне — на ПК есть стрелки. */
.reviews__hint { display: none; text-align: center; font-size: 0.85rem; margin: 6px 0 0; }

/* Обёртка ленты — контекст для боковых стрелок; сужена, чтобы по краям
   виднелись «половинки» соседних карточек, а стрелки ложились поверх них. */
.reviews-wrap { position: relative; max-width: 820px; margin-inline: auto; }
/* Минималистичные стрелки по бокам, по центру карточек (десктоп). */
.reviews-nav__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(24, 54, 38, 0.16); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.2s;
}
.reviews-nav__btn--prev { left: -4px; }
.reviews-nav__btn--next { right: -4px; }
.reviews-nav__btn:hover { color: var(--primary); border-color: var(--primary); background: #fff; }
/* На краю ленты стрелка исчезает. */
.reviews-nav__btn:disabled { opacity: 0; pointer-events: none; }
.reviews-nav__btn svg { pointer-events: none; }

.review-card {
  /* Центральная карточка ~половина ширины ленты, по бокам видны половинки соседних.
     scroll-snap-stop: always — за один свайп проматывается ровно одна карточка. */
  flex: 0 0 calc(50% - 40px); scroll-snap-align: center; scroll-snap-stop: always;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; margin: 0; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow);
  transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Центральная карточка в фокусе, боковые слегка размыты (включается через JS,
   поэтому без скриптов все карточки остаются чёткими). */
.reviews.is-ready .review-card:not(.is-active) { filter: blur(2px); opacity: 0.5; }
.review-card__stars { color: var(--accent); letter-spacing: 3px; font-size: 0.95rem; }
.review-card blockquote { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--text); }
/* Имя и уровень — сверху карточки (над оценкой и цитатой), на всех ширинах. */
.review-card figcaption { display: flex; align-items: center; gap: 12px; order: -1; margin-bottom: 6px; }
.review-card__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 800;
}
.review-card__who strong { display: block; color: var(--ink); font-size: 0.95rem; }
.review-card__meta { color: var(--muted); font-size: 0.82rem; }

/* ---------- Блок заявки ---------- */

.request__points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.request__points li { position: relative; padding-left: 30px; font-size: 0.96rem; }
.request__points li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--primary-soft);
}
.request__points li::after {
  content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px;
  border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.request__contacts { margin: 24px 0 0; font-size: 0.95rem; color: var(--muted); }
.request__contacts a { font-weight: 700; }

/* ---------- Модальное окно заявки ---------- */

.modal {
  width: min(440px, 92vw); border: none; border-radius: var(--radius); padding: 0;
  background: var(--paper); color: var(--text); box-shadow: 0 24px 60px rgba(24, 54, 38, 0.28);
}
.modal::backdrop { background: rgba(20, 40, 30, 0.55); }
.modal__inner { position: relative; padding: 30px 26px 26px; }
.modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer;
}
.modal__close:hover { color: var(--primary); border-color: var(--primary); }
.modal__title { margin: 0 0 6px; font-size: 1.35rem; }
.modal__sub { margin: 0 0 18px; font-size: 0.92rem; color: var(--muted); }
.modal__alt { margin: 16px 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }
.modal[open] { animation: modal-in 0.22s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.modal-open { overflow: hidden; }

/* ---------- Чат-виджет заявки ---------- */

.modal--chat { width: min(420px, 94vw); padding: 0; overflow: hidden; }
.chat { display: flex; flex-direction: column; height: min(620px, 82vh); background: var(--tint); }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--primary); color: #fff; }
.chat__avatar { position: relative; flex: 0 0 auto; width: 44px; height: 44px; }
.chat__avatar picture { display: block; width: 100%; height: 100%; }
.chat__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(255, 255, 255, 0.55); }
.chat__dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #46d17f; border: 2px solid var(--primary); }
.chat__id { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.chat__id strong { font-size: 1rem; }
.chat__status { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; opacity: 0.92; }
.chat__status.is-typing .chat__status-text { font-style: italic; }
.chat__pip {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: #46d17f; box-shadow: 0 0 0 0 rgba(70, 209, 127, 0.6);
  animation: chat-pip 2.2s ease-out infinite;
}
@keyframes chat-pip {
  0% { box-shadow: 0 0 0 0 rgba(70, 209, 127, 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(70, 209, 127, 0); }
}
.chat__close { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.chat__close:hover { background: rgba(255, 255, 255, 0.3); }
/* flex-basis auto + min-height:0 — лог занимает ровно высоту сообщений, пока
   окно не упрётся в max-height, после чего сжимается и прокручивается. */
.chat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.chat__msg { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.45; word-wrap: break-word; }
.chat__msg--op { align-self: flex-start; background: #fff; color: var(--text); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(24, 54, 38, 0.08); }
.chat__msg--user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.chat__msg--op a { color: var(--primary); font-weight: 600; }
.chat__msg--user a { color: #fff; text-decoration: underline; }
/* Время отправки — мелко, в правом нижнем углу пузыря. */
.chat__time { display: block; text-align: right; font-size: 0.66rem; line-height: 1; margin-top: 4px; opacity: 0.55; }
.chat__msg--user .chat__time { color: rgba(255, 255, 255, 0.85); opacity: 0.85; }
.chat__typing { display: inline-flex; gap: 4px; align-items: center; }
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chat-typing 1s infinite; }
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 0.9; } }
/* Подошва компактная: на стартовом шаге в ней 4 кнопки-темы + строка ввода —
   при щедрых отступах она съедала половину окна, и диалога не было видно. */
.chat__foot { padding: 10px 12px; background: #fff; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
.chat__chip { padding: 6px 12px; border: 1.5px solid var(--primary); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.chat__chip:hover { background: var(--primary); color: #fff; }
.chat__input { display: flex; gap: 8px; width: 100%; }
.chat__input input { flex: 1; min-width: 0; padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; color: var(--ink); }
.chat__input input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.chat__send { flex: 0 0 auto; width: 41px; height: 41px; align-self: flex-end; border: 0; border-radius: 10px; background: var(--primary); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chat__send:hover { background: var(--primary-dark); }
.chat__done { font-size: 0.85rem; color: var(--muted); }
.chat__done a { color: var(--primary); font-weight: 600; }

/* ---------- Плавающий чат-виджет (кнопка + приманка) ---------- */

.chatw {
  position: fixed; right: 22px; bottom: 22px; z-index: 46;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* Круглая кнопка-иконка «чат». */
.chatw__btn {
  position: relative; flex: 0 0 auto; width: 60px; height: 60px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer;
  box-shadow: 0 12px 28px rgba(24, 54, 38, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.chatw__ico { flex: 0 0 auto; }
.chatw__btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(24, 54, 38, 0.4); }
.chatw__btn:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 3px; }

/* Красный кружок «1» — как непрочитанное сообщение, слегка пульсирует. */
.chatw__badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e0322f; color: #fff; font-size: 0.78rem; font-weight: 800; line-height: 1;
  border-radius: 999px; border: 2px solid #fff;
  animation: chatw-badge 1.8s ease-in-out infinite;
}
.chatw__badge[hidden] { display: none; }
@keyframes chatw-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* Приманка-облачко слева над кнопкой. */
.chatw__teaser {
  position: relative; max-width: 232px; margin-right: 2px;
  background: #fff; color: var(--text); font-size: 0.9rem; line-height: 1.4;
  padding: 12px 30px 12px 14px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(24, 54, 38, 0.22);
  animation: chatw-teaser 0.35s ease;
}
/* Хвостик-уголок снизу справа: пузырь «говорит» в сторону кнопки чата. */
.chatw__teaser::after {
  content: ""; position: absolute; right: 16px; bottom: -6px;
  width: 14px; height: 14px; background: #fff;
  transform: rotate(45deg); border-radius: 2px;
}
.chatw__teaser p { margin: 0; position: relative; z-index: 1; }
@media (min-width: 701px) {
  .chatw__teaser {
    max-width: 304px; font-size: 1rem; line-height: 1.5;
    padding: 15px 34px 15px 18px; border-radius: 16px;
  }
  .chatw__teaser::after { right: 20px; width: 16px; height: 16px; bottom: -7px; }
}
.chatw__teaser[hidden] { display: none; }
@keyframes chatw-teaser { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chatw__teaser-close {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--tint); color: var(--muted); cursor: pointer;
}
.chatw__teaser-close:hover { background: var(--primary-soft); color: var(--primary); }

/* На ПК окно чата закреплено в правом нижнем углу над кнопкой и открывается
   немодально: страница остаётся прокручиваемой, можно листать и отвечать. */
@media (min-width: 701px) {
  .modal--chat {
    position: fixed; margin: 0; inset: auto 24px 108px auto;
    width: min(390px, calc(100vw - 48px));
    /* Окно открывается немодально (dialog.show), поэтому не попадает в top-layer
       и стакается по z-index. Поднимаем над контентом страницы (секции доходят
       до z-index: 1) и над кнопкой чата (46), но ниже липкой шапки (50) —
       иначе окно пряталось за карточками секций, например за баннером теста. */
    z-index: 47;
  }
  .modal--chat::backdrop { background: transparent; }
  /* Окно закреплено снизу (bottom: 108px) и растёт вверх. Высоту НЕ фиксируем, а
     ограничиваем сверху: окно подстраивается под содержимое (при паре сообщений
     не выглядит пустой «простынёй»), но верх вместе с шапкой (аватар, имя,
     крестик) всегда остаётся ниже липкой шапки сайта. При переполнении — лог
     прокручивается. */
  .chat { height: auto; max-height: min(600px, calc(100vh - var(--header-h) - 124px)); }
  /* Кнопка чата на ПК заметнее. */
  .chatw { right: 24px; bottom: 24px; }
  .chatw__btn { width: 70px; height: 70px; }
  .chatw__ico { width: 31px; height: 31px; }
}

/* ============================================================
   Доступность: отключение анимаций
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, body.nav-open .nav { transition: none; }
  .orbit__ring-dash, .orbit__dot, .map-pin__dot { animation: none !important; }
  .js .orbit__point { opacity: 1; animation: none !important; }
  .js .orbit__label { opacity: 1; transform: translateY(-50%); transition: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Адаптивность
   ============================================================ */

@media (max-width: 1320px) {
  .nav__link { padding: 13px 10px; }
  .header__top { gap: 14px; }
}

@media (max-width: 1180px) {
  /* Номер без контекста на узкой шапке сбивает с толку —
     телефон и копирование живут в мобильном меню с подписью. */
  .header__phone-wrap { display: none; }
}

@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Подписи у точек не помещаются — вместо них факты-чипы под кольцом. */
  .orbit { padding-left: 0; }
  .orbit__label { display: none; }
  .orbit-facts { display: grid; }
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .doc-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  /* Иконки соцсетей на мобильной шапке не показываем —
     ссылки на мессенджеры живут внизу мобильного меню. */
  .header__icons { display: none; }

  /* Матовое стекло: полупрозрачная шапка размывает контент под собой.
     Фильтр на .header__top, а не на .header — иначе .header стал бы
     containing block для fixed-панели меню и сломал бы её. */
  .header { background: transparent; border-bottom: 0; }
  .header__top {
    background: rgba(252, 253, 251, 0.72);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(221, 231, 222, 0.7);
  }

  .header__navrow { border-top: 0; }
  .header__navrow > .container { padding: 0; }

  /* Панель меню появляется и убирается плавно: visibility с задержкой
     вместо display:none, чтобы работала анимация закрытия. */
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--paper); border-top: 1px solid var(--border);
    padding: 20px; overflow-y: auto; z-index: 49;
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body.nav-open .nav {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  body.nav-open { overflow: hidden; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; white-space: normal; }
  /* Обычные пункты получают стрелку «перехода» — их видно отличными
     от раскрывающихся разделов с галочкой. */
  .nav__item > a.nav__link::after { content: "\203A"; color: var(--muted); font-size: 1.3em; line-height: 1; }
  .nav__caret { width: 14px; height: 9px; color: var(--primary); }

  /* Подменю раскрывается плавно, а не появляется рывком. */
  .nav__drop {
    position: static; display: flex; box-shadow: none; border: 0;
    background: var(--tint); border-radius: 10px;
    max-height: 0; opacity: 0; overflow: hidden;
    margin: 0; padding: 0 6px; animation: none;
    transition: max-height 0.32s ease, opacity 0.25s ease, margin 0.32s ease, padding 0.32s ease;
  }
  .nav__item--drop.open > .nav__drop {
    max-height: 320px; opacity: 1; margin: 2px 0 6px; padding: 6px;
  }

  .nav__extra {
    display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
  }
  .nav__cta { align-self: stretch; }
  /* В мобильном меню — только круглые иконки соцсетей, без подписей. */
  .nav__social { display: flex; gap: 10px; }
  .nav__social .icon-btn { width: 42px; height: 42px; }
  .nav__social .icon-btn svg { width: 18px; height: 18px; }
  /* Номер телефона — строкой под иконками, с компактной кнопкой-буфером. */
  .nav__phone-row { display: flex; align-items: center; gap: 10px; }
  .nav__phone { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
  .nav__phone-row .copy-btn { width: 34px; height: 34px; margin: 0; }

  .header__cta { padding: 9px 14px; font-size: 0.85rem; }
  .burger { display: block; }

  /* Мобильный герой: кольцо уходит в фон за текст, как на оригинале;
     преподаватель и точки скрываются, факты остаются чипами. */
  .hero__inner { grid-template-columns: 1fr; gap: 10px; padding-top: 44px; padding-bottom: 44px; position: relative; }
  .hero__body { position: relative; z-index: 1; }
  .hero__visual { justify-content: center; }
  .orbit { max-width: none; padding: 0; position: static; }
  .orbit__stage {
    position: absolute; top: -40px; right: -160px;
    width: 480px; max-width: none; margin: 0;
    z-index: 0; pointer-events: none;
  }
  .orbit__photo, .orbit__point { display: none; }
  .orbit-facts { position: relative; z-index: 1; margin-top: 4px; }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .intensive-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 28px; }
  .photo-band__img { height: 320px; }
  .photo-band__overlay { padding: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 60px 0; }
}

@media (max-width: 640px) {
  .header__top { gap: 10px; }
  .header__cta { display: none; }
  /* Телефон: чуть меньше воздуха между секциями — страницы короче, листать меньше. */
  .section { padding: 44px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* «Почему выбирают» — 2×2 и на телефоне: компактные карточки с мелким текстом.
     Переносы, чтобы длинные слова не оставляли строк из одного слова. */
  .features { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feature { padding: 14px 12px; }
  .feature h3 { font-size: 0.95rem; hyphens: auto; }
  .feature p { font-size: 0.85rem; hyphens: auto; }
  /* Мини-таблицы в карточках (интенсив, Харбин): плотнее ячейки и мельче шрифт,
     чтобы всё влезало без горизонтального скрола — его ползунок не виден заранее. */
  .table--plain th, .table--plain td { padding: 9px 8px; font-size: 0.88rem; }
  .table--cost td:last-child { padding-left: 8px; }
  /* Карточки экзаменов идут по 2 в ряд — уменьшаем зазор и боковые поля,
     чтобы узкие карточки на телефоне не были тесными для текста. */
  .grid--5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .exam-card { padding: 22px 12px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  /* Шаг в столбце: цифра слева от текста, а не над ним — карточка вдвое ниже. */
  .step { padding: 16px 16px 16px 78px; }
  .step::before { top: 50%; left: 14px; transform: translateY(-50%); font-size: 3.4rem; }
  .step h3 { margin-top: 0; }
  .hero__stats { gap: 24px; }
  .orbit-facts { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 20px; padding-top: 44px; padding-bottom: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .page-head { padding-top: 44px; }
  .instruction-block { margin-bottom: 40px; }
  .exam-detail__price { margin-left: 0; width: 100%; }
  .contact-list li { flex-direction: column; gap: 2px; }
  .contact-list__label { flex-basis: auto; }

  /* На узких экранах длинный текст не помещается поверх фото и обрезается —
     раскладываем плашку в столбец: фото сверху, текст в сплошной панели снизу. */
  .photo-band { display: block; }
  .photo-band__img { height: 200px; }
  .photo-band__overlay {
    position: static; inset: auto; background: var(--primary-dark);
    padding: 22px 20px 24px;
  }
  .photo-band__overlay p { color: rgba(255, 255, 255, 0.9); }
}

@media (max-width: 430px) {
  /* Полный брендовый текст остаётся и на малых экранах — как в логотипе. */
  .brand { gap: 8px; }
  .brand__mark { width: 36px; height: 33px; }
  .brand__name { font-size: 1.05rem; }
  .brand__descr { font-size: 0.58rem; }
}

/* Совсем узкие экраны: мини-таблицы ещё плотнее, чтобы обойтись без скрола. */
@media (max-width: 360px) {
  .table--plain th, .table--plain td { padding: 8px 5px; font-size: 0.8rem; }
  .table--stack td { gap: 10px; padding: 7px 10px; font-size: 0.9rem; }
}

/* На телефоне кнопка сжимается в круглую иконку в правом нижнем углу,
   чтобы не перекрывать контент и учитывать «домашнюю» полосу iPhone. */
@media (max-width: 700px) {
  .chatw { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chatw__btn { width: 56px; height: 56px; }
  .chatw__teaser { max-width: min(232px, calc(100vw - 92px)); font-size: 0.86rem; }
  /* На телефоне листаем свайпом: боковые стрелки прячем, показываем подсказку. */
  .reviews-nav__btn { display: none; }
  .reviews__hint { display: block; }
  /* Автор отзыва — сверху слева карточки (имя и уровень над цитатой). */
  .review-card figcaption { order: -1; margin-top: 0; margin-bottom: 2px; }
  /* Больше воздуха: лента во всю ширину, карточка шире и с меньшими полями. */
  .reviews-wrap { max-width: none; }
  .review-card { flex-basis: 86%; padding: 20px; gap: 10px; }
  /* На телефоне — компактная карточка по центру (как было). Ужимаем/сдвигаем
     её JS только когда открыта клавиатура, чтобы поле ввода не пряталось. */
  .modal--chat { width: 94vw; max-width: 440px; }
  .chat { height: min(540px, 74vh); }
  .chat__head { padding: 10px 12px; }
  .chat__avatar, .chat__avatar img { width: 40px; height: 40px; }
  .chat__log { padding: 12px; gap: 8px; }
  .chat__msg { font-size: 0.88rem; padding: 8px 12px; max-width: 88%; }
  .chat__foot { padding: 10px; gap: 6px; }
  .chat__chip { padding: 7px 11px; font-size: 0.8rem; }
  .chat__input input { padding: 9px 12px; }
  .chat__send { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
  .chatw__btn { transition: none; }
  .chatw__btn:hover { transform: none; }
  .chatw__badge { animation: none; }
  .chat__typing i { animation: none; }
  .review-card { transition: none; }
}

/* ---------- Тест уровня HSK (/test) ---------- */

.quiz {
  max-width: 720px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px clamp(20px, 5vw, 44px) 38px;
}

.quiz__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.85rem; font-weight: 600; color: var(--muted);
  margin-bottom: 10px;
}

.quiz__track {
  height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; margin-bottom: 28px;
}
.quiz__fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--brand);
  transition: width 0.35s ease;
}

.quiz__hanzi {
  font-size: clamp(1.7rem, 4.5vw, 2.3rem); line-height: 1.35; font-weight: 700;
  color: var(--brand); margin: 0 0 6px;
}
.quiz__q { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0 0 20px; }
.quiz__q:focus { outline: none; }

.quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .quiz__options { grid-template-columns: 1fr; } }

.quiz-opt {
  padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--paper); color: var(--text); font: inherit; font-size: 0.98rem;
  text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.quiz-opt:disabled { cursor: default; opacity: 0.75; }
.quiz-opt--picked, .quiz-opt--picked:disabled {
  border-color: var(--brand); background: var(--brand-soft); color: var(--ink); opacity: 1;
}

.quiz__stage--in { animation: quiz-in 0.3s ease both; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.quiz__zero-row { margin: 16px 0 0; }
.quiz__zero {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.9rem; color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
.quiz__zero:hover { color: var(--brand); }

/* Результат: карточка позиционируется, бейдж «HSK n» — в правом верхнем углу. */
.quiz__result { position: relative; }
.quiz__badge {
  position: absolute; top: -2px; right: 0;
  display: inline-block; padding: 7px 20px; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.02em; white-space: nowrap;
}
.quiz__result-title { font-size: 1.3rem; padding-right: 120px; min-height: 40px; }
.quiz__result-title:focus { outline: none; }
.quiz__score { font-weight: 600; color: var(--ink); }
.quiz__cta { width: 100%; }
.quiz__cta[hidden] { display: none; } /* .btn задаёт display и перебивает [hidden] */
.quiz__alt { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }
.quiz__alt a { color: var(--brand); }
.quiz__again {
  background: none; border: none; padding: 0; margin-top: 18px;
  font: inherit; font-size: 0.92rem; color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
.quiz__again:hover { color: var(--text); }

/* Баннер теста на главной: слева приглашение, справа встроенный тест. */
.quiz-banner {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  color: #fff; padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 48px);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px 44px; align-items: center;
}
/* Водяной знак 水平: целиком внутри баннера, без обрезки краёв. */
.quiz-banner::after {
  content: "水平"; position: absolute; left: 30px; bottom: 18px;
  font-size: 9.5rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.quiz-banner__body h2 { color: #fff; margin-bottom: 10px; }
.quiz-banner__body p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 34em; }
/* Кричащий оффер: крупный заголовок, «бесплатно» — золотом логотипа. */
.quiz-banner__title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; font-weight: 800; }
.quiz-banner__title mark { background: none; color: var(--accent); }
.quiz--embed { max-width: none; margin: 0; position: relative; z-index: 1; padding: 26px clamp(20px, 3vw, 32px) 28px; color: var(--text); /* не наследовать белый текст баннера */ }
/* Мини-форма пробного занятия: раскрывается по кнопке в результате.
   Оформление — стандартное сайтовое (зелёные акценты). */
.quiz-mini { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); }
.quiz-mini .field { margin-bottom: 12px; }
.quiz-mini__how { border: 0; padding: 0; margin: 0 0 12px; }
.quiz-mini__how legend { padding: 0; }
.quiz-mini__how-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.quiz-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.quiz-radio input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.quiz__again:hover { color: var(--brand); }
/* Телефон: тест компактнее, чтобы целиком помещался на экран без прокрутки, —
   меньше вертикальных отступов, чуть мельче шрифты, шире карточка. */
@media (max-width: 640px) {
  .quiz__badge { font-size: 0.92rem; padding: 6px 14px; top: 0; }
  .quiz__result-title { font-size: 1.15rem; padding-right: 100px; min-height: 34px; }
  .quiz-banner { padding: 20px 14px 22px; gap: 16px; }
  .quiz-banner__title { font-size: 1.35rem; }
  .quiz-banner__body p { font-size: 0.92rem; }
  .quiz--embed { padding: 16px 14px 18px; }
  .quiz__meta { font-size: 0.78rem; margin-bottom: 8px; }
  .quiz__track { margin-bottom: 14px; }
  .quiz__hanzi { font-size: 1.5rem; }
  .quiz__q { font-size: 0.98rem; margin-bottom: 12px; }
  .quiz__options { gap: 8px; }
  .quiz-opt { padding: 9px 12px; font-size: 0.9rem; }
  .quiz__zero-row { margin: 10px 0 0; }
  .quiz__zero { font-size: 0.85rem; }
  .quiz__cta { padding: 12px 16px; font-size: 0.95rem; }
  .quiz__alt { font-size: 0.85rem; }
  .quiz__again { margin-top: 12px; font-size: 0.85rem; }
}
@media (max-width: 900px) {
  .quiz-banner { grid-template-columns: 1fr; }
  .quiz-banner::after { left: auto; right: 16px; top: 16px; bottom: auto; font-size: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz__fill { transition: none; }
  .quiz__stage--in { animation: none; }
}