/* Bengmontero — базовые стили и компоненты. Цвета и размеры — только из tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.12; margin: 0 0 .5em; letter-spacing: var(--display-track); }
h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-3); }
h4, .h-sm { font-size: var(--fs-4); font-family: var(--font-text); font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.25rem; line-height: 1.45; color: var(--fg-muted); max-width: 40ch; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; border-radius: var(--r-pill); z-index: 100; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--container), 90%); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--soft { background: var(--bg-soft); }

/* ярлык — паспортная плашка */
.label {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-7); }
.section-head h2 { margin: .25em 0 0; }
.section-head .more { white-space: nowrap; }
.more svg, .avito-bar a svg, .crumbs svg { width: 1.05em; height: 1.05em; vertical-align: -.18em; display: inline-block; }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font: 500 1rem/1 var(--font-text); text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
/* кнопка брони: справа сверху опускается лапка. Место под неё зарезервировано всегда,
   поэтому габариты кнопки не меняются и соседи в шапке не дрожат при наведении */
.btn--paw .btn__swap { position: relative; width: 18px; height: 18px; flex: none; overflow: hidden; }
/* лапка берёт цвет текста кнопки — иначе на зелёной остаётся зелёной от .paw в меню */
.btn--paw .btn__swap .paw { position: absolute; inset: 0; width: 18px; height: 18px;
  color: currentColor; opacity: 0; transform: translateY(-16px) rotate(-12deg);
  transition: opacity .18s var(--ease), transform .3s cubic-bezier(.2, .9, .3, 1.35); }
.btn--paw:hover .btn__swap .paw, .btn--paw:focus-visible .btn__swap .paw { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn--paw .btn__swap .paw { transition: none; } }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--fg); border-color: var(--fg); }
.btn--sm { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* шапка */
/* контактная полоса над шапкой */
.topbar { background: var(--ink); color: var(--on-ink); font-size: var(--fs-label); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 38px; }
.topbar__where { opacity: .8; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; opacity: .85; transition: opacity .18s var(--ease); }
.topbar a:hover, .topbar a:focus-visible { opacity: 1; color: inherit; }
.topbar__right { display: inline-flex; align-items: center; gap: var(--space-4); }
.topbar svg { width: 15px; height: 15px; flex: none; }
/* на телефоне регион остаётся слева, а часы работы убираем: вдвоём они
   не помещаются рядом с телефоном и иконками */
@media (max-width: 700px) {
  .topbar { font-size: 12px; }
  .topbar__hours { display: none; }
  .topbar__in { gap: .6rem; }
  .topbar__right { gap: .7rem; }
  .topbar svg { width: 14px; height: 14px; }
}
@media (max-width: 360px) { .topbar__where { display: none; } }

.header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header__in { display: flex; align-items: center; gap: var(--space-5); min-height: 72px; }
.brand .logo { width: 1.85em; height: 1.85em; flex: none; color: var(--accent); --logo-bg: var(--bg); align-self: center; }
/* зрачок расширяется при наведении на логотип */
.brand .logo .pupil, .brand .logo .glint { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease); }
.brand:hover .logo .pupil, .brand:focus-visible .logo .pupil { transform: scaleX(2.6); }
.brand:hover .logo .glint, .brand:focus-visible .logo .glint { transform: scale(1.35) translate(2px, -1px); }
@media (prefers-reduced-motion: reduce) { .brand .logo .pupil, .brand .logo .glint { transition: none; } }
.brand--foot .logo { --logo-bg: var(--bg-soft); }
.brand { white-space: nowrap; flex: none; font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--display-weight); letter-spacing: var(--display-track); color: var(--fg); text-decoration: none; display: inline-flex; align-items: baseline; gap: .55rem; }
.brand > span { display: inline-block; }
.brand small { font-family: var(--font-text); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
.nav { display: flex; gap: var(--space-5); margin-left: auto; align-items: center; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--fg); text-decoration: none; font-size: var(--fs-small); font-weight: 500; padding: 0; }

/* цепочка следов: три лапки проступают под пунктом одна за другой */
.paw { width: 10px; height: 10px; flex: none; color: var(--accent); }
.nav a .paw { position: absolute; bottom: -.1rem; opacity: 0; transform: translateY(4px) scale(.6); transition: opacity .2s var(--ease), transform .24s var(--ease); }
.nav a .paw:nth-of-type(1) { left: 14%; transform: translateY(4px) scale(.6) rotate(-16deg); transition-delay: 0ms; }
.nav a .paw:nth-of-type(2) { left: 46%; bottom: .12rem; transition-delay: 70ms; }
.nav a .paw:nth-of-type(3) { left: 76%; transform: translateY(4px) scale(.6) rotate(14deg); transition-delay: 140ms; }
.nav a:hover .paw, .nav a[aria-current="page"] .paw { opacity: 1; }
.nav a[aria-current="page"] .paw { opacity: .6; }
.nav a:hover .paw { opacity: 1; }
.nav a:hover .paw:nth-of-type(1), .nav a[aria-current="page"] .paw:nth-of-type(1) { transform: translateY(0) scale(1) rotate(-16deg); }
.nav a:hover .paw:nth-of-type(2), .nav a[aria-current="page"] .paw:nth-of-type(2) { transform: translateY(0) scale(1) rotate(2deg); }
.nav a:hover .paw:nth-of-type(3), .nav a[aria-current="page"] .paw:nth-of-type(3) { transform: translateY(0) scale(1) rotate(14deg); }
.header .btn { margin-left: var(--space-2); }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--fg); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .nav { display: none; }
  .header .btn { display: none; }
  .burger { display: inline-flex; }
  /* меню занимает весь экран под шапкой: раньше снизу торчал кусок
     слайдера и было непонятно, куда смотреть. --hdr-bottom ставит скрипт,
     dvh вместо vh — иначе адресная строка Safari съедает низ */
  /* position: absolute, а не fixed: у шапки есть backdrop-filter, он делает
     её containing block — fixed отсчитывался бы от шапки, и меню схлопывалось */
  .header.is-open .nav { display: flex; position: absolute; left: 0; right: 0;
    top: 100%; height: calc(100dvh - var(--hdr-bottom, 110px)); z-index: 60;
    flex-direction: column; align-items: stretch; text-align: left; gap: 0;
    background: var(--bg); padding: var(--space-2) var(--gutter) var(--space-5);
    overflow-y: auto; overscroll-behavior: contain; }
  /* кнопка брони со связью прижаты к низу экрана — до них дотягивается
     большой палец, а список остаётся сверху */
  .header.is-open .nav a.btn { margin-top: auto; }
  body.is-locked { overflow: hidden; }
  .header.is-open .nav a { padding: .9rem 0 .9rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .header.is-open .nav a .paw:nth-of-type(2), .header.is-open .nav a .paw:nth-of-type(3) { display: none; }
  .header.is-open .nav a .paw:nth-of-type(1) { left: 0; top: 50%; bottom: auto; margin-top: -5px; transform: translateX(-5px) scale(1) rotate(-90deg); transition-delay: 0ms; }
  .header.is-open .nav a:hover .paw:nth-of-type(1), .header.is-open .nav a[aria-current="page"] .paw:nth-of-type(1) { transform: translateX(0) scale(1) rotate(-90deg); }
  /* .nav a задаёт цвет текста и перебивает .btn по специфичности —
     из-за этого надпись на зелёной кнопке выходила тёмной */
  .header.is-open .nav a.btn { display: inline-flex; margin: auto 0 0; color: var(--on-accent, #fff); }

  /* мобильное меню: пункт = название, подпись и метка справа.
     Подписи снимают вопрос «что там внутри», у котят вместо стрелки
     счётчик свободных — самая частая цель захода */
  /* только пункты меню: ссылки внутри блока связи и кнопка брони
     сюда попадать не должны, иначе их разносит по колонкам сетки */
  .header.is-open .nav > a:not(.btn) {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: var(--space-3); padding: .62rem 0;
  }
  .header.is-open .nav .nav__t { grid-column: 1; }
  .header.is-open .nav .nav__note {
    display: block; grid-column: 1; grid-row: 2; font-size: var(--fs-label);
    color: var(--fg-muted); font-weight: 400; line-height: 1.3;
  }
  .header.is-open .nav .nav__chev { display: grid; grid-column: 2; grid-row: 1 / span 2; align-items: center; }
  .header.is-open .nav .nav__chev svg { width: 18px; height: 18px; color: var(--fg-faint); transform: rotate(-90deg); }
  .header.is-open .nav .nav__n {
    display: grid; grid-column: 2; grid-row: 1 / span 2; align-self: center;
    place-items: center; min-width: 26px; height: 26px; padding: 0 .45rem;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: var(--fs-label); font-weight: 600;
  }
  /* лапка-маркер тут только мешает: у пункта уже есть метка справа */
  .header.is-open .nav a .paw { display: none; }
  /* связь под кнопкой брони: на телефоне позвонить и написать нужно
     чаще, чем зайти в раздел «Доставка» */
  .header.is-open .nav .nav__ways { display: flex; gap: .5rem; margin-top: .55rem; }
  .header.is-open .nav .nav__ways a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .3rem;
    min-height: 62px; padding: .55rem .25rem; border: 1px solid var(--line);
    border-radius: 14px; background: var(--bg-card);
    font-size: var(--fs-label); font-weight: 500; line-height: 1.1; text-align: center;
  }
  /* иконки приводим к общей оптической высоте: у «ВК» глиф ниже остальных
     и без выравнивания ряд выглядит скачущим */
  .header.is-open .nav .nav__ways svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
}
.nav .btn { display: none; }
/* на десктопе подписи, метки и блок связи не нужны — шапка распухнет */
.nav .nav__note, .nav .nav__chev, .nav .nav__n, .nav__ways { display: none; }

/* переключатель языка — чип с глобусом и списком */
.chiplang { position: relative; display: inline-block; margin-left: var(--space-2); flex: none; }
.chiplang__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--fg); font: 600 var(--fs-label)/1 var(--font-text); letter-spacing: .04em; cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); }
.chiplang__btn:hover { border-color: var(--accent); color: var(--accent-hover); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chiplang__btn[aria-expanded="true"] { border-color: var(--accent); }
.chiplang__btn svg { width: 16px; height: 16px; flex: none; }
.chiplang__btn svg:last-child { width: 13px; height: 13px; color: var(--fg-muted); transition: transform .2s var(--ease); }
.chiplang__btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.chiplang__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 172px; margin: 0; padding: .3rem; list-style: none; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); z-index: 60; }
.chiplang__list a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: .5rem; padding: .55rem .6rem; border-radius: 10px; text-decoration: none; color: var(--fg); font-size: var(--fs-small); }
.chiplang__list a:hover { background: var(--bg-soft); color: var(--fg); }
.chiplang__list .code { font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em; color: var(--fg-muted); }
.chiplang__list a[aria-current="true"] { color: var(--accent); font-weight: 600; }
.chiplang__list a[aria-current="true"] .code { color: var(--accent); }
.chiplang__list svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .header__in { gap: var(--space-3); } .chiplang { margin-left: auto; order: 2; } .burger { order: 3; margin-left: 0; } }
@media (max-width: 520px) { .brand small { display: none; } .chiplang__btn > span { display: none; } .chiplang__btn { padding-inline: .6rem; } }

/* хлебные крошки */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--fg-muted); list-style: none; margin: 0; }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs li + li::before { content: "·"; margin-right: .5rem; color: var(--fg-faint); }


/* первый экран главной — «герой и лента»: крупный слайд и превью следующих справа */
.hero-slider { width: min(var(--container), 90%); margin-inline: auto; padding-top: var(--space-4); }
.slider__grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-3); align-items: stretch; }
.slider--strip .slider__track { gap: 0; border-radius: var(--r-card); }
/* слайд всегда 16:9 — кадр ложится ровно так, как отдан, без сюрпризов */
.slider--strip .slide { aspect-ratio: 16 / 9; border-radius: 0; }
/* активный кадр очень медленно наезжает — слайдер выглядит живым, но не мельтешит */
.slider--strip .slide__media img { will-change: transform; }
.slider--strip .slide.is-current .slide__media img { animation: kenburns 11s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) {
  .slider--strip .slide.is-current .slide__media img { animation: none; }
}
.slider--strip .slide__cap { padding: clamp(1.25rem, 3vw, 2.5rem); padding-bottom: clamp(1.25rem, 3vw, 2.5rem); align-items: end; }
/* кадр, где кот занимает середину и низ: подпись уходит наверх, кнопка остаётся внизу.
   Затемнение с двух сторон — иначе верхний текст ляжет на светлое. */
.slide--top .slide__cap { top: 0; bottom: 0; display: grid;
  grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: start;
  background: linear-gradient(to bottom, rgba(23, 20, 15, .74) 0%, rgba(23, 20, 15, .18) 34%,
              rgba(23, 20, 15, 0) 52%, rgba(23, 20, 15, .55) 100%); }
/* светлый кадр (солнце, трава): затемнение плотнее, иначе ярлык теряется */
.slide--bright .slide__cap { background: linear-gradient(to top, rgba(18, 24, 18, .92) 0%,
  rgba(18, 24, 18, .84) 30%, rgba(18, 24, 18, .62) 55%, rgba(18, 24, 18, .22) 80%,
  rgba(18, 24, 18, 0) 100%); }
.slide--top .slide__cap > div { grid-column: 1 / -1; grid-row: 1; }
.slide--top .slide__cap .btn { grid-column: 2; grid-row: 3; align-self: end; }
.slider--strip .slide__title { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.06; max-width: 16ch; }
.slider--strip .slide__cap .label { font-size: var(--fs-small); }
.slide__sub { margin: .5rem 0 0; max-width: 46ch; color: rgba(243, 244, 241, .88);
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); line-height: 1.4; }
.slider--strip .slide__cap > div { max-width: 60ch; }
.slider--strip .slide__cap .btn { background: var(--smoke); color: var(--coal); border-color: transparent; }
.slider--strip .slide__cap .btn:hover { background: #fff; color: var(--coal); }
.slider--strip .btn--on-photo { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.slider--strip .btn--on-photo:hover { background: rgba(255, 255, 255, .24); color: #fff; border-color: #fff; }

.strip { display: grid; grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-3); }
.strip button { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.strip button:hover { transform: translateY(-2px); }
.strip button[aria-current="true"] { border-color: var(--accent); }
.strip .photo, .strip picture { display: block; height: 100%; }
/* превью режется в 3:2 с головой на 38 % высоты — при обрезке морда остаётся в кадре */
.strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
             object-position: 50% 38%; }
.strip__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--bark) 0 10px, var(--graphite) 10px 11px); }
.strip button > span:last-child { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .6rem; font: 500 var(--fs-label)/1.3 var(--font-text); color: #fff; text-align: left; background: linear-gradient(to top, rgba(20, 24, 26, .88), rgba(20, 24, 26, 0)); }
.slider--strip .slider__ui--flat { position: static; padding: var(--space-4) 0 0; color: var(--fg); }
.slider--strip .slider__ui--flat .slider__counter { background: transparent; color: var(--fg-muted); padding: 0; }
.slider--strip .slider__ui--flat .slider__bar-wrap { background: var(--line); }
.slider--strip .slider__ui--flat .slider__bar { background: var(--accent); }
.slider--strip .slider__ui--flat .slider__arrows button { background: var(--bg-card); color: var(--fg); border-color: var(--line-strong); backdrop-filter: none; }
.slider--strip .slider__ui--flat .slider__arrows button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
  .slider__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  /* лента ложится в одну строку при любом числе слайдов;
     форма превью 3:2 — та же, что у самих файлов, поэтому кадр не режется */
  .strip { grid-template-rows: none; grid-template-columns: none;
           grid-auto-flow: column; grid-auto-columns: 1fr; height: auto; }
  .strip button { aspect-ratio: 3 / 2; }
  .strip button > span:last-child { display: none; }
}
@media (max-width: 700px) {
  /* на телефоне кадр вертикальный — под него отдельный файл 4:5 */
  .slider--strip .slide { aspect-ratio: 4 / 5; }
  /* ярлык прячем: он дублирует контактную полосу и съедает место под кадром */
  .slider--strip .slide__cap .label { display: none; }
  .slide__sub { font-size: .95rem; max-width: 34ch; }
  .slider--strip .slider__track { border-radius: 0; }
  .slider--strip .slide__cap { display: grid; justify-items: start; gap: var(--space-4); }
  /* на телефоне лента прокручивается: превью крупнее, в палец попасть реально */
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity;
           -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip button { flex: 0 0 clamp(96px, 28vw, 132px); scroll-snap-align: start; }
}

/* первый экран главной — «кино»: слайдер во всю ширину экрана, под ним две породы */
.slider--kino .slider__track { gap: 0; border-radius: 0; }
.slider--kino .slide { border-radius: 0; aspect-ratio: 21 / 9; min-height: 420px; }
.slider--kino .slide__cap { padding: clamp(1.5rem, 5vw, 4rem); padding-bottom: clamp(4.5rem, 8vw, 6.5rem); align-items: end; }
.slider--kino .slide__title { font-size: clamp(1.8rem, 1.2rem + 3vw, 3.75rem); line-height: 1.05; max-width: 16ch; }
.slider--kino .slide__cap .label { font-size: var(--fs-small); }
.slider--kino .slide__cap .btn { background: var(--smoke); color: var(--coal); border-color: transparent; }
.slider--kino .slide__cap .btn:hover { background: #fff; color: var(--coal); }
.slider--kino .btn--on-photo { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.slider--kino .btn--on-photo:hover { background: rgba(255, 255, 255, .24); color: #fff; border-color: #fff; }
.slider__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) clamp(1rem, 5vw, 4rem); color: #fff; }
.slider__counter { font: 600 .875rem/1 var(--font-display); letter-spacing: .05em; flex: none; font-variant-numeric: tabular-nums; background: var(--coal); color: #fff; padding: .4rem .55rem; border-radius: 8px; }
.slider__ui .slider__bar-wrap { flex: 1; }
.slider--kino .slider__arrows button { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.slider--kino .slider__arrows button:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }
.slider--kino .slider__arrows button:focus-visible { outline-color: #fff; }
@media (max-width: 700px) {
  .slider--kino .slide { aspect-ratio: 4 / 5; min-height: 0; }
  .slider--kino .slide__cap { padding-bottom: 5rem; display: grid; justify-items: start; gap: var(--space-4); }
  .slider--kino .slide__cap .btn { min-height: 44px; }
  .slider__ui { gap: var(--space-4); }
  .slider__counter { font-size: .8125rem; }
}
.breeds2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-block: var(--space-6); }

/* плитка породы: кадр фоном, три цифры вместо описания.
   Под курсором кадр наезжает, а затемнение слабеет — фотография «раскрывается». */
.ptile { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden;
         display: flex; align-items: flex-end; text-decoration: none; color: var(--smoke);
         isolation: isolate; }
.ptile__ph { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ptile__ph .photo, .ptile__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptile__ph img { transition: transform .6s var(--ease); will-change: transform; }
/* подклад нейтрально-графитовый: зелёный складывался с зеленью на фото */
/* затемнение с двух сторон: сверху под название породы, снизу под цифры и ссылку */
.ptile__veil { position: absolute; inset: 0; z-index: -1;
               background: linear-gradient(to bottom, rgba(16, 18, 20, .78) 0%, rgba(16, 18, 20, .34) 22%,
                           rgba(16, 18, 20, 0) 42%, rgba(16, 18, 20, .38) 62%,
                           rgba(16, 18, 20, .88) 100%); }
/* плитка целиком — ссылка, а у ссылок на сайте hover красит текст в мятный.
   Внутри кадра это ломает читаемость, поэтому цвет держим светлым */
.ptile:hover, .ptile:focus-visible, .ptile:hover .go, .ptile:focus-visible .go { color: var(--smoke); }
/* при наведении только приближаем кадр: если ослабить затемнение, светлый текст
   ложится на траву и теряется */
.ptile:hover .ptile__ph img, .ptile:focus-visible .ptile__ph img { transform: scale(1.045); }
/* название породы — вверху кадра, цифры и ссылка остаются внизу */
.ptile__cap { position: absolute; inset: 0; padding: var(--space-5); display: grid;
              grid-template-rows: auto 1fr auto auto; gap: .7rem; }
.ptile__cap h2 { grid-row: 1; align-self: start; margin: 0; color: var(--smoke);
                 font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.ptile__facts { grid-row: 3; }
.ptile .go { grid-row: 4; }
.ptile__facts { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ptile__facts span { display: grid; }
.ptile__facts b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem; }
.ptile__facts i { font-style: normal; font-size: var(--fs-label); color: rgba(243, 244, 241, .8); }
/* в покое цифры приглушены, под курсором выходят на полную яркость,
   а у ссылки слева направо отрисовывается подчёркивание */
.ptile__facts b, .ptile__facts i { opacity: .62; transition: opacity .3s var(--ease); }
.ptile:hover .ptile__facts b, .ptile:focus-visible .ptile__facts b,
.ptile:hover .ptile__facts i, .ptile:focus-visible .ptile__facts i { opacity: 1; }
.ptile .go__t { position: relative; }
.ptile .go__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease); }
.ptile:hover .go__t::after, .ptile:focus-visible .go__t::after { transform: scaleX(1); }
.ptile .go { display: inline-flex; align-items: center; gap: .45rem; justify-self: start;
             font-weight: 600; font-size: var(--fs-small); color: var(--smoke); }
.ptile .go svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.ptile:hover .go svg, .ptile:focus-visible .go svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ptile * { transition: none !important; } }
@media (max-width: 700px) { .ptile { aspect-ratio: 4 / 3; } }
.breeds2 .tile--breed { grid-column: auto; grid-row: auto; min-height: 340px; aspect-ratio: 16 / 9; }
.breeds2 .tile--breed h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: .2em 0 .25em; }
.breeds2 .tile--breed p { max-width: 34ch; }
.breeds2 .tile--breed .label { margin-bottom: .25rem; }
.tile--bengal .label { color: rgba(243, 244, 241, .75); }
@media (max-width: 700px) { .breeds2 { grid-template-columns: 1fr; } .breeds2 .tile--breed { min-height: 240px; aspect-ratio: auto; } }

/* блок «Кто мы»: портрет и колонка */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.about__ph { margin: 0; position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4 / 5; max-height: calc(100svh - 96px); }
.about__media { display: block; width: 100%; height: 100%; }
.about__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(20, 24, 26, .85), rgba(20, 24, 26, 0)); color: var(--smoke);
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.02em;
  font-size: 1.25rem; display: grid; gap: .15rem; }
.about__ph figcaption span { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small);
  letter-spacing: 0; color: rgba(243, 244, 241, .78); }
.about__txt h2 { margin: .1em 0 .5em; }
/* цифры питомника: тот же приём, что у гарантий ниже — мятная линия
   над каждой колонкой. Раньше цифры дублировались в отдельной полосе
   под блоком, теперь они живут только здесь */
.about__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); margin: var(--space-6) 0 0; }
.about__facts > div { position: relative; padding-top: var(--space-4); }
.about__facts dt { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.85rem;
  line-height: 1; letter-spacing: -.03em; color: var(--fg); }
.about__facts dd { margin: .4rem 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__facts { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

.bento--facts { grid-auto-rows: minmax(110px, auto); }

/* первый экран главной — бенто */
.bento { display: grid; gap: var(--space-4); grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); padding-block: var(--space-5) var(--space-6); }
.tile { border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; position: relative; text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); }
.tile--slider { grid-column: span 8; grid-row: span 3; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; display: block; }
.tile--slider .slider, .tile--slider .slider__track { height: 100%; }
.tile--slider .slide { aspect-ratio: auto; height: 100%; min-height: 440px; }
.tile--slider .slider__nav { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); margin: 0; pointer-events: none; }
.tile--slider .slider__nav > * { pointer-events: auto; }
.tile--slider .slider__dots button::before { background: rgba(243, 244, 241, .5); }
.tile--slider .slider__dots button[aria-current="true"]::before { background: #fff; }
.tile--slider .slider__arrows button { background: rgba(255, 255, 255, .9); border-color: transparent; color: var(--graphite); }
.tile--slider .slide__cap { padding-bottom: 4.75rem; }
.tile--h1 { grid-column: span 4; grid-row: span 1; background: var(--accent); color: var(--on-accent); border: 0; }
.tile--h1 h1 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); margin: 0; color: inherit; }
.tile--h1 .label { color: rgba(255, 255, 255, .92); }
[data-mood="dark"] .tile--h1 .label { color: rgba(20, 24, 26, .7); }
.tile--breed { grid-column: span 2; grid-row: span 2; isolation: isolate; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.tile--breed:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile--breed .ph { position: absolute; inset: 0; z-index: -1; border-radius: 0; transition: transform 1.2s var(--ease); }
.tile--breed:hover .ph { transform: scale(1.04); }
.tile--breed .ph::after { bottom: auto; top: 14px; }
.tile--breed h2 { font-size: 1.2rem; margin: 0; }
.tile--breed p { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.tile--breed .go { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); font-weight: 500; margin-top: .5rem; color: var(--accent); }
.tile--breed .go svg { width: 18px; height: 18px; transition: transform 250ms var(--ease); }
.tile--breed:hover .go svg { transform: translateX(5px); }
.tile--bengal { color: var(--smoke); }
.tile--bengal .ph { background: linear-gradient(160deg, #232A27, #40342A); }
.tile--bengal p { color: rgba(243, 244, 241, .75); }
.tile--bengal .go { color: var(--mint-light); }
.tile--fact { grid-column: span 3; grid-row: span 1; }
.tile--fact b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2.1rem; line-height: 1; letter-spacing: var(--display-track); }
.tile--fact span { color: var(--fg-muted); font-size: var(--fs-small); }
.tile--cta { grid-column: span 6; grid-row: span 2; background: var(--ink); color: var(--on-ink); border: 0; justify-content: space-between; gap: var(--space-4); }
.tile--cta h2 { font-size: 1.6rem; margin: 0; max-width: 16ch; }
.tile--cta p { margin: 0; opacity: .7; font-size: var(--fs-small); }
.tile--cta .label { color: inherit; opacity: .6; }
.tile--cta .btn { background: var(--on-ink); color: var(--ink); }
.tile--cta .btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, .35); }
[data-mood="dark"] .tile--cta .btn--ghost { border-color: rgba(20, 24, 26, .35); }
@media (max-width: 1000px) { .tile--slider { grid-column: span 12; } .tile--h1 { grid-column: span 12; } .tile--breed { grid-column: span 6; } .tile--fact { grid-column: span 6; } .tile--cta { grid-column: span 12; } }
@media (max-width: 600px) { .tile--breed { grid-column: span 12; grid-row: span 1; min-height: 160px; } .tile--fact { grid-column: span 6; } .tile--slider .slide { min-height: 380px; } }

/* слайдер — большие фото питомника */
.slider { position: relative; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--space-4); border-radius: var(--r-card); }
.slider__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; border-radius: var(--r-card); overflow: hidden; isolation: isolate; aspect-ratio: 16 / 7; min-height: 320px; }
.slide .ph { position: absolute; inset: 0; border-radius: 0; }
.slide .ph::after { bottom: auto; top: 16px; left: 20px; }
.slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); background: linear-gradient(to top, rgba(23, 20, 15, .72), rgba(23, 20, 15, 0)); color: var(--smoke); }
.slide__cap .label { color: rgba(241, 236, 228, .8); }
.slide__cap h3, .slide__title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.12; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); margin: .2em 0 0; color: var(--smoke); }
.slide__title a { color: inherit; text-decoration: none; }
.slide__cap .btn { background: var(--smoke); color: var(--coal); }
.slide__cap .btn:hover { background: #fff; color: var(--coal); }
.slider__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.slider__dots { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.slider__dots button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.slider__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: width 250ms var(--ease), background-color 250ms; }
.slider__dots button[aria-current="true"]::before { width: 28px; border-radius: 4px; background: var(--fg); }
.slider__arrows { display: flex; gap: .5rem; }
.slider__arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--fg); cursor: pointer; display: grid; place-items: center; transition: background-color 150ms, border-color 150ms; }
.slider__arrows button:hover { border-color: var(--fg); }
.slider__arrows svg { width: 20px; height: 20px; }
[data-pause] .i-play { display: none; } [data-pause].is-paused .i-play { display: block; } [data-pause].is-paused .i-pause { display: none; }
.slider__bar-wrap { height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.slider__bar { height: 100%; width: 0; background: #fff; }
@media (max-width: 700px) { .slide { aspect-ratio: 4 / 5; min-height: 0; } }

/* реальные фотографии */
.photo { display: block; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide .photo { position: absolute; inset: 0; }
.card__media.photo { aspect-ratio: 4 / 3; }
.card__media.photo img { aspect-ratio: 4 / 3; }
.tile__media { position: absolute; inset: 0; z-index: -1; }
/* плитка с фотографией: затемнение снизу, чтобы текст читался на любом снимке */
.tile--photo { color: var(--smoke); }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 24, 22, .92) 0%, rgba(18, 24, 22, .78) 38%, rgba(18, 24, 22, .32) 68%, rgba(18, 24, 22, .06) 100%); }
.tile--photo p { color: rgba(243, 244, 241, .88); }
.tile--photo .label { color: rgba(243, 244, 241, .88); }
.tile--photo .go { color: var(--smoke); }
.tile__media img { transition: transform 1.2s var(--ease); }
.tile--breed:hover .tile__media img { transform: scale(1.04); }
.gallery .photo { border-radius: var(--r-sm); overflow: hidden; }

/* плейсхолдер фото — заменяется на настоящие снимки */
.ph {
  position: relative; background: linear-gradient(135deg, var(--ph), var(--ph-2)); border-radius: inherit; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.ph::after { content: attr(data-note); position: absolute; left: 12px; bottom: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); opacity: .8; }
.ph--fill { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.ph--fill::after { left: var(--gutter); bottom: auto; top: 24px; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--1x1 { aspect-ratio: 1; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--tall { aspect-ratio: 3 / 4; }

/* карточки */
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }
.card__media { border-radius: 0; }
/* фильтр прячет карточку атрибутом hidden, а у .card задан display:flex —
   без !important он перебивает [hidden] и карточка остаётся на месте */
.card[hidden] { display: none !important; }
/* фото карточки ведёт на страницу котёнка — по нему щёлкают чаще, чем
   по ссылке «Подробнее». Из обхода табом исключено: имя рядом ведёт туда же,
   две одинаковые остановки подряд только мешают с клавиатуры */
.card__ph { display: block; overflow: hidden; }
.card__ph img { transition: transform var(--t-slow, .5s) ease; }
.card:hover .card__ph img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card__ph img { transition: none; }
  .card:hover .card__ph img { transform: none; }
}
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.15; margin: 0; }
.card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--fg-muted); font-size: var(--fs-small); margin: 0; }
.card__meta dt { display: none; }
.card__meta dd { margin: 0; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.card__top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }

/* статус */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); white-space: nowrap; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--st-sold); flex: none; }
.status--free::before { background: var(--st-free); }
.status--reserved::before { background: var(--st-reserved); }
.status--sold { color: var(--fg-faint); }
.card.is-sold .ph { filter: saturate(.7); opacity: .85; }

/* фильтры */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filters legend { float: left; margin-right: .75rem; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: var(--fs-small); font-weight: 500; color: var(--fg); background: transparent; transition: background-color 150ms, color 150ms, border-color 150ms; }
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.empty { padding: var(--space-7); border: 1px dashed var(--line-strong);
         border-radius: var(--r-card); text-align: center; color: var(--fg-muted); }
/* ссылка в пустом блоке лежит на серой подложке секции: мятный на ней
   даёт 4.19 при норме 4.5, поэтому берём тёмный оттенок */
[data-mood="light"] .section--soft .empty a { color: #1F5E40; }

/* полосы доверия */
.facts { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fact { padding: var(--space-5) 0; border-top: 1px solid var(--line-strong); }
.fact b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 2.25rem; line-height: 1; margin-bottom: .35rem; }
.fact span { color: var(--fg-muted); font-size: var(--fs-small); }

/* паспорт животного */
.passport { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; font-size: var(--fs-small); }
.passport dt { color: var(--fg-muted); }
.passport dd { margin: 0; font-weight: 500; }
.passport a { color: var(--fg); }
@media (max-width: 480px) { .passport { grid-template-columns: 1fr; gap: .15rem; } .passport dd { margin-bottom: .6rem; } }

/* карточка животного (страница) */
.animal { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.animal__aside { position: sticky; top: 96px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--space-6); box-shadow: var(--shadow); display: grid; gap: var(--space-5); }
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); }
.gallery .ph { border-radius: var(--r-sm); }
/* если дополнительных кадров всего два, они делят ряд пополам,
   иначе третья ячейка остаётся пустой дырой справа */
.gallery:has(> :nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
/* первый кадр во всю ширину: это главное фото животного, остальные —
   дополнения. Настоящие снимки ведут себя так же, как плейсхолдеры */
.gallery .ph:first-child,
.gallery .photo:first-child { grid-column: 1 / -1; border-radius: var(--r-card); }

/* кадр-кнопка: по клику открывается крупно. Кнопка, а не ссылка —
   никуда не ведёт, только раскрывает то же фото */
.gal__b {
  position: relative; display: block; padding: 0; border: 0; background: none;
  border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in;
}
.gal__b:first-child { grid-column: 1 / -1; border-radius: var(--r-card); }
.gal__b .photo { border-radius: inherit; }
.gal__b img { transition: transform var(--t-slow, .5s) ease; }
.gal__b:hover img { transform: scale(1.03); }
.gal__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* лупа появляется при наведении: подсказывает, что кадр кликабелен */
.gal__zoom {
  position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(20, 24, 22, .58); color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.gal__zoom svg { width: 18px; height: 18px; }
.gal__b:hover .gal__zoom, .gal__b:focus-visible .gal__zoom { opacity: 1; transform: none; }
@media (hover: none) { .gal__zoom { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gal__b img, .gal__zoom { transition: none; }
  .gal__b:hover img { transform: none; }
}
.gallery .photo { display: block; }
.gallery .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery .photo.ph--3x2 { aspect-ratio: 3 / 2; }
.gallery .photo.ph--4x3 { aspect-ratio: 4 / 3; }
.price-note { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
@media (max-width: 900px) { .animal { grid-template-columns: 1fr; } .animal__aside { position: static; } }

/* две колонки текста */
.split { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: 1fr; } }
.prose { max-width: 62ch; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.quote { font-family: var(--font-text); font-size: 1.35rem; line-height: 1.4; font-weight: 500; font-style: normal; margin: 0; padding-left: var(--space-5); border-left: 3px solid var(--accent); }
.quote cite { display: block; font: 500 var(--fs-label)/1.4 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; font-style: normal; color: var(--fg-muted); margin-top: var(--space-3); }

/* шаги — это реальная последовательность, поэтому нумеруем */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.steps li::before { content: counter(step); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; background: var(--bg-soft); color: var(--fg); }
.steps h3 { font-size: var(--fs-4); font-family: var(--font-text); font-weight: 600; margin-bottom: .3em; }
.steps p { color: var(--fg-muted); }

/* Оживление шагов. Смысл не в украшательстве: под курсором шаг
   отделяется от соседних, и человек видит, на каком месте пути он стоит.
   Полоса слева растёт снизу вверх — как заполняющийся прогресс */
.steps li {
  position: relative; overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.steps li::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform 320ms var(--ease);
}
/* рамку зелёной не делаем: она сливалась бы с полосой слева и эффект
   читался бы как «обвели прямоугольник», а не как отметка шага */
.steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.steps li:hover::after { transform: scaleY(1); }
.steps li::before { transition: background 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease); }
.steps li:hover::before { background: var(--accent); color: #fff; transform: scale(1.06); }
/* гашение соседних шагов пробовал — приглушённый текст проваливает
   контраст по WCAG, поэтому выделяем только сам шаг */

/* карточки-панели справа: тот же язык, но сдержаннее — это справка,
   а не шаг сценария */
.option {
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.option:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong, var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .steps li, .steps li::before, .steps li::after, .option { transition: none; }
  .steps li:hover, .option:hover { transform: none; }
  .steps li:hover::before { transform: none; }
  .steps li:hover::after { transform: scaleY(1); }
}

/* две карточки-варианта (доставка) */
.options { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.option { padding: var(--space-6); border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.option h3 { font-size: var(--fs-3); }
.note { padding: var(--space-5) var(--space-6); border-radius: var(--r-card); border: 1px solid var(--line-strong); background: transparent; }
.note strong { display: block; margin-bottom: .25rem; }

/* выпускники — мелкие карточки под мелкие фото */
/* выпускники: живые фото от хозяев. Плитки крупные — 160 px было мелко,
   на таком кадре не разглядеть ни розеток, ни морды */
.alumni { display: grid; gap: var(--space-5) var(--space-4);
          grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* на странице породы выпускников бывает всего три — тогда сетка из четырёх
   колонок оставляет пустую ячейку справа */
.alumni:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alum { margin: 0; display: block; width: 100%; padding: 0; border: 0; background: none;
        text-align: left; color: inherit; font: inherit; cursor: zoom-in; }
.alum .ph, .alum__ph { border-radius: var(--r-sm); overflow: hidden; display: block; }
.alum__ph { aspect-ratio: 1 / 1; background: var(--bg-soft); }
.alum__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
                transition: transform .5s var(--ease); }
.alum:hover .alum__ph img { transform: scale(1.04); }
.alum__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
                   margin-top: .7rem; }
.alum b { font-weight: 500; }
.alum span { color: var(--fg-muted); font-size: var(--fs-small); }
/* ровно по четыре в ряд: и восемь на главной, и шестнадцать на странице
   делятся без остатка, ряд не остаётся с дыркой */
@media (max-width: 1100px) { .alumni { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Галерея: кадр во весь экран, подпись под ним, стрелки по бокам.
   Тёмный фон здесь уместен — он убирает всё, кроме фотографии. */
.lb { border: 0; padding: 0; background: transparent; max-width: none; width: 100%;
      height: 100%; max-height: none; margin: 0; overflow: hidden; }
.lb::backdrop { background: rgba(16, 18, 17, .92); }
.lb__in { position: relative; width: 100%; height: 100%; display: grid; place-items: center;
          padding: clamp(1rem, 4vw, var(--space-7)); }
.lb__stage { display: grid; place-items: center; max-width: min(880px, 100%); width: 100%; }
.lb__slide { grid-area: 1 / 1; margin: 0; display: none; }
.lb__slide.is-on { display: block; animation: lbin .35s var(--ease); }
@keyframes lbin { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lb__ph { display: block; border-radius: var(--r-card); overflow: hidden; }
.lb__ph img { display: block; width: 100%; height: auto;
              max-height: min(72vh, 720px); object-fit: contain; background: #14100d; }
.lb__slide figcaption { margin-top: var(--space-4); color: var(--smoke); }
.lb__slide figcaption b { font-family: var(--font-display); font-weight: var(--display-weight);
                          font-size: 1.15rem; }
.lb__slide figcaption span { margin-left: .6rem; opacity: .6; font-size: var(--fs-small); }
.lb__slide figcaption i { display: block; margin-top: .3rem; font-style: normal;
                          opacity: .72; font-size: var(--fs-small); max-width: 62ch; }
.lb__x, .lb__nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px;
                   border-radius: 50%; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
                   background: rgba(255,255,255,.08); color: var(--smoke);
                   transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.lb__x:hover, .lb__nav:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.lb__x svg, .lb__nav svg { width: 20px; height: 20px; }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: clamp(.5rem, 2vw, 2rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 2rem); }
.lb__count { position: absolute; left: 50%; transform: translateX(-50%);
             bottom: clamp(1rem, 3vw, 2rem); margin: 0; color: var(--smoke); opacity: .6;
             font-size: var(--fs-label); letter-spacing: .08em; }
@media (max-width: 700px) {
  .lb__nav { top: auto; bottom: clamp(1rem, 3vw, 2rem); transform: none; }
  .lb__nav--prev { left: clamp(1rem, 6vw, 3rem); }
  .lb__nav--next { right: clamp(1rem, 6vw, 3rem); }
  .lb__ph img { max-height: 56vh; }
}
@media (max-width: 760px) { .alumni { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); } }

/* призыв */
.cta { border-radius: var(--r-card); padding: clamp(2rem, 5vw, 4rem); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: var(--space-5); grid-template-columns: 1fr auto; align-items: center; }
.cta h2 { margin: 0 0 .3em; }
.cta p { color: var(--fg-muted); margin: 0; max-width: 50ch; }
@media (max-width: 700px) { .cta { grid-template-columns: 1fr; } }

/* формы */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field .hint { font-size: var(--fs-label); color: var(--fg-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--bg-card); color: var(--fg); font: inherit;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .error { display: none; color: #B4362B; font-size: var(--fs-label); }
[data-mood="dark"] .field .error { color: #F0A093; }
.field.is-invalid .error { display: block; }
.field.is-invalid input { border-color: #B4362B; }
.consent { font-size: var(--fs-label); color: var(--fg-muted); display: flex; gap: .6rem; align-items: start; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .15rem; accent-color: var(--accent); }
.consent span { flex: 1; }
.form__ok { display: none; padding: var(--space-5); border-radius: var(--r-sm); background: var(--bg-soft); }
.form.is-sent .form__ok { display: block; }
.form.is-sent .form__fields { display: none; }

/* модалка «Забронировать» */
.modal { border: 0; padding: 0; background: transparent; max-width: min(520px, 100% - 2rem); width: 100%; margin: auto; }
.modal::backdrop { background: rgba(23, 20, 15, .6); backdrop-filter: blur(4px); }
.modal__in { background: var(--bg-card); color: var(--fg); border-radius: var(--r-card); padding: var(--space-6); position: relative; box-shadow: var(--shadow-lg); }
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--fg); cursor: pointer; display: grid; place-items: center; }
.modal__close svg { width: 18px; height: 18px; }
.modal h2 { font-size: var(--fs-3); margin-right: 3rem; }
.modal .lead { font-size: 1rem; margin-bottom: var(--space-5); }

/* контакты */
.contacts { display: grid; gap: var(--space-5); }
.contact-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-row span { color: var(--fg-muted); font-size: var(--fs-small); }
.contact-row a { color: var(--fg); font-weight: 500; }
.messengers { display: flex; flex-wrap: wrap; gap: .6rem; }
/* контакты: убираем верхнюю линию у первой строки — над ней теперь заголовок */
.contacts h2 + .contact-row { border-top: 0; padding-top: 0; }

/* плитки каналов связи. Вся плитка — ссылка: на телефоне в неё
   попадают пальцем, не целясь в подчёркнутый текст */
.ways { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
.way {
  /* содержимое по верху: подписи разной длины, при центрировании
     иконки и названия в соседних плитках не встают в одну линию */
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: var(--space-4); padding: var(--space-5);
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card);
  color: inherit; text-decoration: none; box-shadow: var(--shadow);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.way:hover, .way:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; border-color: var(--accent); }
.way__i {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--bg-soft); color: var(--accent);
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.way__i svg { width: 22px; height: 22px; }
.way:hover .way__i { background: var(--accent); color: #fff; }
.way__b { display: grid; gap: .15rem; min-width: 0; }
.way__b b { font-size: 1.05rem; font-weight: 600; }
.way__v { font-size: var(--fs-small); color: var(--fg); overflow-wrap: anywhere; }
.way__b i { font-style: normal; font-size: var(--fs-label); color: var(--fg-muted); }
.way > svg:last-child { width: 18px; height: 18px; margin-top: 14px; color: var(--fg-faint); transition: transform 220ms var(--ease), color 220ms var(--ease); }
.way:hover > svg:last-child { transform: translateX(3px); color: var(--accent); }
@media (max-width: 1000px) { .ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ways { grid-template-columns: 1fr; } .way { padding: var(--space-4); } }
@media (prefers-reduced-motion: reduce) {
  .way, .way__i, .way > svg:last-child { transition: none; }
  .way:hover { transform: none; }
  .way:hover > svg:last-child { transform: none; }
}

/* подвал */
.footer { border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-6); color: var(--fg-muted); font-size: var(--fs-small); }
.footer__in { display: grid; gap: var(--space-6); grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer .footer-h { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); margin-bottom: .8rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer a { color: var(--fg); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__bottom { margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6); align-items: baseline; color: var(--fg-faint); }
/* политика по центру, подпись студии справа: она не должна спорить
   с юридической ссылкой, поэтому уходит в край и приглушена сильнее.
   Юридическая ссылка подчёркнута всегда — её обязаны заметить */
.footer__legal { margin-right: auto; }
.footer__legal a { color: var(--fg-muted); text-decoration: underline;
                   text-underline-offset: .22em; }
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--fg); }
.consent a, .quiz__law a { text-decoration: underline; text-underline-offset: .22em; }
/* без opacity: полупрозрачный текст на светлом фоне давал контраст 2.78.
   «Неприметность» даёт размер и нейтральный цвет, а не прозрачность */
.footer__by { font-size: var(--fs-label); }
.footer__by a { color: inherit; text-decoration: none;
                border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.footer__by a:hover, .footer__by a:focus-visible { color: var(--fg-muted);
                                                   border-bottom-color: currentColor; }
@media (max-width: 700px) { .footer__legal { margin-right: 0; } }
@media (max-width: 900px) { .footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__in { grid-template-columns: 1fr; } }

/* герой ветки породы */
.hero { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding-block: var(--space-7) var(--section); }
.hero .ph { border-radius: var(--r-card); }
.hero h1 { margin: .25em 0 .35em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero .ph { order: -1; } }

/* первый экран страницы породы: слева доводы, справа портрет в рамке.
   Пропорции ближе к равным — портрет 4:3 не должен доминировать над текстом */
.hero--breed { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-7); align-items: center; }
.hero--breed .hero__text { min-width: 0; }
/* три довода между лидом и кнопками: сколько котят, что по документам,
   куда возим. Это те вопросы, с которых начинается любой первый разговор */
.hero__meta { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: .55rem; }
.hero__meta li { display: flex; align-items: center; gap: .6rem; color: var(--fg-muted); font-size: var(--fs-small); }
.hero__meta svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.hero__figure { position: relative; margin: 0; }
.hero__figure .photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); overflow: hidden; }
.hero__figure .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* подпись поверх нижнего края: окрас и тип — то, что спрашивают о кадре.
   Градиент кладём на саму подпись, отдельный слой перекрывался картинкой */
.hero__figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem .95rem .8rem;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: linear-gradient(to top, rgba(20, 18, 14, .72), rgba(20, 18, 14, 0));
  color: #fff; font-size: var(--fs-label); line-height: 1.3;
}
@media (max-width: 900px) {
  .hero--breed { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero--breed .hero__figure { order: -1; }
}

/* подстраницы с простой шапкой */
.page-head { padding-block: var(--space-7) var(--space-6); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { max-width: 52ch; }
.page-head h1 { margin: .2em 0 .3em; }

/* появление при скролле */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* мостик со старого канала: короткая плашка «вы с Авито» */
.avito-bar { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--r-card); background: var(--bg-soft); font-size: var(--fs-small); }
.avito-bar b { font-weight: 600; }

/* гарантии на главной: мятная линия, иконка и номер, дальше текст.
   Без рамок — на главной и так много карточек, плиток и фотографий.
   Две колонки, а не четыре: блок стоит рядом с текстом, на четыре ряда
   ширины не хватает и строки рвутся по одному слову */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: var(--space-6) var(--space-5); }
/* три пункта («Что вас ждёт с породой») ставим в один ряд: при двух
   колонках третий уезжал вниз и висел в одиночестве */
@media (min-width: 901px) {
  .trust:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.trust__col { position: relative; padding-top: var(--space-4); }
/* Линия над колонкой: в покое серая, под курсором слева направо заливается
   мятным. Один приём на гарантии и на цифры питомника, чтобы блоки
   читались как один разворот. Линия рисуется псевдоэлементом, а не
   border-top: заливку нельзя анимировать на рамке. */
.line-top { position: relative; padding-top: var(--space-4); }
.line-top::before, .line-top::after { content: ""; position: absolute; top: 0; left: 0;
  height: 2px; width: 100%; border-radius: 2px; }
.line-top::before { background: var(--line-strong); }
.line-top::after { background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.line-top:hover::after, .line-top:focus-within::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .line-top::after { transition: none; } }

.trust__top { display: flex; align-items: center; justify-content: space-between;
              margin-bottom: var(--space-4); }
.trust__i { color: var(--fg-faint); display: grid; place-items: center;
             transition: color .4s var(--ease); }
.trust__col:hover .trust__i { color: var(--accent); }
.trust__i svg { width: 26px; height: 26px; }
.trust__col b { font-family: var(--font-display); font-weight: var(--display-weight);
                font-size: 1.05rem; color: var(--fg-faint); }
.trust__col h3 { margin: 0; font-size: 1.05rem; }
.trust__col p { margin: .35rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* мятный на светло-сером фоне даёт контраст 4.19 при норме 4.5 — на таких секциях
   ссылка-«ещё» берёт более тёмный оттенок зелёного */
[data-mood="light"] .section--soft .more,
[data-mood="light"] .section--soft .faq__more { color: #1F5E40; }

/* полоса действия под блоком о питомнике */
.fcta { padding-top: var(--space-6); }
.fcta__cta { background: var(--ink); color: var(--on-ink); border-radius: var(--r-card);
              padding: var(--space-5) var(--space-6); display: flex; flex-wrap: wrap;
              gap: var(--space-4); align-items: center; justify-content: space-between; }
.fcta__cta h2 { font-size: 1.5rem; margin: .3rem 0 .2rem; }
.fcta__cta p { margin: 0; opacity: .74; font-size: var(--fs-small); }
.fcta__cta .label { color: inherit; opacity: .66; }
.fcta__cta .label svg { width: 15px; height: 15px; vertical-align: -.2em; margin-right: .3rem; }
.fcta__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.fcta__cta .btn { background: var(--on-ink); color: var(--ink); }
.fcta__cta .btn--ghost { background: transparent; color: var(--on-ink);
                          border-color: rgba(255, 255, 255, .35); }
[data-mood="dark"] .fcta__cta .btn--ghost { border-color: rgba(20, 24, 26, .35); }

/* Материалы на главной: слева подводка, справа перечень строками.
   Строки, а не карточки: на главной уже пять кадров карусели, две плитки
   пород, карточки котят и шестнадцать выпускников — ещё шесть коробок
   превратили бы страницу в сплошную сетку. */
.matsplit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
            gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.matsplit__head h2 { margin: .3em 0 .5em; }
.matsplit__head p { margin: 0 0 var(--space-5); color: var(--fg-muted); font-size: var(--fs-small); }
.matsplit__head .btn svg { width: 16px; height: 16px; }
.matsplit__list { border-top: 1px solid var(--line-strong); }
.mat { display: grid; grid-template-columns: 32px 1fr 22px; gap: var(--space-4);
       align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--line);
       text-decoration: none; color: inherit; }
.mat__i { color: var(--fg-faint); transition: color .35s var(--ease); }
.mat__i svg { width: 24px; height: 24px; }
.mat:hover .mat__i, .mat:focus-visible .mat__i { color: var(--accent); }
.mat b { display: block; font-weight: 500; }
.mat i { display: block; margin-top: .2rem; font-style: normal; color: var(--fg-muted);
         font-size: var(--fs-small); }
.mat > svg { width: 20px; height: 20px; color: var(--fg-faint);
             transition: transform .3s var(--ease), color .3s var(--ease); }
.mat:hover > svg, .mat:focus-visible > svg { color: var(--accent); transform: translateX(4px); }
.mat:hover b, .mat:focus-visible b { color: var(--fg); }
@media (max-width: 860px) { .matsplit { grid-template-columns: 1fr; } }

/* тело статьи */
.article { max-width: 74ch; }
.article h2 { margin: var(--space-6) 0 var(--space-3); font-size: 1.35rem; }
.article h2:first-child { margin-top: 0; }
.article p { margin: 0 0 var(--space-4); }
.article ul { margin: 0 0 var(--space-4); padding-left: 1.2rem; }
.article li { margin-bottom: .4rem; }
.article li::marker { color: var(--accent); }
.article .note { padding: var(--space-4) var(--space-5); background: var(--bg-soft);
                 border-radius: var(--r-card); font-size: var(--fs-small); }
.article .note b { display: block; margin-bottom: .3rem; }

/* перенос строки только на широких экранах */
@media (max-width: 700px) { br.br-wide { display: none; } }

/* Квиз на главной. Светлая карточка: на тёмной плашке форма читается как
   рекламный баннер, и заявку оставляют реже — тёмное просят «посмотреть»,
   а светлое выглядит как обычная форма, которую можно заполнить. */
.quiz { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card);
        box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, var(--space-7));
        display: grid; gap: var(--space-6);
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.quiz__head h2 { margin: .4rem 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.quiz__head p { margin: 0 0 var(--space-5); color: var(--fg-muted); font-size: var(--fs-small);
                max-width: 42ch; }
.quiz__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.quiz__bar i { display: block; height: 100%; background: var(--accent);
               transition: width .45s cubic-bezier(.22,.61,.36,1); }
.quiz__step { display: block; margin-top: .6rem; font-size: var(--fs-label);
              letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.quiz__step b { font-weight: 600; color: var(--fg); }

.quiz__form { display: grid; gap: var(--space-5); }
.quiz__s { display: none; border: 0; padding: 0; margin: 0; }
.quiz__s.is-on { display: block; animation: qin .35s var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz__s.is-invalid { animation: qshake .4s; }
@keyframes qshake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.quiz__s legend { padding: 0; margin-bottom: var(--space-4); font-family: var(--font-display);
                  font-weight: var(--display-weight); font-size: 1.2rem; }
/* align-items: stretch + flex внутри: кнопки одной высоты, даже если
   подпись в одной перенеслась на вторую строку */
.quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
              align-items: stretch; }
.qopt { display: flex; }
.qopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.qopt__in { position: relative; display: flex; flex-direction: column; justify-content: center;
            flex: 1; min-height: 4.6rem; padding: var(--space-4) var(--space-5);
            padding-right: calc(var(--space-5) + 22px);
            border: 1px solid var(--line-strong); border-radius: var(--r-card); cursor: pointer;
            background: var(--bg-card);
            transition: border-color .25s var(--ease), background-color .25s var(--ease),
                        box-shadow .25s var(--ease); }
.qopt__in b { display: block; font-weight: 500; }
.qopt__in i { display: block; margin-top: .25rem; font-style: normal; font-size: var(--fs-small);
              color: var(--fg-muted); }
.qopt:hover .qopt__in { border-color: var(--accent); box-shadow: var(--shadow); }
.qopt input:focus-visible + .qopt__in { outline: 3px solid var(--accent); outline-offset: 2px; }
.qopt input:checked + .qopt__in { border-color: var(--accent);
                                  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.qopt__tick { position: absolute; right: 14px; top: 14px; display: grid; place-items: center;
              width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
              opacity: 0; transform: scale(.6);
              transition: opacity .2s var(--ease), transform .25s var(--ease); }
.qopt__tick svg { width: 13px; height: 13px; }
.qopt input:checked + .qopt__in .qopt__tick { opacity: 1; transform: none; }
.quiz__skip { margin: var(--space-4) 0 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--fg-muted); font: inherit;
           font-size: var(--fs-small); text-decoration: underline; text-underline-offset: .25em;
           cursor: pointer; }
.linkish:hover { color: var(--fg); }

.quiz__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.quiz__sum { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
.quiz__act [hidden] { display: none !important; }  /* .btn задан inline-flex */
.quiz__act { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.quiz__act .btn svg { width: 16px; height: 16px; }
.quiz__law { margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted);
             max-width: 56ch; }
/* ссылка на сером фоне блока «получила, спасибо»: мятный на нём даёт 4.19 */
.form__ok a { color: #1F5E40; }
.quiz .form__ok { display: none; }
.quiz__form.is-sent .form__ok { display: block; }
.quiz__form.is-sent .quiz__s, .quiz__form.is-sent .quiz__act,
.quiz__form.is-sent .quiz__law { display: none; }

@media (max-width: 860px) { .quiz { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .quiz__opts, .quiz__fields { grid-template-columns: 1fr; } }

/* Онлайн-просмотр: слева текст, справа экран видеозвонка с настоящим
   видео от хозяев. Экран вертикальный — звонок в мессенджере так и
   выглядит, и вертикальное видео ложится в него без обрезки. */
/* 7/5 и узкий экран: телефон высотой в 660 px растягивал секцию вдвое
   выше текста, и блок разъезжался */
.call { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.call__txt h2 { margin: .35em 0 .5em; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.call__txt > p { margin: 0 0 var(--space-5); color: var(--fg-muted);
                 font-size: var(--fs-small); max-width: 52ch; }
.call .label svg { width: 15px; height: 15px; vertical-align: -.2em; margin-right: .35rem; }
.call__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: .8rem; }
.call__list li { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start;
                 font-size: var(--fs-small); color: var(--fg-muted); }
.call__list svg { width: 22px; height: 22px; color: var(--accent); }
.call__list b { color: var(--fg); font-weight: 500; }
.call__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.call__act .btn svg { width: 17px; height: 17px; }
.call__when { color: var(--fg-muted); font-size: var(--fs-small); }
.call__when svg { width: 15px; height: 15px; vertical-align: -.2em; margin-right: .3rem; }

.call__screen { border-radius: var(--r-card); overflow: hidden; background: #14100d;
                box-shadow: var(--shadow-lg); max-width: 262px; width: 100%; justify-self: center; }
.call__frame { position: relative; aspect-ratio: 9 / 16; background: #1b1f1d; }
.call__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.call__live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center;
              gap: .4rem; padding: .28rem .6rem; border-radius: var(--r-pill);
              background: rgba(0, 0, 0, .5); color: #fff; font-size: var(--fs-label);
              letter-spacing: .06em; text-transform: uppercase; }
.call__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a4d;
                animation: callpulse 1.8s ease-in-out infinite; }
@keyframes callpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.call__self { position: absolute; right: 10px; bottom: 10px; width: 33%; aspect-ratio: 3 / 4;
              border-radius: 10px; background: linear-gradient(160deg, #55635b, #2b3230);
              display: grid; place-items: center; color: rgba(255, 255, 255, .82);
              font-size: var(--fs-label); }
.call__bar { display: flex; justify-content: center; gap: .7rem; padding: .7rem; }
.call__btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
             background: rgba(255, 255, 255, .12); color: #fff; }
.call__btn svg { width: 17px; height: 17px; }
.call__btn--end { background: #d1483c; }

@media (max-width: 860px) { .call { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .call__live i { animation: none; } }

/* FAQ на главной. Нативный <details>: раскрывается без JS, доступен
   с клавиатуры, а поисковик видит вопросы и ответы в разметке FAQPage. */
.faq { border-top: 1px solid var(--line-strong); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { display: flex; align-items: flex-start; justify-content: space-between;
                  gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer;
                  list-style: none; font-weight: 500; font-size: 1.05rem;
                  transition: color .25s var(--ease); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--accent-hover); }
.faq__i summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px;
                                border-radius: var(--r-sm); }
/* знак «плюс», который под открытым вопросом становится минусом */
.faq__sign { position: relative; flex: none; width: 22px; height: 22px; margin-top: .15rem; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--accent);
  transition: transform .3s var(--ease); }
.faq__sign::after { transform: rotate(90deg); }
.faq__i[open] .faq__sign::after { transform: rotate(0); }
.faq__a { padding-bottom: var(--space-5); max-width: 68ch; animation: faqin .3s var(--ease); }
@keyframes faqin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq__a p { margin: 0 0 .7rem; color: var(--fg-muted); font-size: var(--fs-small); }
.faq__a p:last-of-type { margin-bottom: 0; }
.faq__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--space-4);
             font-size: var(--fs-small); font-weight: 500; }
.faq__more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.faq__more:hover svg { transform: translateX(4px); }

/* кнопка звука в экране звонка */
.call__btn--sound { border: 0; cursor: pointer; position: relative; padding: 0;
                    transition: background-color .25s var(--ease); }
.call__btn--sound:hover { background: rgba(255, 255, 255, .24); }
.call__btn--sound:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.call__ico { position: absolute; inset: 0; display: grid; place-items: center;
             transition: opacity .2s var(--ease); }
.call__ico--on { opacity: 0; }
.call__btn--sound[aria-pressed="true"] { background: var(--accent); }
.call__btn--sound[aria-pressed="true"] .call__ico--off { opacity: 0; }
.call__btn--sound[aria-pressed="true"] .call__ico--on { opacity: 1; }

/* ошибка отправки формы: не удалось достучаться до сервера */
.form__err { margin-top: var(--space-3); padding: .8rem 1rem; border-radius: var(--r-sm); background: #FBEAE7; color: #7A2E22; font-size: var(--fs-small); }
.form__err a { color: inherit; font-weight: 600; }