@media (max-width: 1359px) {
  .navToggle { display: inline-flex; }
  .langSelector--header { display: none; }
  .navLangMobile { display: block; }

  .mainNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px 0;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF1F6;
  }
  .mainNav.isOpen { display: block; }

  .navList {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .navList > li { position: static; }
  .navList a,
  .navGroupTrigger {
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
  }

  .navSubmenu {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: #F5F7FB;
  }
  .navSubmenu a { padding: 12px 0; }
}

@media (max-width: 1024px) {
  .container-solutionInner { grid-template-columns: 1fr; gap: 32px; }
  .howLayout { grid-template-columns: 1fr; gap: 32px; }
  .howImage { max-height: 560px; }
}

@media (max-width: 900px) {
  .benefitsGrid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .benefitHighlight {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .audienceGrid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .contactLayout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .section-hero,
  .section-softSection-problem,
  .section-solution,
  .section-softSection-product,
  .section-softSection-how,
  .section-benefits,
  .section-softSection-audience,
  .section-appView,
  .section-softSection-teamVideo,
  .section-softSection-about,
  .section-contact { padding-block: 48px; }
  .sectionHeader-sectionHeaderCenter { margin-bottom: 32px; }

  .problemGrid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .audienceGrid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .aboutTeam {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .heroCategory { width: 84px; }
  .heroCategoryIcon { width: 64px; height: 64px; }
  .heroCategoryIcon svg { width: 28px; height: 28px; }
}

@media (max-width: 560px) {
  .howLayout { gap: 28px; }
  .howList { padding-left: 24px; }
  .howStep::before,
  .howStep::after {
    left: -24px;
    top: 22px;
    height: calc(100% - 44px);
  }
  .howStepButton {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 22px 0;
  }
  .howNumber { font-size: 1.5rem; }
  .howImage { max-height: 500px; }
  .iphone-15 {
    width: clamp(250px, 74vw, 280px);
    border-width: 9px;
    border-radius: 60px;
  }
  .iphone-15::before {
    left: -10px;
    top: 94px;
    width: 4px;
    height: 34px;
    box-shadow:
      0 54px 0 #09090B,
      0 104px 0 #09090B;
  }
  .iphone-15::after {
    right: -10px;
    top: 154px;
    width: 4px;
    height: 66px;
  }
  .dynamic-island {
    top: 11px;
    width: 82px;
    height: 21px;
  }
  .screen-scroll { border-radius: 44px; }
  .screen-scroll .howImage { border-radius: 44px; }
  .home-line {
    bottom: 9px;
    width: 96px;
  }
  .benefitsGrid { grid-template-columns: 1fr; }
  .contactFormGrid { grid-template-columns: 1fr; }
  .contactForm { padding: 28px; }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .howStep.isActive::after {
    animation: none;
    transform: scaleY(1);
  }
}

@media (max-width: 430px) {
  .container,
  .container-siteHeaderInner,
  .container-heroInner,
  .container-solutionInner,
  .container-siteFooterInner { padding-inline: 16px; }
  .brandLogo { height: 64px; }
  .headerActions { gap: 8px; }
  .button-ghostButton-navAccess { padding-inline: 12px; }
  .navToggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }
  .navToggleText { display: none; }
  .contactForm { padding: 24px; }
  .audienceCard { padding: 22px; }
  .section-hero { padding-top: 32px; }
  .heroDots { gap: 20px 16px; }
  .heroCategory { width: 80px; }
  .heroCategoryIcon { width: 60px; height: 60px; }
}

@media (max-width: 375px) {
  .heroCategory { width: 72px; }
  .heroCategoryIcon { width: 56px; height: 56px; }
  .heroCategoryIcon svg { width: 26px; height: 26px; }
  .sectionSubhead { font-size: 1rem; }
}