/* =====================================================
   FRAME & FÊTE — RESPONSIVE.CSS
   (Header / Hero / Ticker / Mobile Menu breakpoints)
   Range: 1600px -> 360px
   ===================================================== */

/* Small Laptop / Tablet Landscape (992px - 1199.98px) */
@media (max-width: 1199.98px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 42rem; order: -1; }
  .hero-stats{ gap: 2.8rem; }
}

/* Tablet Portrait (768px - 991.98px) */
@media (max-width: 991.98px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .hero{ padding-top: calc(var(--nav-h) + 1.6rem); }
  .hero-visual{ max-width: 34rem; }
}

/* Mobile Landscape (576px - 767.98px) */
@media (max-width: 767.98px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .btn-primary-custom, .btn-ghost-custom{ justify-content:center; }
  .hero-stats{ gap: 2rem 3.2rem; }
  .seal{ width: 8rem; height: 8rem; left: -1%; bottom: 1%; }
}

/* Mobile Portrait (360px - 575.98px) */
@media (max-width: 575.98px){
  .hero{ padding-left: 1.4rem; padding-right: 1.4rem; }
  .hero-visual{ max-width: 27rem; }
  .stat-num{ font-size: 2rem; }
  .seal{ width: 7rem; height: 7rem; }
}

/* Extra Small Mobile (below 360px, safety fallback) */
@media (max-width: 359.98px){
  .hero-title{ font-size: 3.1rem; }
  .hero-visual{ max-width: 23rem; }
}