/* ============================================================
   home.css — Главная (фрейм JU1mj). Подключается только на home.html.
   Размеры/цвета сняты из Pencil.
   ============================================================ */

/* Общий заголовок секции (40/700, центр, max 700) */
.section-h2 { margin: 0; max-width: 700px; text-align: center; font-size: 40px; font-weight: 700; color: var(--text-primary); }
.section-sub { margin: 0; max-width: 700px; text-align: center; font-size: 17px; color: var(--text-secondary); }

/* ===== Hero (градиент) ===== */
.hero { background: linear-gradient(125deg, #2563EB 0%, #1E3A8A 100%); padding: 80px var(--pad-x); display: flex; justify-content: center; }
.hero__inner { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.hero__h1 { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.08; color: #fff; }
.hero__sub { margin: 0; font-size: 22px; line-height: 1.4; color: rgba(255,255,255,.8); }
.hero__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; color: #fff; }
.hero-badge .icon { width: 16px; height: 16px; }
.hero__tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-tab { border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; }
.hero-tab--active { background: #fff; color: var(--brand); border: none; }
.hero-tab--outline { background: transparent; color: #fff; border: 1.5px solid #fff; }

/* ===== Search Band ===== */
.home-search { background: var(--surface-muted); padding: 72px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* ===== Services ===== */
.home-services { background: var(--surface); padding: 72px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.svc-row { width: 100%; display: flex; gap: 24px; }
.svc-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.svc-card__sq { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 6px; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.svc-card__title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.svc-card__desc { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.svc-card__link { font-size: 14px; font-weight: 600; color: var(--brand); }

/* Stats Band */
.stats-band { width: 100%; background: var(--surface-muted); border-radius: 16px; padding: 40px; display: flex; gap: 24px; }
.stat-card { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stat-card__label { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--text-secondary); }
.stat-card__num { font-size: 44px; font-weight: 800; color: var(--brand); }
.stat-card__sub { font-size: 14px; color: var(--text-secondary); }

/* ===== Additional Services ===== */
.home-add { background: var(--surface); padding: 72px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.add-row { width: 100%; display: flex; gap: 20px; }
.add-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.add-card__tag { align-self: flex-start; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.add-card__desc { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.btn-more { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.btn-more .icon { width: 16px; height: 16px; }

/* ===== CTA Band (градиент) ===== */
.cta-band { background: linear-gradient(125deg, #2563EB 0%, #1E3A8A 100%); padding: 80px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cta-band__h2 { margin: 0; max-width: 700px; font-size: 44px; font-weight: 800; color: #fff; }
.cta-band__text { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.8); }
.cta-band__btn { background: #fff; color: var(--brand); border: none; border-radius: 10px; padding: 14px 32px; font-size: 16px; font-weight: 700; }
.cta-band__email { max-width: 400px; font-size: 15px; color: rgba(255,255,255,.8); }

/* ===== FAQ ===== */
.home-faq { background: var(--surface-muted); padding: 72px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.faq-list { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 10px; }

/* ===== Мобайл — пиксель-калибровка по фрейму «Главная (mobile)» zg8im ===== */
@media (max-width: 480px) {
  /* Hero (padding [40,16], gap 18, H1 30/1.15) */
  .hero { padding: 40px var(--pad-x); }
  .hero__inner { gap: 18px; }
  .hero__h1 { font-size: 30px; line-height: 1.15; }
  .hero__sub { font-size: 16px; line-height: 1.4; }
  .hero__badges { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-badge { padding: 8px 14px; }
  .hero__tabs { flex-direction: column; gap: 10px; }
  .hero-tab { width: 100%; text-align: center; padding: 15px; border-radius: 11px; font-size: 16px; }

  /* Секции (padding [36,16]) */
  .home-search, .home-services, .home-add, .home-faq { padding: 36px var(--pad-x); gap: 16px; }
  .section-h2 { font-size: 26px; }
  .section-sub { font-size: 15px; }

  /* Услуги — карточки в столбец (padding 20, sq 48, title 17) */
  .svc-row, .add-row { flex-direction: column; gap: 16px; }
  .svc-card { padding: 20px; gap: 10px; }
  .svc-card__sq { width: 48px; height: 48px; border-radius: 12px; }
  .svc-card__title { font-size: 17px; }

  /* Статистика — в столбец, без фоновой плашки */
  .stats-band { flex-direction: column; gap: 12px; padding: 8px 0 0; background: transparent; border-radius: 0; }
  .stat-card__num { font-size: 36px; }

  /* CTA (padding [40,16], H 26/800) */
  .cta-band { padding: 40px var(--pad-x); gap: 16px; }
  .cta-band__h2 { font-size: 26px; }
  .cta-band__text { font-size: 15px; }
  .cta-band__btn { width: 100%; padding: 15px; border-radius: 11px; }

  /* FAQ */
  .faq-item { padding: 18px 20px; }
  .faq-item__q { font-size: 15px; }
}