/* ============================================================
   ТД ПромСоюз / A CAPPELLA — одностраничный сайт-визитка (этап 1)
   ============================================================ */

/* ---------- Шрифты ----------
   В раздаче остаются два файла и оба подрезаны до кириллицы, латиницы и
   типографики: полные наборы весили 89 и 186 КБ, подрезанные — 15 и 14 КБ.
   Исходники и неиспользуемые начертания лежат в fonts/_src.

   Диапазон font-weight:100 900 на одном начертании — не опечатка: так браузер
   отдаёт Regular на любой запрошенный вес и не дорисовывает синтетический
   жирный там, где в вёрстке стоит 600 или 700. */
@font-face{
  font-family:'Atyp Display'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('../fonts/AtypDisplay-Regular.woff2') format('woff2');
}

/* Меню в шапке и строка преимущества на первом экране. Cera Pro из макета
   7:107 не подключён: гарнитура меню должна совпадать на светлом и тёмном
   фоне, файл лежит в fonts/_src на случай возврата. */
@font-face{
  font-family:'Suisse Intl'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/SuisseIntl-Regular.woff2') format('woff2');
}

:root{
  --ink:            #0d1f19;
  --ink-soft:       #1d3830;
  --green:          #14503c;
  --green-600:      #0f6b4a;
  --green-300:      #4aa585;
  --gold:           #c9a55c;
  --gold-soft:      #e6d3a8;
  --cream:          #f2f2f2;   /* основной фон сайта */
  --cream-2:        #f2f2f2;   /* тот же тон: каталог и контакты не выделяются */
  --card-bg:        #e5e5e3;   /* карточки товара */
  --white:          #ffffff;
  --text:           #1b211e;
  --muted:          #5f6b66;
  --line:           rgba(13,31,25,.12);

  --radius:         18px;
  --radius-sm:      12px;
  --shadow-sm:      0 2px 10px rgba(13,31,25,.06);
  --shadow:         0 10px 40px -12px rgba(13,31,25,.20);
  --shadow-lg:      0 30px 80px -24px rgba(13,31,25,.35);

  /* по всему сайту одна гарнитура — заголовки и текст */
  --font-sans:      "Atyp Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-head:      var(--font-sans);
  --font-serif:     var(--font-sans);

  --wrap:           1240px;
  --pad:            clamp(18px, 4vw, 40px);
  --header-h:       48px;   /* высота шапки из макета Figma */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body{
  margin:0; background:var(--cream); color:var(--text);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip вместо hidden: hidden делает body контейнером прокрутки и ломает sticky */
  overflow-x:hidden;
  overflow-x:clip;
}

/* всё, что идёт после первого экрана, наезжает на него */
.trust, .section, .promo-seq, .footer{ position:relative; z-index:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding: clamp(64px, 8vw, 118px) 0; position:relative; }

/* ---------- типографика ---------- */
h1,h2,h3,h4{
  margin:0; font-family:var(--font-head); font-weight:400;
  line-height:1.16; letter-spacing:-.01em;
}
h1{ font-size: clamp(32px, 5.2vw, 62px); }
h2{ font-size: clamp(28px, 4vw, 46px); }
h3{ font-size: clamp(19px, 1.7vw, 23px); letter-spacing:-.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* Заголовки на светлом — фирменный красный. На тёмных полосах они белые,
   это задано в правилах соответствующих блоков и перекрывает базовый цвет. */
h1,h2,h3,h4{ color:#040404; }
.catalog .sec-head h1,
.catalog .sec-head h2,
.catalog .sec-head .rw-in,
.card-body h3{
  background-image:none;
  color:#040404;
  -webkit-text-fill-color:#040404;
}
.modal-content h3{ background-image:none; color:#040404; -webkit-text-fill-color:#040404; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-600); margin-bottom:20px;
}
.eyebrow::before{ content:""; width:32px; height:1.5px; background:var(--gold); }
.eyebrow.on-dark{ color:var(--gold-soft); }
.lead{ font-size: clamp(17px, 1.4vw, 20px); color:var(--muted); max-width:62ch; }

.sec-head{ max-width:760px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow::before{ display:none; }
.sec-head h1 + .lead,
.sec-head h2 + .lead{ margin-top:30px; }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1.5px solid transparent;
  font-size:15.5px; font-weight:600; letter-spacing:.005em; white-space:nowrap;
  transition:.25s cubic-bezier(.2,.7,.3,1); text-align:center;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 10px 26px -10px rgba(20,80,60,.7); }
.btn-primary:hover{ background:var(--green-600); transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(20,80,60,.8); }
.btn-gold{ background:var(--gold); color:#2a1f08; box-shadow:0 10px 26px -10px rgba(201,165,92,.8); }
.btn-gold:hover{ background:#d8b76e; transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(13,31,25,.22); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); background:rgba(20,80,60,.05); }
.btn-ghost.on-dark{ border-color:rgba(255,255,255,.32); color:#fff; }
.btn-ghost.on-dark:hover{ border-color:var(--gold); color:var(--gold-soft); background:rgba(255,255,255,.06); }
.btn-sm{ padding:11px 20px; font-size:14px; }

/* ============================ ШАПКА ============================ */
/* Макет Figma (node 7:107): белая полоса 1440×48, слева три пункта от x=31,
   логотип по центру, справа два пункта до x=1412. Cera Pro Bold 13 px,
   капслок, #1e1e1e. */
/* Два состояния: над тёмными полосами — прозрачная шапка, над светлыми —
   белая (.scrolled). Меняются только фон и цвет текста, гарнитура одна. */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* белой полосы нет: шапка всегда прозрачная, меняется только цвет пунктов */
.header.scrolled{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
/* над тёмными полосами меняется только цвет — гарнитура и регистр те же */
.header.on-hero .nav a{ color:#fff; }
.header.on-hero .burger span{ background:#fff; }
.header.on-hero .logo{ opacity:0; pointer-events:none; }   /* логотип есть в самом экране */

.hdr-inner{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px 0 31px;
}

/* в шапке — логотип из макета, в подвале остаётся прежний знак «ПС» */
.header .logo{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:none; }
.header .logo img{ display:block; }
.header .logo-full{ width:103.32px; height:auto; }
/* размеры прежнего логотипа из двух файлов — на случай возврата */
.logo-name{ width:103.32px; height:20.74px; }
.logo-sub{ width:73.92px; height:6.53px; }

.logo{ display:flex; align-items:center; gap:13px; }
.logo-mark{
  width:44px; height:44px; border-radius:12px; flex:none;
  background:linear-gradient(145deg,var(--green) 0%, var(--ink) 100%);
  display:grid; place-items:center; color:var(--gold);
  font-family:var(--font-serif); font-size:20px; font-weight:400; letter-spacing:-.02em;
}
.logo-txt strong{ display:block; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.logo-txt span{ display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

.nav{ display:flex; gap:35px; }
.nav a{
  font-family:'Suisse Intl', var(--font-sans);
  font-size:14px; font-weight:400; line-height:1.2; letter-spacing:0;
  color:#1e1e1e; white-space:nowrap; transition:color .3s ease;
  /* «перекат»: надпись уезжает вверх, снизу приходит её копия */
  position:relative; display:inline-block; overflow:hidden; vertical-align:top;
}
/* пункт с иконкой: «перекат» ему не ставим — скрипт его пропускает, иначе
   при подмене разметки иконка бы потерялась */
.nav-cta{ display:inline-flex; align-items:center; gap:8px; overflow:visible; }
/* иконку опускаем на 2px: геометрический центр строки выше оптического —
   у шрифта высота прописных меньше кегля, и значок кажется задранным */
.nav-cta svg{ width:15px; height:15px; flex:none; transform:translateY(2px); }
.nav-cta:hover{ opacity:.65; }

/* :not(.nav-cta) обязателен: иначе display:block применился бы и к подписям
   кнопки заявки, и обе — полная и короткая — показывались бы разом */
.nav a:not(.nav-cta) span{ display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.nav a .lr-out{ position:absolute; left:0; top:0; width:100%; transform:translateY(105%); }
.nav a:hover .lr-in { transform:translateY(-105%); }
.nav a:hover .lr-out{ transform:translateY(0); }

/* Две полосы, а не три: без внутренних отступов, полосы центрируются флексом —
   иконка встаёт на ту же линию, что логотип и кнопка заявки. */
.burger{
  display:none; width:28px; height:28px; border:0; background:none; padding:0;
  flex:none; flex-direction:column; justify-content:center; align-items:flex-start; gap:7px;
}
.burger span{ display:block; width:26px; height:2px; background:#1e1e1e; border-radius:2px; margin:0; transition:.3s; }
.burger span:nth-child(3){ display:none; }
.header.on-hero .burger span{ background:#fff; }
/* половина шага между полосами (7 + 2) / 2 — на пересечении получается крест */
.burger.open span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:24px var(--pad) 32px; display:none; flex-direction:column; gap:4px;
  box-shadow:var(--shadow);
}
.mobile-menu.open{ display:flex; }
/* красное полотно во всю ширину, белый текст по центру, без разделителей */
.mobile-menu{
  background:#7b0403; border-bottom:0; box-shadow:none;
  padding:26px 20px 34px; text-align:center; gap:2px;
}
.mobile-menu a{ padding:14px 0; font-size:18px; font-weight:400; border-bottom:0; color:#fff; }
.mobile-menu a:hover{ color:rgba(255,255,255,.75); }
.mobile-menu .mm-btn{
  flex:none; width:100%; max-width:320px; margin:20px auto 0;
  color:#000;
}

/* ============================ ГЛАВНЫЙ ЭКРАН ============================
   Макет Figma (node 7:397): 1440×835, градиент #000 -> #480000 сверху вниз.
   Логотип по центру, top 183/835 = 22%. Внизу слева абзац (Atyp Display 16px,
   #939393, ширина 351) и кнопка 252×51 на #d9d9d9 с подчёркнутым текстом. */
/* sticky + z-index:0 — первый экран остаётся на месте, а следующие секции
   наезжают на него сверху. Отсюда же эффект параллакса при скролле. */
.hero{
  position:sticky; top:0; z-index:0; overflow:hidden;
  /* всегда во весь экран; dvh — чтобы на мобильных не мешала адресная строка */
  min-height:100vh;
  min-height:100dvh;
  background:linear-gradient(180deg, #000000 0%, #480000 100%);
  color:#fff;
  display:flex; align-items:flex-end;
  padding:0 27px 42px;
}

/* Видео-фон. Лежит ниже логотипа и текста, поверх градиента.
   Затемнение снизу — чтобы подпись и кнопка читались на любом кадре. */
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none;
  /* --vscale и --shade ставит скрипт по мере прокрутки первого экрана */
  transform:scale(var(--vscale, 1)); transform-origin:center;
  will-change:transform;
}
/* z-index:1 обязателен: псевдоэлемент вставляется первым потомком, и без него
   видео, идущее следом в разметке, закрасило бы затемнение собой */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  /* два слоя: ровное затемнение по всему кадру плюс усиление к низу,
     где лежат подпись и кнопка */
  background:
    linear-gradient(to top, rgba(0,0,0,.44) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.08) 100%),
    linear-gradient(rgba(0,0,0,calc(.22 + .46 * var(--shade, 0))),
                    rgba(0,0,0,calc(.22 + .46 * var(--shade, 0))));
}

/* Логотип живёт вне первого экрана и зафиксирован во вьюпорте: при скролле
   JS уменьшает его и переносит в шапку. Остаётся белым — белой полосы нет. */
.hero-logo{
  position:fixed; left:50%; top:22vh; z-index:101;
  transform:translateX(-50%); transform-origin:top center;
  display:flex; flex-direction:column; align-items:center;
  width:min(664px, 92vw);          /* 307.33 из макета × 1.5 × 1.2 × 1.2 */
  will-change:transform;
  transition:opacity .25s ease;    /* гаснет, когда открыто мобильное меню */
}

/* Появление логотипа: подъём со шторкой снизу вверх. Анимируем внутренние
   блоки, а не сам .hero-logo — его transform занят скролл-эффектом. */
.hl-row, .hl-subrow{ animation:logoIn 1.3s cubic-bezier(.16,1,.3,1) both; }
.hl-row{ animation-delay:.15s; }
.hl-subrow{ animation-delay:.34s; }
/* правый инсет отрицательный — иначе шторка срежет значок ®, он вынесен
   за границы строки */
@keyframes logoIn{
  from{ opacity:0; transform:translateY(26px); clip-path:inset(100% -12% 0 0); }
  to  { opacity:1; transform:none;             clip-path:inset(0 -12% 0 0); }
}
.hero-bottom{ animation:heroUp 1.1s cubic-bezier(.16,1,.3,1) .62s both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.hl-row{ position:relative; display:block; width:100%; }

/* Логотип разложен на два слоя с общим viewBox 0 0 469 128, поэтому они
   совмещаются пиксель в пиксель: «Acappella» с ® и рукописное «premium».
   Габарит блока задаёт первый слой, остальные лежат поверх. */
.hl-word{ display:block; width:100%; height:auto; }
.hl-word.hl-dark,
.hl-script{ position:absolute; left:0; top:0; width:100%; height:auto; }

/* «premium» прописывается слева направо — шторка раскрывается по горизонтали,
   что на рукописном начертании читается как росчерк пером.
   Старт на 0.1s — почти одновременно с «Acappella»: та ещё поднимается
   из-под шторки, а росчерк уже пошёл. */
.hl-script{
  clip-path:polygon(0 0, 0 0, -8% 100%, -8% 100%);
  animation:writeIn 4.4s cubic-bezier(.5, 0, .2, 1) .1s forwards;
}
/* кромка не вертикальная, а наклонная — как след пера, идущего под углом */
@keyframes writeIn{
  from{ clip-path:polygon(0 0, 0 0,    -8% 100%,  -8% 100%); }
  to  { clip-path:polygon(0 0, 108% 0, 100% 100%, -8% 100%); }
}

/* единый файл логотипа — остаётся на случай отказа от анимации */
.hl-full{ display:block; width:100%; height:auto; }
.hl-full.hl-dark{ position:absolute; left:0; top:0; }

/* прежний логотип из трёх файлов — правила оставлены на случай возврата */
.hl-name{ display:block; width:100%; height:auto; }

/* Светлый и тёмный комплекты лежат стопкой: над тёмным фоном виден белый,
   над светлым — чёрный. Тёмные растягиваются по коробке светлых, у всех SVG
   preserveAspectRatio="none". */
.hl-light{ transition:opacity .3s ease; }
.hl-dark{ opacity:0; transition:opacity .3s ease; }
.hl-name.hl-dark{ position:absolute; left:0; top:0; width:100%; height:100%; }
.hl-sub.hl-dark{ position:absolute; left:0; top:0; width:100%; height:100%; }
.hero-logo.on-light .hl-light{ opacity:0; }
.hero-logo.on-light .hl-dark{ opacity:1; }
/* доли от макета (13.28 / 3.5 / 2.2 при ширине 307.33) — значок растёт вместе с логотипом */
.hl-reg{ position:absolute; left:101.14%; top:3.57%; width:4.32%; height:auto; }
.hl-subrow{ display:block; width:71.5%; margin-top:2.49%; }   /* 7.64 / 307.33 из макета */
.hl-sub{ display:block; width:100%; height:auto; }

/* место под логотип в шапке главной — сам логотип приезжает поверх */
.logo-slot{ width:103.32px; flex:none; }

.hero-bottom{ position:relative; z-index:2; }
/* Макет Figma 103:252: заголовок 28/32 белым шириной 522, ниже строка
   преимущества со звездой (Suisse Intl 16px, #949494), затем кнопка 253×51
   и две квадратные стрелки 56×51 для переключения строки. */
.hero-text{
  width:522px; max-width:100%; margin:0 0 26px;
  font-size:clamp(21px, 1.95vw, 28px); line-height:1.14; color:#fff;
}

.hero-fact{ display:flex; align-items:flex-start; gap:12px; margin-bottom:39px; }
.hero-star{ width:16px; height:16px; flex:none; margin-top:3px; }
/* строка меняется по вертикали: старая уходит вверх, новая приходит снизу.
   Маска обрезает то, что вне строки, поэтому движение читается как перелистывание */
.hero-fact-mask{ overflow:hidden; max-width:417px; }
.hero-fact-text{
  margin:0;
  font-family:'Suisse Intl', var(--font-sans);
  font-size:16px; line-height:1.5; color:#fff;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.hero-fact-text.out{ transform:translateY(-110%); opacity:0; }
.hero-fact-text.below{ transform:translateY(110%); opacity:0; transition:none; }

.hero-actions{ display:flex; align-items:stretch; gap:6px; }
.hero-nav{ display:flex; gap:1px; }   /* в макете между стрелками ровно 1px */
.hero-arrow{
  width:56px; height:51px; border:0; padding:0;
  background:#d9d9d9; display:grid; place-items:center;
  transition:background .25s ease;
}
.hero-arrow:hover{ background:#e8e8e8; }
.hero-arrow img{ width:8px; height:16px; }
.hero-arrow-next img{ transform:rotate(180deg); }
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:252px; max-width:100%; height:51px;
  background:#d9d9d9; color:#000;
  font-size:14px; text-decoration:underline; text-underline-offset:2px;
  transition:background .25s ease;
}
.hero-btn:hover{ background:#e8e8e8; }

@media (max-width:700px){
  .hero{ padding:0 20px 34px; }
  .hero-logo{ top:26vh; width:min(562px, 88vw); }
  .hero-text{ font-size:15px; line-height:21px; margin-bottom:20px; }
  .hero-btn{ width:100%; }
}
/* полоса доверия */
.trust{ background:var(--white); border-block:1px solid var(--line); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-block:34px; }
.trust-item{ text-align:center; padding-inline:14px; border-left:1px solid var(--line); }
.trust-item:first-child{ border-left:0; }
.trust-item b{ display:block; font-size:clamp(26px,2.6vw,36px); font-family:var(--font-serif); color:var(--green); line-height:1; }
.trust-item span{ display:block; margin-top:9px; font-size:13.5px; color:var(--muted); }

/* ============================ АУДИТОРИИ (интерактив) ============================ */
.audience{ background:var(--cream); }
.aud-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.aud-tab{
  padding:12px 22px; border-radius:100px; border:1.5px solid var(--line);
  background:var(--white); color:var(--ink-soft); font-size:15px; font-weight:600; transition:.25s;
}
.aud-tab:hover{ border-color:var(--green-300); }
.aud-tab.active{ background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 10px 24px -12px rgba(20,80,60,.8); }

.aud-stage{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,3.4vw,56px);
  align-items:center; background:var(--white); border-radius:calc(var(--radius) + 8px);
  padding:clamp(24px,3.4vw,52px); box-shadow:var(--shadow); border:1px solid var(--line);
  min-height:410px;
}
.aud-photo{
  position:relative; border-radius:var(--radius); min-height:330px;
  display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:26px 20px 0;
  overflow:hidden; transition:background .5s ease;
}
.aud-photo::before{
  content:""; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top, rgba(0,0,0,.14), transparent);
}
.aud-photo img{
  max-height:290px; width:auto; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.28));
  animation:pop .55s cubic-bezier(.2,.9,.3,1.1) both;
}
.aud-photo img:nth-child(2){ animation-delay:.07s; }
.aud-photo img:nth-child(3){ animation-delay:.14s; }
@keyframes pop{ from{ opacity:0; transform:translateY(26px) scale(.94); } to{ opacity:1; transform:none; } }

.aud-tag{
  position:absolute; z-index:2; top:18px; left:18px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border-radius:100px; padding:7px 15px; font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--green);
}
.aud-copy h3{ font-size:clamp(24px,2.4vw,32px); margin-bottom:16px; }
.aud-copy .who{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.aud-copy p{ color:var(--muted); font-size:16.5px; }
.aud-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.aud-meta span{
  font-size:13.5px; padding:8px 15px; border-radius:100px;
  background:var(--cream-2); color:var(--ink-soft); font-weight:500;
}

/* ============================ БРЕНД A CAPPELLA ============================ */
.brand{
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(74,165,133,.24), transparent 62%),
    linear-gradient(150deg, #0d2e23 0%, #071811 100%);
  color:#fff; text-align:center; overflow:hidden; position:relative;
}
.brand::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:26px 26px; opacity:.8;
}
.brand .wrap{ position:relative; z-index:1; }
.brand-name{
  font-family:var(--font-serif); font-weight:400; letter-spacing:.02em;
  font-size:clamp(40px,6.4vw,88px); color:#fff; line-height:1;
}
.brand-name span{ color:var(--gold); }
.brand-claim{
  margin-top:20px; font-size:clamp(17px,1.8vw,25px); color:var(--gold-soft);
  /* курсива у Prata нет — оставляем прямое, иначе браузер наклонит шрифт сам */
  font-family:var(--font-serif); font-style:normal; letter-spacing:.01em;
}
.brand-line{ width:80px; height:1px; background:rgba(201,165,92,.55); margin:36px auto; }
.reals{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,40px); margin-top:8px; }
.real{
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:clamp(26px,3vw,42px) 22px; background:rgba(255,255,255,.035);
  transition:.35s cubic-bezier(.2,.7,.3,1);
}
.real:hover{ background:rgba(255,255,255,.075); transform:translateY(-6px); border-color:rgba(201,165,92,.45); }
.real .num{ font-family:var(--font-serif); font-size:15px; color:var(--gold); letter-spacing:.2em; }
.real h3{ margin:16px 0 10px; color:#fff; font-size:clamp(20px,1.9vw,26px); }
.real p{ color:rgba(255,255,255,.62); font-size:15.5px; }

/* ============================ ПРЕИМУЩЕСТВА ============================ */
.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.adv{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,3vw,42px); box-shadow:var(--shadow-sm);
  transition:.35s cubic-bezier(.2,.7,.3,1); position:relative; overflow:hidden;
}
.adv::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.adv:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.adv:hover::after{ transform:scaleX(1); }
.adv-ico{
  width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(140deg, rgba(20,80,60,.12), rgba(201,165,92,.18)); color:var(--green);
}
.adv h3{ margin-bottom:12px; }
.adv p{ color:var(--muted); font-size:16px; }

/* ============================ ПРОМО-ПОСЛЕДОВАТЕЛЬНОСТЬ ============================
   Макет Figma (node 19:482): 1440×804, фото на всю ширину, текст поверх слева
   внизу — заголовок 48/49, текст 15px, оба белые.
   Секция высотой в три экрана, внутри sticky-сцена: пока она прокручивается,
   кадры сменяют друг друга, а вместе с ними заголовок и описание. */
.promo-seq{ position:relative; height:500vh; }   /* по экрану на кадр, кадров пять */
.promo-stage{
  position:sticky; top:0;
  height:100vh; height:100dvh;
  overflow:hidden; color:#fff;
  /* сплошная подложка: во время кроссфейда оба кадра полупрозрачны,
     и без неё сквозь сцену просвечивал бы закреплённый первый экран */
  background:#000;
}
.promo-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .85s ease, visibility 0s linear .85s;
}
.promo-slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity .85s ease, visibility 0s;
}
.promo-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.07);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.promo-slide.is-active .promo-img{ transform:scale(1); }
/* Затемнение из макета 25:496. В Figma это ровные 15%, но кадр светлый —
   белый текст на паркете внизу слева не читался. Оставили те же 15% сверху
   и усилили к низу, где лежит подпись. */
.promo-slide.has-shade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.12) 100%);
}

.promo-copy{
  position:absolute; z-index:1;
  left:clamp(20px, 3.55vw, 51px);
  /* привязка к низу, а не к 56% сверху: заголовки у кадров разной длины,
     и при верхней привязке более длинный вылезал бы за нижнюю кромку */
  bottom:clamp(36px, 6vh, 80px);
  width:clamp(280px, 36vw, 520px);
}
/* заголовок и текст выезжают снизу с задержкой друг за другом */
.promo-copy h2, .promo-copy p{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.promo-slide.is-active .promo-copy h2{ opacity:1; transform:none; transition-delay:.18s; }
.promo-slide.is-active .promo-copy p { opacity:1; transform:none; transition-delay:.34s; }

.promo-copy h2{
  font-family:var(--font-sans); font-weight:400; color:#fff;
  font-size:clamp(30px, 4.2vw, 60px); line-height:1.03; letter-spacing:-.015em;
}
.promo-copy p{
  margin:clamp(20px, 2.6vw, 38px) 0 0;
  width:clamp(260px, 30vw, 430px); max-width:100%;
  font-size:clamp(14px, 1.25vw, 18px); line-height:1.45;
}

@media (max-width:760px){
  .promo-copy{ bottom:34px; width:auto; right:20px; }
  .promo-copy p{ width:auto; }
}
/* ============================ БЛОК БРЕНДА ============================
   Макет Figma (node 89:70): 1447×2114, градиент #4b0807 -> #7f0403 сверху вниз.
   Логотип по центру (473×128), под ним подпись #ee8483 15px шириной 565.
   Ниже — три блока в шахматном порядке: левая колонка на 0 и 925, правая
   со сдвигом 435. Заголовки 32px белым, описания 15px #ee8483.
   Отрицательный отступ сверху даёт наезд на закреплённый слайдер. */
/* Наезд на закреплённый слайдер делает секция, идущая сразу за ним, — сейчас
   это контакты. У самого красного блока отрицательного отступа быть не должно:
   он бы наезжал на контакты и оставлял пустую прокрутку в конце страницы. */
.brand-red{
  position:relative; z-index:2;
  margin-top:-100vh;                 /* наезжает на закреплённый слайдер */
  background:linear-gradient(180deg, #4b0807 0%, #7f0403 100%);
  color:#fff;
  padding: clamp(70px, 7.3vw, 105px) 0 clamp(26px, 2.6vw, 38px);
}
/* без ограничения по ширине — блоки растягиваются на весь экран */
.brand-inner{ padding-inline:clamp(20px, 4.8vw, 69px); }

/* Логотип на красном — та же анимация, что на первом экране, но запускается
   не при загрузке, а когда блок попадает в кадр: класс .in ставит наблюдатель. */
.brand-logo{ width:min(473px, 62vw); margin-inline:auto; }
.bl-row{ position:relative; display:block; width:100%; opacity:0; }
.bl-word{ display:block; width:100%; height:auto; }
.bl-script{
  position:absolute; left:0; top:0; width:100%; height:auto;
  clip-path:polygon(0 0, 0 0, -8% 100%, -8% 100%);
}
.brand-logo.in .bl-row{ animation:logoIn 1.3s cubic-bezier(.16,1,.3,1) .1s both; }
.brand-logo.in .bl-script{ animation:writeIn 4.4s cubic-bezier(.5, 0, .2, 1) .1s forwards; }
.brand-lead{
  width:565px; max-width:100%; margin:clamp(22px, 2.4vw, 34px) auto 0;
  text-align:center; color:#ee8483; font-size:15px; line-height:1.36;
  /* появляется следом за логотипом */
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease .45s, transform .9s cubic-bezier(.16,1,.3,1) .45s;
}
.brand-lead.in{ opacity:1; transform:none; }

/* Две независимые колонки, а не строки грида: в макете карточки перекрываются
   по вертикали, и строчная раскладка их бы развела. */
.brand-cols{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(24px, 5.3vw, 77px);
  margin-top:clamp(60px, 10vw, 148px);
}
.brand-col{ display:flex; flex-direction:column; gap:clamp(64px, 18vw, 261px); }
/* правая колонка сдвинута вниз, и шаг между её блоками в макете чуть меньше */
.brand-col-2{ padding-top:clamp(80px, 30vw, 435px); gap:clamp(56px, 16vw, 230px); }

/* Появление кадра: шторка раскрывается от центра к краям.
   Анимируем clip-path, а не transform, — трансформация занята параллаксом. */
.bi-media{
  position:relative; aspect-ratio:625 / 518; overflow:hidden;
  background:#d9d9d9;
  opacity:0; clip-path:inset(14% 0 14% 0);
  transition:opacity .9s ease, clip-path 1.15s cubic-bezier(.16,1,.3,1);
}
.bi-media.in{ opacity:1; clip-path:inset(0 0 0 0); }

/* «Высокое качество»: по макету это не фотография, а тёмно-красная плашка
   с бутылкой по центру — 156×441 из 625×518, то есть 25% ширины блока. */
/* Плашка с вырезанной бутылкой: макет заменил её студийным кадром
   (brand-quality.webp), правила оставлены на случай возврата — файл
   brand-bottle.webp лежит в images/. */
.bi-media-bottle{ background:#5e0306; display:grid; place-items:center; }
.bi-bottle{
  position:relative; left:auto; top:auto;
  width:25%; height:auto; object-fit:contain;
}

/* кадр выше контейнера — запас, который съедает параллакс.
   Те же правила для видео: в блоках может стоять и ролик, и фотография. */
.bi-media img,
.bi-media video{
  position:absolute; left:0; top:-25%;
  width:100%; height:150%; object-fit:cover;
  will-change:transform;
}
.brand-item h3{
  margin:clamp(16px, 1.7vw, 25px) 0 0;
  font-family:var(--font-sans); font-weight:400; color:#fff;
  font-size:clamp(22px, 2.2vw, 32px); line-height:1.2; letter-spacing:-.01em;
  background:none; -webkit-text-fill-color:#fff;
}
.brand-item p{
  margin:clamp(12px, 1.3vw, 20px) 0 0;
  color:#ee8483; font-size:15px; line-height:1.36; max-width:458px;
}

/* Появление подписи. Наблюдаем именно за текстом, а не за всем блоком:
   блок начинается с картинки в ~600px, и триггер по нему срабатывал бы,
   когда в кадр входит верх изображения — задолго до того, как виден текст. */
.bi-copy h3,
.bi-copy p{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.bi-copy.in h3{ opacity:1; transform:none; transition-delay:.10s; }
.bi-copy.in p { opacity:1; transform:none; transition-delay:.26s; }

@media (max-width:820px){
  .brand-red{ margin-top:-60vh; }
  .brand-cols{ grid-template-columns:1fr; }
  .brand-col{ gap:clamp(40px, 12vw, 64px); }
  .brand-col-2{ padding-top:clamp(40px, 12vw, 64px); }
  .brand-lead{ font-size:14px; }
}

/* ============================ КОНТАКТЫ ============================
   Та же логика, что в каталоге: плоские плоскости без скруглений и теней,
   заголовок с градиентом по тексту, акцент — красный из блока бренда. */
/* контакты идут сразу за слайдером и наезжают на него, пока тот закреплён */
.contacts{ background:var(--cream-2); }
.contacts .sec-head h2{
  font-family:var(--font-sans);
  font-size:clamp(30px, 4.2vw, 58px); line-height:1.05; letter-spacing:-.03em;
  color:#040404; -webkit-text-fill-color:#040404;
}
.contacts .sec-head .rw-in{ color:#040404; -webkit-text-fill-color:#040404; }
.contacts .sec-head{ max-width:none; }

.ct-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 72px); align-items:start;
}
.ct-row{
  display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:24px;
  padding:24px 0; border-top:1px solid rgba(30,30,30,.13);
}
.ct-row:first-child{ border-top:0; padding-top:0; }
.ct-label{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:#9a9a9a; padding-top:5px;
}
.ct-value{
  display:grid; gap:5px;
  font-size:clamp(16px, 1.35vw, 19px); line-height:1.35; color:#1e1e1e;
}
.ct-value a{ transition:color .25s ease; }
.ct-value a:hover{ color:#7f0403; }

/* кнопка плоская и чёрная — как «Запросить цену» в попапе */
.ct-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:clamp(26px, 3vw, 42px); height:51px; padding:0 36px;
  background:#000; color:#fff; font-size:14px;
  transition:background .25s ease;
}
.ct-btn:hover{ background:#7f0403; }

.ct-map{ position:relative; aspect-ratio:4 / 3; background:var(--card-bg); }
.ct-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

@media (max-width:820px){
  .ct-grid{ grid-template-columns:1fr; }
  .ct-row{ grid-template-columns:1fr; gap:7px; padding:20px 0; }
  .ct-label{ padding-top:0; }
  .ct-map{ aspect-ratio:16 / 11; }
}

/* ============================ ПОДВАЛ ============================
   По макету 98:124 он лежит внутри красного блока: логотип во всю ширину
   контента (1313 из 1447) и четыре колонки под ним. */
.brand-foot{ margin-top:clamp(150px, 20vw, 460px); }
/* логотип в подвале разложен на два слоя — та же прорисовка, что на первом экране */
.foot-logo{ display:block; width:100%; }
.fl-row{ position:relative; display:block; width:100%; opacity:0; }
.fl-word{ display:block; width:100%; height:auto; }
.fl-script{
  position:absolute; left:0; top:0; width:100%; height:auto;
  clip-path:polygon(0 0, 0 0, -8% 100%, -8% 100%);
}
.foot-logo.in .fl-row{ animation:logoIn 1.3s cubic-bezier(.16,1,.3,1) .1s both; }
.foot-logo.in .fl-script{ animation:writeIn 4.4s cubic-bezier(.5, 0, .2, 1) .1s forwards; }

/* весь текст подвала выровнен по центру колонок */
.foot-cols{
  display:grid; grid-template-columns:1.9fr 1fr 1fr 1.4fr;
  column-gap:clamp(26px, 4.4vw, 76px); row-gap:40px;
  margin-top:clamp(28px, 3.5vw, 52px);
  text-align:center;
}
.foot-about{
  margin:0 auto; color:#ee8483;
  font-size:clamp(17px, 1.7vw, 24px); line-height:1.35; max-width:466px;
}
/* кнопка из макета — та же, что на первом экране: 252×51, #d9d9d9 */
.foot-btn{ margin-top:clamp(22px, 2.6vw, 40px); }
.foot-col h4{
  margin:0 0 clamp(14px, 1.5vw, 22px);
  font-family:var(--font-sans); font-weight:400; color:#fff;
  font-size:clamp(16px, 1.4vw, 20px); letter-spacing:-.01em;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-col li{ color:#ee8483; font-size:16px; line-height:1.3; }
.foot-col a{ transition:color .25s ease; }
.foot-col a:hover{ color:#fff; }

/* адрес — кнопка: открывает попап с картой */
.foot-addr{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer;
  border-bottom:1px solid rgba(238,132,131,.45);
  transition:color .25s ease, border-color .25s ease;
}
.foot-addr:hover{ color:#fff; border-bottom-color:#fff; }

/* Карта открывается шторкой снизу: во всю ширину, в половину высоты экрана.
   Анимация именно keyframes, а не transition: попап переключается с display:none,
   и переход на том же кадре браузер бы не проиграл. */
#mapModal{ padding:0; place-items:end stretch; }
#mapModal .modal-box{
  max-width:none; width:100%; height:50vh;
  border-radius:0; overflow:hidden; animation:none;
}
#mapModal.open .modal-box{ animation:sheetUp .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }

.map-box{ background:#000; }
.map-box iframe{ display:block; width:100%; height:100%; border:0; }

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; text-align:center;
  margin-top:clamp(34px, 4vw, 58px); padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:14px; color:rgba(238,132,131,.72);
}

/* ---------- появление подвала ---------- */
.foot-cols > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.foot-cols.in > *{ opacity:1; transform:none; }
.foot-cols.in > *:nth-child(1){ transition-delay:.06s; }
.foot-cols.in > *:nth-child(2){ transition-delay:.17s; }
.foot-cols.in > *:nth-child(3){ transition-delay:.28s; }
.foot-cols.in > *:nth-child(4){ transition-delay:.39s; }

.foot-bottom{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s ease .1s, transform .8s cubic-bezier(.16,1,.3,1) .1s;
}
.foot-bottom.in{ opacity:1; transform:none; }

@media (max-width:900px){
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-intro{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .foot-cols{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; gap:8px; }
}

/* ============================ ВНУТРЕННЯЯ СТРАНИЦА ============================
   Шапка здесь всегда сплошная (см. ui.js), поэтому первой секции нужен отступ
   сверху на её высоту — иначе заголовок уедет под шапку. */
.page-top{ padding-top: calc(var(--header-h) + clamp(34px, 4vw, 58px)); }

.crumbs{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); margin-bottom:26px; }
.crumbs a{ color:var(--green); }
.crumbs a:hover{ color:var(--green-600); }

/* ============================ КАТАЛОГ ============================ */
/* Фон тот же, что у подвала, — каталог и подвал держат страницу одним
   красным полотном. Карточки на полтона светлее, чтобы читались плитками. */
/* Каталог на белом, плитки на полтона темнее — их граница читается только
   за счёт этой разницы, рамок и теней у карточек нет. */
.catalog{ background:#fff; }
.catalog .filter{ color:rgba(0,0,0,.42); }
.catalog .filter:hover,
.catalog .filter.active{ color:#1e1e1e; }
.catalog .card-body p{ color:#6a6a68; }
.catalog .card-vol{ background:rgba(255,255,255,.92); color:#4a4a48; }
/* «Актуальная линейка» — гротеском, а не серифом, как остальные заголовки */
.catalog .sec-head{ max-width:none; }   /* иначе крупный заголовок ломается на две строки */
.catalog .sec-head h1,
.catalog .sec-head h2{
  font-family:var(--font-sans);
  font-size:clamp(30px, 4.2vw, 58px);
  letter-spacing:-.03em; line-height:1.05;
}
@media (min-width:701px){
  .catalog .sec-head h2{ white-space:nowrap; }
}

/* Появление заголовка: слова выезжают из-под маски с задержкой друг за другом.
   padding/margin по низу — чтобы маска не срезала хвосты у «у» и «р». */
.rw{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.rw-in{
  display:inline-block; transform:translateY(115%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.reveal-text.in .rw-in{ transform:translateY(0); }
/* каталог раскрывается на всю ширину экрана — сетка карточек не ограничена 1240px */
.catalog > .wrap{ max-width:none; }
/* Фильтры прилипают под шапкой, пока в кадре секция каталога. */
.filters{
  position:sticky; top:var(--header-h); z-index:50;
  /* тот же шаг, что и в прилипшем виде — размер и расстояния не меняются */
  display:flex; flex-wrap:wrap; gap:clamp(12px, 1.4vw, 24px);
  margin:0 0 36px;
  padding:8px 0 7px;
  transition:padding .28s ease, background .28s ease, border-radius .28s ease,
             box-shadow .28s ease, gap .28s ease;
}
/* Прилипнув, полоса собирается в «пилюлю»: ширина по кнопкам, скругление 999,
   красная заливка как у блока бренда, текст белый. Класс ставит скрипт. */
.filters.stuck{
  width:max-content; max-width:100%;
  margin-inline:auto;
  /* пункты опущены на 8px: отступ сверху увеличен, снизу на столько же убран,
     общая высота плашки не меняется */
  padding:10px clamp(18px, 2vw, 28px) 13px;
  border-radius:999px;
  background:#000;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  gap:clamp(12px, 1.4vw, 24px);
}
/* на чёрном палитра инвертируется: активный белый, остальные приглушены */
.filters.stuck .filter{ color:rgba(255,255,255,.55); }
.filters.stuck .filter:hover{ color:#fff; }
.filters.stuck .filter.active{ color:#fff; }
/* витрина на главной: заголовок, текст и кнопки по центру */
.catalog-center .filters{ justify-content:center; }
.catalog-center .sec-head .lead{ margin-inline:auto; }
/* Текстовые переключатели: серые в покое, чёрные с толстым подчёркиванием
   в активном состоянии. Никаких плашек и счётчиков. */
.filter{
  position:relative; border:0; background:transparent; border-radius:0;
  padding:0;
  font-size:13px; font-weight:400; color:#9a9a9a;
  transition:color .25s ease, font-size .25s ease;
}
.filter:hover{ color:#1e1e1e; }
.filter.active{ color:#1e1e1e; }
.filter i{ display:none; }   /* счётчик позиций скрыт */

.products{
  display:grid; gap:clamp(4px,0.45vw,7px);
  grid-template-columns:repeat(4, minmax(0,1fr));   /* ровно 4 карточки в ряд */
}
/* витрина на главной — по 3 в ряд, на широких экранах по 4 */
.products.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (min-width:1500px){
  .products.cols-3{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.card{
  background:#efefed; border:0; border-radius:0;
  overflow:hidden; cursor:pointer; text-align:left; padding:0; display:flex; flex-direction:column;
  transition:.3s cubic-bezier(.2,.7,.3,1);
  opacity:0;                      /* до выхода в кадр карточки нет */
}
/* Ховер поднимает плитку через translate, а не transform: transform занят
   анимацией появления, и её fill-mode держал бы его до конца жизни карточки. */
.card:hover{ translate:0 -7px; box-shadow:var(--shadow); }

/* Появление: плитка выезжает снизу, следом бутылка, следом подпись. Номер в
   очереди скрипт кладёт в --d, дети отсчитывают свои сдвиги от него, поэтому
   ряд собирается волной, а не всплывает одним куском. */
.card.in{
  animation:cardIn .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--d, 0ms);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(38px) scale(.965); }
  to  { opacity:1; transform:none; }
}

.card.in .card-img img{
  animation:cardBottleIn .85s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--d, 0ms) + 130ms);
}
@keyframes cardBottleIn{
  from{ opacity:0; transform:translateY(32px); }
  to  { opacity:1; transform:none; }
}

.card.in .card-body{
  animation:cardCopyIn .66s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--d, 0ms) + 210ms);
}
@keyframes cardCopyIn{
  from{ opacity:0; transform:translateY(15px); }
  to  { opacity:1; transform:none; }
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }

.card-img{
  /* object-fit вписывает бутылку в поле за вычетом padding: сумма отступов
     задаёт её размер, перекос вниз — положение по вертикали */
  position:relative; height:clamp(415px, 33vw, 612px); padding:105px 16px 52px; overflow:hidden;
  background:#efefed;
}
.card-img img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  opacity:0;                      /* показывается своей анимацией появления */
  transition:scale .45s cubic-bezier(.2,.7,.3,1), translate .45s cubic-bezier(.2,.7,.3,1);
}
/* по той же причине, что и у плитки: transform под анимацией появления */
.card:hover .card-img img{ scale:1.07; translate:0 -4px; }
.card-vol{
  position:absolute; top:12px; right:12px; background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
  font-size:11.5px; font-weight:700; color:var(--green); padding:5px 11px; border-radius:100px;
  letter-spacing:.03em;
}
/* в карточке остались только название и короткое описание, по центру */
.card-body{ padding:4px 22px 30px; display:flex; flex-direction:column; flex:1; text-align:center; }
.card-cat{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); }
.card-body h3{ font-size:22px; margin:0 0 12px; }
.card-body p{ font-size:14px; color:var(--muted); line-height:1.5; }
.card-more{
  margin-top:auto; padding-top:16px; font-size:13.5px; font-weight:600; color:var(--green);
  display:flex; align-items:center; gap:7px;
}
.card-more svg{ transition:transform .25s; }
.card:hover .card-more svg{ transform:translateX(4px); }

.catalog-note{
  margin-top:38px; padding:26px 30px; border-radius:0; background:#efefed;
  border:0; display:flex; flex-wrap:wrap; gap:18px 26px;
  align-items:center; justify-content:space-between;
}
.catalog-note p{ font-size:15.5px; color:var(--muted); max-width:60ch; }
.catalog-note b{ color:var(--ink); }

/* модальное окно товара */
.modal{
  /* Запас сверху нужен окну товара: бутылка выходит за верхнюю кромку. На
     невысоких экранах ноутбуков фиксированные 128px съедали столько места,
     что окно переставало помещаться целиком, — поэтому запас плавающий.
     Обе величины отданы переменными: по ним же считается высота колонок,
     и правки в одном месте не разъезжаются со вторым. */
  --pad-top:    clamp(62px, 12vh, 128px);
  --pad-bottom: 26px;

  position:fixed; inset:0; z-index:200; display:none; place-items:center;
  padding: var(--pad-top) 20px var(--pad-bottom);
  background:rgba(8,20,15,.62); backdrop-filter:blur(6px);
}
.modal.open{ display:grid; animation:fade .28s ease both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* Закрытие. Окно не выдёргивается из потока сразу: скрипт вешает .closing,
   даёт доиграть обратной анимации и только потом снимает .open. Правила
   стоят ниже правил открытия — при одинаковой силе побеждает последнее. */
.modal.closing{ display:grid; animation:modalOut .3s ease both; }
.modal.closing .modal-box{ animation:boxSink .3s cubic-bezier(.4,0,.7,1) both; }
@keyframes modalOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes boxSink{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:translateY(20px) scale(.985); }
}
/* карта выезжает шторкой на любой ширине — и уходит тоже вниз, а не тает */
#mapModal.closing .modal-box{ animation:sheetDown .3s cubic-bezier(.4,0,.7,1) both; }
@keyframes sheetDown{ from{ transform:none; } to{ transform:translateY(100%); } }
/* overflow:visible — иначе бутылка обрежется по верхней кромке окна.
   Прокрутку длинного состава берёт на себя правая колонка. */
.modal-box{
  background:var(--white); border-radius:0; max-width:940px; width:100%;
  overflow:visible; display:grid; grid-template-columns: .85fr 1.15fr;
  box-shadow:var(--shadow-lg); animation:rise .35s cubic-bezier(.2,.8,.3,1) both; position:relative;
}
/* Прокрутка только по вертикали. Прежнее overflow:auto включало и
   горизонтальную полосу: длинная подпись кнопки или неразрывное слово в
   составе вылезали за колонку и добавляли вторую полосу внизу. */
.modal-content, .modal-form{
  max-height:calc(100vh  - var(--pad-top) - var(--pad-bottom));
  max-height:calc(100dvh - var(--pad-top) - var(--pad-bottom));
  overflow-x:hidden; overflow-y:auto;
  border-radius:0;
}
/* Причина переполнения по ширине, а не только его симптом: у кнопок стоит
   white-space:nowrap, и в узкой колонке окна подпись не переносилась. */
.modal .btn{ white-space:normal; }
.spec dd, .modal-desc{ overflow-wrap:anywhere; }

/* ---------- тонкая полоса прокрутки внутри окон ----------
   Системная в Windows занимает 17px и режет колонку. Firefox понимает
   scrollbar-width, движки на WebKit и Blink — псевдоэлементы, поэтому
   заданы оба набора. */
.modal-content, .modal-form{
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.24) transparent;
}
.modal-content::-webkit-scrollbar,
.modal-form::-webkit-scrollbar{ width:6px; height:6px; }
.modal-content::-webkit-scrollbar-track,
.modal-form::-webkit-scrollbar-track{ background:transparent; }
.modal-content::-webkit-scrollbar-thumb,
.modal-form::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.22); border-radius:999px;
}
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-form::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.4); }

/* окно подтверждения осталось красным — тёмный ползунок на нём не виден */
#okModal .modal-box{ scrollbar-color:rgba(255,255,255,.34) transparent; }
#okModal .modal-box::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); }
#okModal .modal-box::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.52); }
@keyframes rise{ from{ opacity:0; transform:translateY(28px) scale(.97);} to{ opacity:1; transform:none;} }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%;
  border:0; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); display:grid; place-items:center;
  color:var(--ink); box-shadow:var(--shadow-sm); transition:.2s;
}
.modal-close:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
.modal-img{
  position:relative; border-radius:0;
  background:var(--card-bg);
  /* на невысоких экранах жёсткие 340px тянули окно за нижнюю кромку —
     отдаём меньшее из двух значений */
  display:grid; place-items:center; padding:40px 26px 24px; min-height:min(340px, 40vh);
}
/* Фото-подложка по вкусу. Если файла нет — слой пустой и виден кремовый градиент. */
.modal-bg{
  position:absolute; inset:0; z-index:0; display:none; overflow:hidden;
  border-radius:inherit;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.modal-bg.on{ display:block; animation:fade .4s ease both; }
.modal-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.52) 100%);
}
/* Обёртка нужна, чтобы левитация не затирала базовый transform картинки:
   сдвиг и наклон живут на <img>, покачивание — на родителе. */
.bottle-float{
  position:relative; z-index:1;
  animation:levitate 5.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes levitate{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-18px); }
}
/* height, а не max-height: исходники бутылок ~404px, max-height их не увеличит.
   transform, а не margin: сдвиг визуальный и не ломает центрирование в гриде. */
.bottle-float .bottle-main{
  display:block;
  height:min(470px, 50vh); width:auto; max-height:none;
  transform:translateY(-36px);            /* бутылка стоит ровно, только приподнята */
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.28));
}
.modal-content{ padding:clamp(26px,3vw,42px); }
.modal-content .card-cat{ margin-bottom:10px; display:block; }
.modal-content h3{ font-size:clamp(24px,2.5vw,32px); margin-bottom:14px; }
.modal-desc{ font-size:16.5px; color:var(--ink-soft); margin-bottom:26px; }
.spec{ border-top:1px solid var(--line); padding:16px 0; display:grid; grid-template-columns:135px 1fr; gap:18px; }
.spec dt{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.spec dd{ margin:0; font-size:15.5px; color:var(--text); }
.modal .btn{ margin-top:26px; width:100%; }
/* «Запросить цену на позицию» — чёрная, без скруглений */
#mCta{ border-radius:0; background:#000; color:#fff; box-shadow:none; }
#mCta:hover{ background:#242424; transform:none; box-shadow:none; }

/* ---------- попап с формой заявки: белое полотно, поля без скруглений ----------
   Поля живут на базовых стилях формы, здесь остаётся только то, чем окно от
   них отличается: прямые углы вместо скруглений и чёрная кнопка. */
#formModal .modal-box{ background:var(--white); }
.modal-form{ color:var(--text); }
.modal-form .card-cat{ color:var(--muted); }
.modal-form h3{ color:#040404; -webkit-text-fill-color:#040404; background-image:none; }
.modal-form .modal-desc{ color:var(--ink-soft); }
.modal-form .field input,
.modal-form .field select,
.modal-form .field textarea{ border-radius:0; }
/* обводка фокуса под фирменный красный: зелёная из базовых стилей осталась
   от первой версии палитры и на этом окне выглядела чужой */
.modal-form .field input:focus,
.modal-form .field select:focus,
.modal-form .field textarea:focus{
  border-color:rgba(123,4,3,.55);
  box-shadow:0 0 0 4px rgba(123,4,3,.10);
}
.modal-form .consent input{ accent-color:#7b0403; }
.modal-form .btn{
  border-radius:0; background:#000; color:#fff; box-shadow:none;
}
.modal-form .btn:hover{ background:#1c1c1c; transform:none; box-shadow:none; }
.modal-form .form-ok{ border-radius:0; }
#formModal .modal-close{ background:rgba(0,0,0,.06); color:var(--ink); }
#formModal .modal-close:hover{ background:var(--ink); color:#fff; }

.modal-box.single{ grid-template-columns:1fr; max-width:620px; }

/* ---------- форма в окне: плотная сборка ----------
   Семь полей с прежними отступами давали больше 700px высоты — окно упиралось
   в экран ноутбука и начинало прокручиваться. Ужато всё сразу: поля ближе
   друг к другу, подписи мельче, поле комментария ниже. Правила ограничены
   .modal-form, поэтому формы вне окон остаются в прежних пропорциях. */
.modal-form{ padding:clamp(24px, 2.4vw, 34px); }
.modal-form .card-cat{ display:block; margin-bottom:6px; }
.modal-form h3{ font-size:clamp(21px, 2vw, 26px); margin-bottom:8px; }
.modal-form .modal-desc{ font-size:14.5px; line-height:1.45; margin-bottom:18px; }

.modal-form .field{ margin-bottom:11px; }
.modal-form .field-row{ gap:11px; }
.modal-form .field label{ font-size:12.5px; margin-bottom:5px; }
.modal-form .field input,
.modal-form .field select,
.modal-form .field textarea{ padding:10px 13px; font-size:14.5px; }
/* комментарий не обязателен — под него хватает двух строк, а растянуть
   поле можно уголком: resize:vertical остаётся */
.modal-form .field textarea{ min-height:62px; }
.modal-form .consent{ font-size:12.5px; line-height:1.4; margin:2px 0 14px; }
.modal-form .consent input{ width:16px; height:16px; margin-top:1px; }
.modal-form .btn{ height:48px; padding:0; margin-top:0; font-size:15px; }

/* ============================ ЭТАП 2 ============================ */
.stage2{ background:var(--cream); }
.stage2-box{
  background:linear-gradient(145deg, var(--ink) 0%, #123024 100%); color:#fff;
  border-radius:calc(var(--radius) + 10px); padding:clamp(32px,4.4vw,64px);
  display:grid; grid-template-columns: 1fr .95fr; gap:clamp(28px,3.4vw,56px); align-items:center;
  position:relative; overflow:hidden;
}
.stage2-box::before{
  content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,165,92,.26), transparent 68%);
}
.stage2-box > *{ position:relative; z-index:1; }
.stage2-box h2{ color:#fff; }
.stage2-box .lead{ color:rgba(255,255,255,.68); margin-top:16px; }
.soon{
  display:inline-block; background:rgba(201,165,92,.18); border:1px solid rgba(201,165,92,.45);
  color:var(--gold-soft); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 13px; border-radius:100px; margin-bottom:20px;
}
.lk-mock{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:22px; backdrop-filter:blur(4px);
}
.lk-row{
  display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14.5px; color:rgba(255,255,255,.82);
}
.lk-row:last-child{ border-bottom:0; }
.lk-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.lk-row b{ margin-left:auto; font-weight:600; font-size:13px; color:rgba(255,255,255,.62); }

/* ============================ ЗАЯВКА ============================ */
.cta-form{ background:var(--white); }
.form-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,70px); align-items:center; }

/* CTA-карточка секции «Заявка» — сама форма живёт в попапе */
.request-card{
  background:var(--cream); border:1px solid var(--line); text-align:center;
  border-radius:calc(var(--radius) + 4px); padding:clamp(28px,3.4vw,46px);
  box-shadow:var(--shadow-sm);
}
.request-card b{ display:block; font-size:clamp(20px,2vw,26px); letter-spacing:-.015em; color:var(--ink); }
.request-card p{ margin:13px auto 26px; color:var(--muted); font-size:16px; max-width:36ch; }
.request-card .btn{ width:100%; max-width:340px; }
.request-or{ position:relative; margin:30px 0 16px; }
.request-or::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); }
.request-or span{ position:relative; background:var(--cream); padding:0 14px; font-size:13px; color:var(--muted); }
.request-contact{ display:block; font-size:17px; font-weight:600; color:var(--green); padding:5px 0; transition:.2s; }
.request-contact:hover{ color:var(--green-600); }
.form-side ul{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:16px; }
.form-side li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; color:var(--ink-soft); }
.form-side li svg{ flex:none; margin-top:3px; color:var(--green-600); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.field label span{ color:#c0392b; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--white); font:inherit; font-size:15.5px; color:var(--text); transition:.2s;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--green-300); box-shadow:0 0 0 4px rgba(74,165,133,.15);
}
.consent{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted); margin:6px 0 20px; line-height:1.5; }
.consent input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--green); }
form .btn{ width:100%; }
.form-ok{
  display:none; margin-top:18px; padding:15px 18px; border-radius:var(--radius-sm);
  background:rgba(74,165,133,.14); border:1px solid rgba(74,165,133,.4);
  color:var(--green); font-size:14.5px; font-weight:600;
}
.form-ok.show{ display:block; animation:fadeUp .35s ease both; }

/* ---------- окно «заявка принята» ----------
   Фирменный красный, как у окна с формой: подтверждение приходит на место
   формы, и смена цвета читалась бы как переход на другую страницу. */
.ok-box{ max-width:452px; text-align:center; }
#okModal .modal-box{ background:#7b0403; color:#fff; }
#okModal .modal-close{ background:rgba(255,255,255,.14); color:#fff; }
#okModal .modal-close:hover{ background:#fff; color:#7b0403; }
.ok-inner{ padding:clamp(40px, 5vw, 56px) clamp(24px, 4vw, 44px) clamp(28px, 3.6vw, 40px); }

.ok-mark{ display:block; width:66px; height:66px; margin:0 auto clamp(20px, 2.4vw, 28px); color:#fff; }
.ok-mark svg{ width:100%; height:100%; display:block; }
/* Длины штрихов посчитаны под эту фигуру: обводка — длина окружности при
   r=23 (2πr ≈ 144,5), птичка — сумма двух отрезков пути (≈ 31,5). Меняете
   радиус или путь — пересчитайте, иначе линия не дорисуется до конца. */
.ok-ring{ stroke-dasharray:145; stroke-dashoffset:145; }
.ok-tick{ stroke-dasharray:32;  stroke-dashoffset:32; }
.modal.open .ok-ring{ animation:okDraw .75s cubic-bezier(.16,1,.3,1) .12s forwards; }
.modal.open .ok-tick{ animation:okDraw .42s cubic-bezier(.16,1,.3,1) .6s forwards; }
@keyframes okDraw{ to{ stroke-dashoffset:0; } }

.ok-inner h3{ font-size:clamp(24px, 2.6vw, 31px); margin:0 0 12px; line-height:1.15; color:#fff; }
.ok-text{ font-size:clamp(15px, 1.2vw, 16.5px); line-height:1.5; color:rgba(255,255,255,.82); margin:0; }
.ok-note{
  margin:clamp(18px, 2vw, 24px) 0 0; padding-top:clamp(16px, 1.8vw, 22px);
  border-top:1px solid rgba(255,255,255,.20);
  font-size:14px; color:rgba(255,255,255,.72);
}
.ok-note a{ color:#fff; font-weight:600; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.4); }
/* кнопка вывернута: на красном полотне белая плашка с тёмной подписью */
.ok-btn{
  width:100%; margin-top:clamp(20px, 2.4vw, 28px); justify-content:center;
  background:#fff; color:#1e1e1e;
}
.ok-btn:hover{ background:#f0e6e5; color:#7b0403; }

/* сообщение об ошибке отправки — та же плашка, но тревожного цвета */
.form-err{
  display:none; margin-top:14px; padding:15px 18px; border-radius:var(--radius-sm);
  background:rgba(192,57,43,.10); border:1px solid rgba(192,57,43,.45);
  color:#c0392b; font-size:14.5px; font-weight:600;
}
.form-err.show{ display:block; animation:fadeUp .35s ease both; }

/* Ловушка для ботов. Прятать через display:none нельзя — часть роботов такие
   поля пропускает; уводим за пределы экрана и убираем из фокуса. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ============================ КОНТАКТЫ ============================ */
.contacts{ background:var(--cream-2); }
.contacts-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,3vw,44px); align-items:stretch; }
.contacts-card{
  background:var(--white); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  padding:clamp(26px,3vw,42px); box-shadow:var(--shadow-sm);
}
.c-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.c-item:last-child{ border-bottom:0; padding-bottom:0; }
.c-item:first-child{ padding-top:0; }
.c-ico{
  width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(20,80,60,.09); color:var(--green);
}
.c-label{ font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.c-val{ font-size:17px; font-weight:600; color:var(--ink); line-height:1.5; }
.c-val a{ transition:.2s; display:block; }
.c-val a:hover{ color:var(--green-600); }
.map{
  border-radius:calc(var(--radius) + 4px); overflow:hidden; border:1px solid var(--line);
  min-height:440px; background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%23f2ede1'/><path d='M0 30h60M30 0v60' stroke='%23e2dccb' stroke-width='1'/></svg>");
  position:relative;
}
.map iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; position:relative; z-index:1; }
.map-fallback{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:8px;
  color:var(--muted); font-size:14.5px; padding:20px;
}

/* ============================ ПОДВАЛ ============================ */
.footer{ background:var(--ink); color:rgba(255,255,255,.62); padding:clamp(46px,5vw,70px) 0 30px; font-size:14.5px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer h4{ color:#fff; font-size:14px; letter-spacing:.11em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.footer a:hover{ color:var(--gold-soft); }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer .logo-txt strong{ color:#fff; }
.footer .logo-txt span{ color:rgba(255,255,255,.5); }
.footer-about{ margin-top:20px; max-width:38ch; line-height:1.65; }
.footer-bottom{ padding-top:26px; display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.42); }

/* появление секций */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================ АДАПТИВ ============================ */
@media (max-width:1080px){
  /* на мобильных прокручивается всё окно целиком, а не правая колонка */
  .modal{ padding:92px 16px 24px; align-content:start; overflow-y:auto; }
  .modal-content, .modal-form{ max-height:none; overflow:visible; }
  .products, .products.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr-inner{ justify-content:space-between; padding:0 16px; }
  .aud-stage{ grid-template-columns:1fr; }
  .stage2-box, .form-grid, .contacts-grid{ grid-template-columns:1fr; }
  .modal-box{ grid-template-columns:1fr; }
  .modal-img{ min-height:230px; padding:30px 20px 18px; }
  .bottle-float .bottle-main{ height:min(320px, 36vh); transform:translateY(-24px); }
}
@media (max-width:820px){
  .products, .products.cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); gap:26px 8px; }
  .trust-item:nth-child(3){ border-left:0; }
  .reals, .adv-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .card-img{ height:320px; padding:62px 14px 31px; }
  .card-body{ padding:14px 15px 18px; }
  .card-body h3{ font-size:16px; }
  .field-row{ grid-template-columns:1fr; }
  .spec{ grid-template-columns:1fr; gap:6px; }
  .footer-top{ grid-template-columns:1fr; }
  .catalog-note{ flex-direction:column; align-items:flex-start; }
}
/* ============================ АДАПТИВ: ДОРАБОТКА ============================
   Блок идёт последним намеренно — правила здесь уточняют предыдущие брейкпоинты
   и должны выигрывать при равной специфичности. */

/* ---------- планшет: карточка ниже, попап ближе к краям ---------- */
@media (max-width:1080px){
  .card-img{ height:clamp(360px, 42vw, 470px); padding:82px 14px 40px; }
  .card-body h3{ font-size:19px; }
  .catalog .sec-head h1,
  .catalog .sec-head h2{ font-size:clamp(28px, 4.6vw, 46px); }
}

/* ---------- фильтры: вместо переноса — горизонтальная прокрутка ----------
   Пять категорий в две строки съедали пол-экрана, а прилипшая полоса
   становилась выше шапки. Полоса прокрутки скрыта, жест остаётся. */
@media (max-width:700px){
  .filters{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; gap:22px;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ white-space:nowrap; flex:none; }
  .catalog-center .filters{ justify-content:flex-start; }
}

/* ---------- промо: кадры сняты с расчётом на 16:9 ----------
   На вертикальном экране центральное кадрирование срезает героя, поэтому
   точку фокуса сдвигаем вправо, где он и находится. */
@media (max-width:760px){
  .promo-img{ object-position:62% center; }
  .promo-copy h2{ font-size:clamp(26px, 7.4vw, 40px); }
  .promo-copy p{ font-size:15px; }
}

/* ---------- телефон ---------- */
@media (max-width:560px){
  .card-img{ height:300px; padding:56px 12px 28px; }
  .card-body{ padding:2px 14px 22px; }
  .card-body p{ font-size:13px; }
  .hero-text{ font-size:19px; line-height:1.3; }
  .promo-seq{ height:450vh; }
}

/* ---------- очень узкие экраны ----------
   Две колонки сохраняем до самого низа, как на референсе: одна колонка
   растягивает каталог в бесконечную ленту. Вместо этого ужимаем плитку. */
@media (max-width:400px){
  .products, .products.cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .card-img{ height:240px; padding:42px 8px 20px; }
  .card-body{ padding:2px 10px 18px; }
  .card-body h3{ font-size:15px; margin-bottom:7px; }
  .card-body p{ font-size:12px; line-height:1.4; }
  .card-vol{ font-size:10.5px; padding:4px 8px; top:8px; right:8px; }
}

/* ---------- альбомная ориентация на телефоне ----------
   Высота меньше 560px: логотип в 88vw перекрывал бы весь экран,
   а текст промо не помещался бы под заголовком. */
@media (orientation:landscape) and (max-height:560px){
  .hero-logo{ top:15vh; width:min(420px, 44vw); }
  .hero{ padding-bottom:22px; }
  .hero-btn{ width:252px; }
  .promo-copy{ bottom:22px; }
  .promo-copy h2{ font-size:clamp(22px, 3.4vw, 34px); }
  .promo-copy p{ font-size:13px; margin-top:14px; }
}

/* ---------- устройства без наведения ----------
   На тач-экранах :hover «залипает» после тапа: карточка остаётся поднятой,
   а пункт меню — прокрученным. Отключаем эти состояния. */
@media (hover:none){
  .card:hover{ transform:none; box-shadow:none; }
  .card:hover .card-img img{ transform:none; }
  .nav a:hover .lr-in { transform:none; }
  .nav a:hover .lr-out{ transform:translateY(105%); }
  .btn:hover{ transform:none; }
  .hero-btn:hover{ background:#d9d9d9; }
}

/* ================= РЕВИЗИЯ АДАПТИВА =================
   Блок последний в файле: правила здесь уточняют предыдущие брейкпоинты
   и должны выигрывать при равной специфичности. */

/* ---------- шапка: бургер слева, логотип по центру, заявка справа ----------
   Сетка из трёх колонок, а не space-between: только она держит логотип ровно
   по центру независимо от ширины бургера и кнопки. */
@media (max-width:1080px){
  /* Логотип выведен из потока и центрируется по вьюпорту, а бургер и кнопка
     разведены по краям. Сетка здесь не годится: бургер в разметке идёт
     последним, и раскладка зависела бы от порядка элементов. */
  .hdr-inner{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px;
  }
  .nav-left{ display:none; }
  .burger{ display:flex; order:1; flex:none; }
  .logo, .logo-slot{
    order:2; position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%); margin:0;
  }
  .nav.nav-right{ display:flex; order:3; flex:none; gap:0; }
  .nav-right a:not(.nav-cta){ display:none; }
}

/* Короткие подписи на мобильных: с ними кнопка и стрелки помещаются в одну
   строку и занимают всю ширину контентной области. */
.lbl-short{ display:none; }
@media (max-width:700px){
  .lbl-full{ display:none; }
  .lbl-short{ display:inline; }

  .hero-actions{ width:100%; }
  .hero-btn{ flex:1 1 auto; width:auto; min-width:0; }
  .hero-arrow{ flex:none; }
  .foot-btn{ width:100%; }

  /* на мобильных текст первого экрана по центру */
  .hero-bottom{ text-align:center; }
  .hero-text{ margin-inline:auto; }
  .hero-fact{ justify-content:center; }
  .hero-fact-mask{ margin-inline:auto; }
}

@media (max-width:430px){
  .hdr-inner{ padding:0 12px; }
}

/* Крупный логотип первого экрана зафиксирован на слое 101 и перекрывал бы
   открытое меню. Поднимаем полотно меню выше и прячем логотип, пока оно открыто
   (логотип идёт в разметке следом за меню — отсюда «~»). */
@media (max-width:1080px){
  .mobile-menu{ z-index:102; }
  .mobile-menu.open ~ .hero-logo{ opacity:0; pointer-events:none; }
}

/* пока меню открыто, шапка того же красного цвета — вместе они читаются
   как одно полотно, а не как полоса поверх полотна */
.header.menu-open{ background:#7b0403; border-bottom-color:transparent; box-shadow:none; }
.header.menu-open .nav a,
.header.menu-open .nav-cta{ color:#fff; }
.header.menu-open .burger span{ background:#fff; }
/* логотип в шапке каталога тёмный — на красном выводим его в белый */
.header.menu-open .logo-full,
.header.on-hero .logo-full{ filter:brightness(0) invert(1); }

/* Карта и форма заявки на мобильных — шторки снизу во всю ширину.
   Общее правило для попапов прижимает содержимое к верху с отступом 92px,
   поэтому здесь его отменяем. */
@media (max-width:1080px){
  #mapModal, #formModal, #okModal{
    padding:0; align-content:end; place-items:end stretch;
    overflow:hidden;
  }
  #mapModal .modal-box{
    height:50vh; max-height:none; max-width:none; width:100%;
    overflow:hidden;
  }

  #formModal .modal-box, #modal .modal-box, #okModal .modal-box{
    width:100%; max-width:none; max-height:92vh;
    border-radius:0; overflow:hidden; animation:none;
  }
  #formModal.open .modal-box,
  #modal.open .modal-box,
  #okModal.open .modal-box{ animation:sheetUp .55s cubic-bezier(.16,1,.3,1) both; }
  /* шторка и уходит шторкой — вниз за кромку, а не растворяется на месте */
  #formModal.closing .modal-box,
  #modal.closing .modal-box,
  #okModal.closing .modal-box{ animation:sheetDown .3s cubic-bezier(.4,0,.7,1) both; }

  /* подтверждение показывается сразу после шторки с формой — держим его
     такой же компактной высоты, чтобы не подпрыгивал весь экран */
  #okModal .ok-inner{ padding:34px 22px 26px; }
  #okModal .ok-mark{ width:56px; height:56px; margin-bottom:16px; }

  /* карточка товара — та же шторка, но компактнее: бутылка меньше,
     подписи и характеристики плотнее, длинный состав прокручивается */
  #modal{ padding:0; align-content:end; place-items:end stretch; overflow:hidden; }
  #modal .modal-box{ display:flex; flex-direction:column; }
  .modal-img{ min-height:0; height:34vh; padding:16px 16px 10px; flex:none; }
  .bottle-float .bottle-main{ height:100%; transform:translateY(-14px); }
  .modal-content{
    max-height:none; overflow-y:auto; padding:18px 18px 24px; flex:1 1 auto;
  }
  .modal-content h3{ font-size:22px; margin-bottom:8px; }
  .modal-content .card-cat{ margin-bottom:6px; }
  .modal-desc{ font-size:14px; line-height:1.4; margin-bottom:16px; }
  .spec{ padding:11px 0; gap:3px; }
  .spec dt{ font-size:11px; letter-spacing:.08em; }
  .spec dd{ font-size:14px; line-height:1.4; }
  #mCta{ margin-top:16px; height:48px; padding:0; }

  /* шторка не должна упираться в верх экрана — ужимаем ещё на пару пунктов
     против настольной сборки */
  .modal-form{ max-height:92vh; overflow-y:auto; padding:20px 18px 24px; }
  .modal-form h3{ font-size:21px; }
  .modal-form .modal-desc{ font-size:13.5px; line-height:1.4; margin-bottom:15px; }
  .modal-form .field{ margin-bottom:9px; }
  .modal-form .field-row{ gap:9px; }
  .modal-form .field input,
  .modal-form .field select,
  .modal-form .field textarea{ padding:10px 12px; font-size:15px; }
  .modal-form .field textarea{ min-height:56px; }
  .modal-form .consent{ font-size:12px; margin:2px 0 12px; }
  .modal-form .btn{ height:46px; }
  .modal-form .form-ok{ font-size:13px; padding:12px 14px; }
}

/* ---------- вычитка остального ---------- */
@media (max-width:820px){
  .brand-foot{ margin-top:clamp(70px, 14vw, 150px); }
  .foot-logo{ width:100%; }
  .hero-text{ width:100%; }
}
@media (max-width:560px){
  .hero-fact-text{ font-size:15px; }
  .hero-star{ width:14px; height:14px; }
  .foot-about{ font-size:16px; }
  .foot-col li{ font-size:15px; }
  .brand-item p{ font-size:14px; }
  .brand-lead{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}