/* ============================================================
   case.css — единый ритм и общие компоненты страниц проектов.

   Подключается ПОСЛЕ встроенных стилей каждой страницы и переопределяет
   их отступы. Раньше у Arivin между блоками было 360 px пустоты
   (180 + 180), у Plants и PDA около 270, и страницы выглядели дырявыми.
   Теперь шаг один на всех: --sec сверху и снизу секции, значит между
   блоками около 170 px на 1440 и около 100 px на телефоне.
   Внутри блока зазоры меньше, чем между блоками: --blk и --blk-lg.
   ============================================================ */
:root {
  --sec: clamp(56px, 7.6vw, 112px);        /* пол-расстояния между секциями */
  --sec-pad: var(--sec);                  /* так называется у Plants и PDA */
  --block-gap: var(--blk-lg);
  --blk: clamp(40px, 4.4vw, 64px);        /* заголовок → содержимое */
  --blk-lg: clamp(56px, 6.4vw, 96px);       /* крупный блок → крупный блок внутри секции */
}

/* --- Секции: один шаг сверху и снизу ---------------------------------------- */
.c-hero { padding-block: calc(var(--sec) * 0.8) var(--sec); }
.c-state, .c-task, .c-ba, .c-fix, .ds, .c-mob, .c-live, .c-find, .c-dir, .c-resp { padding-block: var(--sec); }
.c-figures { padding-block: 0 var(--sec); }
.flow__head { padding-block: var(--sec) var(--blk); }
.flow__note { padding-block: var(--blk) var(--sec); }
/* Следующий проект — другое по смыслу, поэтому воздуха перед ним больше */

/* --- Внутри секций ------------------------------------------------------------ */
.c-hero__rig, .c-hero__mac { padding-block-start: var(--blk-lg); }
.c-ba__pairs, .c-ba__gains { padding-block-start: var(--blk-lg); }
.c-fix__grid, .ds__facts, .c-mob__row { padding-block-start: var(--blk); }

/* --- Возврат «All work»: строка над заголовком, а не часть меню --------------
   Шапка одинакова на всех страницах и содержит только меню и «Get in touch»,
   поэтому возврат к работам живёт здесь, в начале первого экрана. */
.c-back { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.55em; margin-block-end: var(--blk); padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-line); font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--color-fg); transition: background var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }
.c-back span { transition: transform var(--dur-300) var(--ease-out); }
.c-back:hover, .c-back:focus-visible { background: var(--color-fg); color: var(--color-bg); }
.c-back:hover span { transform: translateX(-4px); }
.c-back:active { scale: 0.96; }

/* --- Снимки «до» и «после» одной высоты --------------------------------------
   Раньше «до» были 2000×1750, а «после» 2000×1250, и пары выходили разными.
   Теперь у всех один формат 16:10, обрезка по верху, ряд компактнее. */
.c-ba__pairs { grid-column: 2 / 12; display: grid; grid-template-columns: 1fr; gap: var(--blk-lg); }
/* Каждая пара — самостоятельный блок со своей линией и заголовком: страница
   «Science» и страница «Pipeline» не должны сливаться в одно полотно. */
.pairrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blk) var(--space-32); padding-block-start: var(--blk); border-block-start: 1px solid var(--color-line); }
.pairrow__t { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-24); }
.pairrow__t .label { flex: none; }
@media (max-width: 900px) { .pairrow { grid-template-columns: 1fr; } }
.pair img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

/* --- Мобильные макеты: Dynamic Island внутри экрана и поле статус-бара --------
   Остров стоял на самой кромке рамки, выше, чем на настоящем iPhone, а
   скриншоты начинались вплотную к нему. Теперь остров отступает от кромки
   на 11 px, а под ним лежит полоса статус-бара цвета самого скриншота. */
.c-mob__row { grid-column: 3 / 11; gap: var(--space-32); }
/* Только телефоны Arivin (.c-mob). У Plants и PDA рамка устроена иначе, и общие
   правила ломали их мобильные экраны: меню уезжало, кадры оказывались со сдвигом. */
.c-mob .phone__pill { inset-block-start: 20px; inline-size: 66px; block-size: 20px; }
.c-mob .phone__screen { display: flex; flex-direction: column; padding-block-start: 11%; background: var(--scr, #fff); }
.c-mob .phone__screen img { flex: 1 1 auto; min-block-size: 0; block-size: auto; inline-size: 100%; object-fit: cover; object-position: 50% 0; }

/* --- Спецификация дизайн-системы: снимок и текст — две разные вещи --------------
   Раньше снимок и абзац сливались в серую кашу. Теперь это сетка 5/7 с
   настоящим зазором, снимок в рамке, у текста свой заголовок и своя кнопка. */
.ds__out { grid-template-columns: 5fr 7fr; gap: var(--blk-lg); align-items: start; }
.ds__out figure { max-inline-size: 440px; }
.ds__out img { box-shadow: 0 0 0 1px var(--panel-line), 0 30px 60px rgba(13, 13, 12, 0.14); }
.ds__out > div { padding-block-start: var(--space-16); max-inline-size: 52ch; }
.ds__out .t-title { padding-block-end: var(--space-16); }
.ds__out p { font-size: 1rem; line-height: 1.55; padding-block: 0 var(--space-32); }

@media (max-width: 900px) {
  :root { --sec: clamp(64px, 17vw, 88px); --blk: 40px; --blk-lg: 56px; }
  .c-ba__pairs { grid-column: 1 / -1; }
  .c-mob__row { grid-column: 1 / -1; gap: var(--space-32); }
  .ds__out { grid-template-columns: 1fr; }
  .ds__out figure { max-inline-size: 320px; }
}

/* --- Ноутбук: основание не шире окна ------------------------------------------
   У Plants основание было 112 % ширины и давало 50 px горизонтальной прокрутки;
   у PDA исправили до 104 %. Теперь одинаково у всех. */
.mac__base { inline-size: 104%; margin-inline-start: -2%; }

/* Под ноутбуком Arivin уже лежит отражение, лишний отступ не нужен */
.c-hero:has(.rig) { padding-block-end: calc(var(--sec) * 0.3); }

/* --- Разделение блоков: нейтральные плашки на всю ширину ----------------------
   Блоки с классом .band чередуются с обычными. Плашка серая, не розовая: белый
   с малой долей на фоне страницы. Заливка — тенью на всю ширину окна, обрезанной
   по высоте секции, поэтому горизонтальной прокрутки нет. */
:root { --band: #1b1e22; --band-strong: #212126; }
.band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
/* «Следующий кейс»: самая светлая нейтральная плашка, линии сверху и снизу и вдвое больше воздуха */
.c-nextcase.wrap { background: var(--band-strong); box-shadow: 0 0 0 100vmax var(--band-strong); clip-path: inset(0 -100vmax); padding-block: calc(var(--sec) * 2); }

/* --- Следующий проект: один вид на всех страницах -------------------------------
   Порядок везде один: PDA → Arivin → Studio Leaf → AONG. У AONG страницы ещё
   нет, поэтому блок показывает неактивное состояние «In progress». */
.c-nextcase__in { grid-column: 1 / -1; }
.c-nextcase__label { font-size: clamp(1.75rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; }
.c-nextcase__link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-block-start: var(--space-32); padding-block: var(--space-24); border-block-start: 1px solid var(--color-line); }
.c-nextcase__link::after { content: ''; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: var(--color-fg); transform: scaleX(0); transform-origin: right; transition: transform 800ms var(--ease-smooth); }
a.c-nextcase__link:hover::after, a.c-nextcase__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.c-nextcase__name { font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.028em; transition: transform 700ms var(--ease-smooth); }
a.c-nextcase__link:hover .c-nextcase__name, a.c-nextcase__link:focus-visible .c-nextcase__name { transform: translateX(12px); }
.c-nextcase__go { flex: none; inline-size: 54px; block-size: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.125rem; box-shadow: inset 0 0 0 1px var(--color-line); transition: background-color 450ms var(--ease-smooth), color 450ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
a.c-nextcase__link:hover .c-nextcase__go, a.c-nextcase__link:focus-visible .c-nextcase__go { background: var(--color-fg); color: var(--color-bg); transform: translateX(6px); }
.c-nextcase__hint { padding-block-start: var(--space-16); max-inline-size: 60ch; }
/* Проект в работе: видно, но нажать нельзя */
.c-nextcase__link.is-off { cursor: not-allowed; color: var(--color-fg-muted); }
.c-nextcase__soon { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-line); font-size: 0.9375rem; font-weight: 600; }
.c-nextcase__dots { display: inline-flex; gap: 3px; }
.c-nextcase__dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; animation: wip-dot 1.2s ease-in-out infinite; }
.c-nextcase__dots i:nth-child(2) { animation-delay: 0.2s; }
.c-nextcase__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wip-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .c-nextcase__dots i { animation: none; opacity: 0.6; } }

/* --- Границы цвета: воздуха столько же, сколько между блоками одного цвета ----
   Между двумя тёмными секциями пустота читается как 2×sec, а на стыке с белой
   панелью глаз видит только свою половину и принимал её за «маленькие
   промежуточки». Поэтому у всех, кто граничит с панелью, отступ у границы
   больше. */
.panel .c-task, .panel .ds { padding-block: calc(var(--sec) * 1.5); }
.panel + section, .panel + .flow .flow__head { padding-block-start: calc(var(--sec) * 1.5); }
section:has(+ .panel) { padding-block-end: calc(var(--sec) * 1.5); }
.panel + .flow { padding-block-start: 0; }
.flow:has(+ .panel) .flow__note { padding-block-end: calc(var(--sec) * 1.5); }

/* --- Спецификация системы: отделена линией и воздухом от того, что выше -------- */
.ds__out { margin-block-start: var(--blk-lg); padding-block-start: var(--blk-lg); border-block-start: 1px solid var(--panel-line); }

/* --- Мобильные экраны: компактнее ---------------------------------------------
   У Arivin телефоны уже, а у Plants шесть экранов по 432×935 стали по ~270 px:
   раньше каждый занимал почти целый экран по высоте. */
.c-mob__row { grid-column: 4 / 10; }
.resp__row { grid-column: 3 / 11; gap: var(--blk-lg) var(--space-32); padding-block-start: var(--blk); }
.resp__rules { padding-block-start: var(--blk-lg); }
@media (max-width: 900px) { .c-mob__row, .resp__row { grid-column: 1 / -1; } }

/* Поток без заключительной заметки (у Plants) не имел нижнего отступа, и следующий
   блок вплотную подходил к концу прокрутки. */
.flow:not(:has(.flow__note)) { padding-block-end: var(--sec); }

/* --- Было и стало: кадр целиком в окне и можно остановиться -----------------------
   Кадр ≤ 62 % высоты окна (раньше был почти во всю ширину и не помещался), а секция
   закрепляет его на путь прокрутки в 130 % окна: сначала «до» стоит, потом идёт срез,
   потом стоит «после». Без движения (?static, reduced-motion, телефон) всё как обычная
   страница: оба кадра видны, срез на середине. */
.c-ba__stage { --cut-h: min(62dvh, 560px); grid-column: 1 / -1; margin-block-start: var(--blk); }
.c-ba__stick { inline-size: min(100%, calc(var(--cut-h) * 1.6)); margin-inline: auto; }
.c-ba__stick .c-ba__cut { grid-column: auto; margin: 0; }
.c-ba__stick .turn__legend { grid-column: auto; }
.has-motion .c-ba__stage { block-size: calc(var(--cut-h) + 70px + 90dvh); }
/* кадр стоит посередине окна, а не прижат к шапке */
.has-motion .c-ba__stick { position: sticky; inset-block-start: max(calc(var(--bar-h) + 16px), calc(50dvh - (var(--cut-h) + 70px) / 2)); }
@media (max-width: 900px) {
  .has-motion .c-ba__stage { block-size: auto; }
  .has-motion .c-ba__stick, .c-ba__stick { position: static; inline-size: 100%; }
}

/* --- «Предыдущий проект» рядом со «Следующим»: две колонки, у первого кейса слева «All work» --- */
.c-nextcase__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blk) var(--space-48); }
.c-nextcase__col--prev { padding-inline-end: var(--space-48); border-inline-end: 1px solid var(--color-line); }
.c-nextcase__col--prev .c-nextcase__link { justify-content: flex-start; gap: var(--space-24); }
.c-nextcase__go--back { order: -1; }
a.c-nextcase__link:hover .c-nextcase__go--back, a.c-nextcase__link:focus-visible .c-nextcase__go--back { transform: translateX(-6px); }
.c-nextcase__col--prev a.c-nextcase__link:hover .c-nextcase__name { transform: translateX(-12px); }
@media (max-width: 900px) { .c-nextcase__in { grid-template-columns: 1fr; } .c-nextcase__col--prev { padding-inline-end: 0; border-inline-end: 0; } }

/* --- Поток экранов: все экраны одной лентой в одной рамке (flow-strip.js) ----------- */
.flow__scroller.is-strip .flow__stage { position: sticky; }
.frame__body .flow__strip { position: absolute; inset-block-start: 0; inset-inline: 0; will-change: transform; }
.frame__body .flow__strip img { position: static; display: block; inline-size: 100%; block-size: auto; }
/* Рамка-лента выше: сайт читают, прокручивая, а не разглядывая миниатюру */
.flow__scroller.is-strip .flow__screens { aspect-ratio: auto; block-size: min(76dvh, 700px); }

/* --- Предыдущий / следующий проект: компактнее и в цвете проекта-цели ----------------
   Цвет у каждого проекта свой (терракота PDA, бирюза Arivin, зелень Studio Leaf, лайм AONG):
   он только в линии, стрелке и наведении, текст остаётся нейтральным. */
.c-nextcase.wrap { padding-block: calc(var(--sec) * 1.5); }
.c-nextcase__label { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--color-fg-muted); line-height: 1.4; }
.c-nextcase__link { margin-block-start: var(--space-12); padding-block: var(--space-16); border-block-start-color: var(--proj, var(--color-line)); }
.c-nextcase__link::after { background: var(--proj, var(--color-fg)); }
.c-nextcase__name { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -0.02em; }
.c-nextcase__go { inline-size: 40px; block-size: 40px; font-size: 1rem; color: var(--proj, var(--color-fg)); box-shadow: inset 0 0 0 1.5px var(--proj, var(--color-line)); }
a.c-nextcase__link:hover .c-nextcase__go, a.c-nextcase__link:focus-visible .c-nextcase__go { background: var(--proj, var(--color-fg)); color: #0d0d0c; }
a.c-nextcase__link:hover .c-nextcase__name, a.c-nextcase__link:focus-visible .c-nextcase__name { color: var(--proj, var(--color-fg)); }
.c-nextcase__hint { padding-block-start: var(--space-8); font-size: 0.9375rem; }
.c-nextcase__soon { padding: 6px 14px; font-size: 0.9375rem; box-shadow: inset 0 0 0 1.5px var(--proj, var(--color-line)); color: var(--proj, inherit); }
.c-nextcase__link.is-off { color: var(--color-fg-muted); }

/* --- Дизайн-система Arivin: просторно, каждый блок — слева что это, справа образец -----------
   Раньше блоки шли подряд с отступом около 76 px и сливались. Теперь между блоками
   ~150 px пустоты и тонкая линия, заголовок и пояснение стоят в левых четырёх колонках,
   образец — в правых восьми. Образцы больше не тянутся на всю страницу. */
.ds__show { grid-column: 1 / -1; margin: var(--blk-lg) 0 0; padding: clamp(40px, 7vw, 104px) var(--space-32) var(--space-32); border-radius: 20px; background: #eef2fb; display: grid; justify-items: center; gap: clamp(32px, 4vw, 56px); }
.ds__show img { inline-size: min(100%, 520px); block-size: auto; display: block; }
.ds__show figcaption { font-size: 0.9375rem; color: var(--panel-muted); text-align: center; max-inline-size: 52ch; }
.ds__facts { padding-block-start: calc(var(--sec) * 1.6); }
.ds__block { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-items: start; margin-block-start: calc(var(--sec) * 1.8); padding-block-start: var(--blk-lg); border-block-start: 1px solid var(--panel-line); }
.ds__block > .label { grid-column: 1 / 5; grid-row: 1; padding-block-end: var(--space-12); }
.ds__block > h3 { grid-column: 1 / 5; grid-row: 2; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.2; letter-spacing: -0.025em; padding-inline-end: var(--space-24); }
.ds__block > .ds__note { grid-column: 1 / 5; grid-row: 3; padding-block-start: var(--space-16); padding-inline-end: var(--space-24); font-size: 0.875rem; max-inline-size: 38ch; }
.ds__block > .ds__spec { grid-column: 5 / -1; grid-row: 1 / 5; padding-block-start: 0; }
/* Образцы */
.ds__surf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.surf { min-block-size: 150px; }
.ds__type { gap: var(--space-24); }
.ty { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-24); padding-block-start: var(--space-16); }
.ds__space { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: var(--space-8); align-items: end; }
.sp { justify-items: center; }
.sp__bar { inline-size: min(100%, 28px); }
.ds__mod { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-48); }
.ds__mod svg { background: #eef2fb; border-radius: 16px; padding: var(--space-24); }
.ds__rules { grid-template-columns: 1fr; gap: var(--space-24); }
/* Спецификация: снимок и текст — два самостоятельных блока, а не один */
.ds__out { margin-block-start: calc(var(--sec) * 1.8); padding-block-start: var(--blk-lg); grid-template-columns: 5fr 7fr; gap: var(--blk-lg); align-items: center; }
.ds__out figure { max-inline-size: 420px; display: grid; gap: var(--space-12); }
.ds__out figcaption { font-size: 0.9375rem; color: var(--panel-muted); }
.ds__card { background: #f4f4f2; border-radius: 20px; padding: clamp(32px, 4vw, 56px); max-inline-size: none; }
.ds__out > .ds__card { padding-block-start: clamp(32px, 4vw, 56px); max-inline-size: none; }
.ds__card .t-title { padding-block-end: var(--space-16); }
@media (max-width: 1100px) { .ds__space { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--space-24); } }
@media (max-width: 900px) {
  .ds__block { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; }
  .ds__block > .label, .ds__block > h3, .ds__block > .ds__note, .ds__block > .ds__spec { grid-column: 1; grid-row: auto; }
  .ds__block > .ds__spec { padding-block-start: var(--space-32); }
  .ds__mod { grid-template-columns: 1fr; }
  .ty { grid-template-columns: 1fr; gap: var(--space-8); }
  .ds__surf { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ds__facts { grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-16); padding-block-start: var(--blk-lg); }
  .ds__block { margin-block-start: calc(var(--sec) * 1.4); }
  .ds__show { padding-block-start: var(--space-48); }
  .ds__out { grid-template-columns: 1fr; }
}

/* --- «See the whole thing running»: розовая плашка — главное действие блока -----------
   Единственный цветной блок на странице проекта, чтобы кнопка перехода на живой сайт
   не терялась среди серых. */
.c-live.wrap { background: var(--color-accent); color: #fff; box-shadow: 0 0 0 100vmax var(--color-accent); clip-path: inset(0 -100vmax); padding-block: calc(var(--sec) * 1.6); }
.c-live .muted, .c-live .live-note { color: rgba(255, 255, 255, 0.84); }
.c-live .visit { background: #fff; color: #0d0d0c; }
.c-live .visit::before { background: #0d0d0c; }
.c-live .visit:hover .visit__label span, .c-live .visit:focus-visible .visit__label span,
.c-live .visit:hover .visit__arrow span, .c-live .visit:focus-visible .visit__arrow span { color: #fff; }

/* Подписи «Before» / «After» на самом кадре: левая остаётся, пока виден кадр «до», правая
   открывается вместе с «после». Раньше было непонятно, где что. */
.turn__layer::before { content: attr(data-label); position: absolute; z-index: 2; inset-block-start: var(--space-16); padding: 7px 14px; border-radius: 999px; background: rgba(13, 13, 12, 0.82); color: #fff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.turn__layer--before::before { inset-inline-start: var(--space-16); }
.turn__layer--after::before { inset-inline-end: var(--space-16); background: var(--color-accent); }
.c-ba__cut::after { inline-size: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(13,13,12,0.4); }

/* --- Блоки «до/после» внутри секции — отдельные, с большим воздухом ------------------ */
.c-ba__say { padding-block-start: calc(var(--sec) * 1.4); }
.c-ba__pairs { padding-block-start: calc(var(--sec) * 2.4); gap: calc(var(--sec) * 2); }
.pairrow { padding-block-start: calc(var(--sec) * 0.9); gap: var(--blk-lg) var(--space-48); }
.pairrow__t .t-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.c-ba__gains { padding-block-start: calc(var(--sec) * 2.4); }

/* --- Спецификация Arivin: один цельный блок, снимок и текст рядом в одной карточке ----- */
.ds__out { background: #f4f4f2; border-radius: 24px; padding: clamp(32px, 4vw, 64px); border-block-start: 0; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; justify-content: space-between; }
.ds__out > .ds__card { background: none; padding: 0; border-radius: 0; }
.ds__out figure { max-inline-size: none; }
@media (max-width: 900px) { .ds__out { grid-template-columns: 1fr; } }

/* Полоса между страницами в ленте Plants: видно, что это другой экран, а не продолжение */
.flow__sep { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 0 var(--space-24); block-size: 64px; background: #24241f; color: rgba(242,242,240,0.6); font-size: 0.875rem; letter-spacing: 0.04em; }
.flow__sep b { font-weight: 500; color: #fff; letter-spacing: 0; }


/* Закреплённые рамки потоков не ловят указатель: курсор над ними не должен влиять на анимацию */
.flow__stage { pointer-events: none; }

/* --- Название проекта над заголовком первого экрана ------------------------------------
   На странице проекта должно быть сразу видно, чей это кейс: мелкая подпись в строке меток
   этого не делает. */
.c-hero__name { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4em; font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; padding-block-end: var(--space-24); }
.c-hero__name::before { content: ''; flex: none; inline-size: 0.34em; block-size: 0.34em; border-radius: 50%; background: var(--color-accent); }

/* Фото в парах «до/после» не обрезаются: страница показана целиком */
.pair img { aspect-ratio: auto; object-fit: initial; block-size: auto; }
.pair img[style] { object-position: initial !important; }
.pairrow { align-items: start; }
.has-motion .c-ba__stage { block-size: calc(var(--cut-h) + 70px + 72dvh); }

/* «See the whole thing running»: компактнее */
.c-live.wrap { padding-block: calc(var(--sec) * 0.85); }
.c-live__h { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.c-live .live-note { font-size: 0.9375rem; max-inline-size: 46ch; }

/* --- Previous / Next на телефоне: две одинаковые строки, название слева, стрелка справа ---- */
@media (max-width: 900px) {
  .c-nextcase.wrap { padding-block: calc(var(--sec) * 1.2); }
  .c-nextcase__in { gap: var(--space-48); }
  .c-nextcase__col { display: grid; gap: 0; }
  .c-nextcase__link, .c-nextcase__col--prev .c-nextcase__link { justify-content: space-between; gap: var(--space-16); padding-block: var(--space-16); }
  .c-nextcase__go--back { order: 2; }
  .c-nextcase__col--prev .c-nextcase__name { order: 1; }
  .c-nextcase__name { font-size: 1.125rem; line-height: 1.25; }
  .c-nextcase__hint { padding-block-start: var(--space-4); }
}

/* Ссылка на проект в разработке: активная, рядом со стрелкой плашка «In progress» */
.c-nextcase__end { flex: none; display: inline-flex; align-items: center; gap: var(--space-16); }
.c-nextcase__link .c-nextcase__soon { padding: 5px 12px; font-size: 0.875rem; color: var(--color-fg-muted); box-shadow: inset 0 0 0 1px var(--color-line); }
.c-nextcase__col--prev .c-nextcase__link .c-nextcase__soon { margin-inline-start: auto; }
@media (max-width: 900px) {
  .c-nextcase__col--prev .c-nextcase__link .c-nextcase__soon { order: 2; margin-inline-start: auto; }
  .c-nextcase__go--back { order: 3; }
  .c-nextcase__soon { padding: 4px 10px; font-size: 0.8125rem; }
}

/* --- Поток без привязки к прокрутке (анимация логотипа Arivin) -------------------------------
   Раньше рама закреплялась и кадры проявлялись по прокрутке; блок мигал и дёргался. Теперь это
   обычный блок: слева три шага, справа настоящая запись входа на сайт. */
.flow.is-plain .flow__scroller { block-size: auto; }
.flow.is-plain .flow__stage { position: static; block-size: auto; padding-block: var(--blk); pointer-events: auto; overflow: visible; }
.flow.is-plain .flow__step { opacity: 1; }
.flow.is-plain .flow__step b { color: var(--color-fg); }
.flow.is-plain .flow__card { position: absolute; inset: 0; opacity: 1 !important; transform: none !important; }

/* Анимация логотипа Arivin: «до» (оригинальный загрузчик из брендфайлов) и «после» (новый вход) рядом */
.flow.is-plain .flow__inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.flow.is-plain .flow__screens { aspect-ratio: auto; inline-size: 100%; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); align-items: start; }
.flow.is-plain .flow__fig { margin: 0; display: grid; gap: var(--space-16); }
.flow.is-plain .flow__card { position: relative; inset: auto; aspect-ratio: 16 / 10; }
.flow__loader { display: grid; place-items: center; background: #fff; }
.flow__loader img { inline-size: 46%; block-size: auto; max-block-size: 86%; display: block; }
.flow__cap { font-size: 0.9375rem; line-height: 1.55; color: var(--color-fg-muted); }
.flow__cap b { display: block; color: var(--color-fg); font-weight: 500; padding-block-end: 4px; }
@media (max-width: 1100px) { .flow.is-plain .flow__inner { grid-template-columns: 1fr; } .flow.is-plain .flow__screens { grid-template-columns: 1fr; } }
.flow.is-plain .flow__inner { gap: var(--space-48); }
.flow.is-plain .flow__screens, .flow.is-plain .flow__fig, .flow.is-plain .flow__card { min-inline-size: 0; max-inline-size: 100%; }
.flow.is-plain .frame, .flow.is-plain .frame__body, .flow.is-plain .frame__vid { max-inline-size: 100%; }
/* Кадры «до» и «после» одной высоты в любом режиме (в ?static видео раньше становилось блочным и вытягивало рамку) */
.flow.is-plain .frame { position: absolute; inset: 0; display: flex; flex-direction: column; }
.flow.is-plain .frame__body { position: relative; flex: 1 1 auto; block-size: auto; min-block-size: 0; }
.flow.is-plain .frame__vid { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }

/* ============================================================================================
   Живость: мягкая реакция на наведение у картинок, карточек и образцов на всех страницах проектов.
   Используются отдельные свойства translate и scale, чтобы не конфликтовать с transform у GSAP
   (проявление блоков). Только для мыши и без reduce-motion.
   ============================================================================================ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* картинки и макеты: чуть приподнимаются и увеличиваются */
  .pair img, .dir img, .fx__card img, .fx__stage--sheet .frame, .fx__stage--word, .ds__out img, .ds__show img, .gain, .fig, .fix, .dsfact, .rule, .fmap, .pcard,
  .mac, .rig, .phone, .stub__stage img, .pds-brand__chip, .pds-surf, .pds-rad span, .pds-stroke span, .pds-elev span, .pds-mot, .pds-btn, .pds-fchip, .sp, .surf, .tint__chip, .dsbtn, .ty {
    transition: translate 520ms var(--ease-smooth), scale 520ms var(--ease-smooth), box-shadow 520ms var(--ease-smooth), background-color 520ms var(--ease-smooth);
  }
  .pair img:hover, .dir img:hover, .fx__card img:hover, .ds__out img:hover, .ds__show img:hover, .stub__stage img:hover { translate: 0 -6px; scale: 1.025; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35); }
  .fx__stage--sheet .frame:hover, .mac:hover, .rig:hover { translate: 0 -6px; scale: 1.012; }
  .phone:hover { translate: 0 -8px; scale: 1.02; }
  .fx__stage--word:hover { scale: 1.015; }
  /* карточки текста: приподнимаются */
  .gain:hover, .fig:hover, .fix:hover, .dsfact:hover, .rule:hover, .fmap:hover { translate: 0 -5px; }
  .pcard:hover { translate: 0 -6px; }
  /* образцы дизайн-систем */
  .pds-brand__chip:hover, .pds-surf:hover, .surf:hover, .tint__chip:hover { translate: 0 -6px; scale: 1.03; }
  .pds-rad span:hover, .pds-stroke span:hover { scale: 1.12; }
  .pds-elev span:hover { translate: 0 -8px; }
  .pds-mot:hover { translate: 0 -5px; background: #efece6; }
  .pds-btn:hover, .pds-fchip:hover, .dsbtn:hover { scale: 1.05; }
  .sp:hover { translate: 0 -4px; }
  .ty:hover, .pds-ty:hover { translate: 6px 0; }
  /* нижние блоки перехода: плашка подсвечивается и стрелка тянется */
  .c-nextcase__col { transition: translate 520ms var(--ease-smooth); }
  .c-nextcase__col:hover { translate: 0 -4px; }
  /* кнопки и ссылки возврата */
  .c-back, .c-live .visit { transition: translate 400ms var(--ease-smooth), scale 260ms var(--ease-smooth), background 300ms var(--ease-out), color 300ms var(--ease-out); }
  .c-back:hover { translate: -4px 0; }
}

.flow__scroller.is-strip .flow__screens { inline-size: 100%; }

/* ============================================================================================
   Телефон (≤ 900 px): общие правила для страниц проектов
   ============================================================================================ */
.c-back { white-space: nowrap; }
@media (max-width: 900px) {
  /* первый экран: всё в одну колонку (раньше текст и таблица стояли рядом и сжимались) */
  .c-hero__name, .c-hero__eyebrow, .c-hero__title, .c-hero__lead, .c-hero__spec, .c-hero__cta, .c-hero__mac, .c-hero__rig, .stub__status { grid-column: 1 / -1; }
  .c-hero__spec { padding-block-start: var(--space-32); }
  .c-hero__cta { padding-block-start: var(--space-24); }
  .c-hero__name { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .c-hero__title { padding-block: var(--space-16) var(--space-24); }
  .spec-rows { grid-template-columns: minmax(84px, auto) minmax(0, 1fr); }
  /* подписи «Before / After» на кадрах не растягиваются */
  .turn__layer--after::before { inset-inline-start: auto; }
  .turn__layer::before { padding: 6px 12px; font-size: 0.875rem; }
  /* блоки текста и образцов не слипаются */
  .sec__h, .ds__h, .c-live__h { padding-block-end: var(--space-8); }
  .sec__lead, .ds__lead { padding-block-start: var(--space-16); }
  .c-fix__grid, .c-ba__gains { gap: var(--space-40, 40px) var(--space-24); }
  .fix, .gain { padding-block-start: var(--space-24); }
  .c-ba__say { padding-block-start: var(--space-48); gap: var(--space-32); }
  .pairrow { gap: var(--space-40, 40px); }
  .c-nextcase.wrap { padding-block: 72px; }
  .c-live.wrap { padding-block: 64px; }
  img, video, svg { max-inline-size: 100%; }
}

/* ============================================================================================
   Телефон: ленты экранов не растягиваются на тысячи пикселей, отклик на касание
   ============================================================================================ */
@media (max-width: 900px) {
  .flow__card .frame__body { max-block-size: 560px; overflow: hidden; position: relative; }
  .flow__card .frame__body img { position: static; }
  .flow__card .frame__body::after { content: ''; position: absolute; inset: auto 0 0 0; block-size: 90px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); pointer-events: none; }
  .flow__rail { padding-block-end: var(--space-16); }
  .flow__screens { gap: var(--space-32); }
}
/* Касание: карточки и образцы слегка вжимаются, как кнопки */
@media (hover: none) {
  .pair img, .dir img, .fx__card img, .gain, .fig, .fix, .dsfact, .rule, .fmap, .pcard, .phone, .pds-brand__chip, .pds-surf, .pds-mot, .pds-btn, .pds-fchip, .sp, .surf, .tint__chip, .dsbtn, .c-nextcase__col, .stub__stage img { transition: scale 260ms var(--ease-smooth), translate 260ms var(--ease-smooth); }
  .pair img:active, .dir img:active, .fx__card img:active, .gain:active, .fig:active, .fix:active, .dsfact:active, .rule:active, .fmap:active, .pcard:active, .phone:active, .pds-brand__chip:active, .pds-surf:active, .pds-mot:active, .pds-btn:active, .pds-fchip:active, .sp:active, .surf:active, .tint__chip:active, .dsbtn:active, .c-nextcase__col:active, .stub__stage img:active { scale: 0.97; }
}
/* На телефоне (нет наведения) макеты слегка покачиваются сами, чтобы страница не была неподвижной (без reduce-motion) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  @keyframes phone-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  .resp__row .phone, .c-mob__row .phone, .stub__stage img:nth-child(2) { animation: phone-bob 5.5s ease-in-out infinite; }
  .resp__row .phone:nth-child(2n), .c-mob__row .phone:nth-child(2n) { animation-delay: -2.2s; }
}

/* Телефон: любой прямой потомок сетки занимает всю ширину. Раньше у части блоков (панель задачи
   PDA, вердикт направлений и др.) оставались десктопные колонки, и текст сжимался в полоску. */
@media (max-width: 900px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .grid > .c-task__body, .grid > .c-task__aside { padding-block-start: var(--space-32); }
  .c-dir__row { gap: var(--space-48) !important; }
  .c-dir__verdict { padding-block-start: var(--space-48); }
}

/* Телефон: образцы кеглей в Arivin уменьшены, чтобы «Future-Proof therapies» не занимало три строки */
@media (max-width: 560px) {
  .ty__s[style*="font-size:62px"] { font-size: 36px !important; }
  .ty__s[style*="font-size:54px"] { font-size: 32px !important; }
  .ty__s[style*="font-size:36px"] { font-size: 26px !important; }
}

/* Телефон: фильтр-демо Plants в две колонки, карточки компактнее */
@media (max-width: 560px) {
  .demo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 14px !important; }
  .pcard__name { font-size: 0.9375rem !important; line-height: 1.25 !important; }
  .pcard__price { font-size: 0.9375rem !important; }
  .pcard__meta { display: none !important; }
}


/* ============================================================================================
   Телефон: «до / после» бегунком, без дыр, стрелки Previous/Next, экраны в «в разработке»
   ============================================================================================ */
@media (max-width: 900px) {
  /* кадр до/после: та же накладка, что на десктопе, но срез двигают пальцем */
  .c-ba__cut { display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; border-radius: 14px; box-shadow: none; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; position: relative; }
  .turn__layer { grid-area: 1 / 1; aspect-ratio: 16 / 10; border-radius: 0; order: 0; }
  .turn__layer--before { clip-path: inset(0 calc(var(--p, 0.5) * 100%) 0 0); }
  .turn__layer--after { order: 0; }
  .c-ba__cut::after { display: block; content: ''; position: absolute; inset-block: 0; inset-inline-start: calc(var(--p, 0.5) * 100%); inline-size: 3px; margin-inline-start: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 12, 0.4); z-index: 3; pointer-events: none; }
  .c-ba__handle { position: absolute; z-index: 4; inset-block-start: 50%; inset-inline-start: calc(var(--p, 0.5) * 100%); translate: -50% -50%; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%; background: #fff; color: #0d0d0c; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); touch-action: pan-y; cursor: grab; }
  .c-ba__handle:not(.is-used) { animation: ba-pulse 1.8s ease-in-out infinite; }
  .c-ba__cut.is-drag .c-ba__handle { scale: 1.12; }
  @keyframes ba-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 0 rgba(255,255,255,0.55); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 12px rgba(255,255,255,0); } }
  .c-ba__hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-block-start: var(--space-16); font-size: 0.9375rem; color: var(--color-fg-muted); transition: opacity 400ms ease; }
  .c-ba__hint svg { animation: ba-hand 1.8s ease-in-out infinite; }
  @keyframes ba-hand { 0%, 100% { translate: -8px 0; } 50% { translate: 8px 0; } }
  .c-ba__hint.is-gone { opacity: 0; }
  .turn__legend .is-before, .turn__legend .is-after { display: none; }
  /* без дыр: закреплённая рама есть только на десктопе */
  html .has-motion .c-ba__stage, .c-ba__stage { block-size: auto !important; }
  .c-ba__stick { position: static !important; inline-size: 100% !important; }
  .c-ba__say { padding-block-start: var(--space-48); }
  .c-ba__pairs { padding-block-start: var(--space-64); gap: var(--space-64); }
  .c-ba__gains { padding-block-start: var(--space-64); }
  .pairrow { padding-block-start: var(--space-32); }
  /* Previous / Next: у «назад» стрелка слева, у «дальше» справа */
  .c-nextcase__col--prev .c-nextcase__link { justify-content: flex-start; gap: var(--space-16); }
  .c-nextcase__go--back { order: -1 !important; }
  .c-nextcase__col--prev .c-nextcase__name { order: 0 !important; }
  .c-nextcase__col--prev .c-nextcase__link .c-nextcase__soon { order: 1 !important; margin-inline-start: auto; }
  /* экраны проектов «в разработке»: два телефона рядом, оба целиком */
  .stub__stage { flex-wrap: nowrap; gap: 14px; padding: 36px 16px 0; align-items: flex-end; }
  .stub__stage img, .stub__stage--cards img, .stub__stage--wide img { inline-size: calc(50% - 7px); min-inline-size: 0; max-inline-size: 300px; }
  .stub__stage--wide img { inline-size: 100%; max-inline-size: 420px; }
  .stub__stage img + img { margin-block-end: -24px; }
}

/* ============================================================================================
   Начало страницы проекта: сцена, название, кнопки, данные, итог
   ============================================================================================ */
.c-hero { padding-block: calc(var(--sec) * 0.5) var(--sec); row-gap: 0; }
.c-hero__stage { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; margin-block-end: var(--blk-lg); isolation: isolate; }
.c-hero__stage > .scene { position: absolute; inset: 0; }
.c-hero__kicker { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; gap: 10px; margin-block-end: var(--space-16); padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--proj, var(--color-line)); color: var(--color-fg); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.c-hero__kicker::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--proj, var(--color-accent)); }
.c-hero__name { padding-block-end: var(--space-16); }
.c-hero__name::before { background: var(--proj, var(--color-accent)); }
.c-hero__lead { max-inline-size: 60ch; }
.c-hero__title { padding-block: var(--space-8) var(--space-24); }
.c-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding-block-start: var(--space-32); }
.c-hero__note { padding-block-start: var(--space-16); max-inline-size: 56ch; }
.c-hero__main { grid-column: 1 / 8; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; }
.c-hero__main > * { grid-column: 1 / -1 !important; max-inline-size: 100%; }
.c-hero__name { font-size: clamp(1.25rem, 1.9vw, 1.75rem); }
.c-hero__spec { grid-column: 9 / -1; grid-row: auto; align-self: start; padding-block-start: var(--space-48); }
.c-ghost { display: inline-flex; align-items: center; gap: 8px; block-size: 44px; padding: 0 18px 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-line); color: var(--color-fg); font-size: 0.9375rem; font-weight: 600; transition: box-shadow var(--dur-300) var(--ease-out), background var(--dur-300) var(--ease-out); }
.c-ghost svg { transition: transform var(--dur-300) var(--ease-out); }
.c-ghost:hover, .c-ghost:focus-visible { box-shadow: inset 0 0 0 1.5px var(--color-fg); background: rgba(242, 242, 240, 0.08); }
.c-ghost:hover svg { transform: translateX(3px); }
.c-wip { display: inline-flex; align-items: center; gap: 10px; block-size: 44px; padding: 0 18px 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-line); color: var(--color-fg-muted); font-size: 0.9375rem; }
.c-wip i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; animation: wip-dot 1.2s ease-in-out infinite; }
.c-wip i:nth-child(2) { animation-delay: 0.2s; } .c-wip i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wip-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c-wip i { animation: none; opacity: 0.6; } }

/* итог: что хотела компания, что я сделала, что получилось */
.c-impact { padding-block: var(--sec); row-gap: var(--blk); align-items: start; }
.c-impact__h { grid-column: 1 / -1; }
.c-impact__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.c-impact__col { display: grid; align-content: start; gap: var(--space-16); padding-block-start: var(--space-24); border-block-start: 1.5px solid var(--proj, var(--color-line)); }
.c-impact__col h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.c-impact__col ul { display: grid; gap: var(--space-12); list-style: none; padding: 0; margin: 0; }
.c-impact__col li { position: relative; padding-inline-start: 1.1em; font-size: 0.9375rem; line-height: 1.5; color: var(--color-fg); text-wrap: pretty; }
.c-impact__col li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--proj, var(--color-accent)); }
.c-impact__challenge { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gutter); padding-block-start: var(--space-32); border-block-start: 1px solid var(--color-line-soft); }
.c-impact__challenge h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.c-impact__challenge p { max-inline-size: 70ch; color: var(--color-fg-muted); }

@media (max-width: 900px) {
  .c-hero { padding-block: var(--space-32) var(--sec); }
  .c-hero__stage { aspect-ratio: 4 / 3; border-radius: 18px; margin-block-end: var(--blk); }
  .c-hero__main, .c-hero__spec { grid-column: 1 / -1; }
  .c-hero__spec { padding-block-start: var(--space-48); }
  .c-impact__cols { grid-template-columns: 1fr; gap: var(--space-48); }
  .c-impact__challenge { grid-template-columns: 1fr; gap: var(--space-12); }
}


/* ============================================================================================
   «До / после»: один компонент на всех страницах
   --p на секции = где проходит линия (доля ширины слева). Слева кадр «до», справа «после».
   ============================================================================================ */
.c-ba__cut { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 14px; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.turn__layer { grid-area: 1 / 1; position: relative; aspect-ratio: 16 / 10; overflow: clip; }
.turn__layer img { inline-size: 100%; block-size: 100%; object-fit: contain; object-position: 50% 50%; display: block; background: #fff; -webkit-user-drag: none; }
.turn__layer--before { clip-path: inset(0 calc((1 - var(--p, 0.5)) * 100%) 0 0); }
.c-ba__cut::after { content: ''; position: absolute; z-index: 3; inset-block: 0; inset-inline-start: calc(var(--p, 0.5) * 100%); inline-size: 3px; margin-inline-start: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 12, 0.4); pointer-events: none; }
/* Подписи: одинаковые, не нажимаются, гаснут вместе со своим кадром */
.turn__layer::before, .pair[data-label]::before {
  content: attr(data-label); position: absolute; z-index: 2; inset-block-start: 14px; padding: 7px 14px; border-radius: 999px;
  background: rgba(13, 13, 12, 0.78); color: #fff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; user-select: none; -webkit-user-select: none; cursor: default;
}
.turn__layer--before::before { inset-inline-start: 14px; opacity: clamp(0, calc((var(--p, 0.5) - 0.18) * 8), 1); }
.turn__layer--after::before { inset-inline-start: auto; inset-inline-end: 14px; background: rgba(13, 13, 12, 0.78); opacity: clamp(0, calc((0.82 - var(--p, 0.5)) * 8), 1); }
.pair { position: relative; }
.pair[data-label]::before { inset-inline-start: 14px; }
.turn__legend { display: block; }
.turn__legend .is-before, .turn__legend .is-after { display: none; }
.c-ba__handle { position: absolute; z-index: 4; inset-block-start: 50%; inset-inline-start: calc(var(--p, 0.5) * 100%); translate: -50% -50%; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%; background: #fff; color: #0d0d0c; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); touch-action: pan-y; cursor: grab; }
.c-ba__handle:focus-visible { outline: 3px solid var(--color-accent, #b00c3a); outline-offset: 3px; }
.c-ba__handle:not(.is-used) { animation: ba-pulse 1.8s ease-in-out infinite; }
.c-ba__cut.is-drag .c-ba__handle { scale: 1.12; cursor: grabbing; }
.c-ba__hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-block-start: var(--space-16); font-size: 0.9375rem; color: var(--color-fg-muted); transition: opacity 400ms ease; }
.c-ba__hint svg { animation: ba-hand 1.8s ease-in-out infinite; }
.c-ba__hint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .c-ba__handle:not(.is-used), .c-ba__hint svg { animation: none; } }
@media (max-width: 900px) {
  .turn__layer::before, .pair[data-label]::before { inset-block-start: 10px; padding: 6px 12px; font-size: 0.875rem; }
  .turn__layer--before::before, .pair[data-label]::before { inset-inline-start: 10px; }
  .turn__layer--after::before { inset-inline-end: 10px; }
}

/* ============================================================================================
   Крупный просмотр (lightbox.js)
   ============================================================================================ */
.is-zoomable { cursor: zoom-in; position: relative; }
.is-zoomable:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 4px; }
figure.is-zoomable::after { content: ''; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 36px; block-size: 36px; border-radius: 50%; background: rgba(13, 13, 12, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; pointer-events: none; opacity: 0.9; transition: scale 300ms var(--ease-out); }
figure.is-zoomable:hover::after { scale: 1.12; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); opacity: 0; transition: opacity 220ms ease; overscroll-behavior: contain; }
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__bg { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb__fig { position: relative; display: grid; gap: var(--space-16); justify-items: center; max-inline-size: min(1500px, 100%); max-block-size: 100%; margin: 0; }
.lb__img { max-inline-size: 100%; max-block-size: calc(100dvh - 160px); inline-size: auto; block-size: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); touch-action: pinch-zoom; background: #fff; }
.lb__cap { max-inline-size: 70ch; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: #d8d6d0; }
.lb__btn { position: absolute; z-index: 2; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(242, 242, 240, 0.14); color: #fff; cursor: pointer; transition: background 200ms ease, scale 200ms ease; }
.lb__btn:hover { background: rgba(242, 242, 240, 0.28); }
.lb__btn:active { scale: 0.94; }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb__btn[hidden] { display: none; }
.lb__close { inset-block-start: 16px; inset-inline-end: 16px; }
.lb__prev, .lb__next { inset-block-start: 50%; translate: 0 -50%; }
.lb__prev { inset-inline-start: 16px; }
.lb__next { inset-inline-end: 16px; }
@media (max-width: 900px) {
  .lb { padding: 64px 12px 24px; }
  .lb__prev, .lb__next { inset-block-start: auto; inset-block-end: 16px; translate: none; }
  .lb__prev { inset-inline-start: 16px; }
  .lb__next { inset-inline-end: 16px; }
  .lb__img { max-block-size: calc(100dvh - 190px); }
}
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }

/* «Поток экранов» без прокрутки страницы: одна рамка с лентой, листается внутри */
.flow__scroller.is-preview, .flow__scroller.is-preview .flow__stage { block-size: auto !important; position: static; }
.flow__scroller.is-preview .flow__screens { position: static; }
.flow__scroller.is-preview .frame__body { max-block-size: min(72dvh, 640px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; aspect-ratio: auto; background: #fff; }
.flow__scroller.is-preview .flow__strip { display: block; transform: none !important; }
.flow__scroller.is-preview .flow__strip img { display: block; inline-size: 100%; block-size: auto; }
.flow__scroller.is-preview .frame__body:focus-visible { outline: 2px solid var(--color-fg); outline-offset: -2px; }
.flow__hint { margin-block-start: var(--space-12); font-size: 0.9375rem; color: var(--color-fg-muted); text-align: center; }

.flow__scroller.is-preview .flow__screens { aspect-ratio: auto; block-size: auto; inline-size: 100%; display: block; }
.flow__scroller.is-preview .flow__card, .flow__scroller.is-preview .flow__card .frame { position: static; inset: auto; }
.flow__scroller.is-preview .frame__body { position: relative; block-size: auto; }
.flow__scroller.is-preview .frame__body .flow__strip { position: static; will-change: auto; }
.flow__scroller.is-preview .frame__body img { position: static; }
.flow__scroller.is-preview .flow__inner { align-items: start; }
.flow__scroller.is-preview .flow__stage { padding-block: var(--blk); overflow: visible; pointer-events: auto; }
.flow__scroller.is-preview .flow__sep { display: flex; justify-content: space-between; gap: var(--space-16); padding: 10px 16px; background: #1b1b1a; color: #cfccc6; font-size: 0.875rem; }


/* Пары «до / после»: подпись стоит вплотную к своей картинке, а между парами воздуха больше */
.pair { display: grid; align-content: start; gap: var(--space-12); }
.pair__cap { margin: 0; }
@media (max-width: 900px) {
  .pairrow { gap: var(--space-48) var(--space-24); }
  .pairrow__t { padding-block-end: 0; }
}

/* Телефоны Arivin: каждый макет с подписью лежит в своей карточке, поэтому видно, что к чему относится */
.c-mob__row figure { display: grid; justify-items: center; align-content: start; gap: var(--space-24); padding: var(--space-32) var(--space-24) var(--space-24); border-radius: 24px; background: var(--band, #1b1e22); margin: 0; }
.c-mob__row .phone__cap { justify-self: stretch; margin: 0; padding-block-start: var(--space-16); border-block-start: 1px solid var(--color-line-soft); text-align: start; }
@media (max-width: 900px) { .c-mob__row { gap: var(--space-48); } .c-mob__row figure { padding: var(--space-32) var(--space-16) var(--space-24); } }

/* Пока картинка грузится, под ней тёмная подложка, а не белая: белая вспышка при загрузке была заметна */
.turn__layer img, .flow__scroller .frame__body, .pair img, .dir img, .fx__card img, .fx__stage img { background-color: var(--band, #1b1e22); }
.flow__scroller.is-preview .frame__body { background: var(--band, #1b1e22); }

.c-hero__stage .scene--wish .phone--solo { inline-size: 15cqw; }
@media (max-width: 900px) { .c-hero__stage .scene--wish .phone--solo { inline-size: 26cqw; } }

/* Чем сделано: перечень чипами, в данных проекта */
.c-tech { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.c-tech li { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-line); font-size: 0.875rem; line-height: 1.4; color: var(--color-fg); }

/* ============================================================================================
   Читаемость по всему сайту: контраст приглушённого текста и минимальные размеры
   Приглушённый текст на тёмном ≥ 7:1 (#a9a6a0 на #0d0d0c = 8.1:1), мелкий текст не меньше 12 px, основной мелкий 15 px.
   ============================================================================================ */
:root { --color-fg-muted: #a9a6a0; --color-fg-dim: #c2bfb9; }
.muted, .sec__lead, .c-hero__lead { color: var(--color-fg-muted); }
.panel .muted, .panel .sec__lead { color: #55524e; }
.t-small { font-size: 0.9375rem; line-height: 1.55; }
.label { font-size: 0.75rem; letter-spacing: 0.1em; }
.flow__step i { font-size: 1.125rem; font-style: normal; font-weight: 600; color: var(--color-fg); }
.flow__step em { font-size: 1rem; line-height: 1.55; font-style: normal; color: var(--color-fg-muted); }
.flow__step b { font-size: 0.875rem; color: var(--color-fg-muted); }
.flow__step.is-on em { color: var(--color-fg); }
.gain span, .fig p, .pair__cap, .phone__cap span, .fix__cost, .dsfact span, .c-nextcase__hint { font-size: 0.9375rem; line-height: 1.55; }
.pair__cap b, .phone__cap b { font-size: 1.0625rem; }
.spec-rows dd { font-size: 0.9375rem; }

.flow__step:not(.is-on) { opacity: 0.8; }

/* ============================================================================================
   Один ритм в секции «до / после»: внутри группы тесно, между группами просторно, и везде одинаково.
   заголовок → пояснение 24, пояснение → кадр 40, кадр → подпись 16, подпись → текст «до / после» 40,
   текст → следующая группа 96, внутри группы пар 24, пары между собой 72.
   ============================================================================================ */
.c-ba .sec__lead { padding-block-start: var(--space-24); }
.c-ba__stage { margin-block-start: var(--space-40, 40px); }
.c-ba__say { padding-block-start: var(--space-40, 40px); }
.c-ba__pairs { padding-block-start: var(--blk-lg); gap: calc(var(--blk-lg) * 0.75); }
.c-ba__gains { padding-block-start: var(--blk-lg); }
.pairrow { gap: var(--space-24) var(--space-32); padding-block-start: var(--space-32); }
.turn__legend { padding-block-start: var(--space-16); margin: 0; }
@media (max-width: 900px) {
  .c-ba__say { padding-block-start: var(--space-32); gap: var(--space-24); }
  .c-ba__pairs { padding-block-start: var(--space-64); gap: var(--space-64); }
  .c-ba__gains { padding-block-start: var(--space-64); }
  .pairrow { gap: var(--space-40, 40px) var(--space-24); padding-block-start: var(--space-24); }
}



/* ============================================================================================
   Дизайн-система: каждый образец (цвет, поверхность, кнопка, шаг, тень, тег) оживает при наведении
   и при касании. Ничего не пропущено: раньше увеличивались только некоторые.
   ============================================================================================ */
.tint__chip, .surf, .sp, .sp__bar, .dsbtn, .ds__card, .ty, .ds__mod, .ds__dim,
.pds-brand__chip, .pds-surf, .pds-btn, .pds-fchip, .pds-tag, .pds-elev, .pds-gr__bar, .pds-mot, .pds-ramp__s, .pds-sp, .pds-ty, .ratio__row, .ratio__tag {
  transition: scale 380ms var(--ease-out), translate 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  transform-origin: 50% 60%;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tint__chip:hover, .surf:hover, .pds-brand__chip:hover, .pds-surf:hover, .pds-ramp__s:hover, .pds-elev:hover { scale: 1.06; z-index: 3; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
  .dsbtn:hover, .pds-btn:hover, .pds-fchip:hover, .pds-tag:hover, .ratio__tag:hover, .pds-mot:hover { scale: 1.08; }
  .sp:hover, .sp__bar:hover, .pds-sp:hover, .pds-gr__bar:hover { scale: 1.04; }
  .ty:hover, .pds-ty:hover, .ds__card:hover, .ds__mod:hover, .ds__dim:hover, .ratio__row:hover { translate: 8px 0; }
}
.tint__chip:active, .surf:active, .pds-brand__chip:active, .pds-surf:active, .pds-ramp__s:active, .pds-elev:active, .dsbtn:active, .pds-btn:active, .pds-fchip:active, .pds-tag:active, .pds-mot:active, .sp:active, .pds-sp:active { scale: 1.05; }
.c-ba .sec__lead { padding-block-end: var(--space-32); }

/* ============================================================================================
   Блок «задача»: заголовок и пояснение в одну строку, два контекста рядом, главная мысль крупно,
   проблемы старого — карточками 2×2
   ============================================================================================ */
.c-task { row-gap: var(--blk-lg); align-items: start; }
.c-task .sec__h { grid-column: 1 / 8; }
.c-task .sec__lead { grid-column: 9 / -1; align-self: end; margin: 0; }
.task__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter) calc(var(--gutter) * 2); }
.task__col { display: grid; align-content: start; gap: var(--space-16); padding-block-start: var(--space-24); border-block-start: 1.5px solid var(--panel-fg); }
.task__h { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-fg); }
.task__col p { max-inline-size: 52ch; }
.task__job { grid-column: 1 / -1; max-inline-size: 30ch; font-size: clamp(1.625rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; padding-inline-start: var(--space-32); border-inline-start: 6px solid var(--proj, var(--color-accent)); }
.task__gaps { grid-column: 1 / -1; display: grid; gap: var(--space-24); }
.task__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); list-style: none; margin: 0; padding: 0; }
.task__card { display: grid; align-content: start; gap: var(--space-12); padding: var(--space-32); border-radius: 22px; background: #f3f2ef; }
.task__card b { font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.task__card span { font-size: 1rem; line-height: 1.55; color: #4a4743; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .task__card { transition: translate 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
  .task__card:hover { translate: 0 -6px; box-shadow: 0 18px 40px rgba(13, 13, 12, 0.12); }
}
@media (max-width: 900px) {
  .c-task .sec__h, .c-task .sec__lead { grid-column: 1 / -1; }
  .task__cols { grid-template-columns: 1fr; }
  .task__card { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-24) 0; }
  .task__job { padding-inline-start: var(--space-24); }
  .task__card { padding: var(--space-24); }
}

/* ============================================================================================
   «До / после»: подписи не лежат на картинке, а стоят в строке под ней и не закрывают ни кнопки, ни текст сайта.
   ============================================================================================ */
.turn__layer::before, .pair[data-label]::before { display: none; }
.turn__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-16); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.turn__legend .is-before, .turn__legend .is-after { display: inline-flex !important; align-items: center; padding: 7px 18px; border-radius: 999px; background: rgba(242, 242, 240, 0.14); color: var(--color-fg); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; pointer-events: none; user-select: none; -webkit-user-select: none; cursor: default; transition: opacity 200ms ease; }
.turn__legend .is-before { opacity: clamp(0, calc((var(--p, 0.5) - 0.18) * 8), 1); order: 1; }
.turn__legend .is-after { opacity: clamp(0, calc((0.82 - var(--p, 0.5)) * 8), 1); order: 3; }
.turn__legend .turn__what { order: 2; flex: 1 1 24ch; text-align: center; font-size: 1rem; color: var(--color-fg-muted); }
.c-ba__handle { inset-inline-start: clamp(26px, calc(var(--p, 0.5) * 100%), calc(100% - 26px)); }
@media (max-width: 900px) {
  .turn__legend .turn__what { order: 4; flex-basis: 100%; text-align: start; }
}

/* ============================================================================================
   Лента «страница сверху вниз»: слева шаги. Описание раскрыто только у текущего шага, остальные свёрнуты в строку,
   поэтому весь список помещается в окно и первый шаг не уходит под шапку. Текущий шаг подсвечен полосой и фоном,
   сверху подсказка, что шаги меняются вместе с прокруткой.
   ============================================================================================ */
.flow__rail { gap: var(--space-8); align-content: center; }
.flow__step { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-16); align-items: start; padding: 14px 18px 14px 18px; border-radius: 16px; border-inline-start: 4px solid transparent; transition: background 400ms ease, border-color 400ms ease, opacity 400ms ease; }
.flow__step.is-on { background: rgba(242, 242, 240, 0.08); border-inline-start-color: var(--proj, var(--color-accent)); opacity: 1; }
.flow__step span { display: grid; }
.flow__step em { display: block; max-block-size: 0; overflow: hidden; opacity: 0; transition: max-block-size 600ms var(--ease-out), opacity 400ms ease, margin 400ms ease; }
.flow__step.is-on em { max-block-size: 16em; opacity: 1; margin-block-start: var(--space-8); }
.flow__scroller:not(.is-strip) .flow__step em { max-block-size: none; opacity: 1; margin-block-start: var(--space-8); }
@media (prefers-reduced-motion: reduce) { .flow__scroller.is-strip .flow__rail::after { animation: none; } .flow__step em { transition: none; } }
.flow__step:not(.is-on) { opacity: 0.85; }

/* «Science page» и подобные заголовки: воздух до картинки, но заголовок всё равно читается как её заголовок */
.pairrow { row-gap: var(--space-32); }
.pairrow__t { padding-block-end: var(--space-8); }
.c-ba__handle:focus-visible { border-radius: 50%; outline: 3px solid var(--color-accent, #b00c3a); outline-offset: 3px; }
.c-ba__handle:focus:not(:focus-visible) { outline: none; }
@media (max-width: 900px) { .pairrow { row-gap: var(--space-32); } }

/* ============================================================================================
   Шаги слева, второй вариант: тихо и плавно. Без плашки и яркой полосы. Тонкая линия слева заполняется вместе
   с прокруткой, текущий шаг проявляется, его описание раскрывается мягко, остальные приглушены.
   ============================================================================================ */
.flow__rail { position: relative; gap: var(--space-8); padding-inline-start: var(--space-24); box-shadow: inset 1px 0 0 var(--color-line-soft); background: linear-gradient(rgba(242, 242, 240, 0.3), rgba(242, 242, 240, 0.3)) no-repeat 0 0 / 2px calc(var(--flow-p, 0) * 100%); }
.flow__step { background: none !important; border: 0 !important; padding: 10px 0 !important; opacity: 0.5; transition: opacity 800ms ease; }
.flow__step.is-on { opacity: 1; }
.flow__step:not(.is-on) { opacity: 0.5; }
.flow__step span { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 900ms var(--ease-out); }
.flow__step.is-on span { grid-template-rows: auto 1fr; }
.flow__step em { overflow: hidden; min-block-size: 0; max-block-size: none !important; margin: 0 !important; padding-block-start: 0; opacity: 0; transition: opacity 700ms ease 120ms, padding 700ms ease; }
.flow__step.is-on em { opacity: 1; padding-block-start: var(--space-8); }
.flow__scroller:not(.is-strip) .flow__step { opacity: 1; }
.flow__scroller:not(.is-strip) .flow__step span { grid-template-rows: auto 1fr; }
.flow__scroller:not(.is-strip) .flow__step em { opacity: 1; padding-block-start: var(--space-8); }
@media (prefers-reduced-motion: reduce) { .flow__step, .flow__step span, .flow__step em { transition: none; } }

/* ============================================================================================
   Три телефона в воздухе под разными углами (как в студийной съёмке), подписи с теми же номерами под сценой
   ============================================================================================ */
.devscene { grid-column: 1 / -1; position: relative; container-type: size; aspect-ratio: 16 / 9.2; margin-block-start: var(--blk); border-radius: 28px; overflow: hidden; background: radial-gradient(120% 110% at 28% 0%, #ffffff 0%, #eef2f5 55%, #dfe6ec 100%); isolation: isolate; }
.devscene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 56%); pointer-events: none; }
.devscene__ph { position: absolute; inline-size: 20.5cqw; }
.devscene__ph--1 { inset-inline-start: 17cqw; inset-block-start: 9cqh; transform: perspective(1500px) rotateX(8deg) rotateY(14deg) rotateZ(-11deg); }
.devscene__ph--2 { inset-inline-start: 39.5cqw; inset-block-start: 2cqh; transform: perspective(1500px) rotateX(6deg) rotateY(-12deg) rotateZ(6deg); z-index: 2; }
.devscene__ph--3 { inset-inline-start: 62cqw; inset-block-start: 10cqh; transform: perspective(1500px) rotateX(8deg) rotateY(-16deg) rotateZ(13deg); }
.devscene .dev { inline-size: 100%; }
.devscene .dev__fade { display: none; }
.devscene__n { position: absolute; z-index: 6; inset-block-start: -2cqw; inset-inline-start: -2cqw; inline-size: 2.6cqw; min-inline-size: 30px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #0d0d0c; color: #fff; font-size: max(0.9375rem, 1.1cqw); font-weight: 700; box-shadow: 0 0 0 3px #e4e5e2; }
.devcaps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: var(--blk) 0 0; padding: 0; list-style: none; }
.devcaps li { display: grid; gap: var(--space-8); align-content: start; padding-block-start: var(--space-24); border-block-start: 1px solid var(--color-line); }
.devcaps b { display: flex; align-items: center; gap: var(--space-12); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.devcaps i { flex: none; inline-size: 28px; block-size: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-fg); color: var(--color-bg); font-size: 0.875rem; font-style: normal; font-weight: 700; }
.devcaps span { font-size: 1rem; line-height: 1.55; color: var(--color-fg-muted); }
@media (max-width: 900px) {
  .devscene { aspect-ratio: 1 / 0.98; border-radius: 22px; }
  .devscene__ph { inline-size: 30cqw; }
  .devscene__ph--1 { inset-inline-start: 4cqw; inset-block-start: 24cqh; transform: perspective(1500px) rotateX(6deg) rotateY(10deg) rotateZ(-8deg); }
  .devscene__ph--2 { inset-inline-start: 35cqw; inset-block-start: 6cqh; transform: perspective(1500px) rotateX(5deg) rotateY(-8deg) rotateZ(4deg); }
  .devscene__ph--3 { inset-inline-start: 66cqw; inset-block-start: 26cqh; transform: perspective(1500px) rotateX(6deg) rotateY(-12deg) rotateZ(9deg); }
  .devscene__n { inset-block-start: -1cqw; inset-inline-start: -1cqw; }
  .devcaps { grid-template-columns: 1fr; gap: var(--space-32); }
}
.devscene .devscene__ph:not(.devscene__ph--2) .dev__screen { overflow: hidden; }

/* Без порядковых номеров: шаги, решения и подписи читаются по названию, а не по цифре */
.flow__step { grid-template-columns: 1fr !important; }
.flow__step b, .fix__n, .devscene__n { display: none; }
.devcaps i { display: none; }
/* образцы дизайн-системы: только увеличение, без теней-«квадратов» */
.tint__chip:hover, .surf:hover, .pds-brand__chip:hover, .pds-surf:hover, .pds-ramp__s:hover { box-shadow: none; }

/* Мокап целиком, без обрезки: рамка кадра повторяет пропорцию самого мокапа. Кадр не выше 70 % окна и стоит по центру. */
.c-hero__stage { aspect-ratio: 1552 / 1013; inline-size: min(100%, calc(min(70vh, 700px) * 1.532)); margin-inline: auto; }
@media (max-width: 900px) { .c-hero__stage { aspect-ratio: 1552 / 1013; inline-size: 100%; } }

/* Свайп двумя пальцами по горизонтали не возвращает на предыдущую страницу браузера (на корневом элементе это не создаёт прокрутку, Lenis не затронут) */
html { overscroll-behavior-x: none; }

/* ============================================================================================
   Блок «задача», четвёртая версия: чистая типографика сайта, без цветных карточек.
   Строка заголовка (слева заголовок, справа пояснение), потом главная мысль крупно, два контекста, потом 2×2 пункта с чертой-маркером.
   ============================================================================================ */
.c-task { row-gap: var(--blk-lg); align-items: start; }
.task__intro { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.task__intro .sec__h { grid-column: 1 / 8; margin: 0; }
.task__intro .sec__lead { grid-column: 9 / -1; margin: 0; }
.task__main { grid-column: 1 / -1; display: grid; gap: var(--blk-lg); }
.task__job { padding: var(--space-48) 0 0; border: 0; border-block-start: 2px solid var(--panel-fg); border-radius: 0; background: none; color: var(--panel-fg); max-inline-size: 26ch; font-size: clamp(1.875rem, 4.2vw, 3.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.task__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) calc(var(--gutter) * 2); }
.task__col { padding-block-start: var(--space-16); border-block-start: 1px solid var(--panel-line); }
.task__gaps { display: grid; gap: var(--space-24); }
.task__cards { display: grid; grid-template-columns: 1fr; gap: 0; }
.task__card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gutter); align-items: start; padding: var(--space-32) 0; border-radius: 0; background: none; border-block-start: 1px solid var(--panel-line); box-shadow: none; }
.task__card:last-child { border-block-end: 1px solid var(--panel-line); }
.task__card::before { display: none; }
.task__card b { font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.18; text-wrap: balance; }
.task__card span { font-size: 1rem; line-height: 1.55; color: #4a4743; max-inline-size: 52ch; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .task__card { transition: translate 420ms var(--ease-out); }
  .task__card:hover { translate: 8px 0; }
}
@media (max-width: 900px) {
  .task__intro { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .task__intro .sec__h, .task__intro .sec__lead { grid-column: 1 / -1; }
  .task__cols { grid-template-columns: 1fr; }
  .task__card { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-24) 0; }
  .task__main { margin-block-start: 0; }
  .task__job { max-inline-size: none; padding-block-start: var(--space-32); }
}

/* Индикатор прокрутки под рамкой: бледный, не отвлекает от экрана */
.flow__bar { background: rgba(242, 242, 240, 0.08); }
.flow__bar span { background: rgba(242, 242, 240, 0.28); }
/* Arivin: образцы одного размера, все одинаково слегка увеличиваются при наведении, без теней и обводок */
.tint { align-content: start; }
.tint__chip { display: block; inline-size: 100%; }
.tint__chip:hover, .surf:hover, .dsbtn:hover { scale: 1.06; box-shadow: none; }
.ty { transform-origin: 0 50%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ty:hover, .pds-ty:hover { translate: 0 0; scale: 1.03; }
  .surf:hover, .tint__chip:hover { scale: 1.06; }
}

.devscene::before { background: linear-gradient(112deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0) 54%), linear-gradient(105deg, rgba(120, 150, 180, 0) 56%, rgba(120, 150, 180, 0.12) 70%, rgba(120, 150, 180, 0) 84%); }

/* Previous / Next: без цветных полос и рамки, белые линии. Кольцо фокуса только с клавиатуры и белое */
.c-nextcase__col, .c-nextcase__col[style] { --proj: #f2f2f0 !important; }
.c-nextcase__link, .c-nextcase__link:hover { outline: none; }
.c-nextcase__link:focus-visible { outline: 2px solid #f2f2f0; outline-offset: 6px; border-radius: 6px; }
.c-nextcase__link { border-block-start-color: rgba(242, 242, 240, 0.35); }
.c-nextcase__link::after { background: #f2f2f0; }
.c-nextcase__go { box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, 0.55); color: #f2f2f0; }
a.c-nextcase__link:hover .c-nextcase__go, a.c-nextcase__link:focus-visible .c-nextcase__go { background: #f2f2f0; color: #0d0d0c; }
a.c-nextcase__link:hover .c-nextcase__name { color: #fff; }
.c-nextcase__soon { box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, 0.35); color: #cfccc6; }
/* Итог проекта: нейтральные линии и точки вместо цвета проекта */
.c-impact__col { border-block-start-color: rgba(242, 242, 240, 0.35); }
.c-impact__col li::before { background: rgba(242, 242, 240, 0.7); }

/* Цвета проектов в служебных элементах отключены: белое и серое */
[style*="--proj"] { --proj: #f2f2f0 !important; }
.panel [style*="--proj"] { --proj: #0d0d0c !important; }
.c-hero__name::before { background: var(--color-fg, #f2f2f0); }

/* Скроллируемые страницы в рамке браузера и подсказка */
.pv { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(242, 242, 240, 0.14); transition: box-shadow 300ms ease; }
.pv__bar { display: flex; align-items: center; gap: 7px; block-size: 34px; padding-inline: 14px; background: #1b1b1a; }
.pv__bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(242, 242, 240, 0.28); }
.pv__screen { aspect-ratio: 16 / 10; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; background: #fff; }
.pv__screen::-webkit-scrollbar { display: none; }
.pv__screen img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: auto; object-fit: fill; }
.pv.is-scroll:not(.is-active) .pv__screen { cursor: pointer; }
.pv.is-active .pv__screen { overflow-y: auto; }
.pv.is-active { box-shadow: 0 0 0 2px rgba(242, 242, 240, 0.55); }
.pv__screen:focus-visible { outline: 3px solid #f2f2f0; outline-offset: -3px; }
.scrollnote { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--color-fg-muted); margin-inline-start: auto; }
.pairrow__t { align-items: center; flex-wrap: wrap; }
.c-note { grid-column: 1 / -1; margin: 0; padding-block-start: var(--space-16); }
.c-note .scrollnote { margin-inline-start: 0; }
.devfig { padding-block-start: var(--space-8); }

/* Живой экран фильтров в телефоне Plants (по макету Figma, 390 px). Масштабируется скриптом под ширину телефона */
.dev__screen--live { background: #fff; overflow: hidden !important; }
.fs { position: relative; inline-size: 390px; transform-origin: 0 0; font-family: 'Quicksand', sans-serif; color: #0b2b16; -webkit-font-smoothing: antialiased; }
.fs__page { position: absolute; inset: 0 0 auto 0; background: #fff; block-size: 300px; }
.fs__hdr { display: flex; align-items: center; justify-content: space-between; block-size: 57px; padding-inline: 16px; font-size: 16px; }
.fs__hdr b { font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 16px; }
.fs__ic { display: grid; gap: 5px; inline-size: 20px; }
.fs__ic i { block-size: 1.6px; background: #0b2b16; display: block; }
.fs__acts { display: flex; gap: 14px; }
.fs__t { padding: 24px 16px; font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 600; }
.fs__scrim { position: absolute; inset: 0; background: rgba(11, 43, 22, 0.5); }
.fs__sheet { position: absolute; inset-inline: 0; inset-block-end: 0; padding-block-end: 8px; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(11, 43, 22, 0.18); }
.fs__grab { display: block; inline-size: 44px; block-size: 4px; margin: 12px auto 0; border-radius: 4px; background: rgba(11, 43, 22, 0.2); }
.fs__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }
.fs__head b { font-family: 'Nunito', sans-serif; font-size: 26px; font-weight: 600; }
.fs__clear { border: 0; background: none; font: 600 14px 'Quicksand', sans-serif; color: #c0704a; cursor: pointer; padding: 8px 0; }
.fs__grp { padding: 0 20px 16px; }
.fs__grp p { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: rgba(11, 43, 22, 0.7); padding-block: 4px 10px; }
.fs__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs__opt { block-size: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(11, 43, 22, 0.28); background: #fff; font: 500 14px 'Quicksand', sans-serif; color: #0b2b16; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, scale 200ms ease; }
.fs__opt:hover { border-color: #0b2b16; }
.fs__opt:active { scale: 0.95; }
.fs__opt[aria-pressed="true"] { background: #0b2b16; color: #fff; border-color: #0b2b16; }
.fs__foot { padding: 6px 20px 12px; }
.fs__show { inline-size: 100%; block-size: 52px; border: 0; border-radius: 999px; background: #c0704a; color: #fff; font: 600 16px 'Quicksand', sans-serif; cursor: pointer; transition: background 200ms ease; }
.fs__show.is-empty { background: rgba(11, 43, 22, 0.3); }
.fs button:focus-visible { outline: 2px solid #0b2b16; outline-offset: 2px; }

/* ============================================================================================
   Начало страницы проекта: фото первого экрана, под ним крупное название и кнопка, потом остальное
   ============================================================================================ */
.c-hero__name::before { display: none !important; }
.c-hero__shot { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 10; inline-size: min(100%, calc(84vh * 1.6)); margin: 0 auto var(--blk-lg); border-radius: 24px; overflow: hidden; background: #1e2126; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.c-hero__shot img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
.c-hero__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-24); padding-block-end: var(--space-24); }
.c-hero__head .c-hero__name { display: block; margin: 0; padding: 0; font-size: clamp(2.75rem, 8vw, 7rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.c-hero__head .c-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: 0; }
.c-hero__tag { margin: 0; max-inline-size: 28ch; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; color: var(--color-fg); padding-block-end: var(--space-16); }
.c-hero__main > .c-hero__lead { padding: 0; }
.c-hero__spec { padding-block-start: var(--space-8); }
@media (max-width: 900px) { .c-hero__shot { aspect-ratio: 16 / 10; inline-size: 100%; border-radius: 16px; } .c-hero__head .c-hero__cta { inline-size: 100%; } }

/* Итог проекта: три колонки с большим воздухом между ними */
.c-impact__cols { gap: calc(var(--gutter) * 2); }
.c-impact__col { gap: var(--space-24); padding-block-start: var(--space-24); }
.c-impact__col h3 { font-size: 1.25rem; }
.c-impact__col ul { gap: var(--space-16); }
.c-impact__col li { font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 900px) { .c-impact__cols { gap: var(--space-64); } }

/* PDA: блок «о проекте» без огромного текста и без минусов старого сайта */
.brief { row-gap: var(--blk-lg); align-items: start; }
.brief__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.brief__head .sec__h { grid-column: 1 / 8; margin: 0; }
.brief__head .sec__lead { grid-column: 9 / -1; margin: 0; }
.brief__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) calc(var(--gutter) * 2); }
.brief__col { display: grid; gap: var(--space-16); align-content: start; padding-block-start: var(--space-24); border-block-start: 1px solid var(--panel-line); }
.brief__h { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--panel-fg); }
.brief__col p { max-inline-size: 56ch; color: #34312e; }
.brief__fix { grid-column: 1 / -1; display: grid; gap: var(--space-32); }
.brief__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48) calc(var(--gutter) * 2); list-style: none; margin: 0; padding: 0; }
.brief__list li { display: grid; gap: var(--space-8); align-content: start; padding-block-start: var(--space-24); border-block-start: 1px solid var(--panel-line); }
.brief__list b { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.brief__list span { font-size: 1.0625rem; line-height: 1.55; color: #4a4743; max-inline-size: 46ch; }
@media (max-width: 900px) {
  .brief__head { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .brief__head .sec__h, .brief__head .sec__lead { grid-column: 1 / -1; }
  .brief__cols, .brief__list { grid-template-columns: 1fr; }
}
/* Три направления: только картинки */
.c-dir__row { margin-block-start: var(--blk); }
/* Правила адаптива: заголовок и пояснение без лишних строк */
.rule b { font-size: 1.125rem; }
.rule p { font-size: 1.0625rem; line-height: 1.55; }
/* Arivin: телефоны на белой сцене, подсказка внутри сцены сверху */
.devscene { background: #fff !important; }
.devscene::before { display: none; }
.devscene__note { position: absolute; z-index: 7; inset-block-start: 20px; inset-inline-start: 24px; margin: 0; color: #55524e; }
.devscene__note .scrollnote { color: #55524e; margin: 0; font-size: 1rem; }

/* Кнопка «Website» в самом низу первого экрана, по правому краю */
.c-hero__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-block-start: var(--blk); }
@media (max-width: 900px) { .c-hero__foot { justify-content: flex-start; } }
/* Заголовок ближе к своим картинкам, чем к блоку выше: снаружи больше, внутри меньше */
.c-dir { row-gap: 0; }
.c-dir .c-dir__row { margin-block-start: var(--space-24); }
/* Выход на живой сайт без цветной плашки: тёмный фон страницы, белая кнопка */
.c-live.wrap { background: none; color: var(--color-fg); box-shadow: none; clip-path: none; }
.c-live .muted, .c-live .live-note { color: var(--color-fg-muted); }
.c-live .visit { background: #f2f2f0; color: #0d0d0c; }


/* ===== Раунд 8 ===== */
/* Кнопки без стрелок: равные поля слева и справа */
.visit, .c-ghost { padding: 0 22px; }
/* Кнопки под текстом первого экрана, слева */
.c-hero__main .c-hero__cta { justify-content: flex-start; padding-block-start: var(--space-32); }
/* «Three decisions»: пояснение стоит ровно над текстом третьей карточки */
.c-fix .sec__lead { grid-column: 1 / -1; justify-self: start; align-self: end; margin: 0;
  margin-inline-start: calc((100% - 2 * var(--space-48)) / 3 * 2 + 2 * var(--space-48));
  max-inline-size: calc((100% - 2 * var(--space-48)) / 3); }
@media (max-width: 900px) { .c-fix .sec__lead { margin-inline-start: 0; max-inline-size: none; } }
/* Сцена с телефонами: ниже, чуть меньше, подсказка по центру над средним */
.devscene { aspect-ratio: 16 / 9.6; }
.devscene__ph { inline-size: 18.5cqw; }
.devscene__ph--1 { inset-inline-start: 18cqw; inset-block-start: 21cqh; }
.devscene__ph--2 { inset-inline-start: 40.7cqw; inset-block-start: 15cqh; }
.devscene__ph--3 { inset-inline-start: 63cqw; inset-block-start: 22cqh; }
.devscene__note { inset-inline: 0; inset-block-start: 4cqh; display: flex; justify-content: center; pointer-events: none; }
.devscene__note .scrollnote { padding: 9px 18px; border-radius: 999px; background: #f2f2f0; box-shadow: inset 0 0 0 1px rgba(13, 13, 12, 0.14); font-size: 1rem; font-weight: 600; color: #3b3935; }
.devscene__note .scrollnote svg { animation: wheel-bob 1.6s ease-in-out infinite; }
@keyframes wheel-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .devscene__note .scrollnote svg { animation: none; } }
.devscene .devscene__ph--2 .dev__fade { display: flex; }
.devscene .devscene__ph--2 .dev__screen { cursor: pointer; }
@media (max-width: 900px) {
  .devscene { aspect-ratio: 1 / 1.08; }
  .devscene__ph { inline-size: 27cqw; }
  .devscene__ph--1 { inset-inline-start: 5cqw; inset-block-start: 36cqh; }
  .devscene__ph--2 { inset-inline-start: 36.5cqw; inset-block-start: 22cqh; }
  .devscene__ph--3 { inset-inline-start: 68cqw; inset-block-start: 37cqh; }
  .devscene__note { inset-block-start: 4cqh; }
  .devscene__note .scrollnote { font-size: 0.9375rem; padding: 8px 14px; }
}
/* Plants: подсказки, что фильтр рабочий и экраны телефонов листаются */
.demo__hint { background: #0d0d0c; padding: var(--space-24) var(--space-32); }
.demo__hint b { font-size: 1.25rem; }
.demo__hint span { font-size: 1rem; color: rgba(255, 255, 255, 0.82); }
.c-note { display: flex; justify-content: center; padding-block: var(--space-24) 0; }
.c-note .scrollnote { padding: 10px 20px; border-radius: 999px; background: #f2f2f0; box-shadow: inset 0 0 0 1px rgba(13, 13, 12, 0.14); font-size: 1rem; font-weight: 600; color: #3b3935; margin-inline-start: 0; }
.c-note .scrollnote svg { animation: wheel-bob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .c-note .scrollnote svg { animation: none; } }
.c-resp .c-note { margin-block-start: var(--space-32); }

/* Первый фильтр пульсирует, пока демо не тронули */
@keyframes try-ring { 0% { box-shadow: 0 0 0 0 rgba(13, 13, 12, 0.5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(13, 13, 12, 0); } }
.demo:not(.is-tried) .demo__bar > :first-child { animation: try-ring 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .demo:not(.is-tried) .demo__bar > :first-child { animation: none; box-shadow: 0 0 0 3px rgba(13, 13, 12, 0.35); } }


/* ===== Раунд 9 ===== */
/* Нижняя кнопка заливается цветом сайта, как верхняя: на тёмном фоне чёрная заливка пропадала */
.c-live .visit::before { background: var(--color-accent); }
/* Все секции с одинаковым запасом сверху и снизу */
.c-impact, .c-state, .c-ba, .c-fix, .c-find, .c-dir, .c-resp, .c-fx, .c-mob, .c-live, .c-nextcase, .stub__show, .c-task, .ds { padding-block: var(--sec) !important; }

/* Экран фильтров в телефоне: каталог под затемнением, шторка поверх */
.fs__page { inset: 0; block-size: auto; overflow: hidden; }
.fs__page img { display: block; inline-size: 100%; block-size: auto; }


/* ===== Раунд 10 ===== */
.c-ghost:hover, .c-ghost:focus-visible { box-shadow: inset 0 0 0 1.5px var(--color-accent); color: var(--color-fg); background: none; }
/* Узкий переключатель проектов: просто «назад» и «дальше» */
.pager { position: relative; background: #1e2126; }
.pager__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding-block: var(--space-24); }
.pager__a { display: inline-flex; align-items: center; gap: var(--space-16); min-block-size: 56px; color: var(--color-fg); text-decoration: none; }
.pager__a--next { flex-direction: row-reverse; text-align: end; }
.pager__arrow { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, 0.35); font-size: 1rem; transition: background-color 350ms var(--ease-smooth), box-shadow 350ms var(--ease-smooth), transform 450ms var(--ease-smooth); }
.pager__dir { display: block; font-size: 0.875rem; color: var(--color-fg-muted); }
.pager__name { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; transition: color 350ms var(--ease-smooth); }
.pager__a:hover .pager__arrow, .pager__a:focus-visible .pager__arrow { background: var(--color-accent); box-shadow: none; color: #fff; }
.pager__a--prev:hover .pager__arrow { transform: translateX(-4px); }
.pager__a--next:hover .pager__arrow { transform: translateX(4px); }
@media (max-width: 560px) { .pager__in { gap: var(--space-16); } .pager__a { gap: var(--space-12); } .pager__name { font-size: 1rem; } }