@media (max-width: 1024px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(0,0,0,0.98);
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--color-border-light);
  }
  .burger { display: block; }
  .header__actions .btn-primary { display: none; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .hero__card { max-width: 100%; }

  .hook-section__grid { grid-template-columns: 1fr; gap: 24px; }
  .hook-divider { display: none; }

  .cols-3 { grid-template-columns: 1fr; }
  .cols-3 article { border-left: none; border-top: 1px solid var(--color-border-light); padding: 24px 0; }
  .cols-3 article:first-child { border-top: none; }

  .cols-4 { grid-template-columns: 1fr 1fr; }

  .service-row { flex-direction: column; }
  .service-row__pricing { text-align: left; }

  .portfolio-item { grid-template-columns: 1fr; }

  .stats-row { grid-template-columns: 1fr; }

  .about__grid { grid-template-columns: 1fr; }
  .about__placeholder { max-width: 280px; }

  .asset-grid { grid-template-columns: 1fr; gap: 32px; }

  .materials-grid { grid-template-columns: 1fr; }

  .calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-padding-y: 56px; }

  /* На узком экране строки h1 переносятся, и при line-height 0.95 они
     наезжают друг на друга (особенно «Ё» с точками). Разжимаем. */
  .hero__content h1 { line-height: 1.05; }

  .service-row__features { grid-template-columns: 1fr; }

  .cols-4 { grid-template-columns: 1fr; }

  .hero__stats { gap: 20px; }

  .portfolio-section { padding: 32px 20px; }
}

@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .supplier-summary { padding: 24px 20px; }
}