/* ============================================================
   MOBILE STYLES — base 440px, оптимизация 375px.
   Подключается через media="(max-width: 768px)" в index.html.
   Размеры/координаты — из Figma frame Mobile (id 323:3432).
   ============================================================ */

/* ---------- Скрыть desktop-хедер, показать mobile-top ---------- */
.block-0-top { display: none; }
.mobile-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center;
  padding: 16px 24px;
  height: 56px;
  background: var(--color-black);
  color: var(--color-white);
  width: 100%;
}
.mobile-top__logo { display: inline-flex; flex: 0 0 auto; }
.mobile-top__logo img { width: 124px; height: 24px; }
.mobile-top__toggle {
  margin-left: auto;
  color: var(--color-white);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-top__panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-black);
  display: none;
  flex-direction: column;
  padding: 12px 24px 20px;
  border-top: 1px solid rgba(247,247,247,.15);
}
.mobile-top__panel.is-open { display: flex; }
.mobile-top__panel a {
  font: 500 18px/24px var(--font-body);
  color: var(--color-white);
  padding: 12px 0;
  border-bottom: 1px solid rgba(247,247,247,.1);
}
.mobile-top__panel a:last-child { border-bottom: 0; }

/* ============================================================
   Block_1_main mobile (Figma 440×683)
   ============================================================ */
.block-1-main {
  display: flex; flex-direction: column;
  height: auto;
  padding: 32px 20px 32px;
}
.block-1-main__text { padding: 0; }
.block-1-main__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: 1px;
  color: var(--color-red);
  width: auto;
  margin: 0 0 22px;
  text-transform: none;
}
.block-1-main__lead { margin-top: 0; width: auto; }
.block-1-main__lead-strong { font-size: 22px; line-height: 28px; }
.block-1-main__lead-soft   { font-size: 16px; line-height: 22px; margin-top: 10px; }
.block-1-main__ctas {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 24px;
}
.block-1-main__ctas .btn { width: 100%; min-width: 0; height: 50px; }
.block-1-main__photo { order: -1; margin-bottom: 24px; }
.block-1-main__photo img {
  width: 100%; height: auto; aspect-ratio: 440 / 300;
  border-radius: var(--radius-md);
}

/* ============================================================
   Block_2_Explanation mobile
   ============================================================ */
.block-2-explanation { padding: 24px 20px 32px; }
.block-2__row--lead {
  display: flex; flex-direction: column;
  margin-bottom: 28px;
}
.block-2__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.block-2__text { padding: 20px 0 0; }
.block-2__heading { font-size: 22px; line-height: 26px; }
.block-2__heading--center { font-size: 20px; line-height: 24px; }
.block-2__paragraph { font-size: 15px; line-height: 22px; width: auto; margin-top: 14px; }
.block-2__video { padding: 0; }
.block-2__cover { width: 100%; height: auto; aspect-ratio: 350 / 190; margin-top: 16px; }
.block-2__video-hint { font-size: 18px; line-height: 22px; }
.block-2__pillars {
  grid-template-columns: 1fr;
  padding: 28px 0 0;
  gap: 24px;
}
.block-2__pillars > li h3 { font-size: 28px; line-height: 32px; margin-bottom: 6px; }
.block-2__pillars > li p  { font-size: 15px; line-height: 22px; }
.block-2__cta { padding: 24px 0 0; }
.block-2__cta .btn { width: 100%; }

/* ============================================================
   Block_3 mobile — accordion без фото (фото скрываем)
   ============================================================ */
.block-3-queries {
  grid-template-columns: 1fr;
  padding: 32px 20px;
}
.block-3__content { padding: 0; }
.block-3__heading { font-size: 22px; line-height: 26px; width: auto; }
.block-3__sub { font-size: 14px; line-height: 20px; margin-bottom: 22px; }
.block-3__photo { display: none; }
.accordion { width: 100%; }
.accordion__trigger { gap: 10px; }
.accordion__arrow { flex: 0 0 26px; }
.accordion__arrow svg { width: 22px; height: 26px; }
.accordion__q { font-size: 16px; line-height: 22px; }
.accordion__panel { padding-left: 36px; }
.accordion__item.is-open .accordion__panel { padding: 12px 0 8px 36px; }
.accordion__panel p { font-size: 14px; line-height: 20px; }

/* Block_3.1 */
.block-3-bottom { padding: 28px 20px; }
.block-3-bottom p { font-size: 18px; line-height: 24px; }

/* ============================================================
   Block_4 mobile — 4 шага в столбик
   ============================================================ */
.block-4-method { padding: 28px 20px; }
.block-4__heading { font-size: 22px; line-height: 26px; }
.block-4__sub { font-size: 16px; line-height: 22px; margin: 14px 0 24px; }
.block-4__steps { flex-direction: column; gap: 20px; align-items: flex-start; }
.block-4__step { flex: 0 0 auto; width: 100%; }
.block-4__step h3 { font-size: 22px; line-height: 26px; }
.block-4__step p  { font-size: 14px; line-height: 20px; }
.block-4__arrow { display: none; }
.block-4__icon svg { width: 44px; height: 44px; }
.block-4__cta .btn { width: 100%; }

/* ============================================================
   Block_5 mobile — красный блок
   ============================================================ */
.block-5-about {
  padding: 28px 20px;
  min-height: auto;
}
.block-5__heading { font-size: 22px; line-height: 26px; }
.block-5__stats { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.block-5__stats > li { flex: 0 0 auto; }
.block-5__dot { display: none; }
.stat-row strong { font-size: 48px; line-height: 52px; }
.stat-row span { font-size: 28px; line-height: 32px; }
.stat-line { font-size: 20px; line-height: 24px; margin: 4px 0 6px; }
.stat-sub  { font-size: 14px; line-height: 18px; }
.block-5__paragraph { font-size: 16px; line-height: 22px; max-width: 100%; }
.block-5__photo {
  position: static; width: 100%; height: auto; margin-top: 22px;
}
.block-5__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md); }

/* ============================================================
   Block_6 mobile — карточки в столбик
   ============================================================ */
.block-6__head { padding: 28px 20px 14px; }
.block-6__heading { font-size: 22px; line-height: 26px; margin-bottom: 18px; }
.block-6__lead, .block-6__lead-strong { font-size: 16px; line-height: 22px; margin-bottom: 14px; }
.block-6__cards { grid-template-columns: 1fr; padding: 0 20px; gap: 18px; }
.format-card { padding: 24px 20px; min-height: auto; border-radius: var(--radius-sm); }
.format-card h3 { font-size: 22px; line-height: 26px; margin-bottom: 18px; }
.format-card p  { font-size: 15px; line-height: 22px; }
.block-6__note { padding: 20px; margin-top: 24px; }
.block-6__note p { font-size: 16px; line-height: 22px; }
.block-6__team { padding: 24px 20px; }
.block-6__team-heading { font-size: 22px; line-height: 26px; }
.block-6__team-row { grid-template-columns: 1fr; gap: 18px; }
.format-card--team { min-height: auto; }
.block-6__team-photo img { height: auto; aspect-ratio: 4 / 3; }
.block-6__cta .btn { width: 100%; }

/* ============================================================
   Block_7 mobile — карусель (Swiper)
   Применяем Swiper-классы: добавляем .js-swiper в HTML на блок
   ============================================================ */
.block-7-reviews { padding: 28px 0; }
.block-7__heading { font-size: 22px; line-height: 26px; padding: 0 20px; margin-bottom: 18px; }
.block-7__grid {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px;
  grid-template-columns: none;
}
.block-7__grid > .review-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.review-card .video-cover { width: 260px; height: auto; aspect-ratio: 260 / 146; }
.review-card__name { font-size: 14px; line-height: 18px; }
.block-7__caption { font-size: 16px; line-height: 22px; padding: 0 20px; margin-top: 24px; }

/* ============================================================
   Block_8 mobile — карусель + кнопка чек-лист
   ============================================================ */
.block-8-checklist { padding: 28px 0; }
.block-8__heading { font-size: 22px; line-height: 26px; padding: 0 20px; margin-bottom: 18px; }
.block-8__grid {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px;
  grid-template-columns: none;
}
.block-8__grid > .video-tile {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.video-tile .video-cover { width: 260px; height: auto; aspect-ratio: 260 / 146; }
.video-tile__title { font-size: 14px; line-height: 18px; }
.checklist-cta {
  flex-direction: column; height: auto; gap: 12px;
  margin: 24px 20px 0;
  padding: 16px;
  border-radius: var(--radius-md);
}
.checklist-cta__pill { width: 180px; flex: 0 0 auto; height: 48px; }
.checklist-cta__label { font-size: 16px; line-height: 20px; }
.checklist-cta__title { font-size: 16px; line-height: 20px; }

/* ============================================================
   Block_9 mobile — FAQ (тот же accordion)
   ============================================================ */
.block-9-faq { padding: 28px 20px; }
.block-9__heading { font-size: 22px; line-height: 26px; }
.block-9__sub { font-size: 16px; line-height: 22px; margin-bottom: 18px; }
.accordion--light { width: 100%; }
.accordion--light .accordion__q { font-size: 15px; line-height: 20px; }
.accordion--light .accordion__panel p { font-size: 14px; line-height: 20px; }

/* Block_9.1 */
.block-9-bottom { padding: 22px 20px; }
.block-9-bottom p { font-size: 16px; line-height: 22px; }

/* ============================================================
   Block_10 mobile — контакты + форма в столбик
   ============================================================ */
.block-10-contacts {
  display: flex; flex-direction: column;
  gap: 28px;
  padding: 28px 20px;
}
.block-10__heading { font-size: 22px; line-height: 26px; }
.block-10__icons { gap: 16px; }
.contact-icon svg { width: 58px; height: 58px; }
.contact-icon svg[width="153"] { width: 78px; }
.block-10__line { font-size: 22px; line-height: 30px; }

.block-10__ready { max-width: 100%; }
.block-10__lead { font-size: 16px; line-height: 22px; margin-bottom: 16px; }
.form-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.form-input { font-size: 14px; }
.form-input::placeholder { font-size: 12px; }
.form-privacy { grid-template-columns: 1fr; gap: 14px; }
.form-privacy__row { font-size: 13px; line-height: 18px; }
.form-privacy .btn { width: 100%; }

/* ============================================================
   Block_11 mobile — партнёры в столбик
   ============================================================ */
.block-11-partners { padding: 28px 20px; }
.block-11__heading { font-size: 22px; line-height: 26px; }
.block-11__row { flex-direction: column; gap: 22px; }
.partner__title { font-size: 22px; line-height: 26px; }
.partner__name { font-size: 18px; line-height: 22px; }
.partner__person p { font-size: 14px; line-height: 18px; }

/* ============================================================
   Block_12 mobile
   ============================================================ */
.block-12-copyright { padding: 14px 20px; }
.block-12-copyright p { font-size: 13px; line-height: 18px; }

/* ============================================================
   Оптимизация под 375px (iPhone SE) — ещё чуть тоньше
   ============================================================ */
@media (max-width: 375px) {
  .block-1-main { padding: 24px 16px; }
  .block-1-main__title { font-size: 22px; line-height: 26px; }
  .block-1-main__lead-strong { font-size: 18px; line-height: 24px; }
  .block-1-main__lead-soft { font-size: 14px; line-height: 20px; }

  .block-2-explanation,
  .block-3-queries,
  .block-3-bottom,
  .block-4-method,
  .block-5-about,
  .block-6__head, .block-6__cards, .block-6__note, .block-6__team,
  .block-7__heading, .block-7__caption, .block-7__grid,
  .block-8__heading, .block-8__grid,
  .block-9-faq, .block-9-bottom,
  .block-10-contacts,
  .block-11-partners,
  .block-12-copyright { padding-left: 16px; padding-right: 16px; }

  .block-2__heading,
  .block-3__heading,
  .block-4__heading,
  .block-5__heading,
  .block-6__heading,
  .block-7__heading,
  .block-8__heading,
  .block-9__heading,
  .block-10__heading,
  .block-11__heading { font-size: 20px; line-height: 24px; }

  .review-card, .video-tile { flex: 0 0 230px; }
  .review-card .video-cover, .video-tile .video-cover { width: 230px; }

  .form-grid { grid-template-columns: 1fr; }
  .checklist-cta { margin: 24px 16px 0; }
}