/* Vallumia — лэндинг. Вид «Афиша» (принят в Д2): заголовки Golos Text 900 капсом в две
   краски, телефоны на косых лентах 35-мм плёнки.
   Значения — токены «Vallumia Design System v2» (артефакт, версия 16) и DkMotion кода;
   при расхождении прав код приложения (lib/core/ui_kit/v2).
   Сверх системы — только то, чего у телефона нет: сетка страницы и крупные кегли, вес 900 и
   капс заголовков (прецедент — обёртки витрины стора), лента плёнки, плашка пуша, корпус
   телефона, поворот предметов, полосы фона dark-0, закреплённая шапка, ховер. */

/* ---------- шрифты: файлы приложения (OFL), подмножеством — tools/fonts.py ---------- */
@font-face { font-family: 'Golos Text'; src: url(../fonts/golos-text.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(../fonts/playfair-wordmark.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Handjet'; src: url(../fonts/handjet-stamp.woff2) format('woff2'); font-weight: 500; font-display: swap; }

/* ---------- токены системы ---------- */
:root {
  color-scheme: dark;
  --dark-0: #0d0c0b; --dark-1: #141312; --dark-2: #1a1918; --dark-3: #211f1d; --dark-4: #292623; --dark-5: #353128;
  --glass-1: rgba(255, 248, 238, .05); --glass-2: rgba(255, 248, 238, .09); --glass-3: rgba(255, 248, 238, .14);
  --paper-0: #f4edde;
  --amber-300: #edd5a3; --amber-400: #e0bc77;
  --cream: #f1e9d7; --cream-on: #1b1712;
  --stamp: #f5922e;
  --info: #8fa3b8;
  --fg-1: #f2ede4; --fg-2: #b5afa4; --fg-3: #7c766c;
  --border-dark: rgba(242, 237, 228, .09); --border-dark-strong: rgba(242, 237, 228, .17);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, .38);
  --focus: rgba(224, 188, 119, .5);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 96px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-lg: 20px; --radius-pill: 999px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Golos Text', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --font-stamp: 'Handjet', monospace;
  --text-heading: 20px; --text-title: 26px;
  --track-caps: .08em;

  /* движение — DkMotion (lib/core/ui_kit/v2/effects.dart), DESIGN §6 */
  --dur-fast: 160ms; --dur-med: 320ms; --dur-slow: 700ms; --dur-reveal: 1400ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);

  /* страница — добавлено для веба */
  --page-max: 1248px;
  --gutter: clamp(var(--space-5), -24px + 8.4vw, 96px);
  --col-gap: var(--space-6);
  --lead: clamp(1.0625rem, .99rem + .32vw, 1.25rem);
  --scene: clamp(80px, 10vw, 152px);
  --bar: 56px;
  scrollbar-color: var(--dark-5) var(--dark-1);
}
@media (min-width: 768px) { :root { --bar: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body {
  margin: 0; min-width: 320px;
  font: 400 17px/1.45 var(--font-body);
  color: var(--fg-1); background: var(--dark-1);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(224, 188, 119, .35); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }

.wrap {
  width: 100%; max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}
.skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 20;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill);
  background: var(--cream); color: var(--cream-on); font: 600 15px/1.3 var(--font-body);
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }

/* ---------- текст ---------- */
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }

.poster {
  font: 900 var(--poster, clamp(1.625rem, 8.6vw, 2.5rem))/1.04 var(--font-body);
  letter-spacing: -.012em; text-transform: uppercase; color: var(--cream);
}
.poster > span, .poster > em { display: block; }
.poster > em { font-style: normal; color: var(--amber-400); }
.poster--steel > em { color: var(--info); } /* шампань — катушка, сталь — пластина */
/* на 320 px самая длинная строка афиши шла с запасом 2,5 px до переноса */
@media (max-width: 359px) { .poster { --poster: 8vw; } }
@media (min-width: 900px) { .poster { --poster: clamp(2.25rem, 3.9vw, 3.5rem); } }

.lead { font-size: var(--lead); line-height: 1.45; color: var(--fg-2); max-width: 34em; text-wrap: pretty; }
.poster + .lead { margin-top: var(--space-6); }
.lead + .lead { margin-top: var(--space-4); }
.lead strong { font-weight: 400; color: var(--fg-1); }
.caption { margin-top: var(--space-4); max-width: 38em; font: 400 13px/1.45 var(--font-body); color: var(--fg-2); text-wrap: pretty; }

/* техническая подпись: моно-капс системы; цвет fg-2, а не fg-3 — у fg-3 контраст 4,1:1, ниже AA */
.data {
  font: 400 11px/1.45 var(--font-mono); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums;
}

/* ---------- кнопка системы (components/core/Button.jsx, код — DkButton) статикой ----------
   Подпись идёт с интерлиньяжем 1.3 и без обрезки: в компоненте lineHeight 1 и overflow
   hidden срезали нижние выносные букв. Ховер — добавка для веба. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 15px/1.3 var(--font-body); text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { border-radius: var(--radius-pill); }
.btn--lg { min-height: 56px; font-size: 16px; }
.btn--primary { background: var(--cream); color: var(--cream-on); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.btn--secondary { background: var(--glass-2); color: var(--fg-1); border-color: var(--border-dark-strong); }
.btn--outline { background: transparent; color: var(--fg-2); border-color: var(--border-dark); }
.btn--stack { flex-direction: column; gap: 2px; padding-block: var(--space-2); cursor: default; }
.btn--stack:active { transform: none; }
.btn__sub { font-size: 11.5px; font-weight: 500; opacity: .7; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--paper-0); }
  .btn--secondary:hover { background: var(--glass-3); }
}

/* ---------- шапка первого экрана и закреплённая шапка ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 64px; }
.nav__mark { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; line-height: 1; color: var(--fg-1); }
.nav__links { display: none; gap: var(--space-8); }
.nav__links a { font-size: 15px; color: var(--fg-2); transition: color var(--dur-fast) var(--ease-out); }
.nav__end { display: flex; align-items: center; gap: var(--space-2); }
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  font: 400 11px/1 var(--font-mono); letter-spacing: var(--track-caps); color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .nav__links a:hover, .nav__lang:hover { color: var(--fg-1); } }
@media (min-width: 768px) {
  .nav { height: 84px; }
  .nav__mark { font-size: 26px; }
  .nav__links { display: flex; }
}

/* закреплённая шапка — добавка сверх системы; без скрипта её нет. Заливка сплошная, без
   размытия подложки: под шапкой всю прокрутку едут ленты, и размытие считалось бы на каждом
   кадре (в приложении стекло на Android сплошное по той же причине) */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 10;
  background: var(--dark-1); border-bottom: 1px solid var(--border-dark);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity var(--dur-med) var(--ease-out), translate var(--dur-med) var(--ease-out), visibility 0s var(--dur-med);
}
.topbar.is-on { opacity: 1; visibility: visible; translate: 0; transition-delay: 0s; }
.topbar .nav { height: var(--bar); }
.topbar .nav__mark { font-size: 22px; }
.topbar .btn { min-height: 44px; padding-inline: var(--space-5); }

/* ---------- лента 35-мм плёнки ---------- */
.strip {
  --sh: 120px;
  position: relative; height: var(--sh);
  background: var(--dark-0); border-block: 1px solid var(--border-dark);
  overflow: hidden; overflow: clip;
}
.strip__film {
  position: relative; display: flex; align-items: center;
  gap: calc(var(--sh) * .07); width: max-content; height: 100%;
  padding-inline: calc(var(--sh) * .07);
}
.strip__film::before, .strip__film::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(var(--sh) * .07);
  /* перфорация — одна плитка градиента, повторённая фоном. repeating-linear-gradient на
     плёнке в тысячи пикселей Safari обрывал через несколько отверстий (Chrome рисовал целиком) */
  background: linear-gradient(90deg, var(--glass-3) 45%, transparent 45%) 0 0 / calc(var(--sh) * .2) 100% repeat-x;
}
.strip__film::before { top: calc(var(--sh) * .055); }
.strip__film::after { bottom: calc(var(--sh) * .055); }
/* ширина кадра — явная, не flex-basis: по flex-basis Safari не считает ширину плёнки
   (max-content), плёнка выходила шириной в одни зазоры, и перфорация обрывалась через
   несколько отверстий, а за сценами не рисовалась вовсе */
.strip i {
  position: relative; flex: none; width: calc(var(--sh) * .9); height: calc(var(--sh) * .58);
  margin-bottom: calc(var(--sh) * .06); border-radius: 2px; background: var(--glass-1);
}
/* кромочная печать под окном кадра — штамп, как на ленте архива */
.strip i::after {
  content: attr(data-n); position: absolute; left: 1px; top: 100%; margin-top: calc(var(--sh) * .025);
  font: 500 max(11px, calc(var(--sh) * .095))/1 var(--font-stamp); font-style: normal;
  letter-spacing: .06em; color: var(--stamp); white-space: nowrap;
}
/* мутный кадр: муть (рецепт артборда конверта — blur, saturate .4, brightness .65, contrast .85
   и вуаль .28) запечена в картинку — tools/mud.mjs. Живого фильтра на едущей ленте нет:
   он пересчитывался на каждом кадре, и на iPhone первый экран подлагивал */
.strip i.muddy { background: var(--dark-2); }
.strip i.muddy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

/* Длина плёнки — по ширине окна. В разметке кадров хватает на окно 5120 px, а на узком окне
   лишние кадры только раздували едущие слои: на телефоне каждый был 4,5 тыс. px при видимых
   950, двенадцать таких — около 175 МБ. Пороги: кадров столько, чтобы плёнка была длиннее
   ленты на ход (проверяется зондом на границах порогов). */
@media (max-width: 3499px) {
  .stage .strip i:nth-child(n+37), .strip--back i:nth-child(n+32), .strip--front i:nth-child(n+19) { display: none; }
}
@media (max-width: 2599px) {
  .stage .strip i:nth-child(n+29), .strip--back i:nth-child(n+25), .strip--front i:nth-child(n+15) { display: none; }
}
@media (max-width: 1999px) {
  .stage .strip i:nth-child(n+23), .strip--back i:nth-child(n+20), .strip--front i:nth-child(n+12) { display: none; }
}
@media (max-width: 1499px) {
  .stage .strip i:nth-child(n+19), .strip--back i:nth-child(n+17), .strip--front i:nth-child(n+11) { display: none; }
}
@media (max-width: 899px) {
  .stage .strip i:nth-child(n+17), .strip--back i:nth-child(n+15) { display: none; }
}

/* ---------- корпус телефона вокруг снимка экрана ---------- */
.phone {
  --w: clamp(240px, 68vw, 290px);
  position: relative; width: var(--w); padding: calc(var(--w) * .024);
  border-radius: calc(var(--w) * .15);
  background: var(--dark-0); border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-raised);
}
.phone__screen { position: relative; display: block; overflow: hidden; border-radius: calc(var(--w) * .128); background: var(--dark-1); }
.phone__screen img { width: 100%; }
@media (min-width: 900px) { .phone { --w: clamp(270px, 25vw, 364px); } }

/* ---------- первый экран ---------- */
.hero { overflow: hidden; overflow: clip; }
.hero__copy { text-align: center; padding-top: clamp(24px, min(4.4vw, 6vh), 60px); }
.hero .poster { --poster: clamp(1.875rem, 10.2vw, 2.75rem); }
@media (max-width: 359px) { .hero .poster { --poster: 9.6vw; } }
.hero .lead { margin: var(--space-5) auto 0; max-width: 36em; }
.hero__facts { margin-top: var(--space-5); }
@media (min-width: 768px) { .hero .poster { --poster: clamp(3rem, min(7.4vw, 12.4vh), 6.75rem); } }

.cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); }
@media (min-width: 560px) { .cta { flex-direction: row; justify-content: center; } }

.hero__film { position: relative; height: clamp(250px, 30vw, 400px); margin-top: clamp(28px, 2vw, 32px); }
.hero__film .strip { position: absolute; }
.strip--back { --sh: clamp(84px, 10vw, 140px); top: 4%; left: -6%; width: 112%; rotate: 6deg; }
.strip--front { --sh: clamp(150px, 17vw, 236px); top: 20%; left: -1%; width: 104%; rotate: -3deg; box-shadow: var(--shadow-raised); }
/* невысокие окна (ноутбук 1440×790, 1366×650, 1280×720; телефон 375×667): первый экран ужимается по
   высоте, чтобы лента пробы входила в окно; на 1440×900 и 390×844 вид прежний */
@media (min-width: 768px) and (max-height: 860px) {
  .hero .nav { height: clamp(60px, 9vh, 84px); }
  .hero__copy { padding-top: clamp(20px, min(4.4vw, 5vh), 60px); }
  .hero .poster { --poster: clamp(2.75rem, min(7.4vw, 11vh), 6.75rem); }
  .hero .lead { max-width: 46em; }
  .hero .cta { margin-top: clamp(18px, 3.4vh, 32px); }
  .hero__film { height: clamp(250px, min(30vw, 46vh), 400px); margin-top: clamp(0px, 1.6vh, 28px); }
  .strip--front { --sh: clamp(140px, min(17vw, 26vh), 236px); top: 14%; }
  .strip--back { --sh: clamp(84px, min(10vw, 15vh), 140px); }
}
@media (max-width: 559px) and (max-height: 740px) {
  .hero__copy { padding-top: var(--space-3); }
  .hero .lead { margin-top: var(--space-4); }
  .hero .cta { margin-top: var(--space-5); }
  .hero__facts { margin-top: var(--space-3); }
  .hero__film { margin-top: var(--space-2); }
  .strip--front { top: 10%; }
}

/* ---------- сцены ---------- */
.scene { padding-block: var(--scene); }
.band { background: var(--dark-0); }
.panel { overflow: hidden; overflow: clip; }
.grid { display: grid; gap: var(--space-9) var(--col-gap); align-items: center; }
@media (max-width: 899px) {
  .grid { max-width: 560px; margin-inline: auto; }
  .grid--text-first > :first-child { order: 2; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-object-l { grid-column: 1 / span 6; }
  .col-object-r { grid-column: 7 / span 6; grid-row: 1; }
  .col-text-r { grid-column: 8 / span 5; }
  .col-text-l { grid-column: 1 / span 6; grid-row: 1; }
  .plan__card.col-object-r, .plate__obj.col-object-r { grid-column: 8 / span 5; }
}

/* сцена: телефон на двух косых лентах */
.stage { position: relative; display: flex; justify-content: center; padding-block: var(--space-6); }
.stage .strip { position: absolute; left: -60%; width: 220%; --sh: 96px; }
.stage--a .strip:nth-of-type(1) { top: 16%; rotate: -13deg; }
.stage--a .strip:nth-of-type(2) { top: 58%; rotate: 9deg; }
.stage--b .strip:nth-of-type(1) { top: 24%; rotate: 11deg; }
.stage--b .strip:nth-of-type(2) { top: 66%; rotate: -7deg; }
.stage--c .strip:nth-of-type(1) { top: 8%; rotate: -6deg; }
.stage--c .strip:nth-of-type(2) { top: 70%; rotate: -17deg; }
@media (min-width: 900px) {
  .stage .strip { --sh: 128px; }
  /* ленты уходят за край страницы со стороны телефона и гаснут под ним, не доходя до текста */
  .panel .stage { overflow: hidden; overflow: clip; padding-block: var(--space-9); }
  /* --edge — от края окна до колонки: на экранах шире сетки сцена тянется до края окна, иначе лента обрывается на виду */
  .panel .stage { --edge: max(var(--gutter), calc((100vw - var(--page-max)) / 2)); }
  .panel .stage.col-object-l { margin-left: calc(var(--edge) * -1); padding-left: var(--edge); }
  .panel .stage.col-object-r { margin-right: calc(var(--edge) * -1); padding-right: var(--edge); }
  /* гаснет сама лента (маска вдоль её оси): маска на блоке сцены гасила бы и телефон */
  .panel .stage.col-object-l .strip { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 62%); mask-image: linear-gradient(90deg, #000 50%, transparent 62%); }
  .panel .stage.col-object-r .strip { -webkit-mask-image: linear-gradient(270deg, #000 50%, transparent 62%); mask-image: linear-gradient(270deg, #000 50%, transparent 62%); }
}

/* конверт */
.env { text-align: center; }
.env .lead { margin-inline: auto; }
.env__stage { position: relative; width: min(100%, 700px); margin: clamp(40px, 5vw, 72px) auto 0; }
/* края снимка гаснут в фон: прямоугольник кадра с тенью конверта не читается */
.env__img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 95%, transparent);
  mask-composite: intersect;
}

/* плашка пуша — единственный пуш продукта */
.push {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3);
  width: min(100%, 340px); margin: var(--space-4) auto 0; padding: var(--space-4); text-align: left;
  background: var(--dark-4); border: 1px solid var(--border-dark-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
}
.push img { width: 40px; height: 40px; border-radius: 10px; }
.push__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; color: var(--fg-2); }
.push strong { display: block; margin-top: 2px; font: 600 15px/1.3 var(--font-body); color: var(--fg-1); }
.push p { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
@media (min-width: 900px) {
  .push { position: absolute; right: max(-116px, calc(366px - 50vw)); top: 43%; margin: 0; rotate: 3deg; }
}

/* пластина: экран выдержки без лент (лента — предмет катушки) */
.plate__obj { display: flex; justify-content: center; }
.plate__data { margin-top: var(--space-6); color: var(--info); }

/* марки — список рядом с экраном кодекса */
.marks { margin-top: var(--space-7); border-top: 1px solid var(--border-dark); }
.marks article { padding-block: var(--space-4); border-bottom: 1px solid var(--border-dark); }
.marks__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.marks h3 { font: 600 var(--text-heading)/1.2 var(--font-body); color: var(--fg-1); }
.marks p { margin-top: var(--space-2); font-size: 15px; color: var(--fg-2); text-wrap: pretty; }

/* ---------- карта абонемента системы (components/film/MembershipCard.jsx, код — DkMembershipCard) статикой ---------- */
.plan__card { width: 100%; max-width: 420px; margin-inline: auto; }
@media (min-width: 900px) { .plan__card { margin-inline: 0; } }
@media (min-width: 1100px) { .plan__card { max-width: 520px; } .mcard { zoom: 1.2; } }
.mcard {
  position: relative; display: flex; min-width: 280px; overflow: hidden;
  border: 1px solid rgba(242, 237, 228, .14); border-radius: 20px;
  background: radial-gradient(120% 70% at 18% -10%, rgba(240, 233, 220, .09), transparent 60%), linear-gradient(168deg, #26231f 0%, var(--dark-2) 55%, #141312 100%);
  box-shadow: inset 0 1px 0 rgba(240, 233, 220, .09), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .5), 0 6px 10px -6px rgba(0, 0, 0, .7), 0 22px 40px -16px rgba(0, 0, 0, .85);
}
.mcard__holes {
  flex: 0 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 6px 0;
  border-right: 1px solid rgba(0, 0, 0, .55);
  background: linear-gradient(90deg, #1b1917, var(--dark-3));
  box-shadow: inset -1px 0 0 rgba(242, 237, 228, .05), inset 2px 0 4px rgba(0, 0, 0, .5);
}
.mcard__holes i {
  width: 6px; height: 9px; border-radius: 1.5px; background: var(--dark-1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), inset 0 -1px 0 rgba(242, 237, 228, .08), 0 1px 0 rgba(242, 237, 228, .06);
}
.mcard__body { flex: 1; min-width: 0; padding: 14px 16px 13px 14px; }
.mcard__seal {
  display: flex; align-items: center; gap: 7px;
  font: 400 9px/1.45 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
}
.mcard__seal i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 6px rgba(224, 188, 119, .5); }
.mcard__title { margin-top: 5px; font-size: 15.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.mcard__meta { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--fg-3); }
.mcard__perks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-dark);
}
.mcard__perks li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.3; color: var(--fg-2); }
.mcard__perks svg { flex: none; color: var(--amber-400); }

/* приватность — афиша по центру */
.quiet { text-align: center; }
.statement { margin: var(--space-7) auto 0; font: 600 var(--text-heading)/1.3 var(--font-body); color: var(--fg-1); }
.quiet .lead { margin: var(--space-4) auto 0; }
@media (min-width: 900px) { .statement { font-size: var(--text-title); } }

/* ---------- финал — жест первого экрана: афиша и кнопки сверху, предметы уходят за нижний край ---------- */
.final { padding-bottom: 0; text-align: center; overflow: hidden; overflow: clip; }
.final .poster { --poster: clamp(1.875rem, 10.2vw, 2.75rem); }
@media (max-width: 359px) { .final .poster { --poster: 9.6vw; } } /* после базового правила: та же специфичность */
.final .lead { margin-inline: auto; }
.stage--final { display: block; padding-block: var(--space-9) 0; margin-top: var(--space-6); }
.stage--final .strip { left: min(-20%, calc(50% - 58vw)); width: max(140%, 116vw); }
.stage--final .strip:nth-of-type(1) { top: 16%; rotate: -13deg; }
.stage--final .strip:nth-of-type(2) { top: 58%; rotate: 9deg; }
.duo { --dw: min(76vw, 300px); position: relative; height: calc(var(--dw) * 3.02); max-width: 420px; margin-inline: auto; }
.duo .phone { --w: var(--dw); position: absolute; }
.duo .phone:nth-of-type(1) { left: 0; top: 0; rotate: -2deg; }
.duo .phone:nth-of-type(2) { right: 0; top: calc(var(--dw) * 1.4); rotate: 2deg; }
@media (min-width: 900px) {
  .final .poster { --poster: clamp(3rem, 6.4vw, 5.75rem); }
  .stage--final { padding-top: var(--space-10); }
  .duo { --dw: clamp(290px, 28vw, 400px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(32px, 5vw, 72px); height: calc(var(--dw) * 1.64); max-width: none; }
  .duo .phone { position: relative; }
  .duo .phone:nth-of-type(1) { left: auto; top: calc(var(--dw) * .14); rotate: -3deg; }
  .duo .phone:nth-of-type(2) { right: auto; top: 0; rotate: 3deg; }
}
/* окно фотографии на снимке экрана кадра 01, в долях снимка */
.phone--develop { --print-t: 28.9%; --print-x: 16.3%; --print-b: 35.4%; }
/* само окно: по нему site.js решает, что отпечаток вошёл в окно; в нём два готовых слоя —
   муть и полурезкость (tools/mud.mjs), по умолчанию невидимые */
.phone__print { position: absolute; inset: var(--print-t) var(--print-x) var(--print-b); overflow: hidden; border-radius: 2px; pointer-events: none; }
.phone__print img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* ---------- подвал ---------- */
.footer { border-top: 1px solid var(--border-dark); padding-block: var(--space-8) var(--space-9); }
.footer__in { display: flex; flex-direction: column; gap: var(--space-6); }
.footer__mark { display: block; font-size: 24px; line-height: 1; }
.footer__mark + .data { display: block; margin-top: var(--space-2); }
.footer__links { display: flex; flex-direction: column; font-size: 15px; }
.footer__links a { display: flex; align-items: center; min-height: 44px; color: var(--fg-2); transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .footer__links a:hover { color: var(--fg-1); } }
@media (min-width: 768px) {
  .footer__in { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .footer__links { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-7); }
  .footer__links a { min-height: 0; }
}

/* ============================================================
   ДВИЖЕНИЕ — DESIGN §6: темпы 160 / 320 / 700 / 1400, easeOut и easeInOut, ничего не
   пружинит и не перелетает, «проступает, а не вспыхивает». Без скрипта и под Reduce Motion
   страница стоит в виде макета; под Reduce Motion остаётся только проступание.
   ============================================================ */

/* сцена 3 (проявление без сдвига работает и под Reduce Motion): конверт проступает из
   темноты за 700 мс, плашка пуша — следом за 320 мс */
.js .env__img { transition: opacity var(--dur-slow) var(--ease-in-out); }
.js .push { transition: opacity var(--dur-med) var(--ease-out) var(--dur-slow), translate var(--dur-med) var(--ease-out) var(--dur-slow); }
.js .env__stage:not(.is-in) .env__img, .js .env__stage:not(.is-in) .push { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .env__stage:not(.is-in) .push { translate: 0 8px; }

  /* сцена 1: лента первого экрана проступает и сдвигается вдоль своей оси на 24 px */
  .hero__film .strip { animation: fade-in var(--dur-slow) var(--ease-out) both; }
  .hero__film .strip__film { animation: film-in var(--dur-slow) var(--ease-out) both; }
  .strip--back .strip__film { --slide: -24px; }

  /* сцена 2: ленты едут вдоль оси вместе с прокруткой, кромочные номера считают кадры.
     Две ленты сцены идут навстречу. Ход привязан к прокрутке самим браузером; где такой
     привязки нет, долю хода --p ставит site.js. */
  .stage { view-timeline: --stage block; }
  .strip__film { --run: calc(var(--sh) * -2.4); --from: 0px; --to: var(--run); }
  .stage .strip:nth-of-type(2) > .strip__film { --from: var(--run); --to: 0px; }
  .strip--back > .strip__film { --run: calc(var(--sh) * -1.6); --from: var(--run); --to: 0px; }
  .strip--front > .strip__film { --run: calc(var(--sh) * -1.1); --from: 0px; --to: var(--run); }

  /* 1ms у хода — не время, а условие: без ненулевой длительности привязанная к прокрутке
     анимация в Firefox не идёт; браузеры с длительностью auto это число не замечают */
  @supports (animation-timeline: view()) {
    .stage .strip__film { animation: film-run 1ms linear both; animation-timeline: --stage; }
    /* Лента первого экрана на iPhone и iPad с прокруткой не едет (.hero-still ставит site.js):
       Safari на iOS обновляет привязанную к прокрутке анимацию на 60 Гц, а страницу
       прокручивает на 120 — крупная лента во весь экран заметно дёргалась. Решение
       пользователя 2026-11-15 после сравнения на iPhone: остановить только её, ленты за
       телефонами едут. Вход ленты при загрузке (сцена 1) остаётся: он идёт по времени. */
    :root:not(.hero-still) .hero__film .strip__film {
      animation: film-in var(--dur-slow) var(--ease-out) both, film-run 1ms linear both;
      animation-timeline: auto, scroll(root block);
      animation-range-start: normal, 0px; animation-range-end: normal, 130vh;
    }
  }
  .no-sda .strip__film { translate: calc(var(--from) + (var(--to) - var(--from)) * var(--p, 0)) 0; }
  .hero-still .hero__film .strip__film { translate: none; }
  /* плёнка рядом с окном живёт своим слоем: ход меняет только сдвиг слоя, ленту не перерисовывает */
  .is-live .strip__film { will-change: transform, translate; }
  .hero-still .hero__film .strip__film { will-change: auto; }

  /* сцена 4: кадр 01 один раз проступает из мути в резкость за 1400 мс. Радиус размытия не
     анимируется (на iPhone финал от этого замирал): над отпечатком два готовых слоя, муть
     гаснет первой, полурезкость — следом с перехлёстом; меняется только прозрачность */
  .js .phone--develop:not(.is-in) .phone__print img { opacity: 1; }
  .js .phone--develop.is-in .phone__mud { animation: fade-out calc(var(--dur-reveal) * .6) var(--ease-in-out) both; }
  .js .phone--develop.is-in .phone__soft { animation: fade-out calc(var(--dur-reveal) * .65) var(--ease-in-out) calc(var(--dur-reveal) * .35) both; }
}

@media (prefers-reduced-motion: reduce) {
  /* шапка только проступает, без сдвига */
  .topbar { translate: none; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes film-in { from { transform: translateX(var(--slide, 24px)); } }
@keyframes film-run { from { translate: var(--from) 0; } to { translate: var(--to) 0; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }