/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 32px 56px;
  display: flex;
  justify-content: center;
}
.hero-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side, var(--red-glow), transparent 70%);
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  width: 100%;
  text-align: left;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 520px;
  max-width: 600px;
}

.hero-visual {
  flex: 0 0 380px;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Тот же язык штампа, что у .case-stat-num (пункт 10) — двойная
   рамка через box-shadow-ring + rotate(-6deg), только в масштабе
   героя. Никакой иллюстрации — только цифра из подзаголовка и
   мини-график в стиле иконок блока ROMI (#money). */
.hero-stat-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 52px;
  border: 3px solid var(--red);
  border-radius: 16px;
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 11px var(--red);
  transform: rotate(-6deg);
}
.hero-stat-stamp-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}
.hero-stat-stamp-cap {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-align: center;
}
.hero-stat-chart {
  width: 148px;
  height: 44px;
  color: var(--red);
  opacity: 0.85;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text);
}
.hero-title .accent { color: var(--red); }

.hero-sub {
  margin-top: 26px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 560px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }

.hero-fineprint { margin-top: 10px; }

.hero-bonus {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.bonus-line {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  max-width: 480px;
}
.bonus-amount-highlight {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  padding: 0 4px;
  background-image: linear-gradient(120deg, var(--red) 0%, var(--red) 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
  transform: rotate(-1deg);
}

.hero-inner .btn-cta { margin-top: 30px; }

.hero-bullets {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  text-align: left;
  width: 100%;
}
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.hero-bullets svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--red);
}

.scroll-cases {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.15s ease, gap 0.15s ease;
}
.scroll-cases:hover { color: var(--red); gap: 16px; }
.scroll-cases .arrow-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 15px;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  animation: bob 1.8s ease-in-out infinite;
}
.scroll-cases:hover .arrow-down { background: var(--red); color: #fff; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 720px) {
  .scroll-cases { font-size: 14px; letter-spacing: 0.05em; }
  .scroll-cases .arrow-down { width: 28px; height: 28px; font-size: 13px; }
}

@media (max-width: 980px) {
  .hero-top { flex-direction: column; text-align: center; }
  .hero-copy { align-items: center; flex-basis: auto; max-width: 640px; }
  .hero-bonus { align-items: center; }
  .hero-visual { flex-basis: auto; max-width: 340px; order: -1; }
}

@media (max-width: 720px) {
  .hero-title { font-size: 26px; line-height: 1.22; }
  .hero-sub { font-size: 18px; }
  .hero-bullets { grid-template-columns: 1fr; }
  .hero-visual { max-width: 280px; }
  /* штамп 77% нигде не уменьшался на мобильном — 88px цифра +
     40-52px паддинги на 390px экране превращались в плашку выше
     заголовка под ней. */
  .hero-stat-stamp { padding: 26px 34px; gap: 10px; }
  .hero-stat-stamp-num { font-size: 56px; }
  .hero-stat-stamp-cap { font-size: 12px; }
  .hero-stat-chart { width: 110px; height: 34px; }
}
@media (max-width: 400px) {
  .hero-title { font-size: 23px; }
  .hero-stat-stamp { padding: 22px 28px; }
  .hero-stat-stamp-num { font-size: 46px; }
}

/* ============ PAIN (блок 2) ============ */
.pain-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

.compare-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--card-border);
  z-index: 1;
}
.compare-vs {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px var(--bg), 0 8px 20px -4px var(--red-glow);
  z-index: 2;
}

.compare-head { display: grid; grid-template-columns: 1fr 1fr; }
.compare-head-cell {
  padding: 26px 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-align: center;
}
.compare-head-cell.dim { color: var(--text-dimmer); }
.compare-head-cell.money {
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.compare-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--card-border); }
.compare-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 44px;
  font-size: 15px;
  line-height: 1.4;
}
.compare-cell svg { width: 18px; height: 18px; flex-shrink: 0; }
.compare-cell.dim { color: var(--text-dim); }
.compare-cell.dim svg { color: var(--text-dimmer); }
.compare-cell.money {
  color: #fff;
  font-weight: 700;
  font-size: 16.5px;
  padding: 27px 44px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.compare-cell.money svg { color: #fff; width: 20px; height: 20px; }

.pain-closing {
  margin: 56px auto 0;
  text-align: center;
  font-size: 23px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 680px;
}
.pain-closing strong { color: var(--text); font-weight: 700; }

@media (max-width: 720px) {
  /* "Было → стало": вместо таблицы в 2 колонки (превращалась в
     нечитаемый плоский список при grid-template-columns:1fr) —
     каждая пара строк своя карточка со стрелкой-переходом, "стало"
     заметно ярче и крупнее "было". Общая шапка-таблица сжата в
     компактную легенду вместо двух больших плашек подряд. */
  .compare-card { background: none; border: none; }
  .compare-card::before, .compare-vs { display: none; }

  .compare-head {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 0 20px;
  }
  .compare-head-cell { padding: 0; font-size: 12px; background: none !important; }
  .compare-head-cell.dim::after { content: "·"; margin-left: 10px; color: var(--card-border); }

  .compare-row {
    grid-template-columns: 1fr;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
    overflow: hidden; margin-bottom: 14px;
  }
  .compare-row:last-child { margin-bottom: 0; }

  .compare-cell { padding: 14px 18px; }
  .compare-cell.dim {
    font-size: 13.5px; color: var(--text-dimmer);
    border-bottom: none;
    position: relative; padding-bottom: 22px;
  }
  .compare-cell.dim::after {
    content: ""; position: absolute; left: 18px; bottom: 4px;
    width: 14px; height: 14px;
    background: var(--card-border);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .compare-cell.money { padding: 16px 18px; }
  .compare-cell.money svg { width: 20px; height: 20px; color: #fff; }

  .pain-closing { font-size: 19px; }
}

/* ============ CASES (блок 3) ============ */
.cases-title { text-align: center; max-width: 700px; margin: 0 auto 28px; }

.nda-plate {
  max-width: 640px;
  margin: 0 auto 56px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.nda-plate svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dimmer); margin-top: 2px; }
.nda-plate p { font-size: 14px; line-height: 1.55; color: var(--text-dim); text-align: left; }

.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.case-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.case-card:hover {
  border-color: var(--red);
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 20px 44px -12px var(--red-glow);
}
.case-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}
.case-stat {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.case-stat-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--red);
  letter-spacing: -0.01em;
  padding: 4px 14px;
  border: 2px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 6px var(--red);
  transform: rotate(-6deg);
}
.case-stat-cap { font-size: 14px; color: var(--text-dim); }

.case-rows {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-row { display: grid; grid-template-columns: 82px 1fr; gap: 14px; }
.case-row-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dimmer);
  padding-top: 2px;
}
.case-row-value { font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.case-row.result .case-row-value { color: var(--text); }

.case-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; font-size: 13.5px; font-weight: 700; color: var(--red);
}
.case-read-more svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
a.case-card:hover .case-read-more svg { transform: translateX(3px); }

.cases-footer {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cases-footer .btn-cta .label-short { display: none; }
@media (max-width: 560px) {
  .cases-footer .btn-cta .label-full { display: none; }
  .cases-footer .btn-cta .label-short { display: inline; }
}
@media (max-width: 860px) {
  .cases-grid { grid-template-columns: 1fr; }
  .case-card { padding: 26px 24px; }
  /* фикс. колонка-лейбл 82px на узком экране съедала место и
     оставляла длинный текст висеть в узкой колонке рядом с
     одиноким "БЫЛО"/"СДЕЛАЛИ" — лейбл теперь просто строкой сверху. */
  .case-row { grid-template-columns: 1fr; gap: 4px; }
  /* штамп-цифра нигде не уменьшалась на мобильном — 32px + паддинги
     смотрелись слишком крупно рядом с остальной карточкой. */
  .case-stat-num { font-size: 24px; padding: 3px 10px; box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--red); }
}

/* ============ СТРАНИЦА "ВСЕ КЕЙСЫ" (банк кейсов) ============ */
.cases-bank-page { max-width: 1180px; margin: 0 auto; padding: 100px 32px 120px; }
.cases-bank-header { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.cases-bank-header .section-title { margin-bottom: 14px; }
.cases-bank-header p { font-size: 15.5px; line-height: 1.6; color: var(--text-dim); }
.cases-bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cases-bank-card {
  display: block; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 24px 22px; text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cases-bank-card:hover {
  border-color: var(--red);
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 20px 44px -12px var(--red-glow);
}
.cases-bank-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dimmer); margin-bottom: 12px;
}
.cases-bank-stat {
  font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--red);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.cases-bank-cap { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 16px; }
.cases-bank-title { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 16px; }
.cases-bank-link { font-size: 13px; font-weight: 600; color: var(--red); }
.cases-bank-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-dimmer); margin-bottom: 32px;
}
.cases-bank-back:hover { color: var(--text-dim); }

@media (max-width: 900px) {
  .cases-bank-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cases-bank-page { padding: 88px 20px 80px; }
  .cases-bank-grid { grid-template-columns: 1fr; }
}

/* ============ БАНК СТАТЕЙ (/articles/) — тот же язык, что у cases-bank,
   но без крупной цифры-статы: у статей нет единого central-метрика,
   вместо неё больше места под отрывок. ============ */
.articles-bank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.articles-bank-card {
  display: block; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 26px 24px; text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.articles-bank-card:hover {
  border-color: var(--red);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -12px var(--red-glow);
}
.articles-bank-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--red); margin-bottom: 12px;
}
.articles-bank-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); line-height: 1.35; margin-bottom: 10px; }
.articles-bank-excerpt { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 16px; }
.articles-bank-link { font-size: 13px; font-weight: 600; color: var(--red); }

@media (max-width: 700px) {
  .articles-bank-grid { grid-template-columns: 1fr; }
}

/* ============ CATEGORIES (блок 4) ============ */
.categories-title { text-align: center; max-width: 640px; margin: 0 auto 64px; }

.categories-list { max-width: 880px; margin: 0 auto; }
.category-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--card-border);
}
.category-row:last-child { border-bottom: 1px solid var(--card-border); }
.category-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--red);
  padding-top: 6px;
}
.category-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.category-tags { font-size: 14.5px; color: var(--text-dim); line-height: 1.65; max-width: 620px; }

/* .category-icon — скрыт на десктопе (там номер+иконка уже показаны
   отдельно в .flow-wrap выше). На мобильном ≤560px .flow-wrap прячется
   целиком, а .category-icon заменяет .category-num — иконка+номер прямо
   в строке списка вместо дублирования одних и тех же 7 пунктов дважды. */
.category-icon { display: none; }

.categories-closing {
  margin: 52px auto 0;
  max-width: 640px;
  text-align: center;
}

@media (max-width: 720px) {
  .category-row { grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 0; }
  .category-name { font-size: 19px; }
}

@media (max-width: 560px) {
  /* Вариант C: объединённый список вместо иконок-сверху + список-ниже —
     убирает дублирование контента и "осиротевший" 7-й пункт в 3-колоночной
     сетке иконок (был отдельный баг на мобильных экранах). */
  .flow-wrap { display: none; }
  .category-row { grid-template-columns: 48px 1fr; align-items: flex-start; }
  .category-num { display: none; }
  .category-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--card-border);
    position: relative; flex-shrink: 0; margin-top: 2px;
  }
  .category-icon svg { width: 18px; height: 18px; color: var(--red); }
  .category-icon-num {
    position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 8.5px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg);
  }
  .cat-name-full { display: none; }
}

/* ---- схема-инфографика над списком категорий ---- */
.flow-wrap { position: relative; max-width: 980px; margin: 0 auto 80px; }
.flow-line {
  position: absolute;
  top: 34px;
  left: 34px; right: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-border) 6%, var(--card-border) 94%, transparent);
  z-index: 0;
}
.flow-nodes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  position: relative;
  z-index: 1;
}
.flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.flow-circle {
  width: 68px; height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.flow-circle svg { width: 26px; height: 26px; color: var(--red); }
.flow-num {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--bg);
}
.flow-name { font-size: 13px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }

@media (max-width: 900px) {
  .flow-nodes { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .flow-line { display: none; }
}
@media (max-width: 560px) {
  .flow-nodes { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .flow-circle { width: 56px; height: 56px; }
  .flow-circle svg { width: 22px; height: 22px; }
}

/* ============ CLIENTS (логотипы, мозаика-тетрис) ============ */
.clients { position: relative; }
.clients::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin: 0 auto 32px;
}
.clients-title { text-align: center; max-width: 640px; margin: 0 auto 26px; }

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
  max-width: 610px;
  margin: 0 auto;
}
.client-card {
  background: #fdfdfd;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.client-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35); }
.client-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* раскладка-тетрис без зазоров — 4 колонки × 6 строк.
   Форма каждой карточки задаётся её собственным aspect-ratio.
   ВАЖНО: grid-auto-rows:auto заставлял браузер вычислять высоту
   строки из комбинации aspect-ratio разных ячеек одного ряда —
   Chrome и Safari решают эту неоднозначность по-разному (в Safari
   сетка выходила выше расчётной и наезжала на следующую секцию).
   По конструкции раскладки каждая строка равна одной ширине
   колонки (проверено: во всех 6 строках комбинация ac/up/ebi/...
   через свои aspect-ratio сходится ровно к высоте = ширине одной
   колонки) — поэтому высота строк задана явно через
   grid-template-rows, без auto и без места для расхождений. */
@media (min-width: 861px) {
  .clients-grid {
    grid-template-areas:
      "ac   up   up   ebi"
      "far  n    n    ebi"
      "hce  hce  pj   epic"
      "syt  syt  nin  nin"
      "skf  tek  vaf  vaf"
      "zhi  zhi  rod  mama";
    grid-template-rows: repeat(6, 1fr);
  }
  /* max-width сетки — 610px, всегда рендерится в полную ширину на
     этом брейкпоинте → колонка = (610 - 3×10gap)/4 = 145px,
     6 строк по 145px + 5×10gap = 920px общей высоты. aspect-ratio
     на grid-контейнере ненадёжен в Safari (не всегда даёт fr-рядам
     definite height для распределения) — задаём высоту напрямую
     числом, без вычисляемых свойств. */
  .clients-grid { height: 920px; }
  .cg-ac   { grid-area: ac; }
  .cg-up   { grid-area: up; }
  .cg-ebi  { grid-area: ebi; }
  .cg-far  { grid-area: far; }
  .cg-n    { grid-area: n; }
  .cg-hce  { grid-area: hce; }
  .cg-pj   { grid-area: pj; }
  .cg-epic { grid-area: epic; }
  .cg-syt  { grid-area: syt; }
  .cg-nin  { grid-area: nin; }
  .cg-skf  { grid-area: skf; }
  .cg-tek  { grid-area: tek; }
  .cg-vaf  { grid-area: vaf; }
  .cg-zhi  { grid-area: zhi; }
  .cg-rod  { grid-area: rod; }
  .cg-mama { grid-area: mama; }
}

/* ниже 861px — раскладка проще: точный тетрис на 4 колонки не влезает,
   переходим на плотную упаковку с той же логикой "широкий/высокий" */
@media (max-width: 860px) {
  .clients-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; max-width: none; }
  .cc-w { grid-column: span 2; aspect-ratio: 2; }
  .cc-h { grid-row: span 2; aspect-ratio: 0.5; }
}
@media (max-width: 560px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .client-card { padding: 6px; }
}

/* ============ FOUNDER (блок 5) ============ */
.founder-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: center;
}
.founder-photo-wrap { position: relative; }
.founder-photo-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(closest-side, var(--red-glow), transparent 70%);
  opacity: 0.4;
  filter: blur(24px);
  z-index: -1;
}
.founder-photo-wrap img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  display: block;
  border: 1px solid var(--card-border);
}
.founder-caption { margin-top: 18px; text-align: center; }
.founder-caption .name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.founder-caption .role { font-size: 13px; color: var(--text-dimmer); margin-top: 3px; }

.founder-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.founder-text p { font-size: 16.5px; line-height: 1.7; color: var(--text-dim); margin: 0 0 16px; }
.founder-text p:last-child { margin-bottom: 0; color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .founder-grid { grid-template-columns: 1fr; gap: 36px; }
  .founder-photo-wrap { max-width: 280px; margin: 0 auto; }
  .founder-title { font-size: 27px; text-align: center; }
  .founder-text p { text-align: center; }
}

/* ============ Сбитый ритм: точечный сдвиг заголовка от центра ============
   Используется точечно (Team, Fit, Cases, FAQ) — сознательно не на
   каждом заголовке, чтобы разбить длинные пробеги центрированных
   секций, не превращая приём в новый шаблон. Кандидаты — заголовки
   без картинки/акцента прямо рядом (просто текст). См. companion-приём
   — .clients::before ниже. */
.section-title--offset {
  text-align: left;
  padding-left: 22px;
  position: relative;
}
.section-title--offset::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.14em;
  width: 4px;
  border-radius: 2px;
  background: var(--red);
}
.team-title.section-title--offset + .team-intro { text-align: left; }

/* ============ TEAM (блок 6) ============ */
.team-title { text-align: center; max-width: 680px; margin: 0 auto 20px; }
.team-title.section-title--offset { margin-bottom: 26px; }
.team-intro { text-align: center; max-width: 620px; margin: 0 auto 56px; font-size: 17px; line-height: 1.6; color: var(--text-dim); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.team-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.team-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--red-soft);
  display: flex; align-items: center; justify-content: center;
}
.team-icon svg { width: 22px; height: 22px; color: var(--red); }
.team-role { font-size: 14.5px; font-weight: 600; color: var(--text); }

.team-card.ai {
  border-color: rgba(230, 50, 31, 0.4);
  background: linear-gradient(150deg, rgba(230,50,31,0.1), rgba(230,50,31,0.03));
}
.team-card.ai .team-icon { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.team-card.ai .team-icon svg { color: #fff; }
.team-card.ai .team-role { color: #ff8f7f; }
.team-card.ai .team-sub { font-size: 12.5px; color: var(--text-dim); margin-top: -6px; line-height: 1.4; }

.team-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.trust-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.trust-card svg { width: 22px; height: 22px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.trust-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }

@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-trust { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ============ MASCOTS (блок 7) ============ */
.mascots-title { text-align: center; max-width: 700px; margin: 0 auto 16px; }
.mascots-intro { text-align: center; max-width: 620px; margin: 0 auto 40px; font-size: 16.5px; line-height: 1.6; color: var(--text-dim); }
.mascots-intro-punch {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.mascots-intro-punch strong { color: var(--red); font-weight: 700; }

/* ============ Эскалация «беззубого бренда» — доигрываем нарастание ============
   Не карточки-близнецы, а растущий текст на фоне клина-«трещины»,
   которая набирает толщину и цвет к низу, плюс финальный «удар» —
   отдельный проштампованный блок в языке .btn-cta (та же обводка,
   срез угла, жёсткая тень), а не ещё одна строка в столбик. */
.doom-cascade { max-width: 620px; margin: 0 auto 48px; }
.doom-buildup {
  position: relative;
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.doom-buildup::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(180deg, var(--text-dimmer) 0%, var(--red) 100%);
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.doom-line { font-family: var(--font-display); line-height: 1.3; margin: 0; }
.doom-line--1 { font-size: 18px; font-weight: 600; color: var(--text-dim); }
.doom-line--2 { font-size: 21px; font-weight: 700; color: var(--text); margin-left: 10px; }
.doom-line--3 { font-size: 25px; font-weight: 800; color: #ff8f7f; margin-left: 22px; }

.doom-final {
  margin: 30px auto 0;
  max-width: 420px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  color: #fff;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  border: 3px solid #f0ebe0;
  padding: 20px 32px;
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 92% 100%, 0 100%);
  box-shadow: 6px 6px 0 #f0ebe0;
  transform: rotate(-2deg);
}

@media (max-width: 720px) {
  .doom-line--1 { font-size: 16px; }
  .doom-line--2 { font-size: 18px; margin-left: 6px; }
  .doom-line--3 { font-size: 21px; margin-left: 12px; }
  .doom-final { font-size: 21px; padding: 16px 22px; }
}

.mascots-solution {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
}
.mascots-solution strong { color: var(--text); }

.mascot-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 56px auto 0;
}
.placeholder-card {
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--text-dimmer);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.placeholder-card:hover { border-color: var(--red); transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 36px -12px var(--red-glow); }
.placeholder-card .ph-hint { font-size: 11px; color: var(--red); font-weight: 600; margin-top: 2px; }
.placeholder-card.soon { cursor: default; }
.placeholder-card.soon:hover { border-color: var(--card-border); transform: none; box-shadow: none; }
.placeholder-card.soon .ph-hint { color: var(--text-dimmer); }

.placeholder-card.has-image {
  border-style: solid;
  border-color: var(--card-border);
  background: var(--card-bg);
  padding: 0 0 22px;
  overflow: hidden;
}
.placeholder-card.has-image:hover { border-color: var(--red); }
.placeholder-card.has-image .ph-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  margin-bottom: 16px;
}
.placeholder-card.has-image .ph-title,
.placeholder-card.has-image .ph-sub,
.placeholder-card.has-image .ph-hint,
.placeholder-card.has-image .ph-quote { padding: 0 20px; }
.placeholder-card svg { width: 30px; height: 30px; }
.placeholder-card .ph-title { font-weight: 700; color: var(--text-dim); font-size: 15px; }
.placeholder-card .ph-sub { font-size: 12.5px; line-height: 1.5; max-width: 220px; }
.placeholder-card .ph-quote {
  font-size: 13px; font-style: italic; color: var(--text-dim);
  border-left: 2px solid var(--red); padding-left: 10px; margin-top: 4px;
  text-align: left; line-height: 1.4; max-width: 220px;
}

.mascots-closing {
  margin: 56px auto 0;
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quote-ticket {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--red);
  padding: 30px 36px 40px;
  transform: rotate(-1.2deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 84%, 94.44% 84%, 88.89% 100%, 83.33% 84%, 77.78% 100%, 72.22% 84%, 66.67% 100%, 61.11% 84%, 55.56% 100%, 50% 84%, 44.44% 100%, 38.89% 84%, 33.33% 100%, 27.78% 84%, 22.22% 100%, 16.67% 84%, 11.11% 100%, 5.56% 84%, 0% 100%);
}
.quote-ticket p {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .mascot-examples { grid-template-columns: 1fr; }
}

/* ---- досье персонажа (модалка по клику на заглушку) ---- */
/* ============ Попап "Обсудить задачу" — открывается по клику на любую
   красную CTA-кнопку сайта (см. js/main.js), доп. вариант к квизу ============ */
.contact-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.contact-popup-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

.contact-popup {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); max-width: 440px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 36px 32px;
  text-align: center;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.contact-popup-overlay.open .contact-popup { transform: translateY(0); }

.contact-popup-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); border: 1px solid var(--card-border);
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.contact-popup-close:hover { color: var(--text); border-color: var(--text-dimmer); }
.contact-popup-close svg { width: 16px; height: 16px; }

.contact-popup-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.35;
  color: var(--text); margin: 8px 0 12px;
}
.contact-popup-text { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); margin-bottom: 22px; }
.contact-popup-input { margin-bottom: 4px; text-align: left; }
.contact-popup-consent { text-align: left; }
.contact-popup-submit { width: 100%; justify-content: center; margin-top: 22px; }
.contact-popup-fineprint { font-size: 11.5px; color: var(--text-dimmer); margin-top: 14px; }

.contact-popup-success {
  display: none;
  flex-direction: column; align-items: center;
  padding: 12px 4px;
}
.contact-popup-success.active { display: flex; }
.contact-popup-success svg { width: 44px; height: 44px; color: var(--red); margin-bottom: 16px; }
.contact-popup-success-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin-bottom: 8px; }
.contact-popup-success p { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }

@media (max-width: 480px) {
  .contact-popup { padding: 28px 22px; }
  .contact-popup-title { font-size: 19px; }
}

.lead-magnet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lead-magnet-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

.lead-magnet-modal {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 40px 36px;
  text-align: center;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.lead-magnet-overlay.open .lead-magnet-modal { transform: translateY(0); }

.lead-magnet-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); border: 1px solid var(--card-border);
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lead-magnet-close:hover { color: var(--text); border-color: var(--text-dimmer); }
.lead-magnet-close svg { width: 16px; height: 16px; }

.lead-magnet-title {
  font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.3;
  color: var(--text); margin: 8px 0 14px;
}
.lead-magnet-text { font-size: 15px; line-height: 1.55; color: var(--text-dim); margin-bottom: 24px; }
.lead-magnet-cta { width: 100%; justify-content: center; }

@media (max-width: 480px) {
  .lead-magnet-modal { padding: 32px 22px; }
  .lead-magnet-title { font-size: 19px; }
}

.dossier-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.dossier-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

.dossier-modal {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); max-width: 720px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.dossier-overlay.open .dossier-modal { transform: translateY(0); }

.dossier-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.dossier-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.dossier-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); border: 1px solid var(--card-border);
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dossier-close:hover { color: var(--text); border-color: var(--text-dimmer); }
.dossier-close svg { width: 16px; height: 16px; }

.dossier-section { margin-bottom: 26px; }
.dossier-section:last-child { margin-bottom: 0; }
.dossier-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dimmer); margin-bottom: 12px;
}

.dossier-photo-ph {
  aspect-ratio: 16 / 9; border-radius: var(--radius-md);
  border: 1.5px dashed var(--card-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-dimmer);
}
.dossier-photo-ph svg { width: 32px; height: 32px; }
.dossier-photo-ph span { font-size: 13px; }

.dossier-hero { display: flex; gap: 24px; align-items: flex-start; }
.dossier-hero-media { flex: 0 0 200px; max-width: 200px; }
.dossier-hero-info { flex: 1 1 300px; min-width: 0; }
.dossier-hero-info .dossier-label { margin-top: 0; }
@media (max-width: 620px) {
  .dossier-hero { flex-direction: column; }
  .dossier-hero-media { flex: none; max-width: 220px; margin: 0 auto; }
}

.dossier-photo {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
  object-fit: cover;
}
.dossier-hero-media .dossier-photo {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--bg-soft);
}
.dossier-photo-caption { margin-top: 10px; font-size: 13px; color: var(--text-dimmer); text-align: center; }

/* flex+wrap вместо grid — если фото меньше 4 (или больше), ряд остаётся
   центрированным, а не сиротой к левому краю (тот же приём, что и в .dossier-touch) */
.dossier-poses { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dossier-poses .dossier-photo-ph { flex: 0 1 150px; aspect-ratio: 1 / 1; }
.dossier-poses img { flex: 0 1 150px; width: 150px; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius-md); display: block; }
@media (max-width: 560px) {
  .dossier-poses { grid-template-columns: repeat(2, 1fr); }
}

.dossier-voice-ph {
  font-size: 14.5px; color: var(--text-dim); line-height: 1.6; font-style: italic;
  padding: 16px; border: 1.5px dashed var(--card-border); border-radius: var(--radius-md);
}
.dossier-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dossier-tag {
  font-size: 12px; color: var(--text-dimmer);
  border: 1px dashed var(--card-border); border-radius: var(--radius-full); padding: 5px 12px;
}

.dossier-posts { display: flex; flex-direction: column; gap: 14px; }
.dossier-post-ph { position: relative; border: 1.5px dashed var(--card-border); border-radius: var(--radius-md); padding: 18px; }
.dossier-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dossier-post-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); border: 1px dashed var(--card-border); flex-shrink: 0; }
.dossier-post-name { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.dossier-post-lines span { display: block; height: 8px; border-radius: 4px; background: var(--bg-soft); margin-bottom: 7px; }
.dossier-post-lines span:nth-child(1) { width: 100%; }
.dossier-post-lines span:nth-child(2) { width: 88%; }
.dossier-post-lines span:nth-child(3) { width: 58%; margin-bottom: 0; }

.dossier-post-tag,
.dossier-story-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--red); margin-bottom: 10px;
}

.dossier-story-ph {
  border: 1.5px dashed var(--card-border); border-radius: var(--radius-md);
  padding: 18px; background: var(--bg-soft);
}
.dossier-story-text { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }

.dossier-cover { width: 100%; border-radius: var(--radius-md); display: block; }

/* flex+wrap вместо grid — при нечётном/некратном числе точек контакта
   (сейчас 7) последний неполный ряд центрируется сам, а не сиротой к левому краю */
.dossier-touch { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dossier-touch-item {
  flex: 0 1 200px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  overflow: hidden; text-align: left; background: var(--bg-soft);
}
.dossier-touch-item img { display: block; width: 100%; height: auto; }
.dossier-touch-caption { padding: 10px 12px; font-size: 12px; color: var(--text-dimmer); line-height: 1.4; }

@media (max-width: 560px) {
  .dossier-modal { padding: 22px; }
  .dossier-touch-item { flex-basis: 100%; }
}

/* ============ MENU (блок 8) ============ */
.menu-title { text-align: center; max-width: 620px; margin: 0 auto 20px; }
.menu-lead {
  text-align: center; max-width: 620px; margin: 0 auto 48px;
  font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.5;
}

.constructor-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin: 0 auto 48px; max-width: 720px;
}
.constructor-chip {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 14px 20px;
  font-size: 14px; font-weight: 600; color: var(--text-dim);
}
.constructor-op { color: var(--text-dimmer); font-size: 20px; font-weight: 700; }
.constructor-result {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: var(--radius-md); padding: 14px 24px;
  font-size: 14px; font-weight: 700; color: #fff;
}

.menu-text { max-width: 680px; margin: 0 auto 40px; text-align: center; font-size: 17px; line-height: 1.65; color: var(--text-dim); }
.menu-text strong { color: var(--text); }

.menu-case {
  display: block;
  max-width: 640px; margin: 0 auto 40px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 30px 32px; text-align: center;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.menu-case:hover {
  border-color: var(--red);
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 44px -12px var(--red-glow);
}
.menu-case-tag {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--red); font-weight: 700; margin-bottom: 12px;
}
.menu-case .case-stat { justify-content: center; margin-top: 0; margin-bottom: 16px; }
.menu-case-headline { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--text); margin-bottom: 12px; line-height: 1.3; }
.menu-case-sub { font-size: 13.5px; color: var(--text-dimmer); line-height: 1.5; }
.menu-case .case-read-more { margin-top: 18px; }
.menu-case:hover .case-read-more svg { transform: translateX(3px); }


@media (max-width: 560px) {
  .constructor-row { gap: 10px; }
  .constructor-chip, .constructor-result { padding: 11px 16px; font-size: 13px; }
}

/* ============ MONEY / ROMI (блок 9) ============ */
.money-title { text-align: center; max-width: 640px; margin: 0 auto 20px; }
.money-intro { text-align: center; max-width: 640px; margin: 0 auto 48px; font-size: 17px; line-height: 1.6; color: var(--text-dim); }

.money-flow-wrap { position: relative; max-width: 780px; margin: 0 auto 56px; }
.money-flow-line {
  position: absolute; top: 30px; left: 30px; right: 30px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-border) 6%, var(--card-border) 94%, transparent);
  z-index: 0;
}
.money-flow-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; z-index: 1; }
.money-flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.money-flow-circle {
  width: 60px; height: 60px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--card-border); display: flex; align-items: center; justify-content: center;
}
.money-flow-circle svg { width: 24px; height: 24px; color: var(--red); }
.money-flow-name { font-size: 12.5px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }

/* "Счётчик": замкнутая, слегка вдавленная панель — просто математика,
   без эмоций. Контраст с .claims-callout ниже — там, наоборот, самый
   резкий акцент блока (см. комментарий там). */
.romi-formula {
  max-width: 540px; margin: 0 auto 40px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-align: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}
.romi-formula-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dimmer); font-weight: 700;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--card-border);
}
.romi-formula-eq {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--text); margin-bottom: 22px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.romi-formula-examples { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.romi-example {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--text-dim);
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 8px 14px;
}
.romi-example strong { font-family: var(--font-display); color: var(--red); font-size: 15px; }

/* Самый резкий акцент блока #money — не ещё один притемнённый бокс
   (было — и сливалось с .romi-formula выше), а проштампованный
   "вердикт" в языке .btn-cta (срез угла, кремовая обводка, поворот),
   текст-пояснение под ним — обычный, спокойный. */
.claims-callout { max-width: 580px; margin: 0 auto 40px; text-align: center; }
.claims-callout-title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  border: 3px solid #f0ebe0;
  padding: 11px 26px;
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 90% 100%, 0 100%);
  box-shadow: 4px 4px 0 #f0ebe0;
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.claims-callout p { font-size: 15px; line-height: 1.65; color: var(--text-dim); }

.money-closing { text-align: center; max-width: 580px; margin: 0 auto 44px; font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.5; }

.report-visual {
  display: block; max-width: 720px; margin: 0 auto;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.report-visual:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -20px rgba(0,0,0,0.6); }
.report-visual img { display: block; width: 100%; height: auto; }
.report-visual-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--card-bg); font-size: 13px;
}
.report-visual-cap span:first-child { color: var(--text-dimmer); }
.report-visual-link { color: var(--red); font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  /* было grid 3 колонки — при 5 узлах последний ряд (2 из 3) висел
     слева с пустотой справа. flex-wrap + justify-center центрирует
     неполный последний ряд вместо этого. */
  .money-flow-nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 6px; }
  .money-flow-node { flex: 0 0 30%; }
  .money-flow-line { display: none; }
}

/* ============ BONUS (блок 10) ============ */
.bonus-title { text-align: center; max-width: 680px; margin: 0 auto 14px; }
.stamp-amount {
  display: inline-block;
  vertical-align: middle;
  color: var(--red);
  padding: 2px 14px;
  border: 2px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--red);
  transform: rotate(-6deg);
  margin-right: 4px;
}
.bonus-lead { text-align: center; max-width: 560px; margin: 0 auto 40px; font-size: 17px; color: var(--text-dim); }

.bonus-steps { max-width: 700px; margin: 0 auto 44px; display: flex; flex-direction: column; }
.bonus-step { display: flex; align-items: flex-start; gap: 18px; padding: 18px 4px; border-top: 1px solid var(--card-border); }
.bonus-step:last-child { border-bottom: 1px solid var(--card-border); }
.bonus-step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--red-soft); color: var(--red);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.bonus-step-text { font-size: 15.5px; color: var(--text-dim); line-height: 1.5; padding-top: 5px; }
.bonus-step-text strong { color: var(--text); }

/* Единственный светлый элемент на тёмной странице — "чек" на кремовой
   бумаге (тот же #f0ebe0, что обводка/тень comic-кнопок, просто теперь
   заливка, а не контур), рваный нижний край, лёгкий поворот. Контраст
   с тёмным фоном сам по себе цепляет — не нужен ещё один красный бокс. */
.bonus-highlight {
  position: relative;
  max-width: 560px; margin: 0 auto 52px;
  background: #f0ebe0;
  padding: 32px 36px 44px;
  border-radius: 4px;
  text-align: center;
  transform: rotate(-1.4deg);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 94.44% 88%, 88.89% 100%, 83.33% 88%, 77.78% 100%, 72.22% 88%, 66.67% 100%, 61.11% 88%, 55.56% 100%, 50% 88%, 44.44% 100%, 38.89% 88%, 33.33% 100%, 27.78% 88%, 22.22% 100%, 16.67% 88%, 11.11% 100%, 5.56% 88%, 0% 100%);
}
.bonus-highlight-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.35;
  color: var(--red-dark);
  margin-bottom: 14px;
}
.bonus-highlight p { font-size: 14.5px; line-height: 1.55; color: #57504a; }
.bonus-highlight strong { color: #241d18; }

@media (max-width: 600px) {
  .bonus-highlight { padding: 26px 24px 36px; transform: rotate(-1deg); }
  .bonus-highlight-headline { font-size: 19px; }
}

.bonus-closing {
  text-align: center; max-width: 620px; margin: 0 auto 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--text); line-height: 1.4;
}
.bonus-justify { text-align: center; max-width: 560px; margin: 0 auto 22px; font-size: 15px; color: var(--text-dim); line-height: 1.6; }
.bonus-fineprint { text-align: center; font-size: 12px; color: var(--text-dimmer); }

@media (max-width: 600px) {
  .bonus-closing { font-size: 21px; }
}

/* ============ FIT (блок 11) ============ */
.fit-title { text-align: center; max-width: 600px; margin: 0 auto 48px; }
.fit-title.section-title--offset { margin-bottom: 60px; }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
.fit-card { border-radius: var(--radius-lg); padding: 28px 30px; }
.fit-card.yes { background: var(--red-soft); border: 1px solid rgba(230,50,31,0.35); }
.fit-card.no { background: var(--card-bg); border: 1px solid var(--card-border); }
.fit-card-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 22px; }
.fit-card.yes .fit-card-title { color: #ff8f7f; }
.fit-card.no .fit-card-title { color: var(--text-dimmer); }
.fit-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.5; }
.fit-item:last-child { margin-bottom: 0; }
.fit-card.yes .fit-item { color: var(--text); }
.fit-card.no .fit-item { color: var(--text-dim); }
.fit-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.fit-card.yes .fit-item svg { color: var(--red); }
.fit-card.no .fit-item svg { color: var(--text-dimmer); }

@media (max-width: 640px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* ============ FAQ (блок 12) ============ */
.faq-title { text-align: center; max-width: 600px; margin: 0 auto 44px; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--card-border); }
.faq-item:first-child { border-top: 1px solid var(--card-border); }

.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; padding: 22px 4px; text-align: left;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.faq-question:hover { color: var(--red); }
.faq-plus { width: 20px; height: 20px; color: var(--text-dimmer); flex-shrink: 0; transition: transform 0.2s ease, color 0.2s ease; }
.faq-item.open .faq-plus { transform: rotate(45deg); color: var(--red); }

.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 30px 22px 4px; font-size: 14.5px; line-height: 1.65; color: var(--text-dim); }

/* список-буллиты внутри аккордеона (используется тарифами) */
.faq-answer-inner ul { padding: 0 30px 22px 4px; margin: 0; list-style: none; }
.faq-answer-inner li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.55; color: var(--text-dim);
}
.faq-answer-inner li:last-child { margin-bottom: 0; }
.faq-answer-inner li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}

/* ============ PRICING (блок 13) ============ */
.pricing-title { text-align: center; max-width: 640px; margin: 0 auto 14px; }
.pricing-lead { text-align: center; max-width: 560px; margin: 0 auto 48px; font-size: 16px; color: var(--text-dim); }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto 20px; }
.price-card { border-radius: var(--radius-lg); padding: 32px 30px; position: relative; }
.price-card.basic { background: var(--card-bg); border: 1px solid var(--card-border); }
.price-card.extended { background: linear-gradient(150deg, rgba(230,50,31,0.14), rgba(230,50,31,0.03)); border: 1px solid rgba(230,50,31,0.4); }
.price-card-badge {
  position: absolute; top: -13px; right: 26px;
  background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 5px 14px; border-radius: var(--radius-full);
}
.price-card-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin-bottom: 8px; }
.price-card-price { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--text); margin-bottom: 16px; white-space: nowrap; }
.price-card-price span { font-size: 14px; font-weight: 600; color: var(--text-dimmer); white-space: nowrap; }

@media (max-width: 480px) {
  .price-card-price { font-size: 26px; }
}
.price-card-desc { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.price-card-desc strong { color: var(--text); }

.pricing-bonus-note {
  text-align: center; max-width: 600px; margin: 0 auto 48px;
  font-size: 13px; color: var(--text-dimmer);
}

.tariff-categories-title {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--text); margin: 0 auto 28px;
}
.tariff-categories { max-width: 760px; margin: 0 auto 48px; }

.pricing-cta { display: flex; justify-content: center; }

@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============ QUIZ (блок 14, финальный CTA) ============ */
.quiz-title { text-align: center; max-width: 680px; margin: 0 auto 48px; font-size: 34px; }

.quiz-card {
  max-width: 620px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 40px;
}

.quiz-progress-bar { height: 4px; background: var(--bg-soft); border-radius: var(--radius-full); overflow: hidden; }
.quiz-progress-fill { height: 100%; width: 20%; background: linear-gradient(90deg, var(--red), var(--red-dark)); border-radius: var(--radius-full); transition: width 0.3s ease; }
.quiz-progress-label { font-size: 12px; color: var(--text-dimmer); margin: 10px 0 30px; text-align: right; }

.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-question { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text); margin-bottom: 24px; line-height: 1.35; }

.quiz-choices { display: flex; flex-direction: column; gap: 10px; }
.quiz-choice {
  text-align: left; padding: 15px 18px; border-radius: var(--radius-md); width: 100%;
  background: var(--bg-soft); border: 1.5px solid var(--card-border);
  color: var(--text-dim); font-size: 15px; font-weight: 600; font-family: var(--font-body); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.quiz-choice:hover { border-color: var(--red); color: var(--text); }
.quiz-choice.selected { border-color: var(--red); background: var(--red-soft); color: var(--text); }

.quiz-input {
  width: 100%; padding: 15px 18px; border-radius: var(--radius-md); box-sizing: border-box;
  background: var(--bg-soft); border: 1.5px solid var(--card-border);
  color: var(--text); font-size: 15px; font-family: var(--font-body);
}
.quiz-input:focus { outline: none; border-color: var(--red); }
.quiz-input::placeholder { color: var(--text-dimmer); }

.quiz-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 12.5px; color: var(--text-dimmer); line-height: 1.5; cursor: pointer;
}
.quiz-consent input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--red); cursor: pointer;
}
.quiz-consent a { color: var(--text-dim); text-decoration: underline; }
.quiz-consent.error { color: #ff8f7f; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.quiz-back {
  font-size: 14px; color: var(--text-dimmer); cursor: pointer;
  background: none; border: none; font-family: var(--font-body); padding: 8px 0;
}
.quiz-back:hover { color: var(--text-dim); }
.quiz-back.hidden-back { visibility: hidden; }
.quiz-nav .btn-cta { padding: 13px 22px; font-size: 15px; display: none; }
.quiz-nav .btn-cta.visible { display: inline-flex; }
.quiz-nav .btn-cta .label-short { display: none; }

.quiz-success { display: none; text-align: center; padding: 10px 0; }
.quiz-success.active { display: block; }
.quiz-success svg { width: 46px; height: 46px; color: var(--red); margin-bottom: 20px; }
.quiz-success-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); margin-bottom: 12px; }
.quiz-success p { font-size: 15px; color: var(--text-dim); line-height: 1.6; }

@media (max-width: 560px) {
  .quiz-card { padding: 28px 22px; }
  .quiz-title { font-size: 26px; }
  .quiz-question { font-size: 18px; }

  .quiz-nav .btn-cta .label-full { display: none; }
  .quiz-nav .btn-cta .label-short { display: inline; }

  .quiz-nav { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .quiz-nav .btn-cta.visible { width: 100%; justify-content: center; }
  .quiz-back { align-self: center; }
}

/* ============ МОБИЛЬНОЕ СЖАТИЕ ОТСТУПОВ ЗАГОЛОВКОВ/ИНТРО ============
   Десктопные margin у *-title/*-intro/*-closing по всему сайту — 40-80px,
   не имели мобильного override. В сумме с уменьшенным section{padding}
   (см. base.css) на стыках секций без разделителя это давало на глаз
   "дыру" в 150-200px+ между последней строкой одной секции и заголовком
   следующей. Сокращаем пропорционально везде разом, не только в паре мест. */
@media (max-width: 720px) {
  .scroll-cases { margin-top: 28px; }

  .pain-title { margin-bottom: 28px; }
  .pain-closing { margin-top: 32px; }

  .nda-plate { margin-bottom: 28px; }
  .cases-footer { margin-top: 28px; }

  .categories-title { margin-bottom: 28px; }
  .categories-closing { margin-top: 28px; }
  .flow-wrap { margin-bottom: 32px; }

  .team-intro { margin-bottom: 28px; }

  .mascots-intro { margin-bottom: 24px; }
  .doom-cascade { margin-bottom: 28px; }
  .mascots-solution { margin-bottom: 28px; }
  .mascot-examples { margin-top: 28px; }
  .mascots-closing { margin-top: 28px; }

  .menu-lead { margin-bottom: 24px; }
  .constructor-row { margin-bottom: 24px; }
  .menu-text { margin-bottom: 24px; }
  .menu-case { margin-bottom: 24px; }

  .money-intro { margin-bottom: 24px; }
  .money-flow-wrap { margin-bottom: 28px; }
  .romi-formula { margin-bottom: 24px; }
  .claims-callout { margin-bottom: 24px; }
  .money-closing { margin-bottom: 24px; }

  .bonus-lead { margin-bottom: 24px; }
  .bonus-steps { margin-bottom: 24px; }
  .bonus-highlight { margin-bottom: 24px; }

  .fit-title { margin-bottom: 24px; }
  .fit-title.section-title--offset { margin-bottom: 28px; }

  .faq-title { margin-bottom: 24px; }

  .pricing-lead { margin-bottom: 24px; }
  .pricing-bonus-note { margin-bottom: 24px; }
  .tariff-categories { margin-bottom: 24px; }

  .quiz-title { margin-bottom: 24px; }
}