/* =====================================================
   TechNeural — Responsive
   Breakpoints: 1024 · 860 · 640 · 460
   ===================================================== */

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1024px) {
  .section {
    padding-block: 92px;
  }
  .services__grid,
  .work__grid,
  .blog__grid,
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__track,
  .features__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__inner {
    gap: 36px;
  }
  .hero__visual {
    height: 420px;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__burger {
    display: flex;
  }

  .hero {
    padding-top: calc(var(--nav-h) + 28px);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__sub {
    margin-inline: auto;
  }
  .hero__actions,
  .hero__trust {
    justify-content: center;
  }
  .hero__visual {
    height: 400px;
    max-width: 460px;
    margin: 12px auto 0;
  }
  .hero__scroll {
    display: none;
  }

  .why__inner,
  .faq__inner,
  .split,
  .svc-detail__split,
  .contact-grid,
  .blog-feature {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split--reverse .split__media {
    order: 0;
  }
  .blog-feature__img {
    min-height: 240px;
  }
  .blog-feature__body {
    padding: 28px;
  }
  .section__head--left {
    text-align: center;
    margin-inline: auto;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .section {
    padding-block: 48px;
  }
  .section--tight {
    padding-block: 28px;
  }
  .container {
    padding-inline: 18px;
  }
  .nav__inner {
    margin-top: 10px;
  }

  .services__grid,
  .work__grid,
  .blog__grid,
  .team__grid,
  .process__track,
  .why__cards,
  .features__grid,
  .features__grid--3 {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    height: 380px;
  }
  .hero__card--main {
    width: 250px;
    top: 10px;
    left: 0;
  }
  .hero__card--ai {
    width: 220px;
    top: -10px;
    right: 0;
  }
  .hero__card--stat {
    width: 140px;
    bottom: 20px;
    left: 0;
    padding: 16px 14px;
  }
  .hero__card--code {
    width: 200px;
    bottom: -10px;
    right: 0;
  }

  .testimonial p {
    font-size: 1.05rem;
  }
  .testimonials__swiper {
    padding-inline: 12px;
  }

  .form-card {
    padding: 24px;
  }
  .cta__panel {
    padding: 52px 22px;
  }
  .btn--lg {
    width: 100%;
  }
  .hero__actions .btn,
  .cta__actions .btn {
    width: 100%;
  }

  .footer {
    padding-block: 48px 24px;
    text-align: center;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__brand p {
    margin-inline: auto;
  }
  .footer__socials {
    justify-content: center;
    margin-top: 8px;
  }
  .footer__col h4 {
    margin-bottom: 10px;
  }
  .footer__col ul {
    align-items: center;
    gap: 8px;
  }
  .footer__col a,
  .footer__col span {
    justify-content: center;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 460px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
  .hero__title {
    font-size: 2.4rem;
  }
  .hero__visual {
    height: 320px;
  }
  .hero__card--main {
    width: 220px;
  }
  .hero__card--ai {
    width: 190px;
    top: 30px;
  }
  .hero__card--stat {
    width: 120px;
    bottom: 10px;
    padding: 12px;
  }
  .hero__stat-num {
    font-size: 1.2rem;
  }
  .hero__card--code {
    width: 170px;
    bottom: 20px;
  }
  .hero__card-title, .hero__ai-row strong, .hero__code-dots + code {
    font-size: 0.75rem;
  }
}