/* ════════════════════════════════════════════════
   JK DIGI TECH — RESPONSIVE STYLES
   css/responsive.css
   ════════════════════════════════════════════════ */

/* ── LARGE DESKTOP (1440px+) ── */
@media (min-width: 1440px) {
  .max-w { max-width: 1320px; }
  .hero-h1 { font-size: 88px; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── DESKTOP (1200px) ── */
@media (max-width: 1200px) {
  .about-grid { gap: 40px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET LANDSCAPE (1024px) ── */
@media (max-width: 1024px) {
  .section-pad { padding: 76px 5%; }
  .hero-content { padding: 100px 20px 70px; }
  .hero-h1 { font-size: 56px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-right { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .floating-badge { display: none; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .test-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET (768px) ── */
@media (max-width: 768px) {
  /* Navbar */
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }

  /* Hero */
  .hero-h1 { font-size: 42px; letter-spacing: -0.5px; }
  .hero-desc { font-size: 15px; }
  .btn-hero { padding: 14px 28px; font-size: 15px; }
  .hero-pill { font-size: 11px; padding: 6px 14px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-num { font-size: 34px; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 24px 20px; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-cards { grid-template-columns: 1fr 1fr; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .port-img { height: 120px; font-size: 40px; }

  /* Testimonials */
  .test-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-cta-phone, .btn-cta-msg { width: 100%; max-width: 320px; justify-content: center; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-form { padding: 24px 20px; }

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

  /* Section layout */
  .section-header { margin-bottom: 40px; }
  .section-desc { font-size: 14px; }
}

/* ── MOBILE (480px) ── */
@media (max-width: 480px) {
  .section-pad { padding: 60px 4%; }
  .stats-bar { padding: 40px 4%; }

  /* Hero */
  .hero-content { padding: 90px 16px 60px; }
  .hero-h1 { font-size: 34px; }
  .trust-badges { gap: 8px; }
  .trust-badge { font-size: 10px; padding: 4px 10px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .btn-hero { width: 100%; max-width: 300px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stat-num { font-size: 28px; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .social-row { justify-content: flex-start; }

  /* Scroll indicator hidden on very small */
  .scroll-indicator { display: none; }

  /* Section label no pseudo */
  .section-label::before { display: none; }

  /* CTA */
  .cta-title { font-size: 26px; }
  .cta-desc { font-size: 14px; }
}

/* ── EXTRA SMALL (360px) ── */
@media (max-width: 360px) {
  .hero-h1 { font-size: 30px; }
  .logo-name { font-size: 15px; }
  .section-title { font-size: 24px; }
  .form-input { padding: 11px 12px; font-size: 13px; }
  .btn-submit { font-size: 14px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-up {
    opacity: 1;
    transform: none;
  }

  .floating-badge {
    animation: none;
  }

  .scroll-dot {
    animation: none;
  }
}

/* ── PRINT STYLES ── */
@media print {
  #navbar, .floating-badge, .scroll-indicator,
  #heroCanvas, .hero-overlay, .cta-section, #footer { display: none; }
  body { background: white; color: black; }
  .grad-text { -webkit-text-fill-color: #06B6D4; color: #06B6D4; }
  .section-pad { padding: 30px 0; }
}