/* ============================================================
   CGC — общее для внутренних страниц: липкая шапка, шапка раздела,
   параллакс, переходы между страницами.
   Тема одна на весь сайт: тёмная. Радиусы прежние: 6px кнопки,
   16px карточки. Акцент один: золото.
   ============================================================ */

/* ---------- Липкая шапка внутренних страниц ---------- */

.site-header--solid {
  position: sticky;
  inset-block-start: 0;
  padding-block: clamp(12px, 1.5vw, 18px);
  background: rgba(3, 7, 17, .86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-block-end: 1px solid var(--line);
}
.site-header--solid .brand img { width: clamp(104px, 10.5vw, 138px); }

/* Текущий раздел подчёркнут, а не просто подкрашен: цвет один на сайт. */
.menu a.is-here {
  color: var(--gold);
  position: relative;
}
.menu a.is-here::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: var(--gold);
}

/* ---------- Шапка раздела ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, #030711 0%, var(--bg) 100%);
  border-block-end: 1px solid var(--line);
}

/* Золотое световое пятно уезжает медленнее содержимого — отсюда глубина. */
.page-hero .glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -22%;
  inset-inline-end: -8%;
  width: min(760px, 74vw);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(closest-side, rgba(217, 172, 99, .17), rgba(217, 172, 99, 0) 70%);
  pointer-events: none;
}

.page-hero .glow--red {
  inset-block-start: auto;
  inset-block-end: -46%;
  inset-inline: -12% auto;
  width: min(560px, 62vw);
  background: radial-gradient(closest-side, rgba(200, 26, 50, .14), rgba(200, 26, 50, 0) 70%);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-end: clamp(18px, 2vw, 28px);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--gold); }
.crumbs a:active { transform: translateY(1px); }
.crumbs .sep { opacity: .45; }
.crumbs [aria-current] { color: var(--ink-soft); }

.page-title {
  margin: 0;
  max-width: 20ch;
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.page-title .gold { color: var(--gold); }

.page-lede {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.25vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-soft);
}

.page-hero .cta { margin-block-start: var(--sp-3); }
.page-hero .kpi-rail,
.page-hero .tiles { margin-block-start: var(--sp-4); }

/* ---------- Проза ---------- */

.prose p {
  margin: 0 0 1em;
  max-width: 68ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.prose p:last-child { margin-block-end: 0; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose .gold { color: var(--gold); }

/* Врезка: короткая мысль, которую нельзя пропустить. */
.callout {
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 34px);
  border-inline-start: 2px solid var(--gold);
  background: rgba(217, 172, 99, .05);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.callout p {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--ink);
}
.callout p + p { margin-block-start: .7em; font-size: clamp(13.5px, 1.1vw, 15px); color: var(--ink-mute); }

/* Лестница: пронумерованные строки со сдвигом. Ни карточек, ни зигзага. */
.ladder { display: grid; }
.ladder li {
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 88px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-block: clamp(20px, 2.2vw, 30px);
  border-block-start: 1px solid var(--line);
}
.ladder li:last-child { border-block-end: 1px solid var(--line); }
.ladder .n {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1;
  color: rgba(217, 172, 99, .55);   /* .5 давало ровно 3.04 при норме 3.0; .55 — 3.47 */
  font-variant-numeric: tabular-nums;
}
.ladder h3 {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.3;
}
/* Список услуг на /services/: описание — основной текст страницы,
   а не сноска. Кегль и цвет подняты до уровня .prose. */
.ladder p {
  margin: 8px 0 0;
  max-width: 72ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.62;
  color: var(--ink-soft);
}

/* Пары «термин — значение» без таблицы. */
.specs { display: grid; gap: 0; }
.specs > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2vw, 34px);
  padding-block: clamp(14px, 1.5vw, 20px);
  border-block-end: 1px solid var(--line);
}
.specs dt { font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; color: var(--ink); }
.specs dd {
  margin: 0;
  font-size: clamp(13px, 1.08vw, 14.8px);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ---------- Замыкающий призыв ---------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--sp-6);
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}
.cta-band .glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -60%;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: min(900px, 96vw);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(closest-side, rgba(217, 172, 99, .13), rgba(217, 172, 99, 0) 70%);
  pointer-events: none;
}
.cta-band h2 {
  margin: 0;
  max-width: 22ch;
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.1;
  text-transform: uppercase;
}
.cta-band p {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.62;
  color: var(--ink-soft);
}
.cta-band .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: clamp(24px, 2.8vw, 36px);
}

/* ---------- Переход к соседним разделам ---------- */

.pagenav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding-block: var(--sp-4);
}
.pagenav a {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 2.2vw, 30px);
  border: var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color var(--t-slow) var(--ease),
              transform .3s var(--ease),
              background-color var(--t-slow);
}
.pagenav a:hover {
  border-color: var(--line-hi);
  background: var(--surface-hi);
  transform: translateY(-3px);
}
.pagenav a:active { transform: translateY(-1px) scale(.99); }
.pagenav .dir {
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pagenav b {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.15;
}
.pagenav .next { text-align: end; }

/* ---------- Ссылка «дальше в раздел» ---------- */

.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: clamp(20px, 2.2vw, 32px);
  padding-block-end: 5px;
  border-block-end: 1px solid rgba(217, 172, 99, .35);
  font-size: clamp(11px, .95vw, 12.5px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap var(--t-base) var(--ease), border-color var(--t-base);
}
.more:hover { gap: 17px; border-color: var(--gold); }
.more:active { transform: translateY(1px); }
.more .ico { font-size: 16px; }

/* ---------- Плитки чисел в три колонки ---------- */

.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Кольцо комиссии и подписи рядом ---------- */

.rate {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 38px);
  flex-wrap: wrap;
}
.rate-keys { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }

/* ---------- Параллакс ----------
   Только на CSS scroll-driven animations: слушателей scroll на сайте нет.
   Где их не поддерживают, слои просто стоят на месте — вёрстка та же.
   Движение мотивировано глубиной: дальние слои отстают от ближних. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    @keyframes par-drift {
      from { translate: 0 var(--par-from); }
      to   { translate: 0 var(--par-to); }
    }
    @keyframes par-zoom {
      from { scale: 1.14; translate: 0 -3%; }
      to   { scale: 1;    translate: 0  3%; }
    }

    [data-par] {
      animation: par-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    [data-par="far"]  { --par-from: 13%;  --par-to: -13%; }
    [data-par="slow"] { --par-from: 7%;   --par-to: -7%; }
    [data-par="near"] { --par-from: 3%;   --par-to: -3%; }
    [data-par="lag"]  { --par-from: -5%;  --par-to:  5%; }

    [data-par="zoom"] {
      animation-name: par-zoom;
      will-change: scale, translate;
    }
  }
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 900px) {
  .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .specs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pagenav { grid-template-columns: minmax(0, 1fr); }
  .pagenav .next { text-align: start; }
  .ladder li { grid-template-columns: clamp(40px, 11vw, 56px) minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .tiles--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН РАЗДЕЛА: одна семья, четыре композиции
   Базовый .page-hero без модификатора работает как раньше.
   Порядок детей .wrap везде один: крошки, H1, лид, кнопки, рейка чисел.
   ============================================================ */

/* --- Услуги: заголовок слева, обещание и кнопки во второй колонке.
       Пустое правое поле занимает текст, а не воздух. --- */
.page-hero--services .page-title { max-width: 15ch; }

@media (min-width: 900px) {
  .page-hero--services .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    column-gap: clamp(30px, 4.4vw, 78px);
    align-items: start;
  }
  .page-hero--services .crumbs     { grid-area: 1 / 1 / 2 / 3; }
  .page-hero--services .page-title { grid-area: 2 / 1 / 4 / 2; }
  .page-hero--services .page-lede  { grid-area: 2 / 2 / 3 / 3; margin-block-start: 4px; max-width: 44ch; }
  .page-hero--services .cta        { grid-area: 3 / 2 / 4 / 3; align-self: start; }
  .page-hero--services .kpi-rail   { grid-area: 4 / 1 / 5 / 3; }
}

/* --- Почему Китай: свет переставлен (красное пятно наверху, золотое внизу),
       заголовок узкий и высокий, текст уходит вправо от его колонки. --- */
.page-hero--why { padding-block: clamp(64px, 8vw, 126px) var(--sp-5); }
.page-hero--why .glow {
  inset-block-start: auto;
  inset-block-end: -40%;
  inset-inline: -10% auto;
  width: min(620px, 66vw);
}
.page-hero--why .glow--red {
  inset-block-start: -26%;
  inset-block-end: auto;
  inset-inline: auto -6%;
  width: min(740px, 74vw);
}
.page-hero--why .crumbs::after {
  content: "";
  width: 46px;
  height: 2px;
  background: var(--red);
  margin-inline-start: 4px;
}
.page-hero--why .page-title {
  max-width: 13ch;
  font-size: clamp(34px, 6vw, 76px);
}

@media (min-width: 900px) {
  .page-hero--why .page-lede,
  .page-hero--why .cta { margin-inline-start: clamp(110px, 21vw, 300px); }
  .page-hero--why .page-lede { max-width: 50ch; }
  .page-hero--why .kpi-rail { margin-inline-start: clamp(110px, 21vw, 300px); }
}

/* --- О компании: слева узкое поле с крошками и волосяной линией,
       содержимое отодвинуто вправо — разворот архивной карточки. --- */
@media (min-width: 900px) {
  .page-hero--about .wrap {
    display: grid;
    grid-template-columns: clamp(120px, 15vw, 230px) minmax(0, 1fr);
    column-gap: clamp(24px, 3.2vw, 58px);
  }
  .page-hero--about .crumbs {
    grid-area: 1 / 1 / 4 / 2;
    align-content: start;
    margin-block-end: 0;
    padding-inline-end: clamp(14px, 1.8vw, 30px);
    border-inline-end: var(--edge);
  }
  .page-hero--about .page-title { grid-area: 1 / 2 / 2 / 3; max-width: 17ch; }
  .page-hero--about .page-lede  { grid-area: 2 / 2 / 3 / 3; }
  .page-hero--about .cta        { grid-area: 3 / 2 / 4 / 3; }
  .page-hero--about .tiles      { grid-area: 4 / 1 / 5 / 3; }
}

/* --- Контакты: экран короче остальных, заголовок и обещание стоят
       на одной линии, кнопки и рейка каналов идут во всю ширину. --- */
.page-hero--contacts { padding-block: var(--sp-5) clamp(34px, 4vw, 58px); }
.page-hero--contacts .glow {
  inset-block-start: -34%;
  inset-inline-end: 10%;
  width: min(560px, 58vw);
}
.page-hero--contacts .glow--red {
  inset-block-end: -56%;
  inset-inline: auto -4%;
  width: min(430px, 46vw);
}
.page-hero--contacts .page-title { max-width: 14ch; }

@media (min-width: 900px) {
  .page-hero--contacts .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(30px, 4vw, 70px);
    align-items: end;
  }
  .page-hero--contacts .crumbs     { grid-area: 1 / 1 / 2 / 3; }
  .page-hero--contacts .page-title { grid-area: 2 / 1 / 3 / 2; }
  .page-hero--contacts .page-lede  { grid-area: 2 / 2 / 3 / 3; margin-block-start: 0; max-width: 42ch; }
  .page-hero--contacts .cta        { grid-area: 3 / 1 / 4 / 3; }
  .page-hero--contacts .kpi-rail   { grid-area: 4 / 1 / 5 / 3; }
}