/* =========================================================================
   МЕТАЛЛ БУКВА ЭКСПРЕСС — дизайн-система
   Тёмная промышленная тема + латунно-золотой акцент.
   Шрифт: Montserrat. Сигнатурные приёмы:
   - .metal-text: объёмный «металлический» текст (эффект гравировки/фаски)
   - .laser-edge: диагональный «рез» между секциями (как лазерный рез листа)
   - .laser-rule: пунктирный разделитель, имитирующий линию реза
   ========================================================================= */

:root{
  /* Цвет */
  --bg:        #121317;
  --bg-2:      #1a1c21;
  --bg-3:      #22252b;
  --bg-4:      #2b2e35;
  --line:      rgba(201,161,90,.16);
  --line-2:    rgba(255,255,255,.08);

  --gold:      #c9a15a;
  --gold-2:    #e9d29a;
  --gold-dim:  #8a713c;
  --steel:     #9aa4ad;
  --steel-lt:  #c7ced4;

  --orange:    #ff6a2b;
  --orange-2:  #ff8a52;
  --blue:      #4a86ff;
  --blue-2:    #6ea0ff;

  --text:      #f3f0e8;
  --text-dim:  #a7adb4;
  --text-mute: #767c84;

  --ok:        #5fbf7a;

  /* Типографика */
  --font: 'Montserrat', -apple-system, sans-serif;

  /* Форма */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --container: 1200px;

  /* Тень */
  --shadow-card: 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-pop: 0 24px 60px -12px rgba(0,0,0,.7);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: var(--font); cursor:pointer; }
input, textarea, select{ font-family: var(--font); }

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

:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }

.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 96px 0; position: relative; }
.section-tight{ padding: 64px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); margin-bottom:16px;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background: var(--orange); display:inline-block;
}

h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; color:var(--text); overflow-wrap:break-word; }
h2.section-title{ font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 14px; }
/* Заголовок блока сравнения на главной: строго в одну строку, по центру.
   Ширина строки в Montserrat 800 = 26.66em (замерено Playwright на реальном шрифте),
   делитель 27.5 даёт ~3% запаса (скроллбар в 100vw, округления). Потолок — 44px, как у section-title. */
h2.section-title.compare-title{
  white-space:nowrap; text-align:center;
  font-size: min(44px, calc((min(100vw, 1200px) - 48px) / 27.5));
}
p.section-lead{ color: var(--text-dim); font-size:17px; max-width:640px; margin:0 0 40px; }
/* Квиз на главной: строка-развилка под лидом для тех, кому нужен не стандартный расчёт букв.
   Лид теряет свой нижний отступ 40px только когда за ним идёт эта строка. */
p.section-lead:has(+ .quiz-alt-route){ margin-bottom:12px; }
.quiz-alt-route{ margin:0 0 40px; font-size:15px; color:var(--text-dim); }
.quiz-alt-route a{ color:var(--gold-2); font-weight:700; white-space:nowrap; }
.quiz-alt-route a:hover{ text-decoration:underline; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Сигнатура: металлический текст ---------- */
.metal-text{
  background: linear-gradient(115deg, #7a6535 0%, var(--gold) 18%, var(--gold-2) 32%, #fff7e0 42%, var(--gold-2) 52%, var(--gold) 66%, #7a6535 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.35));
}

/* ---------- Сигнатура: лазерный рез между секциями ---------- */
.laser-edge{
  position:relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
}
.laser-edge-top{
  clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
}
.laser-rule{
  border:none;
  height:1px;
  margin: 0;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
  opacity:.5;
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 30px;
  border-radius: var(--radius-s);
  font-weight:700; font-size:15px; letter-spacing:.01em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color:#1a0d05;
  box-shadow: 0 10px 24px -8px rgba(255,106,43,.55);
}
.btn-primary:hover{ box-shadow: 0 14px 30px -8px rgba(255,106,43,.75); transform: translateY(-1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none; }
.btn-secondary{
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-secondary:hover{ border-color: var(--gold); color: var(--gold-2); }
.btn-blue{
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color:#0a1330;
  box-shadow: 0 10px 24px -8px rgba(74,134,255,.5);
}
.btn-blue:hover{ box-shadow: 0 14px 30px -8px rgba(74,134,255,.7); transform: translateY(-1px); }
.btn-gold{
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-2);
}
.btn-gold:hover{ background: rgba(201,161,90,.1); }
.btn-block{ width:100%; }
@media(max-width:480px){
  /* Длинный текст кнопки (не только полноширинной) может не влезать в одну
     строку на самых узких экранах из-за общего .btn{white-space:nowrap} —
     разрешаем перенос на мобильных повсеместно, это безопасно визуально. */
  .btn{ white-space:normal; text-align:center; }
}
.btn-sm{ padding:10px 18px; font-size:13px; }

/* ---------- Шапка ---------- */
.topbar{
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  font-size:13px;
  color: var(--text-mute);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar-links{ display:flex; gap:22px; }
.topbar-links a:hover{ color: var(--gold); }
.topbar-contacts{ display:flex; gap:22px; align-items:center; }
.topbar-contacts a:hover{ color:var(--gold-2); }
@media(max-width:520px){
  /* Компактная мобильная версия topbar (согласовано с клиентом 13.09.2026):
     раньше на этих ширинах строка целиком пряталась — теперь показываем её
     в сжатом виде вместо скрытия, т.к. клиенту важно, чтобы ссылки
     "О компании"/"Блог" были видны сразу, а не только через бургер-меню.
     Убрано слово "Ежедневно" (избыточно), email — иконкой без текста адреса. */
  .topbar .container{ height:34px; }
  .topbar{ font-size:11.5px; }
  .topbar-links{ gap:14px; }
  .topbar-contacts{ gap:12px; }
  .topbar-hours-label{ display:none; }
  .topbar-email-text{ display:none; }
}
@media(max-width:400px){
  /* На совсем узких экранах (iPhone SE 320px и т.п.) даже сжатая версия
     не помещается — здесь оставляем старое поведение полного скрытия. */
  .topbar{ display:none; }
}

.header{
  position: sticky; top:0; z-index: 200;
  background: rgba(18,19,23,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-top{ display:flex; align-items:center; justify-content:space-between; height:82px; gap: 24px; }
.logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:19px; letter-spacing:.01em; flex-shrink:0; }
.logo-mark{
  width:42px; height:42px; border-radius:6px;
  background: linear-gradient(155deg, var(--bg-4), var(--bg-2));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-2); font-size:19px;
}
.logo small{ display:block; font-size:10.5px; font-weight:600; color: var(--text-mute); letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:410px){
  /* Порог был 400px (аудит 10.09.2026) — но реальный диапазон, где несжимаемый
     логотип выталкивает бургер за край экрана (герой этого же класса бага,
     см. комментарий у .header-actions ниже), оказался 401-407px, что старый
     порог не захватывал. Измерено Playwright-тестом (document.scrollWidth)
     13.09.2026. Поднято до 410px с запасом. */
  .logo{ font-size:15px; gap:8px; flex-shrink:1; min-width:0; }
  .logo-mark{ width:34px; height:34px; flex-shrink:0; }
  .logo > span:last-child{ overflow-wrap:break-word; }
}

/* Вторая строка шапки — навигация отдельной полосой, переносится в 2 симметричные строки по центру */
.header-nav-row{ border-top:1px solid var(--line); background: rgba(255,255,255,.015); }
.header-nav-row .container{ padding-top:10px; padding-bottom:10px; }
.nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: 8px 28px; max-width: 1020px; margin:0 auto;
}
.nav a{
  font-size:14.5px; font-weight:600; color: var(--text-dim); position:relative; padding: 6px 0;
  transition: color .15s ease;
  white-space: nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.nav a:hover, .nav a.active{ color: var(--text); }
.nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--orange);
}
.nav-dropdown{ position:relative; display:flex; align-items:center; z-index:1; }
.nav-dropdown:hover{ z-index:60; }
.nav-dropdown-menu{
  position:absolute; top: calc(100% + 14px); left:50%; transform: translateX(-50%);
  background: var(--bg-3); border:1px solid var(--line); border-radius: var(--radius-m);
  padding:10px; min-width:230px; max-width:300px; box-shadow: var(--shadow-pop);
  opacity:0; visibility:hidden; translate: 0 6px; transition: .18s ease;
  max-height: 70vh; overflow-y: auto;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; translate:0 0; }
.nav-dropdown-menu a{ display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; white-space:normal; line-height:1.35; }
.nav-dropdown-menu a:hover{ background: var(--bg-4); color:var(--gold-2); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-phone{ text-align:right; display:none; }
.header-phone a{ font-weight:800; font-size:16px; }
.header-phone span{ display:block; font-size:11.5px; color: var(--text-mute); }
@media(min-width:1080px){ .header-phone{ display:block; } }

@media(max-width:1079px){
  /* Корневая причина реального горизонтального оверфлоу на мобильных (аудит 10.09.2026):
     .logo{flex-shrink:0} + текстовая кнопка "Рассчитать стоимость" в шапке вместе
     не помещаются рядом с бургером на экране <1080px — шапка физически шире экрана,
     из-за чего document.scrollWidth раздувается и все position:fixed элементы
     (плавающие кнопки, мобильное меню) начинают считать себя относительно этой
     раздутой ширины и уезжают за край экрана. Кнопка уже продублирована
     внизу .mobile-menu — на мобильных прячем её из шапки, оставляем только лого+бургер. */
  .header-actions .btn-primary{ display:none; }
}
.burger{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; background:none; border:none; padding:0;
}
.burger span{ width:14px; height:2px; background: var(--text); border-radius:2px; transition:.2s; }
@media(min-width:1080px){ .burger{ display:none; } }
@media(max-width:1079px){ .header-nav-row{ display:none; } }

/* ---------- Подсказка на бургер (анимационный указатель) ----------
   Согласовано с клиентом 13.09.2026: на мобильном бургер — единственный
   вход в каталог направлений, но ничем не выделяется среди прочих иконок
   шапки, и пользователь может его не заметить. Элемент вставляется через
   JS (main.js) рядом с .burger на каждой странице — так не пришлось
   дублировать разметку в 70 html-файлах. Показывается один раз за сессию
   (sessionStorage), гаснет через 5с или сразу по тапу на бургер/подсказку. */
.burger-hint{
  position:absolute; top:76px; right:0; z-index:250;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  background: var(--orange); color:#0b0b0d; font-size:12.5px; font-weight:700;
  padding:8px 13px; border-radius:20px;
  box-shadow: 0 6px 18px rgba(255,106,43,.4);
  opacity:0; transform: translateY(-6px);
  animation: burgerHintIn .35s ease .6s forwards, burgerHintBounce 1.6s ease-in-out 1.1s 3;
}
.burger-hint::after{
  content:''; position:absolute; top:-6px; right:16px;
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid var(--orange);
}
.burger-hint i{ font-size:11px; }
.burger-hint.is-hiding{ opacity:0 !important; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
@media(min-width:1080px){ .burger-hint{ display:none; } }
@keyframes burgerHintIn{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }
@keyframes burgerHintBounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(3px); } }
/* Пульсация кнопки «Связаться» на телефоне (.float-toggle, ≤767px) */
@keyframes floatPulse{
  0%{ box-shadow:0 10px 24px -6px rgba(255,106,43,.55), 0 0 0 0 rgba(255,106,43,.7); }
  70%{ box-shadow:0 10px 24px -6px rgba(255,106,43,.55), 0 0 0 18px rgba(255,106,43,0); }
  100%{ box-shadow:0 10px 24px -6px rgba(255,106,43,.55), 0 0 0 0 rgba(255,106,43,0); }
}
@keyframes floatNudge{ 0%,55%,100%{ transform:scale(1); } 65%{ transform:scale(1.14); } 75%{ transform:scale(.96); } 85%{ transform:scale(1.05); } }

/* ---------- Мобильное меню ---------- */
.mobile-menu{
  position: fixed; inset:0; z-index: 300;
  background: var(--bg); padding: 24px; transform: translateX(100%);
  transition: transform .25s ease; overflow-y:auto;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px;
  position:sticky; top:-24px; margin-top:-24px; padding:24px 0 16px; background: var(--bg); z-index:2;
}
.mobile-menu-close{
  display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; border-radius:50%;
  background: var(--orange); border:none; color:#000;
  box-shadow: 0 2px 10px rgba(255,106,43,.35);
}
.mobile-menu-close span{ font-size:30px; font-weight:700; line-height:1; margin-top:-3px; }
/* Плоский пункт верхнего уровня без вложенных подпунктов —
   пропорции ориентированы на десктопный .nav a (14.5px/600), с поправкой
   на тач-таргет. */
.mobile-menu a.mobile-top-link{
  display:flex; align-items:center; padding:13px 2px; font-size:16px; font-weight:700;
  border-bottom:1px solid var(--line-2); color: var(--text);
}
/* Заголовок раскрывающейся группы — визуально как top-link, но <button>,
   т.к. сам никуда не ведёт (как href="#" у .nav-dropdown на десктопе) */
.mobile-menu-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:13px 2px; font-size:16px; font-weight:700; color: var(--text);
  background:none; border:none; border-bottom:1px solid var(--line-2); text-align:left;
}
.mobile-menu-toggle i{ font-size:13px; color: var(--text-mute); transition: transform .2s ease; }
.mobile-menu-toggle.open i{ transform: rotate(180deg); }
/* Вложенный список — пропорции ориентированы на десктопный
   .nav-dropdown-menu a (13.5px, обычное начертание, приглушённый цвет) */
.mobile-submenu{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.mobile-submenu.open{ max-height:1000px; }
.mobile-submenu a{
  display:block; padding:9px 2px 9px 18px; font-size:14px; font-weight:500;
  color: var(--text-dim); border-bottom:1px solid var(--line-2);
}
.mobile-submenu a:last-child{ border-bottom:1px solid var(--line-2); }
.mobile-menu .btn{ margin-top:24px; }

/* ---------- Хлебные крошки ---------- */
.breadcrumbs{ font-size:13px; color:var(--text-mute); padding: 20px 0 0; }
.breadcrumbs a:hover{ color: var(--gold); }
.breadcrumbs span{ margin:0 8px; opacity:.5; }
/* Динамический 3-й уровень крошек на portfolio.html (js/main.js, setPortfolioBreadcrumb):
   сама обёртка не должна тускнеть/сдвигаться как обычный разделитель — только вложенный
   в неё разделитель-span наследует общее правило выше. */
.breadcrumbs #breadcrumb-portfolio-current{ margin:0; opacity:1; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding: 76px 0 110px;
  background:
    radial-gradient(1100px 500px at 82% -10%, rgba(201,161,90,.14), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(74,134,255,.10), transparent 60%),
    var(--bg);
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:flex-start; }
@media(max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ display:block; }
  .hero-media-stack{ flex:none; }
  .hero-video-frame, .hero-image-frame{ flex:none; aspect-ratio: 4 / 3; }
}

.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.hero-badge{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  padding:8px 14px; border:1px solid var(--line); border-radius: 30px; color: var(--text-dim);
  background: rgba(255,255,255,.02);
}
.hero-badge i{ color: var(--gold); }
@media(max-width:600px){
  .hero-badges{ justify-content:center; gap:8px; }
  .hero-badge{ font-size:10px; padding:6px 10px; }
}

.hero h1{ font-size: clamp(34px, 4.6vw, 58px); line-height:1.06; margin-bottom:20px; }
.hero p.lead{ font-size:18px; color: var(--text-dim); max-width: 540px; margin-bottom: 34px; }

/* ---------- Текстовый блок hero: золотая линия + лейбл + заголовок в 3 строки + список ---------- */
.hero-text-col{ display:flex; gap:22px; }
.hero-accent-line{
  width:3px; flex:none; border-radius:0;
  background:linear-gradient(180deg, var(--gold-dim) 0%, var(--gold) 30%, var(--gold-2) 55%, var(--gold) 80%, var(--gold-dim) 100%);
}
@media(max-width:960px){
  .hero-text-col{ gap:0; }
  .hero-accent-line{ display:none; }
}

.hero-kicker{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); margin-bottom:0;
}
.hero-kicker-dash{ width:18px; height:2px; background: var(--gold); display:inline-block; flex:none; }
.hero-kicker-arrow{ display:none; }
/* На мобильных (<1080px, там же где виден бургер) заголовок с ключевыми
   словами кликабелен и открывает то же мобильное меню с направлениями,
   что и бургер/подсказка-указатель — по просьбе пользователя 22.09.2026.
   На десктопе — обычный статичный текст, стрелка скрыта. */
@media(max-width:1079px){
  .hero-kicker{ cursor:pointer; }
  .hero-kicker-arrow{ display:inline-block; font-size:10px; transition:transform .15s; }
  .hero-kicker:hover .hero-kicker-arrow{ transform:translateX(2px); }
}

/* Полноширинный заголовочный блок hero (H1 + h2 с SEO-ключами), вынесен
   из двухколоночной hero-grid и стоит над ней на всю ширину контейнера,
   по просьбе пользователя 22.09.2026 — раньше H1 был в левой колонке
   вместе с бейджами/списком, что визуально прижимало его к левому краю
   под навигацией; теперь он сразу под меню, по центру, как отдельный
   акцентный экран. */
.hero-headline{ text-align:center; max-width:900px; margin:0 auto 40px; }
@media(max-width:600px){ .hero-headline{ margin-bottom:28px; } }

.hero h1.hero-h1-split{ font-weight:800; letter-spacing:-.005em; color: var(--text); margin:0 0 26px; line-height:1.3; }
.hero-h1-line{ display:block; }
.hero-h1-line-1{ font-size: clamp(19px, 1.9vw, 23px); font-weight:700; color:#d8dce0; white-space:nowrap; margin-bottom:2px; }
.hero-h1-line-2{ font-size: clamp(19px, 1.9vw, 23px); white-space:nowrap; }
.hero-h1-line-3{ font-size: clamp(17px, 1.6vw, 20px); color: var(--gold-2); margin-top:2px; }
.hero-h1-split .hero-dot{ color: var(--gold); font-weight:600; }

/* Новый оффер hero (п.1.10, раунд 2, 22.09.2026): H1 — сильный смысл
   («один подрядчик»), ключевые слова переехали в h2.hero-kicker сразу
   под ним (стили самого .hero-kicker не трогаем — тот же вид, что был
   у прежнего kicker-div, просто теперь это реальный h2, а не div, и
   стоит после H1, а не перед). */
.hero h1.hero-h1-new{ font-weight:800; letter-spacing:-.005em; margin:0 0 14px; line-height:1.32; text-align:center; }
.hero-h1-new .h1-main{ display:block; font-size: clamp(20px, 2.6vw, 26px); color: var(--text); text-transform:uppercase; }
.hero-h1-new .h1-accent{ display:block; font-weight:600; font-size: clamp(15px, 2vw, 19px); color: var(--gold-2); margin-top:8px; }
@media(max-width:480px){
  .hero-h1-line-1, .hero-h1-line-2{ white-space:normal; font-size:18px; }
  .hero-h1-line-3{ font-size:16px; }
}

.hero-lead-block{ margin-bottom:34px; }
.hero-lead-intro{ font-size:16px; line-height:1.5; color: var(--text-dim); margin:0 0 12px; }
.hero-lead-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:7px; }
.hero-lead-list li{ font-size:15px; line-height:1.4; color: var(--text-dim); display:flex; align-items:baseline; gap:9px; }
.hero-lead-list li::before{ content:'\2014'; color: var(--gold); flex:none; }
.hero-lead-outro{ font-size:16px; line-height:1.5; color: var(--text-dim); margin:0 0 4px; max-width:520px; }
.hero-lead-outro:last-of-type{ margin-bottom:0; }
.hero-lead-outro b{ color: var(--gold-2); font-weight:700; }

.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 40px; }
.hero-trust{ display:flex; gap:28px; flex-wrap:nowrap; }
.hero-trust div{ white-space:nowrap; }
.hero-trust div b{ display:block; font-size:26px; font-weight:800; color: var(--gold-2); }
.hero-trust div span{ font-size:12.5px; color: var(--text-mute); white-space:normal; }
@media(max-width:480px){
  .hero-trust{ flex-wrap:nowrap; justify-content:center; gap:14px; }
  .hero-trust div{ text-align:center; }
  .hero-trust div b{ font-size:16px; }
  .hero-trust div span{ font-size:9px; }
}

/* Анатомия буквы — фирменная SVG-иллюстрация в hero */
.hero-visual{ position:relative; display:flex; flex-direction:column; }
.hero-visual svg{ width:100%; height:auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }

/* Кликабельное фото-превью в hero (вместо SVG-иконки-заглушки), открывает галерею примеров */
button.hero-visual-photo{
  position:relative; width:100%; aspect-ratio: 560 / 380; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-2); padding:0; margin:0; cursor:pointer; font:inherit;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
.hero-visual-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:.2s; }
.hero-visual-photo .collage-hover{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  background: rgba(10,10,12,.55); color:#fff; font-size:14px; font-weight:700;
  opacity:0; transition:.18s; pointer-events:none;
}
.hero-visual-photo:hover .collage-hover{ opacity:1; }
.hero-visual-photo:hover img{ filter: brightness(.85); transform: scale(1.04); }

.hero-visual-caption{
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  background: var(--bg-3); border:1px solid var(--line); padding:10px 18px; border-radius:30px;
  font-size:12.5px; font-weight:700; color: var(--gold-2); white-space:nowrap;
  box-shadow: var(--shadow-card);
}
a.hero-visual-caption{ cursor:pointer; transition:.15s; }
a.hero-visual-caption:hover{ border-color: var(--gold-dim); background: var(--bg-4); }

/* Видео + фото изготовления буквы в hero (единый блок).
   Высота .hero-visual выставляется в JS по высоте текстовой колонки (см. main.js),
   поэтому карточки никогда не выступают за нижнюю границу текста. */
.hero-media-stack{
  display:flex; flex-direction:column; gap:10px;
  width: 100%; max-width: 360px; margin: 0 auto;
  height: 100%;
}
.hero-video-frame, .hero-image-frame{
  position:relative;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow:hidden;
  box-shadow: var(--shadow-pop);
  flex: 1 1 0;
  min-height: 0;
}
.hero-image-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1;
}
.hero-video-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  z-index:2; transition: opacity .35s ease; cursor:pointer;
}
.hero-video-frame.is-playing .hero-video-poster{ opacity:0; pointer-events:none; }
.hero-video-play-hint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; z-index:3;
  background: rgba(18,19,23,.55); backdrop-filter: blur(4px);
  border:1px solid var(--line-2); color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .25s ease, transform .25s ease; pointer-events:none;
}
.hero-video-play-hint i{ margin-left:3px; }
.hero-video-frame:hover .hero-video-play-hint{ transform:translate(-50%,-50%) scale(1.08); border-color: var(--gold); }
.hero-video-frame.is-playing .hero-video-play-hint{ opacity:0; }
.hero-media-tag{
  position:absolute; left:12px; bottom:12px; z-index:4;
  background: rgba(18,19,23,.72); backdrop-filter: blur(4px);
  border:1px solid var(--line-2); padding:6px 12px; border-radius:20px;
  font-size:11px; font-weight:700; color: var(--gold-2);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
@media(max-width:960px){ .hero-media-stack{ max-width:260px; } }

/* ---------- Логотипы-партнёры / полоса доверия ---------- */
.strip{
  background: var(--bg-2); border-bottom:1px solid var(--line);
  padding: 22px 0;
}
.strip .container{
  display:flex; align-items:center; justify-content:center; row-gap:14px; column-gap:26px;
  flex-wrap:wrap;
}
.strip-item{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-dim); font-weight:600; white-space:nowrap; flex-shrink:0; }
.strip-item i{ color: var(--gold); }
@media(min-width:1200px){ .strip .container{ flex-wrap:nowrap; } }

/* ---------- Таблица сравнения ---------- */
.compare{
  width:100%; border-collapse: separate; border-spacing:0;
  background: var(--bg-2); border-radius: var(--radius-l); overflow:hidden;
  border: 1px solid var(--line);
}
.compare th, .compare td{ padding: 18px 20px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line-2); }
.compare th{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); font-weight:700; text-align:left; }
.compare td:first-child{ font-weight:700; color:var(--text); }
.compare tr:last-child td{ border-bottom:none; }
.compare .col-us{ background: rgba(201,161,90,.06); }
.compare th.col-us{ color: var(--gold-2); position:relative; }
.compare .yes{ color: var(--ok); }
.compare .no{ color: #d16060; }
.compare-wrap{ position:relative; overflow-x:auto; border-radius: var(--radius-l); }
.compare-wrap::-webkit-scrollbar{ height:6px; }
.compare-wrap::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius:6px; }

/* Подсказка о горизонтальном скролле на мобильном (аудит 13.09.2026,
   раздел 3 хэндоффа: overflow-x:auto и так работает, но без визуальной
   подсказки таблица на узких экранах выглядит как обрезанная/сломанная,
   а не как "можно пролистать"). Текст показываем только там, где таблица
   реально не помещается по ширине контейнера — на десктопе скрыт. */
.compare-scroll-hint{
  display:none; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color: var(--text-mute);
  margin-bottom:10px; letter-spacing:.02em;
}
.compare-scroll-hint i{ color: var(--gold-2); font-size:11px; }
@media(max-width:820px){
  .compare-scroll-hint{ display:flex; }
  /* Затухающий край справа — визуально подсказывает, что контент продолжается
     за границей видимой области. Скрывается через JS (main.js), когда
     пользователь доскроллил таблицу до конца. */
  .compare-wrap::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:36px;
    background: linear-gradient(to right, transparent, var(--bg-2) 85%);
    pointer-events:none; transition: opacity .2s ease;
  }
  .compare-wrap.is-scrolled-end::after{ opacity:0; }
}

/* ---------- Карточки преимуществ ---------- */
.grid-5{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media(max-width:1100px){ .grid-5{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:640px){ .grid-5{ grid-template-columns: 1fr; } }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media(max-width:860px){ .grid-3{ grid-template-columns: 1fr; } }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media(max-width:760px){ .grid-2{ grid-template-columns: 1fr; } }

.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media(max-width:1000px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 30px 26px; transition: border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.card-icon{
  width:52px; height:52px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--bg-4), var(--bg-3)); border:1px solid var(--line);
  color: var(--gold); font-size:21px; margin-bottom:18px;
}
.card h3{ font-size:17px; margin-bottom:10px; }
.card p{ font-size:14.5px; color: var(--text-dim); margin:0; }
/* Ссылка «Смотреть примеры работ» внизу карточки (страница застройщиков, «Порядок подготовки»).
   Карточка становится flex-колонкой только если в ней есть такая ссылка — ссылки выравниваются по низу. */
.card:has(> .card-more, > .card-more-row){ display:flex; flex-direction:column; }
.card-more, .card-more-row{ margin-top:auto; padding-top:16px; }
.card-more{ color: var(--gold-2); font-weight:700; font-size:14px; text-decoration:none; }
.card-more:hover{ text-decoration:underline; }
.card-more-row{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.card-more-label{ flex-basis:100%; color: var(--text-dim); font-size:13px; }
.card-more-row .card-more{ margin-top:0; padding-top:0; }
/* Переход по якорю #gallery из других страниц: заголовок не прячется под липкой шапкой */
#gallery{ scroll-margin-top: 90px; }

/* ---------- Главная: три входа по типу заказчика ---------- */
.segment-card{ display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.segment-card h3{ font-size:19px; }
.segment-card .segment-who{ color: var(--text-dim); font-size:14px; margin-bottom:14px; }
.segment-card .segment-what{ color: var(--text); font-weight:600; font-size:15.5px; line-height:1.5; }
.segment-arrow{ color: var(--gold); font-weight:700; font-size:1.15em; }
.segment-card .segment-what .segment-why{ color: var(--gold-2); font-weight:600; }
.segment-cta{ margin-top:auto; padding-top:18px; color: var(--gold-2); font-weight:700; font-size:14.5px; }
.segment-card:hover .segment-cta{ text-decoration:underline; }
.nowrap{ white-space:nowrap; }
/* Десктоп: строки карточек выровнены между собой (subgrid) — заголовки разной длины
   (1/3/2 строки) больше не сдвигают «кто», «что → выгода» и кнопку по вертикали.
   Браузер без subgrid просто покажет прежнюю раскладку. */
@media(min-width:861px){
  @supports (grid-template-rows: subgrid){
    .segments-grid{ row-gap:0; }
    .segment-card{ display:grid; grid-row: span 5; grid-template-rows: subgrid; row-gap:0; }
    .segment-cta{ align-self:start; margin-top:0; }
  }
}
@media(max-width:860px){
  /* на мобильных иконка в строку с заголовком — блок короче почти на экран */
  .segment-card{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; padding:22px 20px; }
  .segment-card > *{ grid-column:1 / -1; }
  .segment-card .card-icon{ grid-column:1; width:44px; height:44px; font-size:18px; margin:0 0 12px; }
  .segment-card h3{ grid-column:2; align-self:center; margin:0 0 12px; }
  .segment-cta{ padding-top:12px; }
  .segments-grid{ gap:14px; }
}

/* ---------- Галерея кейсов ---------- */
.case-slider{ display:flex; gap:22px; overflow-x:auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
.case-slider::-webkit-scrollbar{ height:8px; }
.case-slider::-webkit-scrollbar-thumb{ background: var(--bg-4); border-radius:8px; }
.case-card{
  scroll-snap-align:start; flex: 0 0 340px;
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden;
}
.case-thumb{
  height: 210px; position:relative;
  background: linear-gradient(135deg, var(--bg-4), var(--bg-3));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.case-thumb i{ font-size:46px; color: var(--gold-dim); }
.case-thumb .tag{
  position:absolute; top:14px; left:14px; background: rgba(18,19,23,.8); border:1px solid var(--line);
  padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:700; color: var(--gold-2);
}
.case-body{ padding: 22px; }
.case-body h3{ font-size:16.5px; margin-bottom:12px; }
.case-row{ display:flex; gap:10px; font-size:13px; margin-bottom:6px; color:var(--text-dim); }
.case-row b{ color: var(--text); font-weight:600; min-width:64px; }
.slider-nav{ display:flex; gap:10px; justify-content:flex-end; margin-bottom:24px; }
.slider-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background: var(--bg-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.slider-nav button:hover{ border-color: var(--gold); color: var(--gold-2); }

.case-card-more{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color: var(--text); min-height: 100%;
  transition:.15s;
}
.case-card-more:hover{ border-color: var(--gold); background: var(--bg-3); }
.case-more-inner{ text-align:center; padding:22px; }
.case-more-inner i{ font-size:26px; color: var(--gold-2); display:block; margin-bottom:14px; }
.case-more-title{ display:block; font-weight:700; font-size:16px; color: var(--text); margin-bottom:6px; }
.case-more-sub{ display:block; color: var(--text-dim); font-size:13px; }

/* ---------- Отзывы / соц. доказательства ---------- */
.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-bottom: 56px; }
@media(max-width:760px){ .stats-row{ grid-template-columns: repeat(2,1fr); } }
.stat-box{ text-align:center; padding: 26px 10px; border:1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-2); }
.stat-box b{ display:block; font-size: clamp(26px,3vw,38px); font-weight:800; color:var(--gold-2); }
.stat-box span{ font-size:13px; color: var(--text-mute); }

.review-slider{ display:flex; gap:22px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory; }
.review-card{
  scroll-snap-align:start; flex:0 0 380px;
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); padding:26px;
}
.review-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.review-avatar{
  width:50px; height:50px; border-radius:50%; background: linear-gradient(155deg, var(--bg-4), var(--bg-3));
  display:flex; align-items:center; justify-content:center; font-weight:800; color: var(--gold-2); border:1px solid var(--line);
}
.review-name{ font-weight:700; font-size:14.5px; }
.review-role{ font-size:12.5px; color: var(--text-mute); }
.review-stars{ color:var(--gold); font-size:13px; margin-bottom:10px; }
.review-text{ font-size:14px; color: var(--text-dim); }

/* ---------- Этапы работы ---------- */
.steps{ display:grid; grid-template-columns: repeat(6,1fr); gap:16px; counter-reset: step; }
@media(max-width:980px){ .steps{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:600px){ .steps{ grid-template-columns: 1fr 1fr; } }
.step{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); padding: 24px 18px;
  position:relative; min-width:0;
}
.step-num{ font-size:12px; font-weight:800; color: var(--gold-dim); letter-spacing:.08em; margin-bottom:14px; }
.step i{ font-size:24px; color: var(--gold); margin-bottom:14px; display:block; }
.step h4{ font-size:14.5px; margin-bottom:8px; }
.step p{ font-size:12.8px; color: var(--text-mute); margin:0; }

.calc-order-summary{
  background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--radius-s);
  padding:16px 18px; margin-bottom:22px; font-size:13px;
}
.calc-order-summary div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; color: var(--text-dim); }
.calc-order-summary div span:first-child{ color: var(--text-mute); }
.calc-order-summary div span:last-child{ font-weight:700; color: var(--text); text-align:right; }
.calc-order-summary-total{ border-top:1px solid var(--line-2); margin-top:6px; padding-top:10px !important; }
.calc-order-summary-total span{ color: var(--gold-2) !important; font-size:15px; font-weight:800 !important; }

/* ---------- Квиз (переработан 23.09.2026: 4 шага вместо 7 экранов) ----------
   Раскладка: полоса шагов сверху; слева — текущий шаг, справа — панель
   «Ваш выбор» (на <900px скрыта, её роль берёт полоса шагов с галочками).
   Каркас выровнен по контейнеру, как заголовок секции (раньше max-width 720 + auto — висел по центру). */
.quiz{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 0; overflow:hidden;
}
.quiz-rail{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line-2); counter-reset:none;
}
.quiz-rail-item button{
  width:100%; display:flex; align-items:center; gap:12px; padding:18px 24px;
  background:none; border:none; font-family:var(--font); color:var(--text-mute); cursor:default;
  position:relative; text-align:left;
}
.quiz-rail-item + .quiz-rail-item button{ border-left:1px solid var(--line-2); }
.quiz-rail-item button::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; transition:background .2s;
}
.quiz-rail-num{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); font-size:13px; font-weight:800; transition:.2s;
}
.quiz-rail-label{ font-size:14px; font-weight:700; }
.quiz-rail-item.is-current button{ color:var(--text); }
.quiz-rail-item.is-current button::after{ background:var(--gold); }
.quiz-rail-item.is-current .quiz-rail-num{ border-color:var(--gold); color:var(--gold-2); }
.quiz-rail-item.is-done button{ color:var(--text-dim); cursor:pointer; }
.quiz-rail-item.is-done button:hover{ color:var(--gold-2); }
.quiz-rail-item.is-done .quiz-rail-num{ background:var(--gold); border-color:var(--gold); color:#1a1408; font-size:0; }
.quiz-rail-item.is-done .quiz-rail-num::before{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:12px; }

.quiz-layout{ display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.quiz-main{ padding:36px 40px 32px; min-width:0; }
.quiz-summary{ border-left:1px solid var(--line-2); padding:32px 28px; background:rgba(255,255,255,.015); }
.quiz-summary-title{ font-size:15px; font-weight:800; margin-bottom:16px; }
.quiz-summary-list{ margin:0 0 20px; }
.quiz-summary-list div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:13px; }
.quiz-summary-list dt{ color:var(--text-mute); }
.quiz-summary-list dd{ margin:0; font-weight:700; color:var(--text-mute); text-align:right; }
.quiz-summary-list dd.is-set{ color:var(--gold-2); }
.quiz-summary-note{ font-size:12.5px; color:var(--text-mute); line-height:1.55; margin:0; }

.quiz-step{ display:none; }
.quiz-step.active{ display:block; animation: quizFadeIn .25s ease; }
@keyframes quizFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .quiz-step.active{ animation:none; } }
.quiz-question{ font-size:22px; font-weight:800; margin:0 0 22px; }
.quiz-sub{ font-size:15px; font-weight:800; margin:28px 0 12px; }

/* Шаг 1 — плитки */
.quiz-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.quiz-tile{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:18px;
  min-height:104px; padding:16px; text-align:left; cursor:pointer; position:relative;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); transition:border-color .15s, background .15s;
}
.quiz-tile i{ font-size:20px; color:var(--gold); }
.quiz-tile span{ font-size:14px; font-weight:700; line-height:1.3; }

/* Общие состояния выбора для плиток/карточек */
.quiz-tile:hover, .quiz-place-card:hover, .quiz-budget-card:hover, .quiz-bltype:hover{ border-color:var(--gold-dim); }
.quiz-tile[aria-pressed="true"], .quiz-place-card[aria-pressed="true"], .quiz-budget-card[aria-pressed="true"], .quiz-bltype[aria-pressed="true"]{
  border-color:var(--gold); background:rgba(201,161,90,.1);
}
.quiz-tile[aria-pressed="true"]::after, .quiz-place-card[aria-pressed="true"]::after, .quiz-budget-card[aria-pressed="true"]::after, .quiz-bltype[aria-pressed="true"]::after{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px;
  position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--gold); color:#1a1408;
}
.quiz-tile:focus-visible, .quiz-place-card:focus-visible, .quiz-budget-card:focus-visible, .quiz-bltype:focus-visible,
.quiz-seg-opt:focus-visible, .quiz-rail-item button:focus-visible, .quiz-stepper button:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px;
}

/* Шаг 2 — карточки места + сегмент */
.quiz-place{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-place-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:20px; position:relative;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
}
.quiz-place-card i{ font-size:22px; color:var(--gold); margin-bottom:10px; }
.quiz-place-title{ font-size:15px; font-weight:800; }
.quiz-place-text{ font-size:13px; color:var(--text-mute); line-height:1.5; }
.quiz-seg{
  display:inline-flex; padding:4px; gap:4px; background:var(--bg-3); border:1px solid var(--line-2); border-radius:10px; max-width:100%;
}
.quiz-seg-opt{
  padding:11px 20px; border:none; border-radius:7px; background:transparent; color:var(--text-dim);
  font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;
}
.quiz-seg-opt:hover{ color:var(--text); }
.quiz-seg-opt[aria-pressed="true"]{ background:var(--gold); color:#1a1408; }
.quiz-hint{ font-size:13px; color:var(--text-mute); line-height:1.55; margin-top:12px; max-width:560px; }

.quiz-card-price-sub{ font-size:12px; font-weight:600; color:var(--text-mute); margin-left:4px; }

/* Шаг 2 — тип подсветки (появляется при «Да») */
.quiz-bltypes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.quiz-bltype{
  display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:0 0 14px; position:relative; overflow:hidden;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
}
.quiz-bltype-media{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--bg-4); margin-bottom:8px; overflow:hidden; }
.quiz-bltype-media picture{ width:100%; height:100%; }
.quiz-bltype-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.quiz-bltype-media i{ font-size:28px; color:var(--gold); }
.quiz-bltype-title{ font-size:14px; font-weight:800; padding:0 12px; }
.quiz-bltype-text{ font-size:12.5px; color:var(--text-mute); line-height:1.45; padding:0 12px; }

/* Шаг 3 — размер: органы управления + масштабная сцена */
.quiz-size{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:center; }
.quiz-field + .quiz-field{ margin-top:26px; }
.quiz-field-label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; font-weight:700; color:var(--text-dim); margin-bottom:12px; }
.quiz-field-label output{ font-size:20px; font-weight:800; color:var(--gold-2); white-space:nowrap; }
.quiz-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-3); }
.quiz-stepper button{
  width:48px; height:48px; border:none; background:none; color:var(--text); font-size:14px; cursor:pointer; border-radius:10px;
}
.quiz-stepper button:hover{ color:var(--gold-2); }
.quiz-stepper input{
  width:64px; height:48px; text-align:center; background:transparent; border:none; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  color:var(--text); font-family:var(--font); font-weight:800; font-size:18px; -moz-appearance:textfield;
}
.quiz-stepper input::-webkit-outer-spin-button, .quiz-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.quiz-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; margin:10px 0;
  background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill,26%), var(--bg-4) var(--fill,26%));
}
.quiz-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--gold-2);
  border:4px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:grab;
}
.quiz-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gold-2); border:4px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:grab; }
.quiz-range:focus-visible{ outline:2px solid var(--gold-2); outline-offset:6px; }
.quiz-range-scale{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-mute); }
.quiz-scene{ margin:0; background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m); padding:14px 14px 10px; }
.quiz-scene svg{ display:block; width:100%; height:auto; }
.quiz-scene figcaption{ font-size:12px; color:var(--text-mute); margin-top:6px; }
.qs-ground{ stroke:var(--steel); stroke-opacity:.35; stroke-width:2; }
.qs-door{ fill:none; stroke:var(--steel); stroke-opacity:.3; stroke-width:1.5; }
.qs-person{ fill:var(--steel); opacity:.55; }
.qs-letters{ fill:var(--gold); font-family:var(--font); font-weight:800; }
.qs-dim{ stroke:var(--gold-2); stroke-width:1.2; }
.qs-dim-text{ fill:var(--gold-2); font-family:var(--font); font-weight:800; font-size:15px; }
.qs-person-text{ fill:var(--text-dim); font-family:var(--font); font-weight:700; font-size:13px; }

/* Шаг 4 — бюджет */
.quiz-budget{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.quiz-budget-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px 18px 20px; position:relative;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
}
.quiz-budget-title{ font-size:16px; font-weight:800; }
.quiz-budget-text{ font-size:13px; color:var(--text-mute); line-height:1.5; padding-right:14px; }

/* Навигация шага */
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:30px; }
.quiz-next{ min-width:180px; }
.quiz-back{
  display:inline-flex; align-items:center; gap:8px; background:none; border:none;
  color: var(--text-mute); font-size:13.5px; font-weight:600; cursor:pointer; font-family: var(--font); padding:10px 0;
}
.quiz-back:hover{ color: var(--gold-2); }
.quiz-region-other{ margin-top:16px; max-width:340px; }
.quiz-region-other label{ display:block; font-size:13px; font-weight:700; color: var(--text-dim); margin-bottom:8px; }
.quiz-region-other input{
  width:100%; background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--radius-m);
  padding:13px 16px; color: var(--text); font-family: var(--font); font-size:15px;
}
.quiz-region-other input:focus{ outline:none; border-color:var(--gold); }
.quiz-result{ padding:36px 40px; }

@media(max-width:1080px){
  .quiz-layout{ grid-template-columns:minmax(0,1fr) 240px; }
  .quiz-main{ padding:30px 28px; }
  .quiz-size{ grid-template-columns:1fr; }
  .quiz-scene{ max-width:460px; }
}
@media(max-width:900px){
  .quiz-layout{ grid-template-columns:1fr; }
  .quiz-summary{ display:none; }
  .quiz-rail-item button{ flex-direction:column; align-items:center; gap:6px; padding:14px 6px; text-align:center; }
  .quiz-rail-label{ font-size:12px; }
  .quiz-result{ padding:26px 22px; }
}
@media(max-width:640px){
  .quiz-main{ padding:24px 18px 22px; }
  .quiz-question{ font-size:19px; margin-bottom:16px; }
  .quiz-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .quiz-tile{ min-height:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; padding:14px 30px 14px 14px; }
  .quiz-tile i{ font-size:17px; width:20px; text-align:center; }
  .quiz-tile[aria-pressed="true"]::after{ top:50%; transform:translateY(-50%); right:10px; }
  .quiz-place{ grid-template-columns:1fr; }
  .quiz-place-card{ padding:16px 44px 16px 16px; }
  .quiz-place-card i{ margin-bottom:4px; }
  .quiz-budget{ grid-template-columns:1fr; gap:10px; }
  .quiz-bltypes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .quiz-budget-card{ padding:14px 44px 14px 16px; gap:4px; }
  .quiz-seg{ display:flex; width:100%; }
  .quiz-seg-opt{ flex:1; padding:12px 6px; font-size:13.5px; white-space:normal; }
  .quiz-nav{ margin-top:24px; }
  .quiz-next{ min-width:0; flex:1; max-width:220px; }
}
@media(max-width:380px){
  .quiz-tiles{ grid-template-columns:1fr; }
  .quiz-seg{ flex-direction:column; }
  .quiz-seg-opt{ padding:11px 12px; }
}
.quiz-result-title{ font-size:22px; font-weight:800; margin-bottom:10px; }
.quiz-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-top:6px; }
.quiz-card{
  background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--radius-s); padding:22px;
  display:flex; flex-direction:column; gap:12px;
}
.quiz-card-head{ display:flex; flex-direction:column; gap:8px; }
.quiz-card-title{ font-size:15.5px; font-weight:800; color: var(--gold-2); }
.quiz-tag{ display:inline-block; width:fit-content; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }
.quiz-tag-ok{ background: rgba(95,191,122,.15); color: var(--ok); }
.quiz-tag-warn{ background: rgba(255,106,43,.15); color: var(--orange-2); }
.quiz-card-note{ font-size:13px; color: var(--text-mute); line-height:1.5; margin:0; flex:1; }
.quiz-card-btn{ font-size:13px; padding:12px 16px; }
.quiz-notes{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line-2); }
.quiz-notes p{ font-size:13px; color: var(--text-mute); line-height:1.6; margin:0 0 8px; }
.quiz-notes p:last-child{ margin-bottom:0; }
.quiz-card-price{ font-size:20px; font-weight:800; color: var(--gold-2); }
.quiz-card-price-muted{ font-size:13.5px; font-weight:600; color: var(--text-mute); }
.quiz-lead{ margin-top:32px; padding-top:28px; border-top:1px solid var(--line-2); }
.quiz-lead-title{ font-size:17px; font-weight:800; margin-bottom:8px; }
.quiz-lead-lead{ font-size:13px; color: var(--text-mute); margin-bottom:20px; line-height:1.5; }
.quiz-restart-link{
  display:inline-block; margin-top:22px; background:none; border:none; color: var(--gold-2);
  font-size:13px; font-weight:700; cursor:pointer; font-family: var(--font); padding:0; text-decoration:underline;
}
.quiz-restart-link:hover{ color: var(--gold); }

/* ---------- Объединённый инструмент главной: калькулятор + подбор (24.09.2026) ----------
   Каркас — от квиза (.quiz, .quiz-rail, .quiz-layout, .quiz-summary),
   поля — компоненты калькулятора (.calc-*). */
.calc-tool [hidden]{ display:none !important; }
.tool-anchor{ position:relative; top:-100px; display:block; height:0; }
.tool-start{ padding:36px 40px 40px; }
.tool-entry{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tool-entry-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px; text-align:left; cursor:pointer;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); transition:border-color .15s, background .15s, transform .15s;
}
.tool-entry-card i{ font-size:24px; color:var(--gold); margin-bottom:10px; }
.tool-entry-title{ font-size:18px; font-weight:800; }
.tool-entry-text{ font-size:13.5px; color:var(--text-mute); line-height:1.5; }
.tool-entry-card:hover{ border-color:var(--gold); background:rgba(201,161,90,.07); }
.tool-entry-card:focus-visible{ outline:2px solid var(--gold-2); outline-offset:2px; }
.calc-tool .quiz-rail{ grid-template-columns:repeat(var(--rail-count,4),minmax(0,1fr)); }
.calc-tool .quiz-step .calc-field:last-of-type{ margin-bottom:0; }
.calc-tool .calc-result{ position:static; top:auto; margin-top:22px; }
.calc-tool .hint{ font-size:12.5px; color: var(--text-mute); margin-top:10px; line-height:1.5; }
.quiz-question + .quiz-sub{ margin-top:0; }
.tool-reco-note{ font-size:13px; color:var(--text-dim); margin:-10px 0 16px; }
.calc-mat.is-recommended{ border-style:dashed; border-color:var(--gold-dim); }
.calc-mat.is-recommended.active{ border-style:solid; border-color:var(--gold); }
.calc-mat.is-recommended::before{
  content:'под ваш бюджет'; position:absolute; left:10px; top:-9px; padding:1px 8px; border-radius:10px;
  background:var(--gold); color:#1a1408; font-size:10.5px; font-weight:800; line-height:16px;
}
.calc-tool .calc-mats{ row-gap:16px; padding-top:4px; }
.tool-sum-price{ border-top:1px solid var(--line-2); padding-top:16px; margin-top:4px; display:flex; flex-direction:column; gap:4px; }
.tool-sum-price-label{ font-size:12.5px; color:var(--text-mute); }
.tool-sum-price-value{ font-size:26px; font-weight:800; color:var(--gold-2); line-height:1.1; }
.tool-sum-price-note{ font-size:12px; color:var(--text-mute); line-height:1.4; }
/* Финальный CTA на шаге «Итог» (24.09.2026) */
.tool-cta{
  margin-top:22px; padding:26px; border-radius:var(--radius-l);
  border:1px solid var(--gold-dim); background:linear-gradient(160deg, rgba(201,161,90,.12), rgba(201,161,90,.02) 55%), var(--bg-3);
}
.tool-cta-title{ font-size:20px; font-weight:800; margin:0 0 6px; }
.tool-cta-lead{ font-size:13.5px; color:var(--text-dim); line-height:1.5; margin:0 0 14px; }
.tool-cta-sum{ font-size:13px; color:var(--text-mute); line-height:1.5; margin:0 0 18px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.18); border:1px dashed var(--line-2); }
.tool-cta-sum b{ color:var(--text); font-weight:700; }
.tool-cta-fields{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.tool-cta-form .btn{ margin-top:4px; }
.tool-cta-success{ padding:18px 0 6px; }
.tool-cta-success h3{ font-size:20px; margin-bottom:6px; }
.tool-cta-success p{ color:var(--text-dim); font-size:14px; margin-bottom:16px; }
.tool-cta-alt{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2); }
.tool-cta-alt-label{ display:block; font-size:13px; font-weight:700; color:var(--text-dim); margin-bottom:8px; }
.tool-cta .messenger-row{ flex-wrap:wrap; }
.tool-cta .messenger-btn{ flex:1 1 92px; min-width:0; }
.tool-cta-note{ font-size:12px; color:var(--text-mute); margin:8px 0 0; }
.tool-cta-note.is-ok{ color:var(--ok, #5fdf94); font-weight:700; }
.tool-cta-viz{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line-2); color:var(--text-dim); font-size:13px; line-height:1.45; text-decoration:none; transition:border-color .15s, color .15s;
}
.tool-cta-viz i{ color:var(--gold); font-size:16px; flex:0 0 auto; }
.tool-cta-viz b{ color:var(--gold-2); white-space:nowrap; }
.tool-cta-viz:hover{ border-color:var(--gold-dim); color:var(--text); }

@media(max-width:640px){
  .tool-start{ padding:24px 18px; }
  .tool-cta{ padding:20px 16px; }
  .tool-cta-fields{ grid-template-columns:1fr; }
  .tool-cta-viz b{ white-space:normal; }
  .tool-entry{ grid-template-columns:1fr; }
  .tool-entry-card{ padding:18px; }
  .calc-mat.is-recommended::before{ font-size:9.5px; left:8px; }
}
@media(max-width:480px){
  .calc-tool .quiz-rail-item:not(.is-current) .quiz-rail-label{ display:none; }
  .calc-tool .quiz-rail-item button{ padding:12px 4px; }
}

/* ---------- Калькулятор (интерфейс переработан 24.09.2026, вариант А) ----------
   Тот же визуальный язык, что у квиза: плитки материалов с образцом
   металла, карточки конструкции с мини-схемой, карточки подсветки с фото,
   золотой ползунок + масштабная схема (js/scale-scene.js), степпер.
   Логика расчёта — js/calculator.js, без изменений в формулах. */
.calc{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 40px; display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 40px;
}
@media(max-width:900px){ .calc{ grid-template-columns:1fr; padding:26px 20px; } }
.calc-field{ margin-bottom: 30px; min-width:0; }
.calc-field > label{ display:block; font-size:15px; font-weight:800; color: var(--text); margin-bottom:14px; }
.calc .hint{ font-size:12.5px; color: var(--text-mute); margin-top:10px; line-height:1.5; }

/* Образцы металла */
.calc-swatch{ flex:0 0 auto; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.calc-swatch.sm{ width:18px; height:18px; border-radius:5px; }
.sw-silver-gloss{ background: linear-gradient(135deg,#f5f7f9 0%,#9ea7b0 38%,#eef1f3 52%,#7c858e 78%,#d9dee2 100%); }
.sw-silver-brush{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), linear-gradient(135deg,#c9ced3,#9aa2a9 60%,#c2c8cd); }
.sw-gold-gloss{ background: linear-gradient(135deg,#fff0bf 0%,#c8942f 36%,#f7d884 52%,#8e6421 78%,#e8c56a 100%); }
.sw-gold-brush{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px), linear-gradient(135deg,#d8b56a,#a67b31 60%,#cfa95c); }
.sw-brass{ background: linear-gradient(135deg,#e2c27a 0%,#a8813a 45%,#d6b56e 60%,#7d5f28 100%); }
.sw-rust{ background: radial-gradient(circle at 30% 30%, #c0621f 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #6e2e10 0 22%, transparent 23%), radial-gradient(circle at 75% 25%, #9c4516 0 12%, transparent 13%), linear-gradient(135deg,#8a3d14,#5a2710); }
.sw-ral{ background: conic-gradient(#c62828 0 25%, #f2b01e 0 50%, #1f6fb2 0 75%, #2a2c30 0); }
.sw-alu{ background: linear-gradient(135deg,#d7dbde 0%,#a9afb4 50%,#c8cdd1 100%); }

/* Плитки материалов (главная) */
.calc-mats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.calc-mat{
  display:flex; align-items:center; gap:12px; padding:12px 36px 12px 14px; min-height:60px; position:relative;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
}
.calc-mat-title{ font-size:13.5px; font-weight:700; line-height:1.3; }
.calc-mat:hover{ border-color:var(--gold-dim); }
.calc-mat.active{ border-color:var(--gold); background:rgba(201,161,90,.1); }
.calc-mat.is-static{ cursor:default; border-color:var(--gold); background:rgba(201,161,90,.08); display:inline-flex; padding-right:20px; }
.calc-finish{ margin-top:14px; }
.calc-finish[hidden]{ display:none; }
.calc-finish-label{ display:block; font-size:13px; font-weight:700; color:var(--text-dim); margin-bottom:8px; }
.calc-seg{ display:inline-flex; gap:4px; padding:4px; background:var(--bg-3); border:1px solid var(--line-2); border-radius:10px; max-width:100%; }
.calc-seg-opt{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:none; border-radius:7px; background:transparent;
  color:var(--text-dim); font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer; transition:background .15s, color .15s;
}
.calc-seg-opt:hover{ color:var(--text); }
.calc-seg-opt.active{ background:var(--gold); color:#1a1408; }

/* Высота: ползунок + схема */
.calc-height{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:center; }
.calc-height-out{ display:block; font-size:26px; font-weight:800; color:var(--gold-2); line-height:1; margin-bottom:10px; }
.calc-range-input{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; margin:10px 0;
  background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill,26%), var(--bg-4) var(--fill,26%));
}
.calc-range-input::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--gold-2); border:4px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:grab; }
.calc-range-input::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gold-2); border:4px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:grab; }
.calc-range-input:focus-visible{ outline:2px solid var(--gold-2); outline-offset:6px; }
.calc-range-scale{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-mute); }
.calc-scene{ margin:0; background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m); padding:10px 10px 8px; }
.calc-scene svg{ display:block; width:100%; height:auto; }
.calc-scene figcaption{ font-size:11.5px; color:var(--text-mute); margin-top:4px; }

/* Конструкция буквы */
.calc-cons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.calc-con{
  display:flex; flex-direction:column; gap:4px; padding:14px; position:relative; cursor:pointer; user-select:none;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m); transition:border-color .15s, background .15s, opacity .15s;
}
.calc-con-icon{ width:52px; height:36px; margin-bottom:8px; }
.calc-con-icon .cc-face{ fill:var(--gold); }
.calc-con-icon .cc-side{ fill:var(--gold-dim); opacity:.55; }
.calc-con-icon .cc-line{ fill:none; stroke:var(--gold); stroke-width:4; stroke-linecap:round; }
.calc-con-title{ font-size:14px; font-weight:800; color:var(--text); }
.calc-con-text{ font-size:12.5px; color:var(--text-mute); line-height:1.4; }
.calc-con:hover{ border-color:var(--gold-dim); }
.calc-con.active{ border-color:var(--gold); background:rgba(201,161,90,.1); }
.calc-con.disabled{ opacity:.4; cursor:not-allowed; }
.calc-con.disabled:hover{ border-color:var(--line-2); }

/* Количество — степпер */
.calc-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-3); gap:0; }
.calc-stepper button{ width:48px; height:48px; border:none; background:none; color:var(--text); font-size:20px; cursor:pointer; border-radius:10px; }
.calc-stepper button:hover{ color:var(--gold-2); }
.calc-stepper input{
  width:64px; height:48px; text-align:center; background:transparent; border:none; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  color:var(--text); font-family:var(--font); font-weight:800; font-size:18px; -moz-appearance:textfield;
}
.calc-stepper input::-webkit-outer-spin-button, .calc-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Подсветка — карточки */
.calc-lights{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.calc-light{
  display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:0 0 12px; position:relative; overflow:hidden;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--radius-m);
  font-family:var(--font); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, background .15s, opacity .15s;
}
.calc-light[hidden]{ display:none; }
.calc-light-media{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--bg-4); margin-bottom:8px; overflow:hidden; }
.calc-light-media picture{ width:100%; height:100%; }
.calc-light-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.calc-light-media i{ font-size:26px; color:var(--text-mute); }
.calc-light-title{ font-size:13px; font-weight:800; padding:0 10px; line-height:1.3; }
.calc-light-note{ font-size:11.5px; font-weight:700; color:var(--orange-2, #ff8a50); padding:0 10px; min-height:0; }
.calc-light-note:empty{ display:none; }
.calc-light:hover{ border-color:var(--gold-dim); }
.calc-light.active{ border-color:var(--gold); background:rgba(201,161,90,.1); }
.calc-light.disabled{ opacity:.38; cursor:not-allowed; }
.calc-light.disabled:hover{ border-color:var(--line-2); }
.calc-light.disabled .calc-light-note{ color:var(--text-mute); }

/* Общая галочка выбранного */
.calc-mat.active::after, .calc-con.active::after, .calc-light.active::after{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px;
  position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--gold); color:#1a1408;
}
.calc-mat.active::after{ top:50%; transform:translateY(-50%); }
.calc-mat.is-static::after{ display:none; }
.calc-mat:focus-visible, .calc-con:focus-visible, .calc-light:focus-visible, .calc-seg-opt:focus-visible, .calc-stepper button:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px;
}

/* Старые элементы — остаются на странице алюминия (2 независимых тумблера) */
.calc-options{ display:flex; gap:10px; flex-wrap:wrap; }
.calc-opt{
  padding: 12px 18px; border:1px solid var(--line-2); border-radius: var(--radius-s); font-size:13.5px; font-weight:600;
  background: var(--bg-3); color: var(--text-dim); transition:.15s; user-select:none;
}
.calc-opt:hover{ border-color: var(--gold); }
.calc-opt.active{ border-color: var(--gold); background: rgba(201,161,90,.12); color: var(--gold-2); }
.calc-opt.disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.calc-toggle{ display:flex; align-items:center; justify-content:space-between; gap:16px; background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--radius-m); padding: 16px 18px; }
.switch{ position:relative; width:46px; height:26px; flex:0 0 46px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background: var(--bg-4); border-radius:20px; transition:.2s; border:1px solid var(--line-2); }
.switch .slider::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background: var(--text-dim); border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background: rgba(201,161,90,.25); border-color: var(--gold); }
.switch input:checked + .slider::before{ transform: translateX(20px); background: var(--gold-2); }

/* Строка с ценой внизу экрана (телефон) — слева от колонки плавающих кнопок */
.calc-mbar{
  position:fixed; left:12px; right:92px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:240;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px;
  background:rgba(26,28,33,.96); border:1px solid var(--gold-dim); border-radius:14px; box-shadow: var(--shadow-pop);
  transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .25s, opacity .25s;
}
.calc-mbar.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.calc-mbar-text{ display:flex; flex-direction:column; min-width:0; }
.calc-mbar-label{ font-size:11px; color:var(--text-mute); }
.calc-mbar-price{ font-size:17px; font-weight:800; color:var(--gold-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calc-mbar-btn{ flex:0 0 auto; padding:10px 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-3); color:var(--text); font-family:var(--font); font-weight:700; font-size:13px; cursor:pointer; }
@media(min-width:901px){ .calc-mbar{ display:none; } }

@media(max-width:1180px){
  .calc-height{ grid-template-columns:1fr; }
  .calc-scene{ max-width:420px; }
  .calc-lights{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px){
  .calc-lights{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:640px){
  .calc-mats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc-mat{ padding:10px; gap:10px; min-height:54px; }
  .calc-mat .calc-swatch{ width:26px; height:26px; border-radius:6px; }
  .calc-mat-title{ font-size:12.5px; }
  .calc-mat.active::after{ top:6px; right:6px; transform:none; width:16px; height:16px; font-size:8px; }
  .calc-cons{ grid-template-columns:1fr; }
  .calc-con{ display:grid; grid-template-columns:52px 1fr; column-gap:14px; align-items:center; padding:12px 40px 12px 12px; }
  .calc-con-icon{ grid-row:1 / span 2; margin:0; }
  .calc-lights{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc-seg{ display:flex; width:100%; }
  .calc-seg-opt{ flex:1; justify-content:center; padding:10px 6px; font-size:12.5px; }
}
@media(max-width:380px){
  .calc-mats{ grid-template-columns:1fr; }
  .calc-seg{ flex-direction:column; }
}

.calc-result{
  background: linear-gradient(165deg, var(--bg-4), var(--bg-3));
  border:1px solid var(--line); border-radius: var(--radius-l); padding: 30px; height:fit-content;
  position: sticky; top: 110px;
}
.calc-result .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-mute); margin-bottom:8px; }
.calc-result .price{ font-size: 42px; font-weight:800; color: var(--gold-2); margin-bottom:6px; line-height:1; }
.calc-result .price small{ font-size:16px; color: var(--text-mute); font-weight:600; }
.calc-result .note{ font-size:12.5px; color: var(--text-mute); margin-bottom:24px; }
.calc-breakdown{ font-size:13px; margin-bottom:24px; }
.calc-breakdown div{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line-2); color: var(--text-dim); }
.calc-breakdown div span:last-child{ color: var(--text); font-weight:600; text-align:right; }
.calc-oferta-link{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:14px; font-size:12.5px; color: var(--text-mute); text-decoration:none;
  transition: color .15s ease;
}
.calc-oferta-link i{ font-size:11px; }
.calc-oferta-link:hover{ color: var(--gold-2); }

/* ---------- Гарантия ---------- */
.guarantee{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items:center;
  background: linear-gradient(120deg, rgba(201,161,90,.09), transparent 60%), var(--bg-2);
  border:1px solid var(--line); border-radius: var(--radius-l); padding: 50px;
}
@media(max-width:900px){ .guarantee{ grid-template-columns:1fr; padding:30px; } }
.guarantee-badge{
  width: 160px; height:160px; border-radius:50%; border:2px solid var(--gold); margin: 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background: var(--bg-3);
}
.guarantee-badge b{ font-size:34px; color: var(--gold-2); font-weight:800; }
.guarantee-badge span{ font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.05em; }
.guarantee-list{ margin-top:20px; display:grid; gap:14px; }
.guarantee-list div{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color: var(--text-dim); }
.guarantee-list i{ color: var(--ok); margin-top:3px; }

/* ---------- FAQ ---------- */
.faq{ max-width: 820px; margin: 0 auto; }
.faq-item{ border-bottom:1px solid var(--line-2); }
.faq-q{
  width:100%; background:none; border:none; color: var(--text); text-align:left;
  padding: 22px 0; font-size:16px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-q i{ color: var(--gold); transition: transform .2s ease; flex-shrink:0; }
.faq-item.open .faq-q i{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a p{ padding: 0 0 22px; color: var(--text-dim); font-size:14.5px; max-width:680px; }

/* ---------- Финальный блок / форма ---------- */
.final-cta{
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(255,106,43,.12), transparent 60%),
    var(--bg-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.final-grid{ display:grid; grid-template-columns: 1fr .9fr; gap:56px; align-items:flex-start; }
@media(max-width:920px){ .final-grid{ grid-template-columns:1fr; } }
.final-points{ margin-top:28px; display:grid; gap:16px; }
.final-points div{ display:flex; gap:12px; align-items:center; font-size:15px; color: var(--text-dim); }
.final-points i{ color: var(--gold); width:20px; }
.final-contacts{ margin-top:36px; display:grid; gap:14px; }
.final-contacts a{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:15px; }
.final-contacts i{ width:36px; height:36px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--gold); }

.form-card{ background: var(--bg-3); border:1px solid var(--line); border-radius: var(--radius-l); padding: 34px; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:12.5px; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; background: var(--bg); border:1px solid var(--line-2); border-radius: var(--radius-s);
  padding: 14px 16px; color: var(--text); font-size:14.5px; transition: border-color .15s ease;
}
@media(max-width:767px){
  /* iOS Safari автоматически зумит страницу при фокусе на поле с font-size < 16px —
     на мобильных держим 16px во всех полях всех лид-форм сайта */
  .form-row input, .form-row textarea{ font-size:16px; }
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--gold); outline:none; }
.form-row.error input, .form-row.error textarea{ border-color:#d16060; }
.form-error{ font-size:12px; color:#e08585; margin-top:6px; display:none; }
.form-row.error .form-error{ display:block; }
.form-legal{ font-size:11.5px; color: var(--text-mute); margin-top:14px; }

/* ---------- Чекбокс согласия на обработку ПДн (вставляется в формы через js/main.js) ---------- */
.form-consent{
  display:flex; align-items:flex-start; gap:10px; margin-top:16px; margin-bottom:4px;
  font-size:12px; line-height:1.5; color: var(--text-mute); cursor:pointer;
}
.form-consent input[type="checkbox"]{
  flex:none; width:16px; height:16px; margin-top:2px; accent-color: var(--gold); cursor:pointer;
}
.form-consent a{ color: var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.form-consent a:hover{ color: var(--gold); }
.form-consent.error{ color:#e08585; }
.form-consent.error a{ color:#e08585; }

/* ---------- Cookie-баннер (js/main.js, сайт-вайд) ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  background: var(--bg-3); border-top:1px solid var(--line);
  padding:16px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  justify-content:space-between; box-shadow: var(--shadow-pop);
  transform: translateY(110%); transition: transform .3s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ margin:0; font-size:13px; color: var(--text-dim); max-width:720px; }
.cookie-banner a{ color: var(--gold-2); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner .btn{ flex:none; }
.cookie-banner .cookie-short{ display:none; }
@media(max-width:600px){
  /* Компактная плашка на телефоне (28.09): одна строка текста + кнопка справа,
     чтобы не закрывать фото первого экрана. Полный текст — на десктопе. */
  .cookie-banner{ flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); text-align:left; }
  .cookie-banner p{ font-size:12px; line-height:1.35; }
  .cookie-banner .cookie-long{ display:none; }
  .cookie-banner .cookie-short{ display:inline; }
  .cookie-banner .btn{ padding:8px 14px; }
}

/* ---------- Страница «Политика конфиденциальности» ---------- */
.legal-content{ max-width:820px; }
.legal-content h2{ font-size:24px; margin-top:44px; margin-bottom:16px; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{ font-size:17px; color: var(--gold-2); margin-top:26px; margin-bottom:10px; }
.legal-content p{ color: var(--text-dim); font-size:15px; margin-bottom:14px; }
.legal-content ul{ margin:0 0 16px; padding-left:20px; color: var(--text-dim); font-size:15px; }
.legal-content ul li{ margin-bottom:8px; }
.legal-toc{
  display:flex; flex-direction:column; gap:10px; background: var(--bg-3); border:1px solid var(--line);
  border-radius: var(--radius-m); padding:22px 24px; margin-bottom:20px;
}
.legal-toc a{ color: var(--text-dim); font-size:14px; font-weight:600; }
.legal-toc a:hover{ color: var(--gold); }
.legal-meta{
  display:grid; gap:14px; background: var(--bg-3); border:1px solid var(--line);
  border-radius: var(--radius-m); padding:22px 24px; margin-bottom:20px;
}
.legal-meta div{ display:flex; flex-direction:column; gap:4px; }
.legal-meta span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-mute); }
.legal-meta b{ font-size:14.5px; color: var(--text); font-weight:600; }
.legal-meta b a{ color: var(--text); }

.form-success{ display:none; text-align:center; padding: 30px 0; }
.form-success.show{ display:block; }
.form-success i{ font-size:44px; color: var(--ok); margin-bottom:14px; }

/* ---------- Футер ---------- */
.footer{ background: var(--bg); padding: 70px 0 26px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; margin-bottom:50px; }
@media(max-width:900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer h5{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color: var(--gold-2); margin-bottom:18px; }
.footer li{ margin-bottom:11px; }
.footer a{ font-size:13.5px; color: var(--text-mute); }
.footer a:hover{ color: var(--gold-2); }
.footer-bottom{ border-top:1px solid var(--line-2); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color: var(--text-mute); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color: var(--gold); color: var(--gold-2); }

/* ---------- Плавающие виджеты ---------- */
.float-widgets{ position:fixed; right:24px; bottom:24px; z-index:250; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.float-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow: var(--shadow-pop); border:1px solid var(--line-2);
}
.float-wa{ background:#25D366; color:#08320f; }
.float-tg{ background:#2AABEE; color:#04223c; }
.float-max{ background:linear-gradient(135deg,#4A90E2,#9B59D6); color:#fff; font-weight:800; font-size:15px; letter-spacing:-.02em; }
.float-up{
  background: var(--bg-3); color: var(--gold-2); border:1px solid var(--line);
  opacity:0; pointer-events:none; transform: translateY(10px); transition:.2s;
}
.float-up.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.float-call{
  background: linear-gradient(180deg, var(--orange-2), var(--orange)); color:#1a0d05;
}
/* «Позвонить» — только в раскрывающемся меню телефона (≤767px), вставляет main.js */
.float-tel{ display:none; background:#f4f1ea; color:#1a0d05; }

/* ---------- Модальное окно ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(8,8,10,.72); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:400; padding:20px;
  opacity:0; pointer-events:none; transition:.2s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l);
  max-width:460px; width:100%; padding: 36px; position:relative;
  transform: scale(.95); transition:.2s;
  min-width:0; /* фикс: flex-элемент по умолчанию не сжимается уже min-content,
    из-за этого модалка не влезала в узкий экран и раздувала документ на ~590px,
    из-за чего все position:fixed элементы (в т.ч. .float-widgets) уезжали за
    пределы видимой области на мобильных — см. аудит 10.09.2026 */
}
.modal-overlay.open .modal{ transform: scale(1); }
.modal-close{ position:absolute; top:18px; right:18px; background:none; border:none; color: var(--text-mute); font-size:20px; }
.modal h3{ font-size:22px; margin-bottom:8px; }
.modal p{ color: var(--text-dim); font-size:14px; margin-bottom:24px; }

/* ---------- Утилиты бейджей/тегов ---------- */
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 34px; }
.tag-row-center{ justify-content:center; }
.filter-tag{
  padding:10px 20px; border:1px solid var(--line-2); border-radius:30px; font-size:13.5px; font-weight:600;
  color: var(--text-dim); background: var(--bg-2); transition:.15s;
}
.filter-tag:hover{ border-color: var(--gold); }
.filter-tag.active{ background: var(--orange); border-color: var(--orange); color:#1a0d05; }

/* ---------- Каталог / товары ---------- */
.product-card{ background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden; display:flex; flex-direction:column; }
.product-thumb{
  height:190px; background: linear-gradient(135deg, var(--bg-4), var(--bg-3)); display:flex; align-items:center; justify-content:center;
  position:relative;
}
.product-thumb i{ font-size:42px; color: var(--gold-dim); }

/* Кликабельное фото-превью примера работы (вместо иконки-заглушки) */
button.product-thumb{ width:100%; border:none; padding:0; margin:0; cursor:pointer; font:inherit; }
.product-thumb-photo{ overflow:hidden; }
.product-thumb-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-thumb-photo img.thumb-contain{ object-fit:contain; position:relative; z-index:1; }
.product-thumb-photo img.thumb-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: blur(18px) brightness(.75) saturate(1.1); transform:scale(1.15); z-index:0; }
.product-thumb-photo .collage-hover{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  background: rgba(10,10,12,.55); color:#fff; font-size:13px; font-weight:700;
  opacity:0; transition:.18s; pointer-events:none;
}
.product-thumb-photo:hover .collage-hover{ opacity:1; }
.product-thumb-photo:hover img{ filter: brightness(.85); }
.product-badge{ position:absolute; top:12px; right:12px; background: var(--orange); color:#1a0d05; font-size:11px; font-weight:800; padding:5px 10px; border-radius:20px; }
.product-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.product-body h3{ font-size:16px; margin-bottom:8px; }
.product-body p{ font-size:13px; color: var(--text-mute); margin-bottom:16px; flex:1; }
.product-price{ font-size:20px; font-weight:800; color: var(--gold-2); margin-bottom:16px; }
.product-price small{ font-size:12px; color: var(--text-mute); font-weight:600; }
.product-gallery-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:none; border:1px solid var(--line-2); border-radius: var(--radius-m);
  color: var(--gold-2); font-size:13px; font-weight:700; font-family:inherit;
  padding:11px 14px; margin-bottom:10px; cursor:pointer; transition:.15s;
}
.product-gallery-btn:hover{ border-color: var(--gold-dim); background: rgba(201,161,90,.08); }
.product-gallery-btn i{ font-size:14px; }
.product-gallery-btn span{ color: var(--text-mute); font-weight:600; }

/* ---------- Системный фикс: <picture> без этого не пропускает height:100% ----------
   <picture> по умолчанию не блочный и не имеет собственной высоты, поэтому
   height:100% у вложенного <img> не может вычислиться (родитель для % высоты
   должен иметь ЯВНУЮ высоту) — браузер откатывается на auto и рендерит img
   по его собственным пропорциям, а не по факту рамки контейнера. Внешний
   overflow:hidden при этом просто обрезает всё, что вылезло за рамку —
   визуально выглядит как "объект на фото смещён/обрезан/не попал в кадр"
   (найдено и исправлено 16.09.2026, затрагивало карточки портфолио,
   товарные плитки, галереи, фото команды, hero-фото — везде, где img
   обёрнут в <picture> и его размер завязан на height:100% родителя). */
picture{ display:block; }
.case-thumb-photo picture,
.product-thumb-photo picture,
.gallery-grid picture,
.hero-visual-photo picture,
.team-photo picture{ width:100%; height:100%; }

/* ---------- Кликабельное фото-превью в case-card (материалы без типологии) ---------- */
button.case-thumb{ width:100%; border:none; padding:0; margin:0; cursor:pointer; font:inherit; text-align:left; }
.case-thumb-photo{ overflow:hidden; }
.case-thumb-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:.2s; }
.case-thumb-photo img.thumb-contain{ object-fit:contain; background: var(--bg-3); }
.case-thumb-photo .collage-hover{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  background: rgba(10,10,12,.55); color:#fff; font-size:13px; font-weight:700;
  opacity:0; transition:.18s; pointer-events:none;
}
.case-thumb-photo:hover .collage-hover{ opacity:1; }
.case-thumb-photo .collage-hover i{ font-size:15px; color:inherit; }
.case-thumb-photo:hover img{ filter: brightness(.85); transform: scale(1.04); }
/* Значок «увеличить» на кликабельных превью (лайтбокс) — виден всегда,
   т.к. на телефоне нет наведения и затемнения .collage-hover не видно. */
.case-thumb-photo .zoom-badge{
  position:absolute; right:12px; bottom:12px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  background: rgba(18,19,23,.8); border:1px solid var(--line); color: var(--gold-2); font-size:13px;
}
.case-thumb-photo .zoom-badge i{ font-size:13px; color:inherit; }
.case-thumb-photo:hover .zoom-badge{ opacity:0; }

/* ---------- Видео-превью в case-card (портфолио) ---------- */
.case-thumb-video{ position:relative; }
.case-play-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(10,10,12,.28); pointer-events:none;
}
.case-play-icon i{
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.16); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; padding-left:3px;
  border:1px solid rgba(255,255,255,.35);
}
.case-thumb-video:hover img{ filter: brightness(.85); transform: scale(1.04); }

/* ---------- Заглушка галереи, пока нет реальных фото ---------- */
.gallery-empty{
  border:1px dashed var(--line); border-radius: var(--radius-l); background: var(--bg-2);
  padding:44px 32px; text-align:center; max-width:560px; margin:0 auto;
}
.gallery-empty i{ font-size:32px; color: var(--gold-dim); margin-bottom:14px; display:block; }
.gallery-empty p{ color: var(--text-mute); font-size:14.5px; margin-bottom:20px; }

/* ---------- Панель «Индивидуальный расчёт» (материалы без калькулятора) ---------- */
.quote-panel{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:0;
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden;
}
@media(max-width:860px){ .quote-panel{ grid-template-columns:1fr; } }
.quote-panel-text{ padding:40px; }
.quote-panel-text .check-list{ list-style:none; padding:0; display:grid; gap:14px; margin-top:22px; font-size:14.5px; color:var(--text-dim); }
.quote-panel-text .check-list i{ color: var(--gold-2); margin-right:8px; }
.quote-panel-contact{
  padding:40px; background: var(--bg-3); border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
@media(max-width:860px){ .quote-panel-contact{ border-left:none; border-top:1px solid var(--line); } }
.quote-panel-contact .quote-phone{ font-size:28px; font-weight:800; color:var(--gold-2); }
.quote-panel-contact .quote-phone a{ color:inherit; }
.quote-panel-contact .quote-phone-note{ font-size:12.5px; color:var(--text-mute); margin-top:2px; }
.quote-panel-social{ display:flex; gap:10px; }
.quote-panel-social a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line-2); border-radius: var(--radius-m); padding:11px; color:var(--text-dim); font-size:13px; font-weight:700;
  transition:.15s;
}
.quote-panel-social a:hover{ border-color: var(--gold-dim); color: var(--gold-2); }

/* ---------- Галерея примеров работ (модалка) ---------- */
.modal-gallery{ max-width: 920px; padding: 32px; max-height: 88vh; overflow-y: auto; }
.modal-gallery h3{ display:flex; align-items:center; gap:10px; }
.modal-gallery h3 i{ color: var(--gold); font-size:18px; }
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:8px;
}
.gallery-grid button{
  padding:0; border:none; border-radius: var(--radius-m); overflow:hidden; cursor:zoom-in;
  aspect-ratio: 4/3; background: var(--bg-3); position:relative;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:.2s; }
.gallery-grid img.thumb-contain{ object-fit:contain; background: var(--bg-3); }
.gallery-grid button:hover img{ transform: scale(1.06); }
.gallery-cell-video{ position:relative; }
.gallery-play-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(10,10,12,.28);
}
.gallery-play-icon i{
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.16); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; padding-left:3px;
  border:1px solid rgba(255,255,255,.35);
}
@media(max-width:640px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Лайтбокс увеличенного фото ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background: rgba(6,6,8,.92); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:.2s;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-img{ max-width:min(1100px, 90vw); max-height:82vh; border-radius: var(--radius-m); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:26px; cursor:pointer; z-index:2;
}
.lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; width:48px; height:48px; border-radius:50%; font-size:16px; cursor:pointer; transition:.15s;
}
.lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,.16); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
.lightbox-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color: var(--text-mute); font-size:13px; font-weight:600; letter-spacing:.03em;
}
@media(max-width:640px){
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; }
  .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; }
}

/* ---------- Страница О компании ---------- */
.equip-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
@media(max-width:700px){ .equip-list{ grid-template-columns:1fr; } }
.equip-item{ display:flex; gap:14px; align-items:flex-start; background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-m); padding:18px; }
.equip-item i{ color: var(--gold); font-size:19px; margin-top:2px; }
.equip-item b{ display:block; font-size:14.5px; margin-bottom:4px; }
.equip-item span{ font-size:12.8px; color: var(--text-mute); }

.team-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.team-grid .team-card{ flex: 0 1 calc((100% - 100px) / 6); max-width: calc((100% - 100px) / 6); }
@media(max-width:900px){ .team-grid .team-card{ flex-basis: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); } }
@media(max-width:560px){ .team-grid .team-card{ flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } }
.team-card{ text-align:center; }
.team-photo{
  width:100%; aspect-ratio: 1; border-radius: var(--radius-l); background: linear-gradient(155deg, var(--bg-4), var(--bg-3));
  display:flex; align-items:center; justify-content:center; font-size:34px; color: var(--gold-dim); margin-bottom:14px; border:1px solid var(--line);
  overflow:hidden;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; border-radius: inherit; }
.team-card b{ display:block; font-size:14.5px; }
.team-card span{ font-size:12.5px; color: var(--text-mute); }

/* ---------- Блог ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media(max-width:900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden; }
.blog-thumb{ height:170px; background: linear-gradient(135deg, var(--bg-4), var(--bg-3)); display:flex; align-items:center; justify-content:center; }
.blog-thumb i{ font-size:34px; color: var(--gold-dim); }
.blog-body{ padding:22px; }
.blog-date{ font-size:12px; color: var(--text-mute); margin-bottom:10px; }
.blog-body h3{ font-size:16px; margin-bottom:10px; }
.blog-body p{ font-size:13.5px; color: var(--text-dim); }
.blog-more{ font-size:13px; font-weight:700; color: var(--gold-2); margin-top:14px; display:inline-block; }
.blog-card-soon{ opacity:.55; cursor:default; }
.blog-card-soon .blog-date{ color: var(--text-mute); font-style:italic; }

/* ---------- Блог: фото-превью, featured-блок, секции по кластерам (05.09.2026) ---------- */
.blog-thumb-photo{
  height:200px; position: relative; overflow:hidden;
}
.blog-thumb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center; z-index:0; display:block;
}
.blog-thumb-photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 45%);
}
.blog-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px;
  backdrop-filter: blur(2px);
}
.blog-badge-materialy{ background: rgba(201,161,90,.22); color: var(--gold-2); }
.blog-badge-podsvetka{ background: rgba(74,134,255,.22); color: var(--blue-2); }
.blog-badge-cena-zakaz{ background: rgba(255,106,43,.22); color: var(--orange-2); }
.blog-badge-vozrazheniya{ background: rgba(154,164,173,.24); color: var(--steel-lt); }
.blog-badge-keysy-montazh{ background: rgba(95,191,122,.22); color: var(--ok); }
.blog-meta-row{ font-size:12px; color: var(--text-mute); margin-bottom:10px; display:flex; gap:10px; align-items:center; }
.blog-meta-row span:not(:last-child)::after{ content:'·'; margin-left:10px; color: var(--text-mute); }

.quick-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.quick-nav a{
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:100px;
  border:1px solid var(--line); color: var(--text-dim); transition: all .15s ease;
}
.quick-nav a:hover{ border-color: var(--gold-dim); color: var(--gold-2); }

.featured-post{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:0; margin-bottom:56px;
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); overflow:hidden;
}
.featured-post .blog-thumb-photo{ height:100%; min-height:260px; }
.featured-post-body{ padding:32px 36px; display:flex; flex-direction:column; justify-content:center; }
.featured-post-body h2{ font-size:22px; margin:12px 0 12px; }
.featured-post-body p{ font-size:14.5px; color: var(--text-dim); margin-bottom:18px; }
@media(max-width:800px){
  .featured-post{ grid-template-columns: 1fr; }
  .featured-post .blog-thumb-photo{ min-height:200px; }
}

.cluster-section{ margin-bottom:52px; }
.cluster-header{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.cluster-header h2{ font-size:19px; margin:0; }
.cluster-header .cluster-count{ font-size:13px; color: var(--text-mute); }
.cluster-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media(max-width:900px){ .cluster-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .cluster-grid{ grid-template-columns: 1fr; } }
.cluster-hidden{ display:none; }
.cluster-more-row{ text-align:center; margin-top:26px; }
.cluster-more-btn{
  font-size:13px; font-weight:700; color: var(--gold-2); background:none; border:1px solid var(--line);
  border-radius:100px; padding:10px 22px; cursor:pointer; transition: all .15s ease;
}
.cluster-more-btn:hover{ border-color: var(--gold-dim); }

.article-body{ max-width:760px; margin:0 auto; }
.article-body table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pdf-banner{
  display:flex; align-items:center; gap:20px; background: var(--bg-2); border:1px solid var(--gold-dim);
  border-radius: var(--radius-l); padding:24px 26px; margin:28px 0 34px; flex-wrap:wrap;
}
.pdf-banner-icon{ width:48px; height:48px; border-radius:10px; background: rgba(201,161,90,.15); color: var(--gold-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.pdf-banner-body{ flex:1; min-width:200px; }
.pdf-banner-title{ font-weight:800; font-size:15px; margin-bottom:6px; }
.pdf-banner-text{ font-size:13px; color: var(--text-mute); margin:0; line-height:1.5; }
.pdf-banner-btn{ flex-shrink:0; white-space:nowrap; }
@media(max-width:640px){ .pdf-banner{ flex-direction:column; align-items:flex-start; } .pdf-banner-btn{ width:100%; } }
.article-body h2{ font-size:24px; margin-top:40px; }
.article-body p{ color: var(--text-dim); font-size:15.5px; margin-bottom:20px; }
.article-body figure{ margin:24px 0; }
.article-body figure img{ width:100%; height:auto; border-radius:10px; display:block; border:1px solid var(--line); }
.article-body figcaption{ font-size:13px; color: var(--text-mute); margin-top:8px; text-align:center; }
.article-meta{ display:flex; gap:20px; font-size:13px; color: var(--text-mute); margin-bottom:30px; }

/* ---------- Контакты ---------- */
.map-block{ height:420px; border-radius: var(--radius-l); overflow:hidden; border:1px solid var(--line); }
/* Переключатель «Производство / Офис» над картой (29.09.2026) */
.map-block--tabs{ display:flex; flex-direction:column; }
.map-block--tabs iframe{ flex:1 1 auto; min-height:0; display:block; }
.map-tabs{ display:flex; gap:6px; padding:8px; background:var(--bg-2); border-bottom:1px solid var(--line); flex-shrink:0; }
.map-tab{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px; border-radius:var(--radius-s); border:1px solid transparent; background:none;
  color:var(--text-dim); font:600 13px/1.2 var(--font); cursor:pointer; white-space:nowrap; transition:.15s;
}
.map-tab i{ color:var(--gold); font-size:13px; }
.map-tab:hover{ color:var(--text); }
.map-tab.is-active{ background:var(--bg-3); border-color:var(--line-2); color:var(--text); }
.contact-info-card{ background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-l); padding:26px; display:flex; gap:16px; align-items:flex-start; }
.contact-info-card i{ font-size:20px; color: var(--gold); margin-top:2px; }
.contact-info-card b{ display:block; font-size:14.5px; margin-bottom:4px; }
.contact-info-card span{ font-size:13px; color: var(--text-mute); }
.messenger-row{ display:flex; gap:8px; margin-top: 8px; }
.messenger-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 6px; border-radius: var(--radius-s); font-weight:700; font-size:12.5px; white-space:nowrap; }
.messenger-btn.wa{ background: rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.4); color:#5fdf94; }
.messenger-btn.tg{ background: rgba(42,171,238,.12); border:1px solid rgba(42,171,238,.4); color:#79c7f2; }
.messenger-btn.max{ background: rgba(124,110,238,.14); border:1px solid rgba(124,110,238,.45); color:#b3a8f5; }

/* ---------- Ссылки на PDF-проекты ---------- */
.doc-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
@media(max-width:900px){ .doc-grid{ grid-template-columns:1fr; } }
.doc-card{
  background: var(--bg-3); border:1px solid var(--line-2); border-radius: var(--radius-l);
  padding:22px; display:flex; flex-direction:column; gap:10px;
}
.doc-card .doc-icon{
  width:42px; height:42px; border-radius:10px; background: rgba(201,161,90,.12);
  display:flex; align-items:center; justify-content:center; color: var(--gold-2); font-size:18px; margin-bottom:4px;
}
.doc-card h4{ font-size:15.5px; margin:0; line-height:1.35; }
.doc-card .doc-meta{ font-size:12.5px; color: var(--text-mute); }
.doc-card p{ font-size:13px; color: var(--text-dim); margin:0; flex-grow:1; }
.doc-card .doc-open{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color: var(--gold-2);
  text-decoration:none; margin-top:4px;
}
.doc-card .doc-open:hover{ text-decoration:underline; }
.pdf-inline-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--gold-2);
  text-decoration:none; margin-top:6px;
}
.pdf-inline-link:hover{ text-decoration:underline; }
/* Ссылка внутри текста (28.09, П2): золотая с подчёркиванием, как в cookie-плашке */
.text-link{ color: var(--gold-2); text-decoration:underline; text-underline-offset:2px; }
.text-link:hover{ color: var(--gold); }
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Результат для клиента (что вы получаете) ---------- */
.result-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
@media(max-width:1000px){ .result-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .result-grid{ grid-template-columns: 1fr; } }
.result-card{
  background: linear-gradient(155deg, var(--bg-4), var(--bg-3)); border:1px solid var(--line);
  border-radius: var(--radius-l); padding:26px; position:relative;
}
.result-card .result-num{
  position:absolute; top:18px; right:20px; font-size:34px; font-weight:800;
  color: transparent; -webkit-text-stroke: 1px var(--gold-dim); opacity:.5;
}
.result-card i.result-icon{ font-size:22px; color: var(--gold-2); margin-bottom:14px; display:block; }
.result-card h3{ font-size:16px; margin-bottom:10px; line-height:1.3; }
.result-card p{ font-size:13.5px; color: var(--text-dim); margin:0; }

/* ---------- Оффер-панель (акцентный блок предложения) ---------- */
.offer-panel{
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(201,161,90,.14), transparent 60%),
    linear-gradient(155deg, var(--bg-4), var(--bg-2));
  border:1px solid var(--gold-dim); border-radius: var(--radius-l); padding:44px;
  position:relative; overflow:hidden;
}
@media(max-width:760px){ .offer-panel{ padding:26px; } }
.offer-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
  opacity:.5; height:2px; top:0;
}
.offer-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#1a0d05; background: var(--gold-2);
  padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.offer-panel h2{ font-size: 28px; max-width:720px; margin-bottom:14px; }
@media(max-width:600px){ .offer-panel h2{ font-size:21px; } }
.offer-panel > p.offer-lead{ font-size:15.5px; color:var(--text-dim); max-width:640px; margin-bottom:28px; }
.offer-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:start; }
@media(max-width:900px){ .offer-grid{ grid-template-columns:1fr; } }
.offer-list{ display:grid; gap:14px; list-style:none; padding:0; margin:0 0 28px; }
.offer-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text); }
.offer-list li i{ color: var(--ok); margin-top:3px; flex-shrink:0; }
.offer-side{
  background: rgba(18,19,23,.5); border:1px solid var(--line-2); border-radius: var(--radius-l); padding:26px;
}
.offer-side-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px dashed var(--line-2); font-size:13.5px; }
.offer-side-row:last-of-type{ border-bottom:none; }
.offer-side-row b{ color: var(--gold-2); font-size:15px; text-align:right; }
.offer-side-row span:first-child{ color: var(--text-dim); flex:0 0 auto; min-width:82px; padding-top:1px; }

/* ---------- Отработка возражений ---------- */
.objection-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
@media(max-width:900px){ .objection-grid{ grid-template-columns:1fr; } }
.objection-card{
  background: var(--bg-2); border:1px solid var(--line-2); border-radius: var(--radius-l); padding:26px 26px 24px;
}
.objection-q{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.objection-q i{ color: var(--gold-dim); font-size:18px; }
.objection-q span{ font-size:16.5px; font-weight:700; color:var(--text); font-style:italic; }
.objection-a{ font-size:14px; color: var(--text-dim); line-height:1.55; }
.objection-a b{ color: var(--text); }

/* =========================================================================
   МОБИЛЬНАЯ ДОРАБОТКА (24.09.2026) — только ≤767px, десктоп и планшет
   не затронуты. Блок стоит в самом конце файла, чтобы при равной
   специфичности перебивать базовые правила (ловушка №3 хэндоффа).
   ========================================================================= */
@media (max-width:767px){

  /* ---------- Ритм страницы: вертикальные отступы секций ---------- */
  .section{ padding:56px 0; }
  .section-tight{ padding:44px 0; }
  h2.section-title{ font-size:26px; line-height:1.22; }
  p.section-lead{ font-size:15.5px; margin-bottom:28px; }
  .eyebrow{ font-size:12px; margin-bottom:12px; }

  /* ---------- Шапка: 82 → 64px, компактный логотип (закрывает и 1.13) ---------- */
  .header-top{ height:64px; gap:12px; }
  .logo{ font-size:15px; gap:10px; flex-shrink:1; min-width:0; }
  .logo-mark{ width:36px; height:36px; font-size:16px; flex-shrink:0; }
  .logo small{ font-size:9.5px; letter-spacing:.06em; }
  .burger-hint{ top:58px; }

  /* ---------- Хлебные крошки: отступ от края, одна строка ---------- */
  .breadcrumbs{
    padding:14px 24px 0; font-size:12.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .breadcrumbs span{ margin:0 6px; }

  /* ---------- Фильтры-«таблетки»: одна горизонтальная лента ---------- */
  .tag-row, .quick-nav{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    margin-left:-24px; margin-right:-24px; padding:2px 24px 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-padding:0 24px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  }
  .tag-row::-webkit-scrollbar, .quick-nav::-webkit-scrollbar{ display:none; }
  .tag-row > *, .quick-nav > *{ flex:none; white-space:nowrap; }
  .tag-row{ margin-bottom:24px; }
  .quick-nav{ margin-bottom:28px; }
  .filter-tag{ padding:9px 16px; font-size:13px; }

  /* ---------- Минимальный кегль ---------- */
  .tag, .case-thumb .tag{ font-size:12px; }

  /* ---------- Заголовки-по-центру → влево (как все остальные) ---------- */
  h2.section-title.center:has(+ .faq),
  h2.section-title.center:has(+ .grid-3){ text-align:left; margin-left:0; }

  /* ---------- Плавающие кнопки: одна кнопка «Связаться» ----------
     Кнопка-переключатель .float-toggle вставляется JS (main.js). */
  .float-widgets{
    right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    gap:10px; pointer-events:none;
  }
  .float-widgets .float-up{ display:none; }
  .float-widgets > .float-btn:not(.float-toggle){
    position:relative; width:48px; height:48px; font-size:19px; margin-right:4px;
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .float-widgets.open > .float-btn:not(.float-toggle){
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease;
  }
  .float-widgets.open > .float-btn:nth-last-child(2){ transition-delay:0s; }
  .float-widgets.open > .float-btn:nth-last-child(3){ transition-delay:.03s; }
  .float-widgets.open > .float-btn:nth-last-child(4){ transition-delay:.06s; }
  .float-widgets.open > .float-btn:nth-last-child(5){ transition-delay:.09s; }
  .float-widgets.open > .float-btn:nth-last-child(6){ transition-delay:.12s; }
  .float-widgets > .float-tel{ display:flex; }
  .float-widgets > .float-btn[data-label]::before{
    content:attr(data-label); position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--bg-3); border:1px solid var(--line-2); color:var(--text);
    font-size:13px; font-weight:700; letter-spacing:0; padding:7px 12px; border-radius:10px;
    white-space:nowrap; box-shadow:var(--shadow-pop); font-family:var(--font);
  }
  .float-toggle{
    order:99; pointer-events:auto; cursor:pointer;
    width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg, var(--orange-2), var(--orange)); color:#1a0d05;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    box-shadow:0 10px 24px -6px rgba(255,106,43,.55);
    /* Пульсация (29.09.2026): кольцо расходится от кнопки — box-shadow, а не
       transform, чтобы не расширять layout-viewport (ловушка №9). */
    animation:floatPulse 2.2s ease-out infinite;
  }
  .float-toggle .ft-open{ animation:floatNudge 2.2s ease-in-out infinite; }
  .float-widgets.open .float-toggle,
  .float-widgets.open .float-toggle .ft-open{ animation:none; }
  .float-toggle .ft-close{ display:none; }
  .float-widgets.open .float-toggle{ background:var(--bg-3); color:var(--text); box-shadow:var(--shadow-pop); }
  .float-widgets.open .float-toggle .ft-open{ display:none; }
  .float-widgets.open .float-toggle .ft-close{ display:inline; }
  .float-backdrop{
    position:fixed; inset:0; z-index:249; background:rgba(8,8,10,.55);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .float-backdrop.show{ opacity:1; pointer-events:auto; }
  .calc-mbar{ right:84px; }

  /* ---------- Главная: hero ---------- */
  .hero{ padding:28px 0 44px; }
  .hero-headline{ text-align:left; margin:0 0 22px; }
  .hero h1.hero-h1-new{ text-align:left; margin-bottom:12px; }
  .hero-h1-new .h1-main{ font-size:24px; line-height:1.18; }
  .hero-h1-new .h1-accent{ font-size:16px; line-height:1.4; margin-top:8px; }
  .hero-kicker{ justify-content:flex-start; text-align:left; font-size:11.5px; letter-spacing:.1em; line-height:1.6; }
  .hero-badges{ display:none; }
  .hero-lead-block{ margin-bottom:24px; }
  .hero-lead-intro, .hero-lead-outro{ font-size:15.5px; }
  .hero-lead-list{ gap:5px; }
  .hero-cta{ flex-direction:column; gap:10px; margin-bottom:28px; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .hero-trust{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .hero-trust div{ text-align:left; padding:14px 10px 14px 0; white-space:normal; }
  .hero-trust div + div{ padding-left:12px; border-left:1px solid var(--line); }
  .hero-trust div b{ font-size:20px; line-height:1.15; margin-bottom:4px; }
  .hero-trust div span{ display:block; font-size:12px; line-height:1.35; }
  /* Видео и фото на телефоне были высотой 2px (базовое flex:1 1 0 ниже по
     файлу перебивало @media 960 — ловушка №3). Теперь: два кадра рядом. */
  .hero-visual{ margin-top:30px; height:auto !important; }
  .hero-media-stack{ flex-direction:row; max-width:none; height:auto; gap:10px; }
  .hero-video-frame, .hero-image-frame{ flex:1 1 0; aspect-ratio:4 / 5; min-height:0; }
  .hero-grid{ gap:0; }
  .hero-visual-caption{
    position:static; transform:none; align-self:flex-start; margin-top:12px; padding:0;
    background:none; border:none; box-shadow:none; border-radius:0;
    font-size:13px; font-weight:600; color:var(--text-mute); white-space:normal;
  }
  .hero-visual-caption i{ color:var(--gold); }

  /* ---------- Главная: полоса гарантий под hero (сетка 2×2) ---------- */
  .strip{ padding:0; }
  .strip .container{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; padding:0;
    align-items:stretch; background:var(--line);
  }
  .strip-item{
    white-space:normal; align-items:center; gap:10px; padding:16px 12px 16px 20px; min-width:0; flex-shrink:1;
    background:var(--bg-2); font-size:13px; line-height:1.35; color:var(--text);
    text-wrap:balance;
  }
  .strip-item:nth-child(even){ padding-left:14px; padding-right:18px; }
  .strip-item i{
    flex:none; width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:14px;
    background:rgba(201,161,90,.08); border:1px solid rgba(201,161,90,.22);
  }
  .strip-text{ min-width:0; text-wrap:balance; }
  .strip-item:nth-child(5){ display:none; }
  @media (max-width:359px){ .strip-item i{ display:none; } .logo{ font-size:13px; gap:8px; } .logo small{ font-size:8.5px; } } /* «от 5 дней» уже сказано в hero строкой выше */

  /* ---------- Главная: сравнение с агентством → карточки ---------- */
  h2.section-title.compare-title{ white-space:normal; text-align:left; font-size:26px; }
  .compare-scroll-hint{ display:none; }
  .compare-wrap{ overflow:visible; }
  .compare-wrap::after{ display:none; }
  .compare, .compare tbody{ display:block; background:none; border:none; border-radius:0; overflow:visible; }
  .compare thead{ display:none; }
  .compare tr{
    display:grid; grid-template-columns:1fr 1fr; margin-bottom:10px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  }
  .compare td{ display:block; border:none; padding:12px 14px; font-size:13.5px; line-height:1.4; }
  .compare td:first-child{ grid-column:1 / -1; padding:14px 14px 4px; font-size:15px; }
  .compare td.col-us::before, .compare td.no::before{
    display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute);
  }
  .compare td.col-us::before{ content:'Мы'; color:var(--gold-2); }
  .compare td.no::before{ content:'Агентство'; }
  .compare td i{ margin-right:5px; }

  /* ---------- «5 причин»: иконка слева от текста ---------- */
  .grid-5{ gap:10px; }
  .grid-5 > .card{
    display:grid; grid-template-columns:44px 1fr; column-gap:14px; padding:18px;
  }
  .grid-5 > .card .card-icon{ grid-row:1 / span 2; width:44px; height:44px; font-size:18px; margin:0; }
  .grid-5 > .card h3{ font-size:16px; margin:2px 0 6px; }
  .grid-5 > .card p{ font-size:14px; }

  /* ---------- «Как мы работаем»: вертикальная шкала шагов ---------- */
  .steps{ grid-template-columns:1fr; gap:0; }
  .step{
    display:grid; grid-template-columns:44px 1fr; column-gap:16px;
    background:none; border:none; border-radius:0; padding:0 0 22px;
  }
  .step i{
    grid-column:1; grid-row:1 / span 3; width:44px; height:44px; margin:0; font-size:17px;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:var(--bg-2); border:1px solid var(--gold-dim); position:relative; z-index:1;
  }
  .step::before{
    content:''; position:absolute; left:21.5px; top:44px; bottom:0; width:1px; background:var(--line-2);
  }
  .step:last-child::before{ display:none; }
  .step:last-child{ padding-bottom:0; }
  .step-num{ grid-column:2; margin:2px 0 2px; font-size:11px; }
  .step h4{ grid-column:2; font-size:16px; margin-bottom:4px; }
  .step p{ grid-column:2; font-size:14px; color:var(--text-dim); }

  /* ---------- Каталог: карточки вариантов в 2 колонки ---------- */
  .grid-4:has(> .product-card){ grid-template-columns:1fr 1fr; gap:10px; }
  .grid-4 > .product-card .product-thumb{ height:auto; aspect-ratio:1; }
  .grid-4 > .product-card .product-body{ padding:12px; }
  .grid-4 > .product-card .product-body h3{ font-size:14px; line-height:1.3; margin-bottom:6px; }
  .grid-4 > .product-card .product-body p{
    font-size:12.5px; line-height:1.45; margin-bottom:10px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .grid-4 > .product-card .product-price{ font-size:17px; margin-bottom:10px; }
  .grid-4 > .product-card .product-price small{ display:block; font-size:11.5px; }
  .product-price:not(:has(small)){ font-size:14px !important; color:var(--text-dim); font-weight:700; }
  .grid-4 > .product-card .product-gallery-btn{ font-size:12.5px; padding:9px 6px; }
  .grid-4 > .product-card .btn{ padding:11px 8px; font-size:13.5px; }
  .product-thumb-photo .collage-hover{ display:none; }

  /* ---------- «Частые сомнения»: ответ свёрнут до 4 строк ---------- */
  .objection-card.is-clamped .objection-a{
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  .objection-more{
    margin-top:10px; background:none; border:none; padding:0; cursor:pointer;
    color:var(--gold-2); font:700 13.5px var(--font);
  }

  /* ---------- Карточки статей: компактная строка ---------- */
  .blog-grid, .grid-3:has(> .blog-card){ gap:10px; }
  .blog-card:not(.cluster-hidden){ display:grid; grid-template-columns:108px 1fr; }
  .blog-card .blog-thumb, .blog-card .blog-thumb-photo{ height:auto; min-height:108px; }
  .blog-card .blog-thumb i{ font-size:24px; }
  .blog-card .blog-badge{ display:none; }
  .blog-card .blog-body{ padding:12px 14px; display:flex; flex-direction:column; }
  .blog-card .blog-body h3{ font-size:14.5px; line-height:1.35; margin-bottom:6px; }
  .blog-card .blog-body p{
    font-size:12.5px; line-height:1.45; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .blog-card .blog-meta-row, .blog-card .blog-date{ font-size:11.5px; margin-bottom:6px; }
  .blog-card .blog-more{ display:none; }
  .blog-card .blog-meta-row{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:2px 10px; }
  .blog-card .blog-meta-row span{ white-space:nowrap; }
  .blog-card .blog-meta-row span + span::before{ content:none; }
  .grid-4 > .product-card .product-gallery-btn i{ display:none; }

  /* ---------- Статья ---------- */
  .article-body h1.section-title{ font-size:26px; line-height:1.2; }
  .article-body h2{ font-size:21px; margin-top:32px; }
  .article-body .check-list{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:12px; }
  .article-body .check-list li{
    position:relative; padding-left:28px; color:var(--text-dim); font-size:15.5px; line-height:1.55;
  }
  .article-body .check-list li i{ position:absolute; left:0; top:5px; color:var(--gold-2); font-size:14px; }

  /* ---------- Портфолио: сетка 2 колонки ---------- */
  #portfolio-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  #portfolio-grid .case-thumb{ height:auto; aspect-ratio:1; }
  #portfolio-grid .case-thumb-photo img.thumb-contain{ object-fit:cover; }
  #portfolio-grid .case-body{ padding:9px 11px !important; }
  #portfolio-grid .case-row{ flex-direction:column; gap:2px; }
  #portfolio-grid .case-row span:first-child{ font-size:12.5px !important; }
  #portfolio-grid .case-row span:last-child{ font-size:10.5px !important; }

  /* ---------- Панель «Индивидуальный расчёт» ---------- */
  .quote-panel{ grid-template-columns:minmax(0,1fr); }
  .quote-panel-text{ padding:24px 20px; }
  .quote-panel-contact{ padding:22px 20px; }
  .quote-panel-contact .quote-phone{ font-size:22px; }

  /* ---------- Контакты: сначала связь, потом карта ---------- */
  .grid-2 > div:has(> .map-block){ display:flex; flex-direction:column; gap:16px; }
  /* 29.09.2026: колонка раздувалась до min-content (297px при 320) → +1px прокрутки */
  .grid-2 > div:has(> .map-block){ min-width:0; }
  .contact-info-card span{ overflow-wrap:anywhere; }
  .grid-2 > div:has(> .map-block) > *{ margin-top:0 !important; }
  .grid-2 > div:has(> .map-block) > .messenger-row{ order:1; }
  .grid-2 > div:has(> .map-block) > .map-block{ order:3; height:260px; }
  .grid-2 > div:has(> .map-block) > .map-block--tabs{ height:310px; }
  @media (max-width:374px){ .map-tab{ font-size:12.5px; padding:9px 6px; } .map-tab i{ display:none; } }
  .grid-2 > div:has(> .map-block) > div:not(.map-block):not(.messenger-row){ order:2; gap:10px !important; }
  .contact-info-card{ padding:16px 18px; }
  .messenger-row .messenger-btn{ min-height:46px; justify-content:center; font-size:14px; }
  @media (max-width:359px){ .messenger-row{ gap:6px; } .messenger-row .messenger-btn{ font-size:12.5px; gap:5px; padding:11px 4px; } }
  .contact-info-card span a[href^="tel:"]{
    display:block; font-size:17px; font-weight:800; color:var(--text); margin:2px 0;
  }

  /* ---------- Футер: длинный список продукции свёрнут ---------- */
  .footer{ padding:48px 0 calc(90px + env(safe-area-inset-bottom, 0px)); }
  .footer-top{ gap:26px; margin-bottom:32px; }
  .footer-collapsible h5{
    display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin-bottom:0;
  }
  .footer-collapsible h5::after{
    content:'+'; font-size:20px; font-weight:400; color:var(--gold); line-height:1;
  }
  .footer-collapsible.open h5::after{ content:'−'; }
  .footer-collapsible > ul{ display:none; margin-top:14px; }
  .footer-collapsible.open > ul{ display:block; }
}
@media (max-width:767px){ .burger-hint.is-away{ opacity:0 !important; pointer-events:none; animation:none; transition:opacity .25s ease; } }

/* =========================================================================
   ДЕСКТОП: ФИНАЛЬНАЯ ПРИЁМКА (25.09.2026) — только ≥768px, мобильный блок
   выше не затронут. Стоит в самом конце файла (ловушка №3).
   ========================================================================= */
@media (min-width:768px){

  /* ---------- Иерархия заголовков: H1 страницы крупнее H2 разделов ---------- */
  h1.section-title{ font-size:clamp(34px, 3.3vw, 46px); line-height:1.15; }
  .article-body h1.section-title{ font-size:clamp(32px, 2.9vw, 40px); }
  h2.section-title{ font-size:clamp(28px, 2.7vw, 38px); line-height:1.2; }
  h1, h2, h3{ text-wrap:balance; }
  .hero h1:not(.hero-h1-new){ text-wrap:wrap; }

  /* ---------- Всё по одной левой линии ---------- */
  h2.section-title.compare-title{
    text-align:left; font-size:min(38px, calc((min(100vw, 1200px) - 48px) / 27.5));
  }
  h2.section-title.center:has(+ .faq),
  h2.section-title.center:has(+ .grid-3){ text-align:left; margin-left:0; }
  .faq{ margin-left:0; }
  .tag-row-center, .quick-nav{ justify-content:flex-start; }

  /* ---------- Ссылки/кнопки в карточках — по нижней линии ---------- */
  a.blog-card:not(.cluster-hidden){ display:flex; flex-direction:column; }
  a.blog-card .blog-body{ flex:1; display:flex; flex-direction:column; }
  a.blog-card .blog-more{ margin-top:auto; padding-top:14px; }
  .product-card .product-body > .product-price{ margin-top:auto; }
  .product-card .product-body p{ flex:0 0 auto; }

  /* ---------- Списки с галочками ---------- */
  ul.check-list:not(.quote-panel-text .check-list){
    list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px;
  }
  ul.check-list:not(.quote-panel-text .check-list) li{
    position:relative; padding-left:28px; color:var(--text-dim); line-height:1.55;
  }
  ul.check-list:not(.quote-panel-text .check-list) li > i:first-child{
    position:absolute; left:0; top:.3em; color:var(--gold-2); font-size:.9em;
  }

  /* ---------- Плавающие кнопки: одна кнопка «Связаться», как на телефоне ---------- */
  .float-widgets{ right:24px; bottom:24px; gap:10px; pointer-events:none; }
  .float-widgets .float-up.show{ pointer-events:auto; }
  .float-widgets .float-up{ width:48px; height:48px; font-size:18px; margin-right:4px; }
  .float-widgets > .float-btn:not(.float-toggle):not(.float-up){
    position:relative; width:48px; height:48px; font-size:19px; margin-right:4px;
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .float-widgets.open > .float-btn:not(.float-toggle):not(.float-up){
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease;
  }
  .float-widgets .float-up{ order:98; }
  .float-widgets.open .float-up{ display:none; }
  .float-widgets > .float-btn[data-label]::before{
    content:attr(data-label); position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--bg-3); border:1px solid var(--line-2); color:var(--text);
    font-size:13px; font-weight:700; padding:7px 12px; border-radius:10px;
    white-space:nowrap; box-shadow:var(--shadow-pop); font-family:var(--font);
  }
  .float-toggle{
    order:99; pointer-events:auto; cursor:pointer;
    width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg, var(--orange-2), var(--orange)); color:#1a0d05;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    box-shadow:0 10px 24px -6px rgba(255,106,43,.55); transition:transform .15s ease;
  }
  .float-toggle:hover{ transform:translateY(-2px); }
  .float-toggle .ft-close{ display:none; }
  .float-widgets.open .float-toggle{ background:var(--bg-3); color:var(--text); box-shadow:var(--shadow-pop); }
  .float-widgets.open .float-toggle .ft-open{ display:none; }
  .float-widgets.open .float-toggle .ft-close{ display:inline; }
  .float-backdrop{
    position:fixed; inset:0; z-index:249; background:rgba(8,8,10,.35);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .float-backdrop.show{ opacity:1; pointer-events:auto; }

  /* ---------- Подвал ---------- */
  .footer .logo{ white-space:nowrap; font-size:17px; }
  .footer .logo-mark{ width:38px; height:38px; font-size:17px; }
}
@media (min-width:768px) and (max-width:1359px){
  /* На ноутбуках 1280–1366 кнопка не должна заходить на контент */
  .float-widgets{ right:12px; bottom:18px; }
  .float-toggle{ width:52px; height:52px; font-size:20px; }
}
@media (min-width:901px){
  .footer-top{ grid-template-columns:1fr 1.4fr .95fr 1.05fr; gap:32px; }
}

@media (min-width:961px){
  /* ---------- Главная: hero ---------- */
  .hero h1.hero-h1-new{ margin-bottom:16px; }
  .hero-h1-new .h1-main{ font-size:clamp(30px, 3.1vw, 44px); line-height:1.12; }
  .hero-h1-new .h1-accent{ font-size:clamp(17px, 1.6vw, 22px); margin-top:12px; }
  .hero-media-stack{ max-width:400px; margin:0 0 0 auto; }
  .hero-visual-caption{ left:auto; right:calc(min(400px, 100%) / 2); transform:translateX(50%); }
}

@media (min-width:768px){
  /* ---------- Главная: карточки кейсов ---------- */
  .case-row b{ min-width:86px; flex:none; }

  /* ---------- Главная: ритм вокруг калькулятора ---------- */
  #calculator{ padding-bottom:56px; }
  #calculator + .section{ padding-bottom:0; }
}

@media (min-width:1101px){
  /* ---------- «5 причин»: 3 + 2 широких карточки, иконка слева ---------- */
  .grid-5{ grid-template-columns:repeat(6, 1fr); }
  .grid-5 > .card{ grid-column:span 2; display:grid; grid-template-columns:52px 1fr; column-gap:18px; padding:26px 24px; }
  .grid-5 > .card:nth-child(n+4){ grid-column:span 3; }
  .grid-5 > .card .card-icon{ grid-row:1 / span 2; margin:0; }
  .grid-5 > .card h3{ margin:4px 0 8px; }
}

@media (min-width:981px){
  /* ---------- «Как мы работаем»: 3 × 2, иконка слева ---------- */
  .steps{ grid-template-columns:repeat(3, 1fr); gap:18px; }
  .step{ display:grid; grid-template-columns:48px 1fr; column-gap:16px; padding:24px 22px; }
  .step i{
    grid-column:1; grid-row:1 / span 3; width:48px; height:48px; margin:0; font-size:19px;
    display:flex; align-items:center; justify-content:center; border-radius:12px;
    background:linear-gradient(155deg, var(--bg-4), var(--bg-3)); border:1px solid var(--line);
  }
  .step-num, .step h4, .step p{ grid-column:2; }
  .step-num{ margin-bottom:4px; }
  .step h4{ font-size:16px; margin-bottom:6px; }
  .step p{ font-size:14px; color:var(--text-dim); }
}

@media (min-width:1001px){
  /* ---------- Каталог: 6 вариантов → 3 × 2 вместо 4 + 2 ---------- */
  .grid-4:has(> .product-card:nth-child(6):last-child),
  .grid-4:has(> .product-card:nth-child(5):last-child){ grid-template-columns:repeat(3, 1fr); }
  /* ---------- О компании: оборудование 3 × 3 ---------- */
  .equip-list{ grid-template-columns:repeat(3, 1fr); }
}

@media (min-width:768px){
  /* ---------- «Индивидуальный расчёт» — не крупнее реальных цен ---------- */
  .product-price:not(:has(small)){ font-size:15px; font-weight:700; color:var(--text-dim); }

  /* ---------- Портфолио: фото заполняет плитку ---------- */

  /* ---------- Контакты: форма не растягивается на высоту колонки ---------- */
  .grid-2:has(> .form-card){ align-items:start; }

  /* ---------- «Реализованные объекты»: мозаика (строится JS) ---------- */
  .gallery-mosaic{
    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:clamp(150px, 15vw, 210px); gap:12px;
  }
  .gallery-mosaic > button{
    position:relative; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
    padding:0; margin:0; background:var(--bg-3); cursor:pointer; font:inherit;
  }
  .gallery-mosaic > button:first-child{ grid-column:span 2; grid-row:span 2; border-radius:var(--radius-l); }
  .gallery-mosaic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease, filter .3s ease; }
  .gallery-mosaic > button:hover img{ transform:scale(1.04); filter:brightness(.9); }
  .gallery-mosaic .mosaic-more{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    background:rgba(10,10,12,.62); color:#fff; font-weight:800; font-size:26px;
  }
  .gallery-mosaic .mosaic-more small{ font-size:13px; font-weight:700; color:var(--gold-2); }
  .gallery-mosaic-host{ display:none !important; }
}
@media (max-width:767px){ .gallery-mosaic{ display:none; } }
/* «5 причин»-сетка (главная, застройщикам): когда карточка раскладывается
   «иконка слева» (телефон и ≥1101px), всё кроме иконки — во второй колонке. */
.grid-5 > .card > :not(.card-icon){ grid-column:2; }
@media (min-width:768px){
  /* Портфолио: вместо «Объект N» (нумерация сбрасывается в каждой категории) — только категория */
  #portfolio-grid .case-row > span:first-child{ display:none; }
  #portfolio-grid .case-row{ justify-content:flex-start !important; }
}
@media (min-width:768px){
  /* «Читайте также» в статьях: ссылка «Смотреть каталог →» по нижней линии */
  .grid-3 > a.card{ display:flex; flex-direction:column; }
  .grid-3 > a.card > .blog-more{ margin-top:auto; padding-top:10px; }
}

/* ---------- Кейс «проект → реализация» одной карточкой (внутренняя навигация, 25.09.2026) ----------
   Раньше: пара фото во всю ширину + отдельная карточка описания 720px под ней.
   Теперь: одна карточка — слева пара фото со стрелкой, справа описание (≥900px);
   на телефоне — пара фото, под ней описание. */
.case-wide{ margin-top:22px; }
.case-wide-media{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px;
  padding:14px; background:var(--bg-3); border-bottom:1px solid var(--line);
}
.case-wide-media .case-thumb{ border-radius:var(--radius-m); border:1px solid var(--line); }
.case-wide-arrow{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--gold-dim); color:var(--gold-2);
  display:flex; align-items:center; justify-content:center; font-size:12px; background:var(--bg-2);
}
@media (max-width:600px){
  .case-wide-media{ grid-template-columns:minmax(0,1fr); gap:8px; padding:12px; }
  .case-wide-arrow{ justify-self:center; transform:rotate(90deg); width:26px; height:26px; font-size:11px; }
}
/* Подписи «Объект:/Что сделали:/Материалы:» не наезжают на значение на любой ширине */
.case-row b{ flex:none; min-width:86px; }
@media (min-width:900px){
  /* Фото «Разработка/Реализация» — друг под другом в рамке прежних пропорций (≈2.7:1),
     как было до объединения карточек: кадрирование превью не меняется. */
  .case-wide-media{ grid-template-columns:minmax(0,1fr); }
  .case-wide-media .case-thumb{ height:auto; aspect-ratio:562 / 210; }
  .case-wide-arrow{ justify-self:center; transform:rotate(90deg); }
  .case-wide{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:stretch; }
  .case-wide-media{ padding:18px; border-bottom:none; border-right:1px solid var(--line); }
  .case-wide .case-body{ padding:28px 30px; align-self:center; }
}
.case-wide .case-row b{ min-width:100px; }

/* ---------- Превью товаров в 3 колонках: те же пропорции рамки, что были в 4 колонках
   (≈270×190), чтобы кадрирование фото осталось прежним (25.09.2026). ---------- */
@media (min-width:1001px){
  .grid-4:has(> .product-card:nth-child(6):last-child) .product-thumb,
  .grid-4:has(> .product-card:nth-child(5):last-child) .product-thumb{ height:auto; aspect-ratio:270 / 190; }
}

/* ---------- Выпадающие меню шапки (десктоп, 25.09.2026) ----------
   1) «Мостик» под пунктом: между пунктом и меню зазор 14px — курсор, пересекая его,
      терял hover и меню закрывалось раньше, чем до него доходили.
   2) Клик по пункту с меню открывает меню (класс .open, main.js), а не уводит на
      страницу — раньше «Портфолио» сразу открывало portfolio.html. Переход на
      саму страницу — первым пунктом меню («Всё портфолио»). */
.nav-dropdown::after{ content:''; position:absolute; left:-12px; right:-12px; top:100%; height:18px; }
.nav-dropdown.open{ z-index:60; }
.nav-dropdown.open .nav-dropdown-menu{ opacity:1; visibility:visible; translate:0 0; }
.nav-dropdown-menu a.nav-dropdown-all{ color:var(--gold-2); font-weight:700; border-bottom:1px solid var(--line-2); border-radius:6px 6px 0 0; margin-bottom:4px; }

/* =========================================================================
   ПОРТФОЛИО: шапка, вкладки-фильтры, порции, призывы в ленте (25.09.2026)
   ========================================================================= */
/* Шапка: факты вместо пустоты, меньше воздуха до фильтров */
.pf-facts{ list-style:none; padding:0; margin:-8px 0 0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.pf-facts li{ font-size:14px; color:var(--text-mute); display:flex; align-items:baseline; gap:8px; }
.pf-facts b{ font-size:22px; font-weight:800; color:var(--gold-2); letter-spacing:-.01em; }
.pf-facts li + li{ padding-left:26px; border-left:1px solid var(--line); }
section.section-tight:has(.pf-facts){ padding-bottom:28px; }
#pf-title .pf-count{
  display:inline-block; vertical-align:middle; margin-left:10px; padding:5px 12px; border-radius:20px;
  font-size:14px; font-weight:700; letter-spacing:0; color:var(--gold-2);
  border:1px solid var(--gold-dim); background:rgba(201,161,90,.08);
}

/* Вкладки-фильтры: как пункты меню в шапке — текст + оранжевая черта у активной */
.pf-tabs{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0 22px;
  border-bottom:1px solid var(--line); margin-bottom:30px;
}
.pf-tabs .filter-tag{
  position:relative; background:none; border:none; border-radius:0; padding:14px 0 13px;
  font:600 14px var(--font); color:var(--text-dim); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:6px; transition:color .15s ease;
}
.pf-tabs .filter-tag:hover{ color:var(--text); border:none; }
.pf-tabs .filter-tag .ft-count{ font-size:11.5px; font-weight:700; color:var(--text-mute); }
.pf-tabs .filter-tag.active{ background:none; color:var(--text); }
.pf-tabs .filter-tag.active .ft-count{ color:var(--gold-2); }
.pf-tabs .filter-tag.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange);
}
.pf-tabs .filter-tag:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* «Показать ещё» с прогрессом */
#portfolio-show-more .more-meta{ font-weight:600; color:var(--text-mute); margin-left:4px; }

/* Призыв в ленте — широкая плашка на всю строку сетки */
.pf-promo{
  grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px 22px;
  padding:22px 26px; border-radius:var(--radius-l);
  background:linear-gradient(120deg, rgba(201,161,90,.10), rgba(201,161,90,.02) 60%), var(--bg-2);
  border:1px solid rgba(201,161,90,.35);
}
.pf-promo-icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); border:1px solid var(--line); color:var(--gold-2); font-size:19px;
}
.pf-promo-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pf-promo-text b{ font-size:17px; color:var(--text); }
.pf-promo-text span{ font-size:14px; color:var(--text-dim); line-height:1.5; }
.pf-promo .btn{ white-space:nowrap; }

@media (max-width:767px){
  .pf-facts{ gap:8px 0; margin-top:-12px; }
  .pf-facts li{ font-size:12.5px; flex:1 1 33%; flex-direction:column; gap:2px; }
  .pf-facts li + li{ padding-left:12px; }
  .pf-facts b{ font-size:19px; }
  section.section-tight:has(.pf-facts){ padding-bottom:18px; }
  #pf-title .pf-count{ font-size:12px; padding:3px 10px; margin-left:6px; }
  .pf-tabs{ flex-wrap:nowrap; gap:0 22px; margin-bottom:18px; }
  .pf-tabs .filter-tag{ font-size:14px; padding:12px 0 11px; }
  .pf-promo{ grid-template-columns:auto 1fr; padding:16px; gap:12px 14px; }
  .pf-promo .btn{ grid-column:1 / -1; width:100%; justify-content:center; }
  .pf-promo-icon{ width:40px; height:40px; font-size:16px; }
  .pf-promo-text b{ font-size:15.5px; }
  .pf-promo-text span{ font-size:13px; }
  #portfolio-show-more .more-meta{ display:block; margin:2px 0 0; font-size:12px; }
}