/* ============================================================
   VIVASOFT Inc — Responsive Breakpoints
   ============================================================ */

/* ─── Large Desktop (1440px+) ─── */
@media (min-width: 1440px) {
  :root { --container: 1360px; }
}

/* ─── Desktop (1280px) ─── */
@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 36px; }
  .hero-text { flex: 0 0 58%; max-width: 58%; }
  .hero-visual { flex: 0 0 38%; max-width: 38%; }
}

/* ─── Laptop / Small Desktop (1024px) ─── */
@media (max-width: 1024px) {
  section { padding: 64px 0; }

  /* Header */
  #main-header { height: 68px; }
  #main-nav { display: none; }
  #hamburger { display: flex; }
  .header-cta .btn-outline { display: none; }

  /* Hero */
  .hero-slide .container { flex-direction: column; gap: 32px; padding-top: 80px; text-align: center; }
  .hero-text, .hero-visual { flex: 0 0 100%; max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-subtitle { margin: 0 auto 28px; }
  .device-showcase { max-width: 320px; }

  /* Grids */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-left { text-align: center; }
  .cta-checks { align-items: center; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(4, 1fr); }
  .process-step::after { display: none; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-card.featured { transform: scale(1); }
  .devices-grid { grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-landing-grid { grid-template-columns: 1fr; }
}

/* ─── Tablet (768px) ─── */
@media (max-width: 768px) {
  section { padding: 56px 0; }
  .container { padding: 0 20px; }

  /* Topbar */
  #topbar { height: auto; padding: 10px 0; }
  #topbar .container { flex-direction: column; gap: 8px; }

  /* Typography */
  h1 { font-size: 1.875rem; }
  .section-title { font-size: 1.5rem; }

  /* Hero */
  #hero-slider { height: auto; min-height: auto; }
  .hero-slide { height: auto; min-height: auto; padding: 100px 0 60px; }
  .hero-title { font-size: 1.75rem; }
  .hero-visual { display: none; }
  .scroll-indicator { display: none; }

  /* Grids */
  .services-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  .value-grid { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .devices-grid { grid-template-columns: 1fr; max-width: 280px; }
  .device-card.phone, .device-card.laptop { display: none; }
  .device-card.tablet { animation: float 3.5s ease-in-out infinite; transform: none; }

  /* Layout tweaks */
  .enquiry-form-card { padding: 28px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:first-child { grid-column: 1 / -1; }

  /* Header CTA */
  .header-cta .btn { display: none; }

  /* Page hero */
  .page-hero { padding: 60px 0 40px; }
}

/* ─── Mobile (480px) ─── */
@media (max-width: 480px) {
  section { padding: 48px 0; }
  .container { padding: 0 16px; }

  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }

  /* Topbar hide on very small screens */
  .topbar-left a.hide-xs { display: none; }

  /* Hero */
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 0.9375rem; }
  .btn-lg { padding: 14px 24px; font-size: 0.9rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  /* Grids */
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  /* Form */
  .enquiry-form-card { padding: 24px 16px; }

  /* Ticker */
  .ticker-label { font-size: 0.75rem; }

  /* Section tag */
  .section-header { margin-bottom: 36px; }

  /* Cards */
  .service-card { padding: 24px 20px; }
  .product-card-body { padding: 16px; }

  /* Mobile nav */
  #mobile-nav { width: 280px; }

  /* WhatsApp */
  .whatsapp-float { width: 50px; height: 50px; font-size: 1.35rem; bottom: 20px; right: 20px; }
}

/* ─── Very small (320px) ─── */
@media (max-width: 360px) {
  h1 { font-size: 1.375rem; }
  .hero-title { font-size: 1.25rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 1.75rem; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ─── Print ─── */
@media print {
  #topbar, #main-header, .whatsapp-float, #footer { display: none; }
  body { font-size: 12pt; }
  a { color: inherit; }
}