/* ============================================================
   Delivra — Responsive CSS
   Built by Teamseven Private Limited | teamseven.ltd
   ============================================================ */

/* ── Breakpoints ─────────────────────────────────────────────
   xs:  < 480px   (Small phones)
   sm:  480–639px (Large phones)
   md:  640–767px (Tablets portrait)
   lg:  768–1023px (Tablets landscape)
   xl:  1024–1279px (Small desktops)
   2xl: 1280px+   (Large desktops)
   ─────────────────────────────────────────────────────────── */

/* ============================================================
   LARGE DESKTOP (1280px+)
   ============================================================ */
@media (min-width: 1280px) {
  .container { padding: 0 2rem; }
  .hero-title { font-size: 5rem; }
}

/* ============================================================
   DESKTOP (1024px–1279px)
   ============================================================ */
@media (max-width: 1279px) {
  .container { max-width: 100%; }
  .hero-orb-1 { width: 400px; height: 400px; }
  .hero-orb-2 { width: 300px; height: 300px; }
}

/* ============================================================
   SMALL DESKTOP / LARGE TABLET (768px–1023px)
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --space-24: 72px;
    --space-32: 96px;
  }

  .nav-links-desktop { display: none; }
  .nav-cta-desktop   { display: none; }
  .menu-toggle       { display: flex !important; }

  .hero-section { min-height: auto; padding: 120px 0 80px; }
  .hero-content { text-align: center; }
  .hero-subtitle { margin: 0 auto var(--space-8); }
  .hero-cta-wrap { justify-content: center; }
  .hero-badges-row { justify-content: center; }
  .hero-visual { margin-top: 3rem; }

  .pricing-card.featured { transform: none; }

  .step-connector { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

/* ============================================================
   TABLET PORTRAIT (640px–767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --space-20: 56px;
    --space-24: 64px;
    --space-16: 48px;
  }

  .section  { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .section-lg { padding: 80px 0; }

  .section-title { font-size: 2rem; }
  .section-desc  { font-size: 1rem; }

  .hero-title { font-size: 2.5rem; }

  .hero-orb { display: none; }

  .feature-grid-3 { grid-template-columns: 1fr !important; }
  .feature-grid-4 { grid-template-columns: 1fr 1fr !important; }

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

  .testimonial-grid { grid-template-columns: 1fr !important; }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto;
  }

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

  .footer-brand-col { grid-column: span 1; }
  .footer-brand-desc { max-width: 100%; }

  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .toast { min-width: unset; width: 100%; }
}

/* ============================================================
   LARGE PHONE (480px–639px)
   ============================================================ */
@media (max-width: 639px) {
  :root { --space-24: 56px; }

  .container { padding: 0 1.25rem; }

  .hero-title { font-size: 2.2rem; letter-spacing: -0.025em; }

  .btn-xl { padding: 14px 28px; font-size: 1rem; }

  .hero-cta-wrap { flex-direction: column; align-items: center; }
  .hero-cta-wrap .btn { width: 100%; max-width: 280px; justify-content: center; }

  .feature-grid-4 { grid-template-columns: 1fr !important; }

  .integration-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .step-grid { grid-template-columns: 1fr !important; }

  .use-case-tabs { flex-direction: column; align-items: stretch; }
  .use-case-tab  { text-align: center; }

  .pricing-toggle-wrap { flex-direction: column; gap: 0.75rem; }

  .dashboard-mockup { border-radius: 12px; }
}

/* ============================================================
   SMALL PHONE (< 480px)
   ============================================================ */
@media (max-width: 479px) {
  .container { padding: 0 1rem; }

  .hero-title { font-size: 1.9rem; }
  .hero-badge { font-size: 0.65rem; }

  .section-header { margin-bottom: 2.5rem; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; }

  .stat-card { padding: 1.5rem 1rem; }
  .stat-number { font-size: 2rem; }

  .glass-card { border-radius: 14px; }
  .feature-card, .step-card, .pricing-card { padding: 1.5rem; }

  .navbar-brand { font-size: 1.125rem; }
}

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

  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-orb { animation: none; }
  .ticker-track { animation: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, .mobile-menu, .toast-container, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  .glass-card { background: #fff; border: 1px solid #ccc; box-shadow: none; }
  .hero-section { padding: 2rem 0; min-height: auto; }
}