/* =============================================
   RESPONSIVE — Mobile breakpoints
   ============================================= */

@media (max-width: 768px) {
  /* Nav */
  nav,
  nav.on {
    padding: 14px 20px;
  }

  /* Main sections padding */
  #hero,
  #intro,
  #services,
  #pricing,
  #why,
  #team {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Contact CTA */
  .ctab {
    padding: 72px 24px;
  }

  /* Stats: 2-col on mobile */
  #stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Pricing: stacked */
  .plans {
    grid-template-columns: 1fr;
  }

  /* Team: 2 cols on mobile */
  .tgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Services header */
  .s-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .stags {
    display: none;
  }

  /* Why section: single column, hide visual */
  .why-grid {
    grid-template-columns: 1fr;
  }

  .wvis {
    display: none;
  }

  /* Footer: stacked */
  footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 28px 20px;
  }
}