@media (max-width: 1100px) {
  .hero-grid,
  .about-home-grid,
  .cta-box {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .about-home-image {
    order: -1;
  }

  .cta-actions {
    justify-content: flex-start;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .signature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .desktop-nav,
  .desktop-only {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-section {
    padding: 30px 0 60px;
  }

  .hero-image-card,
  .hero-image-card img,
  .about-home-image,
  .about-home-image img {
    min-height: 420px;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .cta-box {
    padding: 36px 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 76px;
  }

  .container {
    width: min(94%, var(--container-width));
  }

  .brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand-text strong {
    font-size: 0.92rem;
  }

  .brand-text small {
    font-size: 0.67rem;
  }

  .hero-content h1 {
    font-size: 2.8rem;
  }

  .hero-text {
    font-size: 1rem;
  }

  .hero-buttons,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn,
  .cta-actions .btn {
    width: 100%;
  }

  .hero-socials {
    flex-wrap: wrap;
  }

  .floating-badge {
    position: static;
    margin-top: 14px;
    width: fit-content;
  }

  .hero-image-card {
    padding-bottom: 14px;
  }

  .badge-top,
  .badge-bottom {
    margin-left: 14px;
  }

  .features-grid,
  .signature-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .dish-image {
    height: 240px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .footer-grid {
    gap: 26px;
  }

  .site-footer {
    padding-top: 60px;
  }

  .whatsapp-float {
    width: 56px;
    height: 56px;
    right: 16px;
    bottom: 16px;
    font-size: 1.5rem;
  }
}