/* =============================================================================
   v7-design.css — слой визуального апгрейда поверх v6.css
   -----------------------------------------------------------------------------
   Подключается ПОСЛЕ v6.css и не переписывает её: только нормализует то, что
   разъехалось за годы правок (шрифтовая шкала, вертикальный ритм, тени), и
   добавляет глубину, градиенты и моушн.

   Направление задано ui-ux-pro-max: "Trust & Authority" (премиальные услуги,
   WCAG AAA, отличная производительность) + "Dimensional Layering" (4 уровня
   elevation, слои, backdrop-blur для иерархии). Фирменный фиолетовый #B15ECC
   сохранён — палитра навы/блю из навыка сознательно НЕ взята, бренд важнее.

   Все анимации — только transform/opacity, 160–320ms на микро-взаимодействиях.
   Глобальный prefers-reduced-motion уже стоит в v6.css:929 и гасит всё это.
   ============================================================================= */

/* ---------- 1. ТОКЕНЫ ------------------------------------------------------ */

:root {
  /* Шкала высоты. Раньше в теме было 14 разных значений box-shadow, набранных
     на глаз; теперь четыре ступени + акцентная для фиолетовых плашек. */
  --e1: 0 1px 2px rgba(29,29,31,.05), 0 2px 8px -2px rgba(29,29,31,.06);
  --e2: 0 2px 6px -1px rgba(29,29,31,.06), 0 12px 28px -12px rgba(29,29,31,.14);
  --e3: 0 4px 12px -2px rgba(29,29,31,.07), 0 24px 48px -20px rgba(29,29,31,.20);
  --e4: 0 8px 20px -4px rgba(29,29,31,.09), 0 48px 88px -36px rgba(29,29,31,.30);
  --e-acc:  0 18px 44px -20px rgba(177,94,204,.60);
  --e-acc-2: 0 26px 60px -24px rgba(177,94,204,.75);

  /* Радиусы. В теме встречались 10,14,16,18,20,22,24,30,34,40,44,59,100,999 —
     сводим к шести ступеням, крупные плашки остаются на 30/44 ради 1:1 с Tilda. */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px;
  --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* Моушн. Один ритм на весь сайт. */
  --t-fast: 160ms;   /* смена цвета, подчёркивание */
  --t-base: 220ms;   /* hover карточек и кнопок */
  --t-slow: 320ms;   /* раскрытие, аккордеон */
  --t-reveal: 560ms; /* появление при скролле (было 900ms — вяло) */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.28, .64, 1);

  /* Вертикальный ритм секций. Был разнобой 30/37, 44/71, 48/64, 108/112,
     127/90 — визуально секции слипались или зияли. */
  --sec-y:    clamp(56px, 7vw, 104px);
  --sec-y-lg: clamp(72px, 9vw, 136px);

  /* Бренд: тон-шкала вокруг #B15ECC + рабочие градиенты. */
  --acc-800: #6E2F86;
  --acc-700: #8A3FA6;
  --acc-600: #B15ECC;
  --acc-400: #CE7FE8;
  --acc-200: #E9CFF3;
  --acc-050: #FAF3FD;
  --acc-grad:  linear-gradient(135deg, #C570E2 0%, #B15ECC 46%, #8A3FA6 100%);
  --acc-grad-h: linear-gradient(135deg, #D083EC 0%, #BB6BD6 46%, #97489F 100%);
  --tint:      rgba(177,94,204,.07);
  --hairline:  rgba(29,29,31,.09);
}

/* ---------- 2. ТИПОГРАФИКА ------------------------------------------------- */

/* Заголовки секций стояли на 36 / 38 / 42 / 52 / 60 / 96 px при одном уровне
   вложенности (все — h2), с весами 600/700/900 и line-height от 1.1 до 87px.
   ArtegraSans заканчивается на 700: вес 900 браузер подделывал синтетическим
   жирным — буквы «плыли». Приводим к одной текучей ступени. */
.promise__heading,
.about-us__heading,
.vuz-videos__heading,
.stories__heading,
.services__heading,
.fears__heading,
.faq__heading,
.steps__heading,
.reviews__heading,
.media__heading {
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Крупный «плакатный» заголовок стран остаётся на ступень выше — он один такой
   на странице и держит иерархию, а не спорит с остальными. */
.section-head__title {
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.media__heading { line-height: 1.16; }        /* было line-height: 87px */
.steps__heading, .reviews__heading { font-weight: 700; } /* было 900 — фейк-болд */

/* Акцентная часть заголовка: вместо плоской заливки — градиент по тексту.
   Фолбэк на сплошной цвет остаётся, если background-clip не поддержан. */
.promise__heading-accent,
.vuz-videos__heading-accent,
.stories__heading-accent,
.fears__heading-accent,
.steps__heading-accent {
  background: linear-gradient(100deg, var(--acc-700) 0%, var(--acc-600) 42%, var(--acc-400) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Подзаголовки секций набраны 24px/400 на #403F3F — при ширине контейнера это
   90+ знаков в строке. Ограничиваем меру и слегка гасим цвет. */
.promise__sub, .vuz-videos__sub, .stories__sub, .steps__sub {
  max-width: 62ch;
  color: #4A4A4C;
}

/* ---------- 3. ВЕРТИКАЛЬНЫЙ РИТМ ------------------------------------------ */

.promise    { padding: var(--sec-y-lg) 0 var(--sec-y); }
.about-us   { padding: var(--sec-y) 0; }
.vuz-videos { padding: var(--sec-y) 0; }
.stories    { padding: var(--sec-y-lg) 0; }
.steps      { padding: var(--sec-y) 0; }
.services   { padding: var(--sec-y) 0; }
.reviews    { padding: var(--sec-y) 0; }
.faq        { padding: var(--sec-y) 0 var(--sec-y-lg); }
.fears__plate { padding: var(--sec-y-lg) 0; }

/* ---------- 4. ФОНЫ И СЛОИ ------------------------------------------------- */

/* Раньше девять секций подряд шли ровным #fff — страница читалась как один
   бесконечный свиток. Даём светлым секциям едва заметную подложку: сверху
   тёплый фиолетовый отсвет, снизу — чистый белый. Это ~2% насыщенности,
   на глаз воспринимается как объём, а не как цветной фон. */
.about-us, .vuz-videos, .stories, .steps, .services, .faq {
  position: relative;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--tint) 0%, rgba(177,94,204,0) 62%),
    #fff;
}

/* Тонкая линия-разделитель между белыми секциями: не сплошная, а затухающая
   к краям — так секции разделены, но линия не режет макет пополам. */
.about-us::before, .stories::before, .services::before, .faq::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: min(1160px, 88vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
  pointer-events: none;
}

/* Серые плашки (#F6F6F6) — вместо плоской заливки мягкий вертикальный переход
   с фиолетовым подмесом сверху. */
.promise, .reviews {
  background: linear-gradient(180deg, #F7F3F9 0%, #F6F6F6 46%, #FFFFFF 100%);
}
.fears__plate {
  background: linear-gradient(165deg, #F8F4FA 0%, #F6F6F6 55%, #F1EFF3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

/* Тёмный герой: медленная «аврора» из двух фиолетовых пятен.
   Три ограничения, которые диктует существующая вёрстка:
   1. overflow у .hero не трогаем — v6 держит его visible намеренно, за нижнюю
      кромку свисает декоративная стрелка .hero__union;
   2. значит, слой нельзя двигать transform'ом — он вылезет за скруглённый угол
      на белый фон. Двигаем background-position: фон всегда обрезан по кромке
      элемента, куда бы ни уехал;
   3. используем ::before, а не ::after — на хабах уже занят .gas-hub .hero::after,
      и его специфичность выше нашей.
   z-index: -1 при isolation: isolate кладёт слой над заливкой секции, но под
   весь контент — детей трогать не нужно, их z-index остаётся как в v6. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(177,94,204,.34) 0%, rgba(177,94,204,0) 72%),
    radial-gradient(closest-side, rgba(206,127,232,.24) 0%, rgba(206,127,232,0) 74%);
  background-repeat: no-repeat;
  background-size: 78% 130%, 66% 116%;
  background-position: 8% 6%, 88% 82%;
  animation: gsAurora 26s ease-in-out infinite alternate;
}
@keyframes gsAurora {
  from { background-position: 8% 6%,  88% 82%; }
  to   { background-position: 26% 22%, 70% 62%; }
}

/* Параллакс: --scroll-y пишет v7-motion.js. Двигаем не фон (его уже занимает
   аврора), а декоративную стрелку Union — она и так absolute и торчит наружу,
   поэтому сдвиг ничего не ломает. Коэффициент маленький: 6% от прокрутки. */
.hero__union { translate: 0 calc(var(--scroll-y, 0) * 0.06px); }

/* ---------- 5. ШАПКА ------------------------------------------------------- */

/* При скролле pill сжимается и становится полупрозрачным стеклом — появляется
   ощущение слоя над контентом. Класс is-stuck ставит v7-motion.js. */
.site-header__pill {
  transition:
    height var(--t-slow) var(--ease-out),
    background-color var(--t-slow) var(--ease-out),
    box-shadow var(--t-slow) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out);
}
.site-header.is-stuck .site-header__pill {
  height: 68px;
  background: rgba(30,30,33,.78);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
          backdrop-filter: saturate(150%) blur(16px);
  box-shadow: var(--e3);
}
.site-header__logo img { transition: height var(--t-slow) var(--ease-out), opacity var(--t-fast) linear; }
.site-header.is-stuck .site-header__logo img { height: 46px; }

/* Подчёркивание в меню росло из центра в обе стороны. Пускаем слева направо —
   движение получает направление, а не «раскрывается». */
.site-header__nav a::after {
  transform-origin: left center;
  background: linear-gradient(90deg, var(--acc-400), #fff);
  height: 1.5px;
  transition: transform var(--t-base) var(--ease-out);
}
.site-header__nav a:hover::after { transform: scaleX(1); }

/* ---------- 6. КНОПКИ И CTA ------------------------------------------------ */

/* Главная кнопка была плоской заливкой #B15ECC. Даём градиент, тень своего же
   оттенка (объём, а не серая клякса) и блик, пробегающий на наведении. */
.hero__cta,
.btn-primary,
.service-card__btn,
.fears__cta-btn,
.services__more-btn,
.vuz-videos__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    filter var(--t-base) var(--ease-out);
}
.hero__cta, .fears__cta-btn, .services__more-btn, .vuz-videos__btn {
  background: var(--acc-grad);
  box-shadow: var(--e-acc);
}
.hero__cta:hover, .fears__cta-btn:hover,
.services__more-btn:hover, .vuz-videos__btn:hover {
  background: var(--acc-grad-h);
  transform: translateY(-3px);
  box-shadow: var(--e-acc-2);
  filter: none;                 /* v6 гасила brightness — здесь он не нужен */
}
.hero__cta:active, .fears__cta-btn:active,
.btn-primary:active, .final-cta__btn:active { transform: translateY(-1px) scale(.985); }

/* Блик. Псевдоэлемент едет по кнопке один раз за наведение. */
.hero__cta::after,
.btn-primary::after,
.fears__cta-btn::after,
.final-cta__btn::after {
  content: ""; position: absolute; z-index: -1;
  top: -60%; bottom: -60%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(0) skewX(-18deg);
  transition: transform 620ms var(--ease-out);
  pointer-events: none;
}
.hero__cta:hover::after,
.btn-primary:hover::after,
.fears__cta-btn:hover::after,
.final-cta__btn:hover::after { transform: translateX(360%) skewX(-18deg); }

.btn-primary {
  background: var(--acc-grad);
  color: #fff;
  box-shadow: var(--e-acc);
}
.btn-primary:hover {
  background: var(--acc-grad-h);
  transform: translateY(-3px);
  box-shadow: var(--e-acc-2);
}
.btn-outline {
  border-color: var(--hairline);
  background: #fff;
  box-shadow: var(--e1);
  transition: transform var(--t-base) var(--ease-spring),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.btn-outline:hover {
  background: #fff;
  color: var(--acc-700);
  border-color: var(--acc-200);
  transform: translateY(-2px);
  box-shadow: var(--e2);
}

/* Финальная плашка: вместо плоского фиолетового — градиент со «световым»
   пятном в левом верхнем углу, как источник света над плашкой. */
.final-cta__bar {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 130% at 12% -10%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 58%),
    var(--acc-grad);
  box-shadow: var(--e-acc-2);
}
.final-cta__btn {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--e2);
}
.final-cta__btn:hover { transform: translateY(-3px); box-shadow: var(--e3); }

/* ---------- 7. КАРТОЧКИ: ЕДИНАЯ ШКАЛА ГЛУБИНЫ ----------------------------- */

/* До этого одни карточки лежали без тени, другие получали 0 28px 56px, третьи
   0 8px 28px. Ставим всем одну ступень покоя (e1/e2) и одну ступень наведения. */
.promise-card,
.service-card,
.story-card,
.fear-card,
.review-card,
.country-card,
.media__item {
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
  will-change: transform;
}
.promise-card, .service-card, .fear-card { box-shadow: var(--e1); }
.story-card, .review-card { box-shadow: var(--e2); }

.promise-card:hover,
.service-card:hover,
.fear-card:hover,
.story-card:hover,
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--e3);
}
.country-card:hover, .media__item:hover { transform: translateY(-4px); box-shadow: var(--e3); }

/* Верхняя световая кромка на карточках — деталь, которая читается как
   «объект приподнят над фоном», а не нарисован на нём.

   .fear-card здесь СОЗНАТЕЛЬНО нет: в секции «100% наших студентов поступили»
   карточки разложены position: absolute по координатам зеро-блока Tilda, и
   position: relative сбивал их в обычный поток — они съезжали вниз, наползали
   на кнопку и на следующую секцию. Кромку им и так не рисуем. */
.promise-card, .service-card, .story-card, .review-card {
  position: relative;
}
.promise-card::before,
.service-card::before,
.story-card::before,
.review-card::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  border-radius: inherit; pointer-events: none;
}

/* Выделенный тариф: фиолетовая аура вместо серой тени — карточка «горит». */
.service-card--featured {
  box-shadow: var(--e-acc);
  border: 1px solid var(--acc-200);
}
.service-card--featured:hover { box-shadow: var(--e-acc-2); transform: translateY(-8px); }

/* Иконка обещания: мягкая фиолетовая подложка и лёгкий отклик на наведение
   карточки — микро-взаимодействие, привязанное к причине (навёл на карточку). */
.promise-card__icon {
  transition: transform var(--t-base) var(--ease-spring);
}
.promise-card:hover .promise-card__icon { transform: scale(1.08) rotate(-4deg); }

/* Стрелка страны уезжает вправо — направление = «перейти». */
.country-card__arrow { transition: transform var(--t-base) var(--ease-out); }
.country-card:hover .country-card__arrow { transform: translateX(5px); }

/* Фото в карточках слегка наезжает при наведении. Только на устройствах
   с настоящим курсором: на тачскрине hover «залипает». */
@media (hover: hover) and (pointer: fine) {
  .country-card__bg, .story-card__photo img, .review-card__avatar img {
    transition: transform 620ms var(--ease-out);
  }
  .country-card:hover .country-card__bg,
  .story-card:hover .story-card__photo img,
  .review-card:hover .review-card__avatar img { transform: scale(1.05); }
}

/* ---------- 8. СПИСКИ, FAQ, ШАГИ ------------------------------------------ */

.faq-item {
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  border-radius: var(--r-sm);
}
.faq-item:hover { background: var(--acc-050); }
.faq-item[open] { background: var(--acc-050); box-shadow: var(--e1); }

.about-list__item {
  transition: transform var(--t-base) var(--ease-out), color var(--t-fast) linear;
}
.about-list__item:hover { transform: translateX(4px); }

/* ---------- 9. ФОКУС И ДОСТУПНОСТЬ ---------------------------------------- */

/* Кольцо фокуса единое по сайту: два слоя, чтобы читалось и на белом, и на
   тёмной шапке, и на фиолетовой плашке. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acc-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.site-header a:focus-visible,
.final-cta__btn:focus-visible,
.hero__cta:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(177,94,204,.45);
}
/* Кликабельное должно выглядеть кликабельным (чек-лист навыка). */
button, summary, [role="button"], .faq-item > summary { cursor: pointer; }
/* Убирает 300ms задержку тапа на мобильных. */
a, button, summary, [role="button"] { touch-action: manipulation; }

/* ---------- 10. МОУШН ПРИ СКРОЛЛЕ ----------------------------------------- */

/* Было: opacity+translateY(40px) за 900ms — заметно «плывёт» и запаздывает за
   скроллом. Ставим 560ms, меньше сдвиг, добавляем едва заметный масштаб. */
.js .reveal {
  transform: translateY(22px) scale(.995);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}
.js .reveal.in { transform: none; }
/* Лесенка 30–50ms по рекомендации навыка (было 80ms — очередь тянулась 0.64s). */
.reveal[data-delay="1"] { transition-delay: 45ms; }
.reveal[data-delay="2"] { transition-delay: 90ms; }
.reveal[data-delay="3"] { transition-delay: 135ms; }
.reveal[data-delay="4"] { transition-delay: 180ms; }
.reveal[data-delay="5"] { transition-delay: 225ms; }
.reveal[data-delay="6"] { transition-delay: 270ms; }
.reveal[data-delay="7"] { transition-delay: 315ms; }
.reveal[data-delay="8"] { transition-delay: 360ms; }

/* Автолесенка для сеток, где data-delay не проставлен вручную. */
.js .gs-stagger > * { transition-delay: calc(var(--i, 0) * 45ms); }

/* Цифры статистики набираются счётчиком в v6.js; выравниваем моноширинно,
   чтобы блок не дёргался на каждом кадре. */
.hero-stat__value, .service-card__price { font-variant-numeric: tabular-nums; }

/* ---------- 11. РЕДУЦИРОВАННЫЙ МОУШН -------------------------------------- */

/* v6.css:929 уже гасит все animation/transition через !important. Здесь
   отдельно снимаем смещения, которые заданы не анимацией, а статикой. */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero__union { translate: none; }
  .js .reveal { transform: none; opacity: 1; }
}

/* ---------- 12. МОБИЛЬНОЕ ------------------------------------------------- */

@media (max-width: 760px) {
  /* Тени на мобильном мягче: на маленьком экране крупная тень съедает контраст. */
  .promise-card, .service-card, .story-card, .review-card, .fear-card { box-shadow: var(--e1); }
  /* Липкая шапка на мобильном не сжимается — там она и так низкая. */
  .site-header.is-stuck .site-header__pill { height: auto; }
  .about-us::before, .stories::before, .services::before, .faq::before { width: 92vw; }
}

/* ---------- 13. ШРИФТ: вес 600 рисовался курсивом --------------------------
   assets/fonts/ArtegraSans-SemiBold.woff — на самом деле файл
   ArtegraSans-SemiBoldItalic (внутреннее имя шрифта именно такое). Из-за
   этого КАЖДОЕ font-weight: 600 на сайте выводилось наклонным — отсюда
   «косые» 1 354+ и 100% в статистике первого экрана. В теме от этого уже
   уходили вручную, снижая кнопки до веса 500 (v6.css:459), но причину не
   искали.

   Правка сделана в источнике — assets/css/fonts.css, слот 600 переведён на
   ArtegraSans-Bold.woff. Здесь ничего не дублируем: полагаться на то, чьё
   @font-face окажется последним, ненадёжно, а правило должно жить в одном
   месте. Italic-файл на диске остался — если найдётся настоящий SemiBold,
   достаточно вернуть имя файла в fonts.css. */

/* ---------- 14. ХАБЫ И УСЛУГИ ----------------------------------------------
   /vysshee-obrazovanie, /srednee-obrazovanie, /onlayn-obrazovanie,
   /yazykovye-kursy, /uslugi и /about живут в скоупах .gas-hub / .gas-uslugi /
   .gas-about — это отдельная дизайн-система, вклеенная в ту же таблицу:
   свой шрифт (Inter, который на сайте вообще не подключён — браузер молча
   уходил на системный), своя шкала кеглей на 25–35% мельче остального сайта,
   свой ресет и свои цветовые переменные.

   Здесь приводим их к общей системе. Разметку и структуру не трогаем:
   специфичность у правил ниже ровно такая же, как у оригинальных, а
   выигрывают они порядком подключения (v7 грузится после v6). */

/* Шрифт. Одна строка чинит все правила, которые ссылаются на var(--font). */
.gas-hub, .gas-uslugi, .gas-about { --font: 'ArtegraSans', Arial, sans-serif; }

/* Токены общей системы внутрь скоупов, чтобы тени и радиусы совпадали. */
.gas-hub, .gas-uslugi {
  --card-bg: #F6F6F6;
  --border: rgba(29,29,31,.09);
}

/* Веса. ArtegraSans заканчивается на 700 — 800 и 900 браузер подделывал. */
.gas-hub .hero h1, .gas-hub .sec-title, .gas-hub .dc-title, .gas-hub .cta-title,
.gas-hub .hero-stat .num, .gas-hub .dc-m-val, .gas-hub .continent-title,
.gas-hub .visa-country, .gas-hub .step-n, .gas-hub--stipendii .schol-name,
.gas-hub--kursy .sp-name, .gas-hub--kursy .sc-price .val,
.gas-uslugi .hero h1, .gas-uslugi .hero-stat .num, .gas-uslugi .cat-header h2,
.gas-uslugi .card-title, .gas-uslugi .price-val, .gas-uslugi .session-price .val {
  font-weight: 700;
}
.gas-hub .sec-tag, .gas-hub .dc-label, .gas-hub .ctable tbody td:first-child,
.gas-hub .why-title, .gas-hub .step-t, .gas-hub .cta-tag, .gas-hub .schol-name,
.gas-hub .c-name, .gas-hub--kursy .cc-name, .gas-hub--kursy .spill,
.gas-hub--kursy .sc-name,
.gas-uslugi .badge, .gas-uslugi .session-strip h4 {
  font-weight: 600;
}

/* Кегли. Базовый текст был 12–13.5px — для страницы, которая продаёт услугу
   за сотни тысяч, это мелко и выглядит как чужая вставка. Поднимаем шкалу,
   пропорции между уровнями сохраняем. */
.gas-hub .hero h1 { font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -0.03em; line-height: 1.06; }
.gas-hub .hero-sub { font-size: 17px; line-height: 1.6; max-width: 60ch; }
.gas-hub .hero-tag, .gas-uslugi .hero-tag { font-size: 12px; letter-spacing: .14em; padding: 6px 15px; }
.gas-hub .hero-stat .num { font-size: 34px; letter-spacing: -0.02em; }
.gas-hub .hero-stat .lbl { font-size: 13px; }

.gas-hub .sec-title { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.02em; line-height: 1.14; }
.gas-hub .sec-tag { font-size: 11.5px; letter-spacing: .14em; padding: 5px 13px; }
.gas-hub .sec-desc { font-size: 17px; line-height: 1.6; max-width: 60ch; }

.gas-hub .dc-title { font-size: 25px; letter-spacing: -0.015em; }
.gas-hub .dc-label, .gas-hub .cta-tag { font-size: 11.5px; letter-spacing: .14em; }
.gas-hub .dc-text { font-size: 15px; line-height: 1.6; }
.gas-hub .dc-m-val { font-size: 16px; }
.gas-hub .dc-m-lbl { font-size: 11.5px; }
.gas-hub .dc-link { font-size: 14.5px; }

.gas-hub .ctable thead th { font-size: 13px; }
.gas-hub .ctable thead th:first-child { font-size: 11.5px; letter-spacing: .12em; }
.gas-hub .ctable tbody td, .gas-hub .ctable td, .gas-hub .ctable th { font-size: 15px; }
.gas-hub .cpill { font-size: 11.5px; padding: 3px 10px; }

.gas-hub .why-title { font-size: 16px; }
.gas-hub .why-text { font-size: 14px; line-height: 1.6; }
.gas-hub .step-n { font-size: 17px; }
.gas-hub .step-t { font-size: 14px; }
.gas-hub .step-d { font-size: 13.5px; line-height: 1.55; }

.gas-hub .continent-title { font-size: 22px; letter-spacing: -0.015em; }
.gas-hub .continent-count, .gas-hub .c-hint { font-size: 12.5px; }
.gas-hub .c-name { font-size: 16px; }
.gas-hub .rfbtn, .gas-hub--kursy .fbtn { font-size: 14px; }
.gas-hub .rf-label, .gas-hub--kursy .f-label { font-size: 12px; letter-spacing: .1em; }

.gas-hub .cta-title { font-size: 27px; letter-spacing: -0.015em; }
.gas-hub .cta-text { font-size: 15px; line-height: 1.6; }
.gas-hub .cta-btn { font-size: 15px; }

.gas-hub .schol-name, .gas-hub--stipendii .schol-name { font-size: 16px; }
.gas-hub .schol-country, .gas-hub .schol-cover, .gas-hub .schol-cover-pill { font-size: 12.5px; }
.gas-hub .schol-text, .gas-hub--stipendii .schol-text { font-size: 14px; line-height: 1.6; }
.gas-hub .schol-row, .gas-hub .visa-row { font-size: 13.5px; }

.gas-hub .visa-country { font-size: 18px; }
.gas-hub .visa-name { font-size: 11.5px; letter-spacing: .1em; }
.gas-hub .visa-text { font-size: 14px; line-height: 1.6; }

.gas-hub .faq-q-text { font-size: 16px; }
.gas-hub .faq-a p { font-size: 15px; line-height: 1.65; }

.gas-hub--kursy .hero-sub, .gas-hub--kursy .sec-desc { font-size: 17px; }
.gas-hub--kursy .cc-name { font-size: 16px; }
.gas-hub--kursy .cc-lang, .gas-hub--kursy .cc-count, .gas-hub--kursy .sp-lang { font-size: 12.5px; }
.gas-hub--kursy .sp-name { font-size: 22px; letter-spacing: -0.015em; }
.gas-hub--kursy .wtag, .gas-hub--kursy .spill, .gas-hub--kursy .sc-placeholder { font-size: 11.5px; }
.gas-hub--kursy .sc-name { font-size: 15px; }
.gas-hub--kursy .sc-city, .gas-hub--kursy .sctag { font-size: 12.5px; }
.gas-hub--kursy .sc-price .val { font-size: 17px; }
.gas-hub--kursy .sc-price .from { font-size: 11.5px; }
.gas-hub--kursy .btn-sc, .gas-hub--kursy .sc-add { font-size: 13.5px; }

.gas-uslugi .hero h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1.06; }
.gas-uslugi .hero-stat .num { font-size: 38px; letter-spacing: -0.02em; }
.gas-uslugi .hero-stat .lbl { font-size: 13px; }
.gas-uslugi .tab { font-size: 15px; }
.gas-uslugi .cat-header h2 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.02em; line-height: 1.14; }
.gas-uslugi .cat-header p { font-size: 17px; line-height: 1.6; max-width: 60ch; }
.gas-uslugi .badge, .gas-uslugi .price-lbl,
.gas-uslugi .incl-lbl, .gas-uslugi .fit-lbl { font-size: 11.5px; letter-spacing: .12em; }
.gas-uslugi .card-title { font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.015em; }
.gas-uslugi .card-desc, .gas-uslugi .incl-list li, .gas-uslugi .fit-text { font-size: 15px; line-height: 1.6; }
.gas-uslugi .price-val { font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -0.02em; }
.gas-uslugi .btn { font-size: 15px; }
.gas-uslugi .btn-sm { font-size: 14px; }
.gas-uslugi .session-strip h4 { font-size: 17px; }
.gas-uslugi .session-strip p { font-size: 14.5px; line-height: 1.55; }
.gas-uslugi .session-price .val { font-size: 24px; }
.gas-uslugi .session-price .lbl { font-size: 11.5px; letter-spacing: .12em; }

/* Ширина колонки. 1080px при кеглях остального сайта — узко: строка получается
   короче меры, и страница выглядит «сжатой» рядом с главной (там 1400). */
.gas-hub .page, .gas-uslugi .page,
.gas-hub .hero-inner, .gas-uslugi .hero-inner { max-width: 1240px; }

/* Вертикальный ритм — тот же, что на остальном сайте. */
.gas-hub .sec, .gas-uslugi .sec { padding-top: var(--sec-y); }
.gas-hub .hero, .gas-uslugi .hero { padding: clamp(72px, 8vw, 104px) 40px clamp(64px, 7vw, 88px); }

/* Глубина. В скоупах карточки лежали плоско — подключаем общую шкалу. */
.gas-hub .degree-card, .gas-hub .why-card, .gas-hub .c-card, .gas-hub .schol-card,
.gas-hub .visa-card, .gas-hub .step, .gas-hub--kursy .cc-card, .gas-hub--kursy .sc-card,
.gas-uslugi .card, .gas-uslugi .session-strip {
  box-shadow: var(--e1);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.gas-hub .degree-card:hover, .gas-hub .why-card:hover, .gas-hub .c-card:hover,
.gas-hub .schol-card:hover, .gas-hub .visa-card:hover,
.gas-hub--kursy .cc-card:hover, .gas-hub--kursy .sc-card:hover,
.gas-uslugi .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--e3);
}
.gas-hub .ctable { box-shadow: var(--e1); border-color: var(--border); }

/* Тёмные карточки на светлом фоне: своя тень, серая под ними выглядит грязно. */
.gas-hub .degree-card, .gas-hub .why-card { box-shadow: 0 12px 32px -18px rgba(38,38,40,.55); }
.gas-hub .degree-card:hover, .gas-hub .why-card:hover { box-shadow: 0 26px 56px -22px rgba(38,38,40,.65); }
.gas-hub .degree-card:nth-child(2), .gas-hub .why-card:nth-child(2) { box-shadow: var(--e-acc); }
.gas-hub .degree-card:nth-child(2):hover, .gas-hub .why-card:nth-child(2):hover { box-shadow: var(--e-acc-2); }

/* Кнопки скоупов — на общий градиент с бликом. */
.gas-hub .cta-btn, .gas-uslugi .btn, .gas-hub--kursy .btn-sc {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}
.gas-hub .cta-btn:hover, .gas-uslugi .btn:hover, .gas-hub--kursy .btn-sc:hover {
  transform: translateY(-3px);
}

/* Первый экран хабов. У .gas-hub уже есть свой слой ::after (бледное
   фиолетовое пятно справа) — усиливаем его, а не добавляем второй, поэтому
   общую аврору с ::before здесь гасим. У .gas-uslugi слоя не было: заводим
   такой же. Оба .hero стоят с overflow: hidden — за кромку ничего не вылезет. */
/* У .gas-uslugi .hero не было ни position, ни overflow — без них новый слой
   вылез бы за тёмную полосу. Плашка прямоугольная, за её кромку в этом скоупе
   ничего не свисает, так что обрезка безопасна. */
.gas-uslugi .hero { position: relative; overflow: hidden; }
.gas-hub .hero::before, .gas-uslugi .hero::before { display: none; }
.gas-hub .hero::after, .gas-uslugi .hero::after {
  content: ""; position: absolute; pointer-events: none;
  top: -30%; right: -12%; bottom: auto; left: auto;
  width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(177,94,204,.26) 0%, rgba(177,94,204,0) 72%);
}

/* Заголовок с акцентом — тот же градиент по тексту, что в остальных секциях. */
.gas-hub .hero h1 em, .gas-uslugi .hero h1 em {
  background: linear-gradient(100deg, #CE7FE8 0%, #B15ECC 55%, #8A3FA6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 760px) {
  .gas-hub .hero, .gas-uslugi .hero { padding-left: 20px; padding-right: 20px; }
  .gas-hub .degree-card:hover, .gas-hub .why-card:hover, .gas-hub .c-card:hover,
  .gas-uslugi .card:hover { transform: none; }
}

/* ---------- 15. СЕКЦИЯ «100% НАШИХ СТУДЕНТОВ ПОСТУПИЛИ» --------------------
   Порт зеро-блока Tilda: карточки разложены абсолютно, в процентах от
   артборда 1323×1503, а .fears-grid = min(1323px, 96vw) с aspect-ratio.
   То есть коробки карточек масштабируются вместе с окном, а текст внутри был
   зафиксирован на 24px. Как только окно уже 1378px (или включён зум браузера —
   он ровно так же сужает CSS-вьюпорт), текст перестаёт помещаться в коробку,
   вылезает вниз и наезжает на заголовок «Получите консультацию от наших
   специалистов». На скриншоте видно именно это.

   Привязываем внутренности карточки к ширине сетки через контейнерные
   единицы: 1cqw = 1% ширины .fears-grid, поэтому 24px от артборда 1323 — это
   ровно 1.814cqw. Теперь карточка и её содержимое масштабируются синхронно и
   пропорции остаются 1:1 с оригиналом на любой ширине.

   Нижняя граница max(14px, …) держит читаемость у самой границы с мобильной
   раскладкой (там с 760px включается статичный зигзаг). */
@media (min-width: 761px) {
  .fears-grid { container-type: size; }
  .fear-card {
    padding: 1.89cqw 2.72cqw;                    /* 25/36 от 1323 */
    gap: 3.02cqw;                                /* 40 */
    border-radius: max(10px, 1.21cqw);           /* 16 */
  }
  .fear-card p {
    font-size: max(14px, 1.814cqw);              /* 24 */
    line-height: 1.4;
  }
  .fear-card__avatar {
    width: max(38px, 4.84cqw); height: max(38px, 4.84cqw);   /* 64 */
  }
}

/* Запас между сеткой и призывом: даже если карточка окажется чуть выше
   расчётной коробки, она не упрётся в заголовок. */
.fears__cta-title { margin-top: clamp(72px, 8vw, 120px); }

/* ---------- 16. МОБИЛЬНОЕ: ПРОВЕРЕНО НА iPhone 390×844 ----------------------
   Снято в headless Chrome с эмуляцией 4G и CPU ×4. Горизонтального скролла
   нет ни на одной странице, CLS 0.009 — с этим всё в порядке. Правим то,
   что видно на снимках. */

@media (max-width: 768px) {
  /* Первый экран наполовину пустой: между кнопкой и статистикой 110px
     мёртвого поля, доставшихся от десктопной раскладки. На телефоне это
     треть экрана впустую — статистика уезжает за сгиб. */
  .hero__ctas { margin-top: 30px; }
  .hero__stats { margin-top: 48px; }

  /* Тач-цели. Пилюли Telegram и WhatsApp — 34px в высоту при минимуме 44
     по рекомендациям Apple и Material. Добавляем высоту, не трогая
     оформление: вертикальный padding вместо фиксированной высоты. */
  .contact-pill { min-height: 44px; padding-top: 0; padding-bottom: 0; }

  /* Подписи под цифрами были 11px — ниже порога читаемости на телефоне. */
  .hero-stat__label { font-size: 12px; }
}

/* Подписи в карточках историй — 12px, мелко на любом экране. */
.story-card__footer, .story-card__more { font-size: 13px; }

/* ---------- 17. ЯЗЫЧОК ПОД ПЕРВЫМ ЭКРАНОМ -----------------------------------
   Убран по решению заказчика.

   Декоративный Union.svg из оригинала Tilda свисал за нижнюю кромку тёмной
   секции. В нашей вёрстке он не встал: при z-index ниже статистики сквозь
   него прочерчивались вертикальные разделители между цифрами, при z-index
   выше — он накрывал подписи «СТУДЕНТОВ» и «ПОСТУПЛЕНИЙ». Пространства
   между нижней строкой статистики и краем секции для него просто нет.

   Прячем совсем. На мобильном v6 и так его скрывала (v6.css:426) — теперь
   поведение одинаковое на всех ширинах. Разметку не трогаем: чтобы вернуть,
   достаточно удалить это правило. */
.hero__union { display: none; }