/* Ваш HR - компоненты. Перенесено из design/styleguide.html, чтобы вёрстка
   совпадала с утверждённым макетом. */

/* Базовый класс кнопки: без него .btn-primary давал только заливку,
   а .btn без модификатора выглядел обычной ссылкой. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1;
  text-decoration: none; cursor: pointer;
  background: #fff; color: var(--ink-900); border-color: var(--line);
  transition: background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; border-color: #C9D1D8; }

.btn-primary { background: var(--accent-500); color:#fff; border-color: var(--accent-500); }
.btn-primary:hover { background: var(--accent-600); }
.btn-primary:active { background: var(--accent-700); }
.btn-secondary { background:#fff; color: var(--ink-900); border-color:#C9D1D8; }
.btn-secondary:hover { border-color: var(--ink-500); }
.btn-ghost { background:transparent; color: var(--brand-red-ink); padding:0; height:auto; }
.btn-ghost:hover { text-decoration: underline; }
.btn:focus-visible { outline:none; box-shadow: var(--focus); }
.btn[disabled] { background:#F0F3F5; color: var(--ink-300); cursor:not-allowed; }
/* Базовый класс карточки. Как и у кнопки, в стайлгайде были только модификаторы,
   поэтому карточки без --accent рендерились без рамки и отступов. */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card:hover { border-color:#C9D1D8; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--ink-700); font-size: var(--fs-sm); line-height:1.55; }
.card .arrow { display:inline-block; margin-top: var(--sp-4); color: var(--brand-red-ink);
                 font-weight: var(--fw-medium); font-size: var(--fs-sm); text-decoration:none; }
.metric { padding: var(--sp-5); border-right: var(--border); }
.metric:last-child { border-right:none; }
.metric .v { font-size:40px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height:1; }
.metric .l { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--sp-2); }
label { display:block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
input[type=text], input[type=tel], input[type=url], input[type=email], input[type=number], textarea, select {
    width:100%; height:52px; border:1px solid var(--line); border-radius: var(--r-md);
    padding: 0 16px; font-family: var(--font); font-size: var(--fs-base); color: var(--ink-900); background:#fff; }
input::placeholder { color: var(--ink-500); }
input:focus, textarea:focus { outline:none; border-color: var(--accent-500); box-shadow: var(--focus); }
.field.error input { border-color: var(--error); }
.err { color: var(--error); font-size: var(--fs-xs); margin-top: 6px; }
.check { display:flex; gap:10px; align-items:flex-start; font-size: var(--fs-xs); color: var(--ink-500); }
.check input { width:18px; height:18px; margin-top:2px; accent-color: var(--accent-500); }
table { width:100%; border-collapse:collapse; }
/* широкие таблицы прокручиваются внутри себя, страница по горизонтали не едет */
.table-scroll { overflow-x:auto; }
.table-scroll table { min-width: 560px; }
th { text-align:left; font-size: var(--fs-xs); text-transform:uppercase; letter-spacing: var(--ls-caps);
       color: var(--ink-500); font-weight: var(--fw-semibold); padding: 0 16px 10px 0;
       border-bottom:2px solid var(--line); }
td { padding: 12px 16px 12px 0; border-bottom:1px solid var(--line-soft); }
tr.hl td { background: var(--accent-50); }
.acc { border-bottom:1px solid var(--line); padding: var(--sp-4) 0; }
.acc q { display:block; font-size:18px; font-weight: var(--fw-semibold); quotes:none; }
.acc p { color: var(--ink-700); margin-top: var(--sp-2); }
.header { height:76px; border-bottom: var(--border); display:flex; align-items:center;
            justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; font-weight: var(--fw-bold); font-size:20px; }
.logo .dot { width:26px; height:26px; border-radius:50%; background: var(--brand-red); }
.nav { display:flex; gap: var(--sp-5); font-size:15px; font-weight: var(--fw-medium); }
.nav a { color: var(--ink-900); text-decoration:none; }
.nav a:hover { color: var(--brand-red-ink); }
.phone { font-size:17px; font-weight: var(--fw-semibold); }
.swatches { display:grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-3); }
.sw { border: var(--border); border-radius: var(--r-md); overflow:hidden; }
.sw .c { height:64px; }
.sw .n { padding:8px 10px; font-size:12px; }
.sw .n b { display:block; }
.footer { background: var(--bg-dark); color:#fff; padding: var(--sp-8) 0; }
.footer a { color:#9AA6B2; text-decoration:none; font-size: var(--fs-sm); display:block; margin-bottom:6px; }

/* Плашки и теги: были потеряны при переносе из styleguide */
.tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  background: #fff;
  text-decoration: none;
}
a.tag:hover { border-color: var(--line-strong, #C9D1D8); text-decoration: none; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }

/* Списки без маркеров внутри секций */
.hero__badges { list-style: none; padding: 0; }

/* ==========================================================================
   Поиск и фильтр каталога
   ========================================================================== */

.catalog-filter { margin-top: var(--sp-6); }

.catalog-filter__search { position: relative; max-width: 520px; }
.catalog-filter__search input[type=search] {
  width: 100%; height: 52px; padding: 0 44px 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font); font-size: var(--fs-base); color: var(--ink-900); background: #fff;
  -webkit-appearance: none; appearance: none;
}
.catalog-filter__search input::placeholder { color: var(--ink-500); }
.catalog-filter__search input:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--focus); }
/* системный крестик убираем: у нас своя кнопка с понятной областью нажатия */
.catalog-filter__search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

.catalog-filter__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-500);
}
.catalog-filter__clear:hover { color: var(--ink-900); }

.catalog-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.catalog-filter__chip { cursor: pointer; font-family: var(--font); }
.catalog-filter__chip.is-active {
  background: var(--ink-900); border-color: var(--ink-900); color: #fff;
}
.catalog-filter__chip.is-active .catalog-filter__num { color: rgba(255, 255, 255, .6); }
.catalog-filter__num { margin-left: 6px; font-size: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; }

.catalog-filter__status { margin-top: var(--sp-3); }

/* таблица инструкций: колонки категории и скачивания уже основной */
.di-table td:nth-child(2) { width: 20%; }
.di-table td:nth-child(3) { width: 20%; }

@media (max-width: 640px) {
  .catalog-filter__chips { gap: 6px; }
  .catalog-filter__chip { font-size: 13px; padding: 5px 11px; }
}

/* ==========================================================================
   Правки по итогам разбора интерфейса
   ========================================================================== */

/* Карточки в сетке были разной высоты, и ссылка «Подробнее» вставала
   там, где закончился текст. Теперь она всегда прижата к низу. */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card .arrow { margin-top: auto; padding-top: var(--sp-4); }

/* Заголовок секции: лид стоял вплотную к h2, блок читался одной массой */
.section h2 + .lead,
.section h1 + .lead { margin-top: var(--sp-3); }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--sp-3); }

/* Метрики на сером фоне почти сливались: рамка светлее фона секции */
.section--muted .metrics { background: #fff; }

/* Списки в текстовых блоках шли без маркеров - выглядели как обрывки строк.
   Маркер-круг перекликается с присосками на знаке. */
.prof-list { list-style: none; margin-left: 0; padding-left: 0; }
.prof-list li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.prof-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-red);
}
.prof-list li::marker { content: none; }

/* Нумерованные списки в инструкциях: номер набран акцентом */
.entry ol { counter-reset: wahhr-li; list-style: none; padding-left: 0; margin-left: 0; }
.entry ol > li { counter-increment: wahhr-li; position: relative; padding-left: 34px; margin-bottom: 10px; }
.entry ol > li::before {
  content: counter(wahhr-li);
  position: absolute; left: 0; top: 1px;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--accent-50);
  color: var(--brand-red-ink); font-size: 12px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Сравнение: розовым выделена колонка «своими силами» - это издержки,
   которых можно избежать; «с агентством» на обычном фоне, но жирным
   и с красным заголовком (решение заказчика 30.09.2026) */
.compare td:nth-child(2) { background: var(--accent-50); }
.compare th:last-child { color: var(--brand-red-ink); }

/* Секция сразу перед подвалом упиралась в него без воздуха */
main > section:last-child { padding-bottom: var(--sp-9); }

/* ==========================================================================
   Строка призыва к действию
   ========================================================================== */

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.cta-row__text { max-width: 46em; color: var(--ink-700); font-size: var(--fs-sm); margin: 0; }
.cta-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex-shrink: 0; }

@media (max-width: 640px) {
  .cta-row__actions { width: 100%; }
  .cta-row__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Фирменная графика
   ========================================================================== */

/* ==========================================================================
   Фон секций
   ========================================================================== */

/* Волновая текстура снята по решению заказчика: на фоне блоков она спорила
   с контентом. Приглушённые секции держатся на цвете и границах - как
   и весь остальной визуальный язык сайта. */
.section--muted {
  background-color: var(--bg-muted);
}


/* ==========================================================================
   Диаграмма зарплат
   ========================================================================== */

.chart { margin-top: var(--sp-6); }

.chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.chart__key { display: inline-flex; align-items: center; gap: 8px; }
.chart__bar-sample { width: 26px; height: 8px; border-radius: 4px; background: var(--accent-100); }
.chart__dot-sample { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-500); }

.chart__rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.chart__row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 96px;
  align-items: center; gap: var(--sp-4);
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.chart__row::before { content: none; }

.chart__name { font-size: var(--fs-sm); color: var(--ink-900); }
.chart__name:hover { color: var(--brand-red-ink); }

.chart__track { position: relative; height: 22px; }
/* линия шкалы: показывает, что полосы отложены от нуля */
.chart__track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line-soft);
}
.chart__bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 4px; background: var(--accent-100);
}
.chart__dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-500); border: 2px solid #fff;
}

.chart__value {
  text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart__note { margin-top: var(--sp-4); }

/* полосы вырастают при появлении блока */
.js-reveal [data-reveal] .chart__bar,
.js-reveal [data-reveal] .chart__dot { opacity: 0; }
.js-reveal [data-reveal].is-visible .chart__bar,
.js-reveal [data-reveal].is-visible .chart__dot {
  opacity: 1; transition: opacity .5s ease .15s;
}

@media (max-width: 700px) {
  /* строки задаём явно: при автоматическом размещении полоса на всю ширину
     выталкивала сумму на третью строку, и она отрывалась от названия */
  .chart__row { grid-template-columns: 1fr auto; gap: 4px var(--sp-3); padding: 12px 0; }
  .chart__name  { grid-column: 1; grid-row: 1; }
  .chart__value { grid-column: 2; grid-row: 1; }
  .chart__track { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] .chart__bar,
  .js-reveal [data-reveal] .chart__dot { opacity: 1; transition: none; }
}

/* ==========================================================================
   Фотографии
   ========================================================================== */

.photo {
  margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: var(--border);
  background: var(--bg-muted);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* На всю ширину секции - для разделителя между смысловыми блоками */
.photo--wide { border-radius: 0; border-left: 0; border-right: 0; }

/* Фото рядом с текстом в двухколоночном блоке */
.grid > .photo { align-self: stretch; }

/* ==========================================================================
   Редизайн по макету дизайнера («Главная - 1441», сентябрь 2026)
   ========================================================================== */

/* Иконки Lucide: размер задаёт место вставки, цвет - currentColor */
.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Значок-иконка: белая иконка в красном круге 32px, вокруг кольцо 48px.
   Два круга одним фоном - без лишней обёртки в разметке. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-500) 15.5px, var(--accent-ring) 16px);
  color: #fff;
}
.icon-badge .icon { width: 18px; height: 18px; }

/* Карточка с иконкой: значок слева, текст справа (у дизайнера отступ 16) */
.grid > .card--icon { flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding: 28px 24px; }
.card__body { display: flex; flex-direction: column; min-width: 0; flex: 1; align-self: stretch; }
.card--icon h3 { margin-top: 8px; }
.grid > .card--icon .arrow { margin-top: auto; }

/* Наведение: красная рамка вместо серой - у дизайнера на сферах и кейсах */
.card, .segment-card { transition: border-color var(--transition); }
.card:hover, a.card:hover, .segment-card:hover,
a.tag:hover { border-color: var(--accent-500); }

/* Чип с иконкой: первый экран главной и услуг */
.tag:has(.icon) { display: inline-flex; align-items: center; gap: 6px; }
.tag .icon { width: 16px; height: 16px; color: var(--accent-500); }

/* Форма на первом экране не растворяется на белом фоне */
.hero .lead-form:not(.lead-form--compact) {
  border-color: var(--form-line);
  box-shadow: var(--shadow-form);
}

/* ---------- Баннер с формой ----------
   Розовая подложка в белой рамке с тенью, справа внизу точечный узор.
   Узор у дизайнера - SVG на 556 КБ, здесь он собран из градиентов:
   сетка точек с шагом 18px гаснет от правого нижнего угла. */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-9) 96px;
  background: var(--banner-bg);
  border: 5px solid #fff; border-radius: 20px;
  box-shadow: var(--shadow-banner);
}
.banner--muted { background: var(--banner-bg-muted); }
.banner::after {
  content: ''; position: absolute; z-index: -1; right: 0; bottom: 0;
  width: 62%; height: 100%; pointer-events: none;
  background-image: radial-gradient(circle, rgba(217, 16, 32, .22) 1.6px, transparent 2.3px);
  background-size: 18px 18px; background-position: right 6px bottom 6px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 75%);
}
.banner--muted::after { background-image: radial-gradient(circle, rgba(217, 16, 32, .16) 1.6px, transparent 2.3px); }

.banner__text > .lead { margin-top: var(--sp-4); }
.banner__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.banner__list li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-700); }
.banner__list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red);
}
.banner__contacts { margin: var(--sp-5) 0 0; display: grid; gap: 10px; }
.banner__contacts div { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-4); align-items: baseline; }
.banner__contacts dt { color: var(--ink-500); font-size: var(--fs-sm); }
.banner__contacts dd { margin: 0; font-weight: var(--fw-semibold); }
.banner__contacts a { color: var(--ink-900); }
.banner__art { margin: var(--sp-6) 0 0; }
.banner__art img { display: block; width: 100%; max-width: 380px; height: auto; }

.banner .lead-form {
  border-color: var(--form-line); padding: 28px;
  box-shadow: var(--shadow-form);
}

@media (max-width: 1100px) {
  .banner { padding: var(--sp-8) var(--sp-7); grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .banner { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); gap: var(--sp-6); border-width: 3px; }
  .banner::after { width: 100%; height: 55%; }
  .banner__art img { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .banner { padding: var(--sp-5) var(--sp-4); }
  .banner .lead-form { padding: var(--sp-4); }
  .banner__contacts div { grid-template-columns: 1fr; gap: 2px; }
}

/* Этапы: линейная иконка над заголовком. При наведении линия этапа
   и иконка становятся красными - у дизайнера так выделен шаг 02. */
/* Линия этапа - псевдоэлемент, а не border: так её можно прорисовать
   слева направо при появлении блока */
.steps .step { position: relative; border-top: 0; }
.steps .step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ink-900); transform-origin: left;
  transition: background-color var(--transition);
}
.steps .step:hover::before { background: var(--accent-500); }
.js-reveal [data-reveal] .steps .step::before { transform: scaleX(0); }
.js-reveal [data-reveal].is-visible .steps .step::before {
  transform: scaleX(1);
  transition: transform .8s var(--ease-out) var(--d, 0ms), background-color var(--transition);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] .steps .step::before { transform: none; transition: none; }
}
.step__icon { display: block; width: 36px; height: 36px; margin-top: var(--sp-3); color: var(--ink-700); stroke-width: 1.5; transition: color var(--transition); }
.step:hover .step__icon { color: var(--accent-500); }
/* селектор с родителем: в sections.css срок перекрашен в серый позже по порядку */
.steps .step__term { color: var(--brand-red-ink); }

/* Пример расчёта: главная цифра блока, выделена рамкой и тенью */
.card.calc-example {
  border: 2px solid var(--accent-500);
  background: linear-gradient(135deg, var(--accent-50) 0%, #fff 55%);
  box-shadow: var(--shadow-card);
}
.calc-example__rows { margin: var(--sp-3) 0 0; }
.calc-example__rows div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 7px 0; font-size: var(--fs-sm);
}
.calc-example__rows dt { color: var(--ink-500); }
.calc-example__rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.calc-example__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--accent-100);
}
.calc-example__total span { font-weight: var(--fw-semibold); }
.calc-example__total b { font-size: 28px; color: var(--brand-red-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Сравнение: 3D-весы из макета справа от таблицы. У картинки белая
   подложка - на сером фоне секции её убирает режим наложения. */
.compare-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); align-items: end; }
.compare-art { margin: 0; }
.compare-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@media (max-width: 1000px) {
  .compare-layout { grid-template-columns: 1fr; }
  .compare-art { max-width: 260px; justify-self: center; }
}

/* Первый экран услуги: иллюстрация между текстом и формой, как в макете.
   Картинка декоративная (alt пустой) и уходит там, где три колонки не живут. */
/* двойной класс: базовая .hero__grid из sections.css подключается позже */
.hero__grid.hero__grid--art { grid-template-columns: minmax(0, 1fr) 260px 380px; gap: var(--sp-6); align-items: center; }
.hero__art { margin: 0; }
.hero__art img { display: block; width: 100%; height: auto; }
@media (max-width: 1150px) {
  .hero__grid.hero__grid--art { grid-template-columns: minmax(0, 1fr) 380px; }
  .hero__art { display: none; }
}
@media (max-width: 900px) {
  .hero__grid.hero__grid--art { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Правки заказчика 30.09.2026
   ========================================================================== */

/* Вторичная кнопка с акцентным текстом: «Рассчитать стоимость» раньше
   была .btn-ghost без отступов, но с рамкой - текст упирался в края */
.btn--accent-text { color: var(--brand-red-ink); }
.btn--accent-text:hover { border-color: var(--accent-500); }

/* Метрики: по центру, над цифрой значок-иконка */
.metrics .metric { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-4); }
.metrics .metric .icon-badge { margin-bottom: var(--sp-4); }

/* Карточка услуги кликабельна целиком: ссылка «Подробнее» растянута
   на всю карточку псевдоэлементом. Ссылка одна - для скринридера
   и клавиатуры ничего не меняется. */
.card--link { position: relative; cursor: pointer; }
.card--link .arrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover .arrow { text-decoration: underline; }
.card--link:focus-within { box-shadow: var(--focus); }

/* Калькулятор: строки результата отделены от поля, как в примере расчёта.
   Раньше «Годовой доход» стоял вплотную под полем ввода. */
.calc__rows { margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }
.field + .field, .field + .check { margin-top: var(--sp-3); }
.lead-form .check { margin-top: var(--sp-3); }

/* Сравнение: текст в розовой колонке не прилипает к её краю */
.compare th:nth-child(2), .compare td:nth-child(2),
.compare th:last-child, .compare td:last-child { padding-left: var(--sp-4); padding-right: var(--sp-4); }

/* Кейсы: результат - заголовок карточки, срок - плашка внизу.
   Раньше клиент был набран капсом, а карточка читалась сплошным текстом. */
.grid > .case-card { gap: var(--sp-3); }
.case-card__client {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--ink-500); font-size: var(--fs-sm);
}
.case-card__client .icon { width: 16px; height: 16px; color: var(--accent-500); }
.card p.case-card__result {
  margin: 0; color: var(--ink-900);
  font-size: 20px; line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: -.01em;
}
.card p.case-card__task { margin: 0; color: var(--ink-700); }
.case-card__term {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: auto 0 0; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-50); color: var(--brand-red-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.case-card__term .icon { width: 15px; height: 15px; }

/* Отзывы: крупная цитатная кавычка в углу, инициалы вместо фото */
.review { position: relative; padding-top: var(--sp-8); }
.review::before {
  content: '“'; position: absolute; top: 6px; left: var(--sp-5);
  font-family: Georgia, 'Times New Roman', serif; font-size: 72px; line-height: 1;
  color: var(--accent-500);
}
.review__text { margin: 0; color: var(--ink-900); font-size: var(--fs-base); line-height: 1.6; }
.review__text p { color: inherit; font-size: inherit; margin: 0; }
.review__author {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--line-soft);
}
.grid > .review .review__author { margin-top: auto; }
.review__text { margin-bottom: var(--sp-5); }
.review__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-50); color: var(--brand-red-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.review__author b { display: block; font-size: var(--fs-sm); }
.review__position { display: block; color: var(--ink-500); font-size: var(--fs-xs); }

/* Вопросы: у последнего пункта своя черта сливалась с чертой строки
   призыва - получалась лишняя пустая полоса */
.faq__item:has(+ .cta-row), .faq__item:last-of-type { border-bottom: 0; }

/* Мессенджеры в баннере контактов */
.banner__messengers { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); color: var(--ink-500); font-size: var(--fs-sm); }
.banner__messengers .messengers__link { width: 36px; height: 36px; }
.banner__messengers .messengers__link--telegram .icon { width: 36px; height: 36px; }
.banner__messengers .messengers__link--max .icon { width: 30px; height: 30px; }

/* Заголовок формы без пояснения стоял вплотную к подписи первого поля */
.lead-form > h3 { margin-bottom: var(--sp-2); }
.lead-form > h3 + .field { margin-top: var(--sp-4); }

/* Кнопка под калькулятором вместо второй формы */
.calc__cta { width: 100%; margin-top: var(--sp-4); }

/* ==========================================================================
   Анимация элементов при наведении (30.09.2026)
   ========================================================================== */

/* Карточки приподнимаются и получают мягкую тень - понятно, что с ними
   можно взаимодействовать. Красная рамка при наведении осталась. */
.card, .segment-card {
  transition: border-color var(--transition), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card:hover, .segment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 24, 29, .08);
}
/* выделенная карточка расчёта уже с тенью - только чуть сильнее */
.card.calc-example:hover { box-shadow: 0 20px 40px rgba(20, 24, 29, .12); }

/* Значок в карточке оживает при наведении на карточку */
.icon-badge { transition: transform .35s var(--ease-out); }
.card:hover .icon-badge { transform: scale(1.08) rotate(-6deg); }

/* Кнопки: основная приподнимается с цветной тенью */
.btn { transition: background .15s, border-color .15s, color .15s, transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(217, 16, 32, .25); }
.btn-primary:active { transform: none; box-shadow: none; }

/* «Подробнее →» - стрелка уезжает вправо */
.arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.card:hover .arrow, .arrow:hover { transform: translateX(4px); }

/* Мессенджеры и звонок в шапке */
.phone__icon { transition: transform .3s var(--ease-out); }
.phone:hover .phone__icon { transform: rotate(-12deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .segment-card:hover, .btn-primary:hover,
  .card:hover .icon-badge, .card:hover .arrow, .arrow:hover, .phone:hover .phone__icon { transform: none; }
}
/* В карточке-ссылке растянутый ::after живёт внутри .arrow: transform
   на .arrow сделал бы её точкой отсчёта, и на время наведения кликабельной
   осталась бы только сама стрелка. Поэтому здесь сдвиг отступом. */
.card--link .arrow, .card--link:hover .arrow { transform: none; transition: margin-left .25s var(--ease-out); }
.card--link:hover .arrow { margin-left: 4px; }

/* Иллюстрация гарантии сгенерирована на белом фоне - на подложке баннера
   его убирает режим наложения (прозрачным PNG вроде лупы он не мешает) */
.banner__art img { mix-blend-mode: multiply; }