/*
Theme Name:   Do House
Theme URI:    https://dohouse.ru/
Author:       Do House
Description:  Лендинг производителя мягких стеновых панелей. Собственная тема без конструкторов и сторонних плагинов: свои типы записей, настройки в Кастомайзере, микроразметка Schema.org, обработка заявок через AJAX.
Version:      1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dohouse
Tags:         one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   Do House — мягкие стеновые панели
   Прототип лендинга. Фирменные цвета: белый + #C6050A (снят с логотипа).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ШРИФТЫ
   С серверов Google ничего не тянем — из России отдаются медленно.
   Файлы .woff2 лежат рядом, в assets/fonts/.
   Nunito уже там, Onest ещё нет: положите Onest-Variable.woff2 туда же,
   и основной текст подхватит его сам. Пока файла нет, текст идёт системным
   шрифтом из стека ниже — это не ошибка, так и задумано.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Onest";
  src:url("assets/fonts/Onest-Variable.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}

/* Nunito — заголовок первого экрана. Скруглённые окончания штрихов: панели
   мягкие, и главная строка про них должна выглядеть так же. Файл лежит рядом,
   с серверов Google ничего не тянется. Файла два, потому что кириллица и
   латиница порезаны по unicode-range — браузер скачает только нужную часть. */
@font-face{
  font-family:"Nunito";
  src:url("assets/fonts/Nunito-Variable-cyrillic.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Nunito";
  src:url("assets/fonts/Nunito-Variable-latin.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root{
  /* фирменные */
  --red:#C6050A;
  --red-dark:#A00408;
  --red-soft:#FBEDED;
  /* На чёрном #C6050A даёт контраст всего 3.1:1 и выглядит мутно.
     Тот же тон (H 358°), поднятая светлота — 4.3:1, проходит AA. */
  --red-on-dark:#ED1D23;

  /* нейтральные */
  --ink:#151110;
  --ink-2:#55504D;
  --ink-3:#847E79;
  --paper:#FFFFFF;
  --paper-2:#F8F5F2;
  --paper-3:#F0EBE6;
  --line:#E7E1DB;
  --line-2:#D6CFC7;

  /* типографика */
  --font:"Onest","Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Мягкий, скруглённый — пока только для H1 первого экрана.
     Понадобится на остальных заголовках — допишите var(--font-display) в .section__title. */
  --font-display:"Nunito","Nunito Sans","Comfortaa",var(--font);

  /* размеры */
  --container:1240px;
  --gutter:clamp(18px,4vw,44px);
  --section-y:clamp(64px,8vw,116px);
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;

  --shadow-1:0 1px 2px rgba(21,17,16,.05),0 4px 14px rgba(21,17,16,.05);
  --shadow-2:0 8px 20px rgba(21,17,16,.08),0 24px 56px rgba(21,17,16,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   БАЗА
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--red);color:#fff}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* --------------------------------------------------------------------------
   ЛЕЙАУТ
   -------------------------------------------------------------------------- */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
.container--narrow{max-width:860px}

.section{padding-block:var(--section-y)}
.section--soft{background:var(--paper-2)}

.section__head{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.section__title{
  font-size:clamp(28px,3.6vw,46px);
  font-weight:800;line-height:1.08;letter-spacing:-.028em;
  margin-bottom:16px;
}
.section__lead{font-size:clamp(15px,1.2vw,17.5px);color:var(--ink-2);max-width:64ch}
.section__foot{
  margin-top:clamp(28px,3vw,40px);
  color:var(--ink-2);font-size:15.5px;
  padding-top:22px;border-top:1px solid var(--line);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red);border-radius:2px}

.accent{color:var(--red)}

.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--red);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.linkbtn:hover{text-decoration-thickness:2px}

/* --------------------------------------------------------------------------
   КНОПКИ
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.btn:active{transform:translateY(1px)}

.btn--primary{--btn-bg:var(--red);--btn-fg:#fff;--btn-bd:var(--red);box-shadow:0 4px 14px rgba(198,5,10,.24)}
.btn--primary:hover{--btn-bg:var(--red-dark);--btn-bd:var(--red-dark);box-shadow:0 6px 20px rgba(198,5,10,.32)}

.btn--outline{--btn-bd:var(--line-2);--btn-fg:var(--ink)}
.btn--outline:hover{--btn-bd:var(--red);--btn-fg:var(--red);background:var(--red-soft)}

.btn--ghost{--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bd:var(--ink);background:var(--paper-2)}

.btn--sm{padding:10px 18px;font-size:14px}
.btn--lg{padding:16px 30px;font-size:16px}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   ЛОГОТИП
   -------------------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.logo__mark{color:var(--red);transition:transform .3s var(--ease)}
.logo:hover .logo__mark{transform:translateY(-2px)}
.logo__word{
  font-weight:800;font-size:19px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink);line-height:1;
}
.logo__word b{font-weight:800}
.logo--light .logo__word{color:#fff}

/* --------------------------------------------------------------------------
   ШАПКА
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(21,17,16,.07)}
.site-header__inner{display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);height:76px}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav__list a{
  position:relative;font-size:15px;font-weight:500;color:var(--ink-2);
  padding-block:6px;white-space:nowrap;transition:color .18s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav__list a:hover{color:var(--ink)}
.nav__list a:hover::after,.nav__list a.is-active::after{transform:scaleX(1)}
.nav__list a.is-active{color:var(--ink);font-weight:600}

.site-header__actions{display:flex;align-items:center;gap:14px;margin-left:auto}

.header-phone{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.header-phone__label{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.header-phone__num{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.header-phone:hover .header-phone__num{color:var(--red)}

.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line);
  background:none;border-radius:11px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.22s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   ГЛАВНЫЙ ЭКРАН
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  display:flex;align-items:center;
  min-height:clamp(520px,76vh,760px);
  padding-block:clamp(52px,6.5vw,92px);
  background:var(--ink);color:#fff;
}

/* Фон — карусель снимков: лежат стопкой и сменяются наплывом.
   Первый кадр стоит в разметке, остальные подставляет скрипт после загрузки
   страницы, чтобы тяжёлые фотографии не задерживали отрисовку первого экрана. */
.hero__bg{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease);
}
.hero__slide.is-on{opacity:1}

/* Затемнение: слева плотное — под текст; снизу уходит в цвет полосы с цифрами,
   чтобы стык двух секций не читался линией.
   Плотность снижена примерно на треть от первой версии: на снимках заказчика
   видна фактура ткани и швы, и под прежней вуалью они пропадали. Левый край
   держим на .65 — этого хватает белому тексту с тенью, ниже contrast падает. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(16,12,11,.65) 0%,rgba(16,12,11,.60) 32%,rgba(16,12,11,.32) 62%,rgba(16,12,11,.17) 100%),
    linear-gradient(180deg,rgba(16,12,11,.39) 0%,rgba(16,12,11,0) 28%,rgba(16,12,11,0) 64%,var(--ink) 100%);
}

.hero__inner{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,3vw,48px);
}
/* Затенение под текстом намеренно негустое, чтобы фактура ткани на снимке
   осталась видна. Разница добирается тенью у самого текста: она держит
   контраст на светлых кадрах и при этом не гасит фотографию целиком.
   У заголовка своя тень, помягче, — она перебивает эту. */
.hero__text{max-width:640px;text-shadow:0 1px 12px rgba(16,12,11,.6)}

.hero .eyebrow{color:var(--red-on-dark)}
.hero .eyebrow::before{background:var(--red-on-dark)}

.hero__title{
  /* колонка под текст ~640px — кегль подобран так, чтобы «Мягкие стеновые»
     и «панели на заказ» вставали по одной строке и кнопка не уходила за экран.
     Nunito шире и круглее основного шрифта, поэтому кегль на пункт меньше,
     а трекинг не такой тугой — иначе скруглённые буквы слипаются. */
  font-family:var(--font-display);
  font-size:clamp(31px,4.4vw,54px);
  font-weight:800;line-height:1.06;letter-spacing:-.02em;
  margin-bottom:22px;text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.hero__title .accent{white-space:nowrap;color:var(--red-on-dark)}
.hero__title-city{
  display:block;margin-top:.14em;
  font-size:.5em;font-weight:600;letter-spacing:-.02em;
  color:rgba(255,255,255,.74);
}
.hero__lead{
  font-size:clamp(16px,1.35vw,18.5px);color:rgba(255,255,255,.82);
  max-width:52ch;margin-bottom:26px;
}

.hero__usp{display:grid;gap:11px;margin-bottom:32px}
.hero__usp li{position:relative;padding-left:30px;font-size:15.5px;font-weight:500}
.hero__usp li::before{
  content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;
  border-radius:50%;background:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.2 8.4 18.8 7z'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero .btn--ghost{--btn-bd:rgba(255,255,255,.4);--btn-fg:#fff}
.hero .btn--ghost:hover{--btn-bd:#fff;background:rgba(255,255,255,.12)}
.hero__note{font-size:13.5px;color:rgba(255,255,255,.62)}

/* Правый край первого экрана: плашка со стажем и точки переключения фона. */
.hero__side{display:flex;flex-direction:column;align-items:stretch;gap:14px;flex-shrink:0}
.hero__badge{
  display:flex;align-items:center;gap:12px;margin:0;
  padding:15px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero__badge-num{font-size:38px;font-weight:800;color:var(--red-on-dark);line-height:1;letter-spacing:-.04em}
.hero__badge-txt{font-size:13px;font-weight:600;line-height:1.25;color:rgba(255,255,255,.84)}

/* Полоски идут во всю ширину плашки: ширину задаёт плашка, а отрезки делят
   её поровну (flex:1), сколько бы кадров ни выбрали в Кастомайзере.
   Активный кадр показан цветом, а не длиной — длины теперь равные. */
.hero__dots{display:flex;gap:8px}
.hero__dot{
  flex:1 1 0;min-width:0;height:4px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.32);
  transition:background .22s var(--ease);
}
.hero__dot:hover{background:rgba(255,255,255,.62)}
.hero__dot.is-on{background:var(--red-on-dark)}

/* --------------------------------------------------------------------------
   ЦИФРЫ
   -------------------------------------------------------------------------- */
.stats{background:var(--ink);color:#fff}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:clamp(30px,3.4vw,46px);
}
.stat{padding-inline:clamp(10px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.13)}
.stat:first-child{border-left:0;padding-left:0}
.stat__num{
  display:block;font-size:clamp(26px,3vw,40px);font-weight:800;
  letter-spacing:-.035em;line-height:1.05;margin-bottom:6px;
}
.stat:nth-child(odd) .stat__num{color:#fff}
.stat:nth-child(even) .stat__num{color:#fff}
.stat__lbl{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.4;display:block}

/* --------------------------------------------------------------------------
   КАРТОЧКИ ТОВАРОВ
   Медиа — горизонтальная 4:3, как в образце заказчика (852×634).
   -------------------------------------------------------------------------- */
.cards{
  display:grid;gap:clamp(18px,2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-2)}

.card__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);position:relative}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__media::after{
  content:"";position:absolute;inset:auto 12px 12px auto;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151110' d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z'/%3E%3C/svg%3E") center/17px no-repeat;
  opacity:0;transform:translateY(6px);transition:.25s var(--ease);
}
.card:hover .card__media::after{opacity:1;transform:none}

.card__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.card__title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.card__desc{font-size:14.5px;color:var(--ink-2);margin-bottom:14px}

.card__specs{display:grid;gap:6px;margin-bottom:18px}
.card__specs li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink-3)}
.card__specs li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--red);opacity:.55;
}

.card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
}
.price{font-size:14px;color:var(--ink-3);white-space:nowrap}
.price b{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.price span{font-size:13.5px}
.price--ask{
  font-size:14.5px;font-weight:600;color:var(--red);
  background:var(--red-soft);padding:6px 12px;border-radius:999px;
}

/* --------------------------------------------------------------------------
   ТКАНИ
   -------------------------------------------------------------------------- */
.swatches{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(3,minmax(0,1fr))}
.swatch{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.swatch:hover{border-color:var(--line-2);transform:translateY(-3px)}
/* Полоса образца над названием ткани. Два вида с одинаковой геометрией:
   img — настоящий снимок ткани, span — рисованный запасной вариант по цвету
   из админки (пока фотографии образца нет). Рамку у снимка даёт outline:
   inset-тень браузер рисует под содержимым <img> и её просто не видно. */
.swatch__chip{
  display:block;width:100%;height:96px;border-radius:var(--r-sm);margin-bottom:16px;
}
img.swatch__chip{
  object-fit:cover;
  outline:1px solid rgba(0,0,0,.10);outline-offset:-1px;
}
span.swatch__chip{
  background-color:var(--c);
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.10) 0 2px,transparent 2px 5px),
    linear-gradient(160deg,rgba(255,255,255,.22),transparent 55%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),inset 0 -14px 26px rgba(0,0,0,.16);
}
.swatch__name{font-size:17px;font-weight:700;letter-spacing:-.015em;margin-bottom:7px}
.swatch__desc{font-size:14px;color:var(--ink-2);margin-bottom:10px}
.swatch__meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}

/* --------------------------------------------------------------------------
   ЭТАПЫ
   -------------------------------------------------------------------------- */
.steps{display:grid;gap:clamp(20px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.step{
  display:flex;flex-direction:column;
  padding-top:20px;border-top:2px solid var(--line);
}
.step:first-child{border-top-color:var(--red)}
.step__num{
  display:block;font-size:13px;font-weight:800;letter-spacing:.12em;
  color:var(--red);margin-bottom:12px;
}
.step__title{font-size:17.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.step__desc{font-size:14.5px;color:var(--ink-2);margin-bottom:18px}
.step__time{
  /* прижимаем к низу колонки: описания разной длины, иначе плашки пляшут */
  align-self:flex-start;margin-top:auto;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;
}
.section--soft .step__time{background:var(--paper)}

/* --------------------------------------------------------------------------
   ГАЛЕРЕЯ РАБОТ
   -------------------------------------------------------------------------- */
.gallery{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gallery__item{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r);background:var(--paper-3);
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,8,8,.72),rgba(10,8,8,.10) 46%,transparent 70%);
  opacity:.72;transition:opacity .3s var(--ease);
}
.gallery__item:hover::before{opacity:.92}
.gallery__cap{
  position:absolute;z-index:2;left:16px;right:16px;bottom:14px;
  color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* --------------------------------------------------------------------------
   ПРЕИМУЩЕСТВА
   -------------------------------------------------------------------------- */
.feats{display:grid;gap:clamp(22px,2.4vw,34px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.feat{padding-top:20px;border-top:2px solid var(--red)}
.feat__title{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.feat p{font-size:14.5px;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.reviews{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.review{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;
}
.review__stars{color:var(--red);letter-spacing:.16em;font-size:15px;margin-bottom:14px}
.review blockquote p{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.review figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.review figcaption b{font-size:15px;font-weight:700}
.review figcaption span{font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  position:relative;list-style:none;cursor:pointer;
  padding:22px 52px 22px 0;
  font-size:clamp(16px,1.35vw,18px);font-weight:600;letter-spacing:-.015em;
  transition:color .18s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--red)}
.faq__item summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:22px;height:22px;margin-top:-11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C6050A' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23C6050A' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/22px no-repeat;
  transition:transform .28s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(135deg)}
.faq__body{padding:0 40px 24px 0}
.faq__body p{font-size:15.5px;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   БЛОК ЗАЯВКИ
   -------------------------------------------------------------------------- */
.cta{background:var(--ink);color:#fff;padding-block:var(--section-y)}
.cta__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(30px,4vw,64px);align-items:start;
}
.cta__title{
  font-size:clamp(28px,3.4vw,44px);font-weight:800;
  line-height:1.06;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance;
}
.cta__title .accent{color:var(--red-on-dark)}
.cta__text > p{font-size:16.5px;color:rgba(255,255,255,.72);max-width:52ch;margin-bottom:24px}
.cta__list{display:grid;gap:10px;margin-bottom:28px}
.cta__list li{position:relative;padding-left:28px;font-size:15px;color:rgba(255,255,255,.88)}
.cta__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.2 8.4 18.8 7z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cta__msgs{display:flex;flex-wrap:wrap;gap:11px}

.msg-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:#fff;
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.msg-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
/* MAX — фирменный сине-фиолетовый градиент, тот же, что у круглой кнопки
   в плавающем блоке (.fab__btn--max), чтобы мессенджер узнавался по цвету. */
.msg-btn--max{background:linear-gradient(140deg,#8419FF 0%,#1591FF 55%,#00EAFF 100%)}
.msg-btn--wa{background:#25D366;color:#0B2B16}
.msg-btn--tg{background:#2AABEE}

/* --------------------------------------------------------------------------
   ФОРМЫ
   -------------------------------------------------------------------------- */
.form{
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--shadow-2);
}
.form__title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}

.field{display:block;margin-bottom:14px}
.field__lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field__lbl em{color:var(--red);font-style:normal}
.field__in{
  width:100%;padding:13px 15px;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:15.5px;transition:border-color .18s var(--ease),background .18s var(--ease);
  resize:vertical;
}
.field__in::placeholder{color:var(--ink-3);opacity:.8}
.field__in:focus{outline:none;border-color:var(--red);background:var(--paper)}
.field__in[aria-invalid="true"]{border-color:var(--red);background:var(--red-soft)}

/* поле-ловушка для ботов — скрыто от людей, видно роботам */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.consent{display:flex;align-items:flex-start;gap:10px;margin:16px 0 18px;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--red);flex-shrink:0}
.consent span{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.consent a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.form__note{margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center}
.form__status{margin-top:12px;font-size:14px;font-weight:600;text-align:center;min-height:1.4em}
.form__status.is-ok{color:#1B7F3B}
.form__status.is-err{color:var(--red)}

/* --------------------------------------------------------------------------
   КОНТАКТЫ
   -------------------------------------------------------------------------- */
.contacts{display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.contacts__h{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.contacts__h:not(:first-child){margin-top:28px}
.contacts__big{
  display:block;font-size:clamp(22px,2.4vw,29px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:5px;
}
.contacts__big:hover{color:var(--red)}
.contacts__sub{font-size:14.5px;color:var(--ink-2)}
.contacts__addr{font-size:16px;font-weight:600;margin-bottom:10px;line-height:1.45}
.contacts__link{font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.contacts__link:hover{color:var(--red)}
.contacts__msgs{display:flex;flex-wrap:wrap;gap:10px}

.map-stub{
  height:100%;min-height:250px;border-radius:var(--r);
  border:2px dashed var(--line-2);background:var(--paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:26px;color:var(--ink-3);
}
.map-stub svg{color:var(--red);opacity:.55}
.map-stub p{font-size:15px;font-weight:600;color:var(--ink-2)}
.map-stub span{font-size:12.5px;max-width:26ch}

/* --------------------------------------------------------------------------
   ПОДВАЛ
   -------------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(46px,5vw,70px) 30px}
.site-footer__inner{
  display:grid;gap:clamp(26px,3vw,48px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr);
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer__tag{margin-top:16px;font-size:14.5px;max-width:38ch;line-height:1.6}
.site-footer h3{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:14px;
}
.site-footer__nav ul{display:grid;gap:9px}
.site-footer__nav a{font-size:14.5px;transition:color .18s var(--ease)}
.site-footer__nav a:hover{color:#fff}
.site-footer__contacts{display:grid;gap:7px;align-content:start;font-size:14.5px}
.site-footer__phone{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:4px}
.site-footer__phone:hover{color:var(--red-on-dark)}
.site-footer__contacts a:hover{color:#fff}
.site-footer__bottom{
  padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 28px;
  font-size:12.5px;color:rgba(255,255,255,.42);
}
.site-footer__bottom a{text-decoration:underline;text-underline-offset:2px}
.site-footer__bottom a:hover{color:#fff}
.site-footer__disclaimer{flex-basis:100%;max-width:62ch}

/* --------------------------------------------------------------------------
   ПЛАВАЮЩИЕ КНОПКИ
   -------------------------------------------------------------------------- */
[hidden]{display:none !important}

.fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:70;
     display:flex;flex-direction:column;align-items:center;gap:12px}
.fab__list{display:flex;flex-direction:column;gap:10px;animation:fabIn .26s var(--ease)}
@keyframes fabIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

.fab__btn{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 18px rgba(21,17,16,.22);
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.fab__btn:hover{transform:scale(1.08);filter:brightness(1.08)}
.fab__btn--wa{background:#25D366}
.fab__btn--tg{background:#2AABEE}
/* У MAX в фирменном знаке градиент от фиолетового к голубому — плоский цвет
   логотип не передаёт, поэтому здесь единственная кнопка с градиентом. */
.fab__btn--max{background:linear-gradient(140deg,#8419FF 0%,#1591FF 55%,#00EAFF 100%)}
.fab__btn--tel{background:var(--ink)}

.fab__toggle{
  position:relative;width:58px;height:58px;border:0;border-radius:50%;
  background:var(--red);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(198,5,10,.42);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.fab__toggle:hover{transform:scale(1.06);background:var(--red-dark)}
.fab__toggle::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--red);animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.55);opacity:0}}
.fab__icon-close{display:none}
.fab__toggle[aria-expanded="true"] .fab__icon-chat{display:none}
.fab__toggle[aria-expanded="true"] .fab__icon-close{display:block}
.fab__toggle[aria-expanded="true"]::before{display:none}

.to-top{
  position:fixed;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:65;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--line-2);
  display:grid;place-items:center;box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.to-top:hover{transform:translateY(-3px);border-color:var(--red);color:var(--red)}

/* --------------------------------------------------------------------------
   МОДАЛЬНОЕ ОКНО
   -------------------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(12,9,9,.58);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:fade .22s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__dialog{
  position:relative;width:min(470px,100%);
  max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain;
  background:var(--paper);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-2);
  animation:pop .3s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;
  border:0;background:var(--paper-2);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.modal__close:hover{background:var(--red-soft);color:var(--red)}
.modal__title{font-size:clamp(21px,2.4vw,26px);font-weight:800;letter-spacing:-.028em;margin-bottom:8px;padding-right:34px}
.modal__sub{font-size:14.5px;color:var(--ink-2);margin-bottom:20px}
.modal__product{
  font-size:13.5px;color:var(--ink-2);background:var(--red-soft);
  padding:9px 13px;border-radius:var(--r-sm);margin-bottom:6px;
}
.modal__product b{color:var(--red)}
.form--modal{background:none;box-shadow:none;padding:0;border-radius:0}

/* --------------------------------------------------------------------------
   ЛАЙТБОКС
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:110;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:clamp(14px,3vw,44px);
  background:rgba(10,8,8,.94);animation:fade .2s var(--ease);
}
.lightbox__img{
  grid-column:2;justify-self:center;
  max-width:100%;max-height:calc(100dvh - 88px);
  width:auto;border-radius:var(--r);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:pop .3s var(--ease);
}
.lightbox__close{
  position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background .18s var(--ease)}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__nav--prev{grid-column:1}
.lightbox__nav--next{grid-column:3}
body.is-locked{overflow:hidden}
html:has(body.is-locked){overflow:hidden}  /* html — скроллящийся элемент, его тоже фиксируем */

/* --------------------------------------------------------------------------
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   АДАПТИВ
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .nav{
    position:fixed;top:76px;left:0;right:0;margin-inline:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px var(--gutter) 22px;
    box-shadow:0 14px 30px rgba(21,17,16,.10);
    transform:translateY(-115%);visibility:hidden;
    transition:transform .3s var(--ease),visibility .3s var(--ease);
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list a{display:block;padding:15px 2px;font-size:17px;border-bottom:1px solid var(--line)}
  .nav__list a::after{display:none}
  .nav__list li:last-child a{border-bottom:0}
  .burger{display:flex}
}

@media (max-width:900px){
  html{scroll-padding-top:84px}
  .hero__inner{flex-direction:column;align-items:flex-start;gap:30px}
  .hero__side{align-self:flex-start}
  .hero__badge{padding:13px 18px}
  .hero__badge-num{font-size:32px}
  /* на узком экране текст идёт во всю ширину — затемняем кадр равномерно */
  .hero__scrim{background:linear-gradient(180deg,rgba(16,12,11,.52) 0%,rgba(16,12,11,.56) 46%,var(--ink) 100%)}
  .cta__inner{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr 1fr}
  .site-footer__brand{grid-column:1 / -1}
}

@media (max-width:960px){
  .cards,.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .stat{border-left:0;padding-inline:0}
  .hide-sm{display:none}
}

@media (max-width:620px){
  .site-header__inner{height:66px;gap:12px}
  .nav{top:66px}
  .logo__word{font-size:17px}
  .logo__mark{width:32px;height:31px}
  .header-phone__label{display:none}
  .header-phone__num{font-size:15px}
  .site-footer__inner{grid-template-columns:1fr}
  .cards,.swatches{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .to-top{display:none}
  .btn--lg{padding:15px 24px;font-size:15px}
  .hero__cta .btn{flex:1 1 100%}
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lightbox__img{grid-column:1;grid-row:1}
  .lightbox__nav{grid-row:2;width:46px;height:46px}
  .lightbox__nav--prev{grid-column:1;justify-self:start}
  .lightbox__nav--next{grid-column:1;grid-row:2;justify-self:end}
}

/* --------------------------------------------------------------------------
   ДОСТУПНОСТЬ И ПЕЧАТЬ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.fab,.to-top,.modal,.lightbox,.cta,.hero__cta,
  .hero__bg,.hero__scrim,.hero__dots{display:none !important}
  .hero{min-height:0;background:none;color:var(--ink);padding-block:20px}
  .hero__lead,.hero__title-city,.hero__note,.hero__badge-txt{color:var(--ink-2)}
  .hero__badge{border-color:var(--line)}
  body{color:#000}
  .section{padding-block:20px;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}