/* ============================================================
   Inter — локальный шрифт. Раньше грузился с fonts.googleapis.com
   и fonts.gstatic.com: два внешних домена, два DNS и TLS, и оба
   из России работают нестабильно. Теперь отдаётся с нашего сервера.
   latin-ext урезан до реально используемых символов ради знака ₽.
   ============================================================ */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/inter-ext.woff2') format('woff2');
  unicode-range:U+20BD, U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

/* ============================================================
   GABBROMIX — дизайн-система
   Фирменные цвета с логотипа: красный #D5050C, чёрный #010101.
   Принцип: много белого воздуха, крупное фото, красный только
   на действии. Никакого «лакшери»-глянца.
   ============================================================ */

:root{
  --red:#D5050C;
  --red-dark:#AC0409;
  --red-tint:#FDF0F0;

  --ink:#0E0E0F;
  --ink-800:#1C1D1F;
  --ink-700:#2E3033;
  --ink-500:#646870;
  --ink-400:#8C9098;
  --ink-200:#D9DBDE;
  --ink-100:#ECEDEF;
  --paper:#FFFFFF;
  --paper-2:#F5F5F6;

  --ok:#2E7D3A;

  --r-s:4px; --r-m:8px; --r-l:14px;
  --sh-s:0 1px 2px rgba(14,14,15,.06), 0 2px 8px rgba(14,14,15,.05);
  --sh-m:0 6px 20px rgba(14,14,15,.09), 0 2px 6px rgba(14,14,15,.05);
  --sh-l:0 24px 60px rgba(14,14,15,.18);

  --wrap:1240px;
  --gut:22px;
  --f:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f); font-size:17px; line-height:1.6;
  color:var(--ink-800); background:var(--paper); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.nav-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
p{margin:0 0 1em}

h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.08; letter-spacing:-.025em; color:var(--ink)}
h1{font-size:clamp(34px,5.6vw,66px)}
h2{font-size:clamp(28px,4vw,48px)}
h3{font-size:clamp(19px,2.1vw,24px); letter-spacing:-.018em}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.section{padding:clamp(56px,7vw,104px) 0}
.section--dark{background:var(--ink); color:#E8E9EA}
.section--dark h2,.section--dark h3{color:#fff}
.section--gray{background:var(--paper-2)}
.lead{font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--ink-500); max-width:66ch}
.section--dark .lead{color:#A9ACB2}

.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:16px;
}
.eyebrow::before{content:'—'; margin-right:9px; opacity:.55}
.head{max-width:900px; margin-bottom:clamp(30px,4vw,52px)}
.head .lead{margin-top:16px}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; border:1.5px solid transparent; border-radius:var(--r-m);
  font-size:15.5px; font-weight:700; letter-spacing:-.01em; text-align:center;
  transition:background .16s, border-color .16s, color .16s, transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red); color:#fff}
.btn--red:hover{background:var(--red-dark)}
.btn--red:disabled{background:var(--ink-200); color:var(--ink-400); cursor:not-allowed}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--ink-700)}
.btn--line{border-color:var(--ink-200); color:var(--ink); background:var(--paper)}
.btn--line:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn--light{border-color:rgba(255,255,255,.35); color:#fff}
.btn--light:hover{background:#fff; color:var(--ink)}
.btn--wa{background:#25D366; color:#06331B}
.btn--wa:hover{background:#1DBB57}
.btn--tg{background:#2AABEE; color:#03293F}
.btn--tg:hover{background:#1A94D4}
.btn--max{background:linear-gradient(135deg,#471AFF,#9500FF); color:#fff}
.btn--max:hover{background:linear-gradient(135deg,#3E16E0,#8000DB)}
.btn--max:disabled{background:linear-gradient(135deg,#8D79DF,#B96FE5); color:#fff; opacity:.65; cursor:not-allowed}
.btn--block{width:100%}
.btn--sm{padding:11px 18px; font-size:14px}

/* ---------- Шапка ---------- */
.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); transition:box-shadow .2s, border-color .2s; border-bottom:1px solid transparent}
.header.scrolled{border-color:var(--ink-100); box-shadow:var(--sh-s)}
.header__in{display:flex; align-items:center; gap:26px; height:78px}
.logo{display:flex; align-items:center; flex:none}
.logo img{height:26px; width:auto}
.nav{display:flex; gap:26px; margin-left:auto; font-size:15px; font-weight:500}
.nav a{color:var(--ink-700); padding:8px 0; border-bottom:2px solid transparent; transition:.15s}
.nav a:hover{color:var(--red); border-color:var(--red)}
.header__cta{display:flex; align-items:center; gap:16px; flex:none}
.header__phone{font-size:17px; font-weight:700; white-space:nowrap; letter-spacing:-.02em}
.header__phone small{display:block; font-size:11.5px; font-weight:500; color:var(--ok); letter-spacing:0}
.burger{display:none; width:44px; height:42px; border:1.5px solid var(--ink-200); background:var(--paper); border-radius:var(--r-m); position:relative}
.burger span,.burger::before,.burger::after{content:''; position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.burger span{top:20px} .burger::before{top:13px} .burger::after{top:27px}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{top:20px; transform:rotate(45deg)}
.burger[aria-expanded="true"]::after{top:20px; transform:rotate(-45deg)}

/* ---------- Первый экран ---------- */
.hero{position:relative; min-height:clamp(560px,86vh,860px); display:flex; align-items:flex-end; background:var(--ink); overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.45) 40%, rgba(10,10,11,.88) 100%);
}
.hero__in{position:relative; z-index:2; width:100%; padding:clamp(48px,8vw,90px) 0 clamp(36px,4vw,54px)}
.hero h1{color:#fff; max-width:17ch}
.hero h1 b{color:var(--red); font-weight:800}
.hero__sub{font-size:clamp(17px,1.8vw,20px); color:#CFD1D4; max-width:54ch; margin:22px 0 30px}
.hero__actions{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:clamp(34px,5vw,56px)}
.hero__facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-l); overflow:hidden}
.hero__facts div{background:rgba(14,14,15,.62); backdrop-filter:blur(4px); padding:20px 22px}
.hero__facts b{display:block; font-size:clamp(22px,2.6vw,30px); font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1.1}
.hero__facts span{font-size:13.5px; color:#A3A6AB; line-height:1.4; display:block; margin-top:5px}
.hero__facts em{color:var(--red); font-style:normal}

/* ---------- Полоса-бегунок ---------- */
.ticker{background:var(--red); color:#fff; overflow:hidden; padding:13px 0; font-size:14px; font-weight:600; letter-spacing:.02em}
.ticker__in{display:flex; gap:44px; white-space:nowrap; animation:tick 34s linear infinite}
.ticker span{display:flex; align-items:center; gap:44px}
.ticker span::after{content:'◆'; opacity:.5; font-size:9px}
@keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Преимущества ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,28px)}
.feat{padding:30px; border:1px solid var(--ink-100); border-radius:var(--r-l); background:var(--paper); transition:border-color .18s, box-shadow .18s}
.feat:hover{border-color:var(--ink-200); box-shadow:var(--sh-m)}
.feat__n{font-size:13px; font-weight:800; color:var(--red); letter-spacing:.1em; margin-bottom:14px}
.feat h3{margin-bottom:10px}
.feat p{color:var(--ink-500); font-size:16px; margin:0}
.section--dark .feat{background:var(--ink-800); border-color:rgba(255,255,255,.1)}
.section--dark .feat p{color:#A9ACB2}

/* ---------- Каталог ---------- */
.cat__top{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px}
.chip{
  padding:10px 18px; border:1.5px solid var(--ink-200); background:var(--paper);
  border-radius:100px; font-size:14.5px; font-weight:600; color:var(--ink-700); transition:.15s;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px)}
.prod{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--ink-100); border-radius:var(--r-l); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s}
.prod:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--ink-200)}
.prod__img{position:relative; aspect-ratio:4/3; background:var(--ink-100); overflow:hidden}
.prod__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.prod:hover .prod__img img{transform:scale(1.04)}
.prod__badge{position:absolute; top:13px; left:13px; background:rgba(14,14,15,.82); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:100px; letter-spacing:.02em}
.prod__body{padding:24px; display:flex; flex-direction:column; flex:1}
.prod__body h3{font-size:20px; margin-bottom:7px}
.prod__title{font-size:14.5px; font-weight:600; color:var(--red); margin-bottom:12px}
.prod__list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.prod__list li{font-size:12.5px; font-weight:600; background:var(--paper-2); color:var(--ink-700); padding:5px 10px; border-radius:var(--r-s)}
.prod__text{font-size:15px; color:var(--ink-500); margin-bottom:16px}
.prod__spec{display:flex; flex-wrap:wrap; gap:6px 18px; padding-top:15px; border-top:1px solid var(--ink-100); margin-bottom:16px}
.prod__spec span{font-size:13.5px; color:var(--ink-700)}
.prod__spec i{font-style:normal; color:var(--ink-400); margin-right:5px}
.prod__price{margin-top:auto; display:flex; align-items:baseline; gap:11px; margin-bottom:16px}
.prod__price b{font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.prod__price em{font-style:normal; font-size:12.5px; font-weight:700; color:var(--ok); background:#EDF6EE; padding:4px 9px; border-radius:100px}
.prod__foot{display:grid; grid-template-columns:1fr 1fr; gap:9px}

/* ---------- Квиз ---------- */
.quiz{
  display:grid; grid-template-columns:1.32fr .68fr;
  background:var(--paper); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-l);
  min-height:clamp(620px,72vh,780px);
}
.quiz__main{padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column}
.quiz__side{background:var(--ink); color:#fff; padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column}
.quiz__bar{height:4px; background:var(--ink-100); border-radius:100px; overflow:hidden; margin-bottom:10px}
.quiz__bar i{display:block; height:100%; background:var(--red); width:20%; transition:width .35s cubic-bezier(.4,0,.2,1)}
.quiz__count{font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin-bottom:26px}
.quiz__q{font-size:clamp(23px,2.6vw,32px); margin-bottom:9px}
.quiz__hint{font-size:15.5px; color:var(--ink-500); margin-bottom:26px; max-width:56ch}
.quiz__hint a{color:var(--red); font-weight:600}
.opts{display:grid; gap:10px; margin-bottom:28px}
.opts--grid{grid-template-columns:repeat(3,1fr)}
.opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:17px 20px; border:1.5px solid var(--ink-200); background:var(--paper);
  border-radius:var(--r-m); transition:border-color .15s, background .15s;
}
.opt:hover{border-color:var(--ink-400)}
.opt[aria-pressed="true"]{border-color:var(--red); background:var(--red-tint)}
.opt__box{width:22px; height:22px; flex:none; border:2px solid var(--ink-200); border-radius:5px; background:var(--paper); position:relative}
.opt[aria-pressed="true"] .opt__box{background:var(--red); border-color:var(--red)}
.opt[aria-pressed="true"] .opt__box::after{content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(43deg)}
.opt__t{flex:1; min-width:0}
.opt__t b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.015em}
.opt__t span{display:block; font-size:13.5px; color:var(--ink-500); line-height:1.4; margin-top:3px}
.opt__p{font-style:normal; font-size:15px; font-weight:700; white-space:nowrap; color:var(--ink)}
.opt[aria-pressed="true"] .opt__p{color:var(--red)}
.opt--color{flex-direction:column; align-items:stretch; gap:11px; padding:11px}
.opt--color .opt__swatch{display:block; aspect-ratio:1.5; border-radius:var(--r-s); background-size:cover; background-position:center}
.opt--color .opt__t b{font-size:14.5px; text-align:center}
.quiz__nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:8px}
.link-back{background:none; border:0; color:var(--ink-400); font-size:14.5px; font-weight:600; text-decoration:underline; padding:0}
.link-back:hover{color:var(--ink)}
.quiz__side h3{font-size:19px; margin-bottom:20px; color:#fff}
.quiz__empty{color:#7E828A; font-size:15px}
.quiz__note{font-size:13px; color:#7E828A; margin:12px 0 0}
.sum{display:flex; justify-content:space-between; gap:14px; padding:12px 0; font-size:15px; color:#A9ACB2; border-top:1px solid rgba(255,255,255,.1)}
.sum b{color:#fff; white-space:nowrap; font-weight:600}
.sum--head{border-top:0; padding-top:0; color:#7E828A; font-size:13.5px}
.sum--total{border-top:2px solid var(--red); margin-top:8px; padding-top:16px; align-items:baseline}
.sum--total span{font-size:16px; color:#fff; font-weight:600}
.sum--total b{font-size:clamp(24px,2.6vw,31px); font-weight:800; letter-spacing:-.03em}
.quiz__side small{display:block; margin-top:auto; padding-top:22px; font-size:12.5px; color:#75797F; line-height:1.55}
.result-price{font-size:clamp(38px,5.5vw,58px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1; margin:6px 0 16px}
.result-price small{display:block; font-size:16px; font-weight:600; color:var(--ink-400); letter-spacing:-.01em; margin-top:8px}

/* ---------- Формы ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-500); margin-bottom:7px}
.field input{width:100%; padding:15px 17px; border:1.5px solid var(--ink-200); border-radius:var(--r-m); font-size:16px; font-family:inherit; background:var(--paper); color:var(--ink); transition:border-color .15s}
.field input::placeholder{color:var(--ink-400)}
.field input:focus{outline:none; border-color:var(--red)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-500); margin:16px 0 20px; cursor:pointer}
.consent input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--red)}
.msg-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.msg-row--three{grid-template-columns:repeat(3,1fr)}
.ok-msg{font-size:16px; margin:0 0 10px}
.ok-msg--dim{font-size:14px; color:var(--ink-500)}
.ok-msg a{color:var(--red); font-weight:600}

/* ---------- Оттенки ---------- */
.colors{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.color__sw{aspect-ratio:1; border-radius:var(--r-l); overflow:hidden; background:var(--ink-100)}
.color__sw img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.color:hover .color__sw img{transform:scale(1.07)}
.color b{display:block; font-size:14.5px; font-weight:600; margin-top:12px}

/* ---------- Производство ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); counter-reset:s}
.step{padding-top:24px; border-top:2px solid rgba(255,255,255,.14); position:relative}
.step::before{counter-increment:s; content:'0' counter(s); position:absolute; top:-2px; left:0; padding:0 10px 0 0; background:var(--ink); color:var(--red); font-size:13px; font-weight:800; transform:translateY(-50%)}
.step h3{font-size:18px; margin-bottom:9px}
.step p{font-size:15px; color:#A9ACB2; margin:0}

/* ---------- Сравнение ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--ink-100); border-radius:var(--r-l); background:var(--paper)}
table.cmp{width:100%; border-collapse:collapse; min-width:760px; font-size:15.5px}
table.cmp th,table.cmp td{padding:18px 20px; text-align:left; border-bottom:1px solid var(--ink-100); vertical-align:top}
table.cmp thead th{background:var(--ink); color:#fff; font-size:14.5px; font-weight:700; letter-spacing:-.01em}
table.cmp--vs thead th:nth-child(2){background:var(--red)}
table.cmp--price thead th:last-child,table.cmp--price td:last-child{text-align:right}
table.cmp--price thead th:last-child{background:var(--red)}
table.cmp th[scope="row"]{background:var(--paper-2); font-weight:600; width:23%; color:var(--ink-700)}
table.cmp td.win{color:var(--ok); font-weight:600; background:#F5FAF6}
table.cmp td.lose{color:var(--ink-400)}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}

/* ---------- Кейсы ---------- */
.case{border-radius:var(--r-l); overflow:hidden; background:var(--paper); border:1px solid var(--ink-100)}
.case__img{aspect-ratio:3/2; background:var(--ink-100)}
.case__img img{width:100%; height:100%; object-fit:cover}
.case__body{padding:26px}
.case__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.case__meta span{font-size:12.5px; font-weight:600; background:var(--paper-2); color:var(--ink-700); padding:5px 11px; border-radius:100px}
.case blockquote{margin:0 0 16px; font-size:16.5px; line-height:1.5; color:var(--ink-800)}
.case__who{font-size:14px; color:var(--ink-400)}
.case__who b{display:block; font-size:16px; color:var(--ink); font-weight:700; margin-bottom:2px}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--ink-100)}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 52px 24px 0; position:relative;
  font-size:clamp(17px,1.9vw,20px); font-weight:700; letter-spacing:-.018em; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:''; position:absolute; right:14px; top:50%; background:var(--red); transition:.2s}
.faq summary::after{width:15px; height:2px; margin-top:-1px}
.faq summary::before{width:2px; height:15px; margin-top:-7.5px; margin-right:6.5px}
.faq details[open] summary::before{transform:rotate(90deg); opacity:0}
.faq summary:hover{color:var(--red)}
.faq__a{padding:0 60px 26px 0; color:var(--ink-500); font-size:16.5px}
.faq__a p:last-child{margin-bottom:0}
.faq__a strong{color:var(--ink)}

/* ---------- CTA-блок ---------- */
.cta{position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--ink); padding:clamp(34px,5vw,64px); color:#fff}
.cta__bg{position:absolute; inset:0}
.cta__bg img{width:100%; height:100%; object-fit:cover; opacity:.32}
.cta__bg::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,14,15,.94) 24%, rgba(14,14,15,.5))}
.cta__in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,52px); align-items:center}
.cta h2{color:#fff; margin-bottom:16px}
.cta ul li{display:flex; gap:11px; margin-bottom:10px; font-size:16px; color:#C6C8CC}
.cta ul li::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--red); flex:none; margin-top:9px}
.cta__form{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-l); padding:clamp(22px,2.6vw,32px)}
.cta__form .field label{color:#A9ACB2}
.cta__form .field input{background:rgba(255,255,255,.96); border-color:transparent; color:var(--ink)}
.cta__form .consent{color:#93969C}
.cta__form .ok-msg{color:#fff}
.cta__form .ok-msg--dim{color:#A9ACB2}

/* ---------- Контакты ---------- */
.contacts{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px)}
.contact b{display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin-bottom:10px}
.contact a,.contact p{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0}
.contact a:hover{color:var(--red)}
.contact small{display:block; font-size:14px; font-weight:500; color:var(--ink-500); margin-top:5px; letter-spacing:0}

/* ---------- Подвал ---------- */
.footer{background:var(--ink); color:#8C9098; padding:clamp(48px,6vw,72px) 0 26px; font-size:15px}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,40px); margin-bottom:40px}
.footer h4{font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.footer li{margin-bottom:10px}
.footer a:hover{color:var(--red)}
.footer .logo{margin-bottom:18px}
.footer .logo img{height:24px}
.seo-text{font-size:13px; line-height:1.7; color:#5E6268; margin:0 0 24px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:#5E6268}

/* ---------- Модалки ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal__bg{position:absolute; inset:0; background:rgba(10,10,11,.7); backdrop-filter:blur(4px)}
.modal__box{position:relative; background:var(--paper); border-radius:var(--r-l); padding:clamp(26px,3vw,38px); width:min(500px,100%); max-height:90vh; overflow-y:auto; box-shadow:var(--sh-l)}
.modal__close{position:absolute; top:14px; right:14px; width:38px; height:38px; border:0; background:var(--paper-2); border-radius:50%; font-size:20px; color:var(--ink-700); line-height:1}
.modal__close:hover{background:var(--ink-100)}
.modal h3{margin-bottom:8px}
.modal .lead{font-size:15.5px; margin-bottom:22px}
.modal .lead b{color:var(--ink)}

/* ---------- Плавающие кнопки ---------- */
.fab{position:fixed; right:18px; bottom:18px; z-index:70; display:flex; flex-direction:column; gap:10px}
.fab a{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-m); color:#fff; transition:transform .15s}
.fab a:hover{transform:scale(1.07)}
.fab a svg{width:27px; height:27px; fill:currentColor}
.fab a img{width:29px; height:29px}
.fab a[aria-disabled="true"]{opacity:.62; cursor:not-allowed; pointer-events:none}
.fab .max{background:linear-gradient(135deg,#471AFF,#9500FF)} .fab .tg{background:#2AABEE}
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; gap:9px; background:var(--ink); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Адаптив ---------- */
/* На узких десктопах шапка не влезала — ужимаем меню до брейкпоинта бургера */
@media (max-width:1340px){
  .header__in{gap:18px}
  .nav{gap:17px; font-size:14.5px}
  .header__cta{gap:12px}
  .header__phone{font-size:16px}
}
@media (max-width:1180px){
  .header__phone small{display:none}
}

@media (max-width:1100px){
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; position:fixed; inset:78px 0 0; background:var(--paper); padding:22px var(--gut); gap:0; font-size:19px; overflow-y:auto; z-index:59}
  .nav.open a{padding:17px 0; border-bottom:1px solid var(--ink-100); border-top:0}
  .burger{display:block; margin-left:auto}
  .header__cta .btn{display:none}
  .grid-3,.cards,.contacts{grid-template-columns:repeat(2,1fr)}
  .hero__facts{grid-template-columns:repeat(2,1fr)}
  .quiz{grid-template-columns:1fr; min-height:0}
  .quiz__side{order:-1}
  .cta__in{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .colors{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .header__in{height:66px}
  .nav.open{inset:66px 0 0}
  .header__phone{display:none}
  .hero{min-height:0}
  .hero__in{padding:56px 0 34px}
  .hero__actions .btn{width:100%}
  .grid-3,.grid-2,.cards,.contacts{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .colors{grid-template-columns:repeat(2,1fr)}
  .opts--grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr}
  .footer{padding-bottom:92px}
  .msg-row,.prod__foot{grid-template-columns:1fr}
  .sticky{display:grid; grid-template-columns:1fr 1fr}
  .fab{bottom:82px; right:14px}
  .faq summary{padding-right:44px; font-size:17px}
  .faq__a{padding-right:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2.5px solid var(--red); outline-offset:2px; border-radius:2px}

/* Оттенки без фотографии фактуры — нейтральная плашка вместо чужого камня */
.color__sw--soon{background:var(--c); display:flex; align-items:flex-end; padding:14px; position:relative}
.color__sw--soon::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45))}
.color__sw--soon span{position:relative; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.92)}

/* Шаг «Доставка»: ввод километража */
.km{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px}
.km__field{position:relative; display:block; border:1.5px solid var(--ink-200); border-radius:var(--r-m); padding:13px 17px; background:var(--paper); transition:border-color .15s}
.km__field:focus-within{border-color:var(--red)}
.km__field > span{display:block; font-size:12.5px; font-weight:600; color:var(--ink-500); margin-bottom:4px}
.km__field input{width:100%; border:0; outline:none; background:none; font:inherit; font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); padding:0; -moz-appearance:textfield}
.km__field input::-webkit-outer-spin-button,.km__field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.km__field input:disabled{color:var(--ink-400)}
.km__field i{position:absolute; right:17px; bottom:15px; font-style:normal; font-size:16px; font-weight:600; color:var(--ink-400)}
.km__out{display:flex; flex-direction:column; justify-content:center; padding:13px 17px; background:var(--paper-2); border-radius:var(--r-m)}
.km__out b{font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.1}
.km__out span{font-size:13px; color:var(--ink-500); margin-top:4px}
#km-unknown{margin-bottom:28px}
@media (max-width:560px){ .km{grid-template-columns:1fr} }

/* Отдельная страница каталога */
.section--tightTop{padding-top:clamp(28px,3.5vw,48px)}
.crumbs{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-400); margin-bottom:20px}
.crumbs a:hover{color:var(--red)}
.crumbs b{color:var(--ink-700); font-weight:600}
.nav a[aria-current="page"]{color:var(--red); border-color:var(--red)}

/* Три мессенджера в формах-заявках */
.msg-row--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){ .msg-row--3{grid-template-columns:1fr} }

/* ---------- Оттенок как измерение каталога ---------- */
.colorbar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.chip--sw{display:inline-flex; align-items:center; gap:9px; padding-left:9px}
.chip--sw i{width:22px; height:22px; border-radius:5px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(14,14,15,.14); flex:none}
.chip--sw[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

.prod__colors{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.sw{
  width:26px; height:26px; border-radius:6px; border:0; padding:0; flex:none; cursor:pointer;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(14,14,15,.16);
  transition:transform .12s, box-shadow .12s;
}
.sw:hover{transform:scale(1.09)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(14,14,15,.16), 0 0 0 2px var(--paper), 0 0 0 4px var(--red)}
.prod__colors-n{font-size:12.5px; color:var(--ink-400); margin-left:4px}

/* ---------- Цифры доверия ---------- */
.nums{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-100); border:1px solid var(--ink-100); border-radius:var(--r-l); overflow:hidden}
.nums div{background:var(--paper); padding:26px 22px}
.nums b{display:block; font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-.035em; color:var(--ink); line-height:1.05}
.nums span{display:block; font-size:14px; color:var(--ink-500); margin-top:7px; line-height:1.4}
.nums em{font-style:normal; color:var(--red)}
.section--dark .nums{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1)}
.section--dark .nums div{background:var(--ink-800)}
.section--dark .nums b{color:#fff}
.section--dark .nums span{color:#A9ACB2}

/* ---------- Блок «рядом» ---------- */
.near{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink-100); border:1px solid var(--ink-100); border-radius:var(--r-l); overflow:hidden}
.near__col{background:var(--paper); padding:clamp(24px,3vw,34px)}
.near__col--us{background:var(--ink); color:#fff}
.near__col h3{font-size:19px; margin-bottom:6px}
.near__col--us h3{color:#fff}
.near__col > p{font-size:14px; color:var(--ink-400); margin-bottom:20px}
.near__col--us > p{color:#9CA0A6}
.near li{
  position:relative; padding:11px 0 11px 19px; border-top:1px solid var(--ink-100);
  font-size:15.5px; line-height:1.45;
}
.near__col--us li{border-color:rgba(255,255,255,.12)}
.near li:first-of-type{border-top:0}
.near li::before{
  content:''; position:absolute; left:0; top:19px;
  width:7px; height:7px; border-radius:50%; background:var(--ink-200);
}
.near__col--us li::before{background:var(--red)}
.near b{font-weight:700}

@media (max-width:1100px){ .nums{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .nums{grid-template-columns:1fr}
  .near{grid-template-columns:1fr}
  .sw{width:24px; height:24px}
}

/* ---------- Совет из каталога в карточке ---------- */
.prod__tip{
  font-size:13.5px; line-height:1.45; color:var(--ink-500);
  border-left:2px solid var(--red); padding:2px 0 2px 12px; margin:0 0 16px;
}

/* ---------- Видео с объектов ---------- */
.vids{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px)}
.vid{position:relative; margin:0; border-radius:var(--r-l); overflow:hidden; background:var(--ink-100); cursor:pointer}
.vid video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:var(--ink-100)}
.vid__play{
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer;
  background:linear-gradient(180deg, rgba(14,14,15,.05) 40%, rgba(14,14,15,.55));
  transition:background .2s;
}
.vid__play::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:0 4px 18px rgba(14,14,15,.3);
}
.vid__play::before{
  content:''; position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-42%,-50%);
  border-style:solid; border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent var(--ink);
}
.vid.playing .vid__play{background:transparent}
.vid.playing .vid__play::after,.vid.playing .vid__play::before{opacity:0}
.vid figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none;
  padding:14px 16px; font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(14,14,15,.75));
}
@media (max-width:1100px){ .vids{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .vids{grid-template-columns:1fr 1fr; gap:12px} .vid figcaption{font-size:12.5px; padding:10px 12px} }

/* Отметка «снято именно в этом оттенке» */
.prod__shot{
  position:absolute; top:13px; right:13px; z-index:2;
  background:rgba(213,5,12,.94); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  padding:6px 11px; border-radius:100px;
}
.prod__list b{font-weight:800; color:var(--red)}

/* Листание ракурсов в карточке */
.prod__nav{
  position:absolute; top:0; bottom:0; width:34%; border:0; background:none; cursor:pointer;
  opacity:0; transition:opacity .15s; z-index:3;
}
.prod__nav--prev{left:0} .prod__nav--next{right:0}
.prod:hover .prod__nav{opacity:1}
.prod__nav::after{
  content:''; position:absolute; top:50%; width:11px; height:11px;
  border:2px solid #fff; border-width:2px 2px 0 0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.prod__nav--prev::after{left:14px; transform:translateY(-50%) rotate(-135deg)}
.prod__nav--next::after{right:14px; transform:translateY(-50%) rotate(45deg)}
.prod__dots{
  position:absolute; left:0; right:0; bottom:11px; z-index:3;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.prod__dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 2px rgba(0,0,0,.4)}
.prod__dots i.on{background:#fff; width:18px; border-radius:100px}

/* Честная пометка, когда снимка в выбранном оттенке нет */
.prod__nophoto{
  font-size:13px; line-height:1.45; color:var(--ink-500);
  background:var(--paper-2); border-radius:var(--r-s);
  padding:10px 12px; margin:0 0 16px;
}

/* ============================================================
   Адаптив: доводка под телефоны и планшеты
   ============================================================ */

/* Кадрирование hero. Комплекс на снимке смещён вправо, при узком
   экране object-fit:cover по центру показывал кусты вместо товара. */
.hero__bg img{object-position:50% center}
@media (max-width:900px){
  .hero__bg img{object-position:72% center}
  /* на светлом небе текст терялся — усиливаем подложку только сверху */
  .hero__bg::after{
    background:linear-gradient(180deg, rgba(10,10,11,.82) 0%, rgba(10,10,11,.5) 46%, rgba(10,10,11,.9) 100%);
  }
}

/* Пальцевые цели: свотчи 24 px попадали мимо.
   Завязываем на ширину, а не на hover:none — планшет с мышью
   тоже требует крупных целей, а сенсорность через медиазапрос
   определяется ненадёжно. */
@media (max-width:1100px){
  .sw{width:34px; height:34px}
  .prod__colors{gap:8px}
  .chip--sw i{width:26px; height:26px}
  .chip{padding:12px 18px}
  .nav.open a{padding:19px 0}
}

.burger{height:44px}           /* было 42 — не дотягивало до нормы 44×44 */

/* Плитки фактов на первом экране: на узком экране по две в ряд и плотнее */
@media (max-width:720px){
  .hero__facts div{padding:15px 16px}
  .hero__facts b{font-size:21px}
  .hero__facts span{font-size:12.5px; margin-top:3px}
  .hero__sub{margin:16px 0 22px}
}

/* Очень узкие экраны (iPhone SE, 320 px) */
@media (max-width:360px){
  :root{--gut:16px}
  h1{font-size:29px}
  .hero__facts{grid-template-columns:1fr 1fr}
  .hero__facts b{font-size:19px}
  .prod__foot{gap:8px}
  .quiz__main,.quiz__side{padding:20px 16px}
  .faq summary{font-size:16px; padding-right:40px}
  .nums div{padding:20px 16px}
}

/* Планшет в портрете: каталог в две колонки читается лучше, чем в одну */
@media (min-width:721px) and (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:repeat(4,1fr)}
  .colors{grid-template-columns:repeat(3,1fr)}
}

/* Горизонтальная ориентация телефона: hero не должен занимать три экрана */
@media (max-height:520px) and (orientation:landscape){
  .hero__in{padding:32px 0 24px}
  h1{font-size:30px}
  .hero__facts{grid-template-columns:repeat(4,1fr)}
  .hero__facts div{padding:12px 14px}
}

/* Текстовые ссылки в подвале и контактах: на сенсорных экранах
   высота строки 19 px — мало для пальца, добавляем вертикальный запас */
@media (max-width:1100px){
  .footer li a, .contact a{display:inline-block; padding:6px 0}
  .footer li{margin-bottom:6px}
  .consent input{width:20px; height:20px}
  .consent{padding:6px 0}
}