/* Fayro website v2 — «Город из света».
   Эдиториал-люкс: айвори-журнал + чернильные интерлюдии + золотая нить. */

/* ---------- Шрифт ---------- */
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/Cera-Pro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/Cera-Pro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/Cera-Pro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Токены ---------- */
:root {
  --ink: #080808;
  --ink-deep: #000000;
  --ivory: #F4F3F3;
  --ivory-card: #FAF8F3;
  --muted-on-ivory: #6E6960;
  --muted-on-ink: #BDB5AD;
  --gold: #C6A669;
  --gold-light: #E9C479;
  --gold-dark: #907141;
  --line-ivory: rgba(8, 8, 8, 0.12);
  --line-ink: rgba(244, 243, 243, 0.14);
  --wrap: 1280px;
  --pad: clamp(20px, 4.5vw, 64px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: 'Cera Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  /* Интерлиньяж корпуса — по стандарту победителей SOTD (замер 15 сайтов,
     AWARDS-INFO-BLOCKS-1): их корпус живёт в 1.3–1.5, наш 1.6 читался
     рыхлее всей выборки. 1.5 — верх их коридора, кириллице комфортно. */
  line-height: 1.5;
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; line-height: 1.04; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
/* Шапка живёт поверх тёмного хиро — кольцо фокуса там светлое золото. */
.hero :focus-visible, .how :focus-visible, .finale :focus-visible,
.ftr :focus-visible, .hdr :focus-visible { outline-color: var(--gold-light); }

/* Первая остановка Tab — «Перейти к содержимому» (канон основного сайта):
   вне экрана, пока не получила фокус. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--gold-light);
  color: var(--ink-deep);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  transition: top 0.18s ease;
}
.skip-link:focus-visible { top: 12px; }

::selection { background: var(--gold); color: var(--ink-deep); }

/* ---------- Появления ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
/* Текст проявляется из лёгкого размытия (приём победителей); фото и
   карточки не блюрим — фильтр на больших растрах дорог и не нужен. */
.js p.reveal, .js ul.reveal, .js .hero-title .reveal {
  filter: blur(12px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Шапка ----------
   Ревизия 25.08 (слово владельца): при скролле вниз едет ТОЛЬКО кнопка
   «Оформить» — логотип и навигация остаются наверху страницы и уходят
   вместе с хиро. Поэтому шапка absolute (не fixed), состояния .solid
   больше нет, а кнопка — отдельный fixed-элемент с инверсией цвета по
   фону под ней (см. .hdr-cta ниже и initCtaTheme в site.js). */
.hdr {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  /* Справа зарезервировано место под fixed-«Оформить»: кнопка вне потока
     шапки, и без резерва навигация подъезжала ПОД неё (пилюля ~140px +
     зазор; поймано владельцем на 1512). */
  padding: 0 calc(var(--pad) + 170px) 0 var(--pad);
  height: 72px;
  color: var(--ivory);
}

/* ═══ ТРЕКИНГ: КАНОН ЭТАЛОНОВ (TYPE-TRACKING-1, 31.08.2026) ═══
   Замер трёх эталонов живьём (tools/site-audit/typeaudit.mjs, 1440×900):
   tecnoarreda.it — 0 ролей с положительной разрядкой из 53;
   pelizzari.com — 0 из 34 (даже капсовые «COMPANY», «INTERIOR DESIGN» — в ноль);
   dior.com/en_us/beauty — 0 из 12 (единственная ненулевая — ОТРИЦАТЕЛЬНАЯ
   у крупного заголовка), включая надзаголовок 12px, с которого списан
   наш .d-eyebrow.
   У нас было 8 ролей с разрядкой +0.02…+0.18em, и владелец увидел это сам
   («дистанция между буквами великовата, особенно где текста побольше»).
   ★ ПРАВИЛО: положительная разрядка остаётся ТОЛЬКО у словесного знака
   FΛYRO (.brand-word и .finale-word, 0.22em) — там она часть логотипа
   (brand-logo-canon). Везде больше — normal. Не возвращать «для
   воздуха»: воздух в этой типографике дают поля и интерлиньяж. ═══ */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 25px; height: 26px; }
.brand-word {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
}
.hdr-nav { display: flex; gap: clamp(16px, 2.6vw, 34px); margin-left: auto; }
.hdr-nav a {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}
.hdr-nav a:hover { opacity: 1; }
/* Анимация CTA = язык основного сайта (слово владельца 25.08 «такая же, как
   на основном»): быстрый ховер с подсветкой brightness(1.06) и тап-поджатие
   scale(0.97) за 0.15s. Класс .cta-press — та же анимация для БУДУЩИХ кнопок
   «Подписаться» в карточках уровней: когда появятся, вешать его.
   ★ «Оформить» — единственный fixed-элемент страницы: едет со скроллом одна,
   и на каждом фоне носит ОБРАТНЫЙ ему цвет (слово владельца 25.08): над
   тёмными секциями (хиро, «Три шага», финал, футер) — слоновая кость, над
   светлыми — чернила (класс .on-light вешает initCtaTheme по положению
   кнопки относительно секций). Ховер зеркален: на тёмном заливка золотом,
   на светлом — чернилами. */
.hdr-cta,
.cta-press {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid currentColor;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, filter 0.15s ease, transform 0.15s ease;
}
.hdr-cta {
  position: fixed;
  top: 16px;
  right: var(--pad);
  z-index: 41;
  color: var(--ivory);
}
.hdr-cta.on-light { color: var(--ink); }
/* SITE-PROOF-1: пилюля едет по фотографиям карточек и телефонов — там ни
   айвори, ни чернила не читаются. Скрипт вешает .on-photo, когда под центром
   пилюли лежит картинка: светлая полупрозрачная подложка + размытие; это
   не «заливка тоном секции» (её владелец отклонил 31.08), а стекло поверх
   фото — швов с фоном оно не создаёт, потому что живёт только над растром. */
.hdr-cta { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* Компактнее (слово владельца 02.09 «сделай покомпактнее саму кнопку»):
   было 11×22 / 0.83rem (120×45 на 1440), стало 8×16 / 0.74rem (~98×36);
   на телефоне 6×12 / 0.66rem. «Стать партнёром» размер не меняет. */
/* Оптический центр (слово владельца 02.09 «текст выше центра»): капитель
   без нижних выносных сидит в верхней части строки — замер живьём: зазор
   сверху 9, снизу 11 px при симметричном паддинге; +1 сверху / −1 снизу
   ставит буквы по центру. */
.hdr-cta { padding: 9px 16px 7px; font-size: 0.74rem; }
.hdr-cta.on-photo { color: var(--ink); background: rgba(244, 243, 243, 0.72); border-color: transparent; }
.hdr-cta.on-photo:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); filter: none; }
.hdr-cta:hover, .cta-press:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink-deep); filter: brightness(1.06); }
.hdr-cta.on-light:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); filter: none; }
.hdr-cta:active, .cta-press:active { transform: scale(0.97); }
.hdr-cta:not(.on-light):focus-visible { outline-color: var(--gold-light); }

/* Подмена подписи на ховере — фирменная анимация «Оформить» основного сайта
   (слово владельца: «такая же, как на основном»): подпись выписана дважды,
   при наведении уезжает вверх ровно на свою высоту, дубль въезжает снизу.
   По умолчанию подмены нет и дубль скрыт (тач, reduced motion, без JS —
   обычная пилюля). Включается только с настоящим указателем и при
   разрешённом движении — как в каноне основного сайта. */
.cta-slide > span[aria-hidden="true"] { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hdr-cta .cta-slide,
  .cta-press .cta-slide {
    display: block;
    overflow: clip;
    height: 1.6em;
  }

  .hdr-cta .cta-slide > span,
  .hdr-cta .cta-slide > span[aria-hidden="true"],
  .cta-press .cta-slide > span,
  .cta-press .cta-slide > span[aria-hidden="true"] {
    display: block;
    height: 1.6em;
    line-height: 1.6;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hdr-cta:hover .cta-slide > span,
  .cta-press:hover .cta-slide > span { transform: translateY(-1.6em); }
}

/* ---------- Хиро ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  background: var(--ink-deep);
  color: var(--ivory);
  overflow: clip;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 33%, rgba(198, 166, 105, 0.12), transparent 70%);
}
/* Статичный знак — фолбэк без JS и при reduced-motion; при живом шёлке скрыт */
.hero-mark-static {
  position: absolute;
  left: 50%;
  top: 33%;
  width: clamp(180px, 26vw, 360px);
  transform: translate(-50%, -50%);
  color: var(--gold-light);
}
/* Короткие экраны: статичный знак выше и мельче — контент прижат к низу,
   и на 33% высоты знак попадал бы в текст (как и живой шёлк до фикса). */
@media (max-height: 760px) {
  .hero-mark-static { top: 24%; width: clamp(140px, 20vh, 260px); }
}
html.motion .hero-mark-static { display: none; }

/* Знак-путник: летит через страницу по скроллу, 3D-повороты по ходу */
.travel-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 110px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  perspective: 640px;
  will-change: transform, opacity;
}
.travel-mark {
  display: block;
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  will-change: transform;
  filter:
    drop-shadow(0 10px 22px rgba(8, 8, 8, 0.22))
    drop-shadow(0 0 14px rgba(233, 196, 121, 0.18));
}
@media (prefers-reduced-motion: reduce) {
  .travel-wrap { display: none; }
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(72px, 11vh, 128px);
  display: grid;
  justify-items: center;
  text-align: center;
}
/* .kicker удалён (AWARDS-FLOW-1): последний носитель — «Партнёрам» —
   стал гигантом, мелких кикеров на странице не осталось (бан item 776). */
.hero-title {
  /* Телефон держит прежний потолок строки (36.8px влезает на 390 с полями).
     ★ Потолок десктопа опущен 5.4rem → 4.5rem (86.4 → 72px) по слову
     владельца 31.08 «этот текст великоват». Прежний комментарий про
     «коридор победителей 80–90px» — вымысел прошлой сессии: у эталонов
     коридора в px нет вовсе (tecnoarreda 129.6, pelizzari 187.2 — оба
     БОЛЬШЕ нашего), потому что у них заголовок и есть композиция, во всю
     ширину, а у нас центрированный островок в 46 % ширины. При такой
     постановке 86.4 давит; замер подстановкой живьём: 72 — заголовок
     остаётся заголовком, 66 — его начинает забивать знак хиро.
     Потолок в px, а не в vw, честен ещё и потому, что колонка страницы
     сама упирается в --wrap 1280px: выше 1280 расти нечему. */
  font-size: clamp(2.3rem, 5.5vw + 0.8rem, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.03;
}
.hero-title span { display: block; }
.hero-title .gold { color: var(--gold-light); }
.hero-sub {
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 30em;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: rgba(244, 243, 243, 0.78);
}
/* Строка фактов снята (слово владельца 27.08 «хиро перегружен текстом»):
   её числа живут в «Местах» и «Уровнях» — хиро несёт H1 и одну строку
   механики. */
/* ★ Здесь жили осиротевшие кадры удалённого @keyframes cue (HERO-CUE-CUT-1
   не забрал хвост): парсер, восстанавливаясь от них, СЪЕДАЛ следующее
   правило — паддинг манифеста никогда не доходил до страницы (владелец
   дважды видел «нет воздуха после хиро»). Хвост удалён item 784. */

/* ---------- Манифест ---------- */
/* Воздух над стейтментом поднят дважды (слово владельца 26.08, повтор
   «проблемы с отступами после хиро») — ритм Dior: текстовый модуль стоит
   в чистом поле, до фото — большой разрыв. */
/* SITE-PROOF-1: воздух над стейтментом ужат — 340 читалось пустотой, не
   паузой; правый столб теперь занят телефоном, и модуль держит ритм сам. */
.manifesto { padding: clamp(120px, 15vw, 200px) 0 clamp(60px, 8vw, 110px); }
/* ---------- Модуль Dior (DIOR-GRAMMAR-1, item 782) ----------
   Слепок dior.com/en_us/beauty (замер DOM живьём): каждый инфоблок —
   полноширинное фото, под ним ВСЁ по центру: надпись-линия 12px обычным
   регистром, заголовок 32–40 сверхлёгкий с трекингом −2 % и lh 1.3,
   строка описания 16, тихая текстовая ссылка. Никаких гигантов, линий и
   плит-кнопок; воздух между модулями огромный. У Cera Pro нет веса
   тоньше 400 (лицензия 400/500/700) — берём 400. */
.d-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  text-align: center;
  /* Интерлиньяж надписи-линии: у Dior, откуда снят модуль, 1.167 — наш
     наследованный 1.5 отрывал её от заголовка. */
  line-height: 1.2;
  color: var(--muted-on-ivory);
}
.d-title {
  margin: 18px auto 0;
  max-width: 19em;
  font-size: clamp(1.55rem, 2.6vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}
/* Стейтмент — левый столб основной сетки (REGRID-1, слово владельца:
   «сетка и анимации — как на основном»; кегль и воздух — новые). */
.statement {
  margin-top: 28px;
  max-width: 21em;
  font-size: clamp(1.7rem, 3.6vw, 3.3rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.manifesto .statement {
  margin-top: 0;
  max-width: 12em;
}
.statement-detail {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 26em;
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--muted-on-ivory);
}
.manifesto-photos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(70px, 9vw, 130px);
}
/* Фото манифеста — журнальный разворот основной сетки (7/5 со сдвигом),
   подписи-факты без линий. */
.mp img { border-radius: 6px; width: 100%; object-fit: cover; }
.mp figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.82rem;
  letter-spacing: normal;
}
.mp figcaption span:last-child { color: var(--muted-on-ivory); }
.mp-a { grid-column: 1 / span 7; }
.mp-b { grid-column: 8 / span 5; margin-top: clamp(60px, 9vw, 150px); }

/* ---------- Гигантские заголовки (основная сетка) ---------- */
.giant {
  font-size: clamp(5rem, 18.5vw, 16.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-left: calc(-1 * clamp(8px, 1.2vw, 20px));
  padding-inline: var(--pad);
  color: var(--ink);
  will-change: transform;
}
.giant-dark { color: var(--ivory); }

/* ---------- Места: редакционная плитка основной сетки ---------- */
.places { padding: clamp(70px, 9vw, 130px) 0 clamp(90px, 10vw, 140px); }
/* Лид — узкой мерой localhost-типографики (18.4/478 на 1440). */
.section-lede {
  max-width: 26em;
  margin-top: clamp(28px, 4vw, 52px);
  font-size: clamp(1rem, 0.6vw + 0.8rem, 1.15rem);
  color: var(--muted-on-ivory);
}
.cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: clamp(64px, 8vw, 130px);
  margin-top: clamp(60px, 7vw, 110px);
}
.card { grid-column: span 5; }
.card-w { grid-column: span 7; }
.card:nth-child(4n+2) { margin-top: clamp(40px, 6vw, 110px); }
.card:nth-child(4n+3) { margin-top: clamp(-60px, -3vw, -30px); }
.card-media {
  overflow: clip;
  border-radius: 6px;
  aspect-ratio: 1.92 / 1; /* родная полоса партнёрских обложек 1600×833 */
  background: var(--ivory-card);
}
.card:not(.card-w) .card-media { aspect-ratio: 3 / 2; }
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.045); }
/* Без линии между фото и подписью (слово владельца 26.08). */
.card-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 20px;
}
.card-idx {
  font-size: 0.8rem;
  letter-spacing: normal;
  color: var(--muted-on-ivory);
}
/* Имя и процент ужаты (слово владельца 27.08 «слишком массивные»). */
.card-names h3 { font-size: clamp(1rem, 1.2vw, 1.2rem); letter-spacing: -0.01em; }
.card-names p { font-size: 0.85rem; color: var(--muted-on-ivory); margin-top: 3px; }
.card-disc {
  margin-left: auto;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  letter-spacing: -0.02em;
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.places-note {
  /* Мера строки: было 46 знаков при 34em — эталоны держат 24–33
     (Dior 24, pelizzari 29, tecnoarreda 33). */
  margin-top: clamp(56px, 7vw, 90px);
  max-width: 26em;
  font-size: 0.88rem;
  color: var(--muted-on-ivory);
}

/* ---------- Три шага ---------- */
.how {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(96px, 11vw, 160px) 0;
}
/* Шаги — линия сверху, без номеров (слово владельца 26.08); текст —
   карточным корпусом localhost-типографики. */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(60px, 7vw, 110px);
}
.step { border-top: 1px solid var(--line-ink); padding-top: 26px; }
.step h3 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); }
.step p { margin-top: 10px; font-size: 0.95rem; color: var(--muted-on-ink); max-width: 21em; }

/* ---------- Уровни ---------- */
.levels { padding: clamp(96px, 11vw, 150px) 0; }
/* Плиты подписки — ИЗНАЧАЛЬНЫЙ размер первого «Города из света»
   (git 27ab91f2, слово владельца 26.08 «вернуть размер, который был при
   создании сайта»): сетка, паддинг, радиус и кегли восстановлены 1:1.
   Единственное отличие от истока — цена Platinum без золота (отдельное
   слово владельца тем же днём). */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(56px, 7vw, 100px);
}
.tier {
  background: var(--ivory-card);
  border: 1px solid var(--line-ivory);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 42px);
  display: grid;
  align-content: start;
  gap: 8px;
  /* 1.6 был выше любого эталона для читаемого текста (Dior 1.53,
     tecnoarreda 1.5), а плита уровней — самый плотный строками узел
     страницы: три штуки рядом по 8–10 строк. */
  line-height: 1.5;
}
.tier h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; }
.tier-for { color: var(--muted-on-ivory); font-size: 0.95rem; min-height: 3em; }
.tier-feat { padding-top: 16px; border-top: 1px solid var(--line-ivory); }
.tier-price { margin-top: clamp(20px, 3vw, 40px); font-size: 1.05rem; }
.tier-price strong {
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tier-year { font-size: 0.88rem; color: var(--muted-on-ivory); }
.tier-dark { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.tier-dark .tier-for, .tier-dark .tier-year { color: var(--muted-on-ink); }
.tier-dark .tier-feat { border-top-color: var(--line-ink); }
/* Black Platinum: слово и цена — переливающийся жемчуг (слово владельца
   26.08; перенос канонной анимации основного сайта, которая сама — перенос
   из приложения: та же 5-стопная лента LevelShine.platinum, период 4.5 с
   линейно, лента выписана дважды в картинке 200 %, металл и движение —
   ТОЛЬКО у Platinum). Без background-clip остаётся плоский жемчужный. */
.tier-dark h3, .tier-dark .tier-price strong { color: #c9ced6; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .tier-dark h3,
  .tier-dark .tier-price strong {
    background-image: linear-gradient(
      100deg,
      #8a8f99 0%, #c5cad1 12%, #f4f2ec 25%, #b3b8c1 38%,
      #8a8f99 50%, #c5cad1 62%, #f4f2ec 75%, #b3b8c1 88%, #8a8f99 100%
    );
    background-size: 200% 100%;
    background-position: 0 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .tier-dark h3,
    .tier-dark .tier-price strong {
      animation: pearl-flow 4.5s linear infinite;
    }
  }
}
@keyframes pearl-flow {
  from { background-position: 0 50%; }
  to { background-position: 100% 50%; }
}
/* Цена Platinum — без золота (слово владельца 26.08 «удешевляет»):
   тот же тон слоновой кости, что и весь текст тёмной плиты. */
.levels-note {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 34em;
  font-size: 0.88rem;
  text-align: center;
  color: var(--muted-on-ivory);
}

/* ---------- Партнёрам ---------- */
.partners { padding: clamp(96px, 11vw, 150px) 0; text-align: center; }
.partners-note {
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 28em;
  font-size: 1rem;
  color: var(--muted-on-ivory);
}
/* «Стать партнёром» — пилюля по эталону владельца («Try It Free», 26.08):
   заливка чернилами, стрелка в айвори-круге справа; на ховере цвета
   меняются местами (пилюля айвори с чернильным текстом, круг — чернила),
   подпись подменяется той же механикой .cta-slide, что у «Оформить». */
.cta-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4.5vw, 52px);
  padding: 5px 5px 5px 22px;
  background: var(--ivory);
  border-color: var(--ink);
  color: var(--ink);
}
.cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cta-arrow svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.cta-go:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
  filter: none;
}
.cta-go:hover .cta-arrow {
  background: var(--ivory);
  color: var(--ink);
}
.cta-go:hover .cta-arrow svg { transform: translateX(3px); }

/* ---------- Финал ---------- */
.finale {
  background: var(--ink-deep);
  color: var(--ivory);
  padding: clamp(110px, 13vw, 180px) 0;
  text-align: center;
}
.finale-mark { width: clamp(56px, 7vw, 96px); margin: 0 auto; color: var(--gold-light); }
.finale-word {
  margin-top: clamp(28px, 4vw, 52px);
  font-size: clamp(3rem, 11vw, 10rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* компенсация трекинга для оптического центра */
  line-height: 1;
}
.finale-line {
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  color: rgba(244, 243, 243, 0.9);
}
.finale-note {
  margin: clamp(16px, 2vw, 24px) auto 0;
  max-width: 26em;
  font-size: 0.92rem;
  color: var(--muted-on-ink);
}

/* ---------- Футер ---------- */
.ftr {
  background: var(--ink-deep);
  color: var(--muted-on-ink);
  padding: 0 var(--pad) 34px;
  font-size: 0.82rem;
  letter-spacing: normal;
  text-align: center;
}
/* Служебные страницы — те же пути, что у основного сайта (бриф партнёра,
   поддержка, удаление аккаунта): после наката v2 docroot один. */
.ftr-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-bottom: 16px;
}
.ftr-nav a {
  opacity: 0.85;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.ftr-nav a:hover { opacity: 1; color: var(--ivory); }
.ftr-soon { margin-bottom: 16px; opacity: 0.6; }
.ftr-social { display: flex; justify-content: center; margin-bottom: 18px; }
.ftr-social a {
  display: inline-flex;
  padding: 6px;
  opacity: 0.8;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.ftr-social a:hover { opacity: 1; color: var(--gold-light); }
.ftr-legal {
  /* Самая длинная строка страницы: было 62 знака при 44em — вдвое длиннее
     футеров эталонов (pelizzari 35, Dior 32). Ужата, интерлиньяж приведён
     к их 1.2. */
  margin: 10px auto 0;
  max-width: 34em;
  font-size: 0.72rem;
  letter-spacing: normal;
  opacity: 0.55;
  line-height: 1.3;
}

/* ---------- Мобильное меню (бургер в углу, штора из угла) ---------- */
/* Кнопка живёт только на телефоне и только под html.js. Две линии → крест:
   зазор 7 + линия 2 дают межцентровое 9, отсюда translateY(±4.5). */
.hdr-burger { display: none; }

.hdr-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}

html.menu-open .hdr-burger span:first-child {
  transform: translateY(4.5px) rotate(45deg);
}
html.menu-open .hdr-burger span:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* Инверсия цвета по фону — как у пилюли «Оформить» (вопрос владельца 26.08
   «почему не меняет цвет?»): над светлыми секциями линии чернильные, иначе
   айвори-бургер невидим. Класс вешает initCtaTheme тем же замером. Открытая
   штора всегда тёмная — крест на ней всегда айвори (правило ниже сильнее
   .on-light по специфичности). */
html.js .hdr-burger.on-light { color: var(--ink); }
html.js.menu-open .hdr-burger { color: var(--ivory); }

html.menu-open { overflow: hidden; }

/* Штора: чернила-глубина, раскрывается кругом из угла бургера, пункты
   въезжают каскадом. Закрытая — не ловит ни тапы, ни фокус (inert в JS). */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-content: center;
  padding: 0 var(--pad);
  background: var(--ink-deep);
  color: var(--ivory);
  opacity: 0;
  pointer-events: none;
  clip-path: circle(0 at calc(100% - 32px) 32px);
  transition: clip-path 0.55s var(--ease-out), opacity 0.35s ease;
}

html.menu-open .mnav {
  opacity: 1;
  pointer-events: auto;
  clip-path: circle(142% at calc(100% - 32px) 32px);
}

.mnav-links { display: grid; gap: clamp(18px, 4.2vh, 30px); }

.mnav-links a {
  justify-self: start;
  font-size: clamp(2rem, 9vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}

.mnav-cta { color: var(--gold-light); }

html.menu-open .mnav-links a { opacity: 1; transform: none; }
html.menu-open .mnav-links a:nth-child(1) { transition-delay: 0.10s; }
html.menu-open .mnav-links a:nth-child(2) { transition-delay: 0.16s; }
html.menu-open .mnav-links a:nth-child(3) { transition-delay: 0.22s; }
html.menu-open .mnav-links a:nth-child(4) { transition-delay: 0.28s; }
html.menu-open .mnav-links a:nth-child(5) { transition-delay: 0.34s; }


/* ---------- SITE-PROOF-1: продукт, лестницы, вопросы ---------- */
/* Якорная навигация: заголовок секции не прячется под прибитую пилюлю. */
main > section { scroll-margin-top: 72px; }

/* Число-крючок хиро — золото на тёмном разрешено (канон: золото ТОЛЬКО на
   тёмном), кегль чуть выше строки, чтобы «до −50 %» читалось первым. */
.hero-sub-num {
  font-weight: 500;
  color: var(--gold-light);
  font-size: 1.22em;
  white-space: nowrap;
}

/* Манифест: текст слева (7/12), телефон справа (5/12) — тот самый пустой
   правый столб. Телефон — CSS-рамка, внутри настоящий экран. */
.manifesto-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.phone { margin: 0; display: grid; justify-items: center; gap: 18px; }
/* Корпус iPhone 17 Pro (слово владельца 02.09 «как будто без макета»):
   титановая рамка двумя кольцами (светлое снаружи, тёмное внутри), чёрная
   рамка экрана, экран со скруглением, Dynamic Island, кнопки по бокам
   (action + громкость слева, питание справа). Пропорция корпуса 71.5×149.6
   мм → 1/2.09, экран внутри — сам снимок 402/874. */
.phone-frame {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1 / 2.09;
  padding: 12px;
  border-radius: 17.5% / 8.4%;
  background: #0a0a0b;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 0 3px #a9a9ae,
    0 0 0 5px #46464b,
    0 0 0 6px rgba(255, 255, 255, 0.26),
    0 38px 80px rgba(8, 8, 8, 0.32);
}
.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15% / 7.2%;
  background: #080808;
}
/* Dynamic Island: 126×37 pt на ширине 402 → 31 % ширины экрана */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 29%;
  height: 4.2%;
  transform: translateX(-50%);
  border-radius: 100px;
  background: #000;
  z-index: 2;
}
/* Кнопки слева: action (короткая) и две громкости; питание — справа */
.phone-frame::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 17%;
  width: 3px;
  height: 5%;
  border-radius: 2px;
  background: #7d7d82;
  box-shadow:
    0 9.5vmin 0 0 #7d7d82,
    0 16.5vmin 0 0 #7d7d82;
}
.phone-side {
  position: absolute;
  right: -8px;
  top: 26%;
  width: 3px;
  height: 10%;
  border-radius: 2px;
  background: #7d7d82;
}
.phone figcaption {
  max-width: 20em;
  font-size: 0.82rem;
  text-align: center;
  color: var(--muted-on-ivory);
}
.how .phone figcaption { color: var(--muted-on-ink); }
.how .phone-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 0 3px #a9a9ae,
    0 0 0 5px #46464b,
    0 0 0 6px rgba(255, 255, 255, 0.2),
    0 38px 80px rgba(0, 0, 0, 0.6);
}

/* Лестница карточки: три ступени под категорией — сама идея клуба
   («чем выше уровень — тем больше у тех же партнёров») видна на каждом месте. */
.card-ladder {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted-on-ivory);
  font-variant-numeric: tabular-nums;
}
.card-ladder b { font-weight: 500; color: var(--ink); }

/* Три шага рядом с настоящим экраном QR: шаги столбиком слева, телефон справа. */
.how-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 90px);
}
.how-grid .steps { margin-top: 0; grid-template-columns: 1fr; gap: 34px; }

/* Плиты уровней: потолок цифрой + одна строка смысла ступени. */
.tier-feat strong { font-weight: 500; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.tier-sub { font-size: 0.88rem; color: var(--muted-on-ivory); }
.tier-dark .tier-sub { color: var(--muted-on-ink); }

/* ---------- Вопросы: блок первой версии (перенос 02.09) ----------
   Десктоп — мастер-деталь: список вопросов слева (кнопки-вкладки), справа
   прибитая панель ответа с подписью «Ответ · NN»; телефон — аккордеон с
   круглым плюсом. Токены v2 (айвори): линии --line-ivory, акцент —
   тёмное золото (на светлом фоне золото только тёмное), разрядки нет
   (канон трекинга: только у логотипа). */
.faq { padding: clamp(96px, 11vw, 150px) 0; }
.faq-num { font-size: 0.72rem; color: var(--muted-on-ivory); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.faq-q { font-weight: 500; line-height: 1.3; }

/* мастер-деталь (строит скрипт) */
.faq-md {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.faq-list { display: grid; }
.faq-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line-ivory);
  background: none;
  text-align: left;
  font: inherit;
  color: var(--muted-on-ivory);
  cursor: pointer;
  transition: color 0.3s, padding-left 0.3s var(--ease-out);
}
.faq-item:first-of-type { border-top: 1px solid var(--line-ivory); }
.faq-item .faq-q { font-size: 1.05rem; }
.faq-item:hover { color: var(--ink); padding-left: 10px; }
.faq-item[aria-selected="true"] {
  color: var(--ink);
  padding-left: 10px;
  box-shadow: inset 2px 0 0 var(--gold-dark);
}
.faq-item[aria-selected="true"] .faq-num { color: var(--gold-dark); }
.faq-panel {
  position: sticky;
  top: 96px;
  border-left: 1px solid var(--line-ivory);
  padding: 8px 0 8px clamp(24px, 3vw, 48px);
  min-height: 280px;
}
.faq-lbl {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--gold-dark);
}
.faq-panel-q {
  margin: 14px 0 18px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq-panel-a { max-width: 480px; color: var(--muted-on-ivory); }
.faq-panel-inner { animation: faq-in 0.5s var(--ease-out) both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* аккордеон — единственная разметка вопросов */
.faq-ed { max-width: 44em; margin: clamp(40px, 5vw, 64px) auto 0; }
.faq-ed details { border-bottom: 1px solid var(--line-ivory); }
.faq-ed details:first-of-type { border-top: 1px solid var(--line-ivory); }
.faq-ed summary {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faq-ed summary::-webkit-details-marker { display: none; }
.faq-ed .faq-q { font-size: 1.05rem; }
.faq-x {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-ivory);
  border-radius: 50%;
  transition: border-color 0.3s, transform 0.45s var(--ease-out), background 0.3s;
}
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--gold-dark);
}
.faq-x::before { width: 11px; height: 1.5px; }
.faq-x::after { width: 1.5px; height: 11px; }
.faq-ed details[open] .faq-num { color: var(--gold-dark); }
.faq-ed details[open] .faq-x {
  transform: rotate(135deg);
  border-color: var(--gold-dark);
  background: rgba(144, 113, 65, 0.08);
}
.faq-ans {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq-ed details[open] .faq-ans { grid-template-rows: 1fr; }
.faq-ans > div { overflow: hidden; }
.faq-ans p { padding: 0 46px 24px 58px; color: var(--muted-on-ivory); }
.faq-ans.is-folded { content-visibility: hidden; }
@media (min-width: 961px) {
  .faq-has-md .faq-ed { display: none; }
}
@media (max-width: 960px) {
  .faq-md { display: none; }
  .faq-ed { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-panel-inner { animation: none; }
  .faq-ans { transition: none; }
}
.faq-more { margin-top: clamp(28px, 4vw, 40px); text-align: center; font-size: 0.92rem; color: var(--muted-on-ivory); }
.faq-more a { color: var(--ink); border-bottom: 1px solid var(--gold-dark); transition: color 0.25s ease; }
.faq-more a:hover { color: var(--gold-dark); }

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  /* Телефон: строка фактов складывается в тихий столбик без разделителей,
     заголовок меряется от ширины экрана — блочные строки не переносятся. */
  .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .hdr { height: 62px; }
  .hdr-nav { display: none; }
  html.js .hdr-burger {
    display: inline-flex;
    position: fixed;
    top: 12px;
    right: calc(var(--pad) - 9px);
    z-index: 46;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ivory);
  }
  /* «Оформить» уступает угол бургеру. */
  html.js .hdr-cta { right: calc(var(--pad) + 40px); }
  /* Телефон: пилюля компактнее — полноразмерная выглядела чужой рядом с
     мелким логотипом и съедала штору хиро (фидбэк владельца, 400×670). */
  .hdr-cta {
    top: 12px;
    padding: 7px 12px 5px;
    font-size: 0.66rem;
    letter-spacing: normal;
    /* ★ MOBILE-MARK-FIX (31.08): на телефоне текст идёт во всю ширину и
       проезжает ПОД прибитой пилюлей — буквы читались прямо внутри неё.
       Заливкой не лечим: пилюля обязана нести тон СВОЕЙ секции, а секции
       разного чёрного (#000 и #080808) — плоский фон дал бы ровно тот
       видимый край, который канон швов запрещает. Размытие подложки
       тона не меняет вовсе: на ровном фоне оно незаметно, а буквы под
       пилюлей перестают читаться. Без поддержки backdrop-filter всё
       остаётся как было. */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  /* Гиганты на телефоне: 19vw держит самое длинное «ТРИ ШАГА» в кадре
     (замер 375: 334px; минимум 5rem резал слово по букве). */
  .giant { font-size: 19vw; }
  /* SITE-PROOF-1: на телефоне обе фотографии манифеста во всю ширину —
     сдвинутая узкая вторая читалась как сломанная сетка, а не как разворот. */
  .mp-a, .mp-b { grid-column: 1 / -1; }
  .mp-b { margin-top: clamp(28px, 8vw, 60px); }
  /* Боковой параллакс гигантов на телефоне резал первую букву («ЕСТА»):
     inline-transform скрипта перекрывается !important. */
  .giant { transform: none !important; }
  .manifesto-grid, .how-grid { grid-template-columns: 1fr; }
  .manifesto-grid .phone { margin-top: clamp(40px, 9vw, 64px); }
  .how-grid .phone { margin-top: clamp(40px, 9vw, 64px); }
  .mnav-links a:nth-child(6) { transition-delay: 0.40s; }
  .card, .card-w { grid-column: 1 / -1; }
  .card:nth-child(4n+2), .card:nth-child(4n+3) { margin-top: 0; }
  .card:not(.card-w) .card-media { aspect-ratio: 1.92 / 1; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .tiers { grid-template-columns: 1fr; }
  .tier-for { min-height: 0; }
}

/* ---------- Движение выключено ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-video { transition: none; }
  [data-plx], [data-plx-x], .giant { transform: none !important; }
  .mnav, .mnav-links a, .hdr-burger span { transition: none; }
}