/* ============================================================
   RESPONSIVO — anti-overflow + ajustes de celular
   (carrega por último; sobrescreve só o necessário)
   ============================================================ */

/* 1) MATA o overflow horizontal — que no mobile "estica" o viewport
      e quebra todas as media queries */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* itens de grid/flex precisam poder encolher, senão empurram a largura */
.hero-grid > *, .hero-copy, .hero-visual { min-width: 0; }

/* títulos/textos longos quebram em vez de empurrar a largura */
h1.hero-title, .hero-sub, .sec-head h2, .sec-head .sec-sub { overflow-wrap: break-word; }

/* elementos que podem vazar ficam contidos */
.hero-visual, .ai-orb, .logos-marquee { max-width: 100%; }
.logos-marquee { overflow: hidden; }

/* ---------------- NAV ---------------- */
@media (max-width: 860px) {
  .nav-links { display: none; }       /* links somem; seções acessíveis pelo scroll */
  .nav-inner { height: 62px; }
}
@media (max-width: 520px) {
  .nav-cta .btn-ghost { display: none; }   /* mantém só "Iniciar projeto" */
  .nav-cta .btn { padding: 9px 15px; font-size: 12.5px; }
  .brand span { font-size: 14px; }
  .brand .logo-icon { width: 20px; height: 20px; }
}

/* ---------------- HERO ---------------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }   /* reforço do empilhamento */
  .hero-visual { overflow: hidden; }           /* a orb não vaza pros lados */
}
@media (max-width: 560px) {
  .hero { padding-top: 58px; }
  h1.hero-title { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.14; }
  .hero-sub { font-size: 0.95rem; }
  .status-pill { font-size: 9.5px; padding: 5px 11px; }
}
@media (max-width: 480px) {
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }  /* CTAs full-width */
}

/* ---------------- AI ORB ---------------- */
@media (max-width: 560px) {
  .ai-orb { height: 300px; }
}

/* ---------------- CARDS ---------------- */
@media (max-width: 480px) {
  .why-card { padding: 24px 22px; }
  .why-banner { padding: 26px 22px; }
  .why-stat { min-width: 100%; max-width: none; }
  .carousel-card-body h3 { font-size: 1rem; }
}