/* ═══════════════════════════════════════════════════════════════
   Общие стили лендинга kontora.app (/ и /pricing).
   Подключается ПОСЛЕ встроенных <style> страницы — перекрывает их.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Первый экран: единый отступ от шапки до заголовка ─────────
   Шапка фиксированная (~63px), отступ считается от верха страницы. */
.page-hero { padding-top: 176px; }

/* ─── Первый экран: заголовок H1 ─────────────────────────────── */
h1.hero-title {
  font-family: 'Manrope', sans-serif;
  /* min(40px, 9vw): на узких экранах длинное слово «инфраструктуры»
     при 40px шире экрана (горизонтальный скролл) */
  font-size: clamp(min(40px, 9vw), 5.2vw, 60px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
  color: var(--text);
  max-width: 820px; margin: 0 auto 24px;
}
/* Акцентная часть заголовка: <em>…</em> */
h1.hero-title em { font-style: normal; color: var(--accent); }

/* ─── Финальный призыв (тёмный блок внизу) — общий для / и /pricing ── */
.cta-section { padding: 100px 0; background: var(--dark2); color: white; }
.cta-center { max-width: 640px; margin: 0 auto; text-align: center; }
.cta-center h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: white; margin-bottom: 16px; line-height: 1.15; }
.cta-center > p { font-size: 17px; color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-center .cta-after { margin: 24px 0 0; font-size: 15px; color: rgba(255,255,255,.55); }
.cta-after a { color: #9db4ff; text-decoration: underline; text-underline-offset: 3px; }
.cta-after a:hover { color: #fff; }

@media (max-width: 768px) {
  /* На 375×667 кнопки главной должны оставаться видны вместе с баннером cookie */
  .page-hero { padding-top: 112px; }
  h1.hero-title { margin-bottom: 16px; }
  .cta-section { padding: 72px 0; }
}