/* ==========================================================================
   RESPONSIVE STYLES
   Breakpoints: 1200px (laptop) / 992px (tablet landscape) / 768px (tablet) / 480px (mobile)
   ========================================================================== */

/* ============ LAPTOP (<=1200px) ============ */
@media (max-width: 1200px) {
  .hero-card-1 { left: -2%; }
  .hero-card-2 { right: -2%; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ TABLET LANDSCAPE (<=992px) ============ */
@media (max-width: 992px) {
  main > section { padding-block: var(--space-7); }

  .main-nav { display: none; }
  .hamburger { display: flex; }

  .main-nav.active {
    display: block;
    position: fixed;
    inset: 0;
    top: 0;
    background: rgba(5, 8, 22, 0.98);
    backdrop-filter: blur(20px);
    padding: 120px var(--space-4) var(--space-4);
    z-index: 105;
  }
  .main-nav.active ul { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
  .main-nav.active a { font-size: 22px; }

  .header-actions .btn-primary.btn-sm { display: none; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--space-7); order: -1; }
  .hero-content { text-align: left; }
  .hero-stats { gap: var(--space-4); }
  .hero-card-float { padding: 10px 14px; }
  .hero-card-1 { top: 4%; left: 0; }
  .hero-card-2 { bottom: 8%; right: 0; }
  .hero-card-3 { bottom: -3%; left: 4%; }

  .about-grid, .why-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 440px; margin-inline: auto; }
  .about-badge { right: 0; bottom: 12px; }
  .about-float-card { left: 0; top: 12px; }
  .why-stats { margin-top: var(--space-5); }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .case-cards { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pricing-featured { transform: scale(1); order: -1; }
  .pricing-featured:hover { transform: translateY(-8px); }

  .process-timeline { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); row-gap: var(--space-6); }
  .process-line { display: none; }

  .testimonial-slide { flex: 0 0 calc((100% - 24px) / 2); }

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

/* ============ TABLET (<=768px) ============ */
@media (max-width: 768px) {
  .container { padding-inline: var(--space-3); }

  .hero { padding-top: 140px; }
  .hero-title { font-size: clamp(34px, 8vw, 48px); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { justify-content: space-between; }

  .services-grid, .capabilities-grid, .portfolio-grid, .case-cards, .blog-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-timeline { grid-template-columns: 1fr 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; flex: 1; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }

  .why-stats { grid-template-columns: 1fr 1fr; }
}

/* ============ MOBILE (<=480px) ============ */
@media (max-width: 480px) {
  :root {
    --space-7: 48px;
    --space-8: 56px;
    --space-9: 64px;
  }

  .hero-title { font-size: 34px; }
  .hero-subtitle { font-size: 16px; }
  .hero-stats { flex-direction: row; flex-wrap: nowrap; gap: var(--space-2); justify-content: space-between; }
  .hero-stat .counter, .hero-stat .stat-suffix { font-size: 22px; }
  .hero-stat p { font-size: 11.5px; }

  .hero-card-float { position: static; margin-bottom: var(--space-2); width: fit-content; }
  .hero-visual { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .hero-image-wrap { order: -1; margin-bottom: var(--space-2); max-width: 100%; }

  .section-title { font-size: 26px; }
  .brands-track-inner span { font-size: 17px; }

  .about-float-card { display: none; }
  .about-badge { position: relative; bottom: 0; right: 0; margin-top: var(--space-3); width: fit-content; }

  .team-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .process-timeline { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr; }

  .testimonial-slide { flex: 0 0 100%; padding: var(--space-4); }
  .testimonial-slide p { font-size: 15px; }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
}