/* HERO com wallpaper e overlay na paleta */
.hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  isolation: isolate;            /* garante overlay atrás do conteúdo */
  background: #0B4154;           /* fallback */
  background-image:
    linear-gradient( to bottom right, rgba(0,170,85,.60), rgba(11,65,84,.60) ),
    url("./images/hero-wallpaper.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 88px 0 56px;
  border-bottom: 1px solid rgba(244,244,244,.35);
}

/* container mais estreito para tipografia */
.hero .wrap {
  max-width: 950px;
}

/* selo/etiqueta */
.hero .stamp {
  display: inline-flex; gap: .5rem; align-items: center;
  padding: .35rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}

/* título aplica StageGrotesk Bold explicitamente */
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
}

/* texto de apoio (Light) */
.hero-lead {
  max-width: 740px;
  color: #eef7f1;
}

/* botão com cor da marca sobre imagem */
.btn-hero {
  --bs-btn-bg: #00AA55;
  --bs-btn-border-color: #00AA55;
  --bs-btn-hover-bg: #00964c;
  --bs-btn-hover-border-color: #00964c;
  --bs-btn-color: #fff;
  border-radius: 10px;
}

/* mobile: sobe contraste e foca no topo da arte */
@media (max-width: 575.98px){
  .hero {
    background-position: center top;
    padding: 72px 0 40px;
  }
}