/* === ПРЕМИУМ ДИЗАЙН-СИСТЕМА (Modern Geometric) === */
:root {
  /* Colors - Deep Navy-Slate & Vivid Gold-Orange */
  --color-bg-darkest: #131920; /* Глубокий сине-сланцевый */
  --color-bg-dark: #1b2229;    /* Тёмный slate */
  --color-bg-card: #202933;    /* Цвет карточек */
  --color-bg-card-hover: #293542;
  
  --color-gold: #e89f55;       /* Золотисто-оранжевый (под Aurora Saunas) */
  --color-gold-hover: #fcae63;
  --color-gold-rgb: 232, 159, 85;
  
  --color-text-bright: #f4efe9;
  --color-text-base: #cfc6ba;
  --color-text-muted: #8e8476;
  
  --color-border: rgba(232, 159, 85, 0.12);
  --color-border-hover: rgba(232, 159, 85, 0.35);
  
  --shadow-premium: 0 15px 45px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 30px rgba(232, 159, 85, 0.1);
  
  /* Fonts */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--color-bg-darkest);
  color: var(--color-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main {
  flex: 1;
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography Global Layout */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-bright);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

em {
  font-style: normal;
  color: var(--color-gold);
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-gold);
  color: var(--color-bg-darkest);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Common Layout Components */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: 8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4.5rem;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-weight: 600;
}

.section-title {
  font-size: 3rem;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Premium Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-bg-darkest);
  box-shadow: 0 4px 15px rgba(201, 169, 110, 0.2);
}
.btn-gold:hover {
  background-color: var(--color-gold-hover);
  box-shadow: 0 6px 20px rgba(201, 169, 110, 0.35);
  transform: translateY(-2px);
}
.btn-gold:active {
  transform: translateY(0);
}

.btn-outline {
  border: 1px solid var(--color-border);
  color: var(--color-text-bright);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--color-gold);
  background-color: rgba(201, 169, 110, 0.05);
  transform: translateY(-2px);
}
.btn-outline:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 0.7rem 1.4rem;
  font-size: 0.8rem;
}

/* Cards & Layout Grids */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2.5rem;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-premium);
}
.card:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-card-hover);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  transform: translateY(-5px);
}

/* Forms & Inputs */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  padding: 1.1rem;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  color: var(--color-text-bright);
  border-radius: 4px;
  font-family: var(--font-sans);
  transition: var(--transition-fast);
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-gold);
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px rgba(201, 169, 110, 0.1);
}

/* Fade-in animations on load/scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: viewFadeIn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes viewFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Scaling */
@media (max-width: 768px) {
  section {
    padding: 5rem 0;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .container {
    padding: 0 1.2rem;
  }
}


/* === 01-hero.css === */
/* === БЛОК 01: HERO SECTION & HEADER STYLES (Aurora Saunas Theme) === */

/* Навигационная шапка (Header Navigation) */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  /* 2026-08-27: было space-between. Меню вставало по центру, а значки
     мессенджеров улетали к правому краю — между кнопкой телефона и ними
     зияло 230 px пустоты, и значки читались как чужой блок. Теперь вправо
     прижимается вся группа целиком: меню, телефон, значки. */
  justify-content: flex-start;
  padding: 1.5rem 4rem;
  background: rgba(19, 25, 32, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav.scrolled {
  padding: 1rem 4rem;
  background: var(--color-bg-darkest);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* 2026-08-26: в шапке вместо набранной заглавными надписи стоит фирменный
   логотип из _project/logo/final. Высота по правилам применения бренда:
   46 px на десктопе, 38 px на телефоне. Картинка вдвое крупнее (112 px),
   чтобы на экранах с высокой плотностью не мылилась. */
.nav-logo {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* 2026-08-27: логотип заменён на файл владельца (logotip\logo_white_rus.png).
   Он почти квадратный — 2.2:1 против прежних 4.7:1, а название набрано в две
   строки внутри рамки. На прежней высоте 46 px буквы выходили по 4 px и не
   читались, поэтому логотип поднят до 62 px. */
.nav-logo img {
  height: 62px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .nav-logo img { height: 46px; }
}

/* Значки мессенджеров рядом с телефоном (2026-08-27). Клавиша 40×40 —
   норма тап-таргета; сам знак 20 px, остальное — воздух вокруг него. */
.nav-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.5rem;
}

/* Значки стоят рядом с бургером, а не внутри выпадающего меню: мессенджер —
   самый короткий путь к разговору, и на телефоне он должен быть виден сразу,
   без открытия меню. Поэтому на узком экране блок остаётся на месте, а меню
   схлопывается отдельно от него. */
@media (max-width: 768px) {
  .nav-msg { margin-left: auto; margin-right: 0.2rem; }
  .nav-msg-link { width: 44px; height: 44px; }
}

.nav-msg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-gold);
  border-radius: 50%;
  transition: var(--transition-smooth);
}

/* Знак, заданный картинкой-маской: сама картинка задаёт только форму,
   цвет берётся от ссылки — поэтому при наведении он переворачивается
   вместе с нарисованными вектором соседями. */
.nav-msg-znak {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.nav-msg-link:hover,
.nav-msg-link:focus-visible {
  color: var(--color-bg-darkest);
  background: var(--color-gold);
}

.nav-links {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 1.5rem;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-base);
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-gold);
}

/* Разделители между ссылками */
.nav-links a:not(.nav-phone):not(:last-child)::after {
  content: '|';
  margin-left: 1.5rem;
  color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* Кнопка "СВЯЗАТЬСЯ" / "Телефон" */
.nav-phone {
  border: 1px solid var(--color-gold);
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  font-size: 0.8rem !important;
  color: var(--color-gold) !important;
  transition: all 0.3s ease !important;
  margin-left: 1rem;
}

.nav-phone:hover {
  background: var(--color-gold);
  color: var(--color-bg-darkest) !important;
}

/* Бургер-кнопка для мобильных */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1010;
}

.nav-burger span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-text-bright);
  transition: all 0.3s ease;
}

/* Главный блок Hero */
.hero-section {
  background: var(--color-bg-darkest);
  padding: 160px 0 80px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4rem;
  flex: 1;
}

/* Левая колонка - Рендер сауны */
.hero-visual-panel {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-image-wrapper {
  position: relative;
  padding-bottom: 100%; /* Идеальный квадрат */
  height: 0;
  overflow: hidden;
}

.hero-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-panel:hover .hero-image-wrapper img {
  transform: scale(1.04);
}

/* Правая колонка - Текстовая панель */
.hero-text-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-display-title {
  font-family: var(--font-sans);
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-text-bright);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hero-tagline {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  margin-bottom: 3.5rem;
  text-transform: uppercase;
  border-left: 2px solid var(--color-gold);
  padding-left: 15px;
}

.hero-action-box {
  margin-bottom: 1.5rem;
}

.btn-hero-cta {
  background: var(--color-gold) !important;
  color: var(--color-bg-darkest) !important;
  border-radius: 2px !important;
  padding: 1.2rem 2.8rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 30px rgba(232, 159, 85, 0.25) !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-hero-cta:hover {
  background: var(--color-gold-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(232, 159, 85, 0.4) !important;
}

.btn-hero-cta .arrow {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.btn-hero-cta:hover .arrow {
  transform: translate(3px, -3px);
}

.hero-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Нижняя панель - Преимущества */
.hero-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1280px;
  margin: 60px auto 0 auto;
  padding: 0 4rem;
  width: 100%;
}

.adv-card {
  position: relative;
  height: 180px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 25px;
}

.adv-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.adv-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 20, 26, 0.95) 20%, rgba(15, 20, 26, 0.3) 100%);
  z-index: 2;
  transition: opacity 0.4s ease;
}

.adv-card-content {
  position: relative;
  z-index: 3;
}

.adv-card-content h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-bright);
  text-transform: uppercase;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}

.adv-card-content p {
  font-size: 0.8rem;
  color: var(--color-text-base);
}

.adv-card:hover .adv-card-bg {
  transform: scale(1.08);
}

.adv-card:hover .adv-card-overlay {
  background: linear-gradient(to top, rgba(15, 20, 26, 0.95) 40%, rgba(15, 20, 26, 0.5) 100%);
}

.adv-card:hover {
  border-color: rgba(232, 159, 85, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Адаптивность под планшеты и мобилки */
@media (max-width: 1024px) {
  .nav {
    padding: 1.2rem 2rem;
  }
  .nav.scrolled {
    padding: 0.8rem 2rem;
  }
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 2rem;
  }
  .hero-advantages-grid {
    padding: 0 2rem;
    gap: 20px;
  }
  .hero-visual-panel {
    max-width: 500px;
    margin: 0 auto;
  }
  .hero-text-panel {
    align-items: center;
    text-align: center;
  }
  .hero-tagline {
    border-left: none;
    border-top: 2px solid var(--color-gold);
    padding-left: 0;
    padding-top: 15px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* открывается бургером: JS вешает .open (toggleMenu в main.js) */
  }
  .nav-links.open {
    display: flex;
    position: absolute; /* от .nav (fixed) — панель ровно под шапкой любой высоты */
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 1.5rem 1.4rem;
    background: var(--color-bg-darkest);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
  }
  .nav-links.open a {
    padding: 0.95rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links.open a:not(.nav-phone):not(:last-child)::after {
    content: none; /* в вертикальном списке разделители-палки не нужны */
  }
  .nav-links.open .nav-phone {
    margin: 1.1rem 0 0;
    text-align: center;
    border-bottom: none;
  }
  .nav-burger {
    display: flex;
  }
  .hero-section {
    padding: 120px 0 60px 0;
  }
  .hero-display-title {
    font-size: 2.2rem;
  }
  .hero-advantages-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 40px;
  }
  .adv-card {
    height: 140px;
  }
}

/* === Правка по визуальному QA 2026-08-14 === */
/* Бургер-меню имел тап-таргет 18x28 px — палец не попадал. Норма 44x44.
   Увеличиваем зону касания отступами, сами полоски не трогаем. */
.nav-burger{
  padding:8px;
  margin:-8px;
  min-width:44px;
  min-height:44px;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
}
/* Кнопка cookie-баннера была 39 px по высоте — тоже ниже нормы. */
.cookie-banner button,
.cookie-banner .btn{min-height:44px}

/* === 01b-pod-klyuch.css === */
/* === Блок «Под ключ — в одних руках» === */
.pod-klyuch {
  padding: 100px 0;
  background: var(--color-bg-darkest);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Контраст «обычно → у нас» */
.pk-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 2rem;
}

.pk-contrast-col {
  padding: 35px 30px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  position: relative;
  transition: var(--transition-smooth);
}

.pk-bad {
  border-left: 3px solid var(--color-text-muted);
  opacity: 0.8;
}

.pk-good {
  border-left: 3px solid var(--color-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pk-contrast-label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.pk-good .pk-contrast-label {
  color: var(--color-gold);
}

.pk-contrast-col p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-base);
}

.pk-bad p {
  color: var(--color-text-muted);
}

.pk-good p {
  color: var(--color-text-bright);
}

/* Сплит-макет: левый баннер, правые карточки */
.pk-split-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  padding: 0 2rem;
  align-items: stretch;
}

/* Левый баннер */
.pk-banner-side {
  position: sticky;
  top: 120px;
  height: calc(100% - 120px);
  min-height: 520px;
}

.pk-banner-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.pk-banner-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pk-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(19, 25, 32, 0.1) 40%, rgba(19, 25, 32, 0.9) 100%);
  z-index: 1;
}

.pk-banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  z-index: 2;
}

.pk-banner-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 10px;
}

.pk-banner-content h3 {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  color: var(--color-text-bright);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

.pk-banner-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-base);
}

/* Правые широкие карточки */
.pk-cards-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pk-wide-card {
  position: relative;
  padding: 35px 40px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-card);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-premium);
  display: flex;
  align-items: center;
}

.pk-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  filter: grayscale(1);
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: 1;
}

.pk-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(27, 34, 41, 0.95) 0%, rgba(27, 34, 41, 0.7) 100%);
  z-index: 2;
}

.pk-card-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.pk-card-num {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-gold);
  opacity: 0.25;
  position: absolute;
  top: -15px;
  right: -10px;
  transition: var(--transition-smooth);
}

.pk-wide-card h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: var(--color-text-bright);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.pk-wide-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 90%;
  transition: var(--transition-smooth);
}

/* Ховер карточки */
.pk-wide-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), var(--shadow-glow);
  transform: translateY(-2px);
}

.pk-wide-card:hover .pk-card-bg {
  opacity: 0.22;
  transform: scale(1.05);
}

.pk-wide-card:hover .pk-card-num {
  opacity: 0.6;
  transform: translateY(-3px);
}

.pk-wide-card:hover p {
  color: var(--color-text-bright);
}

/* Подвал блока */
.pk-foot {
  text-align: center;
  margin-top: 60px;
}

/* Адаптивность */
@media (max-width: 1024px) {
  .pk-split-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .pk-banner-side {
    position: relative;
    top: 0;
    height: auto;
    min-height: 380px;
  }
  .pk-banner-content {
    padding: 30px;
  }
}

@media (max-width: 600px) {
  .pk-wide-card {
    padding: 30px 25px;
  }
  .pk-card-num {
    font-size: 1.4rem;
    top: -10px;
    right: 0;
  }
  .pk-wide-card p {
    max-width: 100%;
  }
  .pk-contrast {
    grid-template-columns: 1fr;
    padding: 0 1.2rem;
  }
}


/* === 02-services.css === */
/* === БЛОК 02: SERVICES BLOCK STYLES === */
.services {
  position: relative;
  background-image: linear-gradient(180deg, rgba(19, 25, 32, 0.95) 0%, rgba(19, 25, 32, 0.85) 50%, rgba(19, 25, 32, 0.95) 100%), url('../../img/parnayadesign1.jpg');
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 120px 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  margin-top: 50px;
  align-items: stretch;
}

.service-card {
  position: relative;
  background-color: rgba(20, 25, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 50px 35px 35px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-premium);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Эффект ховера на карточку */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
}

/* Декоративная фоновая текстура дерева */
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

/* Подключение текстур дерева с высокой видимостью (как на скриншоте) */
.services-grid .service-card:nth-of-type(1)::after {
  background-image: url('../../img/wood_linden.jpg');
  opacity: 0.16;
}

.services-grid .service-card:nth-of-type(2)::after {
  background-image: url('../../img/wood_cedar.jpg');
  opacity: 0.28;
}

.services-grid .service-card:nth-of-type(3)::after {
  background-image: url('../../img/wood_thermo.jpg');
  opacity: 0.18;
}

/* Ховер текстур */
.service-card:hover::after {
  opacity: 0.35;
  transform: scale(1.05);
}

/* Выделение популярной карточки (Комфорт) с мощным неоновым свечением */
.service-card.featured {
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 25px rgba(232, 159, 85, 0.45), 0 0 50px rgba(232, 159, 85, 0.15), var(--shadow-premium);
}

/* Центрированная плашка "Популярно" в стиле MOST POPULAR */
.service-card.featured::before {
  content: 'Популярно';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  background-color: rgba(232, 159, 85, 0.12);
  border: 1px solid rgba(232, 159, 85, 0.3);
  padding: 4px 16px;
  border-radius: 4px;
  z-index: 2;
  white-space: nowrap;
}

.service-name {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-bright);
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.service-price {
  font-family: var(--font-sans);
  /* Вилка «350 000 — 550 000 ₽» при 2.2rem рвалась на две строки посреди
     диапазона. Масштабируем по ширине карточки, чтобы держалась в строке. */
  font-size: clamp(1.1rem, 1.55vw, 1.55rem);
  white-space: nowrap;
  color: var(--color-text-bright);
  font-weight: 800;
  margin-bottom: 25px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  z-index: 2;
}

/* Дополнительное описание под ценой */
.service-card .service-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: -15px;
  margin-bottom: 25px;
  z-index: 2;
  line-height: 1.5;
}

.service-list {
  list-style: none;
  margin-bottom: 35px;
  flex-grow: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.88rem;
  color: var(--color-text-base);
  line-height: 1.5;
  z-index: 2;
}

/* Золотая галочка ✔ на списке опций */
.service-list li::before {
  content: '✔';
  position: absolute;
  left: 3px;
  top: 0;
  color: var(--color-gold);
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(232, 159, 85, 0.4);
}

.service-card .btn {
  width: 100%;
  z-index: 2;
  padding: 15px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  transition: var(--transition-smooth);
}

/* Кнопка-контур для обычных карт */
.service-card .btn-outline {
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
}

.service-card .btn-outline:hover {
  background-color: var(--color-gold);
  color: var(--color-bg-darkest);
  box-shadow: 0 4px 15px rgba(232, 159, 85, 0.3);
}

/* Золотая градиентная кнопка для Комфорта */
.service-card.featured .btn {
  background: linear-gradient(135deg, #e89f55, #cfae63);
  color: #131920;
  border: none;
  box-shadow: 0 4px 15px rgba(232, 159, 85, 0.4);
}

.service-card.featured .btn:hover {
  background: linear-gradient(135deg, #fcae63, #dfbe73);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 159, 85, 0.6);
}

@media (max-width: 768px) {
  .services {
    padding: 80px 0;
  }
  .service-card {
    padding: 45px 25px 30px;
  }
}


/* 2026-08-26: правила .pack-lead* и .quick-lead-wrap удалены вместе
   с формами, которые стояли прямо в блоках. Теперь везде кнопка,
   а поле телефона — в окне заявки (css/blocks/07-lead-modal.css).
   Именно этот мёртвый код растягивал одиночную кнопку до 420 px. */

/* Подпись поля нужна только скринридеру: на экране роль подписи играет placeholder. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Расшифровка звёздочки про дизайн-проект под формой на странице цен (2026-08-25). */
.pack-lead-note {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.pack-lead-note strong { color: var(--color-gold); }


/* === 03-portfolio.css === */
/* === БЛОК 03: PORTFOLIO SECTION STYLES === */
.portfolio {
  background-color: var(--color-bg-darkest);
}

.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-bottom: 8rem;
}

.project-showcase {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.project-showcase-reverse {
  grid-template-columns: 1fr 1.2fr;
}

.project-showcase-reverse .project-gallery {
  grid-column: 2;
}
.project-showcase-reverse .project-panel {
  grid-column: 1;
  grid-row: 1;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gallery-item-large {
  grid-column: span 2;
}

.gallery-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-bright);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.project-panel {
  padding: 2.5rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.project-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
}

.project-name {
  font-size: 2.4rem;
  line-height: 1.2;
}

.project-text {
  font-size: 0.95rem;
  color: var(--color-text-base);
  line-height: 1.6;
}

.project-facts {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.5rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-facts li {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.project-facts li strong {
  font-weight: 600;
  color: var(--color-text-muted);
}

.project-facts li span {
  color: var(--color-text-bright);
  font-weight: 550;
  text-align: right;
  max-width: 60%;
}

.project-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  transition: var(--transition-fast);
}

.project-arrow:hover {
  color: var(--color-gold-hover);
}

.project-arrow span {
  transition: transform 0.25s ease;
}
.project-arrow:hover span {
  transform: translateX(5px);
}

/* Before-After Slider Styles */
.ba-block {
  margin-top: 8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ba-head {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 600px;
}

.ba-title {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.ba-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.ba-slider {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9; /* кадры «до/после» готовятся в 16:9 (папка «обработано 16-9») */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-premium);
  cursor: ew-resize;
  user-select: none;
}

.ba-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-img-after {
  z-index: 1;
}

.ba-img-before {
  z-index: 2;
}

.ba-before-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ba-label {
  position: absolute;
  bottom: 1.5rem;
  padding: 0.4rem 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--color-text-bright);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
}

.ba-label-before {
  left: 1.5rem;
}

.ba-label-after {
  right: 1.5rem;
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-gold);
  z-index: 3;
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: var(--color-bg-dark);
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  pointer-events: auto;
  cursor: ew-resize;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.ba-slider:hover .ba-handle {
  transform: translate(-50%, -50%) scale(1.08);
}

.ba-handle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.4);
}

@media (max-width: 900px) {
  .project-showcase, .project-showcase-reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .project-showcase-reverse .project-gallery {
    grid-column: 1;
  }
  .project-showcase-reverse .project-panel {
    grid-column: 1;
  }
}

/* Фото «до» в слайдере сравнения (заменило SVG-схему) */
.ba-before-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Заявка под кейсами портфолио (2026-08-25) === */
.portfolio-lead {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  text-align: center;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-lead--active { border-color: var(--color-gold); box-shadow: var(--shadow-glow); }
.portfolio-lead-title { font-size: 1.5rem; margin-bottom: 0.7rem; line-height: 1.25; }
.portfolio-lead-text { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.4rem; }
/* 2026-08-26: правила формы удалены — под портфолио теперь кнопка,
   поле телефона живёт в окне заявки. */

/* Кнопка кейса: раньше была ссылкой со стрелкой, её не принимали за кнопку. */
.project-cta { margin-top: 1.4rem; }

@media (max-width: 560px) {
  .portfolio-lead { padding: 1.4rem 1.1rem; }
  .portfolio-lead-title { font-size: 1.2rem; }
}

/* === 03b-tech.css === */
/* === БЛОК 03b «Технология» (#tech) === */
.tech-why {
  background: var(--color-bg-darkest);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 100px 0;
}

/* Сплит-разметка: чертеж слева, карточки справа */
.tech-why-split {
  display: grid;
  /* 2026-08-27: было 1fr 1.12fr. Замер показал, что колонки текста внутри
     карточки получались по 155 px — примерно 13–19 знаков в строке, текст рвался
     в узкий столбик. Схеме слева ширина нужна меньше, чем сравнению справа. */
  grid-template-columns: 0.85fr 1.3fr;
  gap: 32px;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  padding: 0 2rem;
  /* 2026-08-26: было align-items:start — правая карточка узла оставалась
     на 115 px ниже левой схемы, под ней зияла пустота, нижние края не
     совпадали. Тянем колонки на одну высоту. */
  align-items: stretch;
}

/* Цепочка растяжения по высоте: сетка тянет колонку, колонка — контейнер,
   контейнер — активную карточку. Без любого звена карточка справа остаётся
   короче схемы слева, и под ней зияет пустота (замерено 2026-08-26:
   641 px против 510 px). */
.tech-right-col {
  display: flex;
  flex-direction: column;
  /* Без min-width:0 колонка грида не сжимается ниже ширины своего содержимого,
     и заданная пропорция не соблюдается: замер 2026-08-27 показал 465/575
     вместо расчётных 425/615 — левую колонку распирала легенда из пяти
     подписей, и текст справа оставался узким. */
  min-width: 0;
}

.tech-left-col { min-width: 0; }

.techwhy-nodes-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Левая сторона: чертеж */
.tech-left-col {
  position: sticky;
  top: 120px;
  width: 100%;
}

/* Легенда под схемой в два ряда по три: пять подписей в одну строку требовали
   от левой колонки 465 px и не давали ей сжаться (2026-08-27). */
.tech-pirog-legend {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 16px;
}

.tech-pirog {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 35px 25px;
  border-radius: 4px;
  box-shadow: var(--shadow-premium);
}

.tech-pirog-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-bright);
  text-align: center;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Визуальный контейнер схемы пирога стены */
.tech-pirog-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-premium);
  background: #0e1217;
}

.tech-pirog-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.tech-pirog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(19, 25, 32, 0) 60%, rgba(19, 25, 32, 0.3) 100%);
  pointer-events: none;
}

/* Интерактивные хотспоты */
.tech-hotspot {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 25, 31, 0.95);
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  transition: var(--transition-smooth);
}

/* Активное и ховер состояние */
.tech-hotspot:hover, .tech-hotspot.active {
  background: var(--color-gold);
  color: var(--color-bg-darkest);
  box-shadow: 0 0 20px var(--color-gold);
  transform: scale(1.1);
}

/* Пульсация хотспотов */
.hotspot-pulse {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  opacity: 0;
  pointer-events: none;
  animation: hotspotPulse 2.2s infinite ease-out;
}

.tech-hotspot.active .hotspot-pulse {
  animation: none; /* Отключаем пульсацию, когда точка активна */
}

@keyframes hotspotPulse {
  0% { transform: scale(0.95); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Легенда под чертежом */
.tech-pirog-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 25px 0 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 20px;
}

.tech-pirog-legend li {
  /* 2026-08-26: было 0.75rem (12 px) — самый мелкий текст на странице,
     подписи слоёв читались как сноска. Сравняли с текстом карточек справа. */
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tech-pirog-legend li b {
  display: block;
  color: var(--color-text-bright);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 8px 0 3px 0;
  transition: var(--transition-smooth);
}

.tech-pirog-legend li.active b, .tech-pirog-legend li:hover b {
  color: var(--color-gold);
}

.tpl-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(232, 159, 85, 0.15);
  border: 1px solid rgba(232, 159, 85, 0.3);
  color: var(--color-gold);
  font-weight: 700;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  transition: var(--transition-smooth);
}

.tech-pirog-legend li.active .tpl-num, .tech-pirog-legend li:hover .tpl-num {
  background: var(--color-gold);
  color: var(--color-bg-darkest);
  border-color: var(--color-gold);
}

/* Правая сторона: Карточки с переключением */
.techwhy-nodes-container {
  position: relative;
  width: 100%;
  min-height: 480px;
}

.techwhy-node {
  display: none;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  padding: 26px 28px;
  border-radius: 4px;
  box-shadow: var(--shadow-premium);
}

/* Показ активной карточки с плавной анимацией */
.techwhy-node.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  animation: techFadeIn 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes techFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.techwhy-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Шапка узла */
.techwhy-node-head {
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.techwhy-num {
  flex: none;
  font-family: var(--font-sans);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-gold);
}

.techwhy-title {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-bright);
  line-height: 1.2;
  margin-bottom: 5px;
}

.techwhy-lead {
  font-size: 0.9rem;
  color: var(--color-text-base);
  font-weight: 400;
  line-height: 1.6;
}

/* Контраст «Халтура vs У нас» */
/* «На халтуре» и «У нас» идут друг под другом, а не бок о бок (2026-08-27).
   Рядом они делили и без того узкую колонку пополам: замер дал 155 px на текст,
   то есть 13–19 знаков в строке — текст сыпался в рваный столбик. Сверху вниз
   строка получается втрое длиннее, а карточка при этом ниже: узкие колонки
   давали вдвое больше строк, чем широкие. */
.techwhy-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.techwhy-compare .techwhy-arrow {
  transform: rotate(90deg);
  font-size: 1.1rem;
  line-height: 1;
}

/* === Ряд узлов над карточками (2026-08-27) ===
   Семь узлов, пять слоёв на схеме: «Защита дерева» и «Вентиляция» в пирог стены
   не входят, и добраться до них кликом по чертежу нельзя. Этот ряд открывает
   любой узел напрямую. */
.techwhy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.techwhy-tab {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.techwhy-tab:hover { color: var(--color-text-bright); border-color: var(--color-border-hover); }

.techwhy-tab.active {
  color: var(--color-bg-darkest);
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* На телефоне карточки работают аккордеоном — там ряд не нужен, заголовки
   и так все на виду. */
@media (max-width: 768px) {
  .techwhy-tabs { display: none; }
}

.techwhy-side {
  /* Отступы ужаты 2026-08-27: при прежних 25 px с каждой стороны на текст
     оставалось 155 px из 207. Ширина колонки важнее воздуха вокруг неё. */
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.techwhy-side p {
  font-size: 0.85rem;
  line-height: 1.6;
}

.techwhy-side strong {
  font-weight: 700;
}

.techwhy-bad {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

.techwhy-bad p {
  color: var(--color-text-muted);
}

.techwhy-good {
  border-color: var(--color-border);
  background: rgba(232, 159, 85, 0.04);
}

.techwhy-good p {
  color: var(--color-text-bright);
}

.techwhy-good strong {
  color: var(--color-gold);
}

.techwhy-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}

.techwhy-tag::before {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  line-height: 1;
}

.techwhy-bad .techwhy-tag {
  color: var(--color-text-muted);
}

.techwhy-bad .techwhy-tag::before {
  content: '\2715';
}

.techwhy-good .techwhy-tag {
  color: var(--color-gold);
}

.techwhy-good .techwhy-tag::before {
  content: '\2713';
}

.techwhy-arrow {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--color-gold);
  user-select: none;
}

/* Итоговая плашка */
.techwhy-verdict {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 35px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-premium);
}

.techwhy-verdict-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.techwhy-verdict-text strong {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-bright);
  text-transform: uppercase;
}

.techwhy-verdict-text span {
  font-size: 0.9rem;
  color: var(--color-text-base);
  font-weight: 400;
  line-height: 1.6;
}

.techwhy-verdict .btn {
  white-space: nowrap;
}

/* === АДАПТИВНОСТЬ === */
@media (max-width: 1024px) {
  .tech-why-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .tech-left-col {
    position: relative;
    top: 0;
  }
  
  .tech-pirog-legend {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .techwhy-nodes-container {
    min-height: auto;
  }
  
  .techwhy-node {
    display: block !important;
    margin-bottom: 20px;
    padding: 25px 20px;
  }
  
  .techwhy-node:last-child {
    margin-bottom: 0;
  }
  
  .tech-hotspot {
    pointer-events: none;
  }

  .techwhy-node-head {
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  
  .techwhy-compare {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .techwhy-arrow {
    transform: rotate(90deg);
    font-size: 1.2rem;
    padding: 5px 0;
  }
  
  .techwhy-verdict {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 20px;
  }
  
  .techwhy-verdict .btn {
    width: 100%;
    justify-content: center;
  }
  
  .tech-pirog-legend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .tech-pirog-legend {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-26: широкая колонка под поле телефона удалена вместе с формой.
   Правило растягивало одиночную кнопку до 420 px — вдвое шире её текста
   и вдвое шире таких же кнопок в других блоках. Колонка снова `auto`
   (базовое правило .techwhy-verdict выше), кнопка — по своему тексту. */
@media (max-width: 1024px) {
  .techwhy-verdict { grid-template-columns: 1fr; }
}

/* === 03c-kak-rabotaem.css === */
/* === БЛОК 07: СТИЛИ ПРОЦЕССА РАБОТЫ (Timeline) === */
.work-timeline {
  background: var(--color-bg-darkest);
  padding: 100px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
}

.process-interactive {
  max-width: 1100px;
  margin: 60px auto 0 auto;
  padding: 0 2rem;
}

/* Шкала шагов (Progress Bar) */
.process-steps-bar {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 60px;
  padding: 0 40px;
}

.process-progress-line {
  position: absolute;
  top: 18px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.process-progress-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--color-gold);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Кнопка шага */
.process-step-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  outline: none;
  width: 100px;
}

.process-step-btn .btn-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-darkest);
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.process-step-btn .btn-label {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.05em;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

/* Активное и Ховер состояние кнопки */
.process-step-btn:hover .btn-num, .process-step-btn.active .btn-num {
  border-color: var(--color-gold);
  color: var(--color-bg-darkest);
  background: var(--color-gold);
  box-shadow: 0 0 15px var(--color-gold);
}

.process-step-btn:hover .btn-label, .process-step-btn.active .btn-label {
  color: var(--color-text-bright);
}

/* Контейнер слайдов */
.process-slider-container {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-premium);
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

/* Слайд */
.process-slide {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.process-slide.active {
  display: grid;
  animation: slideFadeIn 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Левая сторона слайда: Изображение */
.slide-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 380px;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-image::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(19, 25, 32, 0) 60%, rgba(19, 25, 32, 0.4) 100%);
  pointer-events: none;
}

/* Правая сторона слайда: Контент */
.slide-content {
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.slide-title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-bright);
  margin-bottom: 15px;
  line-height: 1.3;
}

.slide-text {
  font-size: 0.92rem;
  color: var(--color-text-base);
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Список подпунктов */
.slide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.88rem;
  color: var(--color-text-base);
  line-height: 1.5;
}

.slide-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 5px var(--color-gold);
}

/* Мета-информация (Сроки и Результат) */
.slide-meta {
  display: flex;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 25px;
}

.meta-item {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.meta-item strong {
  color: var(--color-text-bright);
}

/* Метки «Срок» и «Результат»: золотая точка вместо эмодзи —
   эмодзи выбивались из графики блока (там маркеры списков такие же). */
.meta-item {
  position: relative;
  padding-left: 16px;
}
.meta-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Примечание про срок: раньше стояло вне .container и уезжало за левый край */
.process-note {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(232, 159, 85, 0.14);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-align: center;
}
.process-note strong {
  color: var(--color-gold-light, var(--color-gold));
  font-weight: 600;
}

/* === АДАПТИВНОСТЬ === */
@media (max-width: 1024px) {
  .process-steps-bar {
    padding: 0;
  }
  .process-progress-line {
    left: 40px;
    right: 40px;
  }
  .slide-content {
    padding: 35px;
  }
  .slide-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 900px) {
  /* На мобильных скрываем шкалу и показываем карточки вертикальной лентой */
  .process-steps-bar {
    display: none;
  }
  
  .process-slider-container {
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: auto;
  }
  
  .process-slide {
    display: flex !important;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: var(--shadow-premium);
    margin-bottom: 30px;
    overflow: hidden;
  }
  
  .process-slide:last-child {
    margin-bottom: 0;
  }
  
  .slide-image {
    min-height: 250px;
    height: 250px;
  }
  
  .slide-image::after {
    background: linear-gradient(180deg, rgba(19, 25, 32, 0) 50%, rgba(19, 25, 32, 0.5) 100%);
  }
}

@media (max-width: 480px) {
  .slide-content {
    padding: 25px 20px;
  }
  .slide-meta {
    flex-direction: column;
    gap: 10px;
  }
}


/* === 04-quiz.css === */
/* === БЛОК 04: QUIZ SECTION STYLES === */
.quiz-section {
  background-color: var(--color-bg-dark);
}

.quiz-wrapper {
  width: 100%;
  /* 2026-08-26: было 800px. В такой контейнер четыре карточки с фото влезали
     только по 160 px шириной, поэтому сетка оставалась в две колонки, шаг
     вырастал в три ряда и не помещался в экран: человек листал вниз за
     кнопкой «Далее» и обратно вверх к вариантам. */
  max-width: 1100px;
  margin: 0 auto;
}

.quiz-container {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3.5rem;
  box-shadow: var(--shadow-premium);
  position: relative;
}

/* Progress bar */
.quiz-progress-bar {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.quiz-progress-bar::before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  position: absolute;
  top: 3.5rem;
  left: 3.5rem;
  right: 3.5rem;
  width: calc(100% - 7rem);
}

.quiz-progress-line {
  height: 4px;
  background-color: var(--color-gold);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(201, 169, 110, 0.5);
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 2;
  margin-top: 0.2rem;
}

.quiz-progress-text {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Step visibility */
.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: quizStepFadeIn 0.5s ease forwards;
}

@keyframes quizStepFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-step-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.quiz-step-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

/* Option Cards */
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.quiz-option-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.quiz-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.option-content {
  padding: 1.8rem;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: var(--transition-smooth);
  /* Фон-фотография живёт в псевдоэлементе под содержимым (2026-08-27).
     Владелец назвал шаг из голого текста скучным. Снимок идёт приглушённым:
     он создаёт настроение, но не спорит с текстом — контраст подписей
     замерен после правки и остаётся выше нормы. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.option-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--fon);
  background-size: cover;
  background-position: center;
  opacity: 0.62;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

/* Тёмная вуаль поверх снимка. Сверху почти прозрачная — там только знак,
   книзу плотнее: под заголовком идут серые подписи, и на светлом участке
   фотографии они бы пропали. Контраст замерен после правки. */
.option-content::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(19, 25, 32, 0.35) 0%, rgba(19, 25, 32, 0.72) 45%, rgba(19, 25, 32, 0.9) 100%);
  pointer-events: none;
}

.quiz-option-card:hover .option-content::before { opacity: 0.78; transform: scale(1.05); }

.quiz-option-card input[type="radio"]:checked + .option-content::before { opacity: 0.85; }

/* Карточкам задана минимальная высота: с фотографией внутри плитка
   в 120 px выглядела обрезком, а под сеткой оставалось пустое поле. */
@media (min-width: 769px) {
  .quiz-options--compact .option-content { min-height: 200px; justify-content: flex-end; }
  .quiz-options--compact .option-icon { margin-bottom: auto; }
}

.quiz-option-card:hover .option-content {
  border-color: rgba(201, 169, 110, 0.4);
  background-color: rgba(201, 169, 110, 0.02);
}

.quiz-option-card input[type="radio"]:checked + .option-content {
  border-color: var(--color-gold);
  background-color: rgba(201, 169, 110, 0.05);
  box-shadow: var(--shadow-glow);
}

.option-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-bright);
}

.option-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Form layout at Step 4 */
.quiz-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 480px;
  margin-bottom: 2rem;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.consent-label input {
  margin-top: 0.2rem;
}

.consent-label a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Success State */
.quiz-success {
  text-align: center;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: quizStepFadeIn 0.6s ease forwards;
}

.success-icon {
  width: 64px;
  height: 64px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(201, 169, 110, 0.4));
}

.quiz-success h3 {
  font-size: 2.2rem;
}

.quiz-success p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 480px;
}

/* Navigation buttons */
.quiz-nav-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
}

@media (max-width: 768px) {
  .quiz-container {
    padding: 2.5rem 1.5rem 1.5rem;
  }
  .quiz-progress-bar::before {
    left: 1.5rem;
    right: 1.5rem;
    width: calc(100% - 3rem);
    top: 2.5rem;
  }
  .quiz-options {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .quiz-step-title {
    font-size: 1.4rem;
  }
  .quiz-nav-buttons {
    justify-content: space-between;
  }
  .quiz-nav-buttons .btn {
    flex: 1;
  }
}

/* === Фото-карточки вариантов квиза (графика AG-07) === */
.option-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 1.1rem;
}
.option-img-question {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 159, 85, 0.06);
  border: 1px dashed var(--color-border-hover);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  .option-img { aspect-ratio: 16 / 9; margin-bottom: 0.85rem; }
}

/* Кнопки навигации квиза были 39 px по высоте — ниже нормы тап-таргета 44 px. */
.quiz-nav-buttons .btn{min-height:44px}

/* === Шаг квиза должен помещаться в экран (правка 2026-08-25) ===
   Было: сетка 2×2 с картинками 4:3, отступ контейнера 3.5rem — шаг занимал около
   полутора экранов на ноутбуке. Человек листал вниз к кнопке «Далее», нажимал,
   и его выбрасывало к началу следующего шага — приходилось листать обратно вверх.
   На каждом шаге по два лишних прокручивания, на четырёх шагах — восемь.
   Лечим тремя приёмами разом: узкая сетка в один ряд на широком экране,
   низкие картинки и панель кнопок, приклеенная к низу экрана. */

@media (min-width: 769px) {
  /* Картинка вдвое ниже: 16:9 вместо 4:3. Смысл кадра не теряется —
     на превью и так видно только общий вид парной. */
  .option-img { aspect-ratio: 16 / 9; margin-bottom: 0.7rem; }
  .option-content { padding: 1.1rem; }
  .quiz-container { padding: 2.2rem 2.2rem 0; }
  .quiz-options { gap: 1rem; margin-bottom: 1.6rem; }
  .quiz-step-title { font-size: 1.45rem; margin-bottom: 1.2rem; }
  .quiz-step-subtitle { margin-bottom: 1.2rem; }

  /* Панель кнопок висит у нижнего края экрана, пока шаг длиннее окна.
     Фон непрозрачный — иначе карточки просвечивают сквозь неё при прокрутке. */
  .quiz-nav-buttons {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--color-bg-card);
    padding-top: 1.1rem;
    padding-bottom: 1.4rem;
    margin-top: 0;
  }
}

/* Четыре варианта в один ряд, когда экран это позволяет: весь шаг помещается
   без прокрутки. Ниже 1100 px карточки стали бы уже 200 px — там оставляем 2×2. */
/* 2026-08-27: четыре в ряд начинаются с 769 px, а не с 1000. На всех шагах
   теперь ровно четыре варианта (четвёртый — «не знаю»), и разбивка 2×2 на
   средних экранах делала шаг вдвое выше без всякой пользы. */
@media (min-width: 769px) {
  .quiz-options { grid-template-columns: repeat(4, 1fr); }
}

/* Шаг с двумя-тремя вариантами не растягиваем на всю ширину — иначе карточки
   выглядят обрубками. Сетка подстраивается под число вариантов.
   2026-08-27: порог опущен с 1000 до 769 px. У владельца окно браузера уже
   1000 px, поэтому три варианта вставали в два ряда (2 + 1), шаг вырастал
   и не помещался в экран — приходилось листать вниз за кнопкой «Далее».
   С 769 px три варианта идут в один ряд: шаг помещается целиком. */
@media (min-width: 769px) {
  .quiz-options:has(> .quiz-option-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .quiz-options:has(> .quiz-option-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
}

/* === Вариант «ничего из перечисленного» (добавлен 2026-08-25) ===
   Занимает всю ширину ряда и идёт горизонтальной строкой: он не должен выглядеть
   равным настоящим вариантам, но и прятать его нельзя — это выход для человека,
   который не мерил парную или не разбирается в породах дерева. */
.quiz-option-card--other { grid-column: 1 / -1; }
.quiz-option-card--other .option-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'mark title' 'mark desc';
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 0.9rem 1.2rem;
}
.quiz-option-card--other .option-img {
  grid-area: mark;
  width: 46px;
  height: 46px;
  aspect-ratio: auto;
  margin: 0;
  font-size: 1.6rem;
}
.quiz-option-card--other .option-title { grid-area: title; }
.quiz-option-card--other .option-desc { grid-area: desc; }

/* === Кнопки не должны прыгать между шагами (правка 2026-08-25) ===
   Шаги разной высоты, и панель кнопок ездила вверх-вниз: человек нажимал «Далее»
   и терял её из виду. Держим область шагов одной высоты, «Назад» прижимаем влево,
   «Далее» — вправо, чтобы палец и курсор возвращались в одну и ту же точку. */
@media (min-width: 769px) {
  #quizForm { min-height: 27rem; }
}
.quiz-nav-buttons { justify-content: flex-start; }
/* Именно margin, а не space-between: на первом шаге кнопка «Назад» скрыта,
   и при space-between «Далее» перепрыгнула бы в левый край. */
#quizNextBtn { margin-left: auto; }
/* === Компактный шаг без фотографий (2026-08-26) ===
   Первый вопрос — про объём. Фотографии парных там не помогали выбрать
   (6 м³ и 10 м³ на снимке неотличимы), зато поднимали высоту шага втрое.
   Вместо картинки — сама цифра: её и выбирают. */
.quiz-options--compact .option-content {
  padding: 1.15rem 1.1rem 1.2rem;
  text-align: left;
}

.option-size {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--color-gold);
  margin-bottom: 0.45rem;
}

/* Ярлык уровня отделки на втором шаге (2026-08-27). Тот же золотой акцент,
   что и у площади на первом шаге, но это слово, а не число: набираем его
   мельче и вразрядку, иначе «Практично» кеглем 24 px спорит с названием
   пород под ним и читается как заголовок карточки. */
.option-level {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.quiz-options--compact .option-title {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.quiz-options--compact .option-desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* === Знаки на карточках (2026-08-27) ===
   Шаги без фотографий владелец назвал скучным текстом. Рисуем вектором:
   знак не мылится на экране любой плотности, ничего не весит и — в отличие
   от снимков древесины — не обещает того, чего человек на объекте не увидит. */
.option-icon {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 0.55rem;
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--transition-smooth);
}

.quiz-option-card:hover .option-icon { transform: translateY(-2px); }

/* Карточка «не знаю» — равноправная четвёртая, а не приписка снизу.
   Отличается только пунктирной рамкой: это выбор другого рода, но
   человек должен видеть его сразу, вместе с остальными. */
.quiz-option-card--help .option-content {
  border-style: dashed;
}

.quiz-option-card--help input:checked + .option-content {
  border-style: solid;
}

/* Шаг с фотографиями: у четвёртой карточки снимка пока нет, поэтому на его
   месте — площадка тех же пропорций со знаком. Пустым серым квадратом она
   не выглядит: фон и рамка те же, что у фотографий рядом. */
.option-img-znak {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 159, 85, 0.05);
  border: 1px solid var(--color-border);
}

.option-icon--big { width: 44px; height: 44px; margin: 0; }

@media (min-width: 769px) {
  .option-img-znak { aspect-ratio: 16 / 9; margin-bottom: 0.7rem; }
  .option-icon { width: 30px; height: 30px; margin-bottom: 0.45rem; }
  .option-icon--big { width: 34px; height: 34px; }
}

/* === Строка «не знаю» под сеткой (2026-08-26, снята 2026-08-27) ===
   Оставлена для страниц, где ещё встречается разметка старого образца.
   На шагах квиза вариант вернулся в сетку четвёртой плиткой: строкой под
   сеткой его просто не замечали. */
.quiz-other-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.quiz-other-line:hover { border-color: var(--color-gold); }

.quiz-other-line input { position: absolute; opacity: 0; pointer-events: none; }

.quiz-other-line:has(input:checked) {
  border-style: solid;
  border-color: var(--color-gold);
  background: rgba(201, 169, 110, 0.07);
}

.quiz-other-mark {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-gold);
  font-size: 1rem;
}

.quiz-other-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.quiz-other-text b { color: var(--color-text); font-weight: 600; }

@media (max-width: 768px) {
  .quiz-options--compact { grid-template-columns: 1fr 1fr; }
  .option-size { font-size: 1.25rem; }
  .option-level { font-size: 0.72rem; }
  .quiz-other-line { padding: 0.75rem 0.9rem; }
  .quiz-other-text { font-size: 0.8rem; }
}

/* === Шаг с фотографиями на телефоне (2026-08-27) ===
   Карточки с широкой картинкой сверху вытягивали шаг про печи до 1430 px при
   окне 915 — полтора экрана на один вопрос. Раскладываем карточку в строку:
   миниатюра слева, название и описание справа. Замер после правки — ниже
   в отчёте; фотографию печи узнать на 92 px по-прежнему можно, а весь шаг
   помещается целиком. */
@media (max-width: 768px) {
  /* 2026-08-27: вариантов стало четыре, и шаг про печи перестал помещаться
     на 7 px. Ужимаем ряд, а не выбрасываем вариант: миниатюра 84 px вместо 92,
     отступы плотнее. Замер после правки — в отчёте. */
  .quiz-options:not(.quiz-options--compact) { gap: 0.7rem; }
  .quiz-options:not(.quiz-options--compact) .option-content {
    display: grid;
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    padding: 0.7rem;
  }
  .quiz-options:not(.quiz-options--compact) .option-img {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
  .quiz-options:not(.quiz-options--compact) .option-title { grid-column: 2; align-self: end; }
  .quiz-options:not(.quiz-options--compact) .option-desc { grid-column: 2; align-self: start; }
}


/* === 05-faq.css === */
/* === БЛОК 05: FAQ SECTION STYLES === */
.faq {
  background-color: var(--color-bg-darkest);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-item {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-card-hover);
}

.faq-trigger {
  width: 100%;
  padding: 1.8rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-bright);
}

.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-left: 1.5rem;
  transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform 0.3s ease;
}

/* Вертикальная палочка */
.faq-icon::before {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

/* Горизонтальная палочка */
.faq-icon::after {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

/* Активный статус аккордеона */
.faq-item.active .faq-icon {
  transform: rotate(135deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-inner {
  padding: 0 2.2rem 2rem;
  font-size: 0.95rem;
  color: var(--color-text-base);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .faq-trigger {
    padding: 1.4rem 1.6rem;
    font-size: 1rem;
  }
  .faq-inner {
    padding: 0 1.6rem 1.6rem;
  }
}


/* === 06-contacts.css === */
/* === БЛОК 06: CONTACTS & FOOTER STYLES === */
.contacts {
  background-color: var(--color-bg-dark);
}

.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.contacts-info {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3rem;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contacts-heading {
  font-size: 2.2rem;
  line-height: 1.2;
}

.contacts-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.contacts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-top: 1rem;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 1.2rem;
}

.contact-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-item strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.contact-val {
  font-size: 1.25rem;
  color: var(--color-text-bright);
  font-weight: 500;
}

a.contact-val:hover {
  color: var(--color-gold);
}

.contacts-tg-btn {
  margin-top: 0.5rem;
  width: fit-content;
  border-color: rgba(201, 169, 110, 0.3);
}

.contacts-tg-btn:hover {
  background-color: var(--color-gold);
  color: var(--color-bg-darkest);
  border-color: var(--color-gold);
}

.contacts-socials {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contacts-socials strong {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.socials-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-link-item {
  font-size: 0.85rem;
  color: var(--color-gold);
  border-bottom: 1px dotted currentColor;
  font-weight: 600;
}

.social-link-item:hover {
  color: var(--color-gold-hover);
  border-bottom-style: solid;
}

/* Map frame rounded corners */
.contacts-map {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-premium);
  background-color: var(--color-bg-card);
}

.map-container {
  position: relative;
  width: 100%;
}

.map-container iframe {
  display: block;
  filter: grayscale(1) invert(0.9) contrast(1.2); /* Тёмная стилизация под карту */
  opacity: 0.85;
  transition: var(--transition-smooth);
}

.map-container:hover iframe {
  filter: none;
  opacity: 1;
}

/* Footer Styles */
.footer {
  background-color: var(--color-bg-darkest);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding: 3.5rem 0;
  color: var(--color-text-muted);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text-bright);
  display: block;
  margin-bottom: 0.5rem;
}

.footer-copy {
  font-size: 0.8rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-link {
  font-size: 0.85rem;
  border-bottom: 1px solid transparent;
}

.footer-link:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

@media (max-width: 900px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }
}


/* === 07-lead-modal.css === */
/* === ВСПЛЫВАЮЩЕЕ ОКНО ЗАЯВКИ (2026-08-26) ===
   Появилось вместо формы, которая постоянно висела под карточками пакетов.
   Одно окно на страницу, содержимое подставляет main.js по data-атрибутам кнопки.
   Всё внутри выровнено по одной вертикали и растянуто на одну ширину — окно
   маленькое, любая рассинхронизация полей в нём сразу бросается в глаза. */

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lead-modal--open { opacity: 1; }
.lead-modal[hidden] { display: none; }

.lead-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(3px);
}

.lead-modal-window {
  position: relative;
  width: 100%;
  max-width: 27rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.lead-modal--open .lead-modal-window { transform: none; }

.lead-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.lead-modal-close:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.lead-modal-tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 4px;
}

.lead-modal-title {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

.lead-modal-text {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Поле и кнопка — одной ширины и одной высоты, друг под другом.
   В узком окне разнобой по ширине читается как небрежность. */
.lead-modal-field { display: block; margin-bottom: 0.75rem; }

.lead-modal-field input[type="tel"] {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.lead-modal-field input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-gold);
}

.lead-modal-submit {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin-bottom: 0.9rem;
}

.lead-modal .consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.lead-modal .consent-label input { margin-top: 0.15rem; flex-shrink: 0; }

.lead-modal .form-success {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.lead-modal .form-success h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.lead-modal .form-success p { margin: 0; color: var(--color-text-muted); }

.lead-modal .form-error {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #ff9f9f;
}

/* Фон не прокручиваем, пока окно открыто: иначе страница уезжает под окном. */
body.modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .lead-modal { padding: 1rem; }
  .lead-modal-window { padding: 2rem 1.35rem; }
  .lead-modal-title { font-size: 1.2rem; }
}


/* === 90-legacy-pages.css === */
/* ============================================================
   90-legacy-pages.css — стили внутренних страниц и служебных
   элементов сборщика (форма, лайтбокс, cookie, sticky, заглушки).
   Восстановлены из старого base.css (ревизия e6489ee) после
   рефакторинга блоков: новый base.css их потерял, и все страницы,
   которые генерит build_site.py, остались голым HTML.
   Палитра перекрашена под новую тему через алиасы переменных ниже.
   Классы, уже определённые в новых css/blocks/*, сюда НЕ включены.
   ============================================================ */

/* --- Алиасы старых переменных на новую палитру --- */
:root{
  --color-bg:var(--color-bg-darkest);
  --color-bg-warm:var(--color-bg-dark);
  --color-gold-light:var(--color-gold-hover);
  --color-gold-dim:rgba(232,159,85,0.55);
  --color-text:var(--color-text-base);
  --color-text-dim:var(--color-text-muted);
  --color-white:var(--color-text-bright);
  --color-accent:var(--color-gold);
  --font-body:var(--font-sans);
}

/* --- Мелкая база, которой нет в новом base.css --- */
/* Страховка от горизонтального скролла (была в старом base, потерялась) */
html{overflow-x:clip}
body{overflow-x:clip}
section[id]{scroll-margin-top:5rem}
.legal-page{padding-top:8rem}
.icon{width:48px;height:48px;stroke:var(--color-gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 1rem}

/* --- Хлебные крошки --- */
.breadcrumbs{padding:5.5rem 5vw 0;font-size:0.8rem;color:var(--color-text-dim)}
.breadcrumbs a{color:var(--color-gold-dim);transition:color 0.3s}
.breadcrumbs a:hover{color:var(--color-gold)}
.breadcrumbs span{margin:0 0.4rem;opacity:0.5}

/* --- Мини-герой внутренних страниц --- */
.page-hero{position:relative;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;padding:7rem 5vw 3rem;background:var(--color-bg-warm);border-bottom:1px solid rgba(232,159,85,0.1)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:600;color:var(--color-white);margin-bottom:0.8rem}
.page-hero .subtitle{font-size:1.05rem;color:var(--color-text-dim);font-weight:300;max-width:600px}

/* --- Полоса доверия --- */
.proof-strip{padding:0;background:var(--color-bg);border-top:1px solid rgba(232,159,85,0.14);border-bottom:1px solid rgba(232,159,85,0.14)}
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1400px;margin:0 auto}
.proof-card{min-height:128px;padding:1.45rem 1.6rem;border-right:1px solid rgba(232,159,85,0.12);display:flex;flex-direction:column;justify-content:center;gap:0.25rem;background:linear-gradient(180deg,rgba(232,159,85,0.035),rgba(232,159,85,0));transition:background 0.35s,transform 0.35s}
.proof-card:first-child{border-left:1px solid rgba(232,159,85,0.12)}
.proof-card:hover{background:rgba(232,159,85,0.075);transform:translateY(-2px)}
.proof-label{font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-gold-dim)}
.proof-card strong{font-family:var(--font-display);font-size:1.75rem;line-height:1.05;color:var(--color-gold-light);font-weight:600}
.proof-card span:last-child{font-size:0.86rem;color:var(--color-text-dim);font-weight:300}

/* --- Портфолио: страница проектов --- */
.project-block{max-width:1400px;margin:0 auto 4rem}
.project-block:last-child{margin-bottom:0}
.project-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.5rem;padding-bottom:0.8rem;border-bottom:1px solid rgba(232,159,85,0.15)}
.project-meta{font-size:0.8rem;color:var(--color-text-dim)}
.project-block .gallery+p{margin-top:1.25rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.gallery-item .caption{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.2rem 1rem;background:linear-gradient(transparent,rgba(19,25,32,0.9));font-size:0.8rem;color:var(--color-text);letter-spacing:0.05em;opacity:0;transform:translateY(10px);transition:opacity 0.4s,transform 0.4s;z-index:3}
.gallery-item:hover .caption{opacity:1;transform:translateY(0)}
.project-mini-note{border:1px solid rgba(232,159,85,0.16);background:rgba(232,159,85,0.055);display:flex;flex-direction:column;justify-content:center;gap:0.35rem;padding:1.4rem}
.project-mini-note span{font-family:var(--font-display);font-size:2.15rem;color:var(--color-gold-light);line-height:1}
.project-mini-note strong{font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-text);line-height:1.45}

/* --- Преимущества (страницы) --- */
.advantages{background:var(--color-bg-warm)}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem;max-width:1100px;margin:0 auto}
.adv-item{text-align:center}
.adv-title{font-family:var(--font-display);font-size:1.3rem;color:var(--color-white);margin-bottom:0.5rem}
.adv-text{font-size:0.9rem;color:var(--color-text-dim);font-weight:300;max-width:280px;margin:0 auto}

/* --- Зигзаг «Как работаем» (страницы) --- */
.method-zz{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:1200px;margin:0 auto 2.5rem}
.method-zz:last-child{margin-bottom:0}
.method-zz-rev{direction:rtl}.method-zz-rev>*{direction:ltr}
.method-zz-img{aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(232,159,85,0.18)}
.method-zz-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.method-zz:hover .method-zz-img img{transform:scale(1.04)}
.method-zz-text .kick{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--color-gold-dim);margin-bottom:.8rem}
.method-zz-text h3{font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:600;color:var(--color-white);line-height:1.12;margin-bottom:1rem}
.method-zz-text p{color:var(--color-text-dim);font-weight:300;line-height:1.7;max-width:44ch}

/* --- Золотой якорь-цифра --- */
.stat-anchor{position:relative;overflow:hidden;text-align:center;padding:6rem 5vw;background:radial-gradient(closest-side at 50% 38%,rgba(232,159,85,0.15),rgba(232,159,85,0.03) 55%,transparent 75%),var(--color-bg);border-top:1px solid rgba(232,159,85,0.12);border-bottom:1px solid rgba(232,159,85,0.12)}
.stat-anchor-big{font-family:var(--font-display);font-size:clamp(5rem,15vw,12rem);font-weight:600;line-height:.9;background:linear-gradient(180deg,var(--color-gold-light),var(--color-gold-dim));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-anchor-cap{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,2rem);color:var(--color-white);font-weight:400;margin-top:.2rem}
.stat-anchor-row{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;margin-top:2.2rem}
.stat-anchor-row div{display:flex;flex-direction:column}
.stat-anchor-row b{font-family:var(--font-display);font-size:1.7rem;color:var(--color-gold)}
.stat-anchor-row span{font-size:.78rem;color:var(--color-text-dim);letter-spacing:.05em;margin-top:.2rem}

/* --- Отзывы (страница) --- */
.reviews{background:var(--color-bg)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1100px;margin:0 auto}
.review-card{background:var(--color-bg-card);border:1px solid rgba(232,159,85,0.1);padding:2rem}
.review-stars{color:var(--color-gold);font-size:1rem;letter-spacing:0.2em;margin-bottom:1rem}
.review-text{font-size:0.95rem;color:var(--color-text);font-weight:300;line-height:1.7;margin-bottom:1.2rem;font-style:italic}
.review-author{font-size:0.85rem;color:var(--color-text-dim)}
.review-author strong{color:var(--color-white);font-weight:500}
.review-source{font-size:0.75rem;color:var(--color-gold-dim);margin-top:0.3rem}
.review-source-card{display:flex;flex-direction:column;gap:1rem;min-height:360px;position:relative;overflow:hidden}
.review-source-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-gold),transparent);opacity:.75}
.review-source-card h3{font-family:var(--font-display);font-size:1.45rem;color:var(--color-white)}
.review-source-card p{font-size:.92rem;color:var(--color-text-dim);font-weight:300}
.review-source-card .btn{margin-top:auto;justify-content:center}
.review-platform{width:max-content;padding:.2rem .65rem;border:1px solid rgba(232,159,85,.3);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.review-facts{list-style:none;display:grid;gap:.45rem;margin:.25rem 0 1rem}
.review-facts li{position:relative;padding-left:1.05rem;font-size:.84rem;color:var(--color-text);font-weight:300}
.review-facts li::before{content:'\2713';position:absolute;left:0;color:var(--color-gold);font-weight:600}
.review-guide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:1.25rem;max-width:1180px;margin:0 auto 3rem}
.review-guide-text{border:1px solid rgba(232,159,85,0.14);background:linear-gradient(145deg,rgba(232,159,85,0.09),rgba(27,34,41,0.38));padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.review-guide-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(232,159,85,.32);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.review-guide-text h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.65rem);line-height:1.08;color:var(--color-white);font-weight:600}
.review-guide-text p{font-size:.96rem;line-height:1.7;color:var(--color-text-dim);font-weight:300}
.review-guide-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:auto}
.review-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.review-check-card{border:1px solid rgba(232,159,85,0.12);background:rgba(232,159,85,0.045);padding:1.35rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-height:150px}
.review-check-card strong{font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--color-gold-light);font-weight:500}
.review-check-card span{font-size:.86rem;line-height:1.5;color:var(--color-text-dim);font-weight:300}

/* --- Локальная география --- */
.service-area{background:var(--color-bg);position:relative;overflow:hidden}
.service-area-grid{position:relative;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1rem;max-width:1180px;margin:0 auto}
.service-area-card{min-height:250px;border:1px solid rgba(232,159,85,0.12);background:linear-gradient(180deg,rgba(232,159,85,0.045),rgba(27,34,41,0.32));padding:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.service-area-card-main{grid-row:span 2;min-height:100%;justify-content:space-between;background:linear-gradient(150deg,rgba(232,159,85,0.11),rgba(27,34,41,0.5))}
.service-area-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(232,159,85,.3);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.service-area-card h3{font-family:var(--font-display);font-size:clamp(1.35rem,2.1vw,2rem);font-weight:600;line-height:1.15;color:var(--color-white)}
.service-area-card p{font-size:.92rem;line-height:1.65;color:var(--color-text-dim);font-weight:300}
.service-area-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:auto}

/* --- Этапы --- */
.steps{background:var(--color-bg-warm)}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;max-width:1100px;margin:0 auto}
.step-item{position:relative;padding:2rem 1.5rem;border-left:1px solid var(--color-gold-dim)}
.step-num{font-family:var(--font-display);font-size:3rem;font-weight:700;color:rgba(232,159,85,0.55);line-height:1;margin-bottom:0.8rem}
.step-title{font-family:var(--font-display);font-size:1.2rem;color:var(--color-white);margin-bottom:0.5rem}
.step-text{font-size:0.85rem;color:var(--color-text-dim);font-weight:300}

/* --- Таблицы цен и сравнения --- */
.price-table,.pricing-table{width:100%;border-collapse:collapse;max-width:1100px;margin:2rem auto;background:rgba(27,34,41,0.42);border:1px solid rgba(232,159,85,0.12)}
.price-table th,.price-table td,.pricing-table th,.pricing-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid rgba(232,159,85,0.1);vertical-align:top}
.price-table thead th,.pricing-table thead th,.pricing-table tr:first-child th{font-family:var(--font-display);font-size:1rem;color:var(--color-gold);font-weight:600;border-bottom:2px solid rgba(232,159,85,0.3);background:rgba(232,159,85,0.04)}
.price-table tbody td,.pricing-table tbody td{font-size:0.9rem;color:var(--color-text-dim);font-weight:300}
.price-table tbody tr:hover,.pricing-table tbody tr:hover{background:rgba(232,159,85,0.03)}
.price-table .price-val,.pricing-table .price-val,.pricing-table td:last-child{color:var(--color-gold);font-weight:500}
.compare-table{width:100%;border-collapse:collapse;margin:2rem auto;max-width:1100px}
.compare-table th,.compare-table td{padding:0.8rem 1rem;text-align:center;border:1px solid rgba(232,159,85,0.1);font-size:0.85rem}
.compare-table thead th{background:var(--color-bg-card);color:var(--color-gold);font-family:var(--font-display);font-size:1rem;font-weight:600}
.compare-table tbody td{color:var(--color-text-dim);font-weight:300}
.compare-table tbody td:first-child{text-align:left;color:var(--color-text);font-weight:400}
.compare-table tbody tr:nth-child(even){background:rgba(232,159,85,0.02)}
.compare-table .best{color:var(--color-gold);font-weight:500}

/* --- Страница цен: пакеты --- */
.price-guide{background:var(--color-bg)}
.price-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;max-width:1180px;margin:0 auto}
.price-package{border:1px solid rgba(232,159,85,0.13);background:linear-gradient(180deg,rgba(232,159,85,0.045),rgba(27,34,41,0.35));padding:2rem;display:flex;flex-direction:column;gap:1rem;min-height:430px}
.price-package-featured{border-color:rgba(232,159,85,0.34);background:linear-gradient(180deg,rgba(232,159,85,0.12),rgba(32,41,51,0.55))}
.price-package-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(232,159,85,.32);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.price-package h3{font-family:var(--font-display);font-size:1.65rem;color:var(--color-white);font-weight:600}
.price-package-value{font-family:var(--font-display);font-size:clamp(1.55rem,2.3vw,2.15rem);line-height:1.08;color:var(--color-gold-light)}
.price-package p{font-size:.92rem;line-height:1.65;color:var(--color-text-dim);font-weight:300}
.price-package-list{list-style:none;display:grid;gap:.48rem;margin:.25rem 0 1rem}
.price-package-list li{position:relative;padding-left:1.05rem;font-size:.84rem;color:var(--color-text);font-weight:300}
.price-package-list li::before{content:'\2713';position:absolute;left:0;color:var(--color-gold);font-weight:600}
.price-package .btn{margin-top:auto;justify-content:center}
.price-note{max-width:1180px;margin:1.25rem auto 0;border:1px solid rgba(232,159,85,0.13);background:rgba(232,159,85,0.045);padding:1.3rem 1.5rem;display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:center}
.price-note strong{font-family:var(--font-display);font-size:1.2rem;color:var(--color-white);font-weight:400}
.price-note span{font-size:.92rem;color:var(--color-text-dim);font-weight:300;line-height:1.6}

/* --- FAQ старой разметки (внутренние страницы) --- */
.home-faq{background:var(--color-bg-warm)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;cursor:pointer;font-family:var(--font-display);font-size:1.1rem;color:var(--color-white);transition:color 0.3s;background:none;border:0;text-align:left}
.faq-q:hover,.faq-q:focus-visible{color:var(--color-gold)}
.faq-q:focus-visible{outline:1px solid var(--color-gold);outline-offset:4px}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease}
.faq-item.open .faq-a{max-height:500px;padding-bottom:1.2rem}
.faq-a p{font-size:0.9rem;color:var(--color-text-dim);font-weight:300;line-height:1.7}

/* --- Финальная форма заявки (генерит сборщик на всех страницах) --- */
.lead-form{background:var(--color-bg)}
/* Боковые отступы: секция без .container, на телефоне заголовок и форма
   стояли вплотную к краям экрана (2026-08-26). */
.lead-form{padding-left:2rem;padding-right:2rem}
@media(max-width:768px){.lead-form{padding-left:1.2rem;padding-right:1.2rem}}
.lead-form-shell{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(320px,0.86fr) minmax(420px,1fr);gap:2rem;align-items:stretch}
.lead-assist{border:1px solid rgba(232,159,85,0.16);background:linear-gradient(180deg,rgba(232,159,85,0.055),rgba(27,34,41,0.35));padding:2.4rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.lead-assist-tag{width:max-content;padding:0.25rem 0.7rem;border:1px solid rgba(232,159,85,0.28);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-gold)}
.lead-assist h3{font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.35rem);font-weight:600;line-height:1.08;color:var(--color-white)}
.lead-assist-list{list-style:none;display:grid;gap:0.9rem}
.lead-assist-list li{display:grid;gap:0.22rem;padding-top:0.85rem;border-top:1px solid rgba(232,159,85,0.1)}
.lead-assist-list strong{font-size:0.76rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-gold-light)}
.lead-assist-list span{font-size:0.92rem;color:var(--color-text-dim);font-weight:300;line-height:1.55}
.lead-assist-contacts{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:auto}
.lead-assist-contacts a{padding:0.58rem 0.85rem;border:1px solid rgba(232,159,85,0.22);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-gold);transition:border-color 0.3s,background 0.3s}
.lead-assist-contacts a:hover{border-color:var(--color-gold);background:rgba(232,159,85,0.07)}
/* :not(.quiz-container) — чтобы не перебить стили квиз-блока главной,
   который использует class="quiz-container form-wrapper" */
.form-wrapper:not(.quiz-container){margin:0;background:var(--color-bg-card);border:1px solid rgba(232,159,85,0.15);padding:3rem}
.form-wrapper:not(.quiz-container) input,.form-wrapper:not(.quiz-container) textarea,.form-wrapper:not(.quiz-container) select{width:100%;padding:0.9rem 1.2rem;background:var(--color-bg);border:1px solid rgba(232,159,85,0.2);color:var(--color-text);font-family:var(--font-body);font-size:0.95rem;margin-bottom:1rem;transition:border-color 0.3s;outline:none}
.form-wrapper:not(.quiz-container) input:focus,.form-wrapper:not(.quiz-container) textarea:focus,.form-wrapper:not(.quiz-container) select:focus{border-color:var(--color-gold)}
.form-wrapper input.input-error,.form-wrapper textarea.input-error{border-color:#c83737;box-shadow:0 0 0 1px rgba(200,55,55,0.28)}
.form-wrapper input::placeholder,.form-wrapper textarea::placeholder{color:var(--color-text-dim)}
.form-wrapper:not(.quiz-container) textarea{resize:vertical;min-height:100px}
.form-wrapper:not(.quiz-container) .btn{width:100%;justify-content:center}
.lead-quiz{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(232,159,85,0.12)}
.lead-quiz-title{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-gold-dim);margin-bottom:0.9rem}
.lead-quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.quiz-field{display:block}
.quiz-field>span{display:block;font-size:0.78rem;color:var(--color-text-dim);margin-bottom:0.35rem}
.quiz-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-gold-dim) 50%),linear-gradient(135deg,var(--color-gold-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
/* Чекбокс согласия финальной формы: свой лейаут, чтобы не наследовать квизовый */
.form-wrapper:not(.quiz-container) .consent-label{display:grid;grid-template-columns:1.15rem 1fr;gap:0.65rem;align-items:flex-start;justify-items:start;text-align:left;margin-bottom:1rem;cursor:pointer}
.form-wrapper:not(.quiz-container) .consent-label input{width:1.15rem;height:1.15rem;margin:0.15rem 0 0;padding:0;accent-color:var(--color-gold)}
.form-wrapper:not(.quiz-container) .consent-label span{font-size:0.82rem;color:var(--color-text-dim);line-height:1.45}
.form-wrapper .consent-label a{color:var(--color-gold);text-decoration:underline}
.form-note{font-size:0.75rem;color:var(--color-text-dim);text-align:center;margin-top:1rem}
.form-error{display:none;margin-top:0.9rem;padding:0.85rem 1rem;border:1px solid rgba(200,55,55,0.45);background:rgba(200,55,55,0.1);color:#ffd5d5;font-size:0.86rem;line-height:1.45}
.form-success{display:none;text-align:center;padding:2rem}
.form-success h3{font-family:var(--font-display);font-size:1.6rem;color:var(--color-gold);margin-bottom:0.5rem}
.form-success p{color:var(--color-text-dim)}

/* --- CTA-блок (страницы) --- */
.cta{background:var(--color-bg-warm);text-align:center;padding:6rem 5vw}
.cta-title{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.8rem);color:var(--color-white);margin-bottom:1rem}
.cta-sub{font-size:1rem;color:var(--color-text-dim);font-weight:300;margin-bottom:2.5rem;max-width:500px;margin-left:auto;margin-right:auto}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* --- Мобильная панель действий --- */
.mobile-sticky-cta{display:none}

/* --- Lightbox --- */
.lightbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,12,15,0.95);backdrop-filter:blur(10px);align-items:center;justify-content:center;cursor:pointer}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
.lightbox-close{position:absolute;top:2rem;right:2rem;font-size:2rem;color:var(--color-text-dim);cursor:pointer;transition:color 0.3s;background:none;border:none}
.lightbox-close:hover{color:var(--color-white)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2.5rem;color:var(--color-text-dim);cursor:pointer;background:none;border:none;padding:1rem;transition:color 0.3s}
.lightbox-nav:hover{color:var(--color-white)}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:1px solid var(--color-gold);outline-offset:4px;color:var(--color-white)}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

/* --- Анимации без JS и motion-элементы --- */
.motion-item{opacity:0;transform:translateY(26px);transition:opacity 0.7s ease,transform 0.7s ease;transition-delay:calc(var(--motion-i,0) * 55ms)}
.motion-item.visible{opacity:1;transform:translateY(0)}
html.no-js .fade-in,html.no-js .motion-item{opacity:1!important;transform:none!important}

/* --- Проза (блог, privacy, cookie) --- */
.prose{max-width:800px;margin:0 auto}
.prose h2{font-family:var(--font-display);font-size:1.8rem;color:var(--color-white);margin:2.5rem 0 1rem;font-weight:600}
.prose h3{font-family:var(--font-display);font-size:1.3rem;color:var(--color-gold-light);margin:2rem 0 0.8rem;font-weight:500}
.prose p{font-size:0.95rem;color:var(--color-text-dim);font-weight:300;line-height:1.8;margin-bottom:1.2rem}
.prose ul,.prose ol{margin:1rem 0 1.5rem 1.5rem}
.prose li{font-size:0.9rem;color:var(--color-text-dim);font-weight:300;line-height:1.7;margin-bottom:0.4rem}
.prose strong{color:var(--color-text);font-weight:500}
.prose a{color:var(--color-gold);border-bottom:1px solid var(--color-gold-dim);transition:border-color 0.3s}
.prose a:hover{border-color:var(--color-gold)}
.prose blockquote{border-left:3px solid var(--color-gold-dim);padding:1rem 1.5rem;margin:1.5rem 0;background:rgba(232,159,85,0.03)}
.prose blockquote p{color:var(--color-text);font-style:italic;margin-bottom:0}
.prose img{margin:2rem auto;border:1px solid rgba(232,159,85,0.15)}
.prose figure{margin:2rem 0}
.prose figcaption{font-size:0.8rem;color:var(--color-text-dim);text-align:center;margin-top:0.5rem}

/* --- Суб-элементы универсальных карточек --- */
.card-img{aspect-ratio:16/10;overflow:hidden;margin:-2rem -2rem 1.5rem;border-bottom:1px solid rgba(232,159,85,0.1)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-title{font-family:var(--font-display);font-size:1.3rem;color:var(--color-white);margin-bottom:0.5rem}
.card-text{font-size:0.9rem;color:var(--color-text-dim);font-weight:300;line-height:1.6}
.card-link{display:inline-block;margin-top:1rem;font-size:0.85rem;color:var(--color-gold);letter-spacing:0.05em}

/* --- Страница услуги: парная --- */
.service-landing{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:1.25rem;max-width:1180px;margin:0 auto 3rem}
.service-intro{border:1px solid rgba(232,159,85,0.14);background:linear-gradient(145deg,rgba(232,159,85,0.09),rgba(27,34,41,0.38));padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.service-intro-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(232,159,85,.32);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.service-intro h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.65rem);line-height:1.08;color:var(--color-white);font-weight:600}
.service-intro p{font-size:.96rem;line-height:1.7;color:var(--color-text-dim);font-weight:300}
.service-intro-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:auto}
.service-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.service-summary-card{border:1px solid rgba(232,159,85,0.12);background:rgba(232,159,85,0.045);padding:1.35rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-height:150px}
.service-summary-card strong{font-family:var(--font-display);font-size:1.65rem;line-height:1;color:var(--color-gold-light);font-weight:500}
.service-summary-card span{font-size:.86rem;line-height:1.5;color:var(--color-text-dim);font-weight:300}
.tech-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:1180px;margin:0 auto 3rem}
.tech-card{border-left:1px solid rgba(232,159,85,0.26);padding:1.4rem 1.4rem 1.4rem 1.2rem;background:rgba(232,159,85,0.025)}
.tech-card span{font-family:var(--font-display);font-size:2.15rem;color:rgba(232,159,85,0.55);line-height:1}
.tech-card h3{font-family:var(--font-display);font-size:1.25rem;color:var(--color-white);font-weight:500;margin:.75rem 0 .45rem}
.tech-card p{font-size:.88rem;line-height:1.62;color:var(--color-text-dim);font-weight:300}
.steam-tech-panel{max-width:1180px;margin:0 auto 3rem;border:1px solid rgba(232,159,85,0.16);background:linear-gradient(145deg,rgba(232,159,85,0.07),rgba(12,15,19,0.68));padding:2rem}
.steam-tech-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,.8fr);gap:1.5rem;align-items:end;padding-bottom:1.5rem;border-bottom:1px solid rgba(232,159,85,0.12)}
.steam-tech-head span,.package-section .eyebrow{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.steam-tech-head h2{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.75rem);line-height:1.08;color:var(--color-white);font-weight:600}
.steam-tech-head p{font-size:.95rem;line-height:1.7;color:var(--color-text-dim);font-weight:300}
.steam-tech-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(232,159,85,0.14);margin-top:1.5rem}
.steam-tech-step{background:rgba(21,26,33,0.94);padding:1.55rem;min-height:190px}
.steam-tech-step b{display:block;font-family:var(--font-display);font-size:2.1rem;line-height:1;color:rgba(232,159,85,0.5);font-weight:400;margin-bottom:1rem}
.steam-tech-step h3{font-family:var(--font-display);font-size:1.25rem;color:var(--color-white);font-weight:500;margin-bottom:.5rem}
.steam-tech-step p{font-size:.88rem;line-height:1.62;color:var(--color-text-dim);font-weight:300}
.steam-tech-note{display:grid;grid-template-columns:minmax(0,.95fr) minmax(260px,.8fr);gap:1.5rem;margin-top:1.5rem;padding:1.25rem 1.4rem;border-left:2px solid var(--color-gold);background:rgba(232,159,85,0.055)}
.steam-tech-note strong{font-family:var(--font-display);font-size:1.2rem;line-height:1.35;color:var(--color-gold-light);font-weight:500}
.steam-tech-note span{font-size:.9rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}
.package-section{max-width:1180px;margin:0 auto 1rem}
.package-section .section-head{display:flex;flex-direction:column;gap:.45rem}
.package-section h3{font-family:var(--font-display);font-size:clamp(1.55rem,2.4vw,2.1rem);font-weight:600;color:var(--color-white)}
.package-grid{margin-bottom:2rem}

/* --- Страница портфолио: гид --- */
.portfolio-guide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:1.25rem;max-width:1180px;margin:0 auto 3rem}
.portfolio-guide-text{border:1px solid rgba(232,159,85,0.14);background:linear-gradient(145deg,rgba(232,159,85,0.09),rgba(27,34,41,0.38));padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.portfolio-guide-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(232,159,85,.32);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.portfolio-guide-text h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.65rem);line-height:1.08;color:var(--color-white);font-weight:600}
.portfolio-guide-text p{font-size:.96rem;line-height:1.7;color:var(--color-text-dim);font-weight:300}
.portfolio-guide-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:auto}
.portfolio-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.portfolio-guide-card{border:1px solid rgba(232,159,85,0.12);background:rgba(232,159,85,0.045);padding:1.35rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-height:150px}
.portfolio-guide-card strong{font-family:var(--font-display);font-size:1.55rem;line-height:1;color:var(--color-gold-light);font-weight:500}
.portfolio-guide-card span{font-size:.86rem;line-height:1.5;color:var(--color-text-dim);font-weight:300}

/* --- Фикс мобильного переполнения галереи проектов на главной ---
   В 03-portfolio.css треки repeat(2,1fr): 1fr = minmax(auto,1fr), и
   min-content картинки не даёт колонкам ужаться под узкий viewport
   (горизонтальный скролл 419px на 375px). minmax(0,1fr) снимает ловушку. */
.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .project-showcase,.project-showcase-reverse{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1024px){
  .tech-why-split{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:768px){
  .techwhy-verdict{grid-template-columns:minmax(0,1fr)}
  .techwhy-verdict .btn{white-space:normal}
  .techwhy-compare{grid-template-columns:minmax(0,1fr)}
  /* Обёртка заголовка узла — flex-item: без min-width:0 длинное слово
     («Пароизоляция») распирает узел и даёт горизонтальный скролл */
  .techwhy-node-head>div{min-width:0}
  .techwhy-title{font-size:1.15rem;overflow-wrap:break-word}
}

/* --- Чек-лист и внутренние ссылки --- */
.check-list{list-style:none;max-width:800px}
.check-list li{padding:0.6rem 0 0.6rem 2rem;position:relative;font-size:0.9rem;color:var(--color-text-dim);font-weight:300}
.check-list li::before{content:'\2713';position:absolute;left:0;color:var(--color-gold);font-weight:600}
.internal-links{display:flex;flex-wrap:wrap;gap:0.8rem;margin:2rem 0}
.internal-links a{padding:0.5rem 1.2rem;border:1px solid rgba(232,159,85,0.2);font-size:0.85rem;color:var(--color-gold-dim);transition:all 0.3s}
.internal-links a:hover{border-color:var(--color-gold);color:var(--color-gold);background:rgba(232,159,85,0.05)}

/* --- Заглушки фото (место под фото, которое подберёт владелец) --- */
.ph-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:220px;padding:1.5rem;text-align:center;box-sizing:border-box;background:repeating-linear-gradient(45deg,var(--color-bg-card),var(--color-bg-card) 12px,var(--color-bg-warm) 12px,var(--color-bg-warm) 24px);border:1.5px dashed var(--color-gold-dim);border-radius:8px;color:var(--color-text-dim)}
.ph-img::before{content:"ФОТО";font-size:.68rem;letter-spacing:.22em;color:var(--color-gold-dim);font-weight:700}
.ph-img .ph-desc{font-family:var(--font-display);font-size:1.05rem;line-height:1.3;color:var(--color-gold-light);max-width:92%}
.ph-img .ph-size{font-family:monospace;font-size:.74rem;color:var(--color-gold);background:rgba(232,159,85,0.12);border:1px solid var(--color-gold-dim);border-radius:4px;padding:.12rem .5rem;letter-spacing:.04em}
.ph-img .ph-meta{font-family:monospace;font-size:.76rem;color:var(--color-text-dim);opacity:.85;letter-spacing:.03em}
.gallery-item .ph-img{min-height:0;aspect-ratio:4/3;height:100%}
.cards-grid .ph-img,.card .ph-img{min-height:160px}

/* --- Cookie-баннер (152-ФЗ) --- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--color-bg-warm);border-top:1px solid var(--color-gold-dim);padding:1rem 1.5rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.cookie-banner p{font-size:.85rem;color:var(--color-text-dim);max-width:760px;margin:0}
.cookie-banner a{color:var(--color-gold);text-decoration:underline}
.cookie-banner .cookie-accept{flex-shrink:0}

/* --- Адаптив восстановленных элементов --- */
@media(max-width:768px){
  body{padding-bottom:5.5rem}
  .breadcrumbs{padding:5rem 1.5rem 0}
  .page-hero{padding:6rem 1.5rem 2rem}
  .legal-page{padding-top:7rem}
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-card{min-height:112px;padding:1.15rem 1.2rem}
  .proof-card strong{font-size:1.45rem}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .project-header{flex-direction:column;gap:0.3rem}
  .project-mini-note{min-height:150px}
  .method-zz{grid-template-columns:1fr;gap:1.4rem}
  .method-zz-rev{direction:ltr}
  .stat-anchor-row{gap:1.6rem}
  .service-area-grid{grid-template-columns:1fr;gap:.9rem}
  .service-area-card,.service-area-card-main{min-height:0;grid-row:auto;padding:1.55rem}
  .service-area-actions{width:100%}
  .service-area-actions .btn{flex:1 1 auto;justify-content:center}
  .price-package-grid{grid-template-columns:1fr;gap:1rem}
  .price-package{min-height:0;padding:1.55rem}
  .price-note{grid-template-columns:1fr;padding:1.2rem}
  .service-landing{grid-template-columns:1fr;gap:1rem;margin-bottom:2.2rem}
  .service-intro{padding:1.55rem}
  .service-intro-actions .btn{flex:1 1 auto;justify-content:center}
  .service-summary-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .service-summary-card{min-height:118px;padding:1.1rem}
  .service-summary-card strong{font-size:1.35rem}
  .tech-grid{grid-template-columns:1fr;gap:.8rem;margin-bottom:2.2rem}
  .steam-tech-panel{padding:1.35rem;margin-bottom:2.2rem}
  .steam-tech-head{grid-template-columns:1fr;gap:.9rem;padding-bottom:1.2rem}
  .steam-tech-steps{grid-template-columns:1fr;margin-top:1.2rem}
  .steam-tech-step{min-height:0;padding:1.3rem}
  .steam-tech-note{grid-template-columns:1fr;gap:.8rem;padding:1rem 1.1rem}
  .portfolio-guide{grid-template-columns:1fr;gap:1rem;margin-bottom:2.2rem}
  .portfolio-guide-text{padding:1.55rem}
  .portfolio-guide-actions .btn{flex:1 1 auto;justify-content:center}
  .portfolio-guide-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .portfolio-guide-card{min-height:118px;padding:1.1rem}
  .portfolio-guide-card strong{font-size:1.25rem}
  .review-guide{grid-template-columns:1fr;gap:1rem;margin-bottom:2.2rem}
  .review-guide-text{padding:1.55rem}
  .review-guide-actions .btn{flex:1 1 auto;justify-content:center}
  .review-check-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .review-check-card{min-height:118px;padding:1.1rem}
  .review-check-card strong{font-size:1.55rem}
  .lead-form-shell{grid-template-columns:1fr;gap:1rem}
  .lead-assist{padding:1.55rem}
  .lead-assist-contacts a{flex:1 1 auto;text-align:center}
  .form-wrapper:not(.quiz-container){padding:2rem 1.5rem}
  .lead-quiz-grid{grid-template-columns:1fr}
  .compare-table{font-size:0.75rem}
  .compare-table th,.compare-table td{padding:0.5rem}
  .price-table th,.price-table td,.pricing-table th,.pricing-table td{padding:0.7rem 0.5rem;font-size:0.8rem;line-height:1.45}
  .mobile-sticky-cta{position:fixed;left:1rem;right:1rem;bottom:calc(0.9rem + env(safe-area-inset-bottom));z-index:900;display:grid;grid-template-columns:1fr 1fr;gap:0.65rem;padding:0.55rem;background:rgba(19,25,32,0.88);border:1px solid rgba(232,159,85,0.24);box-shadow:0 10px 34px rgba(0,0,0,0.45);backdrop-filter:blur(14px);opacity:0;transform:translateY(120%);pointer-events:none;transition:opacity 0.3s,transform 0.3s,bottom 0.3s}
  .mobile-sticky-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
  .mobile-sticky-cta.cookie-open{bottom:calc(var(--cookie-banner-height, 0px) + 1.25rem + env(safe-area-inset-bottom))}
  .mobile-sticky-link{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0.72rem 0.8rem;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600}
  .mobile-sticky-phone{background:var(--color-gold);color:var(--color-bg)}
  .mobile-sticky-form{border:1px solid rgba(232,159,85,0.55);color:var(--color-gold-light);background:rgba(232,159,85,0.08)}
}
@media(max-width:480px){
  .gallery{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .proof-card{min-height:auto;border-left:none!important;border-right:none;border-bottom:1px solid rgba(232,159,85,0.1)}
  .review-check-grid{grid-template-columns:1fr}
  /* Крупные section-title («…— в одних руках») не влезают в 375px */
  .section-title{font-size:2rem;overflow-wrap:break-word}
}

/* ============================================================
   Каркас внутренних страниц (2026-08-12).
   Причина: build_site.py генерит .content-section и hero-обвязку
   (.hero-bg/.hero-content/.hero-sub), а стилей для них не было
   НИКОГДА — ни в старом base.css, ни после рефакторинга блоков.
   Из-за этого весь контент подстраниц лип к левому краю окна,
   а фоновая картинка hero схлопывалась в ноль высоты.
   Ширина 1200px и боковые отступы 2rem — как у .container главной,
   чтобы шапка, hero и тело страницы стояли по одной вертикали.
   ============================================================ */

/* Полотно контента: та же сетка, что у .container на главной */
.content-section{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding-left:2rem;
  padding-right:2rem;
}
/* Вложенный смысловой раздел (страница отзывов) */
.content-subsection{margin-top:4rem}

/* Hero внутренних страниц: фон абсолютом, текст поверх и по сетке */
.page-hero{padding-left:2rem;padding-right:2rem}
.page-hero .hero-bg{position:absolute;inset:0;z-index:0}
.page-hero .hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
/* Затемнение поверх фонового фото: на светлых кадрах (парная из липы)
   белый текст без него не читался. Градиент снизу — под текстовый блок. */
.page-hero .hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(15,13,11,0.35) 0%,rgba(15,13,11,0.55) 45%,rgba(15,13,11,0.88) 100%);
}
.page-hero .hero-sub{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--color-text-base);
  font-weight:300;
  max-width:640px;
  margin-top:0.8rem;
  text-shadow:0 1px 14px rgba(15,13,11,0.85);
}
.page-hero h1{text-shadow:0 2px 18px rgba(15,13,11,0.75)}

/* Типографика внутренних страниц: h2/h3 и текст были голыми — заголовки
   разделов («Сравнение пакетов», «Что влияет на стоимость») читались как
   подписи, а не как разделы. Масштаб взят от .section-title главной. */
.content-section h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:0.01em;
  margin:3.5rem 0 1.4rem;
  padding-bottom:0.9rem;
  border-bottom:1px solid rgba(232,159,85,0.16);
}
.content-section > h2:first-child{margin-top:0}
.content-section h3{
  font-size:clamp(1.1rem,1.8vw,1.35rem);
  margin:2.2rem 0 1rem;
  color:var(--color-gold-light);
}
.content-section > p{
  font-size:1rem;
  line-height:1.75;
  color:var(--color-text-dim);
  font-weight:300;
  max-width:820px;
  margin-bottom:1.1rem;
}
.content-section > p strong{color:var(--color-text-base);font-weight:600}
.content-section > ul,.content-section > ol{
  max-width:820px;
  margin:0 0 1.6rem 1.2rem;
  color:var(--color-text-dim);
  font-weight:300;
  line-height:1.7;
}
.content-section > ul li,.content-section > ol li{margin-bottom:0.6rem}
.content-section > ul li strong,.content-section > ol li strong{color:var(--color-text-base);font-weight:600}
/* Воздух между hero и первым разделом */
.page-hero + .content-section{padding-top:4.5rem}
.page-hero h1{margin-bottom:0}

@media(max-width:768px){
  .content-section{padding-left:1.2rem;padding-right:1.2rem}
  .page-hero{padding-left:1.2rem;padding-right:1.2rem}
  .page-hero .hero-sub{font-size:0.95rem}
  .content-subsection{margin-top:2.5rem}
  .content-section h2{margin:2.5rem 0 1.1rem}
  .page-hero + .content-section{padding-top:3rem}
}

/* === Правки по визуальному QA 2026-08-14 === */

/* Длинные заголовки внутренних страниц («Политика конфиденциальности») обрезались
   по ширине на 375 px — слово не помещалось и уезжало за экран. */
.page-hero h1{overflow-wrap:break-word;hyphens:auto}

/* Таблицы сравнения (породы дерева, полки) шире экрана телефона. На body стоит
   overflow-x:clip, поэтому колонки «Цена»/«Аромат» просто обрезались молча —
   пользователь даже не понимал, что там есть данные. Даём таблице свой скролл. */
.compare-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:900px){
  .compare-table{display:table}
}

/* === 95-mobile-compact.css === */
/* === Мобильная компактность ===
   Задача: на телефоне главная была 35 900 px = 39 экранов прокрутки. Причина — адаптив
   разворачивал все интерактивные механики (табы, слайдеры, переключатели) в бесконечную
   вертикальную ленту: `grid-template-columns: 1fr` + `display: block !important`.

   Здесь механики возвращаются в компактном виде: наборы карточек листаются пальцем
   вбок (scroll-snap), длинные текстовые карточки сворачиваются в аккордеон.
   Контент никуда не удаляется — он остаётся в DOM, поэтому поиск видит его целиком.

   Файл идёт последним по алфавиту, поэтому перебивает правила блоков.
   Всё внутри медиазапросов: десктоп не затронут. */

@media (max-width: 768px) {

  /* --- Воздух между секциями ---
     Было 5rem сверху и снизу на каждую из шестнадцати секций — только на отступы
     уходило больше двух экранов прокрутки. */
  section {
    padding: 3.2rem 0;
  }

  .section-header {
    margin-bottom: 1.8rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* --- Горизонтальные ленты карточек ---
     Пять карточек в столбик — это пять экранов. Те же пять карточек лентой —
     один экран и понятный жест: листнуть вбок.
     scrollbar-width/-webkit-scrollbar убирают полосу прокрутки, но не сам скролл. */
  .pk-cards-side,
  .team-crew,
  .proof-grid,
  .contract-steps,
  .guarantee-split,
  .trust-rate-grid,
  .portfolio-list,
  .process-slider-container {
    display: flex !important;
    /* направление задаём принудительно: часть контейнеров в своих стилях
       уже flex, но column — без этой строки лента остаётся столбиком */
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* вылет за поля контейнера, чтобы лента шла от края до края экрана */
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    padding: 0.2rem 1.2rem 0.9rem;
  }

  .pk-cards-side::-webkit-scrollbar,
  .team-crew::-webkit-scrollbar,
  .contract-steps::-webkit-scrollbar,
  .guarantee-split::-webkit-scrollbar,
  .trust-rate-grid::-webkit-scrollbar,
  .portfolio-list::-webkit-scrollbar,
  .proof-grid::-webkit-scrollbar,
  .process-slider-container::-webkit-scrollbar {
    display: none;
  }

  .pk-cards-side > *,
  .team-crew > *,
  .contract-steps > *,
  .guarantee-split > *,
  .trust-rate-grid > *,
  .portfolio-list > *,
  .proof-grid > *,
  .process-slider-container > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    margin-bottom: 0 !important;
  }

  /* Картинка внутри карточки процесса занимала 250 px — четверть экрана на кадр. */
  .process-slide .slide-image {
    height: 165px;
    min-height: 165px;
  }

  /* --- Форма внизу страницы ---
     Она спрашивала стадию объекта, размер парной, уровень отделки и способ связи —
     ровно то, что уже спросил квиз в начале страницы. Второй раз это раздражает
     и добавляет экран прокрутки. На телефоне оставляем имя, телефон и комментарий. */
  .lead-quiz {
    display: none;
  }

  /* --- Карта в контактах ---
     Врезка приходит с height="450" — половина экрана телефона на точку,
     по которой всё равно не строят маршрут прямо здесь. */
  .contacts-map iframe,
  .contacts iframe,
  .map-wrapper iframe {
    height: 280px !important;
    min-height: 0;
  }

  /* --- Технологический блок: аккордеон ---
     Одиннадцать карточек со сравнением «халтура / у нас» разворачивались целиком —
     6,2 экрана подряд. Теперь видно заголовки, подробности открываются по тапу.
     Класс `open` вешает main.js; без JS карточки остаются раскрытыми — контент
     не пропадает даже при отключённых скриптах. */
  .js-accordion .techwhy-node > *:not(.techwhy-node-head) {
    display: none;
  }

  .js-accordion .techwhy-node.open > * {
    display: block;
  }

  .js-accordion .techwhy-node {
    display: block !important;
    margin-bottom: 0.6rem;
    padding: 0;
    cursor: pointer;
  }

  .js-accordion .techwhy-node-head {
    margin-bottom: 0;
    padding: 1.1rem 2.6rem 1.1rem 1.1rem;
    border-bottom: none;
    position: relative;
  }

  /* Знак «раскрыть» — иначе непонятно, что карточка кликабельна. */
  .js-accordion .techwhy-node-head::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-accent, #c9a96e);
  }

  .js-accordion .techwhy-node.open .techwhy-node-head::after {
    content: '–';
  }

  .js-accordion .techwhy-node.open .techwhy-node-head {
    padding-bottom: 0.4rem;
  }

  /* Лид-абзац карточки прячем в закрытом виде — в заголовке и так всё сказано. */
  .js-accordion .techwhy-node:not(.open) .techwhy-lead {
    display: none;
  }

  .js-accordion .techwhy-node.open .techwhy-compare,
  .js-accordion .techwhy-node.open .techwhy-verdict {
    padding: 0 1.1rem 1.1rem;
  }

  /* --- Схема «пирог стены» ---
     Пять слоёв легенды в столбик занимали пол-экрана. */
  .tech-pirog-legend {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
    font-size: 0.85rem;
  }

  /* --- Плашка про cookie ---
     Висит на экране весь скролл, и под ней ещё липкая панель со звонком: два слоя
     съедают низ экрана. Ужимаем текст и отступы, кнопку оставляем 44 px по высоте. */
  .cookie-banner {
    padding: 0.7rem 0.9rem;
    gap: 0.6rem;
  }

  .cookie-banner p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* --- Подсказка про листание ---
     Ставится через main.js под лентами: без неё жест неочевиден. */
  .swipe-hint {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    opacity: 0.55;
    text-align: center;
  }
}

/* Совсем узкие экраны: карточка почти во всю ширину, чтобы текст не жался. */
@media (max-width: 480px) {
  .pk-cards-side > *,
  .team-crew > *,
  .contract-steps > *,
  .guarantee-split > *,
  .trust-rate-grid > *,
  .portfolio-list > *,
  .proof-grid > *,
  .process-slider-container > * {
    flex: 0 0 88%;
  }
}

/* === Вторая волна сжатия (2026-08-20) ===
   После лент и аккордеона страница ужалась с 39 до 25 экранов. Дальше режем не
   содержание, а размеры картинок и повторы: на телефоне фотография в половину экрана
   не рассказывает больше, чем фотография в четверть. */
@media (max-width: 768px) {

  /* Схема «пирог стены»: смысл в подписях слоёв, а не в размере кадра. */
  .tech-pirog-visual {
    max-height: 210px;
  }

  .tech-pirog-visual img {
    height: 210px;
    object-fit: cover;
  }

  .tech-pirog-title {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  /* Галерея проекта: крупный кадр + миниатюры. На телефоне хватает 200 px. */
  .project-gallery {
    gap: 0.5rem;
  }

  .gallery-item {
    max-height: 200px;
  }

  .gallery-item img {
    height: 200px;
    object-fit: cover;
  }

  /* Слайдер «что было — что стало»: ползунок пальцем тянут неохотно,
     поэтому кадр делаем ниже — он работает как иллюстрация, а не как игрушка. */
  .ba-slider {
    height: 240px !important;
    min-height: 0;
  }

  .ba-subtitle {
    font-size: 0.85rem;
  }

  /* Карточки «под ключ»: фоновая фотография за текстом на маленьком экране
     только мешает читать и добавляет высоту. */
  .pk-card-bg,
  .pk-card-overlay {
    display: none;
  }

  .pk-wide-card {
    padding: 1.1rem 1.2rem;
    background: var(--color-bg-card);
  }

  /* Команда: фотографии бригады уже лентой, подписи оставляем короткими. */
  .team-crew-item img,
  .team-crew-item .team-crew-photo {
    height: 190px;
    object-fit: cover;
  }

  .team-lead-photo,
  .team-lead img {
    max-height: 220px;
    object-fit: cover;
  }

  /* Роли в команде — тоже лента, а не столбик. */
  .team-roles {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    padding: 0.2rem 1.2rem 0.9rem;
  }

  .team-roles::-webkit-scrollbar {
    display: none;
  }

  .team-roles > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    margin-bottom: 0 !important;
  }

  /* Пакеты отделки — ключевой блок, его не сворачиваем. Только ужимаем воздух. */
  .service-card,
  .services-grid > * {
    padding: 1.2rem 1.1rem;
  }

  .services-grid {
    gap: 0.9rem;
  }
}
/* === Третья волна: кейсы портфолио и мелкий воздух === */
@media (max-width: 768px) {

  /* Кейс на главной работает как витрина: фото + название. Полный разбор
     (задача, материалы, факты) живёт на portfolio.html — ссылка под лентой.
     Текст остаётся в разметке, просто не растягивает страницу на телефоне. */
  .project-panel .project-text,
  .project-panel .project-facts {
    display: none;
  }

  /* Из трёх кадров галереи на маленьком экране оставляем два. */
  .project-gallery .gallery-item:nth-child(n+3) {
    display: none;
  }

  .project-gallery .caption {
    font-size: 0.75rem;
  }

  .portfolio-all-link {
    margin: 0.4rem 0 0;
    text-align: center;
  }

  /* Шапка слайдера «до/после»: объяснение про реконструкцию нужно, но короче. */
  .ba-head {
    margin-bottom: 0.8rem;
  }

  .ba-head .ba-title {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }

  /* Первый экран: заголовок и картинка не должны занимать полтора экрана. */
  .hero-image-wrapper img {
    max-height: 240px;
    object-fit: cover;
  }

  .hero-hint {
    font-size: 0.78rem;
  }
}
/* === Четвёртая волна: первый экран и заголовки === */
@media (max-width: 768px) {

  /* Три карточки преимуществ под первым экраном занимали пол-экрана столбиком.
     Лентой они читаются так же, а места просят втрое меньше. */
  .hero-advantages-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    padding: 0.2rem 1.2rem 0.6rem;
  }

  .hero-advantages-grid::-webkit-scrollbar {
    display: none;
  }

  .hero-advantages-grid > .adv-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
    min-height: 128px;
  }

  /* Шапки секций: тег, заголовок и подзаголовок съедали по 200 px на блок,
     а таких блоков на странице четырнадцать. */
  .section-header {
    margin-bottom: 1.4rem;
  }

  .section-title {
    font-size: 1.55rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }

  .section-tag {
    margin-bottom: 0.5rem;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  /* Итоговая плашка технологического блока: текст короче, кнопка на всю ширину. */
  .techwhy-verdict {
    padding: 1rem !important;
    gap: 0.8rem;
  }

  .techwhy-verdict-text {
    font-size: 0.88rem;
  }

  /* Контакты: колонки идут подряд, воздух между ними лишний. */
  .contacts-grid,
  .contacts-info {
    gap: 1rem;
  }

  .contact-row {
    margin-bottom: 0.6rem;
  }
}
/* === Мелкие правки по итогам проверки 2026-08-22 === */
@media (max-width: 768px) {
  /* Кнопки не должны быть ниже 44 px: на ceny.html замер показал 43 —
     ровно на границе, где палец начинает промахиваться. */
  .btn,
  .btn-sm,
  button {
    min-height: 44px;
  }
}

/* === _01c-fotorazryadka.css === */
/* === Фото-разрядки (широкое фото между блоками) === */
.photo-break{position:relative;min-height:52vh;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center center;background-repeat:no-repeat}
.photo-break::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,0.78) 0%,rgba(15,13,11,0.6) 45%,rgba(15,13,11,0.82) 100%)}
.photo-break-1{background-image:url('img/parnayadesign4.jpg')}
.photo-break-inner{position:relative;z-index:1;text-align:center;max-width:840px;padding:2rem 1.5rem}
.photo-break-quote{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:500;color:var(--color-white);line-height:1.15;margin-bottom:1.1rem;text-shadow:0 2px 24px rgba(15,13,11,0.85)}
.photo-break-sub{font-size:clamp(0.95rem,1.4vw,1.1rem);color:var(--color-gold-light);letter-spacing:0.04em;text-shadow:0 1px 12px rgba(15,13,11,0.9)}
/* Параллакс только на десктопе (на мобильных fixed глючит) */
@media(min-width:900px){.photo-break{background-attachment:fixed}}
@media(max-width:600px){.photo-break{min-height:42vh}}


/* === _02-segmenty.css === */
/* === БЛОК 02 «Кому подходит» (сегменты) === */
/* Базовые .cards-grid/.card стилизованы в base.css. Здесь — только специфика блока. */

/* На десктопе ровно 4 карточки в ряд, ниже — авто-перенос из base.css. */
@media(min-width:1000px){
  .segments .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Карточка-сегмент — колонка, чтобы «типовая задача» прижималась к низу и ряд был ровным.
   Лоск как у блока «Под ключ»: лёгкий градиент, подъём и золотая рамка при наведении. */
.segment-card{display:flex;flex-direction:column;background:linear-gradient(165deg,var(--color-bg-card),#1b1713);border:1px solid rgba(201,169,110,0.14);transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s}
.segment-card:hover{transform:translateY(-6px);border-color:rgba(201,169,110,0.5);box-shadow:0 18px 40px rgba(0,0,0,0.45)}
.segment-card:hover .icon{stroke:var(--color-gold-light)}
.segment-card .card-title{font-size:1.5rem}

/* Иконка слева, крупнее для акцента (в base.css .icon центрирована — переопределяем). */
.segment-card .icon{width:46px;height:46px;margin:0 0 1.15rem;transition:stroke 0.3s}

/* Плашка «типовая задача» — отделена тонкой золотой линией, прижата к низу. */
.segment-task{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(201,169,110,0.14);font-size:0.86rem;color:var(--color-text);font-weight:300;line-height:1.55}
.segment-task b{display:block;margin-bottom:0.35rem;font-size:0.66rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-gold-dim)}

/* Запас до плашки задачи, когда описание короткое. */
.segment-card .card-text{margin-bottom:1.25rem}


/* === _04-chto-delaem.css === */
/* === БЛОК 04 «Что делаем + материалы» === */
/* Фон тёплый + золотые разделители: отделяют блок от portfolio (тёмный) сверху и services (тёплый) снизу. */
.what-we-do{background:var(--color-bg-warm);border-top:1px solid rgba(201,169,110,0.14);border-bottom:1px solid rgba(201,169,110,0.14)}

/* Внутренние подзаголовки частей */
.chto-subhead{max-width:1180px;margin:0 auto 1.6rem;text-align:center}
.chto-subhead-gap{margin-top:4rem}
.chto-eyebrow{font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--color-gold-dim);margin-bottom:0.6rem}
.chto-h3{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:400;color:var(--color-white);line-height:1.12}

/* Иконки (линейные, золото) */
.chto-ico{width:30px;height:30px;stroke:var(--color-gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.chto-ico-lg{width:40px;height:40px;margin-bottom:1rem}

/* ЧАСТЬ А. Виды работ */
.chto-scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;max-width:1180px;margin:0 auto}
.chto-scope-item{display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem;border:1px solid rgba(201,169,110,0.12);background:rgba(201,169,110,0.035);transition:border-color 0.35s,transform 0.35s}
.chto-scope-item:hover{border-color:rgba(201,169,110,0.3);transform:translateY(-3px)}
.chto-scope-item h4{font-family:var(--font-display);font-size:1.25rem;font-weight:400;color:var(--color-white);margin-bottom:0.35rem}
.chto-scope-item p{font-size:0.9rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}

/* ЧАСТЬ Б. Породы дерева */
.chto-wood-intro{max-width:1180px;margin:0 auto 1.6rem;padding:1.25rem 1.5rem;border-left:2px solid var(--color-gold);background:rgba(201,169,110,0.055);font-size:0.98rem;line-height:1.7;color:var(--color-text);font-weight:300}
.chto-wood-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:1180px;margin:0 auto}
.chto-wood{display:flex;flex-direction:column;padding:1.8rem;border:1px solid rgba(201,169,110,0.13);background:linear-gradient(180deg,rgba(201,169,110,0.05),rgba(26,22,19,0.35));transition:border-color 0.35s,transform 0.35s}
.chto-wood:hover{border-color:rgba(201,169,110,0.32);transform:translateY(-3px)}
.chto-wood-top{display:flex;justify-content:space-between;align-items:baseline;gap:0.6rem;margin-bottom:0.9rem}
.chto-wood-name{font-family:var(--font-display);font-size:1.7rem;font-weight:400;color:var(--color-gold-light);line-height:1}
.chto-wood-tag{flex-shrink:0;padding:0.18rem 0.6rem;border:1px solid rgba(201,169,110,0.3);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-gold)}
.chto-wood-desc{font-size:0.9rem;line-height:1.62;color:var(--color-text-dim);font-weight:300;margin-bottom:1.1rem}
.chto-wood-facts{list-style:none;display:grid;gap:0.55rem;margin-top:auto}
.chto-wood-facts li{display:grid;grid-template-columns:96px 1fr;gap:0.7rem;padding-top:0.55rem;border-top:1px solid rgba(201,169,110,0.1);font-size:0.86rem;color:var(--color-text);font-weight:300}
.chto-wood-facts li span{font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-gold-dim);align-self:center}

/* ЧАСТЬ В. Декоративные элементы */
.chto-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;max-width:1180px;margin:0 auto}
.chto-extra{padding:2rem 1.8rem;border:1px solid rgba(201,169,110,0.12);background:var(--color-bg-card);text-align:center;transition:border-color 0.35s,transform 0.35s}
.chto-extra:hover{border-color:rgba(201,169,110,0.3);transform:translateY(-3px)}
.chto-extra .chto-ico-lg{margin-left:auto;margin-right:auto}
.chto-extra h4{font-family:var(--font-display);font-size:1.4rem;font-weight:400;color:var(--color-white);margin-bottom:0.6rem}
.chto-extra p{font-size:0.9rem;line-height:1.65;color:var(--color-text-dim);font-weight:300}

/* Мостик к замеру */
.chto-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1180px;margin:4rem auto 0;padding:1.6rem 1.8rem;border:1px solid rgba(201,169,110,0.16);background:linear-gradient(150deg,rgba(201,169,110,0.08),rgba(26,22,19,0.4))}
.chto-foot p{font-size:0.98rem;line-height:1.6;color:var(--color-text);font-weight:300;max-width:60ch}

/* Адаптив */
@media(max-width:768px){
  .chto-subhead-gap{margin-top:2.6rem}
  .chto-wood-name{font-size:1.5rem}
  .chto-foot{flex-direction:column;align-items:flex-start;padding:1.4rem}
  .chto-foot .btn{width:100%;justify-content:center}
}


/* === _08-komanda.css === */
/* === БЛОК 08 «Команда» === */
/* Тёмный фон секции (сосед 07 «Как работаем» — warm, чередуем). */
.team{background:var(--color-bg)}
/* Боковые отступы: у секции нет обёртки .container, и на телефоне абзацы
   касались обоих краёв экрана — единственное такое место на странице (2026-08-26). */
.team{padding-left:2rem;padding-right:2rem}
@media(max-width:768px){.team{padding-left:1.2rem;padding-right:1.2rem}}

/* Интро: текст слева + ряд цифр справа */
.team-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);gap:2.5rem;max-width:1180px;margin:0 auto 3.5rem;align-items:center}
.team-lead-text p{font-size:0.98rem;line-height:1.75;color:var(--color-text-dim);font-weight:300;margin-bottom:1rem}
.team-lead-text p:last-child{margin-bottom:0}
.team-lead-text strong{color:var(--color-text);font-weight:500}

/* Цифры доверия (200+, 2 мастера, свои, фото-отчёт) */
.team-stats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.team-stat{border:1px solid rgba(201,169,110,0.12);background:rgba(201,169,110,0.045);padding:1.4rem;display:flex;flex-direction:column;gap:0.35rem;min-height:132px;justify-content:center}
.team-stat strong{font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--color-gold-light);font-weight:600}
.team-stat span{font-size:0.86rem;line-height:1.45;color:var(--color-text-dim);font-weight:300}

/* Роли в бригаде: бригадир · сработанная пара · контроль качества */
.team-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:1180px;margin:0 auto 3.5rem}
.team-role{background:var(--color-bg-card);border:1px solid rgba(201,169,110,0.1);padding:2rem;text-align:center;transition:border-color 0.4s,transform 0.4s}
.team-role:hover{border-color:rgba(201,169,110,0.3);transform:translateY(-4px)}
.team-role h3{font-family:var(--font-display);font-size:1.35rem;color:var(--color-white);font-weight:400;margin-bottom:0.6rem}
.team-role p{font-size:0.9rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}

/* Фото бригад (реальные или заглушки) */
.team-crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:1180px;margin:0 auto}
.team-crew-item{margin:0}
.team-crew-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(201,169,110,0.15)}
/* Заглушка ph-img (когда реального фото ещё нет) — держим тот же формат 4:3 */
.team-crew .ph-img{aspect-ratio:4/3;min-height:0;height:auto}
/* Заглушка-человечек под будущее фото человека (руководитель/менеджер/бригада) */
.person-ph{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:1rem;background:linear-gradient(160deg,rgba(201,169,110,0.07),rgba(201,169,110,0.02));border:1.5px dashed rgba(201,169,110,0.42)}
.person-ph-fig{height:56px;width:auto;stroke:var(--color-gold);fill:none;stroke-width:2;opacity:0.78}
.person-ph-fig-3{height:50px}
.person-ph-tag{font-family:var(--font-body);font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-gold);font-weight:700}
.person-ph-role{font-family:var(--font-display);font-size:1.3rem;color:var(--color-white);line-height:1}
.person-ph-size{font-family:monospace;font-size:0.68rem;color:var(--color-text-dim);background:rgba(201,169,110,0.1);border:1px solid var(--color-gold-dim);padding:0.1rem 0.5rem;letter-spacing:0.03em}
.team-crew-cap{margin-top:0.7rem;font-size:0.82rem;letter-spacing:0.04em;color:var(--color-text-dim);font-weight:300}
.team-crew-cap b{display:block;font-family:var(--font-display);font-size:0.95rem;color:var(--color-gold-light);font-weight:500;letter-spacing:0;margin-bottom:0.12rem}

/* Адаптив */
@media(max-width:768px){
  .team-lead{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.4rem}
  .team-roles{grid-template-columns:1fr;gap:1rem;margin-bottom:2.4rem}
  .team-role{padding:1.55rem}
  .team-crew{grid-template-columns:1fr;gap:1.2rem}
}
@media(max-width:480px){
  .team-stats{grid-template-columns:1fr}
}


/* === _09-doverie.css === */
/* === БЛОК 09 «Доверие» ===
   Оценки на площадках (рейтинги) + «Гарантия и договор».
   Базовые секции stat-anchor / proof-strip стилизованы в base.css — здесь не дублируем.
   Чередование фона: proof-strip (bg) -> trust-reviews (warm) -> trust-guarantee (bg) -> faq (warm). */

/* --- Оценки на независимых площадках --- */
.trust-reviews{background:var(--color-bg-warm)}
/* Боковые отступы: у этих секций нет обёртки .container, и на телефоне
   текст упирался прямо в край экрана (2026-08-26). */
.trust-reviews,.trust-guarantee{padding-left:2rem;padding-right:2rem}
@media(max-width:768px){.trust-reviews,.trust-guarantee{padding-left:1.2rem;padding-right:1.2rem}}
.trust-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;max-width:1180px;margin:0 auto}
.trust-rate-card{border:1px solid rgba(201,169,110,0.14);background:linear-gradient(180deg,rgba(201,169,110,0.05),rgba(26,22,19,0.36));padding:2rem;display:flex;flex-direction:column;gap:1rem;min-height:280px;transition:border-color 0.35s,transform 0.35s}
.trust-rate-card:hover{border-color:rgba(201,169,110,0.3);transform:translateY(-3px)}
.trust-rate-platform{width:max-content;padding:.22rem .65rem;border:1px solid rgba(201,169,110,.32);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.trust-rate-score{display:flex;align-items:baseline;gap:.7rem}
.trust-rate-num{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--color-gold-light);font-weight:600}
.trust-rate-desc{font-size:.92rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}
.trust-rate-card .btn{margin-top:auto;justify-content:center}

/* Звёзды с точной долей рейтинга: --rate = оценка/5*100% (4.8->96%, 4.9->98%, 5.0->100%) */
.rate-stars{position:relative;display:inline-block;font-size:1.15rem;line-height:1;letter-spacing:2px}
.rate-stars-bg{color:rgba(201,169,110,0.22)}
.rate-stars-fg{position:absolute;left:0;top:0;width:var(--rate,100%);overflow:hidden;white-space:nowrap;color:var(--color-gold)}

.trust-reviews-note{max-width:1180px;margin:1.25rem auto 0;font-size:.8rem;line-height:1.6;color:var(--color-text-dim);font-weight:300;text-align:center;opacity:.85}

/* --- Гарантия и договор --- */
.trust-guarantee{background:var(--color-bg)}
.contract-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(201,169,110,0.14);border:1px solid rgba(201,169,110,0.14);max-width:1180px;margin:0 auto}
.contract-step{background:rgba(18,15,12,0.94);padding:1.6rem;min-height:210px}
.contract-step b{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:rgba(201,169,110,0.5);font-weight:400;margin-bottom:.9rem}
.contract-step h3{font-family:var(--font-display);font-size:1.2rem;color:var(--color-white);font-weight:400;margin-bottom:.5rem}
.contract-step p{font-size:.86rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}
.contract-note{max-width:1180px;margin:1.1rem auto 0;padding:.4rem 0 .4rem 1.1rem;border-left:2px solid var(--color-gold-dim);font-size:.88rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}

.guarantee-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:1180px;margin:1.25rem auto 0}
.guarantee-card{border:1px solid rgba(201,169,110,0.14);padding:1.8rem 2rem;display:flex;flex-direction:column;gap:1rem}
.guarantee-card-yes{background:linear-gradient(180deg,rgba(201,169,110,0.08),rgba(26,22,19,0.32))}
.guarantee-card-no{background:rgba(26,22,19,0.3)}
.guarantee-card-label{width:max-content;padding:.22rem .65rem;border:1px solid rgba(201,169,110,.3);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold)}
.guarantee-list{list-style:none;display:grid;gap:.6rem}
.guarantee-list li{position:relative;padding-left:1.5rem;font-size:.9rem;line-height:1.5;color:var(--color-text);font-weight:300}
.guarantee-list-yes li::before{content:'\2713';position:absolute;left:0;color:var(--color-gold);font-weight:700}
.guarantee-list-no li::before{content:'\2022';position:absolute;left:.3rem;color:var(--color-gold-dim);font-weight:700}
.guarantee-card-foot{margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(201,169,110,0.1);font-size:.84rem;line-height:1.6;color:var(--color-text-dim);font-weight:300}

.trust-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:1180px;margin:2rem auto 0}
/* Ссылка-кнопка «Позвонить» наследовала line-height от абзацев и была на 5 px
   выше соседней кнопки, а flex тянул обе до этой высоты (2026-08-26). */
.trust-cta .btn{line-height:normal}

/* --- Адаптив --- */
@media(max-width:900px){
  .trust-rate-grid{grid-template-columns:1fr}
  .contract-steps{grid-template-columns:1fr 1fr}
  .guarantee-split{grid-template-columns:1fr}
}
@media(max-width:560px){
  .contract-steps{grid-template-columns:1fr}
  .contract-step{min-height:0}
  .guarantee-card{padding:1.5rem}
  .trust-cta .btn{flex:1 1 auto;justify-content:center}
}

/* --- Золотые медальоны-печати (знаки доверия) --- */
/* Идёт сразу после stat-anchor на тёмном фоне (--color-bg), до proof-strip. */
.trust-badges{background:var(--color-bg);padding-top:3.4rem;padding-bottom:3.4rem;border-bottom:1px solid rgba(201,169,110,0.1)}
.trust-badge-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;max-width:1180px;margin:0 auto;padding:0}
.trust-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}

/* Печать: круглая золотая SVG-рамка + тиснёный центр с цифрой/текстом */
.trust-badge-seal{position:relative;width:clamp(116px,15vw,148px);height:clamp(116px,15vw,148px);display:flex;align-items:center;justify-content:center}
.trust-badge-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 14px rgba(201,169,110,0.18));transition:transform .5s ease}
.trust-badge:hover .trust-badge-svg{transform:rotate(-4deg)}

/* центр печати — крупный текст засечным шрифтом */
.trust-badge-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:.05rem;pointer-events:none}
.trust-badge-num{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.7rem);line-height:.92;background:linear-gradient(180deg,var(--color-gold-light),var(--color-gold-dim));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(201,169,110,0.2)}
.trust-badge-num-sm{font-size:clamp(1.45rem,2.5vw,1.95rem);letter-spacing:.01em}
.trust-badge-plus{font-size:.62em;vertical-align:super;-webkit-text-fill-color:var(--color-gold)}
.trust-badge-unit{font-family:var(--font-body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold);margin-top:.18rem;font-weight:600}
.trust-badge-sub{font-family:var(--font-body);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-gold-dim);font-weight:600;margin-bottom:.05rem}
.trust-badge-fix{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:.92;background:linear-gradient(180deg,var(--color-gold-light),var(--color-gold-dim));-webkit-background-clip:text;background-clip:text;color:transparent}

/* подпись под печатью */
.trust-badge-cap{font-family:var(--font-body);font-size:.86rem;line-height:1.4;color:var(--color-text-dim);font-weight:300;max-width:14ch}

/* --- Адаптив медальонов --- */
@media(max-width:760px){
  .trust-badge-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.4rem}
}
@media(max-width:380px){
  .trust-badge-row{grid-template-columns:1fr;gap:1.8rem}
}