/* Derma AI — juda tor ekranlar uchun qo'shimcha moslashuvlar (style.css dan keyin ulanadi) */

@media (max-width: 560px) {
  .hero h1 { font-size: 29px; }
  .section { padding: 44px 0; }
  .section-head h2 { font-size: 25px; }
  .cta-final { padding: 34px 22px; }
  .cta-final h2 { font-size: 23px; }
  .modal-body, .card-pad { padding: 18px; }
  .hero-cta .btn, .cta-final .btn { width: 100%; }
}

/* kichik telefonlar va yon panellar */
@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .btn { white-space: normal; padding: 10px 14px; font-size: 14px; }
  .nav-in { height: 58px; }
  .logo { font-size: 17px; gap: 7px; }
  .logo svg { width: 27px; height: 27px; }
  .nav-links { gap: 10px; }
  .hero h1 { font-size: 25px; letter-spacing: -.5px; }
  .hero p.lead { font-size: 16px; }
  .promise { flex-direction: column; gap: 12px; padding: 20px; }
  .risk-num { font-size: 42px; }
  .topbar { padding: 0 14px; }
  .topbar h1 { font-size: 16px; }
  .who .small { display: none; }
  .modal .cols { grid-template-columns: 1fr !important; }
  .abcd-item { grid-template-columns: 1fr auto; }
}