/* ==========================================================================
   TECHFLUE — RESPONSIVE
   ========================================================================== */

/* ---------- Laptop (<=1140px) ---------- */
@media (max-width: 1140px) {
  .hero__heading { font-size: 48px; }
  .services__grid { gap: 20px; }
  .dashboard__panel--main { width: 300px; }
}

/* ---------- Tablet (<=980px) ---------- */
@media (max-width: 980px) {
  :root { --section-padding: 90px; }

  .navbar__nav { display: none; }
  .navbar__toggle { display: flex; }

  .hero { padding: 160px 0 100px; }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .hero__paragraph { max-width: 100%; }
  .hero__visual { height: 420px; order: -1; }

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

  .why__inner { grid-template-columns: 1fr; gap: 40px; }

  .timeline { grid-template-columns: repeat(3, 1fr); gap: 32px; row-gap: 40px; }
  .timeline__track { display: none; }

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

  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 24px; }
  .stat-item:nth-child(2n) { border-right: none; }

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

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---------- Mobile (<=640px) ---------- */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  :root { --section-padding: 64px; }

  .hero { padding: 140px 0 72px; }
  .hero__heading { font-size: 36px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__meta { flex-wrap: wrap; row-gap: 16px; }
  .hero__visual { height: 380px; }

  .dashboard__panel--main { width: 260px; padding: 16px; }
  .dashboard__panel--metric { width: 130px; }
  .dashboard__panel--metric1 { top: 30px; right: 0; }
  .dashboard__panel--metric2 { top: 150px; right: 10px; }
  .dashboard__panel--list { width: 190px; }
  .dashboard__panel--donut { left: 0; }

  .trusted__logos { justify-content: center; gap: 24px 32px; }

  .section-heading { font-size: 28px; }

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

  .feature-list { grid-template-columns: 1fr; }

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

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

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

  .final-cta__heading { font-size: 30px; }

  .footer__inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }

  .back-to-top { right: 20px; bottom: 20px; width: 40px; height: 40px; }
}

/* Contact page responsive */
@media (max-width: 900px) {
  .contact-page__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .whatsapp-float {
    bottom: 24px;
    left: 20px;
    width: 52px;
    height: 52px;
  }
  .back-to-top {
    bottom: 24px;
    right: 20px;
  }
}

/* Blog responsive */
@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .article__title { font-size: 28px; }
  .article__cover { height: 220px; }
}