/* =====================================================================
   Circus Asia — global stylesheet
   1. Tokens & reset      6. Hero
   2. Typography          7. Cards (programs / events / countries)
   3. Layout & utilities  8. Tour timeline
   4. Buttons & badges    9. Forms
   5. Header & nav       10. Footer, animations, responsive
   ===================================================================== */

/* ---------- 1. Tokens & reset ---------------------------------------- */
:root {
  color-scheme: light;

  /* =================================================================
     ЦИРКОВАЯ ПАЛИТРА — ТОЛЬКО ПЛОСКИЕ ЦВЕТА.
     В проекте нет ни одного градиента: яркость даёт чистый цвет,
     крупные фотографии, контрастные блоки и мультяшный декор.
     ================================================================= */

  /* ---- Девять красок цирковой афиши ---- */
  --c-red: #e8112d;
  --c-red-dark: #b80d23;
  --c-yellow: #ffc800;
  --c-yellow-soft: #ffe27a;
  --c-orange: #ff7a00;
  --c-sky: #35b8f0;
  --c-blue: #1b4fd8;
  --c-blue-dark: #133a9e;
  --c-violet: #7b3fe4;
  --c-violet-dark: #5b21b6;
  --c-pink: #ff4d9d;
  --c-green: #12b76a;
  --c-gold: #e39400;
  --c-cream: #fff6e6;
  --c-cream-2: #fdeed2;
  --c-ink: #1a1033;

  /* ---- Совместимость со старыми именами токенов ----
     Компоненты по всему проекту ссылаются на них; значения теперь
     плоские, без единого gradient(). */
  --page: #fff6e6;
  --page-2: #fdeed2;
  --page-3: #ffe9f3;
  --surface: #ffffff;
  --surface-2: #fff6e6;

  --tint-rgb: 26, 16, 51;
  --chrome-rgb: 255, 255, 255;
  /* Вуаль поверх фото в Hero — один плоский тон, без перелива */
  --hero-veil: rgba(26, 16, 51, 0.42);
  --hero-tint-red: rgba(232, 17, 45, 0.4);
  --scrim-rgb: 26, 16, 51;

  --bordo: #b80d23;
  --bordo-deep: #97072d;
  --red-deep: #c00f26;
  --red: #e8112d;
  --red-soft: #ff6b8a;
  --red-rgb: 232, 17, 45;
  --magenta: #ff4d9d;
  --magenta-rgb: 255, 77, 157;
  --pink: #ff4d9d;
  --pink-rgb: 255, 77, 157;
  --violet: #7b3fe4;
  --violet-rgb: 123, 63, 228;
  --purple: #5b21b6;
  --blue: #1b4fd8;
  --blue-rgb: 27, 79, 216;
  --azure: #35b8f0;
  --azure-rgb: 53, 184, 240;
  --teal: #14b8a6;
  --emerald: #12b76a;
  --emerald-rgb: 18, 183, 106;
  --amber: #ffc800;
  --amber-rgb: 255, 200, 0;
  --orange: #ff7a00;
  --orange-rgb: 255, 122, 0;
  --yellow: #ffc800;
  --yellow-rgb: 255, 200, 0;

  /* «Золото» — исторически имя акцентного тона. Теперь это плотный
     оранжево-золотой, читаемый на кремовом фоне. */
  --gold: #e39400;
  --gold-deep: #b36f00;
  --gold-light: #ffb200;
  --gold-bright: #ffc800;
  --gold-glow: #ffc800;
  --gold-rgb: 227, 148, 0;
  --champagne: #5b21b6;
  --ivory: #fffdf8;

  /* ---- Текст ---- */
  --text: #1a1033;
  --text-dim: #45375f;
  --text-mute: #6f6288;
  --on-photo: #ffffff;

  --line: rgba(26, 16, 51, 0.18);
  --line-soft: rgba(26, 16, 51, 0.12);

  /* ---- Бывшие «градиенты» — теперь плоские заливки ----
     Имена сохранены ради обратной совместимости со всеми страницами. */
  --grad-gold: #ffc800;
  --grad-circus-text: #e8112d;
  --grad-gold-text: #e8112d;
  --grad-red: #e8112d;
  --grad-bordo: #b80d23;
  --grad-violet: #7b3fe4;
  --grad-blue: #1b4fd8;
  --grad-amber: #ff7a00;
  --grad-circus: #e8112d;
  --grad-dark: #fff6e6;

  --veil-body: rgba(255, 246, 230, 0.96);
  --veil-section: rgba(255, 246, 230, 0.94);
  /* заливка пустых мест под картинки */
  --slot-fill: #efe3d2;

  /* ---- Тени: мягкие, цветные, без свечения-градиентов ---- */
  --glow-gold: 0 10px 0 -4px rgba(227, 148, 0, 0.25);
  --glow-red: 0 10px 0 -4px rgba(232, 17, 45, 0.25);
  --glow-violet: 0 10px 0 -4px rgba(123, 63, 228, 0.25);
  --glow-blue: 0 10px 0 -4px rgba(27, 79, 216, 0.25);
  --shadow-lg: 0 22px 46px -26px rgba(26, 16, 51, 0.4);
  --shadow-md: 0 14px 30px -20px rgba(26, 16, 51, 0.32);
  /* Мультяшная «печатная» тень афиши: плотный цветной сдвиг */
  --shadow-toon: 6px 8px 0 rgba(26, 16, 51, 0.16);
  --shadow-toon-lg: 10px 14px 0 rgba(26, 16, 51, 0.14);

  --font-sans:
    "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  /* Единая типографика: Inter для заголовков и текста.
     Разница создаётся весом, размером и цветом, а не вторым шрифтом. */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --container: 1280px;
  --gutter: clamp(18px, 4vw, 48px);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-toon: 28px;
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.42vw + 14px, 17px);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
/* Фон под открытым мобильным меню: body фиксируется, сдвиг хранит
   main.js и возвращает его при закрытии (см. lockScroll). */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* Фотоподложка всего сайта: реальная цирковая сцена под бордовой
   вуалью. Лежит ниже контента и не мешает читаемости. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--page);
}
/* Цветное «дыхание» сцены за контентом: мягкие пятна софитов,
   которые не мешают тексту, но добавляют глубины бордовому фону. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(216, 26, 66, 0.17);
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h1,
h2,
h3,
h4,
p,
li,
dd,
td,
th {
  overflow-wrap: break-word;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: rgba(216, 26, 66, 0.28);
  color: var(--text);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--grad-circus);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- 2. Typography -------------------------------------------- */
.display-1 {
  font-size: clamp(2.7rem, 8vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.display-2 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.display-3 {
  font-size: clamp(1.65rem, 3.1vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.h4 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.text-gold {
  background: var(--grad-gold-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Заголовок, залитый цирковым градиентом */
.text-circus {
  background: var(--grad-circus);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}
.kicker::before {
  content: "";
  width: clamp(28px, 5vw, 54px);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-circus);
}
.kicker--center {
  justify-content: center;
}
.kicker--center::after {
  content: "";
  width: clamp(28px, 5vw, 54px);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-circus);
}
.lead {
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  color: var(--text-dim);
  max-width: 64ch;
}
.muted {
  color: var(--text-mute);
}
.small {
  font-size: 0.86rem;
}
.uppercase-wide {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 600;
}

/* ---------- 2b. Icon system ------------------------------------------ */
/* Линейные SVG 24×24, currentColor, единая оптическая плотность.
   Разметка: <span class="icon" data-icon="phone"></span> */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  line-height: 0;
  vertical-align: -0.18em;
  color: inherit;
}
.icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.icon--sm {
  width: 1em;
  height: 1em;
}
.icon--lg {
  width: 1.5em;
  height: 1.5em;
}
.icon--xl {
  width: 22px;
  height: 22px;
}
.icon--gold {
  color: var(--gold);
}

/* Иконка внутри кнопки/ссылки: выравнивание по тексту */
.btn .icon,
.link-more .icon,
.nav__link .icon {
  vertical-align: middle;
}

/* «Плитка» под иконку — карточки преимуществ, контакты, фичи */
.icon-tile {
  --tile-rgb: var(--gold-rgb);
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tile-rgb);
  border: 1px solid rgba(var(--tile-rgb), 0.35);
  box-shadow: 0 8px 20px -14px rgba(var(--tile-rgb), 0.9);
  color: var(--gold);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
}
.icon-tile .icon-svg {
  width: 21px;
  height: 21px;
}

/* --- иконки в составных компонентах --------------------------------- */
.btn .icon {
  width: 1.05em;
  height: 1.05em;
}
.btn--lg .icon {
  width: 1.1em;
  height: 1.1em;
}
.btn .card__ext {
  opacity: 0.65;
}

.lang__globe {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}
.lang__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.lang.is-open .lang__chevron {
  transform: rotate(180deg);
}

.to-top .icon {
  width: 18px;
  height: 18px;
}

.filters__label .icon {
  margin-right: 8px;
  color: var(--gold);
  vertical-align: -0.15em;
}

/* карточка мероприятия */
.card__place {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-mute);
}
.card__place .icon {
  margin-top: 0.15em;
  color: var(--gold);
}
.card__meta dt {
  display: flex;
  align-items: center;
  gap: 7px;
}
.card__meta dt .icon {
  color: var(--gold);
  opacity: 0.85;
}

/* timeline гастролей */
.tour__dates,
.tour__venue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tour__dates .icon,
.tour__venue .icon {
  margin-top: 0.18em;
  color: var(--tc, var(--gold));
  opacity: 0.95;
}

/* пустые состояния */
.empty-state .icon--xl {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  color: var(--gold);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .link-more .icon,
  .lang__chevron,
  .mobile-menu__link .icon {
    transition: none;
  }
  .lang-modal__dialog {
    transform: none;
    transition: opacity 0.2s linear;
  }
}

/* ---------- 3. Layout & utilities ------------------------------------ */
.container {
  width: 100%;
  min-width: 0;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: 900px;
}
.section {
  padding: clamp(64px, 8vw, 132px) 0;
  position: relative;
  /* стартовый сдвиг scroll-анимаций не должен давать горизонтальный скролл */
  overflow-x: clip;
  /* Секции ниже экрана не рендерятся, пока не подъедут к нему — на
     длинной странице это снимает основную часть работы при скролле.
     `auto` в contain-intrinsic-size велит браузеру запомнить настоящую
     высоту после первого показа, поэтому скроллбар не прыгает. */
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.section--tight {
  padding: clamp(48px, 5vw, 84px) 0;
}
.section--alt {
  background: var(--grad-dark);
  position: relative;
}
/* Фотофон отдельных секций: снимок сцены под плотной бордовой вуалью.
   Текст остаётся на «бархате», а за ним читается настоящий цирк. */
.section--alt#tour,
.section--alt#tickets,
.section--alt#about {
  background:
    var(--veil-section),
    var(--slot-fill);
}
.section--alt#events {
  background:
    var(--veil-section),
    var(--slot-fill);
}
.section--alt#contacts {
  background:
    var(--veil-section),
    var(--slot-fill);
}
/* Тонкая цветная линия-«гирлянда» на стыке секций */
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-circus);
  opacity: 0.5;
}
.section--alt::before {
  top: 0;
}
.section--alt::after {
  bottom: 0;
  transform: scaleX(-1);
}
.section--framed {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* Декоративная лента под заголовком секции */
.section-head--center::after {
  content: "";
  display: block;
  width: clamp(90px, 12vw, 150px);
  height: 3px;
  margin: 28px auto 0;
  border-radius: 3px;
  background: var(--grad-circus);
  box-shadow: 0 6px 18px -8px rgba(var(--red-rgb), 0.8);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4.6vw, 64px);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  margin-top: 18px;
}
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  gap: clamp(14px, 1.7vw, 24px);
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stack-lg {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
}

.rule {
  height: 2px;
  border-radius: 2px;
  background: rgba(240, 180, 41, 0.51);
  border: 0;
  margin: 0;
}
.glass {
  background: var(--tint-rgb);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* Два софита по углам. Раньше это были : :before/::after с
     filter: blur(90px) на пятнах в 46vw — такой радиус браузер
     пересчитывал при каждой перерисовке секции. Тот же вид даёт
     градиент с плавным затуханием,
    а псевдоэлементы освободились. */
  background-color: rgba(216, 26, 66, 0.13);
  background-size:
    min(760px, 80%) 320px,
    46vw 46vw,
    42vw 42vw;
  background-position:
    center 60px,
    -15vw -13vw,
    right -13vw bottom -15vw;
  background-repeat: no-repeat;
}
/* Лёгкие блики-конфетти, медленно плывущие вверх. Слой едет через
   transform — это композитинг на GPU. Анимация background-position
   заставляла перерисовывать всю секцию каждый кадр. */
.ornament::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 300px);
  background-color: rgba(212, 175, 55, 0.39);
  background-size: 300px 300px;
  animation: sparkleDrift 46s linear infinite;
  will-change: transform;
}
@keyframes sparkleDrift {
  to {
    transform: translate3d(0, -300px, 0);
  }
}
.ornament {
  box-shadow: none;
}

.section > .container {
  position: relative;
  z-index: 1;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* breadcrumbs */
.breadcrumbs {
  padding: calc(var(--header-total) + 20px) 0 0;
  font-size: 0.8rem;
  color: var(--text-mute);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "—";
  margin-right: 8px;
  color: var(--line);
}
.breadcrumbs a:hover {
  color: var(--gold);
}

/* ---------- 4. Buttons & badges -------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--btn-bg);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    color 0.3s,
    border-color 0.3s,
    background-color 0.3s;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
/* Блик, пробегающий по кнопке при наведении */
.btn--gold::after,
.btn--red::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.33);
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease);
}
.btn--gold:hover::after,
.btn--red:hover::after {
  transform: translateX(130%);
}
.btn--gold {
  background: #b8891c;
  color: #2a1704;
  border-color: transparent;
  box-shadow:
    0 14px 32px -14px rgba(212, 175, 55, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.btn--gold:hover {
  box-shadow:
    0 20px 46px -14px rgba(212, 175, 55, 1),
    0 0 34px -8px rgba(216, 26, 66, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
/* Главный CTA «Купить билет»: тёплая пульсация света вокруг кнопки */
/* Пульсирующий ореол CTA. Был анимацией box-shadow — она перерисовывала
   кнопку каждый кадр. Стал кольцом на псевдоэлементе: расходится через
   transform: scale и гаснет по opacity, всё на композиторе. */
.btn--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(216, 26, 66, 0.45);
  animation: ctaGlow 3.6s var(--ease) infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes ctaGlow {
  0% {
    transform: scale(0.88);
    opacity: 0.75;
  }
  55%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.btn--ghost {
  color: var(--champagne);
  border-color: var(--line);
}
.btn--ghost:hover {
  color: var(--champagne);
  border: 1px solid transparent;
  background:
    var(--tint-rgb) padding-box,
    var(--grad-circus) border-box;
  box-shadow: 0 14px 32px -18px rgba(216, 26, 66, 0.6);
}
.btn--red {
  background: var(--grad-red);
  color: var(--ivory);
  border-color: rgba(255, 226, 150, 0.32);
  box-shadow: 0 14px 32px -16px rgba(216, 26, 66, 0.9);
}
.btn--red:hover {
  box-shadow:
    0 20px 44px -16px rgba(216, 26, 66, 1),
    0 0 30px -10px rgba(240, 180, 41, 0.6);
}
.btn--sm {
  min-height: 40px;
  padding: 10px 17px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  gap: 8px;
}
.btn--block {
  width: 100%;
}
.btn[disabled],
.btn.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.7);
  background: rgba(var(--tint-rgb), 0.05);
  color: var(--text-mute);
  border-color: var(--line-soft);
  box-shadow: none;
  transform: none;
}
.btn__arrow {
  transition: transform 0.35s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.link-more .icon {
  transition: transform 0.3s var(--ease);
}
.link-more:hover .icon {
  transform: translateX(5px);
}
.link-more {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.link-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-circus);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link-more:hover::after,
a:hover > .link-more::after,
.program-card:hover .link-more::after {
  transform: scaleX(1);
}
.link-more:hover {
  color: var(--red-deep);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(var(--tint-rgb), 0.05);
  color: var(--text-dim);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--soon {
  color: #8a5c05;
  border-color: rgba(234, 154, 16, 0.5);
  background: rgba(240, 180, 41, 0.26);
}
.badge--onsale {
  color: #0a6f49;
  border-color: rgba(15, 157, 103, 0.45);
  background: rgba(15, 157, 103, 0.22);
}
.badge--past,
.badge--closed {
  color: var(--text-mute);
}
.tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(var(--tint-rgb), 0.04);
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

/* ---------- 5. Header & navigation ----------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  will-change: transform;
  transition:
    transform 0.45s var(--ease),
    background-color 0.4s var(--ease),
    border-color 0.4s,
    box-shadow 0.4s;
}
/* Шапка уезжает вверх при прокрутке вниз и возвращается при прокрутке
   вверх — экран отдаётся контенту. Класс ставит initHeader() в main.js. */
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header.is-scrolled {
  background: rgba(var(--chrome-rgb), 0.82);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom-color: transparent;
  box-shadow:
    0 1px 0 0 rgba(var(--tint-rgb), 0.06) inset,
    0 18px 44px -30px rgba(20, 4, 11, 0.75);
}
/* Шапка подбирается при прокрутке — экран отдаётся контенту.
   Меняем только высоту .header-inner: сам токен --header-h остаётся
   прежним, иначе «поехали» бы отступы секций под шапкой. */
.site-header.is-scrolled .header-inner {
  height: max(58px, calc(var(--header-h) - 16px));
}
.site-header.is-scrolled .brand__mark {
  height: 36px;
}
/* Цветная «гирлянда» под закреплённой шапкой — затухает к краям */
.site-header.is-scrolled::after,
.site-header--solid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grad-circus);
  opacity: 0.9;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Пока шапка лежит поверх тёмной фотографии Hero — интерфейс светлый.
   При открытом мобильном меню и на страницах без Hero-фотографии
   (класс .site-header--solid) правило снимается: там фон светлый. */
body:not(.is-locked) .site-header:not(.is-scrolled):not(.site-header--solid) {
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.84);
  --text-mute: rgba(255, 255, 255, 0.62);
  --champagne: #ffe9a8;
  --gold: var(--gold-glow);
  --gold-light: #ffe9a8;
  --line: rgba(245, 207, 91, 0.45);
  --line-soft: rgba(255, 255, 255, 0.22);
  --tint-rgb: 255, 255, 255;
  --chrome-rgb: 18, 7, 20;
  --grad-gold-text: var(--grad-gold);
}
.site-header--solid {
  background: rgba(var(--chrome-rgb), 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line-soft);
}
.header-inner {
  /* Три зоны: логотип слева, меню строго по центру шапки, язык справа.
     Колонки по краям равны, поэтому меню не съезжает при смене языка
     и длины пунктов. Явные grid-column держат раскладку и на мобильных,
     где .nav скрыта: логотип остаётся слева, действия — справа. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  height: var(--header-h);
  transition: height 0.4s var(--ease);
}
.brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* небольшой отступ логотипа от края контейнера */
  margin-left: clamp(6px, 1vw, 16px);
}
.brand__mark {
  width: auto;
  height: 42px;
  flex: none;
  object-fit: contain;
  /* Знак самодостаточен: кремовый контур вокруг букв отделяет логотип
     и от белой шапки, и от фиолетового подвала, и от фото Hero.
     Прежнее красное свечение осталось от объёмного золотого логотипа. */
  transition:
    transform 0.5s var(--ease),
    height 0.4s var(--ease);
}
.brand:hover .brand__mark {
  transform: scale(1.05);
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  /* название бренда уже есть в самом логотипе */
  display: none;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav {
  grid-column: 2;
  justify-self: center;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.5vw, 10px);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px clamp(10px, 1vw, 16px);
  border-radius: 999px;
  transition:
    color 0.3s,
    background-color 0.3s var(--ease);
}
/* Короткий градиентный штрих вместо подчёркивания во всю ширину */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--grad-circus);
  transform: scaleX(0);
  transition: transform 0.38s var(--ease);
}
/* Мягкая «таблетка» проявляется под курсором и под активным пунктом */
.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--champagne);
  background: rgba(var(--tint-rgb), 0.07);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}
.nav__link.is-active {
  color: var(--gold-light);
}

.header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Кнопка билета из шапки убрана, разделительный волосок перед языком
   больше не нужен: зоны и так разведены сеткой. */
.nav + .header-actions {
  margin-left: 0;
  padding-left: 0;
}
.nav + .header-actions::before {
  content: none;
}

/* language switcher */
.lang {
  position: relative;
}
.lang__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    border-color 0.3s,
    color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
}
.lang__globe {
  transition: opacity 0.3s;
}
.lang__toggle:hover,
.lang.is-open .lang__toggle {
  border-color: rgba(var(--gold-rgb), 0.65);
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.1);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08);
}
.lang__toggle:hover .lang__globe {
  opacity: 1;
}
/* Модальное окно выбора языка: живёт в конце <body>, поэтому не зависит
   от позиционирования шапки и одинаково открывается на всех страницах. */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-t)) var(--pad-r) calc(24px + var(--safe-b))
    var(--pad-l);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.32s var(--ease),
    visibility 0.32s;
}
.lang-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.lang-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 2, 6, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lang-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px clamp(20px, 4vw, 38px) clamp(24px, 4vw, 34px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--chrome-rgb);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition:
    transform 0.36s var(--ease),
    opacity 0.36s var(--ease);
  opacity: 0;
}
.lang-modal.is-open .lang-modal__dialog {
  transform: none;
  opacity: 1;
}
/* золотой отблеск по верхней кромке — как у карточек программ */
.lang-modal__dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--gold-rgb);
}
.lang-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition:
    color 0.25s,
    background-color 0.25s;
}
.lang-modal__close:hover {
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.1);
}
.lang-modal__close .icon {
  width: 18px;
  height: 18px;
}
.lang-modal__globe {
  width: 26px;
  height: 26px;
  color: var(--gold);
  opacity: 0.8;
}
.lang-modal__title {
  margin: 10px 0 22px;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  letter-spacing: 0.02em;
}
.lang-modal__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), 0.03);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-dim);
  text-align: left;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.lang-option:hover {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--champagne);
}
.lang-option[aria-selected="true"] {
  border-color: rgba(var(--gold-rgb), 0.7);
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-light);
}
.lang-option__code {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.05);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.lang-option[aria-selected="true"] .lang-option__code {
  border-color: rgba(var(--gold-rgb), 0.45);
  color: var(--gold);
}
.lang-option__label {
  flex: 1 1 auto;
  min-width: 0;
}
.lang-option__check {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.25s;
}
.lang-option[aria-selected="true"] .lang-option__check {
  opacity: 1;
}
@media (max-width: 560px) {
  .lang-modal__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}
.burger:hover,
.burger.is-active {
  border-color: rgba(var(--gold-rgb), 0.6);
  background: rgba(var(--gold-rgb), 0.1);
}
.burger span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 1.5px;
  background: var(--champagne);
  transition:
    transform 0.35s var(--ease),
    opacity 0.2s,
    width 0.35s var(--ease);
}
.burger span:nth-child(1) {
  top: 17px;
}
.burger span:nth-child(2) {
  top: 22px;
  width: 14px;
}
.burger span:nth-child(3) {
  top: 27px;
}
.burger.is-active span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.burger.is-active span:nth-child(2) {
  opacity: 0;
}
.burger.is-active span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-total) + 24px) var(--pad-r)
    calc(32px + var(--safe-b)) var(--pad-l);
  background: var(--chrome-rgb);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease),
    visibility 0.4s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu__list {
  display: grid;
  gap: 4px;
  margin-bottom: 30px;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
}
.mobile-menu.is-open .mobile-menu__link {
  animation: menuIn 0.5s var(--ease) forwards;
}
.mobile-menu__link .icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
  opacity: 0.55;
  transition:
    transform 0.35s var(--ease),
    opacity 0.35s var(--ease);
}
.mobile-menu__link:hover .icon,
.mobile-menu__link:focus-visible .icon {
  opacity: 1;
  transform: translateX(4px);
}
.mobile-menu__link.is-active {
  position: relative;
  color: var(--c-red);
  font-weight: 800;
}
/* В мобильном меню активную страницу отмечает короткая красная метка слева */
.mobile-menu__link.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 5px;
  height: 26px;
  margin-top: -13px;
  border-radius: 3px;
  background: var(--c-red);
  transform-origin: 50% 50%;
  transition: transform 0.3s var(--ease-pop);
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.is-open .mobile-menu__link.is-active::before {
    animation: navMarkIn 0.4s var(--ease-pop) 0.18s both;
  }
}
@keyframes navMarkIn {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.mobile-menu__list li:nth-child(3n + 1) .mobile-menu__link:hover {
  color: var(--red-soft);
}
.mobile-menu__list li:nth-child(3n + 2) .mobile-menu__link:hover {
  color: var(--gold);
}
.mobile-menu__list li:nth-child(3n + 3) .mobile-menu__link:hover {
  color: var(--violet-soft, #a78bfa);
}
.mobile-menu__footer {
  margin-top: auto;
  display: grid;
  gap: 14px;
}
.mobile-menu__contacts {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.mobile-menu__contacts a:hover {
  color: var(--gold);
}
@keyframes menuIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 6. Hero --------------------------------------------------- */
.hero {
  /* Сцена всегда тёмная и цветная — поэтому внутри Hero действует
     собственный набор токенов со светлым текстом. */
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.84);
  --text-mute: rgba(255, 255, 255, 0.64);
  --champagne: #ffe9a8;
  --gold: var(--gold-glow);
  --gold-light: #ffe9a8;
  --line: rgba(245, 207, 91, 0.42);
  --line-soft: rgba(255, 255, 255, 0.18);
  --tint-rgb: 255, 255, 255;
  --grad-gold-text: var(--grad-gold);

  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-total) + 60px) 0 clamp(56px, 7vw, 110px);
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
}
/* Веер прожекторов из-под купола: медленно качается, как настоящий свет */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -42%;
  width: 190%;
  height: 150%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(3px);
  -webkit-mask-image: none;
  mask-image: none;
  animation: heroSweep 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroSweep {
  from {
    transform: translateX(-50%) rotate(-3.5deg);
  }
  to {
    transform: translateX(-50%) rotate(3.5deg);
  }
}
/* Конфетти и блики поверх вуали */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  /* Слой выше секции на шаг тайла: он уезжает вверх через transform
     (композитинг на GPU) вместо анимации background-position, которая
     перерисовывала весь hero каждый кадр. */
  height: calc(100% + 380px);
  pointer-events: none;
  background-size: 380px 380px;
  animation: heroSparks 34s linear infinite;
  will-change: transform;
}
@keyframes heroSparks {
  to {
    transform: translate3d(0, -380px, 0);
  }
}
.hero--page {
  /* На внутренних страницах кадр плотнее: заголовок и «хлебные крошки»
     должны читаться поверх светлых участков фотографии. */
  --hero-veil: rgba(10, 3, 10, 0.92);
  min-height: min(74svh, 680px);
  padding-top: calc(var(--header-total) + 48px);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: saturate(1.18) contrast(1.06);
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom {
  to {
    transform: scale(1);
  }
}
.hero__overlay {
  /* Цветная вуаль над фотографией снята: кадр показывается как есть.
     Модификаторы ниже переопределяют только background, поэтому одного
     display: none здесь хватает, чтобы погасить их все. */
  display: none;
  /* Позиционирование лежало только внутри @media (max-width: 640px), и
     поэтому на всех остальных ширинах вуаль, даже включённая через
     display: block, оставалась блоком нулевой высоты в обычном потоке —
     то есть не рисовалась совсем. Держим геометрию здесь, чтобы
     градиенты внутренних страниц работали на любой ширине.
     z-index: -1 — над кадром (.hero__media лежит на -2) и под текстом
     (.hero__content на 3). */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__content {
  max-width: 900px;
  width: 100%;
  min-width: 0;
  /* Выше любой декорации Hero: гирлянда (.bunting--top) лежит на z-index: 2,
     конфетти и фигуры — ниже. Текст не должен перекрываться ничем. */
  position: relative;
  z-index: 3;
}
.hero--center .hero__content {
  margin-inline: auto;
  text-align: center;
}
.hero--center .kicker {
  justify-content: center;
}
.hero__title {
  margin-bottom: 22px;
  text-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.hero__title span {
  display: block;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  color: var(--champagne);
  margin-bottom: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
.hero__text {
  max-width: 60ch;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.1vw, 1.14rem);
}
.hero--center .hero__text {
  margin-inline: auto;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.hero--center .hero__actions {
  justify-content: center;
}
.hero__countries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line-soft);
}
.hero--center .hero__countries {
  justify-content: center;
}
.hero__country {
  --hc-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  flex: 1 1 150px;
  max-width: 220px;
  padding: 11px 16px 11px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s,
    background-color 0.4s,
    box-shadow 0.4s;
  text-align: left;
}
.hero__country::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgb(var(--hc-rgb));
  box-shadow: 0 0 18px rgba(var(--hc-rgb), 0.9);
}
.hero__country::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hc-rgb);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.hero__country > * {
  position: relative;
  z-index: 1;
}
.hero__country:nth-child(1) {
  --hc-rgb: var(--red-rgb);
}
.hero__country:nth-child(2) {
  --hc-rgb: var(--gold-rgb);
}
.hero__country:nth-child(3) {
  --hc-rgb: var(--violet-rgb);
}
.hero__country:nth-child(4) {
  --hc-rgb: var(--azure-rgb);
}
.hero__country:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--hc-rgb), 0.6);
  box-shadow:
    0 22px 44px -22px rgba(0, 0, 0, 0.7),
    0 0 38px -8px rgba(var(--hc-rgb), 0.65);
}
.hero__country:hover::after {
  opacity: 1;
}
.hero__country strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}
.hero__country span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-mute);
  z-index: 2;
}
.hero__scroll::after {
  content: "";
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: var(--gold-glow);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.6);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ---------- 6a. Hero главной страницы (.hero--main) --------------------
   Всё в этом блоке ограничено модификатором .hero--main, поэтому «шапки»
   внутренних страниц (.hero--page) остаются без изменений.
   Фотография сцены не трогается: усиливается только свет вокруг неё. */
.hero--main {
  --hero-veil: rgba(15, 3, 9, 0.94);
  min-height: min(100svh, 960px);
  /* Верхний отступ обязан быть больше гирлянды (.bunting--top, 46px):
     она висит сразу под шапкой, и при 44px надзаголовок заезжал под
     флажки — на невысоких экранах (1024×768) текст был не прочитать. */
  padding-block: calc(var(--header-total) + 72px) clamp(92px, 7.4vw, 128px);
}
/* Конический «веер» из базового Hero заменён направленными прожекторами */
.hero--main::before {
  content: none;
}
.hero--main::after {
  opacity: 0.9;
}

/* --- Свет: вуаль поверх фотографии ------------------------------------ */
.hero--main .hero__overlay {
  background: var(--hero-veil);
}

/* --- Прожекторы под куполом ------------------------------------------- */
.hero__beams {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Маски здесь больше нет: она превращала контейнер в отдельную
     поверхность, которую браузер пересобирал на каждом кадре качания
     лучей. Затухание перенесено в маску самого луча (см. .hero__beam). */
}
.hero__beam {
  --beam-color: rgba(250, 219, 126, 0.62);
  /* Половина угла раствора конуса (заменяет прежний clip-path-полигон)
     и ширина мягкой кромки — она играет роль бывшего blur(26px). */
  --beam-spread: 13deg;
  --beam-soft: 4deg;
  position: absolute;
  top: -14%;
  left: 50%;
  width: clamp(280px, 38vw, 620px);
  height: 132%;
  margin-left: calc(-0.5 * clamp(280px, 38vw, 620px));
  /* Конус света рисуется коническим градиентом: мягкие края даёт сам
     градиент, а не filter: blur(26px). Раньше размытие такого размера
     пересчитывалось на GPU каждый кадр (четыре луча = четыре полноэкранных
     прохода); теперь слой растрируется один раз и дальше только едет. */
  background: var(--beam-soft);
  /* Затухание вдоль луча. В профиль вписана и бывшая маска .hero__beams,
     поэтому картинка та же, а анимируемых поверхностей на одну меньше. */
  -webkit-mask-image: none;
  mask-image: none;
  /* Без mix-blend-mode: screen — он не даёт вынести слой на композитор.
     Свечение добрано яркостью цвета и opacity. */
  opacity: 0.6;
  transform-origin: 50% 0%;
  /* Базовое положение задано и вне анимации — иначе при её отключении
     (мобильные, prefers-reduced-motion) лучи сошлись бы в центр. */
  transform: translateX(var(--bx, 0)) rotate(var(--br, 0deg));
  animation: heroBeamSway 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero__beam--red {
  --beam-color: rgba(232, 62, 100, 0.72);
  transform: translateX(-32%) rotate(-19deg);
  animation-duration: 17s;
}
.hero__beam--gold {
  --beam-color: rgba(255, 224, 142, 0.74);
  transform: translateX(-11%) rotate(-7deg);
  animation-duration: 13s;
  animation-delay: -4s;
}
.hero__beam--violet {
  --beam-color: rgba(168, 124, 255, 0.7);
  transform: translateX(13%) rotate(8deg);
  animation-duration: 19s;
  animation-delay: -8s;
}
.hero__beam--blue {
  --beam-color: rgba(104, 184, 250, 0.62);
  transform: translateX(33%) rotate(20deg);
  animation-duration: 21s;
  animation-delay: -2s;
}
@keyframes heroBeamSway {
  0% {
    transform: translateX(var(--bx, 0)) rotate(var(--br, 0deg)) scaleX(0.94);
    opacity: 0.42;
  }
  50% {
    opacity: 0.74;
  }
  100% {
    transform: translateX(var(--bx, 0)) rotate(var(--br, 0deg)) scaleX(1.08);
    opacity: 0.52;
  }
}
/* Собственные значения смещения/наклона для каждой полосы света */
.hero__beam--red {
  --bx: -32%;
  --br: -19deg;
}
.hero__beam--gold {
  --bx: -11%;
  --br: -7deg;
}
.hero__beam--violet {
  --bx: 13%;
  --br: 8deg;
}
.hero__beam--blue {
  --bx: 33%;
  --br: 20deg;
}

/* --- Цветные ореолы по краям сцены ------------------------------------ */
.hero__orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero__orb {
  --orb-color: rgba(250, 219, 126, 0.62);
  position: absolute;
  width: clamp(260px, 34vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Раньше поверх этого градиента стоял filter: blur(22px) — ещё четыре
     размытия на кадр. Градиент и так уходит в прозрачность,
    поэтому
     мягкость добрана растяжкой стопов,
    а не размытием. */
  background: var(--orb-color);
  /* см. .hero__beam — blend-режим снят ради композитинга */
  opacity: 0.55;
  animation: heroOrbFloat 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero__orb--red {
  --orb-color: rgba(232, 62, 100, 0.72);
  left: -10%;
  bottom: -14%;
  animation-duration: 18s;
}
.hero__orb--gold {
  --orb-color: rgba(255, 224, 142, 0.56);
  left: 42%;
  top: -22%;
  /* Золотой и синий ореолы застыли на середине своего цикла: они лежат
     под вуалью и под свечением текста, их дрейф не читался, а два
     бесконечных слоя стоили композитору кадров. */
  animation: none;
  transform: translate3d(1.5%, -2.5%, 0) scale(1.03);
  opacity: 0.57;
  will-change: auto;
}
.hero__orb--violet {
  --orb-color: rgba(168, 124, 255, 0.68);
  right: -12%;
  bottom: -10%;
  animation-duration: 20s;
  animation-delay: -3s;
}
.hero__orb--blue {
  --orb-color: rgba(104, 184, 250, 0.53);
  left: 50%;
  bottom: -30%;
  translate: -50% 0;
  /* см. .hero__orb--gold */
  animation: none;
  transform: translate3d(1.5%, -2.5%, 0) scale(1.03);
  opacity: 0.57;
  will-change: auto;
}
@keyframes heroOrbFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(0.94);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(3%, -5%, 0) scale(1.12);
    opacity: 0.72;
  }
}

/* --- Виньетка и мягкий стык со следующей секцией ---------------------- */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--page);
}
/* Золотая нить по нижней кромке сцены */
.hero__vignette::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(245, 207, 91, 0.51);
}

/* --- Контент ---------------------------------------------------------- */
.hero--main .hero__content {
  position: relative;
  max-width: 960px;
}
/* Тёплое свечение под текстом — буквы читаются на любом кадре */
.hero--main .hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1180px, 128%);
  height: min(760px, 132%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* filter: blur(6px) убран: это полноэкранное размытие пересчитывалось
     каждый кадр,
    хотя градиент и без него мягкий. */
  background: rgba(10, 2, 7, 0.37);
}
.hero--main .hero__content > * {
  animation: heroIn 1s var(--ease) both;
}
.hero--main .hero__kicker {
  animation-delay: 0.05s;
}
.hero--main .hero__title {
  animation-delay: 0.16s;
}
.hero--main .hero__divider {
  animation-delay: 0.26s;
}
.hero--main .hero__text {
  animation-delay: 0.34s;
}
.hero--main .hero__actions {
  animation-delay: 0.44s;
}
.hero--main .hero__programs {
  animation-delay: 0.54s;
}
.hero--main .hero__countries {
  animation-delay: 0.64s;
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero--main .hero__kicker {
  color: var(--gold-light);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}
.hero--main .hero__title {
  font-size: clamp(3rem, 8.6vw, 6.8rem);
  letter-spacing: -0.04em;
  margin-bottom: 0;
  text-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
}
.hero--main .hero__title .text-gold {
  /* Блик по золоту был анимацией background-position: каждый кадр
     перерисовывался весь заголовок, а сразу за ним пересчитывались два
     больших drop-shadow. Заменить это движение на transform нельзя —
     градиент приклеен к буквам через background-clip: text, — поэтому
     он зафиксирован на самом выигрышном кадре. Без анимации заголовок
     рисуется один раз, вместе со свечением. */
  animation: none;
  background-position: 0% 50%;
  filter: drop-shadow(0 0 34px rgba(245, 207, 91, 0.42))
    drop-shadow(0 14px 42px rgba(216, 26, 66, 0.28));
}
.hero--main .hero__subtitle {
  margin-top: 16px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  letter-spacing: 0.02em;
  color: #ffeed0;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
/* Разделитель: тонкая цирковая нить с ромбом посередине */
.hero__divider {
  position: relative;
  display: block;
  width: min(320px, 68%);
  height: 1px;
  margin: clamp(20px, 2.6vw, 30px) auto clamp(20px, 2.6vw, 28px);
  background: rgba(245, 207, 91, 0.57);
}
.hero__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-glow);
  box-shadow: 0 0 18px rgba(245, 207, 91, 0.9);
}
.hero--main .hero__text {
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}
.hero--main .hero__actions {
  margin-top: clamp(30px, 3.6vw, 44px);
  gap: 16px;
  align-items: center;
}

/* --- Кнопка «Купить билет» -------------------------------------------- */
.btn--ticket {
  color: #2c1405;
  border-color: rgba(255, 238, 196, 0.6);
  background: #c2122f;
  background-size: 240% 100%;
  background-position: 12% 50%;
  box-shadow:
    0 17px 41px -14px rgba(216, 26, 66, 0.95),
    0 10px 30px -16px rgba(245, 207, 91, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  padding-inline: 34px;
  min-height: 58px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}
.btn--ticket .icon {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}
/* Блик, бесконечно пробегающий по билету */
/* Перелив по кнопке. Раньше это была анимация background-position на
   самой кнопке — repaint всей её площади каждый кадр. Теперь широкий
   градиент едет по слою через transform и обрезается overflow. */
.btn--ticket::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240%;
  z-index: -2;
  background: #c2122f;
  animation: ticketFlow 11s ease-in-out infinite;
  will-change: transform;
}
.btn--ticket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.37);
  transform: translateX(-130%);
  animation: ticketSheen 5.2s var(--ease) infinite;
}
.btn--ticket:hover {
  color: #2c1405;
  background-position: 88% 50%;
  box-shadow:
    0 24px 52px -14px rgba(216, 26, 66, 1),
    0 0 42px -8px rgba(245, 207, 91, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}
@keyframes ticketFlow {
  0%,
  100% {
    transform: translate3d(-5%, 0, 0);
  }
  50% {
    transform: translate3d(-53%, 0, 0);
  }
}
@keyframes ticketSheen {
  0%,
  62% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

/* --- Вторая кнопка: стеклянная, с цирковой каймой --------------------- */
.btn--glass {
  color: #ffeed0;
  border: 1px solid transparent;
  background:
    rgba(255, 255, 255, 0.12) padding-box,
    rgba(245, 207, 91, 0.85) border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 58px;
  padding-inline: 30px;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.9);
}
.btn--glass:hover {
  color: #fff;
  background:
    rgba(255, 255, 255, 0.2) padding-box,
    var(--grad-circus) border-box;
  box-shadow:
    0 20px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 34px -10px rgba(139, 92, 246, 0.65);
}

/* Стеклянная кнопка в Hero главной стоит прямо над движущимися лучами,
   поэтому backdrop-filter пересчитывался каждый кадр. На внутренних
   страницах (там фон статичный) кнопка остаётся прежней. */
.hero--main .btn--glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    rgba(255, 255, 255, 0.14) padding-box,
    rgba(245, 207, 91, 0.85) border-box;
}
.hero--main .btn--glass:hover {
  background:
    rgba(255, 255, 255, 0.22) padding-box,
    var(--grad-circus) border-box;
}

/* --- Блок «Наши программы» -------------------------------------------- */
.hero__programs {
  margin-top: clamp(26px, 3.2vw, 40px);
}
.hero__programs-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero__programs-label::before,
.hero__programs-label::after {
  content: "";
  width: clamp(22px, 4vw, 46px);
  height: 1px;
  background: var(--gold-glow);
}
.hero__programs-label::after {
  background: var(--gold-glow);
}
.hero__programs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.hero__program {
  --hp-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 262px;
  flex: 0 1 336px;
  padding: 13px 18px;
  border-radius: 16px;
  text-align: left;
  border: 1px solid var(--line-soft);
  /* Был backdrop-filter: blur(12px). Он заставлял браузер заново
     размывать фон под плиткой каждый кадр — а под ней как раз ездят
     лучи и ореолы. Матовость набрана тёмной подложкой: на фотографии
     результат тот же,
    стоимость нулевая. */
  background: rgba(20, 6, 14, 0.18);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  transition:
    transform 0.45s var(--ease),
    border-color 0.4s,
    box-shadow 0.45s var(--ease);
}
.hero__program:nth-child(2) {
  --hp-rgb: var(--violet-rgb);
}
.hero__program::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hp-rgb);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.hero__program:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--hp-rgb), 0.6);
  box-shadow:
    0 26px 50px -24px rgba(0, 0, 0, 0.9),
    0 0 40px -10px rgba(var(--hp-rgb), 0.65);
}
.hero__program:hover::before {
  opacity: 1;
}
.hero__program-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--gold-glow);
  background: var(--hp-rgb);
  border: 1px solid rgba(var(--hp-rgb), 0.4);
  box-shadow: 0 0 22px -6px rgba(var(--hp-rgb), 0.8);
}
.hero__program-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hero__program-body strong {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero__program-meta {
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
}
.hero__program-arrow {
  flex: none;
  margin-left: auto;
  color: var(--gold-light);
  transition: transform 0.35s var(--ease);
}
.hero__program:hover .hero__program-arrow {
  transform: translateX(4px);
}

/* --- Страны: чуть плотнее и светлее ----------------------------------- */
.hero--main .hero__countries {
  margin-top: clamp(26px, 3.4vw, 44px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid transparent;
}
.hero--main .hero__country {
  box-shadow: 0 16px 36px -26px rgba(0, 0, 0, 0.9);
}
.hero--main .hero__scroll {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 7. Cards -------------------------------------------------- */
.card {
  --card-rgb: var(--red-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s,
    box-shadow 0.5s;
}
/* Цветная «полоса манежа» вверху карточки */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 3;
  background: var(--card-rgb);
}
/* Афиша чередует акценты: карминовый → фиолетовый → синий */
.events-grid .card:nth-child(3n + 1),
.grid .card:nth-child(3n + 1) {
  --card-rgb: var(--red-rgb);
}
.events-grid .card:nth-child(3n + 2),
.grid .card:nth-child(3n + 2) {
  --card-rgb: var(--violet-rgb);
}
.events-grid .card:nth-child(3n + 3),
.grid .card:nth-child(3n + 3) {
  --card-rgb: var(--azure-rgb);
}
.card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--card-rgb), 0.45);
  box-shadow:
    var(--shadow-lg),
    0 0 46px -14px rgba(var(--card-rgb), 0.55),
    0 0 0 1px rgba(var(--card-rgb), 0.16);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.7vw, 22px);
  flex: 1;
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1.15;
}
.card__title a:hover {
  color: var(--red-deep);
}
.card__text {
  color: var(--text-dim);
  font-size: 0.88rem;
}
.card__meta {
  display: grid;
  gap: 7px;
  /* Блок дат идёт сразу за адресом: пустота собирается внизу карточки,
     а не «дырой» посередине, когда в соседней карточке текст длиннее. */
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid transparent;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}
.card__meta-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.card__meta-row dt {
  flex: none;
  width: 84px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 3px;
}
.card__meta-row dd {
  margin: 0;
  color: var(--text);
}
.card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 clamp(16px, 1.7vw, 22px) clamp(16px, 1.7vw, 22px);
}
.card.is-past {
  opacity: 0.55;
  filter: saturate(0.55);
}
.card.is-past:hover {
  transform: none;
  border-color: var(--line-soft);
  box-shadow: var(--shadow-md);
}

/* program showcase card */
.program-card {
  --pc-rgb: var(--red-rgb);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: clamp(320px, 34vw, 440px);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.55s var(--ease),
    border-color 0.55s,
    box-shadow 0.55s;
}
.program-card:nth-child(2n) {
  --pc-rgb: var(--azure-rgb);
}
/* Светящаяся рамка проявляется при наведении */
.program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-circus);
  -webkit-mask: none;
  -webkit-mask-composite: xor;
  mask: none;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.program-card:hover::before {
  opacity: 1;
}
.program-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow:
    var(--shadow-lg),
    0 0 62px -14px rgba(var(--pc-rgb), 0.75);
}
.program-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  justify-content: flex-end;
  padding: clamp(20px, 2.2vw, 32px);
}
.program-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.06;
}
.program-card__text {
  color: var(--text-dim);
  max-width: 46ch;
}
.program-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.program-card__tags .tag {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(var(--scrim-rgb), 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.program-card__tags .tag:first-child {
  border-color: rgba(var(--pc-rgb), 0.85);
  background: rgba(var(--pc-rgb), 0.35);
  color: #fff;
}

/* country card */
.country-card {
  --cc-rgb: var(--red-rgb);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/4.4;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s,
    box-shadow 0.5s;
}
.country-card:nth-child(4n + 1) {
  --cc-rgb: var(--red-rgb);
}
.country-card:nth-child(4n + 2) {
  --cc-rgb: var(--gold-rgb);
}
.country-card:nth-child(4n + 3) {
  --cc-rgb: var(--violet-rgb);
}
.country-card:nth-child(4n + 4) {
  --cc-rgb: var(--azure-rgb);
}
.country-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--cc-rgb), 0.6);
  box-shadow:
    var(--shadow-lg),
    0 0 48px -14px rgba(var(--cc-rgb), 0.7);
}
.country-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(16px, 1.7vw, 22px);
}
.country-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
}
.country-card__cities {
  font-size: 0.82rem;
  color: var(--text-dim);
}
.country-card__count {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(var(--cc-rgb), 0.55);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Text-only programme notes retained after gallery artwork was removed. */
.gallery--text-only {
  display: grid;
  gap: 10px;
  max-width: 76ch;
}
.gallery__caption {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: var(--page-2);
  color: var(--text);
}

/* stats & features */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.stat {
  --st-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  padding: clamp(17px, 1.9vw, 26px);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--st-rgb);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.45s;
}
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--st-rgb);
}
.stats .stat:nth-child(4n + 1) {
  --st-rgb: var(--red-rgb);
}
.stats .stat:nth-child(4n + 2) {
  --st-rgb: var(--gold-rgb);
}
.stats .stat:nth-child(4n + 3) {
  --st-rgb: var(--violet-rgb);
}
.stats .stat:nth-child(4n + 4) {
  --st-rgb: var(--azure-rgb);
}
.stat:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--st-rgb), 0.4);
  box-shadow:
    var(--shadow-lg),
    0 0 40px -16px rgba(var(--st-rgb), 0.6);
}
/* Цифры заливаются цветом своего софита */
.stats .stat .stat__value {
  background: var(--st-rgb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1;
  margin-bottom: 6px;
}
.stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.feature {
  --ft-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--ft-rgb);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.grid .feature:nth-child(3n + 1) {
  --ft-rgb: var(--red-rgb);
}
.grid .feature:nth-child(3n + 2) {
  --ft-rgb: var(--gold-rgb);
}
.grid .feature:nth-child(3n + 3) {
  --ft-rgb: var(--violet-rgb);
}
.stack-lg .feature:nth-child(3n + 2) {
  --ft-rgb: var(--gold-rgb);
}
.stack-lg .feature:nth-child(3n + 3) {
  --ft-rgb: var(--azure-rgb);
}
.feature:hover {
  border-color: rgba(var(--ft-rgb), 0.45);
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-lg),
    0 0 42px -16px rgba(var(--ft-rgb), 0.6);
}
.feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--ft-rgb);
  border: 1px solid rgba(var(--ft-rgb), 0.4);
  box-shadow: 0 10px 24px -14px rgba(var(--ft-rgb), 0.9);
  color: rgb(var(--ft-rgb));
  transition:
    background-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.feature__icon .icon-svg {
  width: 22px;
  height: 22px;
}
.feature > .badge {
  justify-self: start;
}
.feature:hover .feature__icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 16px 30px -14px rgba(var(--ft-rgb), 1);
}

/* split media block */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ---------- Секция «О компании» --------------------------------------
   Редакционный разворот: кадр с золотой табличкой слева и «дорожка»
   преимуществ справа. Колонки живут своей сеткой, поэтому .split здесь
   не используется — картинке нужен запас под табличку. */
.about {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.about__media {
  position: relative;
  /* место под табличку, выступающую за нижний край кадра */
  padding-bottom: 54px;
}
.about__frame {
  aspect-ratio: 4 / 5;
}
.about__frame img {
  display: block;
}
/* Подпись поверх кадра: тонкая полоса на градиентной вуали */
.about__caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 42px 22px 20px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--on-photo);
  background: var(--scrim-rgb);
}
.about__caption .icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}
/* Золотая табличка — «награда» на углу кадра */
.about__plaque {
  position: absolute;
  z-index: 2;
  right: clamp(-8px, 1vw, 18px);
  bottom: 0;
  max-width: min(320px, 88%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  background: var(--gold-rgb);
  box-shadow:
    var(--shadow-lg),
    0 0 46px -20px rgba(var(--gold-rgb), 0.8);
}
.about__plaque-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  background: var(--gold-rgb);
  color: var(--gold);
}
.about__plaque-icon .icon-svg {
  width: 20px;
  height: 20px;
}
.about__plaque-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.about__plaque-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.about__tags {
  margin-top: 22px;
}
/* Дорожка преимуществ: иконки соединены вертикальной гирляндой */
.about__list {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: about;
}
.about__item {
  --ab-rgb: var(--red-rgb);
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
}
.about__item:nth-child(2) {
  --ab-rgb: var(--gold-rgb);
}
.about__item:nth-child(3) {
  --ab-rgb: var(--azure-rgb);
}
/* линия к следующему пункту */
.about__item::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 58px;
  bottom: calc(-1 * clamp(18px, 2.4vw, 26px));
  width: 2px;
  border-radius: 2px;
  background: var(--ab-rgb);
}
.about__item:last-child::before {
  display: none;
}
.about__item-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(var(--ab-rgb), 0.4);
  background: var(--ab-rgb);
  box-shadow: 0 12px 26px -16px rgba(var(--ab-rgb), 0.9);
  color: rgb(var(--ab-rgb));
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s;
}
.about__item-icon .icon-svg {
  width: 22px;
  height: 22px;
}
.about__item-body {
  padding-top: 4px;
}
/* Порядковый номер набирается счётчиком — в разметке его нет */
.about__item-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease);
}
.about__item-title::before {
  counter-increment: about;
  content: counter(about, decimal-leading-zero);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(var(--ab-rgb), 0.85);
}
.about__item-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.65;
}
.about__item:hover .about__item-icon {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(var(--ab-rgb), 0.7);
  box-shadow: 0 18px 32px -16px rgba(var(--ab-rgb), 1);
}
.about__item:hover .about__item-title {
  color: rgb(var(--ab-rgb));
}
.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
@media (max-width: 1024px) {
  .about {
    grid-template-columns: 1fr;
  }
  .about__frame {
    aspect-ratio: 16 / 10;
  }
  .about__plaque {
    right: 0;
    max-width: min(340px, 94%);
  }
}
@media (max-width: 640px) {
  .about__media {
    padding-bottom: 0;
  }
  .about__plaque {
    position: static;
    max-width: none;
    margin-top: 16px;
  }
  .about__item {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .about__item::before {
    left: 21px;
    top: 50px;
  }
  .about__item-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .about__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Content sections are text-led: no empty media column remains after images. */
.split > :only-child,
.clowns__grid > :only-child,
.about > :only-child,
.offer > :only-child {
  grid-column: 1 / -1;
  width: 100%;
}
.split > :only-child,
.clowns__grid > :only-child,
.about > :only-child {
  max-width: none;
}
.split p,
.clowns__copy p,
.about__content > p,
.next-program p {
  max-width: 76ch;
}
.program-card,
.country-card,
.poster,
.genre {
  min-height: 0;
}
.program-card__body,
.country-card__body,
.poster__body,
.genre__body {
  position: relative;
  height: auto;
  min-height: 0;
}

@media (max-width: 640px) {
  html,
  body {
    overflow-x: clip;
  }
  .hero__title,
  .section-head :is(.display-1, .display-2, .display-3) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .section-head .text-gold {
    display: block;
  }
}
@media (max-width: 640px) {
  html,
  body {
    overflow-x: clip;
  }
  .hero__title,
  .section-head :is(.display-1, .display-2, .display-3) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 1024px) {
  .split > :only-child,
  .clowns__grid > :only-child,
  .about > :only-child,
  .offer > :only-child,
  .next-program > :only-child {
    grid-column: auto;
    max-width: none;
  }
}

/* ---------- Секция «Условия» ------------------------------------------
   Кадр с золотой табличкой слева и мозаика из четырёх карточек справа.
   У каждой карточки свой акцент (--of-rgb), номер-водяной знак и нить
   по верхнему краю, которая растягивается при наведении. */
.offer {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.offer__plaque {
  position: absolute;
  z-index: 2;
  left: clamp(-8px, 1vw, 18px);
  bottom: 0;
  max-width: min(300px, 88%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  background: var(--gold-rgb);
  box-shadow:
    var(--shadow-lg),
    0 0 46px -20px rgba(var(--gold-rgb), 0.8);
}
.offer__plaque-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  background: var(--gold-rgb);
  color: var(--gold);
}
.offer__plaque-icon .icon-svg {
  width: 20px;
  height: 20px;
}
.offer__plaque-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.offer__plaque-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.offer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}
.offer-card {
  --of-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--of-rgb);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.offer-card:nth-child(1) {
  --of-rgb: var(--red-rgb);
}
.offer-card:nth-child(2) {
  --of-rgb: var(--gold-rgb);
}
.offer-card:nth-child(3) {
  --of-rgb: var(--azure-rgb);
}
.offer-card:nth-child(4) {
  --of-rgb: var(--violet-rgb);
}
.offer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--of-rgb);
  transform: scaleX(0.26);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.offer-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--of-rgb), 0.45);
  box-shadow:
    var(--shadow-lg),
    0 0 42px -16px rgba(var(--of-rgb), 0.6);
}
.offer-card:hover::before {
  transform: scaleX(1);
}
.offer-card__num {
  position: absolute;
  top: clamp(8px, 1.2vw, 14px);
  right: clamp(12px, 1.6vw, 20px);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(var(--of-rgb), 0.18);
  pointer-events: none;
  user-select: none;
  transition: color 0.4s var(--ease);
}
.offer-card:hover .offer-card__num {
  color: rgba(var(--of-rgb), 0.3);
}
.offer-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--of-rgb);
  border: 1px solid rgba(var(--of-rgb), 0.4);
  box-shadow: 0 10px 24px -14px rgba(var(--of-rgb), 0.9);
  color: rgb(var(--of-rgb));
  transition:
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.offer-card__icon .icon-svg {
  width: 22px;
  height: 22px;
}
.offer-card:hover .offer-card__icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 16px 30px -14px rgba(var(--of-rgb), 1);
}
.offer-card__title {
  margin: 4px 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  font-weight: 600;
  line-height: 1.3;
}
.offer-card__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--text-dim);
}
/* Итоговая полоса под мозаикой: сухие цифры маршрута и кнопка анкеты */
.offer__note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: var(--gold-rgb);
  box-shadow: var(--shadow-md);
}
.offer__note-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  background: var(--gold-rgb);
  color: var(--gold);
}
.offer__note-icon .icon-svg {
  width: 22px;
  height: 22px;
}
.offer__note-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.offer__note-text strong {
  color: var(--text);
  font-weight: 600;
}
.offer__note .btn {
  flex: none;
}
@media (max-width: 1024px) {
  .offer {
    grid-template-columns: 1fr;
  }
  .offer__plaque {
    position: static;
    max-width: none;
    margin-top: 16px;
  }
}
@media (max-width: 640px) {
  .offer__grid {
    grid-template-columns: 1fr;
  }
  .offer__note {
    padding: 20px;
  }
  .offer__note .btn {
    flex: 1 1 100%;
  }
}

/* partners */
/* Карусель партнёров заменена статичной сеткой .partners-grid
   (см. раздел 12.5). Логотипы не двигаются, каждый кликабелен. */

/* CTA banner */
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(34px, 5vw, 72px);
  text-align: center;
  border: 1px solid rgba(245, 207, 91, 0.4);
  background: #4d0e1e;
  box-shadow:
    var(--shadow-lg),
    0 0 70px -26px rgba(216, 26, 66, 0.7);
}
/* Лучи софитов внутри баннера */
.cta-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -120%;
  width: 160%;
  height: 300%;
  transform: translateX(-50%);
  background: rgba(245, 207, 91, 0.13);
  animation: bannerSweep 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bannerSweep {
  from {
    transform: translateX(-50%) rotate(-5deg);
  }
  to {
    transform: translateX(-50%) rotate(5deg);
  }
}
/* Конфетти */
.cta-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 340px);
  background-color: rgba(255, 233, 168, 0.54);
  background-size: 340px 340px;
  opacity: 0.8;
  animation: ctaSparks 30s linear infinite;
  will-change: transform;
}
/* Свой шаг: тайл баннера 340px, у hero — 380px. */
@keyframes ctaSparks {
  to {
    transform: translate3d(0, -340px, 0);
  }
}
.cta-banner > * {
  position: relative;
  z-index: 1;
}
.cta-banner .btn {
  margin-top: 8px;
}
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ---------- 8. Filters, events grid & tour timeline ------------------ */
.filters {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filters__label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-right: 6px;
  flex: none;
}
.chip {
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.03);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition:
    color 0.3s,
    border-color 0.3s,
    background-color 0.3s,
    transform 0.3s var(--ease);
}
.chip:hover {
  color: var(--champagne);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}
.chip.is-active {
  background: #d81a42;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(216, 26, 66, 0.9);
}
.chip.is-active:hover {
  color: #fff;
  transform: translateY(-2px);
}
.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}
.search input {
  width: 100%;
  min-height: 46px;
  padding: 12px 18px 12px 44px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text);
  transition:
    border-color 0.3s,
    background-color 0.3s;
  font-size: 0.9rem;
}
.search input::placeholder {
  color: var(--text-mute);
}
.search input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(232, 195, 81, 0.09);
  box-shadow: 0 0 0 3px rgba(232, 195, 81, 0.14);
}
.search__icon {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
  transition: color 0.3s var(--ease);
}
.search:focus-within .search__icon {
  color: var(--gold);
}
.results-count {
  font-size: 0.8rem;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 22px);
}
.events-grid--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.empty-state {
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: rgba(216, 26, 66, 0.07), rgba(var(--tint-rgb), 0.03);
  color: var(--text-dim);
}
.empty-state strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--champagne);
  margin-bottom: 10px;
}
.loader {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 60px 0;
  color: var(--text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.loader::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--red);
  border-right-color: var(--gold);
  border-bottom-color: var(--violet);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* tour timeline */
.tour {
  position: relative;
  padding-top: 12px;
}
.tour__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
}
.tour__track::-webkit-scrollbar {
  height: 5px;
}
.tour__track::-webkit-scrollbar-thumb {
  background: var(--grad-circus);
  border-radius: 999px;
}
.tour__stop {
  --tc: var(--red);
  --tc-rgb: var(--red-rgb);
  position: relative;
  padding: 48px 18px 22px;
  border-radius: 18px;
  scroll-snap-align: center;
  text-align: center;
  transition:
    background-color 0.4s var(--ease),
    transform 0.4s var(--ease);
}
/* Каждый город маршрута подсвечен своим софитом */
.tour__stop:nth-child(4n + 2) {
  --tc: var(--gold);
  --tc-rgb: var(--gold-rgb);
}
.tour__stop:nth-child(4n + 3) {
  --tc: var(--violet);
  --tc-rgb: var(--violet-rgb);
}
.tour__stop:nth-child(4n + 4) {
  --tc: var(--azure);
  --tc-rgb: var(--azure-rgb);
}
.tour__stop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--tc-rgb);
}
.tour__stop:hover {
  transform: translateY(-4px);
  background: var(--tc-rgb);
}
.tour__stop:first-child::before {
  left: 50%;
}
.tour__stop:last-child::before {
  right: 50%;
}
.tour__dot {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--page-2);
  border: 1px solid var(--tc);
  box-shadow: 0 0 0 5px rgba(var(--tc-rgb), 0.14);
  transition:
    box-shadow 0.4s,
    background-color 0.4s;
}
.tour__stop.is-current .tour__dot {
  background: var(--tc);
  box-shadow: 0 0 26px rgba(var(--tc-rgb), 0.9);
}
.tour__stop.is-current .tour__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(var(--tc-rgb), 0.2);
  animation: dotPulse 2.8s var(--ease) infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes dotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.tour__stop.is-past .tour__dot {
  border-color: var(--text-mute);
  background: var(--page-2);
  box-shadow: none;
}
.tour__city {
  font-family: var(--font-display);
  font-size: 1.24rem;
  margin-bottom: 4px;
}
.tour__country {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc);
  background: rgba(var(--tc-rgb), 0.14);
  border: 1px solid rgba(var(--tc-rgb), 0.35);
}
.tour__dates {
  font-size: 0.82rem;
  color: var(--text-dim);
}
.tour__venue {
  font-size: 0.78rem;
  color: var(--text-mute);
  margin-top: 4px;
}
.tour__stop.is-past {
  opacity: 0.5;
}

/* гастрольный график: блок на каждый год, внутри — города */
.tour-schedule {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
}
.tour-year {
  position: relative;
}
.tour-year__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.tour-year__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tour-year__count {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tour-year__list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.tour-stop {
  --stop-rgb: var(--red-rgb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--stop-rgb), rgba(var(--tint-rgb), 0.03);
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}
.tour-year__list .tour-stop:nth-child(3n + 2) {
  --stop-rgb: var(--violet-rgb);
}
.tour-year__list .tour-stop:nth-child(3n + 3) {
  --stop-rgb: var(--azure-rgb);
}
.tour-stop:hover {
  transform: translateX(4px);
  border-color: rgba(var(--gold-rgb), 0.4);
}
.tour-stop.is-past {
  opacity: 0.55;
  background: rgba(var(--tint-rgb), 0.02);
}
.tour-stop.is-past:hover {
  opacity: 0.75;
}
.tour-stop__info {
  min-width: 0;
}
.tour-stop__city {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--champagne);
  margin: 0;
}
.tour-stop__country {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-mute);
}
.tour-stop__dates {
  margin-top: 6px;
  font-size: 0.98rem;
  color: var(--text);
}
.tour-stop.is-onsale .tour-stop__dates {
  color: var(--gold-light);
}
.tour-stop__venue,
.tour-stop__program {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-mute);
}
.tour-stop__venue .icon,
.tour-stop__program .icon {
  color: var(--gold);
  flex: none;
}
.tour-stop__program a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tour-stop__program a:hover {
  color: var(--gold-light);
  border-bottom-color: rgba(var(--gold-rgb), 0.5);
}
.tour-stop__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}
.tour-stop__aside .btn {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tour-stop {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  /* бейдж — отдельной строкой, кнопка на всю ширину карточки */
  .tour-stop__aside {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .tour-stop__aside .btn {
    flex: 1 1 100%;
    justify-content: center;
    white-space: normal;
  }
  .tour-year__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* schedule table */
.schedule {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.schedule caption {
  text-align: left;
  padding-bottom: 16px;
  color: var(--text-mute);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.schedule th,
.schedule td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.schedule th {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.schedule tbody tr {
  transition: background-color 0.3s;
}
.schedule tbody tr:hover {
  background: rgba(216, 26, 66, 0.08);
}
.schedule td:first-child {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--champagne);
}
.schedule tbody tr:hover td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-circus);
}
.schedule th {
  border-bottom-color: rgba(232, 195, 81, 0.35);
}
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: rgba(216, 26, 66, 0.06), rgba(var(--tint-rgb), 0.03);
}
.table-wrap table {
  min-width: 640px;
}

/* ---------- 9. Forms & contact ---------------------------------------- */
.form {
  display: grid;
  gap: 18px;
}
.form--panel {
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.form--panel .btn {
  justify-self: start;
}
@media (max-width: 640px) {
  .form--panel .btn {
    justify-self: stretch;
  }
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.form--stacked .form__grid {
  grid-template-columns: 1fr;
}
.form--stacked .btn {
  justify-self: stretch;
  width: 100%;
}

/* Компактная форма: одна колонка, узкая панель — общий вид всех форм сайта */
.form--compact {
  max-width: 520px;
  margin-inline: auto;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
}
.form--compact .form__grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.form--compact .field {
  gap: 5px;
}
.form--compact .field label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.form--compact .field input,
.form--compact .field select,
.form--compact .field textarea {
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
}
.form--compact .field select {
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
}
.form--compact .field textarea {
  min-height: 96px;
}
.form--compact .form__note {
  font-size: 0.72rem;
}
/* Кнопка отправки — на всю ширину формы */
.form--compact .btn {
  justify-self: stretch;
  width: 100%;
}
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field label .req {
  color: var(--red-soft);
}
.field label .opt {
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text);
  transition:
    border-color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
  font-size: 0.95rem;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.field select {
  appearance: none;
  background-color: var(--text-mute);
  background-position:
    calc(100% - 22px) 24px,
    calc(100% - 16px) 24px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field select option {
  background: var(--page-2);
  color: var(--text);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(232, 195, 81, 0.08);
  box-shadow: 0 0 0 3px rgba(232, 195, 81, 0.16);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: rgba(165, 34, 54, 0.7);
}
.form__note {
  font-size: 0.78rem;
  color: var(--text-mute);
}
.form__status {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(15, 157, 103, 0.22);
  color: #d9ffe9;
  font-size: 0.92rem;
}
.form__status.is-visible {
  display: flex;
  animation: menuIn 0.45s var(--ease) forwards;
}
.form__status__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #161006;
}
.form__status__icon .icon-svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
/* отправка в процессе */
.form__status.is-pending {
  border-color: rgba(var(--tint-rgb), 0.28);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text-dim);
}
.form__status.is-pending .form__status__icon {
  background: rgba(var(--tint-rgb), 0.14);
  color: var(--text);
  animation: statusPulse 1.1s ease-in-out infinite;
}
/* отправить не удалось */
.form__status.is-error {
  border-color: rgba(var(--red-rgb), 0.5);
  background: rgba(var(--red-rgb), 0.14);
  color: #ffe0e6;
}
.form__status.is-error .form__status__icon {
  background: rgba(var(--red-rgb), 0.85);
  color: #fff;
}
@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* кнопка на время запроса */
.form.is-sending button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}
/* согласие на обработку данных: чекбокс + текст в одну строку */
.field--check {
  gap: 0;
}
/* Специфичность выше, чем у `.form--compact .field label` (0.6rem,
   разрядка, капс): подпись согласия — обычное предложение, а не ярлык поля. */
.field--check .check,
.form--compact .field--check .check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-mute);
  cursor: pointer;
}
.field--check .check input[type="checkbox"],
.form--compact .field--check .check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--gold);
  cursor: pointer;
}
.field--check .check a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* honeypot: скрыт от людей, но остаётся в DOM для ботов */
.field--trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Группа контактов: заголовок канала + список строк */
.contact-group {
  display: grid;
  gap: 14px;
  align-content: start;
}
.contact-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(232, 195, 81, 0.33);
}
.contact-list {
  display: grid;
  gap: 8px;
}
.contact-item {
  --ci-rgb: var(--red-rgb);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
  transition:
    border-color 0.35s,
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    background-color 0.35s;
}
.contact-list .contact-item:nth-child(3n + 2) {
  --ci-rgb: var(--gold-rgb);
}
.contact-list .contact-item:nth-child(3n + 3) {
  --ci-rgb: var(--violet-rgb);
}
.contact-item:hover {
  border-color: rgba(var(--ci-rgb), 0.55);
  transform: translateX(5px);
  background: var(--ci-rgb);
  box-shadow: 0 16px 34px -22px rgba(var(--ci-rgb), 0.9);
}
.contact-item__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ci-rgb);
  border: 1px solid rgba(var(--ci-rgb), 0.4);
  color: rgb(var(--ci-rgb));
  transition:
    background-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.contact-item__icon .icon-svg {
  width: 20px;
  height: 20px;
}
.contact-item:hover .contact-item__icon {
  background: rgba(var(--ci-rgb), 0.3);
  border-color: rgba(var(--ci-rgb), 0.6);
  box-shadow: 0 10px 24px -14px rgba(var(--ci-rgb), 1);
}
/* Обёртка текста: подпись и значение — отдельными строками.
   Без этого inline-span'ы склеивались («ТЕЛЕФОН…+996 500 317 837»). */
.contact-item > span:not(.contact-item__icon) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.contact-item__label,
.contact-item__value {
  display: block;
}
.contact-item__value {
  overflow-wrap: anywhere;
}
.contact-item--static {
  cursor: default;
}
.contact-item--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-soft);
  background: rgba(var(--tint-rgb), 0.04);
}
.contact-item--static:hover .contact-item__icon {
  background: var(--ci-rgb);
  border-color: rgba(var(--ci-rgb), 0.4);
  box-shadow: none;
}
.contact-item__label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.contact-item__value {
  font-size: 1.02rem;
  color: var(--text);
}

/* Шаги отбора: нумерованная дорожка */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  counter-reset: step;
}
.step {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--gold-rgb);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: var(--shadow-lg);
}
.step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: #161006;
  background: var(--grad-gold);
  box-shadow: 0 10px 24px -14px rgba(232, 195, 81, 0.9);
}
.step__title {
  font-size: 1.05rem;
  font-weight: 600;
}
.step__text {
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Ряд статичных тегов (жанры, форматы) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Чек-лист: что приложить к заявке */
.checklist {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}
.checklist li .icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.32);
}
.checklist li .icon .icon-svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* ---------- 10. Footer, animations, responsive ------------------------ */
.site-footer {
  /* Подвал всегда на тёмной подложке — переключаем токены на светлые,
     иначе разделители и приглушённый текст сливаются с фоном. */
  --text-dim: rgba(255, 255, 255, 0.84);
  --text-mute: rgba(255, 255, 255, 0.66);
  --line-soft: rgba(255, 255, 255, 0.16);
  --tint-rgb: 255, 255, 255;
  position: relative;
  background: #350b1a;
  border-top: 1px solid transparent;
  padding: clamp(52px, 6vw, 88px) 0 0;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-circus);
}
/* Мягкое золотое сияние манежа под подвалом */
.site-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -180px;
  width: min(900px, 92%);
  height: 320px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(232, 195, 81, 0.13);
  filter: blur(60px);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.15fr 1.05fr;
  gap: clamp(28px, 3.4vw, 56px) clamp(24px, 3vw, 48px);
  align-items: start;
}
.footer-col h3 {
  position: relative;
  padding-bottom: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 20px;
}
.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-circus);
}
.footer-col ul {
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--text-dim);
  font-size: 0.92rem;
  transition: color 0.3s;
}
.footer-col a:hover {
  color: var(--gold-light);
}
.footer-about p {
  color: var(--text-dim);
  font-size: 0.92rem;
  max-width: 38ch;
  margin-top: 18px;
}
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.footer-socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(var(--tint-rgb), 0.03);
  color: var(--text-dim);
  transition:
    border-color 0.3s,
    color 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease);
}
.footer-socials .social-icon {
  width: 19px;
  height: 19px;
  display: block;
  transition: transform 0.3s var(--ease);
}
.footer-socials a:hover .social-icon {
  transform: scale(1.08);
}
.footer-socials a:focus-visible {
  outline: none;
  border-color: rgba(var(--tint-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18);
}
.footer-socials a:nth-child(1):hover {
  border-color: rgba(var(--red-rgb), 0.7);
  color: var(--red-soft);
  background: rgba(var(--red-rgb), 0.08);
  box-shadow: 0 10px 24px -12px rgba(var(--red-rgb), 1);
}
.footer-socials a:nth-child(2):hover {
  border-color: rgba(var(--azure-rgb), 0.7);
  color: var(--azure);
  background: rgba(var(--azure-rgb), 0.08);
  box-shadow: 0 10px 24px -12px rgba(var(--azure-rgb), 1);
}
.footer-socials a:nth-child(3):hover {
  border-color: rgba(var(--emerald-rgb), 0.7);
  color: var(--emerald);
  background: rgba(var(--emerald-rgb), 0.08);
  box-shadow: 0 10px 24px -12px rgba(var(--emerald-rgb), 1);
}
.footer-socials a:hover {
  transform: translateY(-3px);
}
.footer-bottom {
  margin-top: clamp(36px, 4vw, 60px);
  padding: 26px 0 30px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 16px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-mute);
}
/* Дисклеймер — отдельной строкой над копирайтом */
.footer-bottom > .muted {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0;
  max-width: 74ch;
  line-height: 1.65;
  color: var(--text-mute);
}
/* Копирайт — слева, документы — справа */
.footer-bottom > p:not(.muted) {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
}

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-34px);
}
[data-reveal="right"] {
  transform: translateX(34px);
}
[data-reveal="zoom"] {
  transform: scale(0.94);
}
[data-reveal].is-visible {
  transform: none;
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--gold);
  border: 1px solid var(--line);
  background: rgba(var(--chrome-rgb), 0.92);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s,
    visibility 0.35s,
    transform 0.35s var(--ease),
    border-color 0.3s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  border-color: transparent;
  color: #fff;
  background:
    var(--chrome-rgb) padding-box,
    var(--grad-circus) border-box;
  box-shadow:
    var(--shadow-md),
    0 0 30px -8px rgba(216, 26, 66, 0.8);
}

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 1200px) {
  .grid-4,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  :root {
    --header-h: 76px;
  }
  /* на планшетах и телефонах анимируем только по вертикали */
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(26px);
  }
  .nav {
    display: none;
  }
  /* Меню уезжает в бургер: центральная колонка схлопывается, логотип и
     действия остаются по краям сетки .header-inner. */
  .burger {
    display: block;
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-about {
    grid-column: 1 / -1;
  }
  .footer-about p {
    max-width: 52ch;
  }
  .split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .events-grid,
  .events-grid--wide {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-total) + 72px) 84px;
  }
  .hero__scroll {
    display: none;
  }
}
@media (max-width: 640px) {
  :root {
    --header-h: 68px;
    --radius: 14px;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .stats,
  .steps {
    grid-template-columns: 1fr;
  }
  .partner {
    width: 148px;
  }
  .form__grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .brand__name {
    font-size: 1.1rem;
  }
  .btn {
    width: 100%;
  }
  .btn--auto,
  .chip,
  .lang__toggle {
    width: auto;
  }
  .hero__actions .btn {
    width: 100%;
  }
  /* Мобильные варианты выносят действие вправо и вниз, оставляя верхнюю
     область спокойной для длинного многоязычного текста hero. */
  .hero__media img {
    object-position: right center;
  }
  .card__actions .btn {
    width: 100%;
  }
  .hero__country {
    min-width: 100%;
    max-width: none;
  }
  .mobile-menu__link {
    font-size: 1.35rem;
  }
  .filters__row {
    gap: 8px;
  }
  .search {
    max-width: none;
    flex-basis: 100%;
  }
  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    text-align: left;
  }
  .footer-bottom > .muted,
  .footer-bottom > p:not(.muted),
  .footer-bottom > .footer-legal {
    grid-row: auto;
    grid-column: 1;
  }
  .footer-bottom > .muted {
    order: -1;
  }
  .footer-bottom > .footer-legal {
    justify-self: start;
    justify-content: flex-start;
    order: 1;
  }
}
@media (max-width: 640px) {
  .kicker {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }
  .hero__title {
    word-break: normal;
  }
  .split,
  .stack-lg,
  .grid {
    min-width: 0;
  }
}
@media (max-width: 380px) {
  body {
    font-size: 15px;
  }
  .container {
    padding-inline: 16px;
  }
  .card__meta-row {
    flex-direction: column;
    gap: 2px;
  }
  .card__meta-row dt {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
@media print {
  .site-header,
  .mobile-menu,
  .to-top,
  .hero__scroll,
  .btn {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* --- Текст поверх фотографий -----------------------------------------
   Под этими блоками лежит тёмная градиентная вуаль (--scrim-rgb),
   поэтому здесь текст всегда светлый — независимо от темы страницы. */
.program-card__body,
.country-card__body,
.cta-banner {
  color: var(--on-photo);
}
.program-card__body :is(h1, h2, h3, h4, p, li, strong, span, dt, dd),
.country-card__body :is(h1, h2, h3, h4, p, li, strong, span),
.cta-banner :is(h1, h2, h3, h4, p, li) {
  color: var(--on-photo);
}
.program-card__body .text-gold,
.country-card__body .text-gold,
.cta-banner .text-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.program-card__body .card__text,
.country-card__cities,
.cta-banner p {
  color: rgba(255, 255, 255, 0.78);
}
.program-card__body .kicker,
.country-card__body .kicker,
.cta-banner .kicker {
  color: var(--gold-light);
}

/* Шапка на узких экранах: логотип не должен выдавливать бургер за край.
   На 390px «CIRCUS ASIA» + разрядка тега давали ~8px переполнения. */
@media (max-width: 640px) {
  .brand {
    flex-shrink: 1;
    min-width: 0;
    gap: 10px;
  }
  .brand__text {
    min-width: 0;
  }
  .brand__name {
    font-size: 1.06rem;
    letter-spacing: 0.1em;
  }
  .header-actions {
    gap: 8px;
  }
  .lang__toggle {
    padding: 8px 11px;
  }
}
@media (max-width: 400px) {
  .brand__mark {
    width: auto;
    height: 34px;
  }
  .brand__name {
    font-size: 0.98rem;
  }
}

/* =====================================================================
   11. Мобильная версия
   Блок идёт последним: правила здесь уточняют базовые компоненты для
   телефонов и планшетов — безопасные зоны выреза, крупные цели
   нажатия, читаемая микротипографика, ленты с прокруткой вбок и
   поведение на экранах без курсора.
   ===================================================================== */

/* ---------- 11.1 Безопасные зоны --------------------------------------
   viewport-fit=cover отдаёт странице всю площадь экрана, включая вырез
   и полосу жеста. Дальше по файлу отступы считаются через эти токены. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* высота шапки вместе с зоной выреза — от неё пляшут отступы сверху */
  --header-total: calc(var(--header-h) + var(--safe-t));
  /* внутренний отступ контейнера с учётом выреза: в альбомной
     ориентации вырез съедает левый или правый край */
  --pad-l: calc(var(--gutter) + var(--safe-l));
  --pad-r: calc(var(--gutter) + var(--safe-r));
}
.container {
  padding-inline: var(--pad-l) var(--pad-r);
}
/* На узких экранах поля меньше — правило ниже заменяет прежний
   padding-inline: 16px, но сохраняет поправку на вырез. */
@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }
}
html {
  /* якорные ссылки не должны заезжать под фиксированную шапку */
  scroll-padding-top: calc(var(--header-total) + 16px);
}
.site-header {
  padding-top: var(--safe-t);
}
.to-top {
  right: calc(18px + var(--safe-r));
  bottom: calc(18px + var(--safe-b));
}
.site-footer {
  padding-bottom: var(--safe-b);
}

/* ---------- 11.2 Экран без курсора ------------------------------------
   После тапа :hover «залипает» на элементе до следующего касания:
   карточка остаётся приподнятой, фото — увеличенным. На сенсорных
   экранах наведение отключаем и заменяем коротким откликом на нажатие. */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .card.is-past:hover,
  .program-card:hover,
  .country-card:hover,
  .feature:hover,
  .offer-card:hover,
  .contact-item:hover,
  .step:hover,
  .stat:hover,
  .tour__stop:hover,
  .partner:hover,
  .chip:hover,
  .chip.is-active:hover,
  .hero__country:hover,
  .to-top:hover,
  .brand:hover .brand__mark,
  .schedule tbody tr:hover {
    transform: none;
  }
  .partner:hover img,
  .about__item:hover .about__item-icon,
  .feature:hover .feature__icon,
  .offer-card:hover .offer-card__icon,
  .contact-item:hover .contact-item__icon,
  .link-more:hover .icon,
  .mobile-menu__link:hover .icon,
  .btn:hover .btn__arrow {
    transform: none;
  }
  /* подчёркивание-градиент раскрывается только по факту нажатия */
  .link-more:hover::after,
  a:hover > .link-more::after,
  .program-card:hover .link-more::after {
    transform: scaleX(0);
  }
  .link-more:active::after {
    transform: scaleX(1);
  }

  /* отклик на нажатие: короткое «вдавливание» вместо подъёма */
  .card:active,
  .program-card:active,
  .country-card:active,
  .feature:active,
  .offer-card:active,
  .contact-item:active,
  .step:active,
  .stat:active,
  .hero__country:active {
    transform: scale(0.985);
    transition-duration: 0.12s;
  }
  .btn:active,
  .chip:active,
  .burger:active,
  .to-top:active,
  .lang__toggle:active,
  .footer-socials a:active {
    transform: scale(0.96);
    transition-duration: 0.12s;
  }
}
/* Подсветка тапа — в цвет темы, а не системный синий прямоугольник */
a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: rgba(232, 195, 81, 0.16);
}

/* ---------- 11.3 Ленты с прокруткой вбок ------------------------------
   Маршрут, фильтры и галерея логотипов листаются пальцем. Ленты
   дотягиваются до краёв экрана: последняя карточка не «упирается»
   в поле контейнера, а полоса прокрутки не режет тень. */
.filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 860px) {
  .tour__track,
  .filters__chips {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tour__track {
    margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));
    padding-inline: var(--pad-l) var(--pad-r);
    scroll-snap-type: x mandatory;
  }
  .filters {
    gap: 14px;
  }
  /* подпись группы встаёт над лентой: чипы получают всю ширину экрана.
     min-width: 0 обязателен — иначе строка растягивается по «неразрывной»
     ширине чипов и лента вместо прокрутки распирает сетку. */
  .filters__row {
    flex-direction: column;
    /* nowrap обязателен: колонка с переносом меряет ширину линии по
       содержимому, и лента чипов растягивала бы строку вместо прокрутки */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
  }
  .filters__label {
    margin-right: 0;
  }
  .filters__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));
    padding: 2px var(--pad-r) 2px var(--pad-l);
    /* края растворяются — видно, что лента продолжается за экраном */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .filters__chips::-webkit-scrollbar {
    display: none;
  }
  .filters__chips .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .search {
    max-width: none;
  }
}

/* Расписание — таблица из пяти колонок: на телефоне она не сжимается,
   а листается вбок вместе с шапкой. Лента дотянута до краёв экрана,
   правый край растворяется — видно, что за ним есть ещё колонки. */
@media (max-width: 860px) {
  .table-wrap {
    margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));
    border-radius: 0;
    border-inline: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .schedule caption {
    padding: 14px var(--pad-l) 12px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .schedule th,
  .schedule td {
    padding: 13px 14px;
  }
  .schedule th {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  /* даты и кнопка билета не должны рассыпаться по строкам */
  .schedule td:nth-child(3) {
    white-space: nowrap;
  }
  .schedule td:last-child .btn {
    width: auto;
    white-space: nowrap;
  }
}

/* ---------- 11.4 Планшет ---------------------------------------------- */
@media (max-width: 1024px) {
  /* «Наверх» не должна перекрывать нижний правый угол карточек */
  .to-top {
    width: 44px;
    height: 44px;
  }
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 11.5 Телефон ----------------------------------------------
   Ниже 640px правим три вещи: плотность сеток, размер целей нажатия
   (минимум 44px) и мелкий шрифт служебных подписей — на экране
   телефона они опускались до 9–10px. */
@media (max-width: 640px) {
  /* --- сетки --- */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .stat {
    padding: 16px 14px 16px 18px;
  }
  .stat__value {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .stat__label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  /* Крупный заголовок на телефоне переносится на две-три строки и
     «слипается» со следующим абзацем — у h2/h3 своих отступов нет. */
  :is(.display-1, .display-2, .display-3) + p {
    margin-top: 14px;
  }
  /* портретная плитка страны занимала почти весь экран — режем высоту */
  .country-card {
    aspect-ratio: 16/10;
  }
  .program-card {
    min-height: 300px;
  }
  .section-head__row {
    gap: 18px;
  }
  .section-head__row .link-more {
    margin-top: -6px;
  }

  /* --- прочее --- */
  .cta-banner {
    padding-inline: 22px;
  }
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .about__actions,
  .hero__actions {
    width: 100%;
  }
  .results-count {
    font-size: 0.84rem;
  }
}

/* ---------- 11.5a Микротипографика и цели нажатия ----------------------
   Служебные подписи на телефоне опускались до 9–10px, а ссылки подвала
   и «хлебных крошек» давали цель нажатия в 16–18px. Правила ниже
   действуют и на сенсорных планшетах, где ширина ещё «десктопная»,
   но палец — тот же. */
@media (pointer: coarse) and (max-width: 1024px), (max-width: 640px) {
  .kicker {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    gap: 8px 10px;
    margin-bottom: 18px;
  }
  .badge {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 5px 10px;
  }
  .tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 6px 12px;
  }
  .btn--sm {
    min-height: 46px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  .chip {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    min-height: 44px;
  }
  .filters__label {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }
  .lang-option__code {
    font-size: 0.7rem;
  }
  .footer-bottom {
    font-size: 0.82rem;
  }
  .card__meta-row dt {
    width: 92px;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }
  .card__meta-row dd,
  .card__meta-row {
    font-size: 0.86rem;
  }
  .tour__country,
  .country-card__count {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  /* --- цели нажатия: минимум 44px по короткой стороне --- */
  .footer-col ul {
    gap: 0;
  }
  .footer-col ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
  }
  .footer-socials a {
    width: 46px;
    height: 46px;
  }
  .breadcrumbs {
    font-size: 0.84rem;
  }
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .contact-item__label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }
  /* логотип в шапке — такая же цель нажатия, как бургер рядом */
  .brand {
    min-height: 44px;
    align-items: center;
  }
  .link-more {
    min-height: 44px;
    align-items: center;
    font-size: 0.78rem;
  }
  .lang-option {
    min-height: 52px;
  }
  .mobile-menu__contacts {
    gap: 0;
    font-size: 1rem;
  }
  .mobile-menu__contacts a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    border-top: 1px solid var(--line-soft);
  }
  .contact-item {
    min-height: 64px;
  }
}

/* ---------- 11.6 Формы на телефоне ------------------------------------
   Safari увеличивает страницу при фокусе, если шрифт поля меньше 16px.
   Поднимаем размер именно на сенсорных экранах, чтобы на десктопе
   компактная вёрстка формы осталась прежней. */
@media (pointer: coarse) {
  .field input,
  .field select,
  .field textarea,
  .form--compact .field input,
  .form--compact .field select,
  .form--compact .field textarea,
  .search input {
    font-size: 16px;
  }
  .field input,
  .field select {
    min-height: 50px;
  }
  .field textarea {
    min-height: 128px;
  }
  .search input {
    min-height: 50px;
  }
}
@media (pointer: coarse) and (max-width: 1024px), (max-width: 640px) {
  .field label,
  .form--compact .field label {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }
  .form__note {
    font-size: 0.84rem;
  }
  .form--panel {
    padding: 20px 16px;
  }
}

/* ---------- 11.7 Телефон в альбомной ориентации ------------------------
   Высоты экрана хватает только на заголовок: убираем полноэкранную
   сцену и сжимаем меню, чтобы пункты помещались без прокрутки. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero,
  .hero--page {
    min-height: auto;
    padding-block: calc(var(--header-total) + 36px) 44px;
  }
  .hero__scroll {
    display: none;
  }
  .hero__countries {
    margin-top: 26px;
    padding-top: 18px;
  }
  .mobile-menu {
    padding-top: calc(var(--header-total) + 12px);
  }
  .mobile-menu__link {
    font-size: 1.15rem;
    padding: 11px 0;
  }
  .mobile-menu__list {
    margin-bottom: 18px;
  }
  .section {
    padding-block: 56px;
  }
}

/* ---------- 11.8 Очень узкие экраны (320–360px) ------------------------ */
@media (max-width: 360px) {
  .stats {
    grid-template-columns: 1fr;
  }
  .card__meta-row {
    flex-direction: column;
    gap: 2px;
  }
  .card__meta-row dt {
    width: auto;
  }
  .badge {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding: 5px 9px;
  }
}

/* ---------- 11.9 Hero главной: планшет и телефон -----------------------
   Свет на маленьком экране мягче (меньше слоёв размытия), а текст,
   кнопки и плитки перестраиваются в одну удобную колонку. */
@media (max-width: 1024px) {
  .hero--main .hero__content {
    max-width: 760px;
  }
  .hero__program {
    flex: 1 1 300px;
  }
}
@media (max-width: 900px) {
  .hero--main {
    min-height: auto;
    padding-bottom: clamp(56px, 9vw, 84px);
  }
  .hero__beam {
    width: clamp(200px, 54vw, 420px);
    margin-left: calc(-0.5 * clamp(200px, 54vw, 420px));
    /* Узкий экран — узкий конус: слой луча здесь тоже уже */
    --beam-spread: 6deg;
    opacity: 0.4;
  }
  .hero__orb--gold {
    display: none;
  }
  .hero__orb {
    width: clamp(220px, 62vw, 420px);
  }
  .hero--main .hero__content::before {
    width: 132%;
    height: 122%;
  }
}
@media (max-width: 640px) {
  .hero--main {
    padding-bottom: 58px;
  }
  .hero__beam {
    --beam-spread: 4deg;
  }
  .hero--main .hero__title {
    font-size: clamp(2.7rem, 13vw, 3.9rem);
    letter-spacing: -0.035em;
  }
  .hero--main .hero__subtitle {
    margin-top: 12px;
    font-size: 1.04rem;
    letter-spacing: 0.01em;
  }
  .hero__divider {
    width: min(220px, 62%);
    margin-block: 18px;
  }
  .hero--main .hero__text {
    font-size: 1rem;
    line-height: 1.6;
  }
  .hero--main .hero__actions {
    margin-top: 26px;
    gap: 12px;
  }
  .btn--ticket,
  .btn--glass {
    min-height: 54px;
    padding-inline: 22px;
  }
  .hero__programs {
    margin-top: 28px;
  }
  .hero__programs-label {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    gap: 10px;
  }
  .hero__program {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
  }
  .hero__program-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  /* Четыре страны — сеткой 2×2, а не четырьмя полосами во всю ширину */
  .hero--main .hero__countries {
    margin-top: 28px;
    padding-top: 20px;
    gap: 8px;
  }
  .hero--main .hero__country {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    max-width: none;
    padding: 10px 12px 10px 16px;
  }
  .hero--main .hero__country strong {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
  }
  .hero--main .hero__country span {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 380px) {
  .hero--main .hero__country {
    flex-basis: 100%;
  }
  .hero__program-meta {
    letter-spacing: 0.1em;
  }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero--main .hero__programs,
  .hero--main .hero__countries {
    margin-top: 22px;
  }
  .hero--main .hero__countries {
    padding-top: 16px;
  }
}
/* Сенсорные экраны: подъём плитки заменяется коротким нажатием */
@media (hover: none) {
  .hero__program:hover {
    transform: none;
  }
  .hero__program:hover .hero__program-arrow,
  .btn--ticket:hover .btn__arrow {
    transform: none;
  }
  .hero__program:active {
    transform: scale(0.985);
    transition-duration: 0.12s;
  }
}

/* Невысокие ноутбуки: сцена целиком помещается в один экран */
@media (min-width: 901px) and (max-height: 880px) {
  .hero--main {
    min-height: auto;
    padding-block: calc(var(--header-total) + 30px) 100px;
  }
  .hero--main .hero__title {
    font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  }
  .hero__divider {
    margin-block: 16px;
  }
  .hero--main .hero__programs {
    margin-top: 24px;
  }
  .hero--main .hero__countries {
    margin-top: 26px;
    padding-top: 18px;
  }
}

/* ===== Производительность: мобильные и prefers-reduced-motion ========== */
/* Весь декор остаётся на месте — гасится только вечное движение,
   которое на телефоне почти не читается, а рисовать его дорого. */
@media (max-width: 720px) {
  .ornament::before,
  .hero::before,
  .hero::after,
  .cta-banner::before,
  .cta-banner::after,
  .hero__beam,
  .hero__orb,
  .btn--ticket::after,
  .brand__name.text-gold {
    animation: none;
  }
  /* Слои больше не анимируются — снимаем и заявку на композитинг,
     иначе они просто держат видеопамять. */
  .ornament::before,
  .hero::before,
  .hero::after,
  .cta-banner::before,
  .cta-banner::after,
  .hero__beam,
  .hero__orb,
  .btn--ticket::before {
    will-change: auto;
  }
  /* Перелив билетной кнопки замирает на своём среднем кадре */
  .btn--ticket::before {
    animation: none;
    transform: translate3d(-29%, 0, 0);
  }
  /* Пульс-кольца без анимации застыли бы видимой рамкой */
  .btn--cta::before {
    display: none;
  }
  /* Размытий в Hero больше нет вовсе — ни filter, ни backdrop-filter */
  .site-header.is-scrolled {
    backdrop-filter: blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ornament::before,
  .hero::before,
  .hero::after,
  .cta-banner::before,
  .cta-banner::after,
  .hero__beam,
  .hero__orb,
  .btn--ticket::before,
  .btn--ticket::after,
  .tour__stop.is-current .tour__dot::before,
  .brand__name.text-gold,
  .hero__scroll::after {
    animation: none !important;
  }
  .ornament::before,
  .hero::before,
  .hero::after,
  .cta-banner::before,
  .cta-banner::after,
  .hero__beam,
  .hero__orb,
  .btn--ticket::before {
    will-change: auto;
  }
  .btn--ticket::before {
    transform: translate3d(-29%, 0, 0);
  }
  .btn--cta::before {
    display: none;
  }
  /* Въезд контента и наезд камеры на фотографию — тоже движение */
  .hero__media img {
    animation: none;
    transform: scale(1);
  }
  .hero--main .hero__content > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   12. Яркая цирковая тема — переопределения и новые блоки
   Ниже собрано всё, что нельзя было выразить одними токенами:
   компоненты, которые раньше рассчитывали на тёмный фон, и новые
   секции (жанры, сетка партнёров, SEO-текст, страницы «О компании»
   и юридических документов).
   ===================================================================== */

/* ---------- 12.1 Фон страницы: карамельные пятна софитов ------------- */
body::before {
  background: rgba(255, 199, 0, 0.17);
}
::selection {
  background: rgba(255, 199, 0, 0.45);
  color: var(--text);
}

/* ---------- 12.2 Кнопки ----------------------------------------------- */
/* Главная кнопка стала карминово-фиолетовой: на светлом фоне она видна
   лучше золота и держит контраст с белым текстом. */
.btn--gold {
  background: #ef1e4b;
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 16px 34px -14px rgba(239, 30, 75, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.btn--gold:hover {
  color: #fff;
  box-shadow:
    0 22px 48px -14px rgba(224, 32, 143, 0.8),
    0 0 34px -8px rgba(124, 58, 237, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.btn--cta::before {
  border-color: rgba(255, 199, 0, 0.85);
}
.btn--ghost {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover {
  color: var(--red-deep);
}
.btn[disabled],
.btn.is-disabled {
  opacity: 1;
  filter: none;
  background: rgba(45, 18, 72, 0.06);
  color: var(--text-mute);
  border-color: var(--line-soft);
}

/* ---------- 12.3 Точечные правки под светлый фон --------------------- */
/* Активный пункт, бургер и переключатель языка красим в цирковой красный
   только когда шапка стоит на светлом фоне: поверх фотографии Hero
   интерфейс остаётся светлым (см. правило выше). */
.site-header.is-scrolled .nav__link.is-active,
.site-header--solid .nav__link.is-active {
  color: var(--red-deep);
}
.site-header.is-scrolled .burger span,
.site-header--solid .burger span {
  background: var(--red);
}
.site-header.is-scrolled .lang__toggle:hover,
.site-header--solid .lang__toggle:hover,
.lang-modal__close:hover,
.lang-option[aria-selected="true"] {
  color: var(--red-deep);
}
/* Светлая «сплошная» шапка для страниц без большой фотографии */
.site-header--solid {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 14px 34px -30px rgba(45, 18, 72, 0.6);
}
.site-header--solid::after,
.site-header.is-scrolled::after {
  opacity: 1;
}
/* Подписи и надзаголовки поверх фотографий остаются светлыми */
.hero__subtitle{
  color: #fff;
}
.hero--main .hero__kicker,
.cta-banner .kicker,
.program-card__body .kicker,
.country-card__body .kicker {
  color: var(--gold-glow);
}
/* Год в графике тура — цирковой градиент вместо золота */
.tour-year__title {
  background: var(--grad-circus-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.section--alt {
  background: var(--grad-dark);
}
.section--alt::before,
.section--alt::after {
  opacity: 1;
  height: 4px;
}
/* Фотофоны секций сохраняем, но под светлой вуалью */
.section--alt#tour,
.section--alt#tickets,
.section--alt#about {
  background:
    var(--veil-section),
    var(--slot-fill);
}
.site-footer {
  background: #6d1b7b;
  color: #fff;
}
.site-footer p,
.site-footer li,
.footer-col a {
  color: rgba(255, 255, 255, 0.82);
}
.site-footer h3 {
  color: #fff;
}
.footer-col a:hover {
  color: var(--gold-glow);
}
.site-footer .brand__name.text-gold {
  background: #ffd166;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-banner {
  border-color: rgba(255, 199, 0, 0.55);
  background: #d61f5f;
}

/* ---------- 12.4 Цирковые жанры --------------------------------------- */
/* Крупные яркие плитки: фотография жанра, цветная вуаль своего оттенка
   и подпись поверх. Цвет плитки задаётся одной переменной --g-rgb. */
.genres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.genre {
  --g-rgb: var(--red-rgb);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  min-height: clamp(280px, 34vw, 420px);
  isolation: isolate;
  border: 1px solid rgba(var(--g-rgb), 0.28);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}
.genre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-rgb);
  transition: opacity 0.45s var(--ease);
}
.genre:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--g-rgb), 0.9);
  box-shadow:
    var(--shadow-lg),
    0 0 48px -18px rgba(var(--g-rgb), 0.9);
}
.genre__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.6vw, 32px);
  color: #fff;
}
.genre__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(var(--g-rgb), 0.92);
  box-shadow: 0 8px 20px -10px rgba(var(--g-rgb), 1);
}
.genre__title {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.genre__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
/* Раскладка сетки жанров задаётся ниже, в секции 14.11 */

/* ---------- 12.5 Партнёры: статичная сетка ---------------------------- */
/* Минималистичная сетка 4x2: все карточки одинаковые — один светлый фон,
   одна тонкая граница, один радиус и одни отступы. Никаких цветных полос,
   индивидуальных тёмных плиток и тяжёлых теней.

   Оптическое выравнивание. У логотипов разные пропорции (от 2.33:1
   у Syntlex до 5.12:1 у Concert.kg), поэтому общая max-height делала
   бы широкие логотипы крошечными, а квадратные — огромными. Вместо неё
   каждой карточке задан «колодец» .partner-tile__logo одного размера
   с постоянной пропорцией 188:62, а логотипу внутри — свой бокс:
   --lw (доля ширины колодца, %) и --lh (доля высоты колодца, %).
   Размеры бокса подобраны так, чтобы у всех логотипов совпадала
   геометрическая средняя sqrt(w*h) — то есть одинаковая оптическая
   площадь: широкие занимают больше ширины, вертикальные не разрастаются.
   Так как колодец сохраняет пропорцию, при сужении экрана все логотипы
   уменьшаются одним и тем же коэффициентом и строй не ломается.

   Concert.kg и Syntlex нарисованы белой краской «под тёмный фон» и на
   светлой плитке пропадали. Прозрачных тёмных версий в assets не было,
   поэтому рядом лежат перекрашенные копии (*-dark): белая краска заменена
   на тёмную, фирменные цветные части сохранены, фон остался прозрачным.

   КудаGo — исключение: у бренда стандартный оранжево-белый знак, и
   перекрашивать его нельзя. Вместо этого логотип лежит на тёмной
   фирменной подложке внутри светлой плитки — см. .partner-tile--kudago
   ниже. Так знак остаётся оригинальным и при этом читается. */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
}
.partner-tile {
  display: grid;
  place-items: center;
  min-height: clamp(82px, 7.2vw, 104px);
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(45, 18, 72, 0.1);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

/* Единый колодец под логотип: одинаков во всех карточках. */
.partner-tile__logo {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 188px;
  aspect-ratio: 188 / 62;
}
.partner-tile__logo img {
  --lw: 100;
  --lh: 100;
  width: 100%;
  height: 100%;
  max-width: calc(var(--lw) * 1%);
  max-height: calc(var(--lh) * 1%);
  object-fit: contain;
  object-position: center;
}

/* Персональные боксы: равная оптическая площадь при разных пропорциях.
   --lw — доля ширины колодца (%), --lh — доля его высоты (%). */
.partner-tile--concert .partner-tile__logo img {
  /* 5.12:1 — самый широкий, забирает почти всю ширину колодца */
  --lw: 99.2;
  --lh: 58.6;
}
.partner-tile--showgo .partner-tile__logo img {
  /* 4.42:1, плотная заливка — чуть сдержаннее по площади */
  --lw: 86.9;
  --lh: 59.5;
}
.partner-tile--pillars .partner-tile__logo img {
  /* 4.17:1 */
  --lw: 86.9;
  --lh: 62.9;
}
.partner-tile--kassir .partner-tile__logo img {
  /* 3.44:1, плотная заливка */
  --lw: 78.6;
  --lh: 69.2;
}
.partner-tile--syntlex .partner-tile__logo img {
  /* 2.33:1, плотная заливка */
  --lw: 65.3;
  --lh: 84.5;
}
.partner-tile--kudago .partner-tile__logo img {
  /* 1.23:1 — почти квадрат. По формуле равной площади он вышел бы выше
     колодца и давил бы соседей, поэтому взят мягкий коэффициент 0.82:
     плотное пятно и так «весит» больше тонкого леттеринга.
     Белая часть знака видна только на тёмном — отсюда подложка. */
  --lw: 40.7;
  --lh: 100;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--c-ink);
}

/* Минимальный hover: небольшое поднятие и лёгкая тень. */
.partner-tile:hover,
.partner-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(45, 18, 72, 0.18);
  box-shadow: 0 8px 18px -10px rgba(45, 18, 72, 0.22);
}

/* Колонки уменьшаются вместе с шириной карточки, чтобы колодец под
   логотип оставался почти во всю карточку и внутри не появлялось
   больших пустых полей. */
@media (max-width: 900px) {
  .partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Сенсорные экраны: :hover «залипает» после тапа — заменяем нажатием. */
@media (hover: none) {
  .partner-tile:hover,
  .partner-tile:focus-visible {
    transform: none;
    border-color: rgba(45, 18, 72, 0.1);
    box-shadow: none;
  }
  .partner-tile:active {
    transform: scale(0.985);
    transition-duration: 0.12s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .partner-tile,
  .partner-tile:hover,
  .partner-tile:focus-visible {
    transform: none;
    transition: none;
  }
}

/* ---------- 12.6 Компактный график гастролей -------------------------- */
/* Строка вместо карточки: Город | Даты | Купить билет. */
.tour-stop {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  border-left: 3px solid rgba(var(--stop-rgb), 0.9);
  background: var(--stop-rgb);
}
.tour-year__list .tour-stop:nth-child(4n + 2) {
  --stop-rgb: var(--orange-rgb);
}
.tour-year__list .tour-stop:nth-child(4n + 3) {
  --stop-rgb: var(--violet-rgb);
}
.tour-year__list .tour-stop:nth-child(4n + 4) {
  --stop-rgb: var(--azure-rgb);
}
.tour-stop:hover {
  transform: none;
  border-color: rgba(var(--stop-rgb), 0.5);
  border-left-color: rgba(var(--stop-rgb), 1);
  box-shadow: 0 16px 34px -26px rgba(var(--stop-rgb), 0.9);
}
.tour-stop.is-past {
  opacity: 0.62;
  background: rgba(45, 18, 72, 0.04);
}
.tour-stop__city {
  color: var(--text);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}
.tour-stop__venue,
.tour-stop__program {
  margin-top: 4px;
}
.tour-stop__dates {
  margin-top: 0;
  font-weight: 600;
  color: var(--text-dim);
}
.tour-stop.is-onsale .tour-stop__dates {
  color: var(--red-deep);
}
.tour-stop__aside {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 860px) {
  .tour-stop {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .tour-stop__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .tour-stop__dates-cell {
    grid-column: 1;
  }
}
@media (max-width: 620px) {
  .tour-stop {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tour-stop__aside {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .tour-stop__aside .btn {
    flex: 1 1 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* ---------- 12.7 SEO-описание программы ------------------------------- */
/* Семантическая статья под графиком: настоящие h2/h3, списки и абзацы —
   то, что читают поисковые роботы Google и Яндекса. */
.seo-article {
  max-width: 900px;
}
.seo-article > * + * {
  margin-top: 1.1em;
}
.seo-article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-top: 1.8em;
  color: var(--text);
}
.seo-article h2:first-child {
  margin-top: 0;
}
.seo-article h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  margin-top: 1.5em;
  color: var(--champagne);
}
.seo-article p,
.seo-article li {
  color: var(--text-dim);
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.08rem);
  line-height: 1.75;
}
.seo-article ul,
.seo-article ol {
  display: grid;
  gap: 10px;
  padding-left: 0;
}
.seo-article li {
  position: relative;
  padding-left: 28px;
}
.seo-article ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-circus);
}
.seo-article ol {
  counter-reset: seo;
}
.seo-article ol li {
  counter-increment: seo;
  padding-left: 36px;
}
.seo-article ol li::before {
  content: counter(seo);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-circus);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.seo-article strong {
  color: var(--text);
}
.seo-article a {
  color: var(--red-deep);
  border-bottom: 1px solid rgba(239, 30, 75, 0.35);
}
.seo-article a:hover {
  color: var(--violet);
  border-bottom-color: rgba(124, 58, 237, 0.5);
}

/* Ссылки внутри текста. Глобально у сайта `a { color: inherit;
   text-decoration: none }`, поэтому ссылка в абзаце ничем не отличается от
   прозы — кликать её никто не догадается. Красим так же, как в
   .seo-article и .legal. Ссылки с собственным классом (кнопки, карточки,
   меню) не трогаем: у них своя раскраска. */
.lead a:not([class]),
.card__text a:not([class]),
.form__note a:not([class]),
.about__item-text a:not([class]),
p.small a:not([class]) {
  color: var(--red-deep);
  border-bottom: 1px solid rgba(239, 30, 75, 0.35);
}
.lead a:not([class]):hover,
.card__text a:not([class]):hover,
.form__note a:not([class]):hover,
.about__item-text a:not([class]):hover,
p.small a:not([class]):hover {
  color: var(--violet);
  border-bottom-color: rgba(124, 58, 237, 0.5);
}

/* ---------- 12.8 Страница «О компании» -------------------------------- */
.person-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.person {
  --p-rgb: var(--violet-rgb);
  display: grid;
  gap: 6px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-top: 3px solid rgba(var(--p-rgb), 1);
  box-shadow: 0 16px 36px -28px rgba(45, 18, 72, 0.5);
}
.person:nth-child(2n) {
  --p-rgb: var(--orange-rgb);
}
.person__role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--p-rgb), 1);
  margin: 0;
}
.person__name {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin: 0;
}
.person__text {
  margin: 8px 0 0;
  color: var(--text-dim);
}
.person__note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-mute);
}
/* Лента истории компании */
.history {
  display: grid;
  gap: 0;
  position: relative;
}
.history__item {
  --h-rgb: var(--red-rgb);
  position: relative;
  padding: 0 0 30px 34px;
  border-left: 2px solid rgba(var(--h-rgb), 0.35);
}
.history__item:nth-child(4n + 2) {
  --h-rgb: var(--orange-rgb);
}
.history__item:nth-child(4n + 3) {
  --h-rgb: var(--violet-rgb);
}
.history__item:nth-child(4n + 4) {
  --h-rgb: var(--azure-rgb);
}
.history__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.history__item::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(var(--h-rgb), 1);
  border: 3px solid var(--page);
  box-shadow: 0 0 0 3px rgba(var(--h-rgb), 0.25);
}
.history__year {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(var(--h-rgb), 1);
  margin: 0 0 6px;
  line-height: 1;
}
.history__title {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin: 0 0 6px;
}
.history__text {
  margin: 0;
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .person-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 12.9 Юридические страницы --------------------------------- */
.legal {
  max-width: 860px;
}
.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-top: 1.9em;
}
.legal h2:first-of-type {
  margin-top: 0;
}
.legal h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-top: 1.5em;
  color: var(--champagne);
}
.legal p,
.legal li {
  color: var(--text-dim);
  line-height: 1.75;
}
.legal > * + * {
  margin-top: 1em;
}
.legal ul {
  display: grid;
  gap: 8px;
}
.legal li {
  position: relative;
  padding-left: 24px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.legal a {
  color: var(--red-deep);
  border-bottom: 1px solid rgba(239, 30, 75, 0.35);
}
.legal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--champagne);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 28px;
}

/* ---------- 12.10 Мелкие яркие акценты -------------------------------- */
.tag {
  color: var(--red-deep);
  background: rgba(239, 30, 75, 0.08);
  border-color: rgba(239, 30, 75, 0.24);
}
.tag:nth-child(2n) {
  color: var(--purple);
  background: rgba(124, 58, 237, 0.09);
  border-color: rgba(124, 58, 237, 0.24);
}
.tag:nth-child(3n) {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.24);
}
.stat {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  box-shadow: 0 14px 32px -26px rgba(45, 18, 72, 0.5);
}
.stat__value.text-gold {
  background: var(--grad-circus-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-legal {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
  margin-top: 0;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.footer-legal a:hover {
  color: var(--gold-glow);
  border-bottom-color: var(--gold-glow);
}

/* Ячейка дат в компактной строке графика */
.tour-stop__dates-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.tour-stop__dates {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-stop__dates .icon {
  flex: none;
  color: rgba(var(--stop-rgb), 1);
}
.tour-stop__dates time {
  white-space: nowrap;
}
@media (max-width: 620px) {
  .tour-stop__dates time {
    white-space: normal;
  }
}

/* =====================================================================
   13. Цирковой карнавал: декор, полосы шапито, конфетти
   Слой «праздника» поверх базовых компонентов. Всё декоративное —
   на псевдоэлементах и aria-hidden, на семантику не влияет.
   ===================================================================== */

/* Полоса купола шапито: чередование цветных клиньев. Ставится как
   разделитель между секциями: <div class="tent-band" aria-hidden="true"></div> */
.tent-band {
  height: 22px;
  background: #ef1e4b;
  box-shadow: 0 8px 24px -14px rgba(45, 18, 72, 0.55);
}
.tent-band--thin {
  height: 12px;
}

/* Конфетти: цветные кружки, разбросанные по фону секции */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.confetti span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0.5;
  animation: confettiFloat 9s ease-in-out infinite;
}
.confetti span:nth-child(1) {
  left: 4%;
  top: 12%;
  background: #ef1e4b;
}
.confetti span:nth-child(2) {
  left: 18%;
  top: 68%;
  background: #ffc700;
  width: 20px;
  height: 20px;
  animation-delay: -1.4s;
}
.confetti span:nth-child(3) {
  left: 34%;
  top: 22%;
  background: #7c3aed;
  width: 10px;
  height: 10px;
  animation-delay: -2.8s;
}
.confetti span:nth-child(4) {
  right: 26%;
  top: 74%;
  background: #0ea5e9;
  width: 16px;
  height: 16px;
  animation-delay: -4.2s;
}
.confetti span:nth-child(5) {
  right: 9%;
  top: 18%;
  background: #ff6b00;
  width: 22px;
  height: 22px;
  animation-delay: -5.6s;
}
.confetti span:nth-child(6) {
  right: 38%;
  top: 8%;
  background: #e0208f;
  width: 12px;
  height: 12px;
  animation-delay: -7s;
}
@keyframes confettiFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -22px, 0) rotate(180deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti span {
    animation: none;
  }
}
.section > .container,
.hero__content {
  position: relative;
  z-index: 1;
}

/* Секция на цветной карамельной подложке */
.section--candy {
  background: #fff7ea;
}

/* Надзаголовок секции — яркая «таблетка» вместо серой строки */
.kicker {
  color: var(--red-deep);
}
.section-head .kicker,
.section-head--center .kicker {
  display: inline-flex;
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  background: rgba(239, 30, 75, 0.1);
  letter-spacing: 0.24em;
}
.section-head--center .kicker {
  margin-inline: auto;
}
.section-head--center::after {
  height: 6px;
  border-radius: 6px;
}

/* Карточки: цветная рамка вместо тонкой линии */
.card,
.program-card,
.country-card {
  border-width: 1px;
  border-color: rgba(var(--card-rgb, var(--red-rgb)), 0.28);
  background: #fff;
}
.country-card,
.program-card {
  border-color: rgba(255, 255, 255, 0.55);
}
.stat {
  border-top: 3px solid var(--red);
}
.stat:nth-child(4n + 2) {
  border-top-color: var(--orange);
}
.stat:nth-child(4n + 3) {
  border-top-color: var(--violet);
}
.stat:nth-child(4n + 4) {
  border-top-color: var(--azure);
}
.feature {
  background: #fff;
  border-width: 1px;
  border-color: rgba(124, 58, 237, 0.18);
}

/* Hero главной: вуаль ярче и цветнее, свет софитов насыщеннее */
.hero--main .hero__overlay {
  mix-blend-mode: normal;
}
.hero__beam {
  opacity: 0.85;
}
.to-top {
  background: var(--grad-circus);
  border-color: transparent;
  color: #fff;
}

/* Компактная шапка внутренней страницы без большой фотографии */
.page-head {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(36px, 5vw, 64px);
}
.page-head .breadcrumbs {
  padding-top: 0;
  margin-bottom: 16px;
}

/* Крупный баннер страницы программы */
.hero--program {
  min-height: clamp(520px, 72vh, 780px);
}
.hero--program .hero__content {
  padding-bottom: clamp(24px, 4vw, 48px);
}

/* ---------- 13. Выпадающий список «Программы» -------------------------
   Десктоп раскрывает список по наведению, мобильное меню — по нажатию
   (там пункт становится кнопкой). Панель начинается вплотную к <li>,
   а её верхний отступ прозрачный: курсор переезжает с «Программы» на
   список, не выходя из зоны :hover, и меню не схлопывается. */
.nav__item--drop {
  position: relative;
}
.nav__link--drop {
  gap: 6px;
}
.nav__caret {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  transition:
    transform 0.34s var(--ease),
    opacity 0.34s var(--ease);
}
.nav__item--drop.is-open .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  /* прозрачный «мостик» между пунктом меню и карточкой списка */
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition:
    opacity 0.32s var(--ease),
    transform 0.32s var(--ease),
    visibility 0.32s;
}
/* Открытие с клавиатуры и на сенсорных экранах ставит .is-open из JS.
   :focus-within здесь не годится: пока фокус внутри пункта, список нельзя
   было бы закрыть по Escape. */
.nav__item--drop.is-open > .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Карточка списка: собственная светлая палитра. Токены текста внутри
   шапки переворачиваются, пока она лежит поверх фотографии Hero, —
   поэтому цвета здесь заданы явно и не зависят от состояния шапки. */
.nav-drop__list {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 264px;
  padding: 12px 10px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: #fffdf8;
  box-shadow:
    0 26px 58px -26px rgba(76, 29, 149, 0.45),
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
}
/* цветная кромка купола — как у модалки выбора языка */
.nav-drop__list::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--grad-circus);
}
/* тонкая черта отделяет программы от стран */
.nav-drop__list > li:nth-child(3) {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(45, 18, 72, 0.1);
}
.nav-drop__link {
  --accent-rgb: var(--red-rgb);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2c1a4a;
  white-space: nowrap;
  transition:
    color 0.26s var(--ease),
    background-color 0.26s var(--ease),
    transform 0.26s var(--ease),
    box-shadow 0.26s var(--ease);
}
/* уголок-стрелка выезжает справа при наведении */
.nav-drop__link::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  opacity: 0;
  transform: rotate(45deg) translate(-3px, 3px);
  transition:
    opacity 0.26s var(--ease),
    transform 0.26s var(--ease);
}
.nav-drop__link:hover,
.nav-drop__link:focus-visible {
  color: #fff;
  background: var(--accent-rgb);
  transform: translateX(3px);
  box-shadow: 0 12px 24px -14px rgba(var(--accent-rgb), 0.95);
}
.nav-drop__link:hover::after,
.nav-drop__link:focus-visible::after {
  opacity: 0.95;
  transform: rotate(45deg) translate(0, 0);
}
.nav-drop__link[aria-current="page"] {
  color: rgb(var(--accent-rgb));
  background: rgba(var(--accent-rgb), 0.1);
}
.nav-drop__link[aria-current="page"]:hover {
  color: #fff;
}
/* пять цветов купола по пунктам списка */
.nav-drop__list > li:nth-child(1) .nav-drop__link {
  --accent-rgb: var(--red-rgb);
}
.nav-drop__list > li:nth-child(2) .nav-drop__link {
  --accent-rgb: var(--violet-rgb);
}
.nav-drop__list > li:nth-child(3) .nav-drop__link {
  --accent-rgb: var(--gold-rgb);
}
.nav-drop__list > li:nth-child(4) .nav-drop__link {
  --accent-rgb: var(--azure-rgb);
}
.nav-drop__list > li:nth-child(5) .nav-drop__link {
  --accent-rgb: var(--emerald-rgb);
}
.nav-drop__list > li:nth-child(6) .nav-drop__link {
  --accent-rgb: var(--magenta-rgb);
}

/* Наведение открывает список только там, где есть курсор: на сенсорных
   экранах :hover «залипает» после тапа, поэтому там работает клик. */
@media (hover: hover) {
  .nav__item--drop:hover > .nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nav__item--drop:hover .nav__caret {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* ---- мобильное меню: тот же список, но раскрывается по нажатию ---- */
.mobile-menu__link--drop {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  cursor: pointer;
}
.mobile-drop.is-open > .mobile-menu__link--drop {
  color: var(--gold);
}
.mobile-drop.is-open > .mobile-menu__link--drop .icon {
  opacity: 1;
  transform: rotate(90deg);
}
.mobile-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.44s var(--ease),
    opacity 0.3s var(--ease);
}
.mobile-drop.is-open > .mobile-sub {
  max-height: 520px;
  opacity: 1;
}
.mobile-sub__link {
  --accent-rgb: var(--red-rgb);
  display: block;
  padding: 13px 0 13px 16px;
  border-left: 1px solid rgba(var(--tint-rgb), 0.16);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-dim);
  transition:
    color 0.26s var(--ease),
    border-color 0.26s var(--ease),
    padding-left 0.26s var(--ease);
}
.mobile-sub__link:hover,
.mobile-sub__link:focus-visible,
.mobile-sub__link:active,
.mobile-sub__link[aria-current="page"] {
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb));
  padding-left: 22px;
}
.mobile-sub > li:nth-child(1) .mobile-sub__link {
  --accent-rgb: var(--red-rgb);
}
.mobile-sub > li:nth-child(2) .mobile-sub__link {
  --accent-rgb: var(--violet-rgb);
}
.mobile-sub > li:nth-child(3) .mobile-sub__link {
  --accent-rgb: var(--gold-rgb);
}
.mobile-sub > li:nth-child(4) .mobile-sub__link {
  --accent-rgb: var(--azure-rgb);
}
.mobile-sub > li:nth-child(5) .mobile-sub__link {
  --accent-rgb: var(--emerald-rgb);
}
.mobile-sub > li:nth-child(6) .mobile-sub__link {
  --accent-rgb: var(--magenta-rgb);
}

@media (max-width: 480px) {
  .mobile-sub__link {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop,
  .nav__caret,
  .nav-drop__link,
  .nav-drop__link::after,
  .mobile-sub,
  .mobile-sub__link,
  .mobile-menu__link--drop .icon {
    transition-duration: 0.01ms;
  }
  .nav-drop {
    transform: translate(-50%, 0);
  }
  .nav__item--drop.is-open > .nav-drop {
    transform: translate(-50%, 0);
  }
}

/* =====================================================================
   14. ЦИРКОВАЯ АФИША — новый визуальный слой
   ---------------------------------------------------------------------
   Правило слоя: ни одного gradient(). Яркость набирается плоскими
   цветовыми блоками, крупными фотографиями, мультяшным декором
   (конфетти, звёзды, шары, флажки, купол шатра) и контрастной
   типографикой. Весь декор — на псевдоэлементах и в aria-hidden
   контейнерах; движение — только transform/opacity.
   ===================================================================== */

/* ---------- 14.1 Плоские подложки страницы ---------------------------- */
/* Фотоподложка всего сайта и цветные пятна софитов больше не нужны:
   фон страницы — чистый кремовый, а цвет дают сами секции. */
body {
  background: var(--c-cream);
}
body::before,
body::after {
  content: none;
}

/* ---------- 14.2 Библиотека циркового декора --------------------------
   Все рисунки — inline-SVG в data-URI: сплошные заливки, ни одного
   градиента, ни одного дополнительного сетевого запроса. */
:root {
  /* конфетти: кружки, полоски и треугольники девяти цветов */
  --pat-confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Ccircle cx='24' cy='38' r='7' fill='%23FFC800'/%3E%3Crect x='74' y='12' width='8' height='18' rx='4' transform='rotate(24 78 21)' fill='%2335B8F0'/%3E%3Cpath d='M136 30l9 16h-18z' fill='%23FF4D9D'/%3E%3Ccircle cx='196' cy='24' r='5' fill='%2312B76A'/%3E%3Crect x='244' y='30' width='9' height='20' rx='4' transform='rotate(-32 248 40)' fill='%23FF7A00'/%3E%3Ccircle cx='300' cy='58' r='6' fill='%237B3FE4'/%3E%3Cpath d='M40 108l9 15H31z' fill='%231B4FD8'/%3E%3Ccircle cx='108' cy='96' r='6' fill='%23E8112D'/%3E%3Crect x='168' y='104' width='8' height='19' rx='4' transform='rotate(41 172 113)' fill='%23FFC800'/%3E%3Ccircle cx='236' cy='128' r='5' fill='%23FF4D9D'/%3E%3Ccircle cx='292' cy='150' r='7' fill='%2335B8F0'/%3E%3Crect x='22' y='186' width='9' height='20' rx='4' transform='rotate(-18 26 196)' fill='%2312B76A'/%3E%3Cpath d='M92 196l10 16H82z' fill='%23FF7A00'/%3E%3Ccircle cx='158' cy='188' r='6' fill='%237B3FE4'/%3E%3Ccircle cx='214' cy='214' r='5' fill='%23E8112D'/%3E%3Crect x='276' y='206' width='8' height='18' rx='4' transform='rotate(28 280 215)' fill='%231B4FD8'/%3E%3Ccircle cx='48' cy='268' r='6' fill='%23FF4D9D'/%3E%3Cpath d='M124 276l9 15h-18z' fill='%23FFC800'/%3E%3Ccircle cx='196' cy='288' r='7' fill='%2335B8F0'/%3E%3Crect x='250' y='272' width='9' height='19' rx='4' transform='rotate(-36 254 281)' fill='%23E8112D'/%3E%3C/svg%3E");
  /* звёзды: белые и жёлтые, для тёмных и светлых подложек */
  --pat-stars-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M34 14l4.4 9.8L49 25l-7.7 6.9L43.5 43 34 37.4 24.5 43l2.2-11.1L19 25l10.6-1.2z' fill='%23ffffff' opacity='.9'/%3E%3Cpath d='M188 46l3.4 7.6L200 55l-6 5.4 1.7 8.6-7.7-4.4-7.7 4.4 1.7-8.6-6-5.4 8.6-1.4z' fill='%23ffffff' opacity='.75'/%3E%3Cpath d='M96 148l3 6.6 7.5 1.2-5.3 4.7 1.5 7.5-6.7-3.8-6.7 3.8 1.5-7.5-5.3-4.7 7.5-1.2z' fill='%23ffffff' opacity='.8'/%3E%3Cpath d='M226 176l4 8.8 9.6 1.1-7 6.2 2 10-8.6-5-8.6 5 2-10-7-6.2 9.6-1.1z' fill='%23ffffff' opacity='.7'/%3E%3Cpath d='M46 226l2.7 6 6.8 1-4.8 4.3 1.4 6.8-6.1-3.4-6.1 3.4 1.4-6.8-4.8-4.3 6.8-1z' fill='%23ffffff' opacity='.85'/%3E%3Ccircle cx='150' cy='96' r='3' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='250' cy='120' r='2.6' fill='%23ffffff' opacity='.6'/%3E%3Ccircle cx='12' cy='120' r='2.4' fill='%23ffffff' opacity='.6'/%3E%3C/svg%3E");
  --pat-stars-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M30 18l4.4 9.8L45 29l-7.7 6.9L39.5 47 30 41.4 20.5 47l2.2-11.1L15 29l10.6-1.2z' fill='%23FFC800'/%3E%3Cpath d='M176 52l3.4 7.6 8.6 1.4-6 5.4 1.7 8.6-7.7-4.4-7.7 4.4 1.7-8.6-6-5.4 8.6-1.4z' fill='%23FF7A00'/%3E%3Cpath d='M88 140l3 6.6 7.5 1.2-5.3 4.7 1.5 7.5-6.7-3.8-6.7 3.8 1.5-7.5-5.3-4.7 7.5-1.2z' fill='%2335B8F0'/%3E%3Cpath d='M206 172l4 8.8 9.6 1.1-7 6.2 2 10-8.6-5-8.6 5 2-10-7-6.2 9.6-1.1z' fill='%23FF4D9D'/%3E%3Cpath d='M40 208l2.7 6 6.8 1-4.8 4.3 1.4 6.8-6.1-3.4-6.1 3.4 1.4-6.8-4.8-4.3 6.8-1z' fill='%237B3FE4'/%3E%3C/svg%3E");
  /* точечная растровка «как в комиксе» */
  --pat-dots-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  --pat-dots-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%231A1033'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%231A1033'/%3E%3C/svg%3E");
  --pat-dots-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%23FFC800'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23FFC800'/%3E%3C/svg%3E");
  /* гирлянда флажков */
  --pat-bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='46' viewBox='0 0 240 46'%3E%3Crect y='2' width='240' height='4' rx='2' fill='%231A1033' opacity='.55'/%3E%3Cpath d='M4 5h44L26 42z' fill='%23FFC800'/%3E%3Cpath d='M52 5h44L74 42z' fill='%2335B8F0'/%3E%3Cpath d='M100 5h44l-22 37z' fill='%23FF4D9D'/%3E%3Cpath d='M148 5h44l-22 37z' fill='%2312B76A'/%3E%3Cpath d='M196 5h44l-22 37z' fill='%23FF7A00'/%3E%3C/svg%3E");
  /* купол шатра: чередование клиньев */
  --pat-tent-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Crect width='96' height='26' fill='%23ffffff'/%3E%3Cpath d='M0 0h24l-8 26H0z' fill='%23E8112D'/%3E%3Cpath d='M48 0h24l-8 26H40z' fill='%23E8112D'/%3E%3C/svg%3E");
  --pat-tent-multi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26' viewBox='0 0 150 26'%3E%3Crect width='150' height='26' fill='%23FFC800'/%3E%3Cpath d='M0 0h30l-10 26H0z' fill='%23E8112D'/%3E%3Cpath d='M60 0h30l-10 26H50z' fill='%2335B8F0'/%3E%3Cpath d='M120 0h30l-10 26h-30z' fill='%237B3FE4'/%3E%3C/svg%3E");
  /* зубчатая «карамельная» кромка секции */
  --pat-scallop-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 22h64V6c-8 0-8 10-16 10S40 6 32 6 24 16 16 16 8 6 0 6z' fill='%23FFF6E6'/%3E%3C/svg%3E");
  --pat-scallop-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cpath d='M0 22h64V6c-8 0-8 10-16 10S40 6 32 6 24 16 16 16 8 6 0 6z' fill='%23ffffff'/%3E%3C/svg%3E");
  /* одиночные фигуры */
  --img-star-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4L12 18l-6.6 3.7 1.6-7.4-5.6-5 7.5-.8z' fill='%23FFC800' stroke='%231A1033' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --img-star-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4L12 18l-6.6 3.7 1.6-7.4-5.6-5 7.5-.8z' fill='%23ffffff'/%3E%3C/svg%3E");
  --img-star-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4L12 18l-6.6 3.7 1.6-7.4-5.6-5 7.5-.8z' fill='%23FF4D9D' stroke='%231A1033' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --img-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 6.4 5.6 11 12 12-6.4 1-11 5.6-12 12-1-6.4-5.6-11-12-12C6.4 11 11 6.4 12 0z' fill='%23FFC800'/%3E%3C/svg%3E");
  --img-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23E8112D' stroke='%231A1033' stroke-width='3'/%3E%3Cpath d='M50 3a47 47 0 0 1 47 47H50z' fill='%23FFC800'/%3E%3Cpath d='M3 50a47 47 0 0 0 47 47V50z' fill='%2335B8F0'/%3E%3Ccircle cx='50' cy='50' r='13' fill='%23ffffff' stroke='%231A1033' stroke-width='3'/%3E%3C/svg%3E");
  --img-ball-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%237B3FE4' stroke='%231A1033' stroke-width='3'/%3E%3Cpath d='M50 3a47 47 0 0 1 47 47H50z' fill='%2312B76A'/%3E%3Cpath d='M3 50a47 47 0 0 0 47 47V50z' fill='%23FF7A00'/%3E%3Ccircle cx='50' cy='50' r='13' fill='%23ffffff' stroke='%231A1033' stroke-width='3'/%3E%3C/svg%3E");
  --img-balloon-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Cellipse cx='30' cy='32' rx='27' ry='31' fill='%23FF4D9D' stroke='%231A1033' stroke-width='2.5'/%3E%3Cpath d='M30 62l-6 9h12z' fill='%23FF4D9D' stroke='%231A1033' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 71c7 6-7 11 0 20' stroke='%231A1033' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-balloon-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Cellipse cx='30' cy='32' rx='27' ry='31' fill='%2335B8F0' stroke='%231A1033' stroke-width='2.5'/%3E%3Cpath d='M30 62l-6 9h12z' fill='%2335B8F0' stroke='%231A1033' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 71c7 6-7 11 0 20' stroke='%231A1033' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-balloon-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Cellipse cx='30' cy='32' rx='27' ry='31' fill='%23FFC800' stroke='%231A1033' stroke-width='2.5'/%3E%3Cpath d='M30 62l-6 9h12z' fill='%23FFC800' stroke='%231A1033' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 71c7 6-7 11 0 20' stroke='%231A1033' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-tent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cpath d='M60 4l4 10h-8z' fill='%23FFC800' stroke='%231A1033' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M60 14C34 14 12 30 6 52l54 12 54-12C108 30 86 14 60 14z' fill='%23E8112D' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M60 14c-6 0-11 16-11 30l11 20 11-20c0-14-5-30-11-30z' fill='%23ffffff' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M6 52l14 40h80l14-40-54 12z' fill='%23ffffff' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M60 64v28' stroke='%231A1033' stroke-width='3'/%3E%3Cpath d='M20 92l6-30 14 3-4 27z' fill='%23E8112D' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M100 92l-6-30-14 3 4 27z' fill='%23E8112D' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --img-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M6 6h108v16a10 10 0 0 0 0 20v16H6V42a10 10 0 0 0 0-20z' fill='%23FFC800' stroke='%231A1033' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M78 8v48' stroke='%231A1033' stroke-width='3' stroke-dasharray='6 6'/%3E%3C/svg%3E");
}

/* Универсальные декоративные слои и фигуры ---------------------------- */
.dec {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dec > * {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
}
.dec-star,
.dec-star--white,
.dec-star--pink,
.dec-sparkle,
.dec-ball,
.dec-ball--2,
.dec-balloon,
.dec-balloon--sky,
.dec-balloon--yellow,
.dec-tent,
.dec-ticket {
  width: var(--d-size, 44px);
  height: var(--d-size, 44px);
}
.dec-star {
  background-image: var(--img-star-yellow);
}
.dec-star--white {
  background-image: var(--img-star-white);
}
.dec-star--pink {
  background-image: var(--img-star-pink);
}
.dec-sparkle {
  background-image: var(--img-sparkle);
}
.dec-ball {
  background-image: var(--img-ball);
}
.dec-ball--2 {
  background-image: var(--img-ball-2);
}
.dec-balloon {
  background-image: var(--img-balloon-pink);
  aspect-ratio: 60 / 92;
  height: auto;
}
.dec-balloon--sky {
  background-image: var(--img-balloon-sky);
}
.dec-balloon--yellow {
  background-image: var(--img-balloon-yellow);
}
.dec-tent {
  background-image: var(--img-tent);
  aspect-ratio: 120 / 96;
  height: auto;
}
.dec-ticket {
  background-image: var(--img-ticket);
  aspect-ratio: 120 / 64;
  height: auto;
}
/* Плоские цветные фигуры-подложки */
.dec-blob {
  width: var(--d-size, 160px);
  height: var(--d-size, 160px);
  border-radius: 50%;
  background: var(--d-color, #ffffff);
  opacity: var(--d-opacity, 0.14);
}
.dec-ring {
  width: var(--d-size, 150px);
  height: var(--d-size, 150px);
  border-radius: 50%;
  border: var(--d-w, 12px) solid var(--d-color, #ffffff);
  opacity: var(--d-opacity, 0.16);
  background: none;
}
.dec-tri {
  width: var(--d-size, 90px);
  height: var(--d-size, 90px);
  background: var(--d-color, #ffc800);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: var(--d-opacity, 0.9);
}
.dec-dots {
  width: var(--d-w, 150px);
  height: var(--d-h, 110px);
  background-image: var(--pat-dots-white);
  background-size: 16px 16px;
  background-repeat: repeat;
  opacity: var(--d-opacity, 0.35);
}
.dec-dots--ink {
  background-image: var(--pat-dots-ink);
  opacity: 0.14;
}
.dec-dots--yellow {
  background-image: var(--pat-dots-yellow);
  opacity: 0.6;
}

/* Медленное «дыхание» декора: только transform, только на больших экранах */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .dec-float {
    animation: decFloat 11s ease-in-out infinite;
  }
  .dec-float--slow {
    animation-duration: 16s;
  }
  .dec-float--alt {
    animation-delay: -4s;
  }
  .dec-spin {
    animation: decSpin 34s linear infinite;
  }
  .dec-sway {
    animation: decSway 9s ease-in-out infinite;
  }
}
@keyframes decFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}
@keyframes decSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes decSway {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

/* Разделители между секциями ------------------------------------------ */
.tent-band {
  height: 26px;
  background-color: transparent;
  background-image: var(--pat-tent-multi);
  background-size: 150px 26px;
  background-repeat: repeat-x;
  box-shadow: none;
}
.tent-band--thin {
  height: 26px;
  background-image: var(--pat-tent-red);
  background-size: 96px 26px;
}
.bunting {
  height: 46px;
  background-image: var(--pat-bunting);
  background-size: 240px 46px;
  background-repeat: repeat-x;
  background-position: center top;
}
.bunting--top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  pointer-events: none;
}

/* ---------- 14.3 Цветные полосы-секции -------------------------------- */
/* Каждая полоса — чистый цвет. Токены текста переключаются вместе с ней,
   чтобы «lead», «muted» и ссылки оставались читаемыми. */
.band {
  position: relative;
  isolation: isolate;
}
.band > .container {
  position: relative;
  z-index: 1;
}
.band--ink,
.band--red,
.band--blue,
.band--violet,
.band--orange,
.band--pink,
.band--green {
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.9);
  --text-mute: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.34);
  --line-soft: rgba(255, 255, 255, 0.22);
  --surface: rgba(255, 255, 255, 0.12);
  --tint-rgb: 255, 255, 255;
  color: #fff;
}
.band--yellow,
.band--sky,
.band--cream,
.band--white {
  --text: #1a1033;
  --text-dim: #2c1f47;
  --text-mute: #4b3d68;
  color: var(--c-ink);
}
.band--red {
  background: var(--c-red);
}
.band--blue {
  background: var(--c-blue);
}
.band--violet {
  background: var(--c-violet);
}
.band--orange {
  background: var(--c-orange);
}
.band--pink {
  background: var(--c-pink);
}
.band--green {
  background: var(--c-green);
}
.band--yellow {
  background: var(--c-yellow);
}
.band--sky {
  background: var(--c-sky);
}
.band--cream {
  background: var(--c-cream);
}
.band--white {
  background: #fff;
}
/* Полосы перекрывают старые фоновые правила секций */
.section.band--red,
.section.band--blue,
.section.band--violet,
.section.band--orange,
.section.band--pink,
.section.band--green,
.section.band--yellow,
.section.band--sky,
.section.band--cream,
.section.band--white {
  border: 0;
}
.section.band::before,
.section.band::after {
  content: none;
}

/* ---------- 14.4 Типографика афиши ------------------------------------ */
/* Крупно, плотно, с цветными словами. Никакого текста, залитого
   градиентом: цвет слова — обычный color. */
.display-1 {
  font-size: clamp(2.9rem, 8.6vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.display-2 {
  font-size: clamp(2.2rem, 5.4vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.display-3 {
  font-size: clamp(1.7rem, 3.3vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* .text-gold исторически красил слово «золотом» через background-clip.
   Теперь это просто цветное слово, свой оттенок в каждом контексте. */
.text-gold {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-red);
  animation: none;
}
.band--red .text-gold,
.band--blue .text-gold,
.band--violet .text-gold,
.band--orange .text-gold,
.band--pink .text-gold,
.band--green .text-gold,
.hero .text-gold,
.site-footer .text-gold,
.cta-banner .text-gold {
  color: var(--c-yellow);
}
.band--yellow .text-gold,
.band--sky .text-gold {
  color: var(--c-red);
}
.hero__title .text-gold,
.cta-banner .text-gold,
.brand__name.text-gold {
  animation: none;
}
.text-circus {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-violet);
}
/* Слово в цветной «наклейке» — приём цирковой афиши */
.word-chip {
  display: inline-block;
  padding: 0.04em 0.3em 0.1em;
  border-radius: 0.22em;
  background: var(--c-yellow);
  color: var(--c-ink);
  transform: rotate(-1.6deg);
}
.word-chip--sky {
  background: var(--c-sky);
  color: var(--c-ink);
}
.word-chip--pink {
  background: var(--c-pink);
  color: #fff;
}
.word-chip--red {
  background: var(--c-red);
  color: #fff;
}
.word-chip--white {
  background: #fff;
  color: var(--c-red);
}

/* Надзаголовок-«таблетка» */
.kicker {
  color: var(--c-red);
}
.kicker::before,
.kicker--center::after {
  display: none;
}
.section-head .kicker,
.section-head--center .kicker,
.hero__kicker {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 800;
  letter-spacing: 0.2em;
  box-shadow: var(--shadow-toon);
}
.band--yellow .section-head .kicker,
.band--yellow .section-head--center .kicker {
  background: var(--c-red);
  color: #fff;
}
.band--red .section-head .kicker,
.band--red .section-head--center .kicker,
.band--pink .section-head .kicker,
.band--pink .section-head--center .kicker {
  background: #fff;
  color: var(--c-red);
}
/* Лента под заголовком секции — три плоские точки вместо линии */
.section-head--center::after {
  content: "";
  display: block;
  width: 92px;
  height: 14px;
  margin: 26px auto 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='14' viewBox='0 0 92 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23E8112D'/%3E%3Ccircle cx='31' cy='7' r='7' fill='%23FF7A00'/%3E%3Ccircle cx='55' cy='7' r='7' fill='%23FFC800'/%3E%3Ccircle cx='79' cy='7' r='7' fill='%2335B8F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  box-shadow: none;
}
.band--red .section-head--center::after,
.band--blue .section-head--center::after,
.band--violet .section-head--center::after,
.band--orange .section-head--center::after,
.band--pink .section-head--center::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='14' viewBox='0 0 92 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23FFC800'/%3E%3Ccircle cx='31' cy='7' r='7' fill='%23ffffff'/%3E%3Ccircle cx='55' cy='7' r='7' fill='%23FFC800'/%3E%3Ccircle cx='79' cy='7' r='7' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---------- 14.5 Кнопки ------------------------------------------------ */
/* Плоская заливка + плотная «печатная» тень. Никаких переливов. */
.btn {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-width: 1px;
  transition:
    transform 0.25s var(--ease-pop),
    box-shadow 0.25s var(--ease),
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.btn--gold::after,
.btn--red::after {
  content: none;
}
.btn--gold {
  background: var(--c-yellow);
  color: var(--c-ink);
  border-color: var(--line);
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
}
.btn--gold:hover {
  background: #ffd633;
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
}
.btn--gold:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(26, 16, 51, 0.14);
}
.btn--red {
  background: var(--c-red);
  color: #fff;
  border-color: var(--line);
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
}
.btn--red:hover {
  background: #ff2743;
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
}
.btn--ghost {
  color: var(--c-violet);
  background: #fff;
  border-color: currentColor;
  box-shadow: none;
}
.btn--ghost:hover {
  color: #fff;
  background: var(--c-violet);
  border-color: var(--c-violet);
  transform: translateY(-3px);
  box-shadow: 0 3px 0 rgba(26, 16, 51, 0.14);
}
/* Главный билетный CTA — самая заметная кнопка на сайте */
.btn--ticket {
  background: var(--c-yellow);
  color: var(--c-ink);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 rgba(26, 16, 51, 0.14);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  min-height: 66px;
  padding: 18px 38px;
  background-size: auto;
  background-position: 0 0;
  animation: none;
}
.btn--ticket::before,
.btn--ticket::after {
  content: none;
}
.btn--ticket:hover {
  background: #ffd633;
  transform: translateY(-4px);
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
}
.btn--ticket:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(26, 16, 51, 0.14);
}
/* Вторая кнопка поверх цветной полосы — белый контур, без «стекла» */
.btn--glass,
.hero--main .btn--glass {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn--glass:hover,
.hero--main .btn--glass:hover {
  background: #fff;
  color: var(--c-red);
  transform: translateY(-3px);
  box-shadow: 0 3px 0 rgba(26, 16, 51, 0.14);
}
/* Пульсирующее кольцо CTA — только transform/opacity */
.btn--cta::before {
  border-color: rgba(255, 200, 0, 0.85);
}
.btn[disabled],
.btn.is-disabled {
  box-shadow: none;
}
.link-more {
  color: var(--c-red);
  font-weight: 800;
}
.link-more::after {
  background: var(--c-red);
}
.band--red .link-more,
.band--blue .link-more,
.band--violet .link-more,
.band--orange .link-more,
.band--pink .link-more {
  color: var(--c-yellow);
}
.band--red .link-more::after,
.band--blue .link-more::after,
.band--violet .link-more::after,
.band--orange .link-more::after,
.band--pink .link-more::after {
  background: var(--c-yellow);
}
.tag {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--c-ink);
  font-weight: 700;
  border-radius: 999px;
}
.badge--soon {
  background: var(--c-yellow);
  color: #4a3200;
  border-color: var(--line);
}
.badge--onsale {
  background: var(--c-green);
  color: #fff;
  border-color: var(--line);
}
.to-top {
  background: var(--c-red);
  border: 1px solid var(--line);
  color: #fff;
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
  backdrop-filter: none;
}
.to-top:hover {
  background: var(--c-violet);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
}

/* ---------- 14.6 Header: спокойный, но с цирковым акцентом ------------ */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled {
  background: #fff;
}
/* Тонкая цветная полоска под шапкой — четыре плоских отрезка */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='6' viewBox='0 0 160 6'%3E%3Crect width='40' height='6' fill='%23E8112D'/%3E%3Crect x='40' width='40' height='6' fill='%23FFC800'/%3E%3Crect x='80' width='40' height='6' fill='%2335B8F0'/%3E%3Crect x='120' width='40' height='6' fill='%237B3FE4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 6px;
  pointer-events: none;
}
.brand__name.text-gold {
  color: var(--c-red);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.nav__link {
  font-weight: 700;
  color: var(--c-ink);
  /* Переход описан один раз на базовом состоянии, поэтому пункт плавно
     не только «загорается», но и гаснет: наведение, уход курсора и смена
     активной страницы идут по одной и той же кривой. */
  box-shadow:
    0 0 0 0 rgba(26, 16, 51, 0),
    0 0 0 rgba(26, 16, 51, 0);
  transition:
    color 0.28s var(--ease),
    background-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease),
    transform 0.28s var(--ease-pop);
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--c-red);
  background: rgba(255, 200, 0, 0.24);
}
/* Активная страница — маленькая «афишная» кнопка: плоская красная заливка,
   чернильный контур и печатная тень, как у кнопок сайта. Контур рисуем
   тенью, а не border, чтобы соседние пункты не сдвигались. */
.nav__link.is-active,
.site-header.is-scrolled .nav__link.is-active,
.site-header--solid .nav__link.is-active {
  color: #fff;
  background: var(--c-red);
  box-shadow:
    0 0 0 2px var(--c-ink),
    0 3px 0 var(--c-ink);
  transform: translateY(-1px);
}
.nav__link.is-active:hover,
.nav__link.is-active:focus-visible {
  color: #fff;
  background: #ff2743;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--c-ink),
    0 6px 0 var(--c-ink);
}
/* Градиентный штрих из базовой темы пилюле уже не нужен */
.nav__link.is-active::after {
  content: none;
}
/* При заходе на страницу пилюля не появляется рывком, а мягко
   «раскрывается» из обычного пункта меню. */
@media (prefers-reduced-motion: no-preference) {
  .nav__link.is-active {
    animation: navPillIn 0.42s var(--ease-pop) both;
  }
}
@keyframes navPillIn {
  from {
    color: var(--c-ink);
    background: rgba(232, 17, 45, 0);
    box-shadow:
      0 0 0 0 rgba(26, 16, 51, 0),
      0 0 0 rgba(26, 16, 51, 0);
    transform: translateY(2px) scale(0.94);
  }
  to {
    color: #fff;
    background: var(--c-red);
    box-shadow:
      0 0 0 2px var(--c-ink),
      0 3px 0 var(--c-ink);
    transform: translateY(-1px) scale(1);
  }
}
/* Наведение важнее анимации появления: снимаем её, чтобы пилюля
   не «дёргалась» между двумя описаниями. */
.nav__link.is-active:hover,
.nav__link.is-active:focus-visible {
  animation: none;
}
.nav-drop__list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
}
.nav-drop__link:hover,
.nav-drop__link:focus-visible {
  background: var(--c-yellow);
  color: var(--c-ink);
}
.mobile-menu {
  background: var(--c-cream);
}
.mobile-menu__link {
  font-weight: 800;
}

/* ---------- 14.7 Hero главной: цирковая афиша -------------------------- */
/* Фотография сцены остаётся главным героем, но теперь она стоит в белой
   рамке на чистом красном поле — как афиша, наклеенная на тумбу. */
.hero--poster {
  --text: #fff;
  /* Красный остаётся подложкой на случай, если фотография не загрузилась */
  --hero-veil: rgba(232, 17, 45, 0.72);
  background: var(--c-red);
  min-height: 0;
  /* Секция держит пропорцию кадра 16:9 (.hero:not(.hero--banner)), поэтому
     она заметно выше текста. При align-items: center из базового .hero блок
     висел в середине этой высоты — между гирляндой и надзаголовком зияла
     дыра. Текст прижат к верхней кромке, а его отступ от шапки задаёт
     padding-block. */
  align-items: flex-start;
  padding-block: calc(var(--header-total) + 80px) clamp(64px, 7vw, 104px);
  overflow: hidden;
  color: #fff;
}
.hero--poster::before,
.hero--poster::after {
  content: none;
}
.hero--poster .hero__beams,
.hero--poster .hero__orbs,
.hero--poster .hero__vignette {
  display: none;
}
/* Фотография сцены лежит фоном под красной вуалью. Сплошные 0.72
   перекрашивали кадр целиком; вместо них — градиент вдоль строки текста:
   плотный слева, где стоят заголовок и кнопки, и почти снятый справа,
   где на кадре воздушная пара, клоун и скоморох. */
.hero--poster .hero__overlay {
  background: linear-gradient(
    100deg,
    rgba(150, 8, 30, 0.82) 0%,
    rgba(186, 12, 38, 0.7) 38%,
    rgba(214, 16, 44, 0.4) 62%,
    rgba(232, 17, 45, 0.12) 100%
  );
}
@media (max-width: 860px) {
  .hero--poster .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(150, 8, 30, 0.34) 0%,
      rgba(186, 12, 38, 0.62) 42%,
      rgba(150, 8, 30, 0.76) 100%
    );
  }
}
.hero--poster .hero__media img {
  animation: none;
  transform: none;
  filter: saturate(1.15) contrast(1.04) brightness(1.05);
}
/* Текст теперь идёт одной колонкой поверх фотографии, поэтому плитки
   программ выравниваются по тексту, а не по центру блока. */
.hero--poster .hero__programs-label,
.hero--poster .hero__programs-list {
  justify-content: flex-start;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(30px, 4vw, 62px);
}
.hero__copy {
  min-width: 0;
}
.hero--poster .hero__kicker {
  margin-bottom: 22px;
}
.hero--poster .hero__title {
  margin-bottom: 18px;
  text-shadow: none;
  text-transform: uppercase;
}
.hero--poster .hero__title .text-gold {
  display: block;
  font-size: clamp(3rem, 7.6vw, 5.9rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--c-yellow);
  -webkit-text-stroke: 3px var(--c-ink);
  paint-order: stroke fill;
}
.hero--poster .hero__subtitle {
  display: block;
  margin-top: 16px;
  margin-bottom: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
  text-shadow: none;
}
.hero--poster .hero__divider {
  display: none;
}
.hero--poster .hero__text {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
}
.hero--poster .hero__actions {
  margin-top: 30px;
  gap: 16px;
}

/* Рамка с фотографией: белый паспарту, лёгкий наклон, плотная тень */
.hero__frame {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 100%;
  max-width: 620px;
}
.hero__photo {
  position: relative;
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: 12px 16px 0 rgba(26, 16, 51, 0.32);
  transform: rotate(-1.8deg);
  overflow: hidden;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 20px;
  transform: none;
  filter: saturate(1.1) contrast(1.04);
  animation: none;
}
/* Наклейки вокруг рамки */
.hero__frame .dec-star,
.hero__frame .dec-ball,
.hero__frame .dec-ticket,
.hero__frame .dec-balloon {
  position: absolute;
  z-index: 2;
}
.hero__frame .hero__sticker--star {
  top: -34px;
  right: -18px;
  width: 78px;
  height: 78px;
}
.hero__frame .hero__sticker--ball {
  bottom: -30px;
  left: -26px;
  width: 82px;
  height: 82px;
}
.hero__frame .hero__sticker--ticket {
  bottom: 24px;
  right: -34px;
  width: 132px;
}

/* Плитки программ в Hero — белые карточки на красном */
.hero--poster .hero__programs {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: 0;
  border: 0;
}
.hero--poster .hero__programs-label {
  color: var(--c-yellow);
  font-weight: 800;
  letter-spacing: 0.24em;
  justify-content: flex-start;
}
.hero--poster .hero__programs-label::before,
.hero--poster .hero__programs-label::after {
  display: none;
}
.hero--poster .hero__programs-list {
  justify-content: flex-start;
  gap: 14px;
}
.hero--poster .hero__program {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--c-ink);
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero--poster .hero__program::before {
  content: none;
}
.hero--poster .hero__program:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
}
.hero--poster .hero__program strong {
  color: var(--c-ink);
}
.hero--poster .hero__program-meta {
  color: #5b4b7a;
}
.hero--poster .hero__program-icon {
  background: var(--c-yellow);
  border: 1px solid var(--line);
  color: var(--c-ink);
}
.hero--poster .hero__program-arrow {
  color: var(--c-red);
}
.hero--poster .hero__scroll {
  color: rgba(255, 255, 255, 0.9);
}
.hero--poster .hero__scroll::after {
  background: var(--c-yellow);
}

/* ---------- 14.8 Секция «О нас» и статистика --------------------------- */
.section--candy {
  background: var(--c-cream);
}
.stats {
  gap: clamp(14px, 1.6vw, 22px);
}
.stat {
  border: 1px solid var(--line);
  border-radius: 24px;
  border-top: 1px solid var(--line);
  background: var(--c-red);
  color: #fff;
  box-shadow: 0 3px 0 rgba(26, 16, 51, 0.14);
  text-align: center;
  transition:
    transform 0.3s var(--ease-pop),
    box-shadow 0.3s var(--ease);
}
.stat::before {
  content: none;
}
.stat:nth-child(4n + 2) {
  background: var(--c-yellow);
  color: var(--c-ink);
}
.stat:nth-child(4n + 3) {
  background: var(--c-sky);
  color: var(--c-ink);
}
.stat:nth-child(4n + 4) {
  background: var(--c-violet);
  color: #fff;
}
.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 0 rgba(26, 16, 51, 0.14);
}
.stats .stat .stat__value,
.stat__value {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.stat__label {
  color: inherit;
  opacity: 0.92;
  font-weight: 700;
}

/* ---------- 14.9 Клоуны ------------------------------------------------ */
.clowns {
  overflow: hidden;
}
.clowns__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.clowns__title {
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--c-ink);
}
.clowns__title span {
  display: inline-block;
}
.clowns__lead {
  max-width: 46ch;
  color: #2c1f47;
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  font-weight: 500;
}
.clowns__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 30px;
}
.clowns__list span {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clowns__list span:nth-child(2) {
  background: var(--c-red);
  color: #fff;
}
.clowns__list span:nth-child(3) {
  background: var(--c-sky);
}

/* ---------- 14.10 Программы-афиши -------------------------------------- */
.posters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
.poster {
  --p-bg: var(--c-red);
  --p-ink: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--p-bg);
  color: var(--p-ink);
  box-shadow: 0 5px 0 rgba(26, 16, 51, 0.14);
  transition:
    transform 0.35s var(--ease-pop),
    box-shadow 0.35s var(--ease);
}
.poster:hover {
  transform: translateY(-8px);
  box-shadow: 0 9px 0 rgba(26, 16, 51, 0.14);
}
.poster--yellow {
  --p-bg: var(--c-yellow);
  --p-ink: var(--c-ink);
}
.poster--sky {
  --p-bg: var(--c-sky);
  --p-ink: var(--c-ink);
}
.poster--violet {
  --p-bg: var(--c-violet);
  --p-ink: #fff;
}
.poster__body {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.poster__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.poster__tags .tag {
  border-color: var(--line);
  background: #fff;
  color: var(--c-ink);
}
.poster__title {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: inherit;
}
.poster__text {
  color: inherit;
  opacity: 0.94;
  max-width: 42ch;
  margin: 0;
}
.poster__cta {
  align-self: flex-start;
  margin-top: auto;
}
/* Ряд действий карточки программы: кнопка прижата к низу, чтобы
   у соседних афиш переходы стояли на одной линии. */
.poster__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.poster__actions .btn {
  flex: 0 0 auto;
}
.poster .dec-star,
.poster .dec-sparkle,
.poster .dec-ball {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* ---------- 14.11 Цирковые жанры --------------------------------------- */
/* Каждый жанр — свой цвет, но геометрия у всех карточек одна: иллюстрация
   сверху в кадре 4:3, цветное поле с подписью снизу.

   Число колонок задаётся одной переменной --genres-cols, просвет — одной
   --genres-gap, поэтому по горизонтали и вертикали расстояние между
   карточками всегда совпадает. Ключевое здесь — grid-auto-rows: 1fr:
   все ряды получают высоту самого высокого, и карточки остаются
   одинаковыми, даже когда описание в одном из языков занимает на строку
   больше. Ничего не подгоняется вручную. */
.genres {
  --genres-cols: 3;
  --genres-gap: clamp(18px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(var(--genres-cols), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  justify-content: center;
  gap: var(--genres-gap);
}
.genre {
  --g-color: var(--c-red);
  --g-ink: #fff;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--g-color);
  color: var(--g-ink);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
  isolation: isolate;
  transition:
    transform 0.35s var(--ease-pop),
    box-shadow 0.35s var(--ease);
}
.genre:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 0 rgba(26, 16, 51, 0.14);
  border-color: var(--line);
}
.genre::before,
.genre::after {
  content: none;
}
.genre__body {
  position: relative;
  inset: auto;
  padding: clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1;
  background: var(--g-color);
}
.genre__tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--c-ink);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.genre__title {
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: inherit;
  /* «Воздушные гимнасты» и длинные названия в других языковых версиях
     занимают две строки, короткие — одну. Резерв в две строки держит
     описания и нижнюю линию карточек на одном уровне. */
  min-height: 2em;
}
.genre__text {
  color: inherit;
  opacity: 0.94;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}
/* Карточка жанра ведёт на свою страницу — подпись говорит об этом прямо,
   а не оставляет ссылку без объяснения. */
.genre__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}
.genre:hover .genre__more .icon {
  transform: translateX(4px);
}
.genre__more .icon {
  transition: transform 0.3s var(--ease);
}

/* ---------- 14.12 Страны ----------------------------------------------- */
.country-card {
  position: relative;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
  transition:
    transform 0.35s var(--ease-pop),
    box-shadow 0.35s var(--ease);
}
.country-card::after,
.country-card::before {
  content: none;
}
.country-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 0 rgba(26, 16, 51, 0.14);
}
.country-card__body {
  position: static;
  padding: 18px 20px 20px;
  background: var(--cc-color, var(--c-yellow));
  color: var(--cc-ink, var(--c-ink));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.country-card__name {
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: inherit;
}
.country-card__count {
  color: inherit;
  opacity: 0.88;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
}
.country-card > .icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--c-ink);
}
/* Национальный мотив: узкая орнаментальная лента над названием */
.country-card__body::before {
  content: "";
  display: block;
  height: 10px;
  margin: -18px -20px 12px;
  background-repeat: repeat-x;
  background-size: 40px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 10l10-10 10 10L30 0l10 10z' fill='%231A1033' opacity='.24'/%3E%3C/svg%3E");
}

/* ---------- 14.13 Партнёры: спокойная светлая пауза -------------------- */
#partners.section {
  background: #fff;
}
.partner-tile {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: none;
}
.partner-tile:hover {
  border-color: rgba(26, 16, 51, 0.28);
  transform: none;
  box-shadow: 0 6px 18px -12px rgba(26, 16, 51, 0.4);
}

/* ---------- 14.14 Формы ------------------------------------------------ */
/* Яркий контейнер, крупный заголовок, крупные поля с чёткой рамкой. */
.form--panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: 0 5px 0 rgba(26, 16, 51, 0.14);
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
}
/* Полоса купола по верху панели */
.form--panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 20px;
  background-image: var(--pat-tent-multi);
  background-size: 150px 20px;
  background-repeat: repeat-x;
}
.form--panel > * {
  position: relative;
}
.form--panel .form__grid,
.form--panel .field:first-child {
  margin-top: 14px;
}
.field > label,
.field label {
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: 0.02em;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--c-cream);
  color: var(--c-ink);
  padding: 14px 16px;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7a6c93;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-red);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.85);
}
.field .req {
  color: var(--c-red);
}
.form__status {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--c-green);
  color: #fff;
}
.form__status.is-error {
  background: var(--c-red);
  color: #fff;
}
.form__status.is-pending {
  background: var(--c-yellow);
  color: var(--c-ink);
}
.form__note {
  color: var(--text-mute);
}
/* Обёртка формы на цветной полосе */
.form-block {
  position: relative;
}
.form-block__head {
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

/* ---------- 14.15 CTA-баннер ------------------------------------------- */
.cta-banner {
  background: var(--c-violet);
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: 0 5px 0 rgba(26, 16, 51, 0.14);
  color: #fff;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pat-stars-white);
  background-size: 260px 260px;
  opacity: 0.5;
  animation: none;
  pointer-events: none;
}
.cta-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 20px;
  background-image: var(--pat-tent-multi);
  background-size: 150px 20px;
  background-repeat: repeat-x;
  animation: none;
  opacity: 1;
  pointer-events: none;
}

/* ---------- 14.16 Footer: яркий фирменный подвал ----------------------- */
.site-footer {
  position: relative;
  background: var(--c-violet);
  color: #fff;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background-image: var(--pat-tent-multi);
  background-size: 150px 26px;
  background-repeat: repeat-x;
  z-index: 1;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 26px 0 0;
  background-image: var(--pat-stars-white);
  background-size: 260px 260px;
  opacity: 0.35;
  pointer-events: none;
  border-radius: 0;
  width: auto;
  height: auto;
  filter: none;
  animation: none;
}
.site-footer > .container {
  position: relative;
  z-index: 2;
  padding-top: 26px;
}
.site-footer .brand__name.text-gold {
  color: var(--c-yellow);
}
.site-footer h3 {
  color: var(--c-yellow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
}
.site-footer a:hover {
  color: var(--c-yellow);
}
.footer-socials a {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.25s var(--ease-pop);
}
.footer-socials a:hover {
  background: var(--c-yellow);
  border-color: var(--line);
  color: var(--c-ink);
  transform: translateY(-3px);
}

/* ---------- 14.17 Внутренние страницы ---------------------------------- */
/* Световые эффекты старой тёмной сцены (лучи, ореолы, виньетка) в плоском
   дизайне не нужны — их рисовали градиенты. */
.hero__beams,
.hero__orbs,
.hero__vignette,
.hero--main .hero__content::before {
  display: none;
}
.hero--page {
  /* Плотная одноцветная заливка (0.84) съедала рисунок почти целиком:
     от кадра оставался силуэт. Вместо неё — вертикальный градиент:
     вверху, где обычно голова артиста, он почти прозрачный, к строке
     заголовка уплотняется, книзу снова темнеет под кнопками и текстом.
     Средняя плотность вдвое ниже прежней, а контраст белого текста
     держат уже три вещи: полоса градиента под строкой, тень на самом
     тексте (.hero--page .hero__title/.hero__subtitle ниже) и то, что
     заголовок стоит не поверх лица, а под ним — см. object-position.

     Плотность задаётся тремя числами, и каждая страница правит их под
     свою композицию (блок «Индивидуальная настройка кадров» ниже):
     светлый кадр требует больше, тёмный — меньше. Одного значения на
     все фотографии сознательно нет. */
  --hero-scrim-top: 0.28;
  --hero-scrim-mid: 0.56;
  --hero-scrim-bottom: 0.7;
  --hero-scrim-mid-stop: 38%;
  /* Резервный цвет на случай, если фотография не загрузилась. */
  --hero-veil: rgba(72, 32, 140, 0.56);
  min-height: min(62svh, 560px);
  padding-top: calc(var(--header-total) + 56px);
  /* Блок текста прижат к низу секции (.hero--page:not(.hero--banner):
     align-items: flex-end), поэтому его положение задаёт нижний отступ.
     Он увеличен: заголовок и «крошки» лежали у самой кромки кадра, под
     ними оставалась пустая полоса. Вместе с отступом подложка-градиент
     на .hero__overlay растянута выше — текст поднялся в зону, где она
     раньше уже сходила в ноль. */
  padding-bottom: clamp(72px, 10vw, 140px);
  border-bottom: 1px solid var(--line);
}
.hero--page::before,
.hero--page::after {
  content: none;
}
.hero--page .hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 16, 51, var(--hero-scrim-top)) 0%,
    rgba(72, 32, 140, var(--hero-scrim-mid)) var(--hero-scrim-mid-stop),
    rgba(26, 16, 51, var(--hero-scrim-bottom)) 100%
  );
}
.hero--page .hero__media img {
  animation: none;
  transform: none;
  /* filter здесь не задаём: ниже, в разделе «HERO: ФОТОГРАФИЯ ПОКАЗЫВАЕТСЯ
     ЦЕЛИКОМ», правило .hero:not(.hero--banner) .hero__media img снимает
     фильтры у всех героев разом и по специфичности перебивает это место.
     Яркость кадра теперь держит снятая плотность вуали, а не коррекция. */
}

/* Герой страницы страны. Общая вуаль .hero--page рассчитана на фотофон и
   «съедает» рисунок, а на страницах стран иллюстрация с национальными
   мотивами — часть содержания, а не текстура. Поэтому вместо сплошной
   заливки кладём градиент: плотный слева, под заголовком и текстом, и
   почти прозрачный справа, где видны горы, юрта, Байтерек и Регистан. */
.hero--country .hero__overlay {
  /* Прежний градиент держал 0.94 до середины кадра и гасил рисунок почти
     полностью. Плотная зона сжата до текстовой колонки и обрывается
     заметно раньше: правые две трети — горы, юрта, купол Регистана и
     шапито — остаются в полную силу. */
  background: linear-gradient(
    100deg,
    rgba(22, 12, 46, 0.88) 0%,
    rgba(38, 17, 76, 0.78) 34%,
    rgba(52, 24, 98, 0.46) 56%,
    rgba(64, 30, 116, 0.16) 78%,
    rgba(70, 32, 124, 0.04) 100%
  );
}
/* Узкий экран: текст занимает всю ширину, поэтому возвращаем сплошную
   заливку — иначе заголовок ляжет на светлые участки рисунка. */
@media (max-width: 860px) {
  .hero--country .hero__overlay {
    /* Текст занимает всю ширину, поэтому горизонтальный градиент здесь
       не работает — возвращаем вертикальный, тот же, что у .hero--page:
       сплошная заливка 0.9 гасила рисунок так же, как на десктопе. */
    background: linear-gradient(
      180deg,
      rgba(26, 16, 51, 0.34) 0%,
      rgba(72, 32, 140, 0.6) 40%,
      rgba(26, 16, 51, 0.74) 100%
    );
  }
  /* На телефоне узкий crop больше не срезает артиста, вынесенного в
     правую часть широкого кадра. Вуаль здесь уже сплошная, поэтому
     смещение не ухудшает читаемость текстового блока. */
  .hero--country .hero__media img {
    object-position: 72% center;
  }
}
.hero--page .hero__title {
  text-transform: uppercase;
  /* Тень вернулась вместе со снятой плотностью вуали: раньше контраст
     держала заливка 0.84, теперь — мягкая тень на самих буквах. Она не
     затемняет фотографию, а работает только по контуру текста. */
  text-shadow: 0 2px 10px rgba(12, 6, 26, 0.62);
}
.hero--page .hero__title .text-gold {
  color: var(--c-yellow);
  -webkit-text-stroke: 2px var(--c-ink);
  paint-order: stroke fill;
}
.hero--page .hero__subtitle {
  color: #fff;
  text-shadow: 0 2px 8px rgba(12, 6, 26, 0.6);
}
/* ---------- Индивидуальная настройка вуали по кадрам -------------------
   Одного значения затемнения на все фотографии быть не должно: у каждого
   кадра своя композиция и своя светлота. Скоморох на странице «О нас»
   стоит на ровном тёмном занавесе — там хватает лёгкой вуали. Клоун на
   «Программах» пёстрый и светлый, а заголовок идёт по центру прямо
   поверх костюма — под строкой нужно плотнее. Шапито на страницах стран
   стоит в светлом пейзаже (степь на закате, снежные вершины), и там
   работает уже не вертикальный градиент, а горизонтальный — см.
   .hero--country выше.

   Сами кадры при этом не режутся: раздел «HERO: ФОТОГРАФИЯ ПОКАЗЫВАЕТСЯ
   ЦЕЛИКОМ» ниже держит пропорцию секции равной пропорции кадра и
   вписывает фотографию по object-fit: contain. Голова, лицо и реквизит
   артиста видны целиком на любой ширине; на узком экране в дело идут
   отдельные вертикальные кадры 4:5 из assets/images/hero-mobile/.

   Ключ — data-page на <html>: он не зависит от языка, поэтому одна
   запись работает сразу для всех шести локалей, и разметку страниц
   править не приходится. */

/* Программы: клоун-жонглёр в полный рост, костюм из ярких лоскутов,
   заголовок ложится прямо на него — самая плотная вуаль из четырёх. */
html[data-page="/programs.html"] .hero--page {
  --hero-scrim-top: 0.26;
  --hero-scrim-mid: 0.58;
  --hero-scrim-bottom: 0.72;
}

/* О компании: скоморох-конферансье на ровном синем занавесе. Фон и без
   вуали тёмный — здесь она самая лёгкая на сайте. */
html[data-page="/about.html"] .hero--page {
  --hero-scrim-top: 0.2;
  --hero-scrim-mid: 0.46;
  --hero-scrim-bottom: 0.62;
}

/* Сотрудничество: свиток и артист слева, справа светлый песок манежа —
   низ кадра требует больше, чем верх. */
html[data-page="/cooperation.html"] .hero--page {
  --hero-scrim-top: 0.22;
  --hero-scrim-mid: 0.52;
  --hero-scrim-bottom: 0.72;
}

/* Контакты: ночная сцена с билетной будкой, тёмно-синее небо. Верх почти
   не трогаем, плотность нужна только вокруг строки заголовка. */
html[data-page="/contacts.html"] .hero--page {
  --hero-scrim-top: 0.18;
  --hero-scrim-mid: 0.5;
  --hero-scrim-bottom: 0.66;
}

/* Жанровые страницы. Артист стоит на тёмном занавесе или под куполом —
   базовой плотности .hero--country хватает; отдельно правим только два
   светлых кадра. */
html[data-page="/genres/animal-shows.html"] .hero--country .hero__overlay {
  /* Белая лошадь на светлом манеже — самый светлый кадр раздела. */
  background: linear-gradient(
    100deg,
    rgba(22, 12, 46, 0.9) 0%,
    rgba(38, 17, 76, 0.82) 34%,
    rgba(52, 24, 98, 0.5) 56%,
    rgba(64, 30, 116, 0.18) 78%,
    rgba(70, 32, 124, 0.05) 100%
  );
}
html[data-page="/genres/aerial-gymnastics.html"] .hero--country .hero__overlay {
  /* Воздушная пара идёт по светлому куполу — та же поправка. */
  background: linear-gradient(
    100deg,
    rgba(22, 12, 46, 0.9) 0%,
    rgba(38, 17, 76, 0.82) 34%,
    rgba(52, 24, 98, 0.5) 56%,
    rgba(64, 30, 116, 0.18) 78%,
    rgba(70, 32, 124, 0.05) 100%
  );
}

/* Страны присутствия: шапито в светлом пейзаже — степь на закате,
   снежные вершины, купол Регистана. Плотная зона держится дольше, чтобы
   заголовок в две строки не выехал на светлое. */
html[data-page="/countries/kazakhstan.html"] .hero--country .hero__overlay,
html[data-page="/countries/kyrgyzstan.html"] .hero--country .hero__overlay,
html[data-page="/countries/uzbekistan.html"] .hero--country .hero__overlay,
html[data-page="/countries/tajikistan.html"] .hero--country .hero__overlay {
  background: linear-gradient(
    100deg,
    rgba(22, 12, 46, 0.9) 0%,
    rgba(38, 17, 76, 0.84) 38%,
    rgba(52, 24, 98, 0.54) 58%,
    rgba(64, 30, 116, 0.2) 78%,
    rgba(70, 32, 124, 0.05) 100%
  );
}

.hero--program {
  /* Афиша программы показывается без заливки: кадр читается как постер.
     Контраст заголовка держат тени на самом тексте, а не слой поверх
     изображения. */
  --hero-veil: transparent;
  min-height: min(70svh, 640px);
}
.hero--program .hero__overlay {
  display: none;
}

/* Баннер программы: в шапке только афиша — без заголовка, текста и кнопок.
   Картинка лежит в обычном потоке во всю ширину и сохраняет свои пропорции,
   поэтому не обрезается ни на одной ширине экрана. Отступ сверху равен
   высоте фиксированной шапки, иначе она перекрыла бы верх афиши. */
.hero--banner {
  display: block;
  min-height: 0;
  padding: var(--header-total) 0 0;
  border-bottom: 0;
  overflow: visible;
}
.hero--banner .hero__media {
  position: relative;
  inset: auto;
  z-index: 0;
}
.hero--banner .hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  filter: none;
  animation: none;
}
/* Хлебные крошки съехали из-под афиши в обычный поток страницы */
.breadcrumbs--under {
  padding: clamp(14px, 2vw, 22px) 0 0;
}
.hero--program .hero__content .display-1,
.hero--program .hero__content .hero__title,
.hero--program .hero__text,
.hero--program .breadcrumbs {
  text-shadow:
    0 2px 18px rgba(8, 4, 26, 0.8),
    0 1px 4px rgba(8, 4, 26, 0.7);
}
.hero--page .hero__kicker,
.hero--page .kicker {
  background: var(--c-yellow);
  color: var(--c-ink);
  display: inline-flex;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 800;
}
.hero__country {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.hero__country::after {
  content: none;
}

/* Общая «мультяшная» подача карточек внутренних страниц */
.card,
.feature,
.step,
.offer-card,
.about__plaque,
.offer__plaque,
.offer__note,
.tour-stop,
.empty-state,
.table-wrap,
.contact-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 3px 0 rgba(26, 16, 51, 0.14);
}
.card::before,
.offer-card::before,
.about__item::before {
  content: none;
}
.feature:hover,
.offer-card:hover,
.step:hover,
.contact-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 0 rgba(26, 16, 51, 0.14);
}
.contact-item:hover {
  background: var(--c-cream);
}
.feature__icon,
.offer-card__icon,
.about__plaque-icon,
.offer__plaque-icon,
.offer__note-icon,
.contact-item__icon,
.icon-tile {
  background: var(--c-yellow);
  border: 1px solid var(--line);
  color: var(--c-ink);
  border-radius: 16px;
}
.about__item-icon {
  background: var(--c-sky);
  border: 1px solid var(--line);
  color: var(--c-ink);
}
.program-card {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.14);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-pop),
    box-shadow 0.35s var(--ease);
}
.program-card::before,
.program-card::after {
  content: none;
}
.program-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 0 rgba(26, 16, 51, 0.14);
}
.about__caption,
.offer__caption {
  background: var(--c-ink);
  color: #fff;
}
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font-weight: 700;
}
.chip.is-active {
  background: var(--c-red);
  color: #fff;
}
.schedule tbody tr:hover {
  background: var(--c-cream);
}
.tour__stop::before {
  background: var(--c-red);
}
.tour__stop:hover {
  background: var(--c-cream);
}
.seo-article h2,
.seo-article h3 {
  color: var(--c-ink);
}
.legal h2 {
  color: var(--c-ink);
}
.rule {
  height: 8px;
  border-radius: 8px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='8' viewBox='0 0 160 8'%3E%3Crect width='40' height='8' rx='4' fill='%23E8112D'/%3E%3Crect x='40' width='40' height='8' rx='4' fill='%23FFC800'/%3E%3Crect x='80' width='40' height='8' rx='4' fill='%2335B8F0'/%3E%3Crect x='120' width='40' height='8' rx='4' fill='%237B3FE4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 8px;
}
.glass {
  background: #fff;
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Старый «софитный» орнамент секций заменён конфетти */
.ornament {
  background-image: var(--pat-confetti);
  background-size: 320px 320px;
  background-position: center top;
  background-repeat: repeat;
  opacity: 0.5;
}
.ornament::before {
  content: none;
}
.confetti span {
  border: 1px solid var(--line);
  opacity: 0.9;
}

/* ---------- 14.18 Появление и микро-движение --------------------------- */
[data-reveal="pop"] {
  transform: scale(0.94) translateY(14px);
}
[data-reveal].is-visible {
  transform: none;
}
.section-head--center .display-2,
.section-head .display-2 {
  text-transform: uppercase;
}

/* ---------- 14.19 Планшет и телефон ------------------------------------
   На узких экранах декора заметно меньше: часть слоёв просто не
   рисуется, анимации выключены, композиции складываются в одну колонку. */
@media (max-width: 1024px) {
  .hero__grid,
  .clowns__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 5vw, 44px);
  }
  .hero__frame {
    order: -1;
    max-width: 560px;
  }
  .genres {
    --genres-cols: 2;
  }
  /* Жанров нечётное число, поэтому последняя карточка остаётся одна в ряду.
     Она занимает обе колонки, но сохраняет ширину колонки и встаёт по
     центру — ряд не «прилипает» к левому краю. */
  .genre:last-child:nth-child(odd) {
    grid-column: span 2;
    justify-self: center;
    width: calc((100% - var(--genres-gap)) / 2);
  }
}
@media (max-width: 860px) {
  .posters {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero--poster .hero__title .text-gold {
    -webkit-text-stroke-width: 2px;
  }
}
@media (max-width: 720px) {
  /* Декоративные слои на телефоне: остаются только крупные фигуры */
  .dec > *,
  .hero__frame .hero__sticker--ticket,
  .poster .dec-star,
  .poster .dec-sparkle,
  .poster .dec-ball {
    display: none;
  }
  .dec > .dec-keep {
    display: block;
  }
  .ornament {
    opacity: 0.32;
  }
  .site-footer::after {
    opacity: 0.22;
  }
  .cta-banner::before {
    opacity: 0.3;
  }
  .genres {
    --genres-cols: 1;
  }
  .genre:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
  .hero__photo{
    transform: none;
    box-shadow: 6px 8px 0 rgba(26, 16, 51, 0.28);
  }
  .hero--poster {
    padding-block: calc(var(--header-total) + 46px) clamp(48px, 9vw, 72px);
  }
  .poster,
  .genre,
  .country-card,
  .form--panel,
  .cta-banner {
    box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
  }
  .btn--ticket {
    min-height: 58px;
    padding: 15px 26px;
    font-size: 0.82rem;
  }
  .tent-band,
  .tent-band--thin {
    height: 18px;
    background-size: 110px 18px;
  }
  .bunting {
    height: 34px;
    background-size: 176px 34px;
  }
}
@media (max-width: 560px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dec-float,
  .dec-spin,
  .dec-sway,
  .confetti span {
    animation: none !important;
  }
}

/* ---------- 14.20 Уточнения слоя --------------------------------------- */
/* Базовые свойства фигур декора: они встречаются и вне контейнера .dec
   (в рамке Hero, на фотографии клоунов, на афишах программ). */
.dec-star,
.dec-star--white,
.dec-star--pink,
.dec-sparkle,
.dec-ball,
.dec-ball--2,
.dec-balloon,
.dec-balloon--sky,
.dec-balloon--yellow,
.dec-tent,
.dec-ticket,
.dec-dots,
.dec-dots--ink,
.dec-dots--yellow {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.dec-dots,
.dec-dots--ink,
.dec-dots--yellow {
  background-repeat: repeat;
  background-size: 16px 16px;
}
/* Слово-наклейка внутри крупного заголовка не должна становиться блоком */
.hero__title .word-chip,
.clowns__title .word-chip,
.display-1 .word-chip,
.display-2 .word-chip {
  display: inline-block;
}
/* Надзаголовок-«таблетка» работает во всех блоках, не только в шапке секции */
.kicker {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 800;
  letter-spacing: 0.2em;
  box-shadow: var(--shadow-toon);
}
.kicker--center {
  margin-inline: auto;
}
.band--yellow .kicker,
.hero--page .kicker,
.hero--page .hero__kicker {
  background: var(--c-red);
  color: #fff;
}
.band--red .kicker,
.band--pink .kicker,
.band--orange .kicker {
  background: #fff;
  color: var(--c-red);
}
.hero--poster .hero__kicker {
  background: var(--c-yellow);
  color: var(--c-ink);
}

/* Полоска под шапкой — одинаковая и для прозрачной, и для плотной версии */
.site-header--solid::after {
  bottom: -6px;
  height: 6px;
  opacity: 1;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='6' viewBox='0 0 160 6'%3E%3Crect width='40' height='6' fill='%23E8112D'/%3E%3Crect x='40' width='40' height='6' fill='%23FFC800'/%3E%3Crect x='80' width='40' height='6' fill='%2335B8F0'/%3E%3Crect x='120' width='40' height='6' fill='%237B3FE4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 6px;
}

/* Чередование светлых секций внутренних страниц — плоскими цветами */
.section--alt {
  background: #ffffff;
}
.section--candy {
  background: var(--c-cream);
}
.section--alt#tour,
.section--alt#tickets,
.section--alt#about,
.section--alt#events,
.section--alt#contacts {
  background: #ffffff;
}
.section--alt::before,
.section--alt::after {
  content: none;
}

/* ---------- 14.21 Починка после отказа от градиентов -------------------
   Несколько объявлений раньше держались на градиентах и rgb-триплетах.
   Здесь им возвращены корректные плоские значения. */
.field select {
  background-color: var(--c-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1033' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
  padding-right: 46px;
}
.field select:focus {
  background-color: #fff;
}
.lang-modal__dialog {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
}
.lang-modal__dialog::before {
  background: var(--c-yellow);
}
.hero__country::after,
.hero__program::before,
.card::before,
.stat::before,
.genre::before,
.about__item::before,
.offer-card::before,
.program-card::after,
.country-card::after{
  content: none;
}
.hero__program-icon {
  background: rgba(255, 255, 255, 0.18);
}
.contact-item--static:hover .contact-item__icon,
.contact-item__icon {
  background: var(--c-yellow);
  color: var(--c-ink);
}

/* ---------- 14.22 Правки после визуальной проверки --------------------- */
/* Карточка страны: снимаем жёсткую пропорцию и растянутое на всю высоту
   тело — теперь под фотографией стоит цветная плашка с названием. */
.country-card {
  aspect-ratio: auto;
}
.country-card__body {
  height: auto;
}
.country-card__count {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.9;
}
/* На голубой полосе точки под заголовком должны читаться */
.band--sky .section-head--center::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='14' viewBox='0 0 92 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23E8112D'/%3E%3Ccircle cx='31' cy='7' r='7' fill='%23FFC800'/%3E%3Ccircle cx='55' cy='7' r='7' fill='%23ffffff'/%3E%3Ccircle cx='79' cy='7' r='7' fill='%237B3FE4'/%3E%3C/svg%3E");
}
/* Гирлянда флажков висит под шапкой, а не за ней */
.site-header {
  background: #fff;
}
.bunting--top {
  top: var(--header-total);
  height: 46px;
  inset-inline: 0;
  bottom: auto;
}

/* Надзаголовки на цветных подложках: тёмный текст на жёлтой «таблетке» */
.cta-banner .kicker,
.hero--main .hero__kicker,
.program-card__body .kicker,
.country-card__body .kicker {
  background: var(--c-yellow);
  color: var(--c-ink);
}
/* Крупные цифры и год гастролей — обычный сплошной цвет, без заливки текста */
.tour-year__title,
.text-circus {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-red);
}
.hero--main .hero__title .text-gold,
.hero--page .hero__title .text-gold {
  background: none;
  background-size: auto;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
/* Хлебные крошки поверх фотографии в шапке страницы */
.hero--page .breadcrumbs,
.hero--page .breadcrumbs a {
  color: rgba(255, 255, 255, 0.86);
}
.hero--page .breadcrumbs a:hover {
  color: var(--c-yellow);
}

/* Теги: единая рамка, цвет различается только текстом */
.tag,
.tag:nth-child(2n),
.tag:nth-child(3n) {
  background: #fff;
  border-color: var(--line);
}
.tag {
  color: var(--c-red);
}
.tag:nth-child(2n) {
  color: var(--c-violet);
}
.tag:nth-child(3n) {
  color: var(--c-blue);
}
/* Цифры статистики наследуют цвет своей плитки */
.stat__value.text-gold,
.stats .stat .stat__value.text-gold {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
}
/* Конфетти-фон секций не должен спорить с текстом */
.ornament {
  opacity: 0.3;
}

/* Шапка всегда светлая, поэтому «тёмный» набор токенов для прозрачного
   состояния над фотографией больше не нужен. */
body:not(.is-locked) .site-header:not(.is-scrolled):not(.site-header--solid) {
  --text: #1a1033;
  --text-dim: #45375f;
  --text-mute: #6f6288;
  --champagne: var(--c-violet);
  --gold: var(--c-red);
  --gold-light: var(--c-red);
  --gold-glow: var(--c-red);
  --line: rgba(26, 16, 51, 0.18);
  --line-soft: rgba(26, 16, 51, 0.12);
  --tint-rgb: 26, 16, 51;
  --chrome-rgb: 255, 255, 255;
}
.site-header .burger span {
  background: var(--c-red);
}
.lang__toggle {
  border: 1px solid var(--line);
  color: var(--c-ink);
  background: #fff;
}
.lang__toggle:hover,
.lang.is-open .lang__toggle {
  border-color: var(--c-red);
  color: var(--c-red);
}

/* ---------- 14.23 Мобильная версия: меньше декора и движения -----------
   Блок стоит последним намеренно: он гасит декоративные слои, которые
   выше по файлу объявлены видимыми. */
@media (max-width: 720px) {
  .dec > *,
  .hero__frame .hero__sticker--ticket,
  .poster .dec-star,
  .poster .dec-sparkle,
  .poster .dec-ball {
    display: none;
  }
  /* Конфетти-кружки остаются, но перестают двигаться */
  .confetti span {
    animation: none;
    opacity: 0.75;
  }
  /* Шар у фотографии не должен уезжать за край экрана */
  .hero__frame .hero__sticker--ball {
    left: auto;
    right: -18px;
    bottom: -24px;
    width: 62px;
    height: 62px;
  }
  .hero__frame .hero__sticker--star {
    width: 58px;
    height: 58px;
    top: -24px;
    right: -10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti span,
  .dec-float,
  .dec-spin,
  .dec-sway {
    animation: none !important;
  }
}

/* Конфетти-фон секции: две ленты по краям вместо сплошной заливки —
   середина остаётся чистой под текст. */
.ornament {
  background-image: var(--pat-confetti), var(--pat-confetti);
  background-size:
    320px 320px,
    320px 320px;
  background-position:
    center top,
    center bottom;
  background-repeat: repeat-x, repeat-x;
  opacity: 0.4;
}
@media (max-width: 720px) {
  .ornament {
    opacity: 0.3;
  }
}

/* ---------- 14.24 Производительность: без размытий -------------------
   Все поверхности стали непрозрачными и плоскими, поэтому backdrop-filter
   и filter: blur() больше ничего не дают — только заставляют браузер
   пересчитывать слой на каждом кадре прокрутки. */
.site-header,
.site-header.is-scrolled,
.site-header--solid,
.mobile-menu,
.lang-modal__backdrop,
.hero__country,
.program-card__tags .tag{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero::before,
.site-footer::after,
.ornament::before {
  filter: none;
}
.lang-modal__backdrop {
  background: rgba(26, 16, 51, 0.55);
}

/* Декоративные слои баннера и подвала унаследовали от старой «световой»
   версии сдвиг transform и тёплую подложку — сбрасываем их, иначе слой
   уезжает вбок и на цветном поле видна ступенька. */
.cta-banner::before,
.cta-banner::after,
.site-footer::before,
.site-footer::after {
  transform: none;
  background-color: transparent;
  width: auto;
  will-change: auto;
}
.cta-banner::before {
  inset: 0;
  z-index: 0;
}
.cta-banner::after {
  top: 0;
  bottom: auto;
  height: 20px;
  z-index: 1;
}
.cta-banner > * {
  position: relative;
  z-index: 2;
}
.site-footer::after {
  inset: 26px 0 0;
  bottom: 0;
  height: auto;
}

/* Полоса купола на фиолетовом поле: фиолетовый клин сливался бы с фоном,
   поэтому для подвала и CTA-баннера используется вариант без него. */
:root {
  --pat-tent-bright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26' viewBox='0 0 150 26'%3E%3Crect width='150' height='26' fill='%23FFC800'/%3E%3Cpath d='M0 0h30l-10 26H0z' fill='%23E8112D'/%3E%3Cpath d='M60 0h30l-10 26H50z' fill='%2335B8F0'/%3E%3Cpath d='M120 0h30l-10 26h-30z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.cta-banner::after {
  background-image: var(--pat-tent-bright);
}
.site-footer::before {
  background-image: var(--pat-tent-bright);
}

/* Мелкий текст подвала поверх звёздного узора — чуть контрастнее */
.site-footer {
  --text-mute: rgba(255, 255, 255, 0.82);
}
.site-footer .footer-bottom p,
.site-footer .muted,
.site-footer .small {
  color: rgba(255, 255, 255, 0.82);
}

/* ===== Реквизиты компании (страница «О нас») ===== */
.requisites {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}
.requisites__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.requisites__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.requisites dt {
  flex: none;
  width: 150px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.requisites dd {
  flex: 1 1 180px;
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
}
@media (max-width: 560px) {
  .requisites dt {
    width: 100%;
  }
}

/* ---------- Краткое описание гастролей в блоке билета ------------------
   Поле note из data/events.json: кто на арене в этом городе. Живёт в
   строке графика (.tour-stop) и в карточке события (.card__text). */
.tour-stop__info {
  flex: 1 1 auto;
  min-width: 0;
}
.tour-stop__note {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .tour-stop__note {
    font-size: 0.84rem;
    line-height: 1.5;
  }
}

/* =====================================================================
   14. График гастролей — таблица строк
   Не карточки, а горизонтальные строки: город, дата начала, дата
   окончания и кнопка билета. Города идут друг под другом.

   Одна сетка на всю таблицу. --tour-cols объявлен на .tour-table и
   применён и к шапке, и к каждой строке — поэтому колонки стоят ровно
   друг под другом, а не «примерно». Высота строк задана min-height и
   одинакова у всех: состав ячеек в строке всегда один и тот же.

   Порядок строк задаёт events.js по датам: ближайшие выше, прошедшие
   уходят вниз и гаснут. Кнопка гаснет сама, как только пройдёт endDate.
   ===================================================================== */
.tour-schedule {
  display: block;
}

/* Блок года. Расписание всегда разложено по годам: один заголовок —
   одна таблица. Год печатается цифрой, без слова, — так подпись не
   зависит от языка страницы. */
.tour-year + .tour-year {
  margin-top: clamp(28px, 3.4vw, 44px);
}
.tour-year__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.tour-year__title::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--c-ink);
  opacity: 0.14;
}
.tour-table {
  --tour-cols: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(178px, 0.9fr);
  --tour-gap: clamp(12px, 1.6vw, 26px);
  --tour-pad: clamp(16px, 1.8vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

/* Шапка: подписи колонок. Для скринридера она скрыта (aria-hidden в
   разметке) — подпись каждой ячейки дублируется внутри строки. */
.tour-table__head {
  display: grid;
  grid-template-columns: var(--tour-cols);
  align-items: center;
  gap: var(--tour-gap);
  padding: 14px var(--tour-pad);
  background: var(--c-cream);
  border-bottom: 1px solid var(--line);
}
.tour-table__col {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tour-table__col--action {
  text-align: right;
}

.tour-table__body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tour-row {
  display: grid;
  grid-template-columns: var(--tour-cols);
  align-items: center;
  gap: var(--tour-gap);
  min-height: 78px;
  padding: 14px var(--tour-pad);
  border-top: 1px solid var(--line-soft);
  transition: background-color 0.2s var(--ease);
}
.tour-row:first-child {
  border-top: 0;
}
.tour-row:hover {
  background: var(--c-cream);
}

.tour-row__cell {
  min-width: 0;
}
.tour-row__cell--city {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tour-row__city,
.tour-row__meta {
  /* одна строка на ячейку: перенос сделал бы строку выше соседних */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-row__city {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-red);
}
.tour-row__meta {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-mute);
}
/* Площадка выводится только тогда, когда она подтверждена в данных:
   пустой строки в ячейке не появляется. */
.tour-row__venue {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dim);
}

/* Подпись даты видна только в узкой раскладке — на широком экране
   её роль играет шапка таблицы. */
.tour-row__label {
  display: none;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tour-row__date {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  /* диапазон не разрывается посреди «5–18 сентября 2026» */
  white-space: nowrap;
}

/* Статус остановки словами — рядом с датами. Кнопка показывает то же
   состояние действием, подпись дублирует его текстом. */
.tour-row__status {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tour-row__status--onsale {
  background: rgba(18, 183, 106, 0.14);
  color: #0b7f4a;
}
.tour-row__status--soon {
  background: rgba(53, 184, 240, 0.16);
  color: #0d6f9c;
}
.tour-row__status--past {
  background: rgba(26, 16, 51, 0.08);
  color: var(--text-mute);
}

.tour-row__cell--action {
  display: flex;
  justify-content: flex-end;
}
.tour-row__btn {
  width: 100%;
  max-width: 210px;
  justify-content: center;
  white-space: nowrap;
}

/* Прошедшие гастроли: строка гаснет, кнопка уже отключена в разметке. */
.tour-row.is-past {
  opacity: 0.55;
}
.tour-row.is-past .tour-row__city {
  color: var(--text-dim);
}

/* Оранжевая кнопка билета в графике — тот же тонкий кант, что и у
   остальных кнопок афиши. */
.btn--orange {
  background: var(--c-orange);
  color: var(--c-ink);
  border-color: rgba(26, 16, 51, 0.22);
  box-shadow: 0 2px 0 rgba(26, 16, 51, 0.14);
}
.btn--orange:hover {
  background: #ff9427;
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.16);
}
.btn--orange:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(26, 16, 51, 0.14);
}

/* Планшет: колонка билета уже, шрифты чуть мельче. */
@media (max-width: 1040px) {
  .tour-table {
    /* самая длинная подпись — «Скоро в продаже»; колонка держит её
       целиком, иначе кнопка обрезается по правому краю */
    --tour-cols: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(178px, 0.9fr);
  }
  .tour-row__date {
    font-size: 0.86rem;
  }
  .tour-row__btn {
    padding-inline: 12px;
    letter-spacing: 0.08em;
  }
}

/* Телефон: строка складывается в две колонки, шапка не нужна.
   Город занимает всю ширину, даты стоят рядом с подписями,
   кнопка растягивается на всю строку — все строки снова одинаковы. */
@media (max-width: 760px) {
  .tour-table {
    --tour-gap: 12px;
    --tour-pad: 16px;
    border-radius: 16px;
  }
  .tour-table__head {
    display: none;
  }
  .tour-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 18px var(--tour-pad);
  }
  .tour-row__label {
    display: block;
    margin-bottom: 2px;
  }
  .tour-row__date {
    /* в столбик места хватает: длинный диапазон может перенестись */
    white-space: normal;
  }
  .tour-row__cell--action {
    justify-content: stretch;
  }
  .tour-row__btn {
    max-width: none;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-row,
  .btn--orange:hover,
  .btn--orange:active {
    transform: none;
    transition: none;
  }
}

/* ---------- 14.24 Страны присутствия: единая сетка карточек ------------ */
/* Карточки стран выравниваются по одной высоте: базовый слой задавал им
   портретный aspect-ratio, из-за которого высота плитки не совпадала с
   реальным содержимым. Теперь высоту определяют картинка 4:3 и подпись,
   поэтому у всех четырёх карточек одинаковая область изображения,
   одинаковые отступы и названия стран на одном уровне. Пропорция 4:3
   совпадает с viewBox иллюстраций (1200×900) — картинка не обрезается. */
#countries .grid-4,
#geography .grid-4 {
  align-items: stretch;
}
.country-card {
  aspect-ratio: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.country-card__body {
  flex: 1 1 auto;
}
@media (max-width: 1200px) {
  .country-card {
    aspect-ratio: auto;
  }
}
@media (max-width: 640px) {
  .country-card {
    aspect-ratio: auto;
  }
}

/* =====================================================================
   15. FAQ страницы и блок «Другие программы»
   FAQ собран на <details>: он раскрывается без JavaScript, поэтому
   ответы видны поисковику и читателю с выключенными скриптами —
   разметка FAQPage описывает ровно то, что есть на странице.
   ===================================================================== */
.faq {
  display: grid;
  gap: 12px;
  max-width: 74ch;
}
.faq__item {
  background: #fff;
  border: 2px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(26, 16, 51, 0.14);
  overflow: hidden;
}
.faq__item + .faq__item {
  margin-top: 0;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 2vw, 24px);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 2px;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q::after {
  transform: translateY(3px) rotate(-135deg);
}
.faq__a {
  padding: 0 clamp(16px, 2vw, 24px) 18px;
}
.faq__a p {
  margin: 0;
  max-width: 68ch;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.faq__a p + p {
  margin-top: 10px;
}

/* Короткая карточка соседней программы. Никакого расписания и длинных
   описаний: только афиша, название, одна строка и понятная ссылка. */
.next-program {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
}
.next-program > :only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 76ch;
}
.next-program__title {
  margin: 6px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 800;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .next-program {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
   16. Плавающая кнопка WhatsApp
   Правый нижний угол, поверх содержимого и над кнопкой «Наверх»:
   их вертикали разведены общими токенами --fab-*, поэтому кнопки
   не наезжают друг на друга ни на одной ширине экрана.
   ===================================================================== */
:root {
  --fab-size: 56px;
  --fab-gap: 12px;
  --fab-right: 22px;
  --fab-bottom: 22px;
}

.wa-fab {
  position: fixed;
  right: calc(var(--fab-right) + var(--safe-r, 0px));
  bottom: calc(var(--fab-bottom) + var(--safe-b, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  border: 2px solid var(--c-ink);
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 0 rgba(26, 16, 51, 0.22);
  transition:
    transform 0.3s var(--ease-pop),
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.wa-fab svg {
  width: 30px;
  height: 30px;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  background: #1ebe5b;
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(26, 16, 51, 0.22);
}
.wa-fab:active {
  transform: translateY(0);
  box-shadow: 0 4px 0 rgba(26, 16, 51, 0.22);
}

/* «Наверх» уезжает выше кнопки WhatsApp — угол занимает мессенджер. */
.to-top {
  bottom: calc(
    var(--fab-bottom) + var(--safe-b, 0px) + var(--fab-size) + var(--fab-gap)
  );
  right: calc(var(--fab-right) + var(--safe-r, 0px) + 4px);
}

@media (max-width: 720px) {
  :root {
    --fab-size: 52px;
    --fab-right: 16px;
    --fab-bottom: 16px;
  }
  .wa-fab svg {
    width: 27px;
    height: 27px;
  }
}

@media print {
  .wa-fab {
    display: none !important;
  }
}

/* =====================================================================
   17. Контакты в подвале: страна флагом, почта — знаком сервиса
   Три номера принадлежат разным странам, а два адреса — разным почтовым
   сервисам; по самим цифрам и буквам это читается плохо. Слева от
   значения ставится знак, у казахстанского номера добавляется ссылка
   WhatsApp: тот же номер, другой канал.
   ===================================================================== */
.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-icon {
  flex: none;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
}
.footer-wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  transition: transform 0.25s var(--ease);
}
.footer-wa svg {
  width: 14px;
  height: 14px;
}
.footer-wa:hover {
  color: #fff;
  transform: scale(1.08);
}
@media (max-width: 720px) {
  /* В мобильной раскладке ссылки подвала растянуты на 44px по высоте —
     знак сервиса и значок мессенджера выравниваем по той же линии. */
  .footer-col ul .footer-contact {
    min-height: 44px;
  }
}

/* Карточка телефона на странице контактов: слева флаг страны. */
.contact-item--flag {
  gap: 14px;
}
.contact-flag {
  flex: none;
  width: 30px;
  height: 20px;
  /* у флагов разные пропорции (3:2, 5:3, 2:1) — вписываем, а не растягиваем */
  object-fit: contain;
  border-radius: 3px;
}
/* Знак почтового сервиса в карточке адреса: та же оптическая ширина,
   что и у флага, чтобы значения выстроились в одну колонку. */
.contact-mailmark {
  flex: none;
  width: 28px;
  height: 22px;
  object-fit: contain;
}

/* Заглушки под картинки убраны: фотографии стоят прямо в src разметки.
   Раньше здесь лежал прозрачный 1×1 GIF с пунктирной рамкой, а сам кадр
   подставлял js/main.js по data-img-slot — без JS страница оставалась
   без иллюстраций, а с ним кадр появлялся рывком после загрузки. */

/* ============ HERO: ФОТОГРАФИЯ ПОКАЗЫВАЕТСЯ ЦЕЛИКОМ ============
   Все кадры героев — 1920×1080. Раньше секция задавала высоту сама
   (min-height: 100svh / 62svh), кадр растягивался по object-fit: cover
   и терял верх и низ. Теперь пропорции секции равны пропорциям кадра,
   а сам кадр вписывается по contain: при точном совпадении сторон он
   заполняет фон без полей, а если контент выше расчётной высоты —
   сверху и снизу остаётся фирменный фон полосы, но фотография всё
   равно остаётся целой. Афиши программ (.hero--banner) уже лежат в
   обычном потоке и правила ниже не трогают. */
.hero:not(.hero--banner) {
  /* Пропорции кадра задаются МИНИМАЛЬНОЙ высотой, а не aspect-ratio.
     Жёсткая пропорция фиксировала высоту намертво: на невысоком экране
     (1024×768) текст в неё не влезал, выезжал за края секции, и
     надзаголовок уходил под гирлянду. С min-height секция при нехватке
     места вырастает — как и задумано в комментарии выше: кадр остаётся
     целым, а сверху и снизу видна фирменная полоса.

     К пропорции кадра прибавлена высота шапки: .site-header закреплена
     (position: fixed) и непрозрачна, а .hero__media лежала под ней от
     самого верха страницы — верхняя десятая часть рисунка (у «Программ»
     это жёлтый мяч над рукой клоуна) просто не была видна. Ниже кадр
     сдвинут под шапку, и секции нужно место под них обоих. */
  min-height: calc(var(--header-total) + 100vw * 9 / 16);
}
/* Кадр начинается там, где кончается шапка, и держит свою пропорцию сам:
   bottom: auto + aspect-ratio дают блоку ровно 16:9 от текущей ширины,
   поэтому object-fit: contain вписывает рисунок без полей и без обрезки.
   Если текст выше кадра, секция вырастает, и запас уходит вниз — под
   картинку, к цветной полосе-разделителю. */
.hero:not(.hero--banner) .hero__media {
  top: var(--header-total);
  bottom: auto;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* ============ ШАПКИ «ПРОГРАММЫ», «СОТРУДНИЧЕСТВО», «КОНТАКТЫ» ============
   Размер заголовка. Раньше он стоял инлайном в разметке
   (style="font-size: …") и не поддавался ни одному правилу. Верхняя граница
   снижена, чтобы длинное «Сотрудничество» не рвалось посередине слова
   (глобальный overflow-wrap: break-word); нижняя подобрана так, чтобы слово
   целиком влезало и на экране 375px. */
.hero--page.hero--center .display-1 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  text-wrap: balance;
}

/* Контент Hero на «Программах», «Сотрудничестве» и «Контактах» стоит по
   центру кадра на всех ширинах: узкая левая колонка (max-width: 620px,
   text-align: left) убрана — она рвала центровку, ради которой на секции
   и висит .hero--center. Ширину держит .hero__content (900px), перенос
   длинных слов остаётся общим, потому что колонка теперь во всю ширину. */
.hero--page.hero--center .hero__content {
  margin-inline: auto;
  text-align: center;
}
.hero--page.hero--center .kicker,
.hero--page.hero--center .breadcrumbs ol,
.hero--page.hero--center .hero__actions {
  justify-content: center;
}

/* ============ ЗАТЕМНЕНИЕ HERO СНЯТО ============
   Раньше поверх кадра лежала подложка (.hero__overlay) — вертикальные и
   радиальные градиенты, настроенные под каждую страницу. Иллюстрации v3
   рисованные и сами по себе контрастные, поэтому слой убран целиком:
   кадр показывается как есть, на всех ширинах и во всех модификаторах.
   Контраст заголовков держат тени на самих буквах
   (.hero--page .hero__title / .hero__subtitle выше) и обводка золотого
   «Circus Asia» — они работают по контуру текста и фотографию не гасят. */
.hero__overlay,
.hero--main .hero__overlay,
.hero--poster .hero__overlay,
.hero--page .hero__overlay,
.hero--country .hero__overlay,
.hero--program .hero__overlay {
  display: none;
}

.hero:not(.hero--banner) .hero__media img {
  object-fit: contain;
  object-position: center;
  /* Медленный «наезд» тоже подрезал кадр по краям — снят вместе с cover */
  transform: none;
  animation: none;
  filter: none;
}
/* Узкий экран: шапка остаётся шапкой — кадр лежит фоном, текст идёт
   поверх него. Раньше секция здесь разбиралась на два блока: картинка
   сверху, текст под ней отдельной плашкой. Это читалось не как hero, а
   как случайная иллюстрация с подписью. Портретные кадры 4:5 в
   hero-mobile/ ровно для этого и нарезаны — под полноэкранный фон. */
@media (max-width: 860px) {
  .hero:not(.hero--banner) {
    display: flex;
    align-items: center;
    /* Высота секции равна пропорции кадра, а не доле экрана. Прежние
       min(88svh, 780px) задавали почти вертикальный прямоугольник, в
       который горизонтальный кадр 16:9 вписывался по cover — то есть
       срезался слева и справа. Теперь высота считается от ширины
       плюс высота закреплённой шапки, под которую сдвинут кадр. */
    min-height: calc(var(--header-total) + 100vw * 9 / 16);
    padding-block: calc(var(--header-total) + 28px) clamp(40px, 9vw, 76px);
  }
  .hero:not(.hero--banner) .hero__media {
    position: absolute;
    top: var(--header-total);
    right: 0;
    bottom: auto;
    left: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    z-index: -2;
  }
  .hero:not(.hero--banner) .hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero:not(.hero--banner) .hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    /* cover срезал кадр — держим contain, как на широких экранах */
    object-fit: contain;
    object-position: center;
  }
  .hero:not(.hero--banner) .hero__content {
    padding-block: 0;
  }
}
/* Ниже 641px <picture> подставляет вертикальный кадр 4:5 из
   assets/images/hero-mobile/ — под него и пропорция секции. */
@media (max-width: 640px) {
  .hero:not(.hero--banner) {
    min-height: calc(var(--header-total) + 100vw * 5 / 4);
  }
  .hero:not(.hero--banner) .hero__media {
    aspect-ratio: 4 / 5;
  }
}

/* Текст лежит прямо на фотографии — вместо снятой вуали читаемость
   держат тени на самих буквах. */
/* Плашки-«кикеры» лежат на сплошной заливке — им тень не нужна. */
.hero__title,
.hero__subtitle,
.hero__text,
.hero .breadcrumbs {
  text-shadow:
    0 2px 14px rgba(8, 4, 26, 0.75),
    0 1px 3px rgba(8, 4, 26, 0.65);
}
.hero__text {
  /* Абзац набран тонким шрифтом и светлым цветом — ему нужна тень
     плотнее, чем заголовку. */
  color: #fff;
  text-shadow:
    0 2px 20px rgba(8, 4, 26, 0.9),
    0 1px 4px rgba(8, 4, 26, 0.8);
}
.hero--poster .hero__title,
.hero--poster .hero__subtitle,
.hero--page .hero__title .text-gold {
  /* Здесь контраст держит чернильная обводка букв — тень ей только
     замыливает края. */
  text-shadow: none;
}

/* Портретные версии 4:5 заполняют шапку целиком: пропорция кадра и
   пропорция секции на телефоне совпадают, поэтому cover почти ничего не
   срезает. Прежнее правило растягивало <picture> по высоте содержимого и
   вписывало кадр по contain — это и разваливало шапку на «картинка сверху,
   текст снизу». Геометрию задаёт блок @media (max-width: 860px) выше. */

/* The remaining content block occupies the whole container once its media
   sibling has been removed from the markup. */
.split > :only-child,
.clowns__grid > :only-child,
.about > :only-child,
.offer > :only-child {
  grid-column: 1 / -1;
  width: 100%;
}
.split p,
.clowns__copy p,
.about__content > p,
.next-program p {
  max-width: 76ch;
}
.program-card,
.country-card,
.poster,
.genre {
  min-height: 0;
}
.program-card__body,
.country-card__body,
.poster__body,
.genre__body {
  position: relative;
  height: auto;
  min-height: 0;
}

@media (max-width: 640px) {
  html,
  body { overflow-x: clip; }
  .hero__title,
  .section-head :is(.display-1, .display-2, .display-3) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .section-head .text-gold { display: block; }
  .genres {
    --genres-cols: 1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .genre { min-width: 0; }
}

/* =====================================================================
   15. Кадры в контенте
   Сюжетные фотографии из assets/images/circus-*.webp: верхний кадр в
   карточках жанров, афиш и стран и большой кадр в разворотах секций.
   Пропорции слотов совпадают с пропорциями исходников, поэтому
   object-fit: cover ничего не срезает.
   ===================================================================== */
.genre__media,
.poster__media,
.country-card__media {
  position: relative;
  flex: none;
  overflow: hidden;
  background: rgba(26, 16, 51, 0.08);
}
/* Кадры жанров лежат в assets/images/scenes/ и сняты в 4:3 (1440×1080).
   Слот держал 3:2, и object-fit: cover срезал по 12,5% сверху и снизу —
   ровно там, где у акробатки голова, а у скомороха колпак. Пропорция
   слота приведена к пропорции исходника: кадр показывается целиком. */
.genre__media {
  aspect-ratio: 4 / 3;
}
/* Пропорции равны пропорциям самих афиш программ (1280×526), поэтому
   object-fit: cover ниже ничего не режет — постер виден целиком, вместе
   с названием шоу. При 16/9 у афиши срезало низ с заголовком. Слот
   держит только эти две афиши, других картинок в .poster не бывает. */
.poster__media {
  aspect-ratio: 1280 / 526;
}
.country-card__media {
  aspect-ratio: 4 / 3;
}
/* Раньше карточка страны была текстовой плашкой с жёстким aspect-ratio.
   С кадром высоту задаёт содержимое: кадр сверху, цветное тело снизу. */
.country-card {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}
.country-card__body {
  flex: 1;
}
.genre__media img,
.poster__media img,
.country-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.genre:hover .genre__media img,
.poster:hover .poster__media img,
.country-card:hover .country-card__media img {
  transform: scale(1.05);
}

/* Разворот секции: кадр рядом с текстовой колонкой. */
.media-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: rgba(26, 16, 51, 0.08);
  box-shadow: 0 5px 0 rgba(26, 16, 51, 0.14);
}
/* Рамка с афишей программы: пропорции равны пропорциям самой афиши
   (1280×526), поэтому cover ниже ничего не режет и название шоу остаётся
   в кадре. Обычный 4:3 срезал бы афише бока. */
.media-frame--banner {
  aspect-ratio: 1280 / 526;
}
.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Разворот «кадр + текст» в нижней части страницы «Программы».
   До этого кадр стоял по центру статьи во всю её ширину (900 px при
   пропорции 4:3 — почти 700 px высоты) и разрывал чтение: сверху текст,
   потом огромная картинка, потом снова текст. Теперь это обычный .split:
   кадр слева занимает половину разворота, справа — содержательный блок.
   Ниже 1024 px .split уже сам разворачивается в одну колонку, поэтому
   отдельного мобильного правила не нужно — кадр просто встаёт над текстом. */
.programs-tour {
  align-items: center;
}
.programs-tour .media-frame {
  /* Кадр не должен догонять по высоте текстовую колонку: у него своя
     пропорция 4:3, а сверху стоит потолок по ширине — иначе на широком
     экране половина разворота снова выросла бы до прежнего размера. */
  max-width: 520px;
}
.programs-tour .seo-article h2 {
  /* Внутри разворота заголовок стоит первым, отступ сверху ему не нужен. */
  margin-top: 0;
}
@media (max-width: 1024px) {
  .programs-tour .media-frame {
    max-width: 100%;
  }
}

/* Кадр внутри текстовой статьи жанра: разбивает длинный текст и держит
   ширину колонки .seo-article. Кроп 4:3 — берём -card.webp, чтобы кадр
   не резался повторно. */
.seo-article__figure {
  margin-top: 2em;
  margin-bottom: 2em;
}
.seo-article__figure + h2 {
  margin-top: 0;
}
/* Табличка «Что мы предлагаем» выступает за нижний край кадра. */
.offer__media {
  position: relative;
  padding-bottom: 54px;
}
@media (max-width: 1024px) {
  .offer__media {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genre__media img,
  .poster__media img,
  .country-card__media img {
    transition: none;
  }
  .genre:hover .genre__media img,
  .poster:hover .poster__media img,
  .country-card:hover .country-card__media img {
    transform: none;
  }
}

/* Разворот с обратным порядком: кадр стоит первым в разметке, чтобы на
   узком экране оказаться над текстом, а на широком уезжает вправо. */
.split--reverse > .split__media {
  order: 2;
}
@media (max-width: 1024px) {
  .split--reverse > .split__media {
    order: 0;
  }
}

/* =====================================================================
   19. Читаемость Hero без общего затемнения
   Вуаль поверх всего кадра (.hero__overlay) была снята целиком — кадр
   стал ярким, но заголовок лёг прямо на лицо артиста: на «О компании»,
   «Сотрудничестве» и страницах жанров текст читался поверх костюма и
   ничего не было видно. Возвращаем контраст двумя точечными приёмами
   вместо общей вуали:
     • текст съезжает в нижнюю треть кадра — лица и руки артистов
       (они всегда в верхних двух третях) остаются открытыми;
     • подложка живёт только под текстом: мягкий градиент снизу вверх,
       который к середине кадра сходит в ноль. Верх картинки не темнеет
       вообще, а низ — ровно настолько, чтобы белый шрифт читался.
   ===================================================================== */
.hero--page:not(.hero--banner) {
  align-items: flex-end;
}
/* Подложка живёт на .hero__overlay — этот слой и был задуман под вуаль
   (z-index: -1: над кадром на -2 и под текстом на 3). Включаем его
   обратно, но уже не сплошным затемнением, а градиентом снизу: верх
   кадра остаётся нетронутым. */
.hero--page:not(.hero--banner) .hero__overlay {
  display: block;
  background: linear-gradient(
    to top,
    rgba(9, 4, 24, 0.86) 0%,
    rgba(9, 4, 24, 0.78) 18%,
    rgba(9, 4, 24, 0.56) 34%,
    rgba(9, 4, 24, 0.3) 50%,
    rgba(9, 4, 24, 0.1) 64%,
    rgba(9, 4, 24, 0) 76%
  );
}

/* На узком экране кадр ниже, а текста столько же — градиент поднимается
   выше, иначе нижние кнопки выходят за его край. */
@media (max-width: 860px) {
  .hero--page:not(.hero--banner) .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(9, 4, 24, 0.88) 0%,
      rgba(9, 4, 24, 0.74) 18%,
      rgba(9, 4, 24, 0.46) 36%,
      rgba(9, 4, 24, 0.18) 54%,
      rgba(9, 4, 24, 0) 70%
    );
  }
}
/* Тени на буквах теперь дублируют подложку и только мылят шрифт —
   оставляем лёгкую, «контурную». */
.hero--page .hero__title,
.hero--page .hero__subtitle,
.hero--page .hero__text {
  text-shadow: 0 1px 3px rgba(8, 4, 26, 0.6);
}
/* «Хлебные крошки» стоят первой строкой блока — там подложка ещё почти
   прозрачная, а шрифт мелкий. Им нужна собственная плотная тень. */
.hero--page .breadcrumbs,
.hero--page .breadcrumbs a {
  color: rgba(255, 255, 255, 0.94);
  text-shadow:
    0 1px 2px rgba(8, 4, 26, 0.95),
    0 2px 12px rgba(8, 4, 26, 0.8);
}

/* Текстовый блок «Программ», «О компании», «Сотрудничества» и «Контактов»
   стоял у самой нижней кромки кадра: заголовок ложился на ноги артиста, а
   под подзаголовком до края секции оставалась пустая тёмная полоса.
   Поднимаем колонку примерно на 80px: положение блока задаёт нижний
   отступ (.hero--page:not(.hero--banner) — align-items: flex-end), и он
   увеличен с clamp(72px, 10vw, 140px) до clamp(96px, 15vw, 220px).
   Страницы стран (.hero--country) не трогаем: там композиция кадра своя. */
.hero--page:not(.hero--banner):not(.hero--country) {
  padding-bottom: clamp(96px, 15vw, 220px);
}
/* Подложка снизу (см. выше) сходила в ноль на 76% высоты — ровно там, где
   теперь стоят «крошки» и надзаголовок. Поднимаем её вместе с текстом:
   точки те же, сдвинуты на ту же долю кадра; плотность у самого низа и
   прозрачный верх кадра не меняются. */
.hero--page:not(.hero--banner):not(.hero--country) .hero__overlay {
  background: linear-gradient(
    to top,
    rgba(9, 4, 24, 0.86) 0%,
    rgba(9, 4, 24, 0.8) 24%,
    rgba(9, 4, 24, 0.58) 42%,
    rgba(9, 4, 24, 0.32) 58%,
    rgba(9, 4, 24, 0.12) 72%,
    rgba(9, 4, 24, 0) 86%
  );
}
@media (max-width: 860px) {
  .hero--page:not(.hero--banner):not(.hero--country) .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(9, 4, 24, 0.88) 0%,
      rgba(9, 4, 24, 0.76) 24%,
      rgba(9, 4, 24, 0.5) 44%,
      rgba(9, 4, 24, 0.2) 62%,
      rgba(9, 4, 24, 0) 78%
    );
  }
}

/* Наведение на карточку жанра увеличивало кадр на 5% — четверть головы
   уезжала за край рамки. 2% хватает, чтобы движение читалось. */
.genre:hover .genre__media img,
.poster:hover .poster__media img,
.country-card:hover .country-card__media img {
  transform: scale(1.02);
}

/* ---------- Разворот «кадр + текст» внутри статьи ---------------------
   На страницах жанров кадр стоял по центру колонки .seo-article во всю
   её ширину: 4:3 при 900 px — это почти 700 px высоты посреди текста.
   Читатель упирался в картинку, пролистывал её и терял нить. Теперь кадр
   и следующий за ним подраздел стоят рядом: слева картинка в половину
   разворота, справа заголовок и абзац. Ниже 760 px разворот сам
   складывается в одну колонку — кадр просто встаёт над текстом. */
.article-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: 2.2em 0;
}
.article-split__media {
  margin: 0;
}
.article-split__body > :first-child {
  margin-top: 0;
}
.article-split__body > :last-child {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .article-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Кадр 16:9 в рамке: circus-about.webp снят 1672×941, и общий слот 4:3
   срезал ему бока вместе с крайними артистами труппы. */
.media-frame--wide {
  aspect-ratio: 16 / 9;
}

/* Кадр, переехавший внутрь колонки разворота (страницы стран и «О нас»).
   Раньше он лежал третьим элементом сетки .split и падал на новую строку
   в левую колонку — справа от него оставалась пустая половина экрана. */
.split__media--inline .media-frame {
  max-width: 100%;
}

/* Метки программы под афишей: список стоит в колонке кадра и добирает
   высоту, которой афише 1280×526 не хватает рядом с текстом. */
.program-meta {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}