/* =========================================
   NEXUS DIGITAL - Responsive CSS
   Breakpoints: 1200px, 992px, 768px, 576px
   ========================================= */

/* --- Large Desktop (1400px+) --- */
@media (min-width: 1400px) {
  .container { max-width: 1360px; }
}

/* --- Desktop (max 1200px) --- */
@media (max-width: 1200px) {
  .hero-inner { gap: 40px; }
  .about-inner { gap: 48px; }
  .why-inner { gap: 48px; }
  .faq-inner { gap: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid-full { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid-five .service-card,
  .services-grid-five .featured-service-card { grid-column: auto; }
  .process-steps::before { display: none; }
}

/* --- Tablet Landscape (max 992px) --- */
@media (max-width: 992px) {
  :root {
    --space-20: 100px;
    --space-16: 80px;
  }

  /* Navigation */
  .nav-menu { display: none; }
  .header-phone { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero-content { max-width: 720px; margin: 0 auto; }
  .hero-badge { margin: 0 auto var(--space-3); }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }

  .hero-image-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    max-width: 600px;
    margin: 0 auto;
  }

  .hero-img-main { grid-column: 1 / 4; }
  .hero-img-sm { display: none; }

  .hero-float-card-1 { left: 0; bottom: -10px; }
  .hero-float-card-2 { right: 0; top: 20px; }

  /* About */
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-experience-badge { right: 0; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid-five .service-card,
  .services-grid-five .featured-service-card { grid-column: auto; }

  /* Why Choose Us */
  .why-inner { grid-template-columns: 1fr; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item.wide { grid-column: span 1; aspect-ratio: 4/3; }

  /* Process */
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Team */
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid-full { grid-template-columns: repeat(3, 1fr); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pricing-card.featured { transform: none !important; }

  /* FAQ */
  .faq-inner { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Service Detail */
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail-sidebar { position: static; }

  /* Team grid */
  .team-grid-full { grid-template-columns: repeat(3, 1fr); }

  /* Why features */
  .why-features { max-width: 600px; }
}

/* --- Tablet Portrait (max 768px) --- */
@media (max-width: 768px) {
  :root {
    --space-20: 80px;
    --space-16: 64px;
    --space-12: 64px;
  }

  /* Container */
  .container { padding: 0 16px; }

  /* Typography */
  h1 { font-size: clamp(2rem, 6vw, 3rem); }
  h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }

  /* Hero */
  .hero { min-height: auto; padding: 112px 0 72px; }
  .hero-inner { gap: 42px; }
  .hero-float-card { display: none; }
  .hero-scroll { display: none; }
  .hero-image-grid { gap: 12px; }

  /* Marquee */
  .marquee-item { font-size: 0.95rem; }

  /* About grid */
  .about-img-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border-radius: var(--radius-md);
  }
  .about-img-tall { grid-row: auto; aspect-ratio: 4/3; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .services-grid-five .service-card,
  .services-grid-five .featured-service-card { grid-column: auto; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 2.8rem; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item.wide { aspect-ratio: 16/9; }
  .portfolio-overlay { opacity: 1; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; gap: 24px; }

  /* Team */
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid-full { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid { max-width: 100%; }
  .pricing-card.featured { transform: none !important; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-accordion { gap: 8px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 32px; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-newsletter-form { flex-direction: column; padding: 16px; border-radius: var(--radius-lg); }
  .cta-newsletter-form .btn { width: 100%; justify-content: center; }

  /* Why features */
  .why-features { grid-template-columns: 1fr; }

  /* Header */
  #header { padding: 14px 0; }
}

/* --- Mobile (max 576px) --- */
@media (max-width: 576px) {
  :root {
    --space-20: 64px;
    --space-16: 56px;
  }

  /* Hero */
  .hero-stats { gap: 20px; }
  .hero-stat-number { font-size: 1.5rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Portfolio */
  .portfolio-filters { gap: 6px; }
  .filter-btn { padding: 7px 14px; font-size: 0.78rem; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid-full { grid-template-columns: 1fr 1fr; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2.2rem; }

  /* Pricing */
  .pricing-card { padding: 28px 22px; }

  /* Blog cards */
  .blog-card-meta { gap: 10px; flex-wrap: wrap; }

  /* Footer social */
  .footer-social-links { flex-wrap: wrap; }

  /* Footer bottom links */
  .footer-bottom-links { flex-wrap: wrap; gap: 12px; justify-content: center; }

  /* Testimonials */
  .testimonial-card { padding: 28px 24px; }

  /* Process */
  .process-step-num { width: 60px; height: 60px; font-size: 1.2rem; }

  /* Section header */
  .section-header { margin-bottom: var(--space-5); }

  /* Mobile menu */
  .mobile-menu { width: 100%; border-left: none; }

  /* Back to top */
  #back-to-top { bottom: 20px; right: 20px; }

  /* CTA actions */
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Page hero */
  .page-hero { padding: 112px 0 56px; }
  .page-hero-content { max-width: 100%; }

  /* About badge */
  .about-experience-badge { position: static; display: inline-block; margin-top: 16px; }

  /* Float cards */
  .hero-float-card { display: none; }
}

/* --- Very Small (max 400px) --- */
@media (max-width: 400px) {
  .hero-title { font-size: 2rem; }
  .hero-stats { justify-content: center; }
  .hero-stat-divider { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .team-grid-full { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* --- High DPI / Retina --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-mark { border-radius: 10px; }
}

/* --- Print --- */
@media print {
  #header, #preloader, #back-to-top,
  .mobile-menu, .mobile-menu-overlay,
  .hero-scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding-top: 40px; }
}

/* --- Motion reduced --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}