/* ──────────────────────────────────────────────────────────────────
   Первый экран страниц услуг — по образцу главной.

   На главной первый экран отвечает сразу на два вопроса: «что это» слева
   и «как начать» справа, в форме. На лендингах услуг справа не было
   ничего: текст, список тезисов и четыре плашки подряд — человек
   докручивал до формы через весь экран.

   Разметка страниц не ломается: скрипт `W2_pervyy_ekran.php` берёт те же
   узлы (хлебные крошки, плашку, заголовок, лид, тезисы, кнопки, цифры)
   и раскладывает их в две колонки. Тексты не трогаются.
   ────────────────────────────────────────────────────────────────── */

.hero2 {
  position: relative;
  overflow: hidden;
  padding: 10px 0 56px;
  background:
    radial-gradient(900px 440px at 6% -20%, rgba(22,163,74,.10), transparent 62%),
    radial-gradient(760px 400px at 96% -10%, rgba(109,75,216,.07), transparent 62%),
    linear-gradient(180deg, #fafbfc 0%, #fff 78%);
}

/* Сетка даёт первому экрану плоскость, на которой стоит карточка формы.
   Гаснет к краям — иначе поле читается как таблица. */
.hero2::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 460px; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(11,11,18,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,11,18,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 72% at 28% 24%, #000, transparent 76%);
          mask-image: radial-gradient(70% 72% at 28% 24%, #000, transparent 76%);
}
.hero2 > .wrap { position: relative; z-index: 1; }

.hero2 .hgrid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: start;
  margin-top: 18px;
}

/* ── левая колонка ──
   Цвета задаём явно, а не наследуем: на Контент-Фабрике страница несёт
   собственный набор стилей от презентации, где текст первого экрана был
   светлым, — и заголовок на белом фоне становился почти невидимым. */
.hero2 .hleft h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.04; letter-spacing: -.028em; font-weight: 800;
  max-width: 17ch; color: var(--ink);
}
.hero2 .hleft .lead, .hero2 .tez li { color: var(--ink2); }
.hero2 .crumbs, .hero2 .crumbs a { color: var(--muted); }
.hero2 .hleft h1 em { font-style: normal; color: var(--green); }
.hero2 .hleft .lead { font-size: 17.5px; line-height: 1.6; max-width: 54ch; margin-top: 14px; }

/* Плашка над заголовком: тип услуги и цена одной строкой. */
.hero2 .lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 12px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase;
  color: var(--green-d); background: var(--green-bg);
  border: 1px solid #cdeed7; border-radius: 999px;
  padding: 7px 14px 7px 11px; margin-bottom: 16px;
}
.hero2 .lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.hero2 .tez { margin-top: 20px; max-width: 54ch; }
.hero2 .hcta { margin-top: 26px; }
.hero2 .hcta .btn {
  background: linear-gradient(135deg, #16a34a, #0f7a37);
  border: 0; color: #fff; border-radius: 12px;
  box-shadow: 0 10px 26px -12px rgba(22,163,74,.9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero2 .hcta .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(22,163,74,1); }
.hero2 .hcta .btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.hero2 .hcta .btn.ghost:hover { background: var(--soft); transform: translateY(-1px); }

/* ── правая колонка: форма ──
   Имена классов те же, что на главной (`hero-form-card`, `form-input`,
   `btn-form`): их уже знает x10-forms.php и подключает отправку.
   Своя разметка потребовала бы второго обработчика. */
.hero2 .hero-form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 70px -30px rgba(11,11,18,.35), 0 2px 6px rgba(11,11,18,.05);
}
/* Цвета в карточке формы задаём явно, все до одного. Наследование здесь
   опасно: на Контент-Фабрике первый экран нёс собственные стили от
   презентации со светлым текстом, и заголовок над формой оказался
   белым на белом. Правило общее — чинит и остальные страницы. */
.hero2 .form-title { font-size: 14px; color: var(--ink2); }
.hero2 .form-sub {
  margin: 4px 0 18px; font-family: 'Montserrat', sans-serif;
  font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--ink);
}
.hero2 .form-sub strong { color: var(--green); font-weight: 600; }
.hero2 .hero-form-card { color: var(--ink); }
.hero2 .x10-consent { color: var(--muted); }
.hero2 .x10-consent a { color: var(--green-d); }
.hero2 .form-promise { color: var(--muted); }
.hero2 .form-input {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 14px; font: 15px/1.3 'Onest', system-ui, sans-serif;
  margin-bottom: 10px; background: #fff; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hero2 .form-input::placeholder { color: var(--muted); }
.hero2 .form-input:focus {
  outline: none; border-color: #9fdcb6;
  box-shadow: 0 0 0 3px rgba(22,163,74,.14);
}
.hero2 .x10-consent {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 6px 0 14px;
}
.hero2 .x10-consent input { margin-top: 2px; flex: none; }
.hero2 .x10-consent a { color: var(--green-d); }
.hero2 .btn-form {
  width: 100%; border: 0; cursor: pointer; border-radius: 12px;
  background: linear-gradient(135deg, #16a34a, #0f7a37); color: #fff;
  font: 600 15px/1 'Onest', system-ui, sans-serif; padding: 15px 18px;
  box-shadow: 0 10px 26px -12px rgba(22,163,74,.9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero2 .btn-form:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(22,163,74,1); }
.hero2 .form-promise { margin-top: 11px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ── цифры под двумя колонками ── */
.hero2 .g4 { margin-top: 34px; }
.hero2 .g4 .kpi {
  padding: 18px 20px; border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero2 .g4 .kpi:hover { transform: translateY(-3px); border-color: #d6dae4; box-shadow: 0 16px 36px -20px rgba(11,11,18,.35); }
.hero2 .g4 .kpi .v { font-family: 'Montserrat', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.hero2 .g4 .kpi .k { margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

@media (max-width: 980px) {
  .hero2 .hgrid { grid-template-columns: 1fr; gap: 30px; }
  .hero2 .hleft h1 { max-width: none; }
  .hero2 .g4 { grid-template-columns: repeat(2, 1fr); }
  .hero2::before { display: none; }
}
@media (max-width: 560px) {
  .hero2 .g4 { grid-template-columns: 1fr; }
  .hero2 { padding-bottom: 36px; }
}