/* Vitrine SaaS panorâmica: ocupa toda a tela sem recorte lateral. */
.wrap {
  width: 100% !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding-inline: clamp(24px, 5vw, 88px) !important;
}

.nav { height: 82px !important; }

.hero {
  min-height: calc(100vh - 82px) !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr) !important;
  gap: clamp(44px, 6vw, 108px) !important;
  padding-top: clamp(56px, 7vh, 96px) !important;
  padding-bottom: clamp(72px, 10vh, 130px) !important;
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(46px, 5vw, 78px) !important;
}

.hero .lead { max-width: 720px; }
.hero .demo { width: 100%; max-width: 680px; justify-self: end; }

@media (max-width: 980px) {
  .wrap { padding-inline: clamp(20px, 4vw, 44px) !important; }
  .navlinks > a:not(.button) { display: none; }
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 58px !important;
    gap: 52px !important;
  }
  .hero > div:first-child { max-width: 780px; }
  .hero .demo { max-width: none; justify-self: stretch; }
  .hero h1 { font-size: clamp(44px, 8vw, 66px) !important; }
}

@media (max-width: 520px) {
  .wrap { padding-inline: 16px !important; }
  .nav { height: 70px !important; }
  .hero { padding-top: 36px !important; gap: 38px !important; }
  .hero h1 { font-size: 39px !important; }
}