/* ===========================
   TABLET (768px)
   =========================== */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }

  .section { padding: 3.5rem 0; }
  .container { padding: 0 1.5rem; }

  /* Header */
  .hamburger { display: flex; }
  .header__phone { display: flex; }
  .header .btn--teal { font-size: 0.8rem; padding: 0.6rem 1.2rem; }
  .logo { font-size: 1rem; }
  .logo-icon { height: 32px; }

  /* Make outline btn visible on hero */
  .hero .btn--outline { background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

  /* Hero */
  .hero { min-height: 80vh; padding: 3rem 0; }
  .hero .container { max-width: 100%; margin-left: 1.5rem; }
  .hero__bg { background: linear-gradient(to right, rgba(30,40,40,0.92) 0%, rgba(30,40,40,0.6) 60%, rgba(30,40,40,0.2) 100%); }
  .hero__title { font-size: 2.2rem; }
  .hero__text { font-size: 0.95rem; }
  .hero__actions { flex-direction: row; }

  /* Tagline */
  .tagline h2 { font-size: 2rem; }

  /* Services - single column scroll feel */
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card { min-height: 300px; padding: 1.5rem; }
  .service-card h3 { font-size: 1.3rem; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }
  .value-item { border-right: none !important; }

  /* Certificate */
  .certificate-section { grid-template-columns: 1fr; gap: 2rem; }
  .certificate-image { order: -1; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-text h2 { font-size: 1.8rem; }

  /* Bento */
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--large { grid-row: span 1; }

  /* Testimonials */
  .testimonial-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonials-row { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Process */
  .process-cards { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr 1fr; }

  /* Conditions */
  [style*="grid-template-columns: 1fr 1fr; gap: 4rem"] { display: block !important; }
  .conditions-list { margin-top: 1.5rem; }

  /* Benefits tags */
  .benefit-tags { flex-wrap: wrap; }

  /* Aftercare */
  .aftercare-grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* CTA */
  .cta-banner { margin: 0 1.5rem 3rem; padding: 3rem 1.5rem; }
  .cta-banner h2 { font-size: 2rem; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
}

/* ===========================
   MOBILE (480px)
   =========================== */
@media (max-width: 480px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; }

  .section { padding: 2.5rem 0; }
  .container { padding: 0 1rem; }

  /* Header */
  .header .btn--teal { display: none; }
  .logo { font-size: 1rem; letter-spacing: 0.06em; }
  .logo-icon { height: 38px; }

  /* Hero */
  .hero { min-height: 85vh; padding: 2rem 0; }
  .hero .container { margin-left: 1.25rem; }
  .hero__label { font-size: 0.7rem; margin-bottom: 1rem; }
  .hero__title { font-size: 2rem; margin-bottom: 1rem; }
  .hero__text { font-size: 0.9rem; max-width: 300px; margin-bottom: 1.5rem; }
  .hero__actions { flex-direction: column; gap: 0.75rem; max-width: 220px; }
  .hero__actions .btn { width: 100%; justify-content: center; padding: 0.75rem 1.5rem; font-size: 0.85rem; }
  .hero__actions .btn--outline { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.3); }

  /* Tagline */
  .tagline { padding: 4rem 0; }
  .tagline h2 { font-size: 1.5rem; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 260px; }
  .service-card h3 { font-size: 1.2rem; }

  /* Values */
  .value-item { padding: 1.5rem 0; gap: 1rem; }
  .value-num { font-size: 2rem; }
  .value-item h3 { font-size: 1rem; }

  /* About */
  .about-text h2 { font-size: 1.5rem; }

  /* Bento */
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--large-text { grid-column: span 1 !important; }
  .bento-card--large-text h3 { font-size: 1.3rem; }

  /* Testimonials */
  .testimonial-content blockquote { font-size: 1.2rem; }
  .testimonial-text blockquote { font-size: 1rem; }

  /* Process */
  .process-cards { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 350px; margin-left: auto; margin-right: auto; }

  /* Conditions */
  .condition-item { font-size: 0.9rem; }

  /* Benefits tags */
  .benefit-tags { flex-direction: column; align-items: center; }
  .benefit-tag { width: 100%; text-align: center; padding: 0.85rem 1.5rem; }

  /* Hadith */
  .hadith__text { font-size: 1.4rem; }

  /* CTA */
  .cta-banner { margin: 0 1rem 2rem; padding: 2.5rem 1.25rem; }
  .cta-banner h2 { font-size: 1.5rem; }
  .cta-banner .btn-group { flex-direction: column; }
  .cta-banner .btn-group .btn { width: 100%; justify-content: center; }

  /* Mobile nav */
  .mobile-nav a { font-size: 1.3rem; }
}