/* ═══════════════════════════════════════════════════
   FlixHub Landing — Responsive Breakpoints
   ═══════════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-text h1 { font-size: 2.8rem; }
  .hero-features { justify-content: center; }
  .hero-ctas { justify-content: center; }
  .hero-sub { margin: 0 auto 28px; }
  .hero-visual { order: -1; }
  .phone-mockup { width: 240px; height: 480px; }

  .steps-grid { flex-direction: column; }
  .step-connector { transform: rotate(90deg); }

  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }

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

  .download-content h2 { font-size: 2.2rem; }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
  .section { padding: 70px 0; }
  .section-header { margin-bottom: 40px; }
  .section-header h2 { font-size: 1.8rem; }
  .section-header p { font-size: 0.95rem; }

  /* Nav */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(15,15,35,0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 20px 24px;
    gap: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.active { display: flex; }
  .nav-links li { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border: none; }
  .nav-download-btn { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding: 100px 0 60px; }
  .hero-text h1 { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-features { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-scroll-indicator { display: none; }
  .hero-badge { font-size: 0.75rem; padding: 6px 14px; }
  .phone-mockup { width: 200px; height: 400px; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 24px; }

  /* Screenshots */
  .screenshot-phone { width: 180px; height: 340px; }

  /* Content chips */
  .content-chip { padding: 10px 18px; font-size: 0.82rem; }

  /* FAQ */
  .faq-question { padding: 16px 18px; font-size: 0.9rem; }

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

  /* Download CTA */
  .download-cta { padding: 80px 0; }
  .download-content h2 { font-size: 1.8rem; }
  .trust-badges { gap: 20px; }
  .badge-item { font-size: 0.8rem; }

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

/* ─── Small Mobile (≤ 480px) ─── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section-header h2 { font-size: 1.5rem; }
  .hero-text h1 { font-size: 1.7rem; }
  .btn-lg { padding: 14px 24px; font-size: 0.95rem; }
  .btn-xl { padding: 16px 32px; font-size: 1rem; }
  .phone-mockup { width: 180px; height: 360px; }
  .demo-search-bar { padding: 14px 18px; }
  .demo-results { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .step-card { padding: 24px 20px; }
  .download-content h2 { font-size: 1.5rem; }
}