@media(max-width:1024px) {
  .hgrid { grid-template-columns: 1fr 320px; gap: 28px }
  .agrid { grid-template-columns: 1fr 1fr }
}

@media(max-width:768px) {
  .sh { font-size: 34px }
  .ss { font-size: 18px }
  .shdr { margin-bottom: 36px }
  .wrap { padding: 0 18px }
  .hero .wrap { padding-top: 22px; padding-bottom: 44px }
  .hero h1 { font-size: 28px }
  .hacc { font-size: 18px }
  .hgrid { grid-template-columns: 1fr }
  .himg { max-width: 340px; margin: 24px auto 0 }
  .hnav { margin-bottom: 28px }
  .rgrid, .tgrid, .bgrid { grid-template-columns: 1fr }
  .bagrid { grid-template-columns: 1fr; gap: 14px }
  .baarr { display: none }
  .agrid { grid-template-columns: 1fr 1fr }
  .sgrid { grid-template-columns: 1fr }
  .sph, .sphw { max-width: 220px; margin: 0 auto }
  .fch { font-size: 32px }
  .fchecks { flex-direction: column; align-items: center }
  .fgrid { flex-direction: column; align-items: center; text-align: center }
  .fbot { flex-direction: column; align-items: center; text-align: center }
  .flcta { display: block }
  body { padding-bottom: 58px }
  .problems, .trust, .ba, .prog, .aud, .spk, .bon, .faq, .fcta { padding: 60px 0 }
  .pop { padding: 28px 20px }
  .popup-container { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0 }
}

@media(max-width:480px) {
  .sh { font-size: 30px }
  .hero h1 { font-size: 24px }
  .hacc { font-size: 16px }
  .agrid { grid-template-columns: 1fr }
}