/* ============================================================
   CleanPro — Responsive CSS
   ============================================================ */

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid    { gap: 36px; }
  .why-grid     { gap: 40px; }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 36px; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .testimonial-slide { min-width: calc(50% - 14px); }
  .service-detail-grid { grid-template-columns: 1fr 340px; }
}

/* ── Mobile (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }

  /* Navbar */
  .navbar { height: 60px; }
  .navbar-inner { height: 60px; }
  .navbar-brand { font-size: 18px; }
  .navbar-brand .logo-icon { width: 32px; height: 32px; font-size: 16px; }

  .nav-links {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 24px;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    visibility: hidden;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links a { 
    font-size: 26px; 
    font-weight: 700; 
    color: var(--secondary); 
    padding: 10px 20px; 
    text-align: center; 
    width: 100%;
    max-width: 300px;
  }
  .nav-links a:hover, .nav-links a.active {
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 50px;
  }
  .nav-cta { display: none; }
  .nav-toggle { 
    display: flex; 
    position: relative; 
    z-index: 10000; 
    width: 36px; height: 36px; 
    align-items: center; 
    justify-content: center;
    background: var(--bg);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
  }
  .nav-toggle span { width: 22px; }

  /* Hero */
  .hero { padding: 90px 0 40px; min-height: auto; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .hero-subtitle { margin: 0 auto 28px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; gap: 24px; }
  .hero-card-left, .hero-card-right { display: none; }
  .hero-image-wrapper img { height: 300px; }
  .hero-visual { order: -1; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Why Us */
  .why-grid { grid-template-columns: 1fr; }
  .why-image-wrapper img { height: 300px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-item h2 { font-size: 36px; }

  /* Testimonials */
  .testimonial-slide { min-width: 100%; margin-right: 0; }

  /* Service Detail */
  .service-detail-grid { grid-template-columns: 1fr; }
  .booking-sidebar { position: static; }
  .feature-list { grid-template-columns: 1fr; }

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

  /* Booking form */
  .form-row { grid-template-columns: 1fr; }
  .booking-form-wrap { padding: 24px 18px; }

  /* Sticky CTA */
  .sticky-book-btn { display: block; }
  body { padding-bottom: 60px; }

  /* Modal */
  .modal { padding: 24px 18px; margin: 16px; max-width: calc(100% - 32px); }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .h1-title { font-size: 32px !important; line-height: 1.1 !important; }
  .hero-fresh-title { font-size: 34px !important; line-height: 1.1 !important; }
  .hero-fresh-subtitle { font-size: 15px !important; }
  
  /* Header adjustments */
  .navbar-brand { font-size: 16px !important; gap: 6px !important; }
  .navbar-brand img { max-height: 32px !important; margin-right: 4px !important; }
  
  /* Floating buttons adjustments */
  .floating-actions { bottom: 90px !important; right: 12px !important; gap: 10px !important; }
  .action-btn { width: 48px !important; height: 48px !important; }
  .action-btn svg { width: 22px !important; height: 22px !important; }
  
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch !important; width: 100%; }
  .hero-fresh-actions { flex-direction: column; align-items: stretch !important; gap: 12px !important; width: 100%; }
  .hero-fresh-actions .btn { width: 100%; justify-content: center; }
  
  .hero-fresh-stats { gap: 12px !important; }
  .hfs-num { font-size: 18px !important; }
  .hfs-label { font-size: 10px !important; }
}