/* ============================================================
   ЯЗНАЮ — вёрстка главной (site.css)
   Требует: fonts.css, tokens.css, motion.css, effects.css.
   Слои: пергамент (контент) + космос (hero/финал, data-theme="space").
   ============================================================ */

/* ---- База ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 3px; border-radius: 2px; }
[data-theme="space"] :focus-visible { outline-color: var(--color-gold); }

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--color-paper); color: var(--color-ink);
  padding: 10px 16px; border-radius: var(--radius-buttons);
}
.skip-link:focus { left: 12px; }

.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }
.wrap--narrow-p { max-width: 640px; }

/* Ритм секций: у примера воздух даёт только внутренний паддинг, секции стыкуются вплотную.
   96+96 между нашими текстовыми блоками читалось как провал — держим 80. */
.sec { padding: 80px 0; }
.sec__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(30px, 4.6vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 16px;
  text-wrap: balance;
}
.sec__lede {
  font-size: clamp(16px, 2vw, var(--text-subheading));
  line-height: var(--leading-subheading);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 40px;
}
.sec__note { font-size: var(--text-body-sm); color: var(--text-muted); max-width: 62ch; margin: 24px 0 0; }
p { margin: 0 0 16px; max-width: 68ch; }

/* ---- Кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-buttons);
  font: var(--font-weight-semibold) 15px/1.2 var(--font-ui);
  letter-spacing: -0.011em;
  text-decoration: none; cursor: pointer; border: 0;
  transition: var(--transition-colors), transform 0.1s;
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
/* Primary: ink на светлом, белая на тёмном — как на живом примере */
.btn--primary { background: var(--action-bg); color: var(--action-text); }
.btn--primary:hover { background: var(--action-bg-hover); }
[data-theme="space"] .btn--primary { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-border-strong); }
[data-theme="space"] .btn--primary:hover { background: var(--color-parchment); }
.btn--outline {
  background: var(--color-paper); color: var(--color-ink);
  box-shadow: var(--shadow-border-default);
}
.btn--outline:hover { background: var(--color-parchment); }
/* Стеклянные (live-приём: белый 8% + blur + кольцо) */
.btn--ghost, .btn--glass {
  background: var(--glass-white); color: var(--color-parchment);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 1px var(--glass-ring) inset;
}
.btn--ghost:hover, .btn--glass:hover { background: rgba(255,255,255,0.16); }
/* ---- Иконки (спрайт в index.html: lucide stroke + telegram fill) ---- */
.ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--tg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.btn .ico { width: 18px; height: 18px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link-arrow { font-weight: var(--font-weight-semibold); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---- Навигация — репликация passionfroot §2 ----
   Две пилюли по краям (десктоп) / одна полоса (мобайл). Два состояния:
   стекло над тёмным слоем ↔ белая над светлым; переключает js по слою под шапкой. */
.nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  /* Пилюли по краям контента (правка оператора 16.08): .wrap = --page-max-width с padding 24px,
     значит видимая колонка контента уже на 48px — ту же ширину держит шапка */
  width: calc(var(--page-max-width) - 48px); max-width: calc(100% - 48px);
  display: flex; flex-direction: column; gap: 6px;
}
.nav__row { display: flex; align-items: center; justify-content: space-between; }
.nav__pill {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 5px 6px 5px 5px;
  border-radius: 12px;
  color: var(--color-parchment);
  background-image: linear-gradient(rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    rgba(255, 255, 255, 0.07) 0px 0px 0px 1px inset,
    rgba(255, 255, 255, 0.04) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.10) 0px 2px 8px 0px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__brand {
  display: flex; align-items: center; height: 36px; padding: 0 10px;
  font: var(--font-weight-semibold) 17px/1 var(--font-ui); /* Nunito средней жирности (правка оператора) */
  letter-spacing: 0.05em;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.nav__divider {
  flex: none; width: 1px; height: 16px;
  background-color: rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__group { display: flex; align-items: center; gap: 2px; }
.nav__group--cta { gap: 4px; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  font: var(--font-weight-semibold) 15px/20px var(--font-ui);
  letter-spacing: -0.18px;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__link:hover { background-color: rgba(255, 255, 255, 0.05); }
.nav__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 1px 0; padding: 7px 14px;
  border-radius: 10px;
  font: var(--font-weight-bold) 14px/20px var(--font-ui);
  white-space: nowrap; text-decoration: none;
  color: var(--color-parchment);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    rgba(255, 255, 255, 0.2) 0px 0px 0px 1px,
    rgba(255, 255, 255, 0.06) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__cta:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    rgba(255, 255, 255, 0.25) 0px 0px 0px 1px,
    rgba(255, 255, 255, 0.08) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
}
.nav__cta:active {
  transform: scale(0.985);
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    rgba(255, 255, 255, 0.3) 0px 0px 0px 1px,
    rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
}

/* Состояние «над светлым контентом»: белые пилюли, ink-градиентная CTA (спека §2.3) */
.nav--solid .nav__pill {
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-border-default);
}
.nav--solid .nav__divider { background-color: var(--color-linen); }
.nav--solid .nav__link:hover { background-color: var(--color-parchment); }
.nav--solid .nav__cta {
  color: var(--color-parchment);
  background-color: var(--color-charcoal);
  background-image: linear-gradient(to top, #2b2a27 0%, var(--color-charcoal) 100%);
  box-shadow:
    rgba(29, 29, 28, 0.02) 0px 1px 1px -0.5px,
    rgba(29, 29, 28, 0.02) 0px 3px 3px -1.5px,
    rgba(29, 29, 28, 0.02) 0px 6px 6px -3px,
    rgba(29, 29, 28, 0.01) 0px 12px 12px -6px;
}
.nav--solid .nav__cta:hover {
  color: #fff;
  background-image: linear-gradient(to top, #201f1d 0%, #34332f 100%);
}

/* Мега-меню (правка оператора: пункты собраны во всплывающее, как у примера) */
.nav__trigger { border: 0; background: none; cursor: pointer; }
.ico--chevron { width: 16px; height: 16px; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.nav__trigger[aria-expanded="true"] .ico--chevron { transform: rotate(180deg); }
.nav__row { position: relative; }
.nav__mega {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  display: flex; align-items: stretch; gap: 8px;
  width: 640px; max-width: 100%; padding: 8px;
  background: var(--color-paper); color: var(--color-ink);
  border-radius: 16px;
  box-shadow: var(--shadow-border-strong);
  animation: menu-in 0.2s var(--ease-out-strong) both;
  /* Не помещается по высоте — прокручивается внутри себя (правка оператора 16.08).
     Меню лежит внутри fixed-шапки, страницей его не докрутить, поэтому свой скролл. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__mega[hidden] { display: none; }
.nav__mega-list { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px; min-width: 0; }
.mega-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--color-ink);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-item:hover { background-color: var(--color-parchment); }
.mega-item > .ico { width: 20px; height: 20px; margin-top: 2px; stroke-width: 1.8; }
.mega-item__title { display: block; font: var(--font-weight-bold) 15px/1.35 var(--font-ui); }
.mega-item__desc { display: block; margin-top: 2px; font: 400 13px/1.45 var(--font-ui); color: var(--text-muted); }
.nav__mega-heading {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 12px 4px;
  font: var(--font-weight-bold) 11px/1.3 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.nav__mega-heading::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
.mega-item--flat { align-items: center; padding: 8px 12px; }
.mega-item--flat > .ico { width: 18px; height: 18px; margin-top: 0; }

/* Две промо-карточки: Флагман (фиолетово-синий) и Клуб (медно-оранжевый).
   Градиент статичный — анимация background-position перерисовывала большую
   заливку каждый кадр и била по fps; «жизнь» даёт приближение по наведению. */
.nav__mega-side { width: 244px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.nav__mega-promo {
  position: relative; overflow: hidden;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-parchment);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.nav__mega-promo:hover { transform: scale(1.035); box-shadow: 0 12px 28px -10px rgba(9, 6, 14, 0.55); }
.nav__mega-promo--flagship {
  background-image: linear-gradient(150deg, #190922 0%, #2C2766 46%, #3A3480 72%, #8B84C6 130%);
}
.nav__mega-promo--club {
  background-image: linear-gradient(150deg, #2A1608 0%, #7A4A1C 44%, #A9743A 72%, #E5C089 132%);
}
.mega-promo__kicker {
  font: var(--font-weight-bold) 10.5px/1.3 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(248, 247, 242, 0.72);
}
.nav__mega-promo--flagship .mega-promo__kicker { color: var(--color-indigo-soft); }
.nav__mega-promo--club .mega-promo__kicker { color: #EBD3A6; }
.mega-promo__title { font: var(--font-weight-medium) 22px/1.2 var(--font-display); }
.mega-promo__text { flex: 1; font: 400 12.5px/1.45 var(--font-ui); color: rgba(248, 247, 242, 0.85); }
.mega-promo__cta { margin-top: auto; font: var(--font-weight-bold) 13.5px/1.3 var(--font-ui); color: #fff; }
.nav__mega-promo:hover .mega-promo__cta { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .nav__mega-promo, .nav__mega-promo:hover { transition: none; transform: none; }
}

/* Мобайл: две пилюли — слева бренд, справа действия (правка оператора 16.08).
   Была одна полоса во всю ширину; разделение повторяет десктопную схему §2.1. */
.nav__mobile { display: none; position: relative; }
.nav__mbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav__mpill { height: 44px; padding: 4px; }
.nav__mpill .nav__brand { padding: 0 8px; }
/* Зазор внутри правой пилюли даёт сама CTA, а не gap: у свёрнутой (max-width: 0)
   кнопки gap всё равно остался бы лишним отступом перед бургером */
.nav__mpill--actions { gap: 0; }
.nav__mcta .nav__cta { margin-right: 5px; }
.nav__mcta {
  display: block; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--scrolled .nav__mcta { max-width: 200px; opacity: 1; }
.nav__burger {
  flex: none; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: inherit;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__burger:hover { background-color: rgba(255, 255, 255, 0.1); }
.nav--solid .nav__burger:hover { background-color: var(--color-parchment); }
.nav__burger span {
  width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease-out-quint), opacity 0.2s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Мобильное меню — белая панель под полосой */
.nav__menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  flex-direction: column;
  background: var(--color-paper); color: var(--color-ink);
  border-radius: 12px;
  box-shadow: var(--shadow-border-default);
  padding: 6px;
  z-index: 60;
  /* то же, что у мега-меню: не помещается по высоте — скролл внутри панели */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__menu.is-open { display: flex; animation: menu-in 0.25s var(--ease-out-strong) both; }
/* Пункты — та же структура, что на десктопе, но с тонкой обводкой (правка оператора) */
.nav__menu .mega-item {
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  margin-bottom: 6px;
  padding: 11px 13px;
}
.nav__menu .mega-item--flat { padding: 10px 13px; }
.nav__menu .mega-item:last-of-type { margin-bottom: 0; }
.nav__menu .nav__mega-heading { margin: 10px 4px 8px; }
.nav__menu-actions {
  display: flex; gap: 8px;
  margin-top: 6px; padding: 12px 6px 6px;
  border-top: 1px solid var(--color-linen);
}
.nav__menu-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  font: var(--font-weight-bold) 14px/20px var(--font-ui);
  text-decoration: none;
  color: var(--color-parchment);
  background-color: var(--color-charcoal);
  background-image: linear-gradient(to top, #2b2a27 0%, var(--color-charcoal) 100%);
}
@keyframes menu-in {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu.is-open, .nav__mega, .nav__mega-promo { animation: none; }
}

/* Полоса ближайшего события — плавающая внизу (правка оператора 17.08). Была строкой под
   шапкой: наезжала на пилюлю героя и забирала первый экран под анонс. Внизу живёт по тем же
   правилам, что .podpill, и уходит на своём отрезке (data-to) — на главной перед панелью
   Константина, где ровно начинается пилюля подкаста, поэтому внизу они не сталкиваются.
   Вынесена из <header> намеренно: у .nav есть transform, а он создаёт containing block для
   position: fixed — внутри шапки полоса считала бы координаты от неё, а не от вьюпорта. */
.eventbar {
  position: fixed; left: 50%; bottom: 20px; z-index: 45;
  width: calc(var(--page-max-width) - 48px); max-width: calc(100% - 48px);
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: var(--color-space);
  color: var(--color-parchment);
  border-radius: var(--radius-cards);
  font: var(--font-weight-medium) 13px/1.3 var(--font-ui);
  text-decoration: none;
  box-shadow: var(--shadow-on-dark-rest);
  opacity: 0; transform: translate(-50%, 12px);
  transition: opacity 0.26s cubic-bezier(0.19, 1, 0.22, 1), transform 0.26s cubic-bezier(0.19, 1, 0.22, 1);
}
.eventbar.is-in { opacity: 1; transform: translate(-50%, 0); }
.eventbar[hidden] { display: none; }
.eventbar__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); animation: pulse 2s infinite; }
/* Название события длинное и на узком экране разворачивало полосу в 4 строки — держим две
   с многоточием (правка оператора 17.08) */
.eventbar__text {
  min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Вместо ссылки «Смотреть →» — круглая кнопка со стрелкой (правка оператора 17.08),
   по образцу .rslider__btn, но в акценте полосы: золото на тёмном */
.eventbar__go {
  flex: none; margin-left: auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-gold); color: var(--color-space);
  font-size: 17px; line-height: 1;
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.eventbar:hover .eventbar__go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .eventbar { transition: none; opacity: 1; transform: translate(-50%, 0); }
  .eventbar:hover .eventbar__go { transform: none; }
}
@media (max-width: 640px) {
  .eventbar { bottom: 14px; gap: 8px; padding: 8px 10px 8px 12px; font-size: 12.5px; }
  .eventbar__go { width: 30px; height: 30px; font-size: 15px; }
}

/* ---- Баннер cookie: разовое уведомление (юр. пакет требует баннер с кнопкой «Принять»
   на всех страницах — research/old-site-legal-docs/INSTRUCTIONS.md §3.4). Верх-право, под
   шапкой: низ экрана занят .eventbar, а он не маленькая пилюля, а почти на всю ширину
   контента (та же формула, что у .nav) — там баннер гарантированно перекрыл бы его.
   Показ один раз — флаг в localStorage. */
.cookiebar {
  position: fixed; top: 88px; right: 20px; z-index: 55;
  width: min(360px, calc(100vw - 40px));
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px;
  background: var(--color-space);
  color: var(--color-parchment);
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-on-dark-strong);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.26s var(--ease-out-strong), transform 0.26s var(--ease-out-strong);
}
.cookiebar.is-in { opacity: 1; transform: translateY(0); }
.cookiebar[hidden] { display: none; }
.cookiebar__text { font: 400 13.5px/1.5 var(--font-ui); color: rgba(248, 247, 242, 0.82); margin: 0; }
.cookiebar__text a { color: var(--color-gold); }
.cookiebar__actions { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .cookiebar { transition: none; }
}
@media (max-width: 640px) {
  .cookiebar { top: 76px; left: 12px; right: 12px; width: auto; }
}

/* ---- Hero (правки оператора 14.08: prism-фон, центр как у примера, полароиды) ---- */
.hero {
  position: relative;
  min-height: max(92svh, 640px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 150px 24px 96px;
  background: var(--gradient-hero);
  color: var(--text-primary);
  text-align: center;
  border-radius: 0 0 12px 12px; /* rounded-b-xl героя примера */
  overflow: hidden;
}
.hero__prism { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Запасной режим для слабой графики: рендер шейдера остановлен, «жизнь» фона
   даёт композитный дрейф последнего кадра (см. goStatic в prism.js) */
.hero__prism.is-static {
  animation: prism-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes prism-drift {
  0% { transform: scale(1.06) translate3d(-1.2%, 0.6%, 0); }
  100% { transform: scale(1.12) translate3d(1.4%, -0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__prism.is-static { animation: none; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(25, 9, 34, 0.45) 0%, rgba(25, 9, 34, 0) 72%),
    linear-gradient(180deg, rgba(25, 9, 34, 0.3) 0%, rgba(25, 9, 34, 0) 32%, rgba(25, 9, 34, 0) 62%, rgba(25, 9, 34, 0.5) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  max-width: 920px;
}
.hero__overline { margin: 0 0 22px; }
.glass-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pills);
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset,
    rgba(255, 255, 255, 0.05) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;
  font: var(--font-weight-bold) 12.5px/1.3 var(--font-ui);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff;
}
.hero__title {
  font-family: var(--font-ui); /* без засечек, полужирный (правка оператора) */
  font-weight: var(--font-weight-bold);
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 21ch;
  text-wrap: balance;
}
/* Заголовок — LCP-элемент страницы: пока слова скрыты, браузер считает
   первый экран непрорисованным. Поэтому вся волна укладывается в ~0.75 с
   (было 11 слов x 70 мс + 150 мс + 0.7 с = 1.6 с) и стартует без задержки. */
.hero__title .w {
  display: inline-block;
  opacity: 0;
  animation: word-reveal 0.45s var(--ease-out-strong) both;
  animation-delay: calc(var(--wi) * 28ms);
}
.hero__sub {
  font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 58ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* 2xl-скругление героя со всех сторон, как у примера (2xl:rounded-xl + pt-3) */
@media (min-width: 1536px) {
  .hero { margin: 12px 12px 0; border-radius: 12px; }
}

/* ---- Полароиды в свободных зонах hero (драг + клик-увеличение) ---- */
.hero__polaroids { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.polaroid {
  position: absolute; margin: 0;
  width: 196px;
  padding: 8px 8px 42px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(9, 6, 14, 0.28), 0 14px 30px -10px rgba(9, 6, 14, 0.55);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--pr, 0deg));
  cursor: grab;
  pointer-events: auto;
  /* touch-action: auto, а не none (правка оператора 17.08): none отдавал жест карточке —
     палец таскал полароид и не мог пролистать страницу, начав свайп по фото. Перетаскивание
     осталось мышью/пером (их touch-action не касается), на касании — только тап-увеличение. */
  touch-action: auto;
  user-select: none; -webkit-user-select: none;
  transition: box-shadow 0.2s;
}
.polaroid.is-drag {
  cursor: grabbing; z-index: 6;
  box-shadow: 0 2px 4px rgba(9, 6, 14, 0.3), 0 26px 48px -12px rgba(9, 6, 14, 0.65);
}
.polaroid img { width: 100%; height: auto; border-radius: 2px; pointer-events: none; }
.polaroid figcaption {
  position: absolute; left: 8px; right: 8px; bottom: 7px;
  font: var(--font-weight-semibold) 21px/1.15 var(--font-hand);
  color: #3b3a36; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.polaroid[data-pos="l1"] { left: 3.5%; bottom: 156px; }
.polaroid[data-pos="l2"] { left: 13.5%; bottom: 28px; }
.polaroid[data-pos="r1"] { right: 13.5%; bottom: 32px; }
.polaroid[data-pos="r2"] { right: 3.5%; bottom: 160px; }
.polaroid--group { display: none; } /* только мобайл: на десктопе центр занят текстом */

/* Лайтбокс полароида */
.polaroid-lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 9, 24, 0.84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: lb-fade 0.2s both;
}
.polaroid-lightbox[hidden] { display: none; }
.polaroid-big {
  margin: 0;
  width: min(80vw, 540px);
  padding: 14px 14px 18px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 34px 90px -20px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--pr, -2deg));
  animation: lb-pop 0.25s var(--ease-out-strong) both;
}
.polaroid-big img { width: 100%; height: auto; border-radius: 3px; }
.polaroid-big figcaption {
  margin-top: 12px;
  font: var(--font-weight-semibold) 32px/1.15 var(--font-hand);
  color: #3b3a36; text-align: center;
}
@keyframes lb-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lb-pop {
  0% { opacity: 0; transform: scale(0.7) rotate(var(--pr, -2deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--pr, -2deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid-lightbox, .polaroid-big { animation: none; }
}

/* ---- Б2 Узнавание: барабан признаний (правка оператора 16.08) ----
   Было: стопка чипов на орбитах — читалась как список и не держала внимание.
   Стало: секция пиннится на время прокрутки, фразы идут по вертикальному барабану —
   приходят снизу, в центре крупные и резкие, вверху растворяются. Видно сразу несколько
   (механика колеса из iOS-пикера). Живой режим включает js классом .is-live; без js и при
   prefers-reduced-motion работает статичная колонка ниже — она же и базовые стили.
   overflow: hidden с секции снят намеренно: он делает секцию скролл-контейнером и убивает
   position: sticky у .recog__pin. Обрезка теперь на самом пине. */
.sec--recognition { padding-top: 88px; }
.sec--recognition .turn__q { margin-top: clamp(48px, 5vw, 72px); }
.sec__title--center { text-align: center; }
.recog__drum {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 720px; margin: 0 auto;
}
.recog__track, .recog__glow { display: none; }
/* Карточка-опора под колесом (правка оператора 16.08): занимает полосу, которая раньше
   пустовала под барабаном, и закрывает блок ответом — «ты нормальный, это лечится» */
.recog__note {
  width: min(560px, 92vw); margin: 28px auto 0;  /* 92vw — как у карточек барабана, чтобы не липла к краям */
  padding: 22px 28px; border-radius: var(--radius-large-cards);
  text-align: center;
  background-image: var(--gradient-quote-b);
  box-shadow: var(--shadow-border-default);
}
.recog__note-title {
  margin: 0 0 6px; max-width: none;
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25;
  color: var(--text-primary);
}
.recog__note-text {
  margin: 0; max-width: none;
  font-size: clamp(14px, 1.8vw, 16px); line-height: 1.5;
  color: var(--text-secondary);
}

/* Живой режим: пин на высоту прокрутки + 3D-сцена.
   --recog-pin — высота липкого кадра, --recog-run — сколько его прокручивают.
   Кадр не обязан быть во весь экран: на мобайле он ниже вьюпорта, чтобы колесо не тонуло
   в пустых полях сверху и снизу, а следующий блок подглядывал из-под него (правка оператора). */
.recog.is-live {
  --recog-pin: 96svh; --recog-run: 175vh; --recog-headroom: 200px;
  position: relative; height: calc(var(--recog-pin) + var(--recog-run));
}
/* Колонка «сцена + карточка-опора», отступ сверху — под заголовок (он позиционирован
   абсолютно, в потоке места не занимает) */
.recog.is-live .recog__pin {
  position: sticky; top: 0;
  height: var(--recog-pin);
  padding-top: var(--recog-headroom);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2vh, 24px);
  overflow: hidden;
}
.recog.is-live .recog__note { margin: 0; }
/* Заголовок висит у верхней кромки кадра, барабан стоит ровно по центру экрана —
   иначе колонка «заголовок + сцена» смещает колесо вверх и низ кадра пустует */
.recog.is-live .recog__head {
  position: absolute; top: clamp(76px, 13svh, 140px); left: 50%; transform: translateX(-50%);
  z-index: 3;                 /* выше растворяющего градиента сцены: на низких экранах они накладываются */
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.recog.is-live .recog__title { margin: 0; }
.recog.is-live .recog__track {
  display: block; position: relative; overflow: hidden;
  width: min(200px, 38vw); height: 2px; border-radius: 2px;
  background-color: color-mix(in srgb, var(--color-sand) 65%, transparent);
}
.recog__bar {
  position: absolute; inset: 0; display: block;
  background-color: var(--color-indigo);
  transform: scaleX(0); transform-origin: 0 50%;
}
.recog.is-live .recog__stage {
  position: relative; width: 100%; flex: none; height: min(52svh, 460px);
  perspective: 820px; /* ближе камера — сильнее наклон соседних карточек */
}
/* Верх и низ сцены гасим статичными градиентами в цвет страницы — карточка не обрезается
   кромкой, а растворяется. Именно градиенты, не mask-image: маска поверх движущегося слоя
   пересчитывается каждый кадр и роняет fps (§6h INVENTORY). */
.recog.is-live .recog__stage::before,
.recog.is-live .recog__stage::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26%;
  z-index: 2; pointer-events: none;
}
.recog.is-live .recog__stage::before { top: 0; background-image: linear-gradient(180deg, #f8f7f2 14%, rgba(248, 247, 242, 0) 100%); }
.recog.is-live .recog__stage::after { bottom: 0; background-image: linear-gradient(0deg, #f8f7f2 14%, rgba(248, 247, 242, 0) 100%); }
.recog.is-live .recog__glow {
  display: block; position: absolute; left: 50%; top: 50%;
  width: min(760px, 96vw); height: min(400px, 46svh);
  transform: translate(-50%, -50%);
  background-image: radial-gradient(58% 58% at 50% 50%, rgba(58, 52, 128, 0.11) 0%, rgba(58, 52, 128, 0) 72%);
  pointer-events: none;
}
.recog.is-live .recog__drum {
  position: absolute; inset: 0; display: block; max-width: none; margin: 0;
  transform-style: preserve-3d;
}
/* На барабане карточка — не строка списка, а реплика на весь кадр: крупнее текст, больше
   воздуха и портрет. Заодно растёт высота карточки, а с ней и радиус колеса — барабан
   перестаёт теряться в середине пустого экрана. */
.recog.is-live .chip {
  position: absolute; left: 50%; top: 50%;
  width: min(620px, 90vw); max-width: none;
  gap: 16px; padding: 18px 26px 18px 18px;
  animation: none;              /* в живом режиме transform ведёт js, покачивание мешало бы */
  backface-visibility: hidden;
  visibility: hidden;           /* до первого кадра js; он идёт в том же такте, мигания нет */
  will-change: transform, opacity;
}
.recog.is-live .chip blockquote { font-size: clamp(16.5px, 2.1vw, 21px); }
.recog.is-live .chip__avatar { width: 64px; height: 64px; }
.recog.is-live .chip.is-center {
  box-shadow: 0 20px 46px -20px rgba(9, 14, 21, 0.38), var(--shadow-border-default);
}
.chip {
  display: flex; align-items: center; gap: 12px;
  margin: 0; max-width: 480px;
  background: var(--color-paper);
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-default);
  padding: 12px 18px 12px 12px;
  animation: float 7s ease-in-out var(--fd, 0s) infinite;
}
.chip blockquote {
  margin: 0;
  font-family: var(--font-ui); /* без засечек (правка оператора) */
  font-weight: var(--font-weight-medium);
  font-size: clamp(15px, 1.9vw, 17.5px);
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: var(--text-primary);
}
.chip__avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background-size: cover; background-position: 50% 32%;
  box-shadow: 0 0 0 2px var(--color-paper), 0 2px 6px rgba(9,14,21,.18);
}
/* Портреты участников — нарезка из design/image/avatars.jpg (AI-профили, не реальные лица) */
.chip__avatar--a { background-image: url("../img/av-1.webp"); }
.chip__avatar--b { background-image: url("../img/av-2.webp"); }
.chip__avatar--c { background-image: url("../img/av-3.webp"); }
.chip__avatar--d { background-image: url("../img/av-4.webp"); }
.chip__avatar--e { background-image: url("../img/av-5.webp"); }
.chip__avatar--f { background-image: url("../img/av-6.webp"); }
.chip__avatar--g { background-image: url("../img/av-7.webp"); }
.chip__avatar--gold { background-image: url("../img/av-quote.webp"); }

/* ---- Переворот: кейс-панель по референсу passionfroot ----
   Заголовок серифом над панелью → широкая панель с мягким диагональным градиентом,
   внутри: текст, ряд счётчиков и белая карточка-цитата (у примера — карточка твита). */
.turn__q {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
  /* заголовок панели — первый элемент секции, вертикаль задаёт паддинг секции;
     отдельный отступ нужен только внутри «Знакомо?», где панель идёт после орбит */
  margin: 0;
  max-width: 20ch;
  color: var(--text-primary);
  text-wrap: balance;
}
.turn-panel {
  margin-top: 32px;
  display: grid; grid-template-columns: 1fr minmax(320px, 0.78fr);
  gap: clamp(22px, 3.4vw, 44px);
  align-items: center;
  border-radius: var(--radius-special);
  padding: clamp(24px, 3.4vw, 44px);
  /* адаптация розово-лавандового градиента примера в нашу палитру: индиго-дымка → золотой крем */
  background-image: linear-gradient(128deg, #E9E5F5 0%, #EFEAF3 34%, #F5EDE4 68%, #F7EFE2 100%);
  box-shadow: var(--shadow-border-subtle);
}
.turn-panel__text p { font-size: 16.5px; line-height: 1.6; max-width: 52ch; }
/* Панели-персоны — тот же каркас, свой градиент у каждой (правка оператора) */
.turn-panel--stance {
  /* холодная сторона канона: космос-индиго → пергамент */
  background-image: linear-gradient(128deg, #DCDCEC 0%, #E6E4F0 38%, #EFEDF0 70%, #F5F2EC 100%);
}
.turn-panel--olga {
  /* тёплая: золото → персиковый крем */
  background-image: linear-gradient(128deg, #F2E3C8 0%, #F5E7D3 36%, #F6E9DF 68%, #F3E6EC 100%);
}
.turn-panel--stance .link-arrow, .turn-panel--olga .link-arrow { color: var(--color-indigo); }

/* Панель-персона: фото слева (десктоп) / сверху (мобайл), пункты в обводках */
.person {
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}
.person__media { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.person__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-strong);
}
.person__media figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.person__name { font: var(--font-weight-medium) 20px/1.25 var(--font-display); color: var(--text-primary); }
.person__role { font: 400 13.5px/1.45 var(--font-ui); color: var(--text-secondary); }
.person__media .link-arrow { margin-top: 4px; font-size: 14px; }
/* кнопка не должна липнуть к строке роли (правка оператора) */
.person__btn { align-self: flex-start; margin-top: 10px; }
.person__body p { font-size: 16.5px; line-height: 1.6; max-width: 52ch; }

.rules { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rule {
  padding: 14px 18px;
  border: 1px solid rgba(29, 29, 28, 0.14);
  border-radius: var(--radius-cards);
  background: rgba(255, 255, 255, 0.42);
  font-size: 15.5px; line-height: 1.5;
  max-width: none;
}
.rule b { display: block; margin-bottom: 2px; }
ol.rules { counter-reset: rule; }
ol.rules .rule { position: relative; padding-left: 52px; counter-increment: rule; }
ol.rules .rule::before {
  content: counter(rule);
  position: absolute; left: 16px; top: 13px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-indigo); color: var(--color-parchment);
  font: var(--font-weight-bold) 12px/1 var(--font-ui);
}

/* Цитата ученика — во всю ширину панели, отделена хайрлайном */
.person__quote {
  grid-column: 1 / -1;
  margin: 4px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(29, 29, 28, 0.14);
  display: flex; gap: 14px; align-items: flex-start;
}
.person__quote-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--color-paper), 0 2px 6px rgba(9, 14, 21, 0.16);
}
.person__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.45;
  color: var(--text-primary);
}
.person__quote figcaption {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px;
  font: 400 13px/1.4 var(--font-ui); color: var(--text-muted);
}
.person__quote figcaption .ico { color: var(--color-indigo); }

/* Карточка-персона внутри панели */
.qcard--person { gap: 16px; }
.qcard__avatar--lg { width: 64px; height: 64px; border-radius: 16px; }
.qcard__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.qcard__facts li {
  position: relative; padding-left: 20px;
  font: 400 15px/1.45 var(--font-ui); color: var(--text-secondary);
}
.qcard__facts li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-gold);
}
.qcard__link {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  font: var(--font-weight-semibold) 14px/1.3 var(--font-ui);
  color: var(--color-indigo); text-decoration: none;
}
.qcard__link:hover { color: var(--color-indigo-hover); text-decoration: underline; }
.qcard--person figcaption + .qcard__link { border-top: 0; padding-top: 0; margin-top: 2px; }
/* тот же переход, но кнопкой (правка оператора 16.08): прижата к низу карточки */
.qcard__btn { margin-top: auto; align-self: flex-start; }

/* Счётчики */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
}
.stat { min-width: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--text-primary);
}
.stat__label {
  margin: 6px 0 0;
  font: var(--font-weight-semibold) 12px/1.4 var(--font-ui);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
}
.stat__label a { color: var(--color-indigo); text-decoration: none; border-bottom: 1px solid currentColor; }
.stat__label a:hover { color: var(--color-indigo-hover); }

/* Карточка-цитата внутри панели (у примера — карточка твита: аватар, имя с галочкой,
   значок площадки в углу, текст, подпись-источник) */
.qcard {
  margin: 0;
  background: var(--color-paper);
  border-radius: var(--radius-large-cards);
  padding: clamp(20px, 2.4vw, 26px);
  box-shadow: var(--shadow-border-default);
  display: flex; flex-direction: column; gap: 14px;
}
.qcard { position: relative; }
.qcard__head { display: flex; align-items: center; gap: 12px; padding-right: 26px; }
.qcard__avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--color-paper), 0 2px 6px rgba(9, 14, 21, 0.16);
}
.qcard__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qcard__name {
  display: block;
  font: var(--font-weight-bold) 15px/1.3 var(--font-ui);
  color: var(--text-primary);
}
/* inline, а не flex-item: при переносе имени галочка идёт следом за словом, а не уезжает вбок */
.ico--verified {
  display: inline-block; vertical-align: -3px; margin-left: 5px;
  width: 16px; height: 16px; color: var(--color-indigo); stroke-width: 1.6;
}
.qcard__meta { font: 400 13px/1.35 var(--font-ui); color: var(--text-muted); }
.ico--mark {
  position: absolute; top: clamp(20px, 2.4vw, 26px); right: clamp(20px, 2.4vw, 26px);
  width: 22px; height: 22px; color: var(--color-sand); stroke-width: 1.6;
}
.qcard blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.45;
  color: var(--text-primary);
}
.qcard figcaption {
  display: flex; align-items: center; gap: 7px;
  padding-top: 12px; border-top: 1px solid var(--border-hairline);
  font: 400 13px/1.4 var(--font-ui); color: var(--text-muted);
}
.qcard figcaption .ico { width: 15px; height: 15px; color: var(--color-indigo); }
/* Отдельно стоящие цитаты (мост Б5, FAQ) — прежний градиентный вариант */
.qcard--a { background: var(--gradient-quote-a); }
.qcard--b { background: var(--gradient-quote-b); }
.qcard--c { background: var(--gradient-quote-c); }
.qcard--a blockquote, .qcard--b blockquote, .qcard--c blockquote { font-style: italic; }
.qcard--center { text-align: center; align-items: center; }
.qcard .chip__avatar { width: 44px; height: 44px; }

/* ---- Цитаты ---- */
.pullquote { margin: 56px 0 0; }
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45;
  color: var(--text-primary);
}
.pullquote blockquote::before {
  content: "«";
  display: block;
  font-size: 2.2em; line-height: 0.6;
  color: var(--color-gold);
  margin-bottom: 10px; font-style: normal;
}
.pullquote blockquote { quotes: none; }
.pullquote figcaption { margin-top: 14px; font: 400 14px/1.4 var(--font-ui); color: var(--text-muted); }
.pullquote--center { text-align: center; margin: 0; }
.pullquote--center blockquote::before { margin-left: auto; margin-right: auto; }
.pullquote__ocr { opacity: 0.8; }
.sec--bridge { padding: 56px 0; }
.microquote { margin: 28px 0; padding: 0; }
.microquote blockquote {
  margin: 0; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--text-secondary);
}
.microquote figcaption { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.microquote--closing { margin-top: 48px; text-align: center; }

/* Правила отстройки внутри панели Б3 (сплиты убраны вместе с Б10 — правка оператора 14.08) */
.stance-rules { margin: 8px 0 24px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.stance-rules li { line-height: 1.55; max-width: 58ch; }

/* ---- Б4 Живой опыт: карточки отзывов (образец — кейс-карусель passionfroot) ----
   Верх карточки — что за формат и тема, ниже арка «было → стало», внизу подпись
   и ссылка на оригинал в открытом канале. Градиенты — из палитры бренда, по кругу. */
/* Карусель: карточки в одну линию с snap-прокруткой, стрелки под лентой (как у примера) */
.rslider { position: relative; margin: 8px auto 40px; }
.rslider__track {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 8px;
}
.rslider__track::-webkit-scrollbar { display: none; }
.rslider__track > .rcard {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}
.rslider__nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.rslider__btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--color-paper); color: var(--text-primary);
  box-shadow: var(--shadow-border-default);
  cursor: pointer;
  transition: var(--transition-colors), opacity 0.2s;
}
.rslider__btn:hover:not(:disabled) { background: var(--color-parchment); }
.rslider__btn:disabled { opacity: 0.35; cursor: default; }
.rslider__all {
  margin-left: 8px;
  font: var(--font-weight-semibold) 14px/1.3 var(--font-ui);
  color: var(--color-indigo); text-decoration: none;
}
.rslider__all:hover { text-decoration: underline; }

.rcard {
  margin: 0; padding: 24px 24px 20px;
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-subtle);
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
/* Десять пастельных переливов — как радужный ряд карточек у примера, но в нашей гамме */
.rcard--t0 { background-image: linear-gradient(145deg, #E7E1F6 0%, #F0EAF4 52%, #F9F1E6 100%); }
.rcard--t1 { background-image: linear-gradient(145deg, #F6E4C6 0%, #F9EEDC 52%, #F3E7F0 100%); }
.rcard--t2 { background-image: linear-gradient(145deg, #D8E6F5 0%, #E8F0F8 52%, #F7F0E8 100%); }
.rcard--t3 { background-image: linear-gradient(145deg, #F5DFE8 0%, #FAECF1 52%, #F8F2E6 100%); }
.rcard--t4 { background-image: linear-gradient(145deg, #D9EDE2 0%, #EAF4EE 52%, #F8F1E5 100%); }
.rcard--t5 { background-image: linear-gradient(145deg, #E2DFF4 0%, #EDEBF7 52%, #FAEDE4 100%); }
.rcard--t6 { background-image: linear-gradient(145deg, #FBE6D8 0%, #FCF0E6 52%, #F1ECF7 100%); }
.rcard--t7 { background-image: linear-gradient(145deg, #DDEBEC 0%, #ECF4F4 52%, #F9EFE8 100%); }
.rcard--t8 { background-image: linear-gradient(145deg, #EFE5D2 0%, #F7F0E2 52%, #EDEAF6 100%); }
.rcard--t9 { background-image: linear-gradient(145deg, #F0DFF0 0%, #F7ECF6 52%, #F6F1E4 100%); }
.rcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rcard__product {
  font: var(--font-weight-bold) 11px/1.3 var(--font-ui);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-secondary);
}
.rcard__theme {
  padding: 3px 9px; border-radius: var(--radius-pills);
  background: rgba(255, 255, 255, 0.62);
  font: var(--font-weight-semibold) 11px/1.4 var(--font-ui);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-indigo);
}
.rcard__before, .rcard__extra {
  margin: 0; max-width: none;
  font: 400 14px/1.5 var(--font-ui); font-style: italic;
  color: var(--text-muted);
}
.rcard__before::after { content: " →"; font-style: normal; color: var(--color-gold); }
.rcard__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.45;
  color: var(--text-primary);
}
.rcard__foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid rgba(29, 29, 28, 0.1);
  display: flex; align-items: center; gap: 10px;
}
/* Аноним вместо портрета: отзывы публикуются без имён и лиц */
.anon {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-indigo);
  box-shadow: 0 0 0 1px rgba(58, 52, 128, 0.14) inset;
}
.anon .ico { width: 21px; height: 21px; stroke-width: 1.5; }
.anon--md { width: 46px; height: 46px; }
.anon--md .ico { width: 25px; height: 25px; }
.anon--lg { width: 48px; height: 48px; background: var(--color-linen); }
.anon--lg .ico { width: 26px; height: 26px; }
.rcard__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcard__sign { font: var(--font-weight-semibold) 13px/1.35 var(--font-ui); color: var(--text-secondary); }
.rcard__src {
  display: inline-flex; align-items: center; gap: 5px;
  font: 400 12.5px/1.35 var(--font-ui); color: var(--color-indigo); text-decoration: none;
}
.rcard__src:hover { text-decoration: underline; }

.marquee { margin: 8px 0 40px; }
.marquee__item {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-width: 320px; max-width: 420px;
  background: var(--color-paper);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-border-default);
  padding: 18px 20px;
}
.marquee__text { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.45; }
.marquee__sign { font-size: 12px; color: var(--text-muted); }
.video-slot {
  display: flex; align-items: center; gap: 16px;
  background: var(--color-linen);
  border-radius: var(--radius-large-cards);
  padding: 24px 28px;
  max-width: 640px;
}
.video-slot__mark {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-space); color: var(--color-gold);
  font-size: 16px;
}
.video-slot p { margin: 0; color: var(--text-secondary); font-size: 15px; }

/* ---- Страница /reviews: шапка-сцена, пилюли-хештеги, сетка ---- */
.rhead {
  position: relative;
  padding: 148px 0 72px;
  background: var(--gradient-hero);
  color: var(--color-parchment);
  border-radius: 0 0 12px 12px;
}
.rhead .hero__overline { margin-bottom: 20px; }
/* Анимированный фон шапки /reviews — порт PrismaticBurst (React Bits), см. prismatic-burst.js.
   mix-blend-mode: lighten — из ТЗ: тёмные пиксели канваса пропускают градиент шапки. */
.rhead--burst { overflow: hidden; }
.rhead__burst {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  mix-blend-mode: lighten;
  pointer-events: none;
}
/* запасной режим для слабой графики: рендер остановлен, «жизнь» даёт композитный дрейф */
.rhead__burst.is-static {
  animation: prism-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .rhead__burst.is-static { animation: none; }
}
.rhead__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.12; letter-spacing: var(--tracking-display-lg);
  margin: 0 0 16px; max-width: 18ch;
  text-wrap: balance;
}
.rhead__sub {
  font-size: clamp(15px, 2vw, 18px); line-height: 1.6;
  color: rgba(248, 247, 242, 0.78); max-width: 62ch; margin: 0;
}
.sec--reviews { padding-top: 24px; }

/* Панель фильтров по логике iOS: липкая, на «материале» (полупрозрачность + blur),
   сегментированный переключатель со скользящим ползунком, лента чипов со snap-прокруткой.
   Два ряда фильтров на мобиле съедали пол-экрана — здесь на виду одна ось, вторая в один тап. */
.filterbar {
  /* Без прилипания (правка оператора 16.08): панель едет со страницей.
     Вместе с sticky ушли «материал» и blur — они работали на просвечивающий
     контент под липкой панелью, а на месте это просто расход GPU. */
  position: relative; z-index: 40;
  padding: 12px 0 10px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
}
.filterbar__inner { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.segmented {
  position: relative; align-self: flex-start;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--color-sand) 34%, transparent);
  border-radius: 10px;
}
.segmented__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 4px);
  border-radius: 8px; background: var(--color-paper);
  box-shadow: 0 1px 3px rgba(9, 14, 21, 0.14);
  /* сегменты равной ширины (как в UISegmentedControl) — двигаем только transform */
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.segmented__item {
  position: relative; z-index: 1;
  padding: 7px 16px; border: 0; border-radius: 8px; background: none;
  font: var(--font-weight-semibold) 13.5px/1.2 var(--font-ui);
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s;
}
.segmented__item.is-active { color: var(--text-primary); }
.chiprow {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin: 0 -24px; padding: 2px 24px 4px;
}
.chiprow::-webkit-scrollbar { display: none; }
.chip-f {
  flex: none; scroll-snap-align: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-pills);
  background: var(--color-paper); color: var(--text-secondary);
  font: var(--font-weight-semibold) 13.5px/1.2 var(--font-ui);
  white-space: nowrap; cursor: pointer;
  transition: var(--transition-colors), transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);
}
.chip-f:hover { background: var(--color-parchment); color: var(--text-primary); }
.chip-f:active { transform: scale(0.94); }
.chip-f.is-active {
  background: var(--color-indigo); border-color: var(--color-indigo); color: var(--color-parchment);
}
.ico--hash { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0.75; }
.chip-f__count { font-weight: var(--font-weight-regular); font-size: 12px; opacity: 0.65; }
.filter-reset {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px; border: 0; background: none; cursor: pointer;
  font: var(--font-weight-semibold) 13px/1.2 var(--font-ui);
  color: var(--color-indigo);
}
.filter-reset .ico { width: 14px; height: 14px; }
.filter-reset:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .segmented__thumb { transition: none; }
  .chip-f:active { transform: none; }
}
.rcount { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; }
.rgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.rgrid .rcard__quote { font-size: clamp(15.5px, 1.6vw, 17.5px); }
.cta-row--center { justify-content: center; }

/* ---- Б4a Клуб: сцена с фото + панель поверх (образец «Meet Zest», live-extract §6) ---- */
.sec--club { padding-top: 24px; }
.clubscene {
  position: relative;
  padding: clamp(28px, 4vw, 56px) 0 0;
  border-radius: var(--radius-special);
  overflow: hidden;
  isolation: isolate;
}
.clubscene__bg { position: absolute; inset: 0; z-index: -1; }
.clubscene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
/* скрим: заголовок читается на верхней трети (контраст ≥ 4.5:1) */
.clubscene__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 9, 24, 0.74) 0%, rgba(16, 9, 24, 0.5) 34%, rgba(16, 9, 24, 0.24) 60%, rgba(16, 9, 24, 0.12) 100%);
}
.clubscene__kicker {
  position: relative; margin: 0 0 12px;
  padding: 0 clamp(20px, 3.4vw, 44px);
  font: var(--font-weight-bold) 12px/1.3 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold);
}
.clubscene__title {
  position: relative; margin: 0 0 clamp(28px, 4vw, 52px);
  padding: 0 clamp(20px, 3.4vw, 44px);
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12; letter-spacing: var(--tracking-display-lg);
  color: var(--color-parchment);
  text-shadow: 0 2px 18px rgba(9, 6, 14, 0.5);
}
.clubpanel {
  position: relative;
  margin: 0 clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--color-parchment);
  border-radius: var(--radius-special);
  box-shadow: var(--shadow-border-strong);
}
.clubpanel__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
.clubpanel__h {
  margin: 0 0 18px;
  font: var(--font-weight-bold) 12px/1.3 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.clubfacts__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.clubfact { display: flex; gap: 12px; align-items: flex-start; }
.clubfact .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--color-indigo); stroke-width: 1.8; }
.clubfact span { font: 400 14.5px/1.5 var(--font-ui); color: var(--text-secondary); max-width: 46ch; }
.clubfact b {
  display: block; margin-bottom: 2px;
  font: var(--font-weight-bold) 15.5px/1.35 var(--font-ui); color: var(--text-primary);
}

/* Расписание: строки бегут вверх, у краёв растворяются маской */
.clubsched {
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--color-paper);
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-default);
}
/* Растворение краёв — двумя статичными градиентами, а НЕ mask-image: маска поверх
   движущегося слоя пересчитывается каждый кадр (замер: 23 fps против 60 на Intel UHD). */
.clubsched__viewport { position: relative; height: 268px; overflow: hidden; }
.clubsched__viewport::before,
.clubsched__viewport::after {
  content: \; position: absolute; left: 0; right: 0; height: 42px; z-index: 1; pointer-events: none;
}
.clubsched__viewport::before { top: 0; background: linear-gradient(180deg, var(--color-paper) 0%, rgba(255,255,255,0) 100%); }
.clubsched__viewport::after { bottom: 0; background: linear-gradient(0deg, var(--color-paper) 0%, rgba(255,255,255,0) 100%); }
.clubsched__viewport:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 4px; border-radius: 8px; }
.clubsched__track { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.schedrow {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  background: var(--color-parchment);
}
.schedrow__when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.schedrow__date { font: var(--font-weight-bold) 13.5px/1.3 var(--font-ui); color: var(--text-primary); }
.schedrow__time { display: inline-flex; align-items: center; gap: 5px; font: 400 12.5px/1.3 var(--font-ui); color: var(--color-indigo); }
.schedrow__time .ico { width: 13px; height: 13px; }
.schedrow__theme { font: 400 14px/1.45 var(--font-ui); color: var(--text-secondary); }
.clubsched__note { margin: 14px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); }

/* Короткие отзывы клуба: равная высота, пастельные фоны */
.clubvoices { margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--border-hairline); }
.clubvoices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.voice {
  margin: 0; padding: 20px;
  border-radius: var(--radius-cards);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 168px;
}
.voice--t0 { background: #EFEAF7; }
.voice--t1 { background: #F8EEDF; }
.voice--t2 { background: #E6EFF7; }
.voice--t3 { background: #F7E9EF; }
.voice--t4 { background: #E7F2EA; }
.voice--t5 { background: #F3EEE4; }
.voice__text {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: 15.5px; line-height: 1.45;
  color: var(--text-primary);
}
.voice__foot { display: flex; align-items: center; gap: 9px; }
.anon--sm { width: 30px; height: 30px; background: rgba(255,255,255,0.7); }
.anon--sm .ico { width: 17px; height: 17px; }
.voice__sign { flex: 1; font: var(--font-weight-semibold) 12.5px/1.35 var(--font-ui); color: var(--text-secondary); }
.voice__src { display: inline-flex; color: var(--color-indigo); }
.voice__src .ico { width: 16px; height: 16px; }

/* Страница клуба: расписание выше, сетка отзывов на всю ширину */
.clubsched--page { max-width: 780px; }
.clubsched__viewport--tall { height: 380px; }
.clubvoices__grid--page { margin-bottom: 8px; }
/* в блоке цен правая карточка тянется на высоту левой колонки (правка оператора) */
.sec--club-price .turn-panel,
.sec--o-price .turn-panel { align-items: stretch; }
.sec--club-price .qcard,
.sec--o-price .qcard { height: 100%; }

.sec--club-what, .sec--club-sched, .sec--club-price, .sec--club-voices,
.sec--club-signs, .sec--club-layers, .sec--club-thursday, .sec--club-word { padding-top: 80px; }
/* заголовок секции на внутренних страницах сам держит отступ до контента:
   на главной эту роль играл margin-top панели, здесь под ним идёт обычный блок */
.sec--club-what > .wrap > .turn__q,
.sec--club-sched > .wrap > .turn__q,
.sec--club-price > .wrap > .turn__q,
.sec--club-voices > .wrap > .turn__q,
.sec--club-signs > .wrap > .turn__q,
.sec--club-layers > .wrap > .turn__q,
.sec--club-thursday > .wrap > .turn__q,
.sec--club-faq > .wrap > .turn__q { margin-bottom: clamp(18px, 2vw, 26px); }

/* ---- Плавающая пилюля подкаста (образец «Watch the trailer» passionfroot) ---- */
.podpill {
  position: fixed; left: 50%; bottom: 20px; z-index: 45;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 6px 6px 6px;
  background: var(--color-paper);
  border-radius: 10px; /* как у миниатюры внутри (правка оператора) */
  box-shadow: 0 1px 2px rgba(9, 14, 21, 0.08), 0 12px 28px -8px rgba(9, 14, 21, 0.28);
  opacity: 0; transform: translate(-50%, 12px);
  transition: opacity 0.26s cubic-bezier(0.19, 1, 0.22, 1), transform 0.26s cubic-bezier(0.19, 1, 0.22, 1);
}
.podpill.is-in { opacity: 1; transform: translate(-50%, 0); }
/* На кнопки под собой пилюля не реагирует (правка оператора 17.08): ни растворения, ни
   подъёма — и то и другое читалось как прыжки, кнопок по пути слишком много. Появляется
   на своём отрезке, едет с кромкой, уходит. Перекрытие принято осознанно. */
.podpill[hidden] { display: none; }
/* внутри пилюли — без своей подложки и рамки: она сама и есть контейнер */
.podpill__link {
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
  text-decoration: none; color: var(--text-primary);
}
.podpill__thumb {
  width: 68px; height: 46px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(9, 14, 21, 0.06);
}
.podpill__text { font: var(--font-weight-bold) 14.5px/1.25 var(--font-ui); white-space: nowrap; text-align: left; }
.podpill__close {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; margin-right: 2px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-colors);
}
.podpill__close:hover { background: var(--color-parchment); color: var(--text-primary); }
.podpill__close .ico { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .podpill { transition: none; opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
  /* на узком экране — не во всю ширину и выше нижнего края, чтобы не спорить с CTA */
  .podpill { left: 50%; right: auto; bottom: 14px; padding: 5px; border-radius: 8px; }
  .podpill__thumb { width: 54px; height: 38px; border-radius: 8px; }
  /* «Подкаст с Константином» в одну строку упирается в край экрана — переносим по словам */
  .podpill__text { font-size: 13px; white-space: normal; text-align: left; max-width: 150px; }
}

/* ---- Страница /club: hero-сцена, узнавание, три слоя состояния, шаги четверга ---- */
.rhead--club { position: relative; overflow: hidden; }
.clubhead__bg { position: absolute; inset: 0; z-index: 0; }
.clubhead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.clubhead__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 9, 24, 0.82) 0%, rgba(16, 9, 24, 0.66) 46%, rgba(16, 9, 24, 0.78) 100%);
}
.rhead--club > .wrap { position: relative; z-index: 1; }
.rhead__note { margin: 16px 0 0; font: 400 13.5px/1.4 var(--font-ui); color: rgba(248, 247, 242, 0.62); }

/* ---- Узнавание (creed): поток признаний вместо сетки карточек (правка оператора 16.08) ----
   Крупная серифная строка, волосяная линия между репликами, слева точка-маркер.
   Читается как чужой внутренний монолог: в фокусе экрана строки на полном контрасте,
   выше и ниже — приглушены. Подсветку ставит initCreed() в site.js. */
/* мера строки: 820px при кегле 27px — это ~50–55 знаков, читается без частых переносов */
.creed { list-style: none; margin: 0; padding: 0; max-width: min(100%, 820px); }
.creed__line {
  display: grid; grid-template-columns: 10px minmax(0, 1fr);
  align-items: baseline; gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(16px, 2.2vw, 26px) 0;
  border-top: 1px solid var(--border-hairline);
}
.creed__line:first-child { border-top: 0; padding-top: 4px; }
.creed__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-sand);
  transform: translateY(-5px);
  transition: background 0.45s var(--ease-out-quint), box-shadow 0.45s var(--ease-out-quint);
}
.creed__text {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(19px, 2.4vw, 27px); line-height: 1.35; letter-spacing: -0.013em;
  color: var(--text-primary); text-wrap: pretty;
  opacity: 0.38;
  transition: opacity 0.5s var(--ease-out-quint);
}
.creed__line.is-on .creed__text { opacity: 1; }
.creed__line.is-on .creed__dot {
  background: var(--color-indigo);
  box-shadow: 0 0 0 6px rgba(58, 52, 128, 0.1);
}
.creed__line:hover .creed__text { opacity: 0.86; }
.creed__line.is-on:hover .creed__text { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .creed__text { opacity: 1; transition: none; }
  .creed__dot { transition: none; }
}

/* Три слоя смены состояния */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.layer {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-subtle);
}
.layer--body { background-image: linear-gradient(150deg, #E7E1F6 0%, #F0EAF4 54%, #F9F1E6 100%); }
.layer--mind { background-image: linear-gradient(150deg, #D8E6F5 0%, #E8F0F8 54%, #F7F0E8 100%); }
.layer--people { background-image: linear-gradient(150deg, #F6E4C6 0%, #F9EEDC 54%, #F3E7F0 100%); }
.layer__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-indigo);
}
.layer__mark .ico { width: 20px; height: 20px; }
.layer__title {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2;
  color: var(--text-primary);
}
.layer p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); max-width: none; }
.layer__quote {
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px solid rgba(29, 29, 28, 0.1);
  display: flex; gap: 10px; align-items: flex-start;
}
.layer__quote blockquote {
  margin: 0;
  font-family: var(--font-display); font-size: 15px; line-height: 1.45;
  color: var(--text-primary);
}
.layer__quote figcaption { margin-top: 6px; font: 400 12.5px/1.4 var(--font-ui); color: var(--text-muted); }
.layers__pros {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 20px 0 0; padding: 18px 22px;
  background: var(--color-linen);
  border-radius: var(--radius-cards);
  font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); max-width: none;
}
.layers__pros .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--color-gold); }

/* Шаги четверга */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.step {
  position: relative; counter-increment: step;
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: baseline;
  padding: 16px 20px 16px 56px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  background: var(--color-paper);
}
.step::before {
  content: counter(step);
  position: absolute; left: 18px; top: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-indigo); color: var(--color-parchment);
  font: var(--font-weight-bold) 12px/1 var(--font-ui);
}
.step__when { font: var(--font-weight-bold) 15px/1.35 var(--font-ui); color: var(--text-primary); }
.step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); max-width: none; }

@media (max-width: 900px) {
  .layers { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- «Как проходит» (flow) — сменил табличные .steps на странице клуба и у Ольги ----
   Приём с apple.com: слева липкий счётчик с прогрессом, справа крупные карточки шагов;
   в фокусе всегда один шаг, пройденные приглушены слабее, будущие — сильнее.
   Стоимость кадра: переключение класса на скролле + одна высота заливки, без анимаций
   геометрии (правило §6c INVENTORY: дорого не движение, а эффекты поверх). */
.flow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.flow__aside { position: sticky; top: 112px; align-self: start; display: grid; gap: 16px; }
.flow__counter { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.flow__cur {
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(40px, 5vw, 56px); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.flow__total { font: 400 15px/1 var(--font-ui); color: var(--text-muted); }
.flow__rail { position: relative; width: 2px; height: 132px; border-radius: 2px; background: var(--border-hairline); overflow: hidden; }
.flow__fill {
  position: absolute; left: 0; top: 0; display: block;
  width: 100%; height: var(--p, 16%);
  background: var(--color-indigo);
  transition: height 0.5s var(--ease-out-quint);
}
.flow__hint { margin: 0; font: 400 14px/1.55 var(--font-ui); color: var(--text-muted); max-width: 26ch; }

.flow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); }
.flow__item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 34px);
  border-radius: var(--radius-large-cards);
  background: var(--color-paper);
  box-shadow: var(--shadow-border-subtle);
  opacity: 0.5;
  transition: opacity 0.45s var(--ease-out-quint), box-shadow 0.45s var(--ease-out-quint);
}
.flow__item.is-done { opacity: 0.72; }
.flow__item.is-on { opacity: 1; box-shadow: var(--shadow-border-strong); }
.flow__num {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--color-sand);
  transition: color 0.45s var(--ease-out-quint);
}
.flow__item.is-on .flow__num { color: var(--color-indigo); }
/* заголовок и текст живут во второй колонке (номер — в первой): без этого описание
   падало в узкую колонку под номером и вставало в столбик по слову */
.flow__title, .flow__text { grid-column: 2; }
.flow__title {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.013em;
  color: var(--text-primary);
}
.flow__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 56ch; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 18px; }
  /* счётчик уезжает наверх и становится горизонтальной полосой прогресса */
  .flow__aside { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
  .flow__rail { width: 100%; height: 2px; }
  .flow__fill { height: 100%; width: var(--p, 16%); transition: width 0.5s var(--ease-out-quint); }
  .flow__hint { grid-column: 1 / -1; max-width: none; }
  /* Шаги листаются свайпом: снап по карточкам, соседние выглядывают из-за кромки экрана.
     Отрицательные поля выводят ленту за паддинг .wrap, скролл-паддинг возвращает его внутрь. */
  .flow__list {
    flex-direction: row; flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -24px;
    padding: 4px 24px 10px;
  }
  .flow__list::-webkit-scrollbar { display: none; }
  .flow__item {
    flex: 0 0 86%;
    scroll-snap-align: center;
    /* номер и заголовок в одну строку, описание — во всю ширину карточки:
       в узкой колонке рядом с номером текст рвался на четыре строки */
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    opacity: 0.5;
  }
  .flow__title { grid-column: 2; align-self: center; }
  .flow__text { grid-column: 1 / -1; }
  .flow__num { align-self: center; }
  .flow__item.is-done { opacity: 0.5; }
  .flow__item.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__item { opacity: 1; transition: none; }
  .flow__fill, .flow__num { transition: none; }
}

/* Обращение Константина на странице клуба: портрет + текст от первого лица */
.word {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-special);
  background-image: linear-gradient(128deg, #DCDCEC 0%, #E6E4F0 38%, #EFEDF0 70%, #F5F2EC 100%);
}
.word__media { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.word__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-strong);
}
.word__media figcaption { display: flex; flex-direction: column; gap: 4px; }
.word__body p { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); max-width: 54ch; }
.word__body p:last-child { margin-bottom: 0; }
.word__lead {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35;
  color: var(--text-primary);
}
@media (max-width: 900px) {
  .word { grid-template-columns: 1fr; }
  .word__media { max-width: 320px; }
  .word__media img { aspect-ratio: 4 / 3; }
}

/* ---- Б5 /club: орбиты вокруг четверга + акцентная выноска ----
   Приём с главной («Знакомо?»), но композиция другая: в центре — ядро с временем практики,
   вокруг по кольцам чипы с дословными репликами, справа снизу тёплая выноска с ценой. */
.sec--club-orbit { padding-top: 80px; }
.orbit {
  position: relative;
  min-height: 560px;
  padding: 24px 0;
  display: grid; place-items: center;
}
.orbit__rings { position: absolute; inset: 0; pointer-events: none; }
.orbit__rings i {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--color-sand) 60%, transparent);
  border-radius: 50%;
}
.orbit__rings i:nth-child(1) { width: 330px; height: 330px; }
.orbit__rings i:nth-child(2) { width: 560px; height: 560px; }

.orbit__core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 168px; height: 168px; border-radius: 50%;
  background: var(--color-space);
  color: var(--color-parchment);
  box-shadow: 0 18px 40px -14px rgba(9, 6, 14, 0.55);
}
.orbit__core-day {
  font: var(--font-weight-bold) 11px/1.3 var(--font-ui);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-gold);
}
.orbit__core-time { font-family: var(--font-display); font-size: 34px; line-height: 1.1; }
.orbit__core-note { font: 400 12.5px/1.3 var(--font-ui); color: rgba(248, 247, 242, 0.7); }

.orbit__items { list-style: none; margin: 0; padding: 0; }
.orbit__item {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  max-width: 260px; padding: 9px 15px 9px 9px;
  background: var(--color-paper);
  border-radius: var(--radius-pills);
  box-shadow: var(--shadow-border-default);
  font: var(--font-weight-medium) 14px/1.35 var(--font-ui);
  color: var(--text-primary);
}
.orbit__ava { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
/* координаты подобраны по кольцам, а не тригонометрией: предсказуемо на всех ширинах */
.orbit__item[style*="--o:1"] { top: 4%; left: 50%; transform: translateX(-58%); }
.orbit__item[style*="--o:2"] { top: 26%; right: 2%; }
.orbit__item[style*="--o:3"] { bottom: 46%; right: 0; }
.orbit__item[style*="--o:4"] { bottom: 4%; left: 42%; transform: translateX(-46%); }
.orbit__item[style*="--o:5"] { bottom: 28%; left: 0; }
.orbit__item[style*="--o:6"] { top: 24%; left: 1%; }

/* Тёплая выноска — акцент страницы */
.callout {
  position: absolute; z-index: 4; right: 2%; bottom: 0;
  width: 260px; padding: 20px 22px;
  border-radius: var(--radius-large-cards);
  background-image: linear-gradient(150deg, #2A1608 0%, #7A4A1C 44%, #A9743A 74%, #E5C089 132%);
  color: var(--color-parchment);
  box-shadow: 0 18px 38px -14px rgba(42, 22, 8, 0.55);
}
.callout__lead {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 22px; line-height: 1.2;
}
.callout__text { margin: 0 0 14px; font: 400 13.5px/1.5 var(--font-ui); color: rgba(248, 247, 242, 0.86); max-width: none; }
.callout__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--font-weight-bold) 14px/1.3 var(--font-ui);
  color: #fff; text-decoration: none;
}
.callout__cta:hover { text-decoration: underline; }



/* Ниже 1100px орбита разворачивается в список: на планшете чипы сходились к ядру и выноске */
@media (max-width: 1099.98px) {
  /* ядро сверху, реплики колонкой */
  .orbit { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0; }
  .orbit__rings { display: none; }
  .orbit__items { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .orbit__item,
  .orbit__item[style*="--o:1"],
  .orbit__item[style*="--o:2"],
  .orbit__item[style*="--o:3"],
  .orbit__item[style*="--o:4"],
  .orbit__item[style*="--o:5"],
  .orbit__item[style*="--o:6"] {
    position: static; transform: none; max-width: none; border-radius: var(--radius-cards);
  }
  .callout { position: static; width: auto; max-width: 460px; margin: 14px auto 0; }
}

/* Hero страницы клуба: анимированные волны вместо фото, контент по центру */
.waves { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--gradient-hero); }
.waves__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.waves::after {
  content: \; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,9,24,0.46) 0%, rgba(16,9,24,0.18) 40%, rgba(16,9,24,0.5) 100%);
}
.rhead--center { text-align: center; }
.rhead--center > .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.rhead--center .rhead__title { max-width: 20ch; }
.rhead--center .rhead__sub { max-width: 60ch; }
.rhead--center .cta-row { justify-content: center; }

/* Панель расписания внутри сцены — по центру, уже основной.
   У самой сцены горизонтального паддинга нет (её кикер и заголовок держат отступ сами),
   поэтому панель обязана держать свои поля: на узком экране 860px её уже не сдерживают,
   и она прилипала к краям тёмной карточки (правка оператора 17.08). Шаг отступа — тот же
   clamp, которым сцена отбивает текст от края. */
.clubsched--scene {
  position: relative;
  max-width: min(860px, 100% - 2 * clamp(20px, 3.4vw, 44px));
  margin: 0 auto clamp(20px, 2.6vw, 34px);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-special); /* как у фонового блока сцены */
}
.clubscene--rosa .clubscene__title,
.clubscene--rosa .clubscene__kicker { text-align: center; max-width: none; padding-left: 0; padding-right: 0; }
.clubscene--rosa { text-align: center; }
.clubscene--rosa .clubsched { text-align: left; }
.clubscene--rosa .clubsched .btn { margin-top: 16px; }

/* Лайтбокс видео (пилюля с data-video) */
.vidbox {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 24px;
  background: rgba(16, 9, 24, 0.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: lb-fade 0.2s both;
}
.vidbox__inner { position: relative; width: min(92vw, 900px); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.vidbox__video {
  width: 100%; height: auto; max-height: 72vh;
  border-radius: var(--radius-large-cards);
  background: #000;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
}
.vidbox__close {
  position: absolute; top: -44px; right: 0;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: var(--color-parchment);
}
.vidbox__close:hover { background: rgba(255, 255, 255, 0.2); }

@media (prefers-reduced-motion: reduce) { .vidbox { animation: none; } }
@media (max-width: 640px) {
  .vidbox { padding: 16px; }
  .vidbox__close { top: -40px; }
}

/* ---- Б5 События ---- */
/* Тарифы клуба: строка = название + цена + пересчёт, первый месяц выделен */
/* Блок цен: две карточки справа стеком, кнопка левой колонки прижата к низу —
   иначе на десктопе колонки заканчиваются на разной высоте */
.qcards-stack { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.sec--club-price .turn-panel__text,
.sec--o-price .turn-panel__text { display: flex; flex-direction: column; }
.sec--club-price .turn-panel__text > .btn,
.sec--o-price .turn-panel__text > .btn { margin-top: auto; align-self: flex-start; }
/* кнопки живут внутри панели и стоят вровень с левым краем тарифов (правка оператора 16.08):
   раньше «Служба заботы» висела отдельной строкой под фоновым блоком */
.cta-row--panel { margin-top: auto; gap: 10px; }
.sec--club-price .rules,
.sec--o-price .rules { margin-bottom: 22px; }
.qcard__note {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  font: 400 13.5px/1.5 var(--font-ui); color: var(--text-muted); max-width: none;
}

.tariffs { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tariff {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 14px;
  padding: 13px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards);
  background: rgba(255, 255, 255, 0.5);
}
.tariff--first { background: var(--color-paper); box-shadow: var(--shadow-border-default); border-color: transparent; }
.tariff__name { font: var(--font-weight-semibold) 15px/1.35 var(--font-ui); color: var(--text-primary); }
.tariff__price { font-family: var(--font-display); font-size: 21px; line-height: 1.1; color: var(--text-primary); }
.tariff--first .tariff__price { color: var(--color-indigo); }
.tariff__note { grid-column: 1 / -1; font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); }
.qcard__lead { margin: 0; font: 400 15px/1.5 var(--font-ui); color: var(--text-secondary); max-width: none; }
.sec--club-faq { padding-top: 80px; }

.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.event-card {
  background: var(--color-paper); border-radius: var(--radius-cards);
  box-shadow: var(--shadow-border-default); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--text-primary);
}
.event-card__date { font: var(--font-weight-semibold) 13px/1.3 var(--font-ui); color: var(--color-indigo); }
.event-card__title { font-family: var(--font-display); font-size: 20px; margin: 0; }
.event-card__meta { font-size: 13px; color: var(--text-muted); }

/* ---- Б6 Метод: блок «Ты не тело» (ТЗ research/tz-block-ty-ne-telo.md) ----
   Заголовок и лид остаются обычным контентом, под ними — скролл-пин сцена на частицах:
   ЯВИЖУ → ЯЧУВСТВУЮ → ЯУПРАВЛЯЮ. Прогресс сцены = прокрутка секции, свайп — нативный
   скролл (никаких touch-обработчиков). Внизу блока — кнопка «Метод». */
.sec--method { background: var(--color-space); color: var(--color-parchment); }
.sec--method .sec__title { color: var(--color-parchment); }
.sec--method .sec__lede { color: rgba(248, 247, 242, 0.72); }
.sec--method .cta-row { margin-top: clamp(28px, 5vw, 48px); justify-content: center; }
.sec--method .btn--outline { background: transparent; color: var(--color-parchment); box-shadow: 0 0 0 1px rgba(248,247,242,0.3) inset; }
.sec--method .btn--outline:hover { background: rgba(255,255,255,0.08); }

/* Пока скрипт не сказал «живу» — сцены нет и виден текстовый эквивалент: без JS
   и без WebGL2 блок остаётся осмысленным, а не пустой дырой на 4 экрана. */
.tnt { display: none; position: relative; height: 420vh; }
.tnt.is-live, .tnt.is-static { display: block; }
.tnt.is-static { height: auto; }
.tnt.is-static .tnt__pin { display: none; }
.tnt__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh; /* адресная строка мобильных: dvh, с запасным vh */
  overflow: hidden;
  background: radial-gradient(58% 42% at 50% 52%, rgba(58, 52, 128, 0.28) 0%, rgba(25, 9, 34, 0) 72%);
}
/* Мобайл: ролик во весь экран (кадр 9:16, по бокам срезается несколько процентов) —
   пилюля и финал должны лежать на видео, а не на пустом фоне рядом с ним.
   Десктоп — ниже в медиазапросе: вертикальная карточка со скруглёнными углами. */
.tnt__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: transparent;
}
/* Сверху и снизу короткий градиент в цвет фона: ролик растворяется в секции без
   жёсткой кромки, заодно под текстом появляется подложка. */
.tnt__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--color-space) 0%, rgba(25, 9, 34, 0.60) 7%, rgba(25, 9, 34, 0) 17%),
    linear-gradient(0deg, var(--color-space) 0%, rgba(25, 9, 34, 0.64) 8%, rgba(25, 9, 34, 0) 22%);
}
/* Название ступени — пилюля на чёрном. Три названия лежат в одной ячейке грида:
   ширина берётся по самому длинному («ЯЧУВСТВУЮ»), поэтому на смене ступени
   пилюля не прыгает, меняется только текст. */
.tnt__stage {
  position: absolute; top: clamp(16px, 6vh, 60px); left: 50%; transform: translateX(-50%);
  margin: 0; max-width: none;
  display: inline-grid; place-items: center;
  padding: clamp(9px, 1.5vh, 15px) clamp(22px, 3.2vw, 36px);
  border-radius: var(--radius-pills);
  background: #000;
  font: var(--font-weight-bold) clamp(21px, 4vw, 38px)/1.1 var(--font-ui);
  letter-spacing: 0.10em;
  color: var(--color-parchment);
  transition: opacity 0.16s linear;
}
.tnt__stage-item {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s linear, letter-spacing 0.5s var(--ease-out-quint);
}
.tnt__stage-item.is-on { opacity: 1; visibility: visible; }
.tnt__stage.is-out .tnt__stage-item.is-on { opacity: 0; letter-spacing: 0.24em; }
/* Появление ступени — вспышка искр вокруг пилюли. Искры нарисованы радиальными
   градиентами в одном псевдослое: разлёт даёт scale, гаснут по opacity — анимируются
   только композитные свойства, лишних узлов в DOM нет. */
.tnt__stage::before,
.tnt__stage::after {
  content: ""; position: absolute; inset: -70% -26%;
  pointer-events: none; opacity: 0;
  background-repeat: no-repeat;
}
.tnt__stage::before {
  background-image:
    radial-gradient(circle, #fff 0 1.4px, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle, #fff 0 1.1px, rgba(255,255,255,0) 2px),
    radial-gradient(circle, #fff 0 1.6px, rgba(255,255,255,0) 2.6px),
    radial-gradient(circle, #fff 0 1.2px, rgba(255,255,255,0) 2.1px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255,255,255,0) 2.5px),
    radial-gradient(circle, #fff 0 1.1px, rgba(255,255,255,0) 2px);
  background-position: 12% 30%, 27% 74%, 44% 18%, 63% 82%, 79% 26%, 92% 66%;
}
.tnt__stage::after {
  background-image:
    radial-gradient(circle, var(--color-gold) 0 1.7px, rgba(201,168,106,0) 3px),
    radial-gradient(circle, var(--color-gold) 0 1.2px, rgba(201,168,106,0) 2.2px),
    radial-gradient(circle, var(--color-gold) 0 1.9px, rgba(201,168,106,0) 3.2px),
    radial-gradient(circle, var(--color-gold) 0 1.3px, rgba(201,168,106,0) 2.4px),
    radial-gradient(circle, var(--color-gold) 0 1.6px, rgba(201,168,106,0) 2.8px);
  background-position: 6% 62%, 34% 22%, 55% 88%, 71% 14%, 96% 44%;
}
.tnt__stage.is-in::before { animation: tnt-spark 0.72s var(--ease-out-quint) both; }
.tnt__stage.is-in::after { animation: tnt-spark 0.86s var(--ease-out-quint) 0.05s both; }
.tnt__stage.is-in .tnt__stage-item.is-on { animation: tnt-stage-in 0.5s var(--ease-out-quint) both; }
@keyframes tnt-spark {
  0% { opacity: 0; transform: scale(0.42); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.32); }
}
@keyframes tnt-stage-in {
  0% { opacity: 0; letter-spacing: 0.30em; filter: blur(3px); }
  100% { opacity: 1; letter-spacing: 0.10em; filter: blur(0); }
}
/* Финал — карточка «жидкое стекло» поверх кадра: цитата и кнопка на самом ярком
   кадре ролика читаются только на подложке. Стекло собрано по канону проекта
   (--glass-white / --glass-ring / --glass-blur), затемнение добавлено под текст. */
.tnt__outro {
  position: absolute; left: 50%; bottom: 6%;
  width: min(92%, 560px);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(22px, 3.2vh, 32px) clamp(20px, 4vw, 34px) clamp(24px, 3.4vh, 34px);
  border-radius: var(--radius-special);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%), rgba(9, 6, 14, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 0 0 1px var(--glass-ring) inset,
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 26px 60px -28px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, 16px); opacity: 0; text-align: center;
  transition: opacity 0.5s var(--ease-out-quint), transform 0.5s var(--ease-out-quint);
  visibility: hidden;
}
.tnt__outro.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
/* Без backdrop-filter (старые браузеры) стекло вырождается в плотную подложку */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tnt__outro { background: rgba(12, 8, 20, 0.86); }
}
.tnt__quote {
  margin: 0; max-width: none;
  font-family: var(--font-display); font-size: clamp(16.5px, 2.2vw, 23px); line-height: 1.4;
  color: var(--color-parchment); text-wrap: balance;
}
.tnt__author {
  margin: 10px 0 0; max-width: none;
  font: 400 12.5px/1.4 var(--font-ui); letter-spacing: 0.02em;
  color: rgba(248, 247, 242, 0.62);
}
/* Кнопка: крупная, стеклянная, надпись капсом */
.tnt__cta.btn {
  margin-top: clamp(18px, 2.6vh, 28px);
  padding: 17px 44px;
  font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-parchment);
  /* blur от .btn--glass здесь гасим: кнопка лежит на уже размытой карточке, второй
     backdrop-filter — лишний композитный слой поверх играющего кадра. Стекло держат
     полупрозрачная заливка и кольцо. */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(248, 247, 242, 0.42) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.9);
}
.tnt__cta.btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Дубль кнопки под блоком нужен только в статичном режиме */
.tnt.is-live ~ .tnt-cta-fallback,
.tnt.is-pending ~ .tnt-cta-fallback { display: none; }
@media (min-width: 901px) {
  /* Десктоп: ролик — вертикальная карточка по высоте экрана со скруглёнными углами */
  .tnt__video {
    inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: auto; height: 100%; aspect-ratio: 9 / 16;
    border-radius: clamp(18px, 2vw, 28px);
  }
  /* Финал держим в габаритах карточки: цитата шире кадра вылезала бы на фон,
     а по задаче она лежит на видео. Ширина карточки = 9/16 высоты пина. */
  .tnt__outro {
    width: min(86vw, calc(56.25vh - 56px));
    width: min(86vw, calc(56.25dvh - 56px));
  }
  .tnt__quote { font-size: clamp(17px, 1.7vw, 23px); }
  /* Растворение краёв в фон — мобильный приём: на десктопе оно съело бы скругления
     карточки. Здесь отбивка ровно настолько, чтобы читались пилюля и финал. */
  .tnt__scrim {
    background:
      linear-gradient(180deg, rgba(25, 9, 34, 0.5) 0%, rgba(25, 9, 34, 0) 13%),
      linear-gradient(0deg, rgba(25, 9, 34, 0.58) 0%, rgba(25, 9, 34, 0) 26%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tnt__stage, .tnt__stage-item, .tnt__outro { transition: none; }
  .tnt__stage.is-in::before, .tnt__stage.is-in::after,
  .tnt__stage.is-in .tnt__stage-item.is-on { animation: none; }
}

/* Текстовый эквивалент: он же фолбэк без JS / WebGL2 / при reduced-motion */
.tnt-static__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.tnt-frame { margin: 0; }
.tnt-frame__art {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(248, 247, 242, 0.14); border-radius: var(--radius-large-cards);
  background: rgba(9, 6, 14, 0.6);
}
/* Пока сцена жива (или ещё решает, жить ли ей) кадры не нужны глазу — и не должны грузиться:
   display:none отменяет ленивую загрузку картинок, подписи при этом остаются в дереве
   доступности. Без JS класса нет — кадры видны и работают как основная версия блока. */
.tnt.is-live ~ .tnt-static .tnt-frame__art,
.tnt.is-pending ~ .tnt-static .tnt-frame__art { display: none; }
.tnt-frame h3 {
  margin: 18px 0 8px;
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(20px, 2.6vw, 28px); letter-spacing: 0.08em; color: var(--color-parchment);
}
.tnt-frame p { margin: 0; font: 400 14.5px/1.55 var(--font-ui); color: rgba(248, 247, 242, 0.72); }
/* Живая сцена — статичный эквивалент прячем от глаз, но оставляем скринридерам */
.tnt.is-live ~ .tnt-static {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
  .tnt-static__grid { grid-template-columns: 1fr; gap: 32px; }
  .tnt-frame__art { max-width: 320px; }
}

/* ---- Б7 Двери ---- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-paper);
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-default);
  padding: 28px;
  text-decoration: none; color: var(--text-primary);
  transition: var(--transition-lift);
}
.door:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.door__title {
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.3; margin: 0;
}
.door__echo { margin: 0; color: var(--text-secondary); font-size: 15px; max-width: 44ch; }
.door__route { margin: 6px 0 0; font-size: 13px; color: var(--color-indigo); font-weight: var(--font-weight-semibold); }

/* ---- Б8 Люди ---- */
.sec--people { background: var(--color-linen); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gcard {
  background: var(--color-paper); border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-default); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.gcard--lead { grid-column: 1 / -1; }
.gcard__before { font-size: 14px; color: var(--text-muted); font-style: italic; margin: 0; }
.gcard__before::after { content: " →"; color: var(--color-gold); font-style: normal; }
.gcard__quote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4;
}
.gcard--lead .gcard__quote { font-size: clamp(22px, 3vw, 30px); }
.gcard__tail { margin: 0; font-style: italic; color: var(--text-secondary); font-size: 15px; }
.gcard__sign { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---- Б9 Лестница — светлые карточки с живым фоном (правка оператора 16.08, светлая палитра — правка 17.08) ----
   Фон рисует один канвас под сеткой (assets/js/ladder-fx.js), у каждой карточки свой эффект.
   Пока (или если) канвас не поднялся, работает статичный градиент карточки — .ladder.is-live
   снимает его, когда контекст WebGL создан. Отсюда правило: любой новый .lstep обязан иметь
   и data-fx (для канваса), и класс .lstep--<эффект> (для фолбэка). */
.ladder { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ladder__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ladder__fx canvas { display: block; width: 100%; height: 100%; }
.lstep {
  position: relative; z-index: 1; isolation: isolate;
  display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius-large-cards);
  padding: 24px 22px;
  overflow: hidden;
  text-decoration: none; color: var(--color-ink);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-border-default);
  transition: box-shadow 0.25s var(--ease-out-soft);
}
.lstep:hover { box-shadow: var(--shadow-border-strong); }
/* Статичные градиенты-фолбэки: те же роли, что у эффектов канваса (палитра светлая — правка 17.08,
   тёмный низ-скрим и text-shadow сняты вместе с ней — тёмный текст на светлом фоне не нуждается
   в подстраховке контраста, которая была нужна белому тексту) */
.lstep--molten  { background-image: linear-gradient(150deg, #FBF3E4 0%, #F1DDB0 46%, #F6EBD9 74%, #FBF3E4 132%); }
.lstep--scanner { background-image: linear-gradient(165deg, #EAF1FA 0%, #D8E6F5 55%, #E9E5F5 120%); }
.lstep--liquid  { background-image: radial-gradient(120% 90% at 25% 25%, #EAE8F4 0%, rgba(234, 232, 244, 0) 60%),
                                    radial-gradient(90% 70% at 80% 75%, #D3CDEA 0%, rgba(211, 205, 234, 0) 65%),
                                    linear-gradient(180deg, #F8F7F2 0%, #F1EEF7 100%); }
.lstep--bends   { background-image: linear-gradient(150deg, #DCDCEC 0%, #E4DEF2 46%, #E9E5F5 72%, #F7EFE2 130%); }
.lstep--aurora  { background-image: radial-gradient(90% 180% at 30% 110%, #EAE8F4 0%, rgba(234, 232, 244, 0) 65%),
                                    linear-gradient(180deg, #F8F7F2 0%, #EDEAE4 100%); }
.ladder.is-live .lstep { background-color: transparent; background-image: none; }
.lstep__kicker { margin: 0; font: var(--font-weight-semibold) 12px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-indigo); }
.lstep__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--color-ink); }
.lstep__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
/* Список ценностей карточки (правка оператора 17.08: было одно предложение — стало по пунктам) */
.lstep__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lstep__points li { position: relative; margin: 0; padding-left: 13px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.lstep__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-indigo); }
.lstep__points strong { font-weight: var(--font-weight-semibold); color: var(--color-ink); }
/* Точечный акцент-факт: не у каждой карточки — только там, где есть сильное сравнение/цифра */
.lstep__stat {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 11px 6px 9px;
  border-radius: var(--radius-pills);
  background: var(--color-indigo-mist); color: var(--color-indigo);
  font: var(--font-weight-semibold) 12.5px/1.3 var(--font-ui);
}
.lstep__stat .ico { width: 13px; height: 13px; flex: none; }
.lstep__price { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(27px, 2.4vw, 33px); color: var(--color-ink); }
.lstep__price span { display: block; font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); margin-top: 4px; }
/* Ссылка-стрелка стала кнопкой (правка оператора 16.08). Без backdrop-filter — см. выше. */
.lstep__btn {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-buttons);
  font: var(--font-weight-bold) 14px/1.2 var(--font-ui);
  color: var(--action-text);
  background-color: var(--action-bg);
  transition: background-color 0.2s var(--ease-out-soft), box-shadow 0.2s var(--ease-out-soft);
}
.lstep__btn .ico { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out-soft); }
.lstep:hover .lstep__btn { background-color: var(--action-bg-hover); }
.lstep:hover .lstep__btn .ico { transform: translateX(3px); }
.lstep--door { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
.lstep--door .lstep__title { font-size: 24px; }
.lstep--door .lstep__desc { flex: 1; min-width: 240px; font-size: 15px; }
.lstep--door .lstep__btn { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .lstep, .lstep__btn, .lstep__btn .ico { transition: none; }
  .lstep:hover .lstep__btn .ico { transform: none; }
}


/* ---- Б11 FAQ: белая панель, вопросы серифом (live-приём) ---- */
.sec--faq .qcard { margin: 24px 0 40px; }
/* Десктоп — два столбца по образцу passionfroot (скрин оператора 16.08): слева заголовок
   и живая цитата, справа панель с вопросами. Ниже 900px порядок остаётся вертикальным. */
@media (min-width: 901px) {
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    /* вторая строка тянется: иначе высота панели справа делится между строками
       и цитата слева отрывается от заголовка */
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .faq-layout > .sec__title,
  .faq-layout > .turn__q { grid-column: 1; grid-row: 1; margin: 0; max-width: 16ch; }
  .faq-layout > .qcard { grid-column: 1; grid-row: 2; margin: 28px 0 0; }
  .faq-layout > .faq-panel { grid-column: 2; grid-row: 1 / span 2; }
  .faq-layout > .microquote--closing { grid-column: 1 / -1; grid-row: 3; margin-top: 44px; }
}
.faq-panel {
  background: var(--color-paper);
  border-radius: var(--radius-special);
  padding: clamp(10px, 2.5vw, 28px) clamp(18px, 3vw, 36px);
  box-shadow: var(--shadow-border-default);
}
.faq__item { border-bottom: 1px solid var(--border-hairline); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: 0; cursor: pointer;
  padding: 20px 6px;
  border-radius: var(--radius-cards);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 20px); font-weight: var(--font-weight-medium);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--text-primary); text-align: left;
}
/* Ни подсветки, ни смены цвета при наведении и нажатии (правка оператора 16.08):
   меняется только положение знака «+» → «×». */
.faq__q::after {
  content: "+";
  flex: none;
  font: 300 24px/1 var(--font-display);
  color: var(--color-ash);
  transition: transform 0.25s var(--ease-out-quint);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding: 0 6px; }
.faq__a p { margin: 0 0 22px; color: var(--text-secondary); max-width: 64ch; font-size: 15.5px; }

/* ---- Б12 Финал ---- */
.sec--final {
  padding: 96px 0 80px; color: var(--color-parchment);
  background: var(--color-night-blue); /* ровная заливка вместо градиента (правка оператора 16.08) */
  border-radius: var(--radius-special) var(--radius-special) 0 0; /* слоение «бумага на сцене» */
}
.final__intro { font-size: 17px; line-height: 1.6; color: rgba(248, 247, 242, 0.78); max-width: 58ch; }
.final__q {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.25; letter-spacing: -0.013em;
  margin: 28px 0 40px;
  color: var(--color-parchment);
  text-wrap: balance;
}
.final__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.final__note { margin: 18px auto 0; max-width: 52ch; font: 400 14px/1.55 var(--font-ui); color: rgba(248,247,242,0.62); }
.final__channel { margin-top: 48px; font-size: 14px; color: rgba(248, 247, 242, 0.6); }
.final__channel a { color: var(--color-gold); }

/* ---- Футер-сцена (live-приём: атмосферное фото под плотным скримом) ---- */
.footer {
  position: relative;
  background: var(--color-night-blue);
  color: var(--color-parchment);
  padding: 88px 0 36px;
  overflow: hidden;
}
/* Фото футера — как есть, без затемнения и скрима (правка оператора 16.08).
   Кадр ночной сам по себе, поэтому светлый текст читается без подложки.
   Привязка по верхнему краю: верх кадра (ночное небо) не обрезается, режется низ. */
/* Кадр подгружается на подходе к футеру, а не вместе с первым экраном:
   в CSS он висел безусловным url() и уезжал в сеть параллельно со шрифтами
   (103 КБ на подвал, которого пользователь ещё не видел). Теперь адрес живёт
   в переменной, а класс is-art вешает наблюдатель из site.js. Без JS кадра
   не будет — подвал и так читается на --color-night-blue. */
.footer::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--footer-art, none) center top / cover no-repeat;
}
.footer.is-art::before { --footer-art: url("../img/footer-scene-3@1024.webp"); }
@media (min-width: 1100px) {
  .footer.is-art::before { --footer-art: url("../img/footer-scene-3@1920.webp"); }
}
.footer > .wrap { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer__brand { font: var(--font-weight-bold) 15px/1.4 var(--font-ui); margin: 0 0 10px; }
.footer__tagline { font-size: 14px; color: rgba(248, 247, 242, 0.65); max-width: 30ch; margin: 0 0 18px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__title { font: var(--font-weight-bold) 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(248, 247, 242, 0.5); margin: 0 0 12px; }
.footer__title--docs { margin-top: 24px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__list a { font-size: 14px; color: rgba(248, 247, 242, 0.78); text-decoration: none; transition: color 0.15s; }
.footer__list a:hover { color: #fff; text-decoration: underline; }
.footer__list li { font-size: 14px; color: rgba(248, 247, 242, 0.78); }
.footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(248, 247, 242, 0.14);
  display: flex; flex-direction: column; gap: 8px;
}
.footer__bottom p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(248, 247, 242, 0.55); max-width: none; }

/* ---- Адаптив ---- */
/* Пилюли с 7 пунктами не помещаются < 1100px — переключение на мобильную полосу
   (у примера lg=1024; сдвиг на 1100 — осознанное отступление под наш объём меню) */
@media (max-width: 1099.98px) {
  .nav { top: 8px; max-width: calc(100% - 16px); }
  .nav__row { display: none; }
  .nav__mobile { display: block; }
  .polaroid { width: 168px; padding-bottom: 38px; }
  .polaroid figcaption { font-size: 19px; }
  .polaroid[data-pos="l1"] { left: 2.5%; bottom: 104px; }
  .polaroid[data-pos="l2"] { left: 9%; bottom: 20px; }
  .polaroid[data-pos="r1"] { right: 9%; bottom: 24px; }
  .polaroid[data-pos="r2"] { right: 2.5%; bottom: 108px; }
}
@media (max-width: 1024px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sec { padding: 28px 0; }
  .turn__q { max-width: none; }
  .turn-panel, .person { grid-template-columns: 1fr; }
  .person__media { max-width: 320px; }
  .person__media img { aspect-ratio: 4 / 3; }
  /* Портрет 3:4 в кадре 4:3 теряет ~44% высоты. По центру срезало голову Константина
     (правка оператора 16.08) — привязываем кадр к верху. У Ольги снимок квадратный
     и лицо в центре, ей центрирование подходит, поэтому правило точечное. */
  .sec--stance .person__media img { object-position: 50% 0; }
  .rslider__track > .rcard { flex-basis: calc((100% - 16px) / 2); }
  .person__btn { align-self: flex-start; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clubpanel__grid { grid-template-columns: 1fr; }
  .clubvoices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .events-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { min-height: max(88svh, 560px); padding-top: 116px; padding-bottom: 24px; }
  /* Полароиды из absolute уходят в свою зону под CTA: групповой сверху по центру,
     остальные плотной стопкой внахлёст (компоновка по скрину оператора 16.08).
     Зона шире контента на боковые padding героя — крайние кадры уходят за край экрана,
     как на скрине; лишнее срезает overflow:hidden самого героя. */
  .hero__polaroids {
    position: relative; inset: auto;
    width: calc(100% + 48px); max-width: none; margin: 24px -24px 0;
    height: 330px;
  }
  .polaroid, .polaroid[data-pos] { width: 128px; padding-bottom: 28px; left: auto; right: auto; top: auto; bottom: auto; }
  .polaroid figcaption { font-size: 12.5px; letter-spacing: -0.02em; } /* «Прогулка в Питере» — самая длинная */
  /* селектор с атрибутом — иначе .polaroid[data-pos] выше по специфичности и сбрасывает left */
  .polaroid[data-pos="c0"] { display: block; width: 186px; padding-bottom: 34px; left: 50%; top: 0; margin-left: -93px; z-index: 4; }
  .polaroid[data-pos="c0"] figcaption { font-size: 13.5px; }
  .polaroid[data-pos="l1"] { left: 4%; top: 88px; }
  .polaroid[data-pos="l2"] { left: 68%; top: 78px; }
  .polaroid[data-pos="r1"] { left: 12%; top: 164px; }
  .polaroid[data-pos="r2"] { left: 45%; top: 190px; }
  .ladder { grid-template-columns: 1fr; }
  /* мобайл: карточка почти во всю ширину, следующая выглядывает — намёк на прокрутку */
  .rslider__track > .rcard { flex-basis: 86%; }
  .rgrid { grid-template-columns: 1fr; }
  .rhead { padding: 128px 0 56px; }
  .clubvoices__grid { grid-template-columns: 1fr; }
  .clubscene__title { max-width: none; }
  .clubsched__viewport { height: 232px; }
  .clubsched__viewport--tall { height: 264px; }
  .voice { min-height: 0; }
  .person__media { max-width: none; }
  .person__btn { align-self: flex-start; }
  .lstep--door { flex-direction: column; align-items: flex-start; gap: 8px; }
  .marquee__item { min-width: 260px; }
  .chip { max-width: 92%; padding: 10px 14px 10px 10px; }
  .chip__avatar { width: 48px; height: 48px; }
  /* Барабан на мобайле: липкий кадр ниже экрана — колесо не тонет в пустых полях, а снизу
     видно, что страница продолжается. Ход короче: пальцем прокручивать дольше, чем колесом. */
  .recog.is-live { --recog-run: 95vh; --recog-pin: 86svh; --recog-headroom: 124px; }
  .recog.is-live .chip { max-width: none; width: 92vw; gap: 12px; padding: 14px 18px 14px 14px; }
  .recog.is-live .chip__avatar { width: 52px; height: 52px; }
  /* 60px — ниже мобильной шапки (top 8 + высота 44), иначе пилюли накрывают заголовок */
  .recog.is-live .recog__head { top: 60px; gap: 12px; }
  .recog.is-live .recog__stage { height: min(46svh, 380px); }
  .recog__note { padding: 18px 20px; }
  .recog.is-live .recog__glow { height: 40svh; }
  .cta-row .btn, .final__cta .btn, .hero__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ============================================================
   Страница /olga — те же блоки библиотеки (BLOCKS.md), своя цветовая ветка.
   Правило оператора: система, типографика и сетка не меняются — меняются только
   цвета градиентных заливок (кнопки, панели, карточки). Всё под .page-olga,
   чтобы ничего не протекло на главную и /club.
   ============================================================ */

/* Ритм секций — как на /club */
.sec--o-signs, .sec--o-word, .sec--o-layers, .sec--o-steps,
.sec--o-practice, .sec--o-price, .sec--o-voices, .sec--o-blog { padding-top: 80px; }
.sec--o-signs > .wrap > .turn__q,
.sec--o-layers > .wrap > .turn__q,
.sec--o-steps > .wrap > .turn__q,
.sec--o-practice > .wrap > .turn__q,
.sec--o-price > .wrap > .turn__q,
.sec--o-voices > .wrap > .turn__q,
.sec--o-blog > .wrap > .turn__q,
.sec--o-faq > .wrap > .turn__q { margin-bottom: clamp(18px, 2vw, 26px); }

/* Кнопки: сливово-розовая заливка вместо чернильной. На тёмных секциях
   (hero, финал) остаётся системная светлая кнопка — возвращаем её явно,
   иначе правило ниже по файлу перебило бы [data-theme="space"]. */
.page-olga .btn--primary {
  background-color: var(--color-olga-plum);
  background-image: var(--gradient-olga-action);
  color: var(--color-parchment);
}
.page-olga .btn--primary:hover { background-image: var(--gradient-olga-action-hover); }
.page-olga [data-theme="space"] .btn--primary {
  background-color: var(--color-paper);
  background-image: none;
  color: var(--color-ink);
}
.page-olga [data-theme="space"] .btn--primary:hover { background-color: var(--color-parchment); }
.page-olga .nav--solid .nav__cta {
  background-color: var(--color-olga-plum);
  background-image: var(--gradient-olga-action);
}
.page-olga .nav--solid .nav__cta:hover { background-image: var(--gradient-olga-action-hover); }
.page-olga .link-arrow,
.page-olga .qcard__link { color: var(--color-olga-plum); }
/* в её футере три колонки вместо четырёх — иначе остаётся пустой трек.
   Только на десктопе: ниже 900px работает общее правило «две колонки». */
@media (min-width: 901px) {
  .page-olga .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
}
.page-olga .qcard__facts li::before { background: var(--color-olga-rose); }
/* Промо в мега-меню остаются тёмными (текст на них светлый) — меняется только гамма:
   вместо индиго и золота сливовое и розовое (правка оператора 16.08). */
.page-olga .nav__mega-promo--session {
  background-image: linear-gradient(150deg, #1B0F19 0%, #4B2C3D 46%, #7C4353 74%, #C89AA0 132%);
}
.page-olga .nav__mega-promo--practice {
  background-image: linear-gradient(150deg, #241320 0%, #63343F 44%, #A96A72 74%, #E7C6C2 132%);
}
.page-olga .nav__mega-promo--session .mega-promo__kicker { color: #E7C6C2; }
.page-olga .nav__mega-promo--practice .mega-promo__kicker { color: #F1D8D4; }

/* Панели и цитаты в её палитре */
.page-olga .turn-panel--olga { background-image: var(--gradient-olga-panel); }
.page-olga .creed__line.is-on .creed__dot {
  background: var(--color-olga-plum);
  box-shadow: 0 0 0 6px rgba(169, 106, 114, 0.16);
}
.page-olga .step::before { background: var(--color-olga-rose); }
.page-olga .rule b { color: var(--color-olga-plum); }
.page-olga .voice { background-image: var(--gradient-olga-quote); }
.page-olga .flow__fill { background-image: var(--gradient-olga-action); background-color: var(--color-olga-plum); }
.page-olga .flow__item.is-on .flow__num { color: var(--color-olga-plum); }

/* Обращение Ольги и афиша практики: тот же блок «word», её градиент;
   у практики колонки меняются местами — афиша уходит вправо, текст читается первым */
.word--olga { background-image: var(--gradient-olga-panel); }
.word--flip { grid-template-columns: minmax(0, 1fr) 340px; }
.word--flip .word__media { order: 2; }
.word__media--poster img { aspect-ratio: 4 / 5; }
/* афиша едет вместе со скроллом до конца блока (правка оператора 16.08):
   текстовая колонка длиннее, поэтому постер прилипает и отпускается на её последнем экране */
@media (min-width: 901px) {
  .word--flip .word__media { position: sticky; top: 112px; align-self: start; }
}

/* Три опоры: та же карточка-слой, тёплая гамма вместо холодной */
.layer--o-body { background-image: linear-gradient(150deg, #F3E4E6 0%, #F6EBE4 54%, #FAF3EA 100%); }
.layer--o-under { background-image: linear-gradient(150deg, #EDE1EA 0%, #F4E9EA 54%, #F9F1E9 100%); }
.layer--o-door { background-image: linear-gradient(150deg, #F6E9DC 0%, #F7EFE6 54%, #F1E4EA 100%); }

/* Превью блога: картинка + текст, карточка целиком — ссылка в канал */
.blognotes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.blognote {
  display: flex; flex-direction: column;
  border-radius: var(--radius-large-cards);
  background: var(--color-paper);
  box-shadow: var(--shadow-border-subtle);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.2s var(--ease-out-quint), box-shadow 0.2s;
}
.blognote:hover { transform: translateY(-2px); box-shadow: var(--shadow-border-strong); }
.blognote__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.blognote__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.blognote__date { font: 400 12.5px/1.2 var(--font-ui); color: var(--text-muted); }
.blognote__title {
  font-family: var(--font-display);
  font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.blognote__text { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); flex: 1; }
.blognote__go { font: var(--font-weight-semibold) 14px/1.2 var(--font-ui); color: var(--color-olga-plum); }
@media (max-width: 1000px) { .blognotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .word--flip { grid-template-columns: 1fr; }
  .word--flip .word__media { order: 0; }
  .word__media--poster img { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) { .blognotes { grid-template-columns: 1fr; } }

/* Сверхвысокие вьюпорты (скрин-режимы, вертикальные панели): svh-геро теряет смысл.
   Держать последним — перебивает адаптивные min-height при любой ширине. */
@media (min-height: 2000px) {
  .hero { min-height: 780px; }
}

/* ============================================================
   /hello — сторителлинг: буквица, проявление текста по скроллу,
   маркер/circle/underline-акценты, фото-разрывы. Пулл-цитаты и
   плавное появление фото — существующие .pullquote/[data-reveal],
   ничего нового не заводим под них.
   ============================================================ */
.hello__hi {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  color: var(--text-primary);
  margin: 0 0 10px;
}
.hello__lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.75; color: var(--text-secondary); margin: 0 0 18px; }

/* Буквица — float-приём (не initial-letter: совместимость шире, без фолбэка) */
.hello__dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.82;
  padding: 0.03em 0.07em 0 0;
  color: var(--color-gold);
}

.hello__chapter { margin: 48px 0; }
.hello__chapter-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--text-primary);
  margin: 0 0 22px;
}
.hello__prose { display: flex; flex-direction: column; gap: 18px; margin: 0 0 28px; }
.hello__prose p { font-size: 17px; line-height: 1.75; }
.hello .pullquote { margin: 40px 0; }

/* Проявление текста при скролле: светло-серый → основной цвет, один раз —
   длинный текст для чтения, а не декоративный луп, прочитанное остаётся тёмным.
   Наблюдатель — расширение того же IntersectionObserver в reveal.js. */
[data-ink] > p {
  color: var(--color-ash);
  transition: color 0.9s var(--ease-out-soft);
}
[data-ink] > p.is-inked { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  [data-ink] > p { color: var(--text-secondary); transition: none; }
}

/* Подчёркивание-акцент — от руки, дорисовывается по скроллу (замена плоского
   маркера-хайлайтера). Squiggle-SVG в фоне, раскрывается clip-path'ом, когда
   родительский абзац становится «прочитанным» ([data-ink] p.is-inked) или
   когда цитата входит в кадр (.pullquote.is-visible) — своего наблюдателя не
   заводим, донашиваем существующие классы reveal.js. */
.ink-underline { position: relative; padding-bottom: 0.12em; }
.ink-underline::after {
  content: "";
  position: absolute; left: -0.02em; right: -0.02em; bottom: 0.02em; height: 0.24em;
  background-repeat: repeat-x; background-position: left bottom; background-size: 32px 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out-soft) 0.15s;
}
.ink-underline--gold::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10'%3E%3Cpath d='M0,6 Q8,2 16,6 T32,6' fill='none' stroke='%23C9A86A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ink-underline--indigo::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10'%3E%3Cpath d='M0,6 Q8,2 16,6 T32,6' fill='none' stroke='%233A3480' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-ink] p.is-inked .ink-underline::after,
.pullquote.is-visible .ink-underline::after {
  clip-path: inset(0 0% 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .ink-underline::after { clip-path: inset(0 0% 0 0); transition: none; }
}

/* Фото-разрыв между главами — те же радиусы/тени, что у портретов .word__media.
   Без фиксированного aspect-ratio: кадры разной ориентации (портрет/пейзаж) держат
   свои настоящие пропорции по width/height атрибутам в разметке. */
.hello__photo { margin: 48px auto; max-width: 480px; text-align: center; }
.hello__photo img {
  width: 100%; height: auto; object-fit: cover;
  border-radius: var(--radius-large-cards);
  box-shadow: var(--shadow-border-strong);
}
.hello__photo figcaption { margin-top: 12px; font: 400 14px/1.4 var(--font-ui); color: var(--text-muted); }

/* Пара фото рядом — не строгая сетка: второй кадр слегка ниже, как будто
   два снимка просто положили на стол друг рядом с другом. */
.hello__photo-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 48px auto; max-width: 680px;
}
.hello__photo-pair .hello__photo { margin: 0; max-width: none; }
.hello__photo-pair .hello__photo:nth-child(2) { margin-top: 30px; }
@media (max-width: 640px) {
  .hello__photo-pair { grid-template-columns: 1fr; gap: 32px; max-width: 480px; }
  .hello__photo-pair .hello__photo:nth-child(2) { margin-top: 0; }
}

.hello__sign { font-style: italic; }

@media (max-width: 640px) {
  .hello__dropcap::first-letter { font-size: 3.4em; }
  .hello__chapter { margin: 36px 0; }
}