/* =========================================================
   ГаражБатя — ELEVATE / SECTIONS (ритм · композиция · разделители)
   Грузится ПОСЛЕ tokens.css → побеждает при равной специфичности.
   ЗОНА: вертикальный ритм секций, надзаголовки/eyebrow, заголовки
   секций, лиды, динамические разделители, асимметрия «О сервисе»,
   FAQ-аккордеон, CTA-полоса, деликатный фоновый декор.
   НЕ трогает: внутренности карточек, формы/кнопки, hero-композицию
   (только их внешний ритм/обёртки). Не ломает data-reveal,
   .faq__item/<details>/.is-open, data-modal-open.
   8pt · 12-кол. сетка · контраст размеров · prefers-reduced-motion.
   ========================================================= */

/* =========================================================
   1. ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ — щедрый 8pt
   ========================================================= */
.section {
  position: relative;
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-10));
}

/* Чередование фонов: мягкая граница сверху/снизу у альт-секций
   вместо жёсткого блока — тонкие хайрлайны-свечения. */
.section--alt {
  background: var(--bg-2);
}
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-hi) 50%,
    transparent 100%
  );
}
.section--alt::before { top: 0; }
.section--alt::after  { bottom: 0; }

/* =========================================================
   2. ДИНАМИЧЕСКИЙ ГРАДИЕНТНЫЙ РАЗДЕЛИТЕЛЬ
   Между крупными смежными секциями — деликатный акцентный шов.
   Срабатывает только на стыке двух обычных .section (не --alt,
   у которых уже есть свои хайрлайны), чтобы не дублировать.
   ========================================================= */
.section + .section:not(.section--alt)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(72%, 760px);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 106, 26, .55) 28%,
    rgba(255, 59, 48, .42) 60%,
    transparent 100%
  );
  opacity: .7;
}

/* =========================================================
   3. ЗАГОЛОВОЧНЫЕ ГРУППЫ — иерархия eyebrow → title → lead
   Шаблонный .eyebrow приведён к стилю надзаголовка u-kicker:
   uppercase · accent · черта слева.
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
}
/* Иконки внутри eyebrow (shield/wrench и т.п.) — компактные, акцент */
.eyebrow .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Крупный заголовок секции */
.section__title {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--sp-4);
  max-width: 22ch;
  text-wrap: balance;
}

/* Лид-абзац под заголовком */
.section__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 60ch;
  margin: 0 0 var(--sp-6);
}

/* Воздух между шапкой секции и контентом-сеткой.
   Заголовочный блок отделяем щедрым отступом до сетки. */
.advantages-section .section__title,
.services-section .section__title,
.faq-section .section__title {
  margin-bottom: var(--sp-6);
}

/* =========================================================
   4. КРУПНЫЕ СЕТКИ — преимущества и услуги: больше воздуха
   (внутренности карточек НЕ трогаем — только gap-ритм)
   ========================================================= */
.advantages {
  gap: var(--sp-5);
}
.services-grid {
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .advantages { gap: var(--sp-5); }
  .services-grid { gap: var(--sp-6); }
}

/* =========================================================
   5. БЛОК «О СЕРВИСЕ» — выраженная асимметрия + премиум-кадрирование
   12-колоночная сетка: медиа крупнее текста, со смещением.
   ========================================================= */
.about-section { position: relative; overflow: hidden; }

.about-section .about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
}
/* Медиа — крупный блок (7 колонок), текст — узкий (5), со сдвигом */
.about-section .about__media {
  grid-column: 1 / span 7;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-2);
  background: linear-gradient(135deg, var(--graphite), var(--bg-2));
  aspect-ratio: 16 / 11;
}
/* Стекло-рамка + верхняя световая грань (u-glow-edge вручную) */
.about-section .about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-edge);
}
.about-section .about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-section .about__text {
  grid-column: 8 / span 5;
}
.about-section .about__text > p {
  color: var(--text-soft);
  line-height: var(--lh-body);
  max-width: 56ch;
  margin: 0 0 var(--sp-4);
}
.about-section .about__text a { color: var(--accent); }
.about-section .about__text .trust-badges { margin-top: var(--sp-5); }
/* На десктопе две плашки помещаются в один ряд — не даём им переноситься */
@media (min-width: 1024px) {
  .about-section .about__text .trust-badges { flex-wrap: nowrap; column-gap: var(--sp-3); }
  .about-section .about__text .trust-badge { white-space: nowrap; }
}

/* Декоративный световой акцент рядом с медиа (u-beam) */
.about-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -8%;
  left: -6%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 106, 26, .16) 0%,
    rgba(255, 106, 26, 0) 70%
  );
}
.about-section .container { position: relative; z-index: 1; }

/* Планшет: сохраняем асимметрию мягче */
@media (max-width: 1023.98px) and (min-width: 768px) {
  .about-section .about__media { grid-column: 1 / span 7; }
  .about-section .about__text  { grid-column: 8 / span 5; }
}
/* Мобайл: в стек, медиа сверху */
@media (max-width: 767.98px) {
  .about-section .about {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .about-section .about__media,
  .about-section .about__text { grid-column: 1 / -1; }
  .about-section .about__media { aspect-ratio: 16 / 10; }
}

/* =========================================================
   6. FAQ — премиум-аккордеон (details/summary + .is-open)
   Стеклянные строки, крупный кликабельный вопрос (font-head),
   акцентный индикатор +/× с поворотом, мягкое раскрытие,
   разделители-хайрлайны, hover accent.
   ========================================================= */
.faq {
  display: grid;
  gap: var(--sp-3);
  max-width: 880px;
}

.faq__item {
  position: relative;
  background: var(--glass-1);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.faq__item:hover { border-color: var(--glass-hi); }
.faq__item[open],
.faq__item.is-open {
  background: var(--glass-2);
  border-color: rgba(255, 106, 26, .32);
}

/* Крупный кликабельный вопрос */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-5);
  margin: 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__item:hover .faq__q { color: var(--accent); }

/* Акцентный индикатор +/× в стеклянном кружке */
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 106, 26, .16), rgba(255, 59, 48, .1));
  border: 1px solid rgba(255, 106, 26, .3);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after,
.faq__item.is-open .faq__q::after {
  transform: rotate(135deg);
  background: linear-gradient(135deg, rgba(255, 106, 26, .28), rgba(255, 59, 48, .2));
}

/* Ответ — с разделителем-хайрлайном сверху и мягким раскрытием */
.faq__a {
  position: relative;
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-soft);
  line-height: var(--lh-body);
}
.faq__a::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--sp-4);
  background: linear-gradient(
    90deg,
    rgba(255, 106, 26, .35) 0%,
    var(--glass-hi) 40%,
    transparent 100%
  );
}
/* Мягкое раскрытие содержимого (если details открыт через .is-open) */
.faq__item.is-open .faq__a {
  animation: faqReveal var(--dur) var(--ease) both;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   7. CTA-ПОЛОСА — кинематографичная стеклянная панель
   Фон cta-bg.jpg/градиент + световые лучи (u-beam),
   крупный заголовок (--fs-h1 / .text-gradient акцент), лид,
   контрастная CTA. Раскладка только — .btn не переопределяем.
   ========================================================= */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Поджатый внутренний отступ — раньше до соседних секций были большие провалы */
  padding-block: clamp(40px, 6vw, 76px);
}
/* Фон: градиент + опц. фото */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 90% at 80% 12%, rgba(255, 106, 26, .2) 0%, transparent 55%),
    radial-gradient(60% 80% at 8% 100%, rgba(255, 59, 48, .14) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 70%);
}
.cta--photo::before {
  background-image:
    linear-gradient(135deg, rgba(10, 12, 15, .84), rgba(10, 12, 15, .92)),
    url("/assets/img/cta-bg.webp");
  background-size: cover;
  background-position: center;
}
/* Асимметричные световые лучи (u-beam) — деликатно */
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -8%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 106, 26, .2) 0%,
    rgba(255, 106, 26, 0) 70%
  );
}

/* Крупная стеклянная панель по центру */
.cta__panel {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(var(--sp-6), 6vw, var(--sp-9));
  text-align: center;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
/* Верхняя световая грань панели (u-glow-edge вручную) */
.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-edge);
}

.cta__eyebrow {
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.cta__eyebrow::before { display: none; } /* по центру — без черты слева */

.cta__title {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
/* Акцентный градиент на эмфазе (.text-gradient/em/.accent) */
.cta__title .text-gradient,
.cta__title em,
.cta__title .accent {
  font-style: normal;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cta__text {
  max-width: 56ch;
  margin: 0 auto var(--sp-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* =========================================================
   8. ДЕЛИКАТНЫЙ ФОНОВЫЙ ДЕКОР — тонкие u-beam в 2-3 секциях
   Очень мягко, под контентом, не мешает кликам.
   ========================================================= */
.advantages-section { position: relative; overflow: hidden; }
.advantages-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -6%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, .1) 0%,
    rgba(59, 130, 246, 0) 70%
  );
}
.advantages-section .container { position: relative; z-index: 1; }

.faq-section { position: relative; overflow: hidden; }
.faq-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -12%;
  left: -6%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 106, 26, .12) 0%,
    rgba(255, 106, 26, 0) 70%
  );
}
.faq-section .container { position: relative; z-index: 1; }

/* =========================================================
   9. СТРАНИЦА УСЛУГИ — ритм лидов/шапки (обёрточный, без карточек)
   ========================================================= */
.service__intro .section__title { max-width: 24ch; }
.service__lead--sec { color: var(--text-soft); }

/* =========================================================
   10. ДОСТУПНОСТЬ — prefers-reduced-motion:
   статичные разделители, без анимаций раскрытия/индикаторов
   сверх необходимого.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .faq__item.is-open .faq__a { animation: none; }
  .faq__q::after,
  .faq__item[open] .faq__q::after,
  .faq__item.is-open .faq__q::after { transition: none; }
  .faq__item,
  .faq__item:hover { transition: none; }
}

/* =========================================================
   11. УСИЛЕННЫЕ СПИСКИ (about / otzyvy)
   «Как мы работаем» — нумерованные шаги-карточки;
   «Почему ГаражБатя» / «Почему нам можно доверять» —
   карточки с акцентной галочкой. Разметка не меняется
   (обычные ol/ul.about__list), всё на CSS-счётчиках и ::before.
   ========================================================= */

/* --- Причины доверия (страница отзывов): карточки с акцентной галочкой.
   На about эти блоки переделаны в .process-flow/.why-card (pages/info.css),
   поэтому здесь остаётся только контекст .reviews__trust. --- */
/* --- otzyvy: блок «Почему мне можно доверять» — сетка горизонтальных
   карточек с акцентным бейджем-иконкой, на всю ширину контейнера. --- */
.reviews__trust .trust-grid {
  list-style: none;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}
.reviews__trust .trust-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 20px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--glass-1, rgba(255, 255, 255, .04));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.reviews__trust .trust-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--glass-edge);
  pointer-events: none;
}
.reviews__trust .trust-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-brd));
  background: var(--glass-2, var(--glass-1));
  box-shadow: var(--shadow-2, var(--shadow-1)), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.reviews__trust .trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 5.5vw, 54px);
  height: clamp(46px, 5.5vw, 54px);
  color: #fff;
  background: var(--accent-grad);
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform var(--dur) var(--ease);
}
.reviews__trust .trust-card__icon .icon { width: 24px; height: 24px; }
.reviews__trust .trust-card:hover .trust-card__icon { transform: scale(1.06) rotate(-3deg); }
.reviews__trust .trust-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reviews__trust .trust-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--text);
}
.reviews__trust .trust-card__text {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(.92rem, 1.2vw, 1rem);
  line-height: 1.6;
}
.reviews__trust .trust-card__text a { color: var(--accent); }
@media (min-width: 640px) {
  .reviews__trust .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__trust .trust-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews__trust .trust-card,
  .reviews__trust .trust-card__icon { transition: none; }
  .reviews__trust .trust-card:hover { transform: none; }
  .reviews__trust .trust-card:hover .trust-card__icon { transform: none; }
}

/* =========================================================
   12. ПРАЙС — компактные внутренние секции
   Блоки калькулятора/инфо/условий обёрнуты в .section с
   большим дефолтным padding (56–120px) — между ними и
   плашками возникают огромные провалы. Поджимаем.
   ========================================================= */
/* Внутренние страницы складывают несколько .section внутри контейнера —
   дефолтный padding 56–120px даёт огромные провалы между блоками.
   Поджимаем на всех страницах, КРОМЕ главной (там .section — это
   полноэкранные секции, им большой отступ нужен). */
main:not(.home) .section {
  padding-block: clamp(26px, 4vw, 48px);
}
main:not(.home) .section:first-of-type {
  padding-top: 0;
}
/* у последующих секций верхний отступ убираем — между блоками остаётся
   один промежуток (нижний padding предыдущей), а не двойной.
   ~ (а не +): между секциями может стоять <script> (напр. JSON калькулятора). */
main:not(.home) .section ~ .section {
  padding-top: 0;
}

/* Без «крупного первого абзаца»: приводим все лиды к размеру обычного
   текста (body = 16px). Ширину и межстрочный интервал оставляем. */
.section__lead,
.service__lead,
.service__lead--sec,
.brands__lead,
.brands__lead--sec,
.brands__intro,
.brand__intro,
.brand__intro--sec,
.brand__services-lead,
.price__lead,
.price-info__lead,
.blog__lead,
.blog__intro,
.about__intro p,
.reviews__intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* =========================================================
   13. СТРАНИЦА УСЛУГИ — ДВУХКОЛОНОЧНЫЙ ГЕРОЙ
   Слева — текст интро, справа — липкая стеклянная карточка
   записи/цены (как на странице «Марки»). Заполняет правую
   область, усиливает конверсию. Мобайл — стек, карточка вниз.
   ========================================================= */
.service__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  align-items: start;
}
@media (min-width: 900px) {
  .service__hero { grid-template-columns: 1.6fr 1fr; }
}

/* --- Левая колонка: типографика интро --- */
.service__hero-main > .service__lead,
.service__hero-main > .service__price-lead {
  max-width: 60ch;
}
.service__hero-main > p { margin-bottom: var(--sp-4); }
.service__hero-main .service__actions { margin-top: var(--sp-5); }

/* --- Правая колонка: стеклянная карточка записи --- */
.service__hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 2.6vw, var(--sp-7));
  background: var(--glass-2, rgba(255, 255, 255, .05));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
/* Верхняя световая грань (u-glow-edge) */
.service__hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-edge);
}
@media (min-width: 900px) {
  .service__hero-card {
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}

/* Иконка услуги в акцентном бейдже */
.service__hero-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.service__hero-card-icon .icon { width: 26px; height: 26px; }

.service__hero-card-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* Цена — крупно, акцентом */
.service__hero-card-price {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

/* Буллеты доверия с акцентной галочкой */
.service__hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.service__hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-soft);
  line-height: 1.5;
}
.service__hero-points .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 3px;
}

.service__hero-card .btn { width: 100%; }
.service__hero-card .btn .icon { margin-right: 6px; }

/* Доступность — без липкости сверх необходимого */
@media (prefers-reduced-motion: reduce) {
  .service__hero-card { position: relative; top: auto; }
}