@media (max-width:991.98px){
  .phone-link{ display:inline-block; font-size:1.2rem; }
  #hero .container{ padding-inline:.5rem; }
}
@media (max-width:575.98px){
  .catalog{ padding-block:44px; }
  .catalog-title{ margin-bottom:28px; font-size:clamp(22px,6.2vw,28px); }
}

/******************************
 * RESPONSIVE (расширено)
 ******************************/

/* --- ≤ 992px --- */
@media (max-width: 992px) {
  :root{
    --container-pad-x: clamp(10px, 3vw, 20px);
  }
  .container,
  .container-fluid{
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
  }

  h1,h2,h3 { line-height: 1.2; }
  h1 { font-size: clamp(1.8rem, 5.2vw, 2.2rem); }
  h2 { font-size: clamp(1.5rem, 4.6vw, 1.9rem); }
  h3 { font-size: clamp(1.25rem, 4.2vw, 1.6rem); }

  p, li { font-size: clamp(0.95rem, 2.8vw, 1rem); }
  .section { padding-block: clamp(16px, 5vh, 36px); }
}

/* --- ≤ 768px --- */
@media (max-width: 768px) {
  .grid-2,
  .grid-3{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 3.5vw, 16px);
  }

  .card {
    padding: clamp(12px, 3.5vw, 16px);
    border-radius: 16px;
  }
}

/* --- ≤ 576px --- */
@media (max-width: 576px) {
  .btn,
  .btn-lg{
    min-height: 44px;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 14px;
  }
  .lead{ font-size: 1.02rem; }
}

/* --- ≤ 360px --- */
@media (max-width: 360px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }
  .btn, .btn-lg{ padding: 10px 14px; }
}