/* Montserrat (OFL) — the display face of the brand book and promo videos; covers Kazakh. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/montserrat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Golos Text, self-hosted (OFL), cyrillic-ext covers Kazakh. */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/golos-text-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/golos-text-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/golos-text-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/golos-text-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ══════════════════════════════════════════════════════════════
   TAMYR — главная. Мир приложения: лавандовый фон, белые карточки
   со скруглением, фиолетовый, знак Tamyr как единственный мотив.
   Цвета сняты с экранов приложения в App Store.
   Сопровождающие страницы (оферта и т.д.) живут на style.css.
   ══════════════════════════════════════════════════════════════ */

:root {
  --lav:      #f2ecf8;   /* фон приложения */
  --lav-2:    #e8dff4;
  --lav-3:    #ddd3ec;   /* круг за телефоном в приложении → знак */
  --ink:      #151424;
  --ink-2:    #45435a;
  --ink-3:    #6b6880;
  --purple:   #7951b7;   /* брендбук: R121 G81 B183 = кнопки приложения */
  --purple-d: #61409a;
  --purple-l: #a98ddb;   /* линии знака на фиолетовом */
  --grey:     #f3f4f8;   /* фон экранов приложения */
  --yellow:   #ffd56f;

  --r-panel: 40px;
  --r-card:  28px;
  --r-btn:   16px;

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --gutter: clamp(20px, 4vw, 56px);
  --fs-display: clamp(42px, 6.4vw, 96px);
  --fs-h2:      clamp(32px, 4.2vw, 60px);
  --fs-lead:    clamp(18px, 1.45vw, 21px);
  --display: 'Montserrat', 'Golos Text', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--purple) var(--lav); }
body {
  margin: 0;
  background: var(--lav);
  color: var(--ink);
  font: 400 17px/1.55 'Golos Text', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
.bar :focus-visible, .hero :focus-visible, .stat :focus-visible, .finale :focus-visible, .lost :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h2 { margin: 0 0 12px; font: 800 var(--fs-h2)/1.04 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.lead { margin: 0; font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.note { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-btn);
  font: 700 17px/1.1 'Golos Text', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--app     { background: var(--ink); color: #fff; }
.btn--primary { background: var(--purple); color: #fff; }
.btn--light   { background: #fff; color: var(--ink); }
.btn--ghost   { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.store-badge { display: inline-flex; border-radius: 10px; transition: transform 160ms var(--ease-out); }
.store-badge img { height: 54px; width: auto; }
.store-badge:active { transform: scale(.97); }
.hero-venue { flex-basis: 100%; padding-block: 4px; font-weight: 600; font-size: 16px; color: var(--purple-d); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--app:hover     { background: #2b2940; }
  .btn--primary:hover { background: var(--purple-d); }
  .btn--light:hover   { background: var(--lav); }
  .btn--ghost:hover   { background: rgba(255,255,255,.1); }
  .btn--outline:hover { background: var(--ink); color: #fff; }
  a:not(.btn):hover { color: var(--purple); }
  /* На фиолетовом поле фиолетовый ховер пропал бы — там жёлтый */
  .bar a:not(.btn):not(.ls-lang-btn):hover, .hero a:not(.btn):hover, .finale a:not(.btn):hover, .lost a:not(.btn):hover { color: var(--yellow); }
  .ls-lang-btn:not(.active):hover { color: #fff; background: rgba(255, 255, 255, .2); }
  .ls-lang-btn.active:hover { color: var(--purple-d); }
}

/* ── Верхняя панель + первый экран: одно фиолетовое поле ─────── */
.bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px max(var(--gutter), calc((100% - 1328px) / 2));
  background: var(--purple);
  color: #fff;
}
.bar-logo img { height: 34px; width: auto; }
.bar-nav { display: flex; align-items: center; gap: 22px; }
.bar-link { font-weight: 600; font-size: 15px; text-decoration: none; color: #fff; }
.lang { display: flex; gap: 2px; padding: 4px; background: rgba(255, 255, 255, .14); border-radius: 999px; }
.ls-lang-btn {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  font: 600 14px 'Golos Text', sans-serif;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.ls-lang-btn.active { background: #fff; color: var(--purple-d); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 24px;
  padding: 8px max(var(--gutter), calc((100% - 1328px) / 2)) 88px;
  min-height: min(calc(100svh - 82px), 900px);
  overflow: clip;
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  background: var(--purple);
  color: #fff;
}
.hero-copy { position: relative; z-index: 2; }
.hero-h { margin: 0 0 26px; font: 800 var(--fs-display)/.98 var(--display); letter-spacing: -.04em; }
.hero-h > span { display: block; }
.hero-h-accent { color: var(--yellow); }
.hero-sub { margin: 0 0 34px; max-width: 34ch; font-size: var(--fs-lead); line-height: 1.5; color: #f3edfb; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-note { margin: 0; font-size: 15px; font-weight: 500; color: #ebe2f7; }
.hero .hero-venue { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .25em; }
/* Четыре факта, снимающие риск: платить при получении, бесплатно, без регистрации, где работаем */
.perks { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 28px; margin: -10px 0 36px; padding: 0; list-style: none; font-size: 16px; font-weight: 600; }
.perks li { display: flex; align-items: center; gap: 10px; }
.perks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
/* QR — только там, где телефон не в руке: на компьютере */
.qr { display: inline-flex; align-items: center; gap: 12px; max-width: 220px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; text-decoration: none; }
.qr img { flex: none; width: 88px; height: 88px; border-radius: 12px; }
@media (hover: none), (max-width: 960px) { .qr { display: none; } }
.android-note { flex-basis: 100%; padding-block: 4px; font-size: 15px; font-weight: 600; color: #ebe2f7; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: .25em; }
/* На iPhone ссылка про Android лишняя; на Android App Store бесполезен — вместо него кнопка в форму */
.is-ios .android-note, .is-android .store-badge, .is-android .qr { display: none; }
.is-android .android-note { display: flex; align-items: center; min-height: 56px; max-width: 420px; padding: 12px 22px; line-height: 1.3; text-wrap: balance; border-radius: var(--r-btn); background: var(--yellow); color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; transition: transform 160ms var(--ease-out); }
.is-android .android-note:active { transform: scale(.97); }

.hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 24px 0;
}
/* Знак, нарисованный линией, — приём брендбука (канцелярия, пакет) */
.lineart { position: absolute; z-index: 0; overflow: visible; fill: none; stroke: var(--purple-l); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.lineart path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lineart--hero { top: 50%; left: 55%; width: min(150%, 1080px); transform: translate(-50%, -54%); opacity: .7; }
.motif {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(118%, 920px);
  aspect-ratio: 163 / 127;
  background: var(--lav-3);
  -webkit-mask: url(/assets/mark.svg) center / contain no-repeat;
          mask: url(/assets/mark.svg) center / contain no-repeat;
  transform: translate(-50%, -50%);
}
/* Бокси садится у телефона: появляется пружинкой, потом дышит */
.hero-boksi { position: absolute; z-index: 2; left: max(-8%, calc(50% - 330px)); bottom: 4%; width: clamp(150px, 16vw, 230px); }
.hero-boksi img { position: relative; z-index: 1; width: 100%; }
.hero-boksi-shadow { position: absolute; left: 12%; right: 12%; bottom: -4%; height: 14%; border-radius: 50%; background: rgba(21, 20, 36, .32); filter: blur(10px); }
.hero-caption { position: relative; z-index: 1; margin-top: 18px; font-size: 13px; font-weight: 500; color: #ebe2f7; }

/* Телефон: интерфейс приложения, собранный в HTML (пример данных) */
.phone {
  position: relative;
  z-index: 1;
  width: clamp(250px, 24vw, 330px);
  aspect-ratio: 9 / 19.3;
  padding: 10px;
  border-radius: 48px;
  background: var(--ink);
  box-shadow: 0 50px 80px -40px rgba(21, 20, 36, .55), 0 18px 30px -18px rgba(21, 20, 36, .35); /* the phone floats over the motif. taste-skill-ignore */
  container-type: inline-size;
}
.phone-screen {
  position: relative;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 39px;
  background: var(--grey);
  font-size: 4cqi;
  line-height: 1.3;
}
.phone-screen::before { content: ''; position: absolute; z-index: 3; top: 2.4%; left: 50%; width: 31%; height: 3.6%; border-radius: 999px; background: var(--ink); transform: translateX(-50%); }
.phone--story .ui-status { position: relative; z-index: 2; transition: color 200ms ease; }
.phone--story[data-on="1"] .ui-status { color: #fff; }
.ui-status { display: flex; justify-content: space-between; align-items: center; padding: 1.3em 2em .5em; font-weight: 700; font-size: 1.05em; }
.ui-status svg { width: 4.4em; fill: currentColor; }
.ui-top { display: flex; justify-content: space-between; align-items: center; padding: .5em 1.5em; }
.ui-city { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: 1.05em; }
.ui-city svg { width: 1.25em; }
.ui-search { width: 1.6em; }
.ui-filters { display: flex; gap: .4em; padding: .5em 1.2em .3em; }
.ui-pill { padding: .5em .85em; border-radius: 999px; background: #fff; font-weight: 600; font-size: .88em; color: var(--ink-3); white-space: nowrap; }
.ui-pill.is-on { background: var(--purple); color: #fff; }
.ui-promo { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: .6em 1.1em 0; padding: .85em 1.1em; border-radius: 1.3em; background: var(--ink); color: #fff; }
.ui-promo b { display: block; font-size: 1.02em; }
.ui-promo span { font-size: .82em; color: #c9c6d8; }
.ui-promo img { width: 3.2em; flex: none; margin: -.6em -.2em -.6em 0; }
.ui-deal { position: relative; margin: .65em 1.1em 0; overflow: hidden; border-radius: 1.3em; background: #fff; }
.ui-deal-photo { position: relative; height: 6.2em; }
.ui-deal-photo img { width: 100%; height: 100%; object-fit: cover; }
.ui-deal-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(10, 8, 20, .62)); } /* scrim under white text on a photo. taste-skill-ignore */
.ui-avatar {
  position: absolute; z-index: 1; left: .7em; bottom: .6em;
  display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: #c9533a; color: #fff; font-weight: 700; font-size: .85em;
}
.ui-avatar--ink { background: #5b3b2e; }
.ui-avatar--green { background: #3d7a4f; }
.ui-venue { position: absolute; z-index: 1; left: 3.2em; bottom: .85em; color: #fff; font-weight: 700; font-size: .95em; }
.ui-deal-body { display: flex; justify-content: space-between; align-items: flex-end; padding: .65em .9em .75em; }
.ui-left { display: inline-block; padding: .2em .6em; border-radius: 999px; background: #efe8f8; color: var(--purple); font-weight: 600; font-size: .82em; }
.ui-window { display: block; margin-top: .35em; font-size: .85em; color: var(--ink-3); }
.ui-prices { text-align: right; }
.ui-prices s { display: block; font-size: .82em; color: var(--ink-3); }
.ui-prices b { font-weight: 800; font-size: 1.35em; color: var(--purple); }
.ui-status-pill { position: absolute; top: .6em; right: .6em; padding: .3em .7em; border-radius: 999px; background: #fff; font-weight: 700; font-size: .78em; }
.ui-status-pill[data-state="until"] { background: var(--yellow); }
.ui-status-pill[data-state="done"]  { color: var(--ink-3); }
.ui-tabs { display: flex; justify-content: space-around; margin-top: auto; padding: .6em 0 1.5em; background: #fff; }
.ui-tabs > span { display: flex; flex-direction: column; align-items: center; gap: .15em; font-weight: 600; font-size: .74em; color: var(--ink-3); }
.ui-tabs svg { width: 1.9em; }
.ui-tabs .is-on { color: var(--purple); }

/* ── Один вечер ───────────────────────────────────────────────── */
.evening {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px clamp(24px, 4vw, 64px);
  align-items: center;
  margin: 0 clamp(8px, 1.4vw, 20px);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  border-radius: var(--r-panel);
  background: #fff;
  scroll-margin-top: 12px;
}
.evening-copy .lead { margin-bottom: 28px; }
.steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 240ms ease, transform 160ms var(--ease-out);
}
.step:active { transform: scale(.985); }
.step.is-on { background: var(--lav); }
.step-time { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--lav); color: var(--purple); font-weight: 800; font-size: 16px; transition: background-color 240ms ease, color 240ms ease; }
.step.is-on .step-time { background: var(--purple); color: #fff; }
.step-body { display: grid; gap: 2px; padding-top: 3px; }
.step-h { font: 800 19px/1.25 var(--display); letter-spacing: -.02em; }
.step-desc { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .step:not(.is-on):hover { background: #f8f5fc; } }
.step-caption { display: none; }

.evening-stage { position: relative; display: flex; justify-content: center; margin: 0; padding: 24px 0; }
.evening-stage .motif { top: 50%; left: 50%; width: min(105%, 640px); background: var(--lav); }
.scr-stack { position: relative; flex: 1; }
.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(10px) scale(.985);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out), filter 260ms var(--ease-out), visibility 0s linear 260ms;
}
.scr.is-on { opacity: 1; filter: none; transform: none; visibility: visible; transition-delay: 0s; }
.scr-h { margin: .4em 1.3em .1em; font-weight: 800; font-size: 1.35em; }
.ui-deal.is-dim { opacity: .55; }
.ui-status-pill--new { background: var(--purple); color: #fff; }
.scr-photo { height: 11em; margin: -3.2em 0 0; }
.scr-photo img { width: 100%; height: 100%; object-fit: cover; }
.scr-sheet { flex: 1; display: flex; flex-direction: column; margin-top: -1.2em; padding: 1.2em 1.3em 1.4em; border-radius: 1.4em 1.4em 0 0; background: #fff; }
.scr-facts { margin: 1em 0 0; padding: 0; list-style: none; display: grid; gap: .55em; font-size: .92em; }
.scr-facts li { display: flex; gap: .55em; align-items: flex-start; }
.scr-facts li::before { content: ''; flex: none; width: .55em; height: .55em; margin-top: .45em; border-radius: 50%; background: var(--purple); }
.scr-venue { margin: 0; font-weight: 800; font-size: 1.3em; }
.scr-sub { margin: .2em 0 0; color: var(--ink-3); font-size: .95em; }
.scr-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1em; padding: .8em .9em; border-radius: 1em; background: var(--grey); font-weight: 600; }
.scr-btn { display: block; margin-top: auto; padding: .85em; border-radius: .9em; background: var(--purple); color: #fff; font-weight: 700; text-align: center; }
.scr--done { align-items: center; justify-content: center; padding: 0 1.4em 2em; text-align: center; }
.scr-addr { display: flex; align-items: center; gap: .4em; margin: .7em 0 0; font-size: .9em; color: var(--ink-2); }
.scr-addr svg { width: 1.2em; flex: none; color: var(--purple); }
.scr-important { display: grid; gap: .2em; margin: .9em 0 1em; padding: .75em .9em; border-radius: 1em; background: var(--grey); font-size: .85em; color: var(--ink-2); }
.scr-important b { color: var(--ink); }
.scr-ticket { display: grid; justify-items: center; margin: .6em 1.1em 0; padding: 1.3em 1em 1.2em; border-radius: 1.3em; background: #fff; }
.scr-ticket .scr-code { margin: 0 0 .1em; }
.scr-ticket .scr-hint { margin-top: .6em; }
.scr-order { margin: .7em 1.1em 0; padding: 1em 1.1em 1.1em; border-radius: 1.3em; background: #fff; }
.scr-order .scr-row { margin-top: .7em; }
.scr-order { overflow: hidden; }
.scr-order-photo { height: 7.5em; margin: -1em -1.1em 1em; }
.scr-order-photo img { width: 100%; height: 100%; object-fit: cover; }
.scr-code { margin: .25em 0 .3em; font-weight: 900; font-size: 3.6em; letter-spacing: .08em; color: var(--ink); }
.scr-code--word { font-size: 2.2em; letter-spacing: -.01em; }
.scr-hint { margin: 1em 0 0; padding: .55em 1em; border-radius: 999px; background: var(--yellow); font-weight: 700; font-size: .95em; }
.scr--done .scr-hint { background: transparent; padding: 0; font-weight: 500; color: var(--ink-2); }
.scr-check { display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 50%; background: var(--yellow); }
.scr-check svg { width: 2.2em; }
.phone--story { width: clamp(250px, 22vw, 310px); }

/* ── Что в Бокси ──────────────────────────────────────────────── */
.boksi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(80px, 11vw, 160px) var(--gutter);
}
.boksi-photo img {
  width: 100%;
  aspect-ratio: 163 / 127;
  object-fit: cover;
  -webkit-mask: url(/assets/mark.svg) center / contain no-repeat;
          mask: url(/assets/mark.svg) center / contain no-repeat;
}
.boksi-copy .lead { color: var(--purple); font-weight: 700; font-size: 22px; }
/* Чек: оторванный низ (маска-зигзаг), калькулятор — его последняя строка под перфорацией */
.receipt {
  max-width: 460px;
  margin: 28px 0 26px;
  padding: 26px 28px 40px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #fff;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; /* taste-skill-ignore: mask that tears the receipt edge, not a fill */
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; /* taste-skill-ignore: mask that tears the receipt edge, not a fill */
}
.receipt-h { margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--ink-3); }
.receipt-items { margin: 0; padding: 0; list-style: none; }
.receipt-items li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 17px; }
.receipt-items .is-muted { color: var(--ink-3); }
.receipt-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 14px; padding: 14px 18px; border-radius: 18px; background: var(--lav); font-size: 15px; }
.receipt-total s { color: var(--ink-3); }
.receipt-now b { font-weight: 800; font-size: 22px; color: var(--purple); }
.calc { margin-top: 24px; padding-top: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Ccircle cx='6' cy='2.5' r='2' fill='%23ddd3ec'/%3E%3C/svg%3E") 0 0 / 12px 5px repeat-x; }
.calc-h { margin: 0 0 10px; font-weight: 700; font-size: 17px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.calc-row output { font: 800 22px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc input { display: block; width: 100%; height: 44px; margin: 2px 0 6px; accent-color: var(--purple); cursor: pointer; }
.calc-result { margin: 0; font-size: 16px; color: var(--ink-2); }
.calc-result span { white-space: nowrap; }
.calc-result b { margin-right: 6px; font: 800 clamp(30px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.02em; color: var(--purple); font-variant-numeric: tabular-nums; }
.calc-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-3); }

/* ── Одна цифра ───────────────────────────────────────────────── */
.stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px clamp(24px, 5vw, 72px);
  margin: 0 clamp(8px, 1.4vw, 20px);
  padding: clamp(64px, 9vw, 140px) var(--gutter);
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--purple);
  color: #fff;
}
.stat::after {
  content: '';
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 52%;
  aspect-ratio: 163 / 127;
  background: rgba(255, 255, 255, .09);
  -webkit-mask: url(/assets/mark.svg) center / contain no-repeat;
          mask: url(/assets/mark.svg) center / contain no-repeat;
}
.stat > * { position: relative; z-index: 1; }
.stat-num { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(120px, 17vw, 250px); line-height: .8; color: var(--yellow); }
.stat-text { margin: 0; max-width: 26ch; font-weight: 700; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.015em; }
.stat-text b { font-weight: 800; }
.stat-src { grid-column: 2; margin: 0; font-size: 15px; font-weight: 500; color: #fbf8ff; }
/* Ролик бренда (вертикальный, без звука) — справа от цифры */
/* Две колонки: слева цифра и фраза, справа широкий ролик (16:9) */
.stat:has(.film) { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: 1fr auto auto auto 1fr; gap: 14px clamp(32px, 4vw, 64px); padding-block: clamp(48px, 6vw, 88px); }
.stat:has(.film) .stat-num { grid-column: 1; grid-row: 2; }
.stat:has(.film) .stat-text { grid-column: 1; grid-row: 3; font-size: clamp(22px, 2.1vw, 30px); }
.stat:has(.film) .stat-src { grid-column: 1; grid-row: 4; }
.film { position: relative; grid-column: 2; grid-row: 1 / -1; align-self: center; width: 100%; }

/* ── Живой ролик ──────────────────────────────────────────────────
   Не видео: сцены прямо на фиолетовом поле, всё в единицах ширины
   ролика (cqi), поэтому композиция масштабируется целиком. Три сцены —
   3D-арт онбординга приложения в одинаковых карточках (Бокси и слоган
   остаются финалу страницы). main.js ставит сценам .is-on / .is-out; шаги
   отмечаются сами, по задержкам. Текст белый: на этой панели жёлтая
   только ⅓. Сцена входит снизу из размытия, уходит вверх; «уменьшить
   движение» — только наплыв. Карточки покачиваются свойством translate,
   чтобы не спорить с transform входа. */
.reel { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; color: #fff; pointer-events: none; }
.reel.is-paused * { animation-play-state: paused !important; }
.reel-sc { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s linear 700ms; }
.reel-sc.is-on, .reel-sc.is-out { visibility: visible; transition-delay: 0s; }
.reel-sc > * { position: absolute; opacity: 0; transform: translateY(5cqi); filter: blur(6px); transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out), filter 600ms var(--ease-out); }
.reel-sc.is-on > * { opacity: 1; transform: none; filter: none; }
.reel-sc.is-on > :nth-child(2) { transition-delay: 140ms; }
.reel-sc.is-out > * { opacity: 0; transform: translateY(-3cqi); filter: blur(6px); transition-duration: 450ms; transition-delay: 0s; }
@keyframes reel-float { from { translate: 0 0; } to { translate: 0 -1.2cqi; } }

.reel-copy { top: 0; bottom: 0; left: 0; width: 54cqi; display: flex; flex-direction: column; justify-content: center; gap: 2cqi; }
.reel-t { margin: 0; font: 800 5.6cqi/1.04 var(--display); letter-spacing: -.035em; }
.reel-t span, .reel-t b { display: block; }
.reel-t b { font-weight: 800; }
.reel-sc--1 .reel-t span { font-weight: 800; font-size: 3.3cqi; line-height: 1.2; letter-spacing: -.01em; }
.reel-sc--1 .reel-t b { margin: .8cqi 0; font-weight: 900; font-size: 6.8cqi; line-height: 1.02; }
.reel-sub { margin: 0; max-width: 38cqi; font-size: 2.3cqi; font-weight: 500; line-height: 1.45; color: #ebe2f7; }
.reel-art { top: 9cqi; right: 2cqi; width: 38cqi; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-card); animation: reel-float 4s var(--ease-in-out) infinite alternate; }
.reel-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-art--map { top: 6cqi; right: 5cqi; width: 33cqi; aspect-ratio: 560 / 747; }
.reel-art--steps { top: 10cqi; width: 40cqi; aspect-ratio: 720 / 640; }

.reel-sc--3 .reel-copy { gap: 3cqi; }
.reel-sc--3 .reel-t { font-size: 4.8cqi; }
.reel-steps { display: grid; gap: 2.2cqi; margin: 0; padding: 0; list-style: none; font: 800 2.9cqi/1.15 var(--display); letter-spacing: -.01em; }
.reel-steps li { display: flex; align-items: center; gap: 1.8cqi; }
.reel-n { position: relative; display: grid; place-items: center; flex: none; width: 4.4cqi; height: 4.4cqi; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 1.9cqi; }
.reel-n::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23151424' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 60%; opacity: 0; transform: scale(.6); transition: opacity 300ms var(--ease-out), transform 450ms var(--ease-out); }
.reel-sc--3.is-on .reel-n::after { opacity: 1; transform: none; transition-delay: 700ms; }
.reel-sc--3.is-on li:nth-child(2) .reel-n::after { transition-delay: 1500ms; }
.reel-sc--3.is-on li:nth-child(3) .reel-n::after { transition-delay: 2300ms; }

.reel-pause { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; opacity: .7; cursor: pointer; transition: opacity 200ms ease, background-color 200ms ease; }
.reel-pause svg { width: 16px; height: 16px; fill: currentColor; }
.reel-pause[aria-pressed="false"] .reel-ico-play, .reel-pause[aria-pressed="true"] .reel-ico-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .reel-pause:hover { opacity: 1; background: rgba(255, 255, 255, .24); } }
.reel-pause:focus-visible { opacity: 1; }

/* ── Для заведений ────────────────────────────────────────────── */
.venue { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 11vw, 160px) var(--gutter) 40px; scroll-margin-top: 12px; }
.venue-panel { display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden; border-radius: var(--r-panel); background: var(--ink); color: #fff; }
.venue-copy { padding: clamp(24px, 5vw, 72px); }
.venue-copy .lead { color: #dcd8ea; max-width: 44ch; }
.venue-perks { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.35; }
.venue-perks li { display: flex; gap: 12px; }
.venue-perks li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23151424' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.terms-draft { display: inline-block; margin: 32px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 213, 111, .16); color: var(--yellow); font-weight: 600; font-size: 14px; }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 20px 0 24px; }
.terms dt { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #aaa6c2; }
.terms dd { margin: 0; font-size: 17px; font-weight: 600; }
.venue-note { margin: 0; font-size: 15px; color: #cfcbe0; max-width: 52ch; }
.venue-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.venue-photo { width: 100%; height: 100%; min-height: 380px; object-fit: cover; object-position: 22% 50%; }

/* ── Подписка и связь ─────────────────────────────────────────── */
.signup {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px var(--gutter) clamp(80px, 10vw, 140px);
  scroll-margin-top: 12px;
}
.signup-card { padding: clamp(28px, 4vw, 56px); border-radius: var(--r-panel); background: #fff; }
.signup-card .h2 { font-size: 36px; }
.role { display: inline-flex; gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 999px; background: var(--lav); }
.ls-role-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 15px 'Golos Text', sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.ls-role-btn:active { transform: scale(.97); }
.ls-role-btn.active { background: #fff; color: var(--ink); }
.ls-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 14px; }
.ls-input {
  flex: 1 1 240px;
  min-height: 56px;
  padding: 0 18px;
  border: 2px solid var(--lav-3);
  border-radius: var(--r-btn);
  background: var(--lav);
  font: 400 17px 'Golos Text', sans-serif;
  color: var(--ink);
  caret-color: var(--purple);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.ls-input::placeholder { color: var(--ink-3); }
.ls-input:focus { outline: none; border-color: var(--purple); background: #fff; }
.ls-success { display: none; margin: 16px 0 0; font-weight: 700; font-size: 17px; color: var(--purple); }
.ls-success.is-visible { display: block; }
.ls-error { margin: 12px 0 0; font-weight: 600; color: #b42318; }
.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-panel);
  background: var(--lav-2);
}
.contact-h { margin: 0 0 8px; font: 800 22px/1.2 var(--display); letter-spacing: -.02em; }
.contact-social { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.contact-social span { display: block; margin-bottom: 2px; }
.contact-social a { font-weight: 600; color: var(--purple-d); }

/* ── Подвал ───────────────────────────────────────────────────── */
.foot { padding: 48px var(--gutter) 40px; background: var(--lav-2); }
.foot > * { max-width: 1328px; margin-inline: auto; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.foot-logo { height: 40px; width: auto; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-legal a { font-weight: 600; font-size: 15px; }
.foot-req { margin-top: 26px; margin-bottom: 18px; font-size: 15px; color: var(--ink-2); }
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.foot-pay p { flex-basis: 100%; max-width: 75ch; margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.card-mark { padding: 6px 10px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.foot-credits { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.foot-credits p { margin: 0; font-weight: 600; }
.foot-credits ul { display: contents; }
.foot-credits li { list-style: none; }

/* ── Настоящие экраны приложения ──────────────────────────────── */
.screens { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(64px, 8vw, 110px); }
.screens-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.screens-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; }
.shot { padding: 8px; border-radius: 38px; background: var(--ink); box-shadow: 0 40px 60px -36px rgba(21, 20, 36, .5); } /* phones float. taste-skill-ignore */
.shot img { width: 100%; border-radius: 31px; }
.shot:nth-child(1) { --d: 48px; }
.shot:nth-child(2) { --d: -28px; }
.shot:nth-child(3) { --d: 64px; }
.shot:nth-child(4) { --d: -12px; }
.shot { transform: translateY(var(--d)); }

/* ── Финал: слоган бренда ─────────────────────────────────────── */
.finale {
  position: relative;
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  align-items: center;
  gap: 24px;
  margin: 0 clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px);
  padding: clamp(64px, 9vw, 130px) max(var(--gutter), calc((100% - 1328px) / 2));
  overflow: clip;
  border-radius: var(--r-panel);
  background: var(--purple);
  color: #fff;
}
.finale-copy { position: relative; z-index: 2; }
.finale-h { margin: 0 0 32px; font: 800 clamp(32px, 5.6vw, 84px)/.98 var(--display); letter-spacing: -.04em; }
.finale-h > span { display: block; }
.finale-h > span + span { color: var(--yellow); }
.lineart--finale { top: 50%; left: 72%; width: min(90%, 900px); transform: translate(-50%, -50%) rotate(-8deg); opacity: .6; }
.finale-boksi { position: relative; z-index: 2; justify-self: center; width: min(100%, 380px); transform-origin: 50% 90%; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .finale-boksi:hover { transform: rotate(-6deg) scale(1.03); } }

/* ── 404 ──────────────────────────────────────────────────────── */
.lost { position: relative; display: grid; align-items: center; min-height: calc(100svh - 82px); padding: 24px var(--gutter) 80px; overflow: clip; border-radius: 0 0 var(--r-panel) var(--r-panel); background: var(--purple); color: #fff; }
.lost .motif { top: 50%; left: 78%; width: min(90vw, 900px); background: rgba(255, 255, 255, .08); }
.lost .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .55); }
.lost-copy { position: relative; z-index: 1; max-width: 1328px; width: 100%; margin: 0 auto; }
.lost .lead { margin-bottom: 32px; max-width: 40ch; }

/* ── Переходы между страницами ───────────────────────────────────
   RU/ҚАЗ/EN и юридические страницы сменяются наплывом, а не белой
   вспышкой; фиолетовая шапка главной стоит на месте. Где браузер
   не умеет (Firefox), страница просто открывается как раньше. */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }

/* ── Плашка «Скачать» ─────────────────────────────────────────────
   main.js ставит .is-on, когда первый экран ушёл, и снимает у формы,
   финала и подвала. Переход, а не keyframes: плашка может туда-сюда. */
.dock {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100% - 24px), 440px);
  padding: 10px 10px 10px 16px;
  border: 1px solid rgba(255, 255, 255, .14); /* taste-skill-ignore: edge of a floating bar over the dark venue panel */
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 40px rgba(21, 20, 36, .3); /* taste-skill-ignore: sticky overlay bar */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(100% + 24px));
  transition: transform 300ms var(--ease-out), opacity 200ms ease, visibility 0s linear 300ms;
}
.dock.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform 420ms var(--ease-out), opacity 200ms ease, visibility 0s; }
.dock-mark { flex: none; width: 34px; height: auto; }
.dock-txt { flex: 1; margin: 0; font-size: 14px; line-height: 1.25; color: #dcd8ea; }
.dock-txt b { display: block; font-size: 16px; color: #fff; }
.dock .btn { min-height: 48px; padding: 0 20px; font-size: 16px; }
.is-android .for-ios, html:not(.is-android) .for-android { display: none; }

/* ── Движение ─────────────────────────────────────────────────────
   Один сильный ease-out на всё. Первый экран играет при загрузке
   (CSS, вне главного потока): текст поднимается, телефон всплывает,
   знак рисуется линией, Бокси выпрыгивает и дальше тихо дышит.
   Ниже — появление частей при прокрутке (main.js ставит .js-reveal
   и .is-in), параллакс экранов приложения по прокрутке там, где его
   умеет браузер, и шторка слогана в финале. Без JS всё видно. */
@keyframes rise  { from { opacity: 0; transform: translateY(18px); } }
@keyframes float { from { opacity: 0; transform: translateY(40px) rotate(-2deg); } }
@keyframes draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop   { from { opacity: 0; transform: translateY(36px) scale(.9) rotate(-6deg); } }
@keyframes bob   { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes breathe { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(.82); opacity: .7; } }
.hero-copy > * { animation: rise 760ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 90ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.hero-copy > :nth-child(4) { animation-delay: 270ms; }
.hero-stage > .phone { animation: float 1000ms var(--ease-out) 140ms both; }
.lineart--hero path { animation: draw 2600ms var(--ease-out) 200ms both; }
.hero-boksi { animation: pop 900ms var(--ease-out) 650ms both; }
.hero-boksi img { animation: bob 2600ms var(--ease-in-out) 1600ms infinite alternate; }
.hero-boksi-shadow { animation: breathe 2600ms var(--ease-in-out) 1600ms infinite alternate; }
.hero-caption { animation: rise 760ms var(--ease-out) 420ms both; }

.js-reveal [data-reveal] > * { opacity: 0; transform: translateY(28px); }
.js-reveal [data-reveal].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-out) calc(var(--i, 0) * 80ms);
}
.js-reveal .screens-row > .shot { transform: translateY(calc(var(--d) + 60px)); }
.js-reveal .screens-row.is-in > .shot { transform: translateY(var(--d)); }
.js-anim [data-anim="mask"] { opacity: 0; transform: scale(.9) rotate(-3deg); transition: opacity 700ms var(--ease-out), transform 1100ms var(--ease-out); }
.js-anim [data-anim].is-in { opacity: 1; transform: none; }
.js-anim .lineart--finale path { stroke-dashoffset: 1; }
.js-anim .finale.is-in .lineart--finale path { stroke-dashoffset: 0; transition: stroke-dashoffset 2400ms var(--ease-out); }
.js-anim .finale-h > span { clip-path: inset(0 0 100% 0); transform: translateY(30%); }
.js-anim .finale.is-in .finale-h > span { clip-path: inset(0 0 -10% 0); transform: none; transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js-anim .finale.is-in .finale-h > span + span { transition-delay: 140ms; }
.js-anim .finale-boksi { opacity: 0; transform: translateY(50px) rotate(8deg); }
.js-anim .finale.is-in .finale-boksi { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 260ms, transform 1000ms var(--ease-out) 260ms; }

/* Экраны приложения плывут с разной скоростью при прокрутке */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  @keyframes drift { from { translate: 0 60px; } to { translate: 0 -60px; } }
  .screens-row > .shot { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .screens-row > .shot:nth-child(even) { animation-direction: reverse; }
  }
}

/* «Уменьшить движение» — меньше и мягче, а не ноль: всё, что
   двигается, становится простым проявлением (opacity), линия знака
   по-прежнему рисуется, экраны телефона сменяются наплывом. Никаких
   сдвигов, пружинок, покачиваний и параллакса. */
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .hero-stage > .phone, .hero-boksi, .hero-caption { animation-name: fade; animation-duration: 900ms; }
  .hero-boksi img, .hero-boksi-shadow { animation: none; }
  .js-reveal [data-reveal] > *, .js-anim [data-anim="mask"], .js-anim .finale-boksi { transform: none; }
  .js-reveal .screens-row > .shot, .js-reveal .screens-row.is-in > .shot { transform: translateY(var(--d)); }
  .js-reveal [data-reveal].is-in > *, .js-anim [data-anim].is-in { transition: opacity 900ms ease calc(var(--i, 0) * 80ms); }
  .js-anim .finale-h > span { clip-path: none; transform: none; opacity: 0; }
  .js-anim .finale.is-in .finale-h > span { opacity: 1; transition: opacity 900ms ease; }
  .js-anim .finale.is-in .finale-boksi { transition: opacity 900ms ease 200ms; }
  .scr { transform: none; filter: none; transition: opacity 300ms ease, visibility 0s linear 300ms; }
  .scr.is-on { transition: opacity 300ms ease, visibility 0s; }
  .btn:active, .store-badge:active, .ls-role-btn:active, .step:active, .is-android .android-note:active { transform: none; }
  .dock, .dock.is-on { transform: translate(-50%, 0); }
  .reel-sc > *, .reel-sc.is-out > * { transform: none; filter: none; }
  .reel-art { animation: none; }
  .reel-n::after { transform: none; }
}

/* ── Узкие экраны ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; gap: 40px; }
  .lineart--hero { left: 50%; width: 170%; }
  .hero-boksi { left: 2%; bottom: 10%; width: clamp(120px, 32vw, 180px); }
  .screens-row { grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; padding: 70px 4px 80px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shot { scroll-snap-align: center; }
  .finale { grid-template-columns: 1fr; text-align: left; }
  .finale-boksi { width: min(70%, 280px); }
  .lineart--finale { left: 60%; width: 160%; }
  .hero-stage { padding: 12px 0 0; }
  .phone { width: clamp(240px, 64vw, 320px); }
  .evening { grid-template-columns: 1fr; gap: 20px; }
  .evening-copy { display: contents; }
  .evening-copy .lead { margin-bottom: 0; }
  .steps { order: 1; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .step { justify-content: center; padding: 0; background: none; }
  .step.is-on { background: none; }
  .step-time { width: 100%; padding: 10px 0; text-align: center; }
  .step-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .step-caption { order: 2; display: grid; gap: 2px; min-height: 4.8em; margin: 0; }
  .evening-stage { order: 3; padding: 0; }
  .boksi { grid-template-columns: 1fr; }
  .boksi-photo { max-width: 460px; }
  .stat, .stat:has(.film) { grid-template-columns: 1fr; grid-template-rows: none; }
  .stat:has(.film) .stat-num, .stat:has(.film) .stat-text, .stat:has(.film) .stat-src { grid-row: auto; }
  .stat-src { grid-column: 1; }
  .film { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .stat::after { width: 90%; bottom: -12%; right: -30%; }
  .venue-panel { grid-template-columns: 1fr; }
  .venue-photo { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
  .signup { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar-link { display: none; }
  .bar-logo img { height: 26px; }
  .terms { grid-template-columns: 1fr; }
  .venue-cta .btn { flex: 1 1 100%; }
  .ls-submit { flex: 1 1 100%; }
  .role { display: flex; }
  .ls-role-btn { flex: 1; padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .perks { grid-template-columns: 1fr; gap: 10px; margin-top: -14px; font-size: 15px; }
  .receipt { padding-inline: 22px; }
  /* на телефоне ролик вертикальный: текст сверху, картинка снизу */
  .reel { aspect-ratio: 4 / 5; }
  .reel-copy { bottom: auto; width: 100%; gap: 3cqi; }
  .reel-t { font-size: 9.4cqi; }
  .reel-sc--1 .reel-t span { font-size: 5.6cqi; }
  .reel-sc--1 .reel-t b { font-size: 13.5cqi; }
  .reel-sub { max-width: none; font-size: 4.2cqi; }
  .reel-art { top: 50cqi; right: auto; left: 17cqi; width: 66cqi; }
  .reel-art--map { top: 46cqi; left: 24cqi; width: 52cqi; }
  .reel-sc--3 .reel-t { font-size: 8.4cqi; }
  .reel-steps { gap: 3cqi; font-size: 5.2cqi; }
  .reel-n { width: 8cqi; height: 8cqi; font-size: 3.6cqi; }
  .reel-art--steps { top: 54cqi; }
}