/* Fundo: degradê preto → verde-escuro, brilhos suaves e grade discreta.
   Sobrescreve o bg-background liso do build do Lovable. */
html { background: #060907; }
body {
  background-color: #060907;
  background-image:
    radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(4, 7, 5, .7) 100%),
    radial-gradient(1100px 620px at 88% -8%, rgba(74, 222, 128, .10), transparent 62%),
    radial-gradient(900px 640px at -12% 38%, rgba(16, 185, 129, .07), transparent 60%),
    radial-gradient(1200px 760px at 50% 112%, rgba(34, 197, 94, .09), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(180deg, #060907 0%, #07100b 40%, #0a1810 75%, #0b1d12 100%);
  background-size: auto, auto, auto, auto, 56px 56px, 56px 56px, auto;
  background-attachment: fixed;
}
.-z-10.bg-background { background: transparent !important; }
footer.bg-background { background: rgba(4, 8, 5, .55) !important; backdrop-filter: blur(6px); }

/* Brilho verde atrás do carro do hero. Vai na camada de fundo estática
   da seção (a div -z-10 que já existe atrás do hero), NÃO no wrapper do
   carro: aquele é animado pelo framer-motion, e quando a animação acaba
   o transform/opacity viram "none", o contexto de empilhamento some e um
   ::before com z-index -1 troca de camada — o brilho acendia e em seguida
   escurecia. Posição: o carro começa em pt-28 (7rem) / pt-32 no lg e tem
   proporção 3:2 com largura até 672px, então o centro dele fica ~1/3 da
   largura abaixo do padding. */
#top > .-z-10.bg-background {
  background:
    radial-gradient(ellipse min(95vw, 820px) min(62vw, 520px)
      at 50% calc(7rem + min(33vw, 224px)),
      rgba(74, 222, 128, .34), rgba(34, 197, 94, .13) 50%, transparent 72%) !important;
}
@media (min-width: 1024px) {
  #top > .-z-10.bg-background {
    background:
      radial-gradient(ellipse 820px 520px at 50% calc(8rem + 224px),
        rgba(74, 222, 128, .34), rgba(34, 197, 94, .13) 50%, transparent 72%) !important;
  }
}

/* Botão "Login" ao lado do "Assinar Agora": leva ao app (gps.avancesbr.com). */
.nav-ctas { display: flex; align-items: center; gap: .5rem; }
.btn-login {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9999px;
  padding: .4rem .9rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .8);
  transition: color .15s, border-color .15s, background-color .15s;
}
.btn-login:hover { color: #fff; border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .08); }