/* ============================================================================
   V6 - HERO CLEAN + MENU IN FLOW
   - Menu aparece no topo, mas NÃO fica fixo: ele rola junto com a página.
   - Hero da home no estilo landing premium: título grande, branco, moderno.
============================================================================ */

/* Menu visível no topo e fora do comportamento fixed/sticky */
html body .wrapper > .header > .nav,
html body .header .nav,
html body .header-main .nav,
html body .header.inner .nav,
html body .cash-header .nav,
html body .cash-header.compact-page .nav,
html body .nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  max-width: none !important;
  z-index: 80 !important;
}
html body .header.inner,
html body .cash-header.compact-page {
  padding-top: 0 !important;
}
html body .nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 80px !important;
  background: linear-gradient(180deg, rgba(3,7,14,.94), rgba(5,12,22,.86)) !important;
  border-bottom: 1px solid rgba(255, 190, 70, .22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
}
html body .nav .content-area {
  position: relative !important;
  z-index: 82 !important;
}

/* HERO principal mais limpo e profissional */
html body .header-main {
  min-height: 880px !important;
  height: auto !important;
  overflow: hidden !important;
}
html body .hero-media {
  z-index: 0 !important;
}
html body .header__box.roi-hero-art-wrap {
  position: relative !important;
  z-index: 5 !important;
  min-height: calc(880px - 80px) !important;
  padding: 72px 20px 110px !important;
  align-items: center !important;
}
html body .header__content.roi-hero-art {
  width: min(1420px, 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(560px, 1fr) minmax(360px, 520px) !important;
  gap: 78px !important;
  align-items: center !important;
}
html body .roi-hero-art__brand {
  max-width: 820px !important;
  text-align: left !important;
}
html body .roi-hero-art__logo {
  width: 118px !important;
  height: auto !important;
  margin: 0 0 34px !important;
  justify-content: flex-start !important;
  filter: drop-shadow(0 0 22px rgba(135, 92, 255, .34)) !important;
}
html body .roi-hero-art__logo img {
  max-width: 118px !important;
  height: auto !important;
}
html body .roi-hero-art__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  margin: 0 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 210, 122, .30) !important;
  background: rgba(5, 10, 18, .54) !important;
  color: #ffe68f !important;
  font: 900 13px/1 Arial, Helvetica, sans-serif !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.36), inset 0 0 22px rgba(255, 190, 70, .06) !important;
}
html body .roi-hero-art__brand h1 {
  margin: 0 0 26px !important;
  max-width: 780px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 950 !important;
  font-size: clamp(74px, 8vw, 142px) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow:
    0 0 18px rgba(255,255,255,.28),
    0 0 48px rgba(255,255,255,.12),
    0 16px 38px rgba(0,0,0,.78) !important;
  filter: none !important;
}
html body .roi-hero-art__brand h1::before,
html body .roi-hero-art__brand h1::after {
  display: none !important;
  content: none !important;
}
html body .roi-hero-art__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 18px 0 30px !important;
}
html body .roi-hero-art__tags span {
  min-height: 32px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(5, 10, 18, .58) !important;
  color: #f6f4ee !important;
  font: 900 12px/32px Arial, Helvetica, sans-serif !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.04) !important;
}
html body .roi-hero-art .button.big {
  min-width: 315px !important;
  height: 58px !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 46px rgba(255, 157, 0, .25), inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
html body .roi-hero-art__panel {
  justify-self: end !important;
  max-width: 520px !important;
  padding: 38px 42px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: linear-gradient(180deg, rgba(8,13,23,.70), rgba(4,8,14,.54)) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.46), inset 0 0 42px rgba(255,255,255,.025) !important;
  backdrop-filter: blur(10px) !important;
  text-align: center !important;
}
html body .roi-hero-art__panel p {
  margin: 0 auto 24px !important;
  color: #f3f0e7 !important;
  font: 800 19px/1.75 Arial, Helvetica, sans-serif !important;
  letter-spacing: .01em !important;
}
html body .roi-hero-art__panel small {
  display: block !important;
  margin-top: 16px !important;
  color: rgba(238, 239, 239, .72) !important;
  font: 600 13px/1.5 Arial, Helvetica, sans-serif !important;
}
html body .hero-server-status {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1180px) {
  html body .header__content.roi-hero-art {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  html body .roi-hero-art__panel {
    justify-self: start !important;
  }
  html body .roi-hero-art__brand h1 {
    font-size: clamp(62px, 13vw, 118px) !important;
  }
}
@media (max-width: 720px) {
  html body .nav { min-height: 60px !important; }
  html body .header-main { min-height: auto !important; }
  html body .header__box.roi-hero-art-wrap {
    min-height: auto !important;
    padding: 42px 18px 72px !important;
  }
  html body .roi-hero-art__logo,
  html body .roi-hero-art__logo img { max-width: 92px !important; }
  html body .roi-hero-art__brand h1 {
    font-size: clamp(54px, 18vw, 86px) !important;
    letter-spacing: -.04em !important;
  }
  html body .roi-hero-art__panel {
    padding: 26px 22px !important;
  }
}