/* ====== 1024px и ниже: слегка ужимаем отступы ====== */
@media (max-width: 1024px){
  .container{padding:0 16px}
  .hero{padding:40px 0 12px}
  .hero h1{font-size:32px}
  .card .card-body{padding:18px}
}

/* ====== 900px и ниже: меню переносится на вторую строку, кнопки плотнее ====== */
@media (max-width: 900px){
  .site-header .nav{
    height:auto; padding:8px 0; flex-wrap:wrap; row-gap:8px;
  }
  .nav a{margin-left:12px}
  .brand{font-size:16px}
  .brand img{height:26px}
}

/* ====== 720px и ниже: формам 1 колонку, крупнее заголовок/кнопки ====== */
@media (max-width: 720px){
  .container{padding:0 14px}
  .hero{padding:28px 0 8px}
  .hero h1{font-size:28px; line-height:1.25}
  .hero p{font-size:15px}

  /* формы в одну колонку */
  .form-row{grid-template-columns:1fr}

  /* удобные тапы на мобильных */
  .input, select, textarea{min-height:44px; font-size:16px}
  .btn{width:100%}                 /* кнопка в форме — на всю ширину */
  .btn + .btn{margin-top:8px}      /* если вдруг две подряд */
  .card .card-body{padding:16px}
  
  /* таблица без изменения HTML: делаем горизонтальный скролл */
  .table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    border-spacing:0;
    -webkit-overflow-scrolling:touch;
  }
  .table th, .table td{padding:12px 10px}
}

/* ====== 480px и ниже: ещё компактнее текст и шапка ====== */
@media (max-width: 480px){
  .container{padding:0 12px}
  .brand{font-size:15px}
  .brand img{height:22px}
  .nav a{font-size:14px; margin-left:10px}

  .hero h1{font-size:24px}
  .hero p{font-size:14px}

  /* карточки и подсказки чуть легче */
  .card{border-radius:14px}
  .steps{gap:12px}
  .step{padding:12px}
}