@media (max-width: 1279px) {
  .grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* верхний ряд (2 колонки) — горизонтальную "шину" рисуем на grid, не на карточках */
  .step-card:nth-child(-n + 2)::after {
    display: none;
  }

  /* второй и последующие ряды (2 колонки) — линия между рядами по gap */
  .step-card:nth-child(n + 3) {
    --step-connector: 18px;
  }

  /* первая карточка в каждой строке (2 колонки) — без горизонтальной линии слева */
  .step-card:nth-child(4n + 1)::after {
    display: block;
  }

  .step-card:nth-child(2n + 1)::after {
    display: none;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
  }

  .hero__title {
    font-size: 3.45rem;
  }
}

@media (max-width: 1023px) {
  .hero__grid,
  .dark-block__grid,
  .cta-block__grid,
  .grid--courses,
  .grid--pain,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .grid--vacancies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-title {
    font-size: 2.1rem;
  }

  .hero__title {
    font-size: 3rem;
  }

  .dark-block,
  .cta-block {
    padding: 42px 34px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header__inner {
    gap: 16px;
  }

  .header__nav {
    display: none;
  }

  .hero__grid {
    gap: 32px;
    padding-top: 68px;
    padding-bottom: 84px;
  }

  .hero__title {
    font-size: 2.35rem;
  }

  .hero__text {
    font-size: 1rem;
    line-height: 1.8;
  }

  .hero__cards-grid,
  .grid--services,
  .grid--automations,
  .grid--steps,
  .grid--vacancies {
    grid-template-columns: 1fr;
  }

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

  /* На мобильных соединительные линии не нужны */
  .grid--steps {
    padding-top: 0;
  }

  .step-card::before,
  .step-card::after {
    display: none;
  }

  .section {
    padding: 68px 0;
  }

  .section--pb-small {
    padding-top: 0;
    padding-bottom: 68px;
  }

  .section-title {
    font-size: 1.9rem;
  }

  .card,
  .service-card,
  .step-card,
  .vacancy-card,
  .pain-card,
  .cta-form {
    padding: 22px;
  }

  .pain-card {
    grid-template-columns: 1fr;
  }

  .dark-block,
  .cta-block {
    padding: 30px 20px;
    border-radius: 28px;
  }

  .hero-visual__image-wrap {
    min-height: 220px;
  }

  .footer__grid {
    gap: 32px;
    padding-top: 42px;
    padding-bottom: 42px;
  }
}

@media (max-width: 479px) {
  .header__inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .button--small {
    width: 100%;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__title {
    font-size: 2rem;
  }

  .course-card__head,
  .vacancy-card__top,
  .step-card__head {
    align-items: flex-start;
  }
}