/* ====== Desktop-like mobile layout ======
   Имена id берём из твоих секций: #csfHero, #csfNumbers, #csfModels, #csfCases, #csfFAQ, #csfFinal, #csfFooter
   Если какого-то id нет — правило просто проигнорируется.
*/

/* 0) Fluid типографика и отступы для всей страницы */
:root{
  --pad-x: clamp(16px, 4vw, 32px);
  --gap-lg: clamp(16px, 3.2vw, 28px);
  --gap-md: clamp(12px, 2.4vw, 22px);
  --gap-sm: clamp(8px, 1.8vw, 16px);
}
[id^="csf"] .in{padding: clamp(44px, 6vw, 96px) var(--pad-x);}

/* Заголовки/текст — как на ПК, но плавно уменьшаются на телефонах */
h1,.h1{font-size: clamp(28px, 6vw, 56px); line-height: 1.12; letter-spacing:-.01em}
h2,.h2{font-size: clamp(24px, 4.8vw, 44px); line-height: 1.15}
h3,.h3{font-size: clamp(18px, 3.2vw, 24px); line-height: 1.22}
p,.sub{font-size: clamp(15px, 2.2vw, 17px); line-height: 1.7}

/* Кнопки: компактнее на узких, но выглядят как на десктопе */
.btn, a.btn, button.btn{
  font-size: clamp(14px, 2.1vw, 15px);
  padding: clamp(12px, 1.8vw, 14px) clamp(14px, 2.4vw, 18px);
  border-radius: 14px;
}

/* 1) Сетки: держим **две колонки** начиная с 640px, одна колонка ниже */
@media (min-width:640px) and (max-width:990px){
  #csfHero .wrap,
  #csfNumbers .grid,
  #csfModels .grid,
  #csfCases .grid,
  #csfFAQ .grid,
  #csfFinal .wrap{
    display:grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-lg); row-gap: var(--gap-md);
    align-items: start;
  }
}
/*