/* =============================================
   FlatApp Landing - Responsive Design
   ============================================= */

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
  .section { padding: 80px 32px; }

  .hero { padding: 100px 32px 60px; }
  .hero-content { flex-direction: column; text-align: center; gap: 40px; }
  .hero-text { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-visual { max-width: 500px; width: 100%; }

  .value-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .value-cards .value-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }

  .showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .feature-row { gap: 40px; }

  .platforms-visual { gap: 24px; }
  .device-laptop { width: 340px; }
  .device-tablet { width: 160px; }
  .device-phone { width: 100px; }

  .stats-row { gap: 48px; }
  .stat-number { font-size: 44px; }

  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .testimonials .testimonial-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 768px) {
  .section { padding: 64px 20px; }
  .section-title { font-size: 32px; }
  .section-subtitle { font-size: 16px; margin-bottom: 40px; }

  /* Swipe */
  .swipe-container { max-width: 100%; }
  .swipe-stack { height: 400px; }

  /* Nav */
  .nav-bar { padding: 12px 20px; }
  .nav-center { display: none; }
  .nav-right .nav-lang-group { display: none; }
  .nav-right .nav-theme-toggle { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu { display: none; }

  /* Hero */
  .hero { padding: 80px 20px 48px; min-height: auto; }
  .hero-logo { font-size: 52px; }
  .hero-tagline { font-size: 26px; }
  .hero-subtitle { font-size: 15px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-visual { max-width: 100%; }

  .hero .blob-1 { width: 250px; height: 250px; }
  .hero .blob-2 { width: 180px; height: 180px; }
  .hero .blob-3 { display: none; }

  /* What We Do */
  .value-cards { grid-template-columns: 1fr; gap: 20px; }
  .value-cards .value-card:last-child { max-width: 100%; }
  .value-card { padding: 32px 24px; }

  /* Showcase */
  .showcase-main { margin-bottom: 32px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Steps */
  .steps-container { flex-direction: column; gap: 32px; }
  .steps-line-svg { display: none; }
  .step { padding: 0; }

  /* Features */
  .feature-row,
  .feature-row.reverse { flex-direction: column; gap: 32px; }
  .feature-title { font-size: 26px; }

  /* Platforms */
  .platforms-visual { flex-direction: column; align-items: center; gap: 20px; }
  .device-laptop { width: 100%; max-width: 380px; }
  .device-tablet { width: 200px; }
  .device-phone { width: 140px; }
  .platform-badges { flex-wrap: wrap; gap: 12px; }

  /* Social Proof */
  .stats-row { flex-direction: column; gap: 32px; }
  .stat-number { font-size: 48px; }
  .testimonials { grid-template-columns: 1fr; }
  .testimonials .testimonial-card:last-child { max-width: 100%; }

  /* CTA */
  .cta-section { padding: 64px 20px 32px; }
  .cta-heading { font-size: 28px; }
  .cta-logo { font-size: 36px; }

  .footer-links { flex-wrap: wrap; gap: 16px; justify-content: center; }
}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 480px) {
  .section { padding: 48px 16px; }
  .section-title { font-size: 26px; }

  .hero { padding: 72px 16px 40px; }
  .hero-logo { font-size: 42px; }
  .hero-tagline { font-size: 22px; }

  .mockup-body { padding: 8px; }
  .mock-stats { grid-template-columns: repeat(2, 1fr); }

  .feature-badge { font-size: 11px; }
  .feature-title { font-size: 22px; }
  .feature-desc { font-size: 14px; }

  .btn { padding: 12px 24px; font-size: 14px; }

  .cta-heading { font-size: 24px; }
}

/* ---- Features Page Responsive ---- */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .builtin-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr !important;
  }
  .builtin-grid {
    grid-template-columns: 1fr !important;
  }
  .features-hero {
    padding: 100px 20px 48px !important;
  }
  .features-hero h1 {
    font-size: 32px !important;
  }
  .product-variants {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .variant-icon { height: 36px; }
  .variant-card { padding: 16px 12px; }
}

@media (max-width: 480px) {
  .product-variants {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .variant-icon { height: 32px; }
}