/*
  Buu Brand Focus
  Direction: fewer generic sections, stronger anti-no-show positioning, cleaner premium visual language.
*/

:root {
  --buu-brand-primary: #44bab5;
  --buu-brand-primary-strong: #66f3ec;
  --buu-brand-dark: #020707;
  --buu-brand-deep: #061f22;
  --buu-brand-ink: #0f1716;
  --buu-brand-muted: #5c6f70;
  --buu-brand-soft: #eefdfa;
  --buu-brand-line: rgba(68, 186, 181, 0.18);
  --buu-brand-shadow: 0 24px 80px rgba(2, 7, 7, 0.12);
}

#main-content #banner-main {
  position: relative !important;
  display: block !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 72% 40%, rgba(68, 186, 181, 0.22), rgba(68, 186, 181, 0) 30%),
    radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 26%),
    linear-gradient(105deg, #000 0%, #061b1d 52%, #020606 100%) !important;
}

#main-content #banner-main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.32) 52%, rgba(0, 0, 0, 0.68) 100%),
    repeating-linear-gradient(90deg, rgba(68, 186, 181, 0.032) 0 1px, transparent 1px 88px) !important;
  pointer-events: none !important;
}

#main-content #banner-main::after {
  content: "ANTI-FALTA" !important;
  position: absolute !important;
  right: max(28px, calc((100vw - 1180px) / 2)) !important;
  top: 50% !important;
  z-index: 2 !important;
  color: rgba(255, 255, 255, 0.055) !important;
  font-size: clamp(5rem, 11vw, 10.8rem) !important;
  font-weight: 950 !important;
  line-height: 0.8 !important;
  letter-spacing: -0.08em !important;
  transform: translateY(-45%) rotate(-4deg) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#main-content #banner-main .ellipse-main,
#main-content #banner-main .hero-automation-visual,
#main-content #banner-main .hero-subtitle,
#main-content #banner-main .hero-kicker,
#main-content #banner-main .hero-impact-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#main-content #main-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 92px !important;
  padding: 0 32px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}

#main-content #main-header.scrolled,
body.scrolled #main-content #main-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(16, 23, 22, 0.10) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

#main-content #main-header>a {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
}

#main-content #main-header>a img {
  width: 70px !important;
  height: 70px !important;
  transition: filter 220ms ease !important;
}

#main-content #main-header:not(.scrolled)>a img,
body:not(.scrolled) #main-content #main-header:not(.scrolled)>a img {
  filter: brightness(0) invert(1) !important;
}

#main-content #main-header.scrolled>a img,
body.scrolled #main-content #main-header>a img,
body.mobile-nav-active #main-content #main-header>a img {
  filter: none !important;
}

#main-content #main-header .navmenu a,
#main-content #main-header .mobile-nav-toggle,
#main-content #main-header #language-select {
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.20em !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

#main-content #main-header.scrolled .navmenu a,
#main-content #main-header.scrolled .mobile-nav-toggle,
#main-content #main-header.scrolled #language-select,
body.scrolled #main-content #main-header .navmenu a,
body.scrolled #main-content #main-header .mobile-nav-toggle,
body.scrolled #main-content #main-header #language-select,
body.mobile-nav-active #main-content #main-header .navmenu a,
body.mobile-nav-active #main-content #main-header .mobile-nav-toggle,
body.mobile-nav-active #main-content #main-header #language-select {
  color: var(--buu-brand-ink) !important;
}

#main-content #main-header .navmenu a:hover,
#main-content #main-header.scrolled .navmenu a:hover {
  color: var(--buu-brand-primary) !important;
}

#main-content #main-header .btn-nav-cta,
#main-content #main-header .btn-nav-cta a {
  background: transparent !important;
  box-shadow: none !important;
}

#main-content #main-header .btn-nav-cta a {
  color: rgba(255, 255, 255, 0.92) !important;
}

#main-content #main-header.scrolled .btn-nav-cta a,
body.scrolled #main-content #main-header .btn-nav-cta a,
body.mobile-nav-active #main-content #main-header .btn-nav-cta a {
  color: var(--buu-brand-ink) !important;
}

@media (min-width: 1200px) {
  #main-content #main-header .navmenu {
    width: 100% !important;
  }

  #main-content #main-header .navmenu ul {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 22px !important;
  }

  #main-content #main-header .navmenu li:nth-last-child(-n + 3) {
    margin-left: auto !important;
  }

  #main-content #main-header .navmenu li:nth-last-child(2),
  #main-content #main-header .navmenu li:last-child {
    margin-left: 0 !important;
  }
}

#main-content #banner-main .hero-container {
  position: static !important;
  z-index: auto !important;
  width: min(100% - 48px, 1180px) !important;
  max-width: 1180px !important;
  min-height: 100svh !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#main-content #banner-main .hero-content,
#main-content #banner-main .container.topo.centered-hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-content #banner-main .hero-content {
  position: absolute !important;
  left: max(32px, calc((100vw - 1180px) / 2)) !important;
  top: 50% !important;
  z-index: 3 !important;
  width: min(680px, calc(100vw - 64px)) !important;
  transform: translateY(-42%) !important;
}

#main-content #banner-main .container.topo.centered-hero,
#main-content #banner-main .container.topo.centered-hero .lef {
  text-align: left !important;
  align-items: flex-start !important;
}

#main-content #banner-main .container.topo.centered-hero .lef {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  position: relative !important;
  max-width: 9.4ch !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(3.3rem, 5.8vw, 6.25rem) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.065em !important;
  text-align: left !important;
  text-wrap: balance !important;
  text-transform: none !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(34px, 7vh, 72px) !important;
  z-index: 4 !important;
  display: flex !important;
  justify-content: center !important;
  width: min(100%, 360px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

#main-content #banner-main .btn-start {
  display: none !important;
}

#main-content #banner-main .btn-getstarted {
  width: 100% !important;
  min-height: 54px !important;
  padding: 16px 26px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(126, 239, 235, 0.56) !important;
  color: #041f20 !important;
  background: linear-gradient(135deg, #78fff8 0%, #44bab5 58%, #238f8a 100%) !important;
  box-shadow: 0 22px 58px rgba(68, 186, 181, 0.24) !important;
  font-size: 0.88rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  justify-content: center !important;
}

#main-content #nps-service {
  margin-top: 0 !important;
  background: #ffffff !important;
}

#how-working,
#business-marketplace,
#impact-finance,
#guarantee,
#blog {
  display: none !important;
}

#main-content #nps-service,
#main-content #problems,
#main-content #product-demo,
#main-content #motor-buu,
#main-content #without,
#main-content #segments,
#main-content #testimonials,
#main-content #pricing,
#main-content #faq,
#main-content #final-cta {
  position: relative !important;
  overflow: hidden !important;
}

#main-content #product-demo,
#main-content #motor-buu,
#main-content #testimonials,
#main-content #final-cta {
  background:
    radial-gradient(circle at 18% 12%, rgba(68, 186, 181, .24), transparent 32%),
    linear-gradient(135deg, #020707 0%, #061f22 54%, #020606 100%) !important;
  color: #fff !important;
}

#main-content #nps-service {
  padding: 26px 0 !important;
  border-bottom: 1px solid rgba(16, 23, 22, 0.08) !important;
}

#main-content .nps-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

#main-content .nps-item {
  border: 1px solid rgba(68, 186, 181, 0.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5fffd 100%) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05) !important;
  padding: 24px 18px !important;
}

#main-content .nps-value {
  color: var(--buu-brand-ink) !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
}

#main-content .nps-label {
  color: var(--buu-brand-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

#main-content #problems,
#main-content #without,
#main-content #segments,
#main-content #pricing,
#main-content #faq {
  padding: clamp(72px, 9vw, 116px) 0 !important;
  background: #fff !important;
}

#main-content .problems-title,
#main-content .segments-header h2,
#main-content .section-title-testimonials,
#main-content .faq-title,
#main-content #pricing h2,
#main-content #final-cta h2 {
  color: var(--buu-brand-ink) !important;
  font-size: clamp(2.25rem, 4.4vw, 4.9rem) !important;
  line-height: 0.96 !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
}

#main-content #product-demo h2,
#main-content #motor-buu h2,
#main-content #testimonials h2,
#main-content #final-cta h2 {
  color: #fff !important;
  font-size: clamp(2.35rem, 4.8vw, 5.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.06em !important;
  font-weight: 950 !important;
}

#main-content .problems-subtitle,
#main-content .problems-proof,
#main-content .faq-description,
#main-content .benefits-subtitle {
  color: var(--buu-brand-muted) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

#main-content .comparison-wrapper {
  align-items: stretch !important;
  gap: 20px !important;
  margin-top: 44px !important;
}

#main-content .problem-card,
#main-content .without-card,
#main-content .pricing-card,
#main-content .faq-item {
  border-radius: 10px !important;
  border: 1px solid rgba(16, 23, 22, 0.08) !important;
  box-shadow: var(--buu-brand-shadow) !important;
}

#main-content .problem-card.danger,
#main-content .without-card.danger {
  background: linear-gradient(180deg, #fff 0%, #fff7f6 100%) !important;
}

#main-content .problem-card.success,
#main-content .without-card.success {
  background: linear-gradient(180deg, #f4fffd 0%, #ffffff 100%) !important;
  border-color: rgba(68, 186, 181, 0.32) !important;
}

#main-content #product-demo,
#main-content #motor-buu,
#main-content #testimonials,
#main-content #final-cta {
  padding: clamp(82px, 10vw, 132px) 0 !important;
}

#main-content #product-demo::before,
#main-content #motor-buu::before,
#main-content #testimonials::before,
#main-content #final-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(90deg, rgba(68, 186, 181, 0.035) 0 1px, transparent 1px 94px) !important;
  pointer-events: none !important;
}

#main-content .demo-header,
#main-content .motor-header,
#main-content .testimonials-header {
  max-width: 880px !important;
  margin-inline: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

#main-content .demo-badge,
#main-content .motor-badge,
#main-content .video-demo-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 239, 235, 0.28) !important;
  color: var(--buu-brand-primary-strong) !important;
  background: rgba(68, 186, 181, 0.10) !important;
  font-size: 0.75rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

#main-content #product-demo p,
#main-content #motor-buu p,
#main-content #testimonials p,
#main-content #final-cta p {
  color: rgba(255, 255, 255, 0.72) !important;
}

#main-content .demo-stage,
#main-content .wa-section,
#main-content .motor-card,
#main-content .testimonial-card {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(126, 239, 235, 0.18) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#main-content .motor-card h3,
#main-content .motor-card li,
#main-content .testimonial-text,
#main-content .testimonial-author,
#main-content .social-proof-text strong,
#main-content .social-proof-text span {
  color: #fff !important;
}

#main-content .motor-card li {
  color: rgba(255, 255, 255, 0.72) !important;
}

#main-content .segment-card {
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: var(--buu-brand-shadow) !important;
  border: 1px solid rgba(16, 23, 22, 0.08) !important;
}

#main-content .segment-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(2, 7, 7, 0.86) 100%) !important;
}

#main-content .pricing-card {
  border-color: rgba(68, 186, 181, 0.18) !important;
}

#main-content .pricing-pill,
#main-content .pricing-pill-trial,
#main-content .pricing-pill-recommended {
  background: rgba(68, 186, 181, 0.12) !important;
  color: var(--buu-brand-ink) !important;
  border: 1px solid rgba(68, 186, 181, 0.18) !important;
}

#main-content #final-cta .btn-getstarted {
  background: linear-gradient(135deg, #78fff8 0%, #44bab5 58%, #238f8a 100%) !important;
  color: #041f20 !important;
}

@media (max-width: 992px) {
  #main-content #banner-main::after {
    right: -12vw !important;
    opacity: 0.045 !important;
  }

  #main-content .nps-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #main-content #main-header {
    height: 74px !important;
    padding: 0 18px !important;
  }

  #main-content #main-header>a img {
    width: 56px !important;
    height: 56px !important;
  }

  #main-content #banner-main .hero-content {
    left: 24px !important;
    top: 48% !important;
    width: calc(100vw - 48px) !important;
    transform: translateY(-46%) !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 10ch !important;
    font-size: clamp(2.7rem, 12vw, 4rem) !important;
    line-height: 0.94 !important;
  }

  #main-content #banner-main .btn-group {
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    width: min(100%, 310px) !important;
  }

  #main-content .comparison-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Buu landing refinement — 2026-05
   Goal: premium anti-no-show positioning without changing routes/APIs.
   ========================================================= */

#main-content #banner-main .hero-impact-bar,
#main-content #banner-main .hero-subtitle,
#main-content #banner-main .hero-kicker,
#main-content #banner-main .hero-automation-visual {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#main-content #banner-main .hero-impact-bar {
  position: absolute !important;
  top: 92px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 18px !important;
  overflow-x: auto !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(0, 0, 0, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#main-content #banner-main .hero-impact-bar span {
  flex: 0 0 auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#main-content #banner-main .hero-kicker {
  width: fit-content !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  color: #d8fffd !important;
  background: rgba(68, 186, 181, 0.14) !important;
  border: 1px solid rgba(68, 186, 181, 0.32) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#main-content #banner-main .hero-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--buu-brand-primary);
  box-shadow: 0 0 0 6px rgba(68, 186, 181, 0.15);
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  max-width: 560px !important;
  margin: 22px 0 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: static !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  margin-top: 34px !important;
  transform: none !important;
  gap: 12px !important;
}

#main-content #banner-main .btn-getstarted,
#main-content #banner-main .btn-start {
  width: auto !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

#main-content #banner-main .btn-start {
  display: inline-flex !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#main-content #banner-main .hero-automation-visual {
  position: absolute !important;
  right: max(28px, calc((100vw - 1180px) / 2)) !important;
  top: 50% !important;
  z-index: 4 !important;
  width: min(410px, 34vw) !important;
  min-height: 520px !important;
  transform: translateY(-42%) rotate(2deg) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.hero-phone-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 253, 250, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.34), 0 0 0 10px rgba(255, 255, 255, 0.045);
}

.hero-phone-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(68, 186, 181, 0.22), transparent 42%);
  pointer-events: none;
}

.hero-phone-header,
.hero-message-flow,
.hero-revenue-card {
  position: relative;
  z-index: 1;
}

.hero-phone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 22, 0.08);
}

.hero-phone-header img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.hero-phone-header strong {
  display: block;
  color: #0f1716;
  font-size: 15px;
  font-weight: 950;
}

.hero-phone-header span {
  color: #5c6f70;
  font-size: 12px;
  font-weight: 750;
}

.hero-message-flow {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.hero-message {
  width: fit-content;
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 18px;
  color: #142120;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
}

.hero-message.bot {
  border-bottom-left-radius: 6px;
}

.hero-message.client {
  justify-self: end;
  color: #033331;
  background: #d6fbef;
  border-bottom-right-radius: 6px;
}

.hero-message.success {
  color: #ffffff;
  background: linear-gradient(135deg, #168f89, #44bab5);
}

.hero-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hero-choice-row span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 12px;
  color: #08847f;
  background: #ffffff;
  border: 1px solid rgba(68, 186, 181, 0.24);
  font-size: 12px;
  font-weight: 900;
}

.hero-revenue-card {
  align-self: flex-end;
  width: min(260px, 72%);
  margin-top: -34px;
  margin-right: -26px;
  padding: 18px;
  border-radius: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, #102322, #44bab5);
  box-shadow: 0 26px 66px rgba(68, 186, 181, 0.26);
}

.hero-revenue-card span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-revenue-card strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.06em;
}

#main-content #main-header #language-select {
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.video-demo-cta,
.pricing-subtitle-wrap {
  margin-top: 50px;
  text-align: center;
}

.pricing-subtitle-wrap {
  margin-top: 0;
  margin-bottom: 40px;
}

.video-close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 1100px) {
  #main-content #banner-main .hero-content {
    width: min(620px, calc(100vw - 48px)) !important;
  }

  #main-content #banner-main .hero-automation-visual {
    width: min(360px, 32vw) !important;
  }
}

@media (max-width: 920px) {
  #main-content #banner-main {
    min-height: auto !important;
    padding: 136px 0 52px !important;
  }

  #main-content #banner-main .hero-container {
    display: grid !important;
    gap: 34px !important;
    min-height: auto !important;
    width: min(100% - 32px, 680px) !important;
  }

  #main-content #banner-main .hero-content,
  #main-content #banner-main .hero-automation-visual {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
  }

  #main-content #banner-main .hero-automation-visual {
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 10ch !important;
    font-size: clamp(3rem, 12vw, 5.2rem) !important;
  }
}

@media (max-width: 640px) {
  #main-content #main-header {
    height: 76px !important;
    padding: 0 18px !important;
  }

  #main-content #main-header>a img {
    width: 56px !important;
    height: 56px !important;
  }

  #main-content #banner-main .hero-impact-bar {
    top: 76px !important;
    justify-content: flex-start !important;
  }

  #main-content #banner-main .btn-group,
  #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    flex-direction: column !important;
  }

  #main-content #banner-main .btn-getstarted,
  #main-content #banner-main .btn-start {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-revenue-card {
    margin-right: 0;
  }
}

/* =========================================================
   Buu hero hard reset — assertive NJR-inspired direction
   Goal: campaign-style first fold, not a product explainer.
   ========================================================= */

#main-content #banner-main {
  min-height: 100svh !important;
  padding: 0 !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 23%),
    linear-gradient(135deg, #44bab5 0%, #2faaa5 42%, #123f42 100%) !important;
}

#main-content #banner-main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(2, 7, 7, 0.18) 0%, rgba(2, 7, 7, 0.03) 42%, rgba(2, 7, 7, 0.32) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
  background-size: auto, 120px 120px, 120px 120px !important;
  pointer-events: none !important;
}

#main-content #banner-main::after {
  content: "BUU" !important;
  position: absolute !important;
  inset: auto 0 7vh 0 !important;
  z-index: 2 !important;
  color: rgba(255, 255, 255, 0.105) !important;
  font-size: clamp(9rem, 26vw, 26rem) !important;
  font-weight: 1000 !important;
  line-height: 0.72 !important;
  letter-spacing: -0.14em !important;
  text-align: center !important;
  transform: none !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Above the fold must stay clean: no product cards, no badges, no numbers. */
#main-content #banner-main .hero-impact-bar,
#main-content #banner-main .hero-kicker,
#main-content #banner-main .hero-automation-visual,
#main-content #banner-main .hero-revenue-card,
#main-content #banner-main .hero-phone-card,
#main-content #banner-main .ellipse-main,
#main-content #banner-main .btn-start {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#main-content #main-header {
  height: 86px !important;
  padding: 0 clamp(18px, 4vw, 54px) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#main-content #main-header.scrolled,
body.scrolled #main-content #main-header,
body.mobile-nav-active #main-content #main-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(15, 23, 22, 0.10) !important;
}

#main-content #main-header>a {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#main-content #main-header>a img {
  width: 64px !important;
  height: 64px !important;
}

#main-content #main-header .navmenu a,
#main-content #main-header .mobile-nav-toggle,
#main-content #main-header #language-select {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

#main-content #main-header.scrolled .navmenu a,
#main-content #main-header.scrolled .mobile-nav-toggle,
#main-content #main-header.scrolled #language-select,
body.scrolled #main-content #main-header .navmenu a,
body.scrolled #main-content #main-header .mobile-nav-toggle,
body.scrolled #main-content #main-header #language-select,
body.mobile-nav-active #main-content #main-header .navmenu a,
body.mobile-nav-active #main-content #main-header .mobile-nav-toggle,
body.mobile-nav-active #main-content #main-header #language-select {
  color: #0f1716 !important;
}

#main-content #banner-main .hero-container {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 100svh !important;
  width: min(100% - 40px, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(98px, 13vh, 148px) 0 clamp(48px, 8vh, 86px) !important;
}

#main-content #banner-main .hero-content {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  width: min(100%, 1080px) !important;
  transform: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#main-content #banner-main .container.topo.centered-hero,
#main-content #banner-main .container.topo.centered-hero .lef {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  max-width: 10ch !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  font-size: clamp(4.6rem, 11.2vw, 11.8rem) !important;
  line-height: 0.78 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.095em !important;
  text-align: center !important;
  text-wrap: balance !important;
  text-transform: none !important;
  text-shadow: 0 28px 90px rgba(2, 7, 7, 0.26) !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 620px !important;
  margin: clamp(22px, 3vw, 34px) auto 0 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  width: auto !important;
  margin: clamp(30px, 4.6vw, 52px) auto 0 !important;
  transform: none !important;
}

#main-content #banner-main .btn-getstarted {
  width: auto !important;
  min-width: 220px !important;
  min-height: 54px !important;
  padding: 17px 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  color: #0f1716 !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(2, 7, 7, 0.20) !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

#main-content #banner-main .btn-getstarted:hover {
  color: #ffffff !important;
  background: #0f1716 !important;
  border-color: #0f1716 !important;
  transform: translateY(-2px) !important;
}

/* Keep the next fold cleaner: stats are proof, not part of the hero. */
#main-content #nps-service {
  padding: clamp(38px, 5vw, 58px) 0 !important;
  background: #fbfffe !important;
  border-bottom: 1px solid rgba(15, 23, 22, 0.08) !important;
}

@media (max-width: 920px) {
  #main-content #banner-main {
    min-height: 100svh !important;
    padding: 0 !important;
  }

  #main-content #banner-main .hero-container {
    width: min(100% - 28px, 720px) !important;
    min-height: 100svh !important;
    padding: 108px 0 54px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 9.6ch !important;
    font-size: clamp(4.1rem, 18vw, 7.2rem) !important;
    line-height: 0.8 !important;
  }

  #main-content #banner-main::after {
    bottom: 10vh !important;
    font-size: clamp(8rem, 42vw, 15rem) !important;
  }
}

@media (max-width: 640px) {
  #main-content #main-header {
    height: 72px !important;
    padding: 0 16px !important;
  }

  #main-content #main-header>a img {
    width: 52px !important;
    height: 52px !important;
  }

  #main-content #banner-main .hero-container {
    width: min(100% - 24px, 520px) !important;
    padding-top: 92px !important;
    padding-bottom: 44px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(3.65rem, 21vw, 5.65rem) !important;
    line-height: 0.82 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    max-width: 22rem !important;
    font-size: 1.05rem !important;
    line-height: 1.32 !important;
  }

  #main-content #banner-main .btn-group,
  #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    width: 100% !important;
  }

  #main-content #banner-main .btn-getstarted {
    width: min(100%, 312px) !important;
    justify-content: center !important;
  }
}


/* =========================================================
   Buu hero fine tune — logo + typography scale
   Goal: keep the approved campaign hero, with cleaner hierarchy.
   ========================================================= */

#main-content #main-header>a img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  filter: none !important;
}

#main-content #main-header:not(.scrolled)>a img,
body:not(.scrolled) #main-content #main-header:not(.scrolled)>a img {
  content: url('/assets/img/logo_land.png') !important;
  filter: none !important;
}

#main-content #main-header.scrolled>a img,
body.scrolled #main-content #main-header>a img,
body.mobile-nav-active #main-content #main-header>a img {
  content: url('/assets/img/logo.png') !important;
  filter: none !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  max-width: 10.4ch !important;
  font-size: clamp(3.85rem, 8.65vw, 8.95rem) !important;
  line-height: 0.84 !important;
  letter-spacing: -0.082em !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  max-width: 560px !important;
  margin: clamp(18px, 2.4vw, 28px) auto 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.72rem, 0.92vw, 0.88rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

@media (max-width: 920px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 10.2ch !important;
    font-size: clamp(3.35rem, 14vw, 5.85rem) !important;
    line-height: 0.86 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    max-width: 34rem !important;
    font-size: clamp(0.68rem, 1.8vw, 0.82rem) !important;
    letter-spacing: 0.16em !important;
  }
}

@media (max-width: 640px) {
  #main-content #main-header>a img {
    width: 48px !important;
    height: 48px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 20.8ch !important;
    font-size: clamp(3.05rem, 12vw, 4.7rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.075em !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    max-width: 19.5rem !important;
    margin-top: 18px !important;
    font-size: 0.68rem !important;
    line-height: 1.62 !important;
    letter-spacing: 0.14em !important;
  }
}

/* =========================================================
   Buu landing assertive polish — hero scale + mobile menu + section focus
   Goal: less information, stronger campaign impact, premium conversion flow.
   ========================================================= */

:root {
  --buu-section-cream: #fbfffe;
  --buu-section-mint: #f0fffc;
  --buu-section-ink: #071211;
  --buu-section-muted: #627474;
}

/* HERO: approved concept, smaller title, subtitle in one compact line */
#main-content #banner-main .hero-container {
  width: min(100% - 40px, 1180px) !important;
  padding-top: clamp(92px, 11vh, 128px) !important;
  padding-bottom: clamp(42px, 7vh, 72px) !important;
}

#main-content #banner-main .hero-content {
  width: min(100%, 980px) !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  max-width: 11.2ch !important;
  font-size: clamp(3.1rem, 6.85vw, 7.15rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.075em !important;
  text-shadow: 0 20px 70px rgba(2, 7, 7, 0.20) !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  display: block !important;
  width: max-content !important;
  max-width: calc(100vw - 40px) !important;
  margin: clamp(16px, 2vw, 22px) auto 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(0.66rem, 0.74vw, 0.78rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  margin-top: clamp(24px, 3.4vw, 38px) !important;
}

#main-content #banner-main .btn-getstarted {
  min-height: 50px !important;
  min-width: 206px !important;
  padding: 15px 26px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
}

#main-content #banner-main::after {
  bottom: 8vh !important;
  color: rgba(255, 255, 255, 0.085) !important;
  font-size: clamp(8rem, 23vw, 22rem) !important;
}

/* HEADER / MOBILE MENU: do not rely on icon font for hamburger */
#main-content #main-header {
  height: 78px !important;
}

#main-content #main-header>a img {
  width: 52px !important;
  height: 52px !important;
}

#main-content #main-header .mobile-nav-toggle {
  position: absolute !important;
  top: 50% !important;
  right: clamp(16px, 4vw, 30px) !important;
  z-index: 10002 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#main-content #main-header.scrolled .mobile-nav-toggle,
body.scrolled #main-content #main-header .mobile-nav-toggle,
body.mobile-nav-active #main-content #main-header .mobile-nav-toggle {
  border-color: rgba(15, 23, 22, 0.14) !important;
  color: var(--buu-section-ink) !important;
  background: rgba(68, 186, 181, 0.10) !important;
}

#main-content #main-header .mobile-nav-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 18px !important;
  height: 14px !important;
  gap: 4px !important;
}

#main-content #main-header .mobile-nav-icon span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-icon span:nth-child(2) {
  opacity: 0 !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}

@media (max-width: 1199px) {
  #main-content #main-header .mobile-nav-toggle {
    display: inline-flex !important;
  }

  #main-content #main-header .navmenu {
    position: static !important;
    padding: 0 !important;
  }

  #main-content #main-header .navmenu>ul {
    display: none !important;
  }

  body.mobile-nav-active #main-content #main-header .navmenu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: 104px 20px 28px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--buu-section-ink) !important;
    overflow-y: auto !important;
  }

  body.mobile-nav-active #main-content #main-header .navmenu>ul {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: min(100%, 460px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.mobile-nav-active #main-content #main-header .navmenu li,
  body.mobile-nav-active #main-content #main-header .navmenu li:nth-last-child(-n + 3),
  body.mobile-nav-active #main-content #main-header .navmenu li:nth-last-child(2),
  body.mobile-nav-active #main-content #main-header .navmenu li:last-child {
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobile-nav-active #main-content #main-header .navmenu a,
  body.mobile-nav-active #main-content #main-header #language-select {
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(15, 23, 22, 0.08) !important;
    border-radius: 999px !important;
    color: var(--buu-section-ink) !important;
    background: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-align: center !important;
  }

  body.mobile-nav-active #main-content #main-header .btn-nav-cta a {
    color: #ffffff !important;
    background: var(--buu-brand-primary) !important;
    border-color: var(--buu-brand-primary) !important;
  }
}

/* SECTION STRATEGY: keep only the conversion story, hide redundant explainers */
#video-demo,
#without,
#how-working,
#business-marketplace,
#impact-finance,
#guarantee,
#blog {
  display: none !important;
}

#main-content #nps-service,
#main-content #problems,
#main-content #product-demo,
#main-content #motor-buu,
#main-content #segments,
#main-content #testimonials,
#main-content #pricing,
#main-content #faq,
#main-content #final-cta {
  isolation: isolate !important;
}

#main-content #nps-service {
  padding: clamp(22px, 3.2vw, 40px) 0 !important;
  background: var(--buu-section-ink) !important;
  border: 0 !important;
}

#main-content .nps-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  overflow: hidden !important;
}

#main-content .nps-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#main-content .nps-item:last-child {
  border-right: 0 !important;
}

#main-content .nps-value {
  color: #ffffff !important;
  font-size: clamp(1.65rem, 3vw, 2.8rem) !important;
  letter-spacing: -0.06em !important;
}

#main-content .nps-label {
  max-width: 150px !important;
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.12em !important;
}

#main-content #problems,
#main-content #segments,
#main-content #pricing,
#main-content #faq {
  padding: clamp(66px, 8vw, 110px) 0 !important;
  background: var(--buu-section-cream) !important;
}

#main-content #problems .container,
#main-content #product-demo .container,
#main-content #motor-buu .container,
#main-content #segments .container,
#main-content #testimonials .testimonials-wrapper,
#main-content #pricing .container,
#main-content #faq .container,
#main-content #final-cta .container {
  width: min(100% - 32px, 1120px) !important;
  max-width: 1120px !important;
}

#main-content .problems-title,
#main-content .segments-header h2,
#main-content .section-title-testimonials,
#main-content .faq-title,
#main-content #pricing h2,
#main-content #product-demo h2,
#main-content #motor-buu h2,
#main-content #final-cta h2 {
  max-width: 780px !important;
  margin-inline: auto !important;
  font-size: clamp(2.25rem, 4.6vw, 4.8rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
  font-weight: 1000 !important;
}

#main-content .problems-subtitle,
#main-content .problems-proof,
#main-content .faq-description,
#main-content #product-demo p,
#main-content #motor-buu p,
#main-content #testimonials p,
#main-content #final-cta p {
  max-width: 620px !important;
  margin-inline: auto !important;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem) !important;
  line-height: 1.65 !important;
}

#main-content .comparison-wrapper,
#main-content .motor-grid,
#main-content .segments-grid,
#main-content .testimonial-scroll,
#main-content #pricing .row {
  margin-top: clamp(30px, 4vw, 52px) !important;
}

#main-content .problem-card,
#main-content .motor-card,
#main-content .pricing-card,
#main-content .faq-item,
#main-content .testimonial-card,
#main-content .segment-card {
  border-radius: 20px !important;
  box-shadow: 0 20px 64px rgba(7, 18, 17, 0.10) !important;
}

#main-content .problem-card .bg-number,
#main-content .without-card .bg-number {
  opacity: 0.045 !important;
}

#main-content #product-demo,
#main-content #motor-buu,
#main-content #testimonials,
#main-content #final-cta {
  padding: clamp(74px, 9vw, 118px) 0 !important;
  background:
    radial-gradient(circle at 70% 16%, rgba(68, 186, 181, 0.22), rgba(68, 186, 181, 0) 31%),
    linear-gradient(135deg, #071211 0%, #0c3234 54%, #071211 100%) !important;
}

#main-content .demo-badge,
#main-content .motor-badge,
#main-content .video-demo-badge,
#main-content .pricing-pill,
#main-content .pricing-pill-trial,
#main-content .pricing-pill-recommended {
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

#main-content .demo-stage,
#main-content .wa-section,
#main-content .motor-card,
#main-content .testimonial-card {
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(126, 239, 235, 0.16) !important;
  box-shadow: 0 26px 82px rgba(0, 0, 0, 0.22) !important;
}

#main-content .motor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#main-content .segments-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#main-content .segment-card {
  min-height: 360px !important;
}

#main-content .segment-card img {
  filter: saturate(0.92) contrast(1.04) !important;
}

#main-content .segment-overlay h3 {
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  letter-spacing: -0.03em !important;
}

#main-content #pricing {
  margin-top: 0 !important;
  padding-top: clamp(70px, 8vw, 110px) !important;
  padding-bottom: clamp(70px, 8vw, 110px) !important;
}

#main-content #pricing .pricing-card {
  min-height: 100% !important;
  padding: clamp(24px, 3vw, 34px) !important;
}

#main-content #pricing .feature-list li {
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.45 !important;
}

#main-content #faq .row {
  align-items: flex-start !important;
}

#main-content #final-cta {
  text-align: center !important;
}

@media (max-width: 920px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 11ch !important;
    font-size: clamp(2.95rem, 12.4vw, 4.9rem) !important;
    line-height: 0.9 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    font-size: clamp(0.58rem, 1.65vw, 0.72rem) !important;
    letter-spacing: 0.13em !important;
  }

  #main-content .motor-grid,
  #main-content .segments-grid {
    grid-template-columns: 1fr !important;
  }

  #main-content .segment-card {
    min-height: 280px !important;
  }
}

@media (max-width: 640px) {
  #main-content #main-header {
    height: 70px !important;
    padding: 0 16px !important;
  }

  #main-content #main-header>a img {
    width: 46px !important;
    height: 46px !important;
  }

  #main-content #banner-main .hero-container {
    width: min(100% - 24px, 520px) !important;
    padding-top: 84px !important;
    padding-bottom: 36px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    max-width: 10.4ch !important;
    font-size: clamp(2.72rem, 14.6vw, 4.05rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.068em !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    max-width: calc(100vw - 24px) !important;
    font-size: clamp(0.48rem, 2.2vw, 0.62rem) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.105em !important;
    white-space: nowrap !important;
  }

  #main-content #banner-main .btn-getstarted {
    width: min(100%, 286px) !important;
    min-height: 48px !important;
  }

  #main-content #nps-service {
    padding: 0 !important;
  }

  #main-content .nps-stats {
    grid-template-columns: 1fr !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #main-content .nps-item {
    min-height: 62px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  #main-content .nps-item:last-child {
    border-bottom: 0 !important;
  }

  #main-content .problems-title,
  #main-content .segments-header h2,
  #main-content .section-title-testimonials,
  #main-content .faq-title,
  #main-content #pricing h2,
  #main-content #product-demo h2,
  #main-content #motor-buu h2,
  #main-content #final-cta h2 {
    font-size: clamp(2rem, 10.5vw, 3.2rem) !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   Buu conversion polish — floating CTA + brand palette pass
   Goal: reduce black, reinforce #44bab5 / #267076, improve section selling rhythm.
   ========================================================= */

:root {
  --buu-brand-primary: #44bab5;
  --buu-brand-dark-teal: #267076;
  --buu-brand-deep-teal: #1f5e64;
  --buu-brand-ink: #102223;
  --buu-brand-muted: #5f7475;
  --buu-brand-cream: #f7fffd;
  --buu-brand-mint: #ecfbf8;
  --buu-brand-line: rgba(38, 112, 118, 0.14);
  --buu-brand-shadow-soft: 0 18px 54px rgba(38, 112, 118, 0.12);
  --buu-brand-shadow-card: 0 24px 70px rgba(38, 112, 118, 0.14);
  --buu-section-ink: #267076;
  --buu-section-cream: #f7fffd;
  --buu-section-mint: #ecfbf8;
  --buu-section-muted: #5f7475;
}

/* Hero stays approved, but no heavy black feeling. */
#main-content #banner-main {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 80% 18%, rgba(68, 186, 181, .34), rgba(68, 186, 181, 0) 30%),
    linear-gradient(135deg, #44bab5 0%, #31979c 44%, #267076 100%) !important;
}

#main-content #banner-main::before {
  background:
    linear-gradient(180deg, rgba(16, 34, 35, .12) 0%, rgba(16, 34, 35, 0) 44%, rgba(16, 34, 35, .20) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .062) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px) !important;
  background-size: auto, 128px 128px, 128px 128px !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  font-size: clamp(2.9rem, 6.35vw, 6.55rem) !important;
  max-width: 11.3ch !important;
  letter-spacing: -0.071em !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  max-width: none !important;
  width: max-content !important;
  white-space: nowrap !important;
  font-size: clamp(.62rem, .68vw, .74rem) !important;
  letter-spacing: .165em !important;
  color: rgba(255, 255, 255, .86) !important;
}

/* Stronger but calmer section palette: teal replaces black. */
#main-content #nps-service,
#main-content #product-demo,
#main-content #motor-buu,
#main-content #testimonials,
#main-content #final-cta {
  background:
    radial-gradient(circle at 76% 12%, rgba(68, 186, 181, .24), rgba(68, 186, 181, 0) 31%),
    linear-gradient(135deg, #267076 0%, #1f5e64 58%, #184c51 100%) !important;
  color: #fff !important;
}

#main-content #problems,
#main-content #segments,
#main-content #pricing,
#main-content {
  background:
    radial-gradient(circle at 84% 4%, rgba(68, 186, 181, .12), rgba(68, 186, 181, 0) 28%),
    linear-gradient(180deg, #f7fffd 0%, #ffffff 100%) !important;
}

/* Section rhythm: every fold must feel intentional and sales-driven. */
#main-content #problems,
#main-content #product-demo,
#main-content #motor-buu,
#main-content #segments,
#main-content #testimonials,
#main-content #pricing,
#main-content #faq,
#main-content #final-cta {
  padding-block: clamp(68px, 8.6vw, 118px) !important;
}

#main-content .problems-title,
#main-content .segments-header h2,
#main-content .section-title-testimonials,
#main-content .faq-title,
#main-content #pricing h2,
#main-content #product-demo h2,
#main-content #motor-buu h2,
#main-content #final-cta h2 {
  color: var(--buu-brand-ink) !important;
  max-width: 820px !important;
  font-size: clamp(2.05rem, 4.05vw, 4.35rem) !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
}

#main-content #product-demo h2,
#main-content #motor-buu h2,
#main-content #testimonials h2,
#main-content #final-cta h2 {
  color: #ffffff !important;
}

#main-content .problems-subtitle,
#main-content .problems-proof,
#main-content .faq-description,
#main-content .section-subtitle-testimonials,
#main-content #product-demo p,
#main-content #motor-buu p,
#main-content #testimonials p,
#main-content #final-cta p {
  max-width: 650px !important;
  font-size: clamp(.96rem, 1.12vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

#main-content .problems-subtitle,
#main-content .problems-proof,
#main-content .faq-description,
#main-content .section-subtitle-testimonials {
  color: var(--buu-brand-muted) !important;
}

/* Tags/badges: consistent campaign language, no generic template look. */
#main-content .demo-badge,
#main-content .motor-badge,
#main-content .video-demo-badge,
#main-content .pricing-pill,
#main-content .pricing-pill-trial,
#main-content .pricing-pill-recommended,
#main-content .badge,
#main-content .danger-badge,
#main-content .success-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(68, 186, 181, .22) !important;
  background: rgb(217 237 238) !important;
  color: var(--buu-brand-dark-teal) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

#main-content #product-demo .demo-badge,
#main-content #motor-buu .motor-badge,
#main-content #testimonials .demo-badge,
#main-content #final-cta .video-demo-badge {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .86) !important;
}

/* Cards: softer premium shadows in teal, not heavy black. */
#main-content .problem-card,
#main-content .pricing-card,
#main-content .faq-item,
#main-content .segment-card {
  border: 1px solid var(--buu-brand-line) !important;
  box-shadow: var(--buu-brand-shadow-soft) !important;
  background: rgba(255, 255, 255, .92) !important;
}

#main-content .problem-card.success,
#main-content .pricing-card.plan-mensal {
  border-color: rgba(68, 186, 181, .36) !important;
  box-shadow: 0 26px 78px rgba(68, 186, 181, .18) !important;
}

#main-content .problem-card.danger {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f6 100%) !important;
}

#main-content .problem-card.success {
  background: linear-gradient(180deg, #f0fffc 0%, #ffffff 100%) !important;
}

#main-content .demo-stage,
#main-content .wa-section,
#main-content .motor-card,
#main-content .testimonial-card {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 24px 70px rgba(24, 76, 81, .22) !important;
}

#main-content .motor-icon,
#main-content .icon {
  color: var(--buu-brand-primary) !important;
  background: rgba(68, 186, 181, .12) !important;
  border-color: rgba(68, 186, 181, .22) !important;
}

/* Pricing must convert: clearer recommendation and CTA. */
#main-content #pricing .display-5,
#main-content #pricing .display-5 span:first-child {
  color: var(--buu-brand-dark-teal) !important;
}

#main-content #pricing .btn-getstarted,
#main-content #final-cta .btn-getstarted,
#main-content .btn-getstarted.register {
  border: 1px solid rgba(38, 112, 118, .18) !important;
  background: linear-gradient(135deg, #44bab5 0%, #267076 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 46px rgba(38, 112, 118, .22) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
}

#main-content #pricing .btn-getstarted:hover,
#main-content #final-cta .btn-getstarted:hover,
#main-content .btn-getstarted.register:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 60px rgba(38, 112, 118, .28) !important;
}

/* Floating CTA inspired by editorial retail landing behavior: compact, fixed, premium. */
.whatsapp-float {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

.whatsapp-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
  height: 52px !important;
  min-width: 0 !important;
  padding: 0 10px 0 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #267076 0%, #44bab5 100%) !important;
  box-shadow: 0 18px 48px rgba(38, 112, 118, .32) !important;
  text-decoration: none !important;
  animation: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

.whatsapp-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 58px rgba(38, 112, 118, .38) !important;
}

.whatsapp-float__text {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.whatsapp-float__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  color: var(--buu-brand-dark-teal) !important;
  background: #ffffff !important;
  flex: 0 0 auto !important;
}

.whatsapp-button .tooltip {
  display: none !important;
}

/* Scroll top should not compete with WhatsApp CTA. */
.scroll-top {
  right: 18px !important;
  bottom: 88px !important;
  border-radius: 999px !important;
  background: rgba(38, 112, 118, .92) !important;
  box-shadow: 0 12px 34px rgba(38, 112, 118, .20) !important;
}

/* Footer: cleaner brand finish. */
.footer.light-background,
#footer.footer {
  background: #f7fffd !important;
  color: var(--buu-brand-ink) !important;
  border-top: 1px solid rgba(38, 112, 118, .10) !important;
}

.footer .footer-top,
.footer .copyright {
  border-color: rgba(38, 112, 118, .10) !important;
}

.footer a,
.footer .footer-links ul a {
  color: var(--buu-brand-muted) !important;
}

.footer a:hover,
.footer .footer-links ul a:hover {
  color: var(--buu-brand-dark-teal) !important;
}

@media (max-width: 920px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.75rem, 11.2vw, 4.6rem) !important;
    max-width: 11ch !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    max-width: calc(100vw - 28px) !important;
    font-size: clamp(.54rem, 1.55vw, .66rem) !important;
    letter-spacing: .118em !important;
  }
}

@media (max-width: 640px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.38rem, 12.8vw, 3.58rem) !important;
    max-width: 20.8ch !important;
    line-height: .94 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    width: 100% !important;
    white-space: normal !important;
    max-width: 21.5rem !important;
    font-size: .58rem !important;
    line-height: 1.55 !important;
  }

  .whatsapp-float {
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .whatsapp-button {
    height: 48px !important;
    padding: 0 8px 0 16px !important;
  }

  .whatsapp-float__text {
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    letter-spacing: .11em !important;
  }

  .whatsapp-float__icon {
    width: 32px !important;
    height: 32px !important;
  }

  .scroll-top {
    bottom: 74px !important;
  }
}


/* =========================================================
   Final polish requested: smaller hero title, one-line subtitle,
   lower CTA and conversion-oriented section rhythm.
   ========================================================= */
:root {
  --buu-final-primary: #44bab5;
  --buu-final-deep: #267076;
  --buu-final-ink: #082224;
  --buu-final-soft: #f3fffc;
}

#main-content #banner-main {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .16), transparent 28%),
    radial-gradient(circle at 18% 84%, rgba(68, 186, 181, .26), transparent 30%),
    linear-gradient(135deg, #44bab5 0%, #31969b 44%, #267076 100%) !important;
}

#main-content #banner-main::before {
  background:
    linear-gradient(90deg, rgba(5, 35, 37, .42) 0%, rgba(5, 35, 37, .12) 52%, rgba(5, 35, 37, .36) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 96px) !important;
}

#main-content #banner-main .hero-container {
  padding-top: clamp(108px, 15vh, 152px) !important;
  padding-bottom: clamp(82px, 13vh, 132px) !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  max-width: 10.7ch !important;
  font-size: clamp(2.85rem, 5.7vw, 5.95rem) !important;
  line-height: .91 !important;
  letter-spacing: -.066em !important;
  text-shadow: 0 24px 80px rgba(7, 31, 33, .22) !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: max-content !important;
  max-width: min(92vw, 760px) !important;
  margin: clamp(24px, 3vw, 34px) auto 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: clamp(.74rem, .92vw, .93rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .135em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  margin-top: clamp(46px, 6.2vw, 78px) !important;
}

#main-content #banner-main .btn-getstarted {
  min-height: 52px !important;
  padding: 16px 30px !important;
  background: #ffffff !important;
  color: #267076 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: 0 22px 70px rgba(7, 31, 33, .20) !important;
}

#main-content #banner-main .btn-getstarted:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 82px rgba(7, 31, 33, .26) !important;
}

#main-content #banner-main::after {
  content: "ANTI-FALTA" !important;
  color: rgba(255, 255, 255, .095) !important;
}

/* Keep hamburger visible with pure CSS. */
#main-content #main-header .mobile-nav-toggle {
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
}

#main-content #main-header.scrolled .mobile-nav-toggle,
body.mobile-nav-active #main-content #main-header .mobile-nav-toggle {
  border-color: rgba(38, 112, 118, .18) !important;
  background: rgba(38, 112, 118, .07) !important;
}

#main-content #main-header .mobile-nav-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 18px !important;
  height: 18px !important;
}

#main-content #main-header .mobile-nav-icon span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-toggle .mobile-nav-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-toggle .mobile-nav-icon span:nth-child(2) {
  opacity: 0 !important;
}

body.mobile-nav-active #main-content #main-header .mobile-nav-toggle .mobile-nav-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Section rhythm: cleaner tags, less generic black, stronger Buu palette. */
#main-content section:not(#banner-main):not(#product-demo):not(#final-cta) {
  background-color: #fbfffe !important;
}

#main-content .demo-badge,
#main-content .motor-badge,
#main-content .segments-badge,
#main-content .buu-premium-eyebrow,
#main-content .pricing .section-title span,
#main-content .faq .section-title span {
  border-radius: 999px !important;
  color: #267076 !important;
  background: rgba(68, 186, 181, .10) !important;
  border: 1px solid rgba(68, 186, 181, .22) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

#main-content h2,
#main-content .section-title h2 {
  color: #082224 !important;
  letter-spacing: -.052em !important;
}

#main-content p,
#main-content li {
  color: #5d7475 !important;
}

#main-content .motor-card,
#main-content .segment-card,
#main-content .pricing-card,
#main-content .faq-item,
#main-content .testimonial-card,
#main-content .buu-pain-card,
#main-content .buu-compare-card {
  border: 1px solid rgba(38, 112, 118, .10) !important;
  box-shadow: 0 18px 54px rgba(7, 31, 33, .07) !important;
}

#main-content .motor-card:hover,
#main-content .segment-card:hover,
#main-content .pricing-card:hover,
#main-content .testimonial-card:hover {
  box-shadow: 0 28px 74px rgba(38, 112, 118, .14) !important;
}

#main-content #final-cta {
  background:
    radial-gradient(circle at 12% 10%, rgba(68, 186, 181, .22), transparent 28%),
    linear-gradient(135deg, #267076 0%, #1c555b 100%) !important;
}

#main-content #final-cta h2,
#main-content #final-cta p,
#main-content #final-cta .result-text {
  color: #ffffff !important;
}

@media (max-width: 1199px) {
  #main-content #main-header .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 920px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.65rem, 10.2vw, 4.55rem) !important;
    max-width: 10ch !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    font-size: clamp(.64rem, 1.45vw, .8rem) !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 640px) {
  #main-content #banner-main .hero-container {
    padding-top: 112px !important;
    padding-bottom: 74px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.3rem, 11.2vw, 3.16rem) !important;
    max-width: 10ch !important;
    line-height: .94 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    width: min(100%, 22rem) !important;
    max-width: 22rem !important;
    font-size: .62rem !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    letter-spacing: .115em !important;
  }

  #main-content #banner-main .btn-group,
  #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    margin-top: 44px !important;
  }
}

/* =========================================================
   Buu conversion refinement — focused CTA, chat pulse and compact recovery section
   ========================================================= */
:root {
  --buu-brand-deep-teal: #267076;
  --buu-brand-light: #fbfffe;
}

/* Hero: CTA near the visual footer, no black hover. */
#main-content #banner-main .hero-content {
  top: 46% !important;
  transform: translateY(-50%) !important;
}

#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  font-size: clamp(2.75rem, 5vw, 5.2rem) !important;
  max-width: 10.4ch !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  max-width: min(92vw, 820px) !important;
  margin-top: clamp(28px, 3.4vw, 42px) !important;
  font-size: clamp(.82rem, 1vw, 1.02rem) !important;
  letter-spacing: .12em !important;
  white-space: nowrap !important;
}

#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(42px, 7.8vh, 86px) !important;
  top: auto !important;
  width: min(100%, 348px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

#main-content #banner-main .btn-getstarted,
#main-content #banner-main .btn-getstarted:visited {
  background: #ffffff !important;
  color: var(--buu-brand-deep-teal) !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  box-shadow: 0 22px 70px rgba(7, 31, 33, .20) !important;
}

#main-content #banner-main .btn-getstarted:hover,
#main-content #banner-main .btn-getstarted:focus-visible,
#main-content #banner-main .btn-getstarted:active {
  background: #eafffd !important;
  color: #164449 !important;
  border-color: rgba(126, 239, 235, .86) !important;
  box-shadow: 0 28px 86px rgba(68, 186, 181, .28) !important;
  transform: translateY(-3px) !important;
}

/* Floating chat: icon only, pulse, premium color. */
.whatsapp-float {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9999 !important;
  display: block !important;
}

.whatsapp-float .buu-whatsapp-tooltip,
.whatsapp-float .buu-whatsapp-copy,
.whatsapp-float__text {
  display: none !important;
}

.whatsapp-float .buu-whatsapp-conversion,
.whatsapp-float .buu-whatsapp-conversion--icon-only,
.whatsapp-float .whatsapp-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #267076 0%, #164449 100%) !important;
  box-shadow: 0 0 0 0 rgba(38, 112, 118, .50), 0 22px 62px rgba(38, 112, 118, .38) !important;
  text-decoration: none !important;
  animation: buuChatPulse 2.1s ease-out infinite !important;
}

.whatsapp-float .buu-whatsapp-conversion::before,
.whatsapp-float .buu-whatsapp-conversion--icon-only::before,
.whatsapp-float .whatsapp-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(68, 186, 181, .36) !important;
  opacity: .82 !important;
  animation: buuChatHalo 2.1s ease-out infinite !important;
}

.whatsapp-float .buu-whatsapp-conversion:hover,
.whatsapp-float .buu-whatsapp-conversion--icon-only:hover,
.whatsapp-float .whatsapp-button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #164449 0%, #267076 100%) !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 30px 80px rgba(38, 112, 118, .46) !important;
}

.whatsapp-float .buu-whatsapp-icon,
.whatsapp-float__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: transparent !important;
}

.whatsapp-float .buu-whatsapp-icon svg,
.whatsapp-float__icon svg {
  width: 30px !important;
  height: 30px !important;
}

@keyframes buuChatPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(68, 186, 181, .48), 0 22px 62px rgba(38, 112, 118, .38);
  }

  70% {
    box-shadow: 0 0 0 18px rgba(68, 186, 181, 0), 0 22px 62px rgba(38, 112, 118, .38);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(68, 186, 181, 0), 0 22px 62px rgba(38, 112, 118, .38);
  }
}

@keyframes buuChatHalo {
  0% {
    transform: scale(.92);
    opacity: .72;
  }

  70% {
    transform: scale(1.20);
    opacity: 0;
  }

  100% {
    transform: scale(.92);
    opacity: 0;
  }
}

/* Recovery section: compact, premium, value-first. */
#main-content #product-demo.buu-recovery-demo {
  min-height: auto !important;
  padding: clamp(72px, 8vw, 108px) 0 !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(68, 186, 181, .24), transparent 30%),
    linear-gradient(135deg, #267076 0%, #205e64 56%, #164449 100%) !important;
}

#main-content #product-demo.buu-recovery-demo::before {
  content: "RETORNO" !important;
  top: 48% !important;
  color: rgba(255, 255, 255, .050) !important;
  font-size: clamp(4.8rem, 12vw, 13rem) !important;
  letter-spacing: -.075em !important;
}

#main-content #product-demo.buu-recovery-demo .container {
  width: min(100% - 48px, 1080px) !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header {
  max-width: 760px !important;
  margin-inline: auto !important;
}

#main-content #product-demo.buu-recovery-demo .buu-demo-badge,
#main-content #product-demo.buu-recovery-demo .demo-badge {
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .82) !important;
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header h2 {
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  font-size: clamp(2.1rem, 4.1vw, 4.2rem) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
  text-wrap: balance !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header p {
  max-width: 640px !important;
  margin: 22px auto 0 !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: clamp(.9rem, 1.05vw, 1rem) !important;
  line-height: 1.55 !important;
}

#main-content #product-demo .buu-recovery-stage,
#main-content #product-demo .buu-recovery-stage--compact {
  display: block !important;
  max-width: 520px !important;
  margin: clamp(28px, 4vw, 42px) auto 0 !important;
}

#main-content #product-demo .buu-last-appointment {
  display: none !important;
}

#main-content #product-demo .buu-whatsapp-card,
#main-content #product-demo .buu-whatsapp-card--impact {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: #f5fffd !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 28px 78px rgba(7, 31, 33, .22) !important;
  backdrop-filter: none !important;
}

#main-content #product-demo .buu-wa-header-premium {
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #164449 0%, #267076 100%) !important;
}

#main-content #product-demo .buu-wa-profile {
  font-size: 13px !important;
  letter-spacing: .02em !important;
}

#main-content #product-demo .buu-wa-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
}

#main-content #product-demo .buu-wa-status {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

#main-content #product-demo .buu-wa-body {
  padding: 18px !important;
  gap: 11px !important;
}

#main-content #product-demo .buu-bubble {
  max-width: 92% !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  color: #143134 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(7, 31, 33, .07) !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

#main-content #product-demo .buu-bubble.client {
  justify-self: end !important;
  color: #ffffff !important;
  background: #267076 !important;
}

#main-content #product-demo .buu-bubble.success {
  border: 1px solid rgba(68, 186, 181, .20) !important;
  background: #eafffd !important;
}

#main-content #product-demo .buu-slot-row {
  gap: 8px !important;
  margin-top: 10px !important;
}

#main-content #product-demo .buu-slot-pill {
  padding: 7px 10px !important;
  color: #267076 !important;
  background: rgba(68, 186, 181, .10) !important;
  border: 1px solid rgba(68, 186, 181, .20) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#main-content #product-demo .buu-demo-footer {
  max-width: 560px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

@media (max-width: 920px) {
  #main-content #banner-main .hero-content {
    top: 45% !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    white-space: normal !important;
    max-width: 31rem !important;
  }
}

@media (max-width: 640px) {
  #main-content #banner-main .hero-content {
    top: 44% !important;
  }

  #main-content #banner-main .btn-group,
  #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    bottom: calc(26px + env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 48px), 318px) !important;
  }

  #main-content #product-demo.buu-recovery-demo {
    padding: 64px 0 !important;
  }

  #main-content #product-demo.buu-recovery-demo .container {
    width: min(100% - 32px, 1080px) !important;
  }

  #main-content #product-demo.buu-recovery-demo .demo-header h2 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  #main-content #product-demo.buu-recovery-demo .demo-header p {
    font-size: .88rem !important;
  }

  .whatsapp-float {
    right: 16px !important;
    bottom: 16px !important;
  }

  .whatsapp-float .buu-whatsapp-conversion,
  .whatsapp-float .buu-whatsapp-conversion--icon-only,
  .whatsapp-float .whatsapp-button,
  .whatsapp-float .buu-whatsapp-icon,
  .whatsapp-float__icon {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  .whatsapp-float .buu-whatsapp-icon svg,
  .whatsapp-float__icon svg {
    width: 27px !important;
    height: 27px !important;
  }
}

/* =========================================================
   Hotfix — restore approved hero typography, adjust only CTA,
   icon-only floating chat and compact premium recovery section.
   ========================================================= */
#main-content #banner-main .hero-title,
#banner-main .container.topo.centered-hero .lef .hero-title,
#banner-main .container.topo .lef .hero-title {
  max-width: 10.7ch !important;
  font-size: clamp(2.85rem, 5.7vw, 5.95rem) !important;
  line-height: .91 !important;
  letter-spacing: -.066em !important;
  text-shadow: 0 24px 80px rgba(7, 31, 33, .22) !important;
}

#main-content #banner-main .hero-subtitle,
#banner-main .container.topo.centered-hero .lef .hero-subtitle,
#main-content #banner-main p.hero-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: max-content !important;
  max-width: min(92vw, 760px) !important;
  margin: clamp(24px, 3vw, 34px) auto 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: clamp(.74rem, .92vw, .93rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .135em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Move only the CTA slightly lower and remove the black hover. */
#main-content #banner-main .btn-group,
#main-content #banner-main .btn-group.buu-hero-cta-fixed {
  margin-top: clamp(54px, 7vw, 92px) !important;
}

#main-content #banner-main .btn-getstarted,
#main-content #banner-main .btn-getstarted:focus,
#main-content #banner-main .btn-getstarted:active {
  background: #ffffff !important;
  color: #267076 !important;
  border-color: rgba(255, 255, 255, .76) !important;
}

#main-content #banner-main .btn-getstarted:hover {
  background: #f1fffd !important;
  color: #164449 !important;
  border-color: rgba(255, 255, 255, .92) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 28px 84px rgba(7, 31, 33, .28) !important;
}

/* Floating chat: icon-only, premium and visible. */
.whatsapp-float {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
}

.whatsapp-float .buu-whatsapp-copy,
.whatsapp-float .buu-whatsapp-tooltip,
.whatsapp-float .whatsapp-float__text {
  display: none !important;
}

.whatsapp-float .buu-whatsapp-conversion,
.whatsapp-float .buu-whatsapp-conversion--icon-only,
.whatsapp-float .whatsapp-button,
.whatsapp-float a {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #267076 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  box-shadow: 0 18px 48px rgba(38, 112, 118, .42), 0 0 0 0 rgba(68, 186, 181, .40) !important;
  animation: buuChatPulse 1.85s ease-in-out infinite !important;
}

.whatsapp-float .buu-whatsapp-conversion:hover,
.whatsapp-float .whatsapp-button:hover,
.whatsapp-float a:hover {
  background: #164449 !important;
  transform: translateY(-3px) scale(1.03) !important;
}

.whatsapp-float .buu-whatsapp-icon,
.whatsapp-float .whatsapp-float__icon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

.whatsapp-float svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
}

@keyframes buuChatPulse {

  0%,
  100% {
    box-shadow: 0 18px 48px rgba(38, 112, 118, .42), 0 0 0 0 rgba(68, 186, 181, .34);
  }

  50% {
    box-shadow: 0 20px 58px rgba(38, 112, 118, .52), 0 0 0 12px rgba(68, 186, 181, 0);
  }
}

/* Recovery section: compact, premium and less text-heavy. */
#main-content #product-demo.buu-recovery-demo {
  min-height: auto !important;
  padding: clamp(70px, 7.5vw, 104px) 0 !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(68, 186, 181, .20), transparent 28%),
    linear-gradient(135deg, #267076 0%, #1f6066 58%, #164449 100%) !important;
}

#main-content #product-demo.buu-recovery-demo::before {
  content: "RETORNO" !important;
  color: rgba(255, 255, 255, .045) !important;
  font-size: clamp(4rem, 11vw, 11rem) !important;
  letter-spacing: -.075em !important;
}

#main-content #product-demo.buu-recovery-demo .container {
  width: min(100% - 48px, 1040px) !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header {
  max-width: 680px !important;
  margin-inline: auto !important;
}

#main-content #product-demo.buu-recovery-demo .buu-demo-badge,
#main-content #product-demo.buu-recovery-demo .demo-badge {
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .82) !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header h2 {
  max-width: 620px !important;
  margin: 16px auto 0 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 3.6vw, 3.65rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

#main-content #product-demo.buu-recovery-demo .demo-header p {
  max-width: 520px !important;
  margin: 18px auto 0 !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: clamp(.84rem, .98vw, .96rem) !important;
  line-height: 1.48 !important;
}

#main-content #product-demo .buu-recovery-stage,
#main-content #product-demo .buu-recovery-stage--compact {
  max-width: 460px !important;
  margin: clamp(24px, 3.4vw, 36px) auto 0 !important;
}

#main-content #product-demo .buu-whatsapp-card,
#main-content #product-demo .buu-whatsapp-card--impact {
  max-width: 460px !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 64px rgba(7, 31, 33, .22) !important;
}

#main-content #product-demo .buu-wa-body {
  padding: 16px !important;
  gap: 9px !important;
}

#main-content #product-demo .buu-bubble {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
}

#main-content #product-demo .buu-demo-footer {
  max-width: 460px !important;
  margin: 20px auto 0 !important;
  color: rgba(255, 255, 255, .70) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

@media (max-width: 920px) {

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.65rem, 10.2vw, 4.55rem) !important;
    max-width: 10ch !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    font-size: clamp(.64rem, 1.45vw, .8rem) !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 640px) {
  #main-content #banner-main .hero-container {
    padding-top: 112px !important;
    padding-bottom: 74px !important;
  }

  #main-content #banner-main .hero-title,
  #banner-main .container.topo.centered-hero .lef .hero-title,
  #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.3rem, 11.2vw, 3.16rem) !important;
    max-width: 10ch !important;
    line-height: .94 !important;
  }

  #main-content #banner-main .hero-subtitle,
  #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  #main-content #banner-main p.hero-subtitle {
    width: min(100%, 22rem) !important;
    max-width: 22rem !important;
    font-size: .62rem !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    letter-spacing: .115em !important;
  }

  #main-content #banner-main .btn-group,
  #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    margin-top: 48px !important;
  }

  #main-content #product-demo.buu-recovery-demo {
    padding: 58px 0 !important;
  }

  #main-content #product-demo.buu-recovery-demo .container {
    width: min(100% - 32px, 1040px) !important;
  }

  #main-content #product-demo.buu-recovery-demo .demo-header h2 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  #main-content #product-demo.buu-recovery-demo .demo-header p {
    font-size: .86rem !important;
  }

  .whatsapp-float {
    right: 16px !important;
    bottom: 16px !important;
  }
}


/* ===== CONSOLIDATED PRODUCTION POLISH ===== */
/* =========================================================
   Buu Final Polish — conflict-proof overrides
   Purpose: fix hero CTA conflict, preserve approved title/subtitle,
   and compact the WhatsApp recovery section with premium Buu identity.
   ========================================================= */
:root {
  --buu-primary: #44bab5;
  --buu-dark-teal: #267076;
  --buu-deep-teal: #164449;
  --buu-off-white: #f4fbf9;
  --buu-ink: #102124;
}

/* HERO — keep the approved layout; only prevent CTA overlap/conflicts. */
html body #main-content #banner-main .hero-container {
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  padding: 128px 24px 104px !important;
}

html body #main-content #banner-main .hero-content,
html body #main-content #banner-main .container.topo.centered-hero,
html body #main-content #banner-main .container.topo.centered-hero .lef {
  width: min(100%, 1120px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body #main-content #banner-main .hero-title,
html body #banner-main .container.topo.centered-hero .lef .hero-title,
html body #banner-main .container.topo .lef .hero-title {
  margin: 0 auto !important;
  max-width: 10.7ch !important;
  text-align: center !important;
  font-size: clamp(2.95rem, 5.4vw, 5.55rem) !important;
  line-height: .92 !important;
  letter-spacing: -.065em !important;
  font-weight: 950 !important;
}

html body #main-content #banner-main .hero-subtitle,
html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
html body #main-content #banner-main p.hero-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: min(92vw, 820px) !important;
  margin: clamp(24px, 3vw, 34px) auto 0 !important;
  color: rgba(255, 255, 255, .84) !important;
  text-align: center !important;
  font-size: clamp(.76rem, .88vw, .94rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #main-content #banner-main .btn-group,
html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: clamp(66px, 8vh, 104px) auto 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body #main-content #banner-main .btn-start {
  display: none !important;
}

html body #main-content #banner-main .btn-getstarted,
html body #main-content #banner-main .btn-getstarted:focus,
html body #main-content #banner-main .btn-getstarted:active {
  min-width: 270px !important;
  min-height: 58px !important;
  padding: 18px 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .74) !important;
  background: #ffffff !important;
  color: var(--buu-dark-teal) !important;
  box-shadow: 0 24px 70px rgba(7, 31, 33, .22) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

html body #main-content #banner-main .btn-getstarted:hover {
  background: #effffd !important;
  color: var(--buu-deep-teal) !important;
  border-color: rgba(255, 255, 255, .92) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 30px 84px rgba(7, 31, 33, .30) !important;
}

/* WHATSAPP FLOAT — icon only, no text. */
html body .whatsapp-float .buu-whatsapp-copy,
html body .whatsapp-float .buu-whatsapp-tooltip,
html body .whatsapp-float .whatsapp-float__text {
  display: none !important;
}

html body .whatsapp-float a,
html body .whatsapp-float .whatsapp-button,
html body .whatsapp-float .buu-whatsapp-conversion,
html body .whatsapp-float .buu-whatsapp-conversion--icon-only {
  width: 62px !important;
  min-width: 62px !important;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--buu-dark-teal) !important;
  color: #fff !important;
  box-shadow: 0 18px 52px rgba(38, 112, 118, .42), 0 0 0 0 rgba(68, 186, 181, .32) !important;
  animation: buuFinalChatPulse 1.85s ease-in-out infinite !important;
}

@keyframes buuFinalChatPulse {

  0%,
  100% {
    box-shadow: 0 18px 52px rgba(38, 112, 118, .42), 0 0 0 0 rgba(68, 186, 181, .32);
  }

  50% {
    box-shadow: 0 20px 62px rgba(38, 112, 118, .56), 0 0 0 14px rgba(68, 186, 181, 0);
  }
}

/* RECOVERY SECTION — shorter, premium, with less text and more value. */
html body #main-content #product-demo.buu-recovery-compact,
html body #main-content #product-demo.buu-recovery-demo {
  min-height: auto !important;
  padding: clamp(64px, 7vw, 96px) 0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(68, 186, 181, .26), transparent 30%),
    linear-gradient(135deg, var(--buu-dark-teal) 0%, #205e64 55%, var(--buu-deep-teal) 100%) !important;
  color: #fff !important;
}

html body #main-content #product-demo.buu-recovery-compact::before,
html body #main-content #product-demo.buu-recovery-demo::before {
  content: "RETORNO" !important;
  position: absolute !important;
  inset: auto 3vw 8% auto !important;
  color: rgba(255, 255, 255, .045) !important;
  font-size: clamp(4.5rem, 12vw, 11rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;
  line-height: .8 !important;
  pointer-events: none !important;
}

html body #main-content #product-demo .container {
  width: min(100% - 48px, 1020px) !important;
}

html body #main-content #product-demo .demo-header {
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body #main-content #product-demo .demo-badge,
html body #main-content #product-demo .buu-demo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .09) !important;
  color: rgba(255, 255, 255, .80) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body #main-content #product-demo .demo-header h2 {
  max-width: 620px !important;
  margin: 18px auto 0 !important;
  color: #fff !important;
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

html body #main-content #product-demo .demo-header p {
  max-width: 520px !important;
  margin: 16px auto 0 !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: clamp(.9rem, 1vw, 1rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

html body #main-content #product-demo .demo-stage,
html body #main-content #product-demo .demo-stage-compact {
  max-width: 430px !important;
  margin: clamp(26px, 3.2vw, 36px) auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #main-content #product-demo .wa-section,
html body #main-content #product-demo .buu-whatsapp-card {
  max-width: 430px !important;
  margin: 0 auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 26px 70px rgba(7, 31, 33, .25) !important;
}

html body #main-content #product-demo .wa-header {
  min-height: 58px !important;
  padding: 13px 16px !important;
}

html body #main-content #product-demo .wa-chat,
html body #main-content #product-demo .buu-wa-body {
  max-height: 360px !important;
  padding: 16px !important;
  gap: 9px !important;
}

html body #main-content #product-demo .wa-chat .msg,
html body #main-content #product-demo .buu-bubble {
  font-size: 12.5px !important;
  line-height: 1.38 !important;
  padding: 10px 12px !important;
}

html body #main-content #product-demo .video-social-row,
html body #main-content #product-demo .video-stat,
html body #main-content #product-demo .buu-demo-footer {
  display: none !important;
}

@media (max-width: 920px) {

  html body #main-content #banner-main .hero-title,
  html body #banner-main .container.topo.centered-hero .lef .hero-title,
  html body #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.7rem, 10vw, 4.5rem) !important;
  }

  html body #main-content #banner-main .hero-subtitle,
  html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  html body #main-content #banner-main p.hero-subtitle {
    font-size: clamp(.64rem, 1.45vw, .78rem) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 640px) {
  html body #main-content #banner-main .hero-container {
    padding: 112px 18px 78px !important;
  }

  html body #main-content #banner-main .hero-title,
  html body #banner-main .container.topo.centered-hero .lef .hero-title,
  html body #banner-main .container.topo .lef .hero-title {
    font-size: clamp(2.35rem, 11.2vw, 3.18rem) !important;
    line-height: .94 !important;
  }

  html body #main-content #banner-main .hero-subtitle,
  html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  html body #main-content #banner-main p.hero-subtitle {
    width: min(100%, 22rem) !important;
    max-width: 22rem !important;
    white-space: normal !important;
    font-size: .62rem !important;
    line-height: 1.55 !important;
    letter-spacing: .115em !important;
  }

  html body #main-content #banner-main .btn-group,
  html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    margin-top: 54px !important;
  }

  html body #main-content #product-demo.buu-recovery-compact,
  html body #main-content #product-demo.buu-recovery-demo {
    padding: 56px 0 !important;
  }

  html body #main-content #product-demo .container {
    width: min(100% - 32px, 1020px) !important;
  }

  html body #main-content #product-demo .demo-header h2 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
  }
}


/* BUU SECTION TITLE FINAL SCALE HOTFIX */
html body #main-content #product-demo.buu-recovery-demo {
  padding-top: clamp(56px, 6.5vw, 88px) !important;
  padding-bottom: clamp(58px, 7vw, 96px) !important;
}

html body #main-content #product-demo.buu-recovery-demo .demo-header {
  max-width: 720px !important;
}

html body #main-content #product-demo.buu-recovery-demo .demo-header h2 {
  max-width: 620px !important;
  margin: 14px auto 0 !important;
  font-size: clamp(1.95rem, 3.2vw, 3.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

html body #main-content #product-demo.buu-recovery-demo .demo-header p {
  max-width: 560px !important;
  margin: 14px auto 0 !important;
  font-size: clamp(0.86rem, 0.95vw, 0.98rem) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255, 255, 255, .74) !important;
}

html body #main-content #product-demo.buu-recovery-demo .buu-demo-badge,
html body #main-content #product-demo.buu-recovery-demo .demo-badge {
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  html body #main-content #product-demo.buu-recovery-demo .demo-header h2 {
    font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    line-height: 1.04 !important;
  }

  html body #main-content #product-demo.buu-recovery-demo .demo-header p {
    max-width: 320px !important;
    font-size: .86rem !important;
  }
}

/* === BUU FINAL RESTORE: anti-no-show pain section + WhatsApp reactivation demo === */
html body #main-content #problems.buu-anti-no-show-section {
  padding: clamp(76px, 8vw, 118px) 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(68, 186, 181, .18), transparent 34%),
    linear-gradient(180deg, #f7fbfa 0%, #edf8f6 100%) !important;
  color: #12383c !important;
}

html body #main-content #problems .buu-section-heading {
  max-width: 820px !important;
  margin: 0 auto clamp(34px, 4.5vw, 54px) !important;
}

html body #main-content #problems .buu-section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(38, 112, 118, .14) !important;
  border-radius: 999px !important;
  background: rgba(68, 186, 181, .12) !important;
  color: #267076 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body #main-content #problems .problems-title {
  max-width: 740px !important;
  margin: 18px auto 0 !important;
  color: #12383c !important;
  font-size: clamp(2.1rem, 4.4vw, 4.25rem) !important;
  line-height: .96 !important;
  letter-spacing: -.065em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

html body #main-content #problems .problems-subtitle {
  max-width: 690px !important;
  margin: 18px auto 0 !important;
  color: rgba(18, 56, 60, .72) !important;
  font-size: clamp(.96rem, 1.35vw, 1.14rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
}

html body #main-content #problems .buu-pain-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

html body #main-content #problems .buu-pain-card {
  min-height: 245px !important;
  padding: 28px !important;
  border: 1px solid rgba(38, 112, 118, .12) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 22px 60px rgba(38, 112, 118, .08) !important;
  backdrop-filter: blur(12px) !important;
}

html body #main-content #problems .buu-pain-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: #267076 !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(38, 112, 118, .20) !important;
}

html body #main-content #problems .buu-pain-icon svg {
  width: 23px !important;
  height: 23px !important;
}

html body #main-content #problems .buu-pain-card h3 {
  margin: 26px 0 10px !important;
  color: #12383c !important;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 850 !important;
}

html body #main-content #problems .buu-pain-card p {
  margin: 0 !important;
  color: rgba(18, 56, 60, .68) !important;
  font-size: .96rem !important;
  line-height: 1.55 !important;
}

html body #main-content #problems .buu-pain-proof {
  max-width: 780px !important;
  margin: clamp(26px, 3vw, 36px) auto 0 !important;
  color: #267076 !important;
  font-size: clamp(1rem, 1.35vw, 1.12rem) !important;
  line-height: 1.5 !important;
  text-align: center !important;
  font-weight: 750 !important;
}

html body #main-content #product-demo .wa-day-divider {
  align-self: center !important;
  margin: 2px 0 8px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #main-content #product-demo .recovery-actions,
html body #main-content #product-demo .actions {
  width: calc(100% - 52px) !important;
  max-width: 320px !important;
  margin: 0 0 0 34px !important;
}

html body #main-content #product-demo .wa-action-hint {
  width: calc(100% - 52px) !important;
  max-width: 320px !important;
  margin: -2px 0 0 38px !important;
  color: rgba(255, 255, 255, .52) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

html body #main-content #product-demo .wa-chat {
  min-height: 0 !important;
}

@media (max-width: 920px) {
  html body #main-content #problems .buu-pain-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }

  html body #main-content #problems .buu-pain-card {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  html body #main-content #problems.buu-anti-no-show-section {
    padding: 64px 0 !important;
  }

  html body #main-content #problems .problems-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  html body #main-content #problems .buu-pain-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }
}

/* === BUU PRODUCT DEMO FINAL FIX: static HTML + JS enhancement === */
html body #main-content #product-demo.buu-recovery-demo {
  background:
    radial-gradient(circle at 18% 12%, rgba(68, 186, 181, .24), transparent 32%),
    linear-gradient(135deg, #267076 0%, #12383c 100%) !important;
}

html body #main-content #product-demo .wa-section {
  width: min(100%, 430px) !important;
  background: #0b141a !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  transform: none !important;
  animation: none !important;
}

html body #main-content #product-demo .wa-chat {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html body #main-content #product-demo .wa-chat .msg {
  padding: 0 !important;
  font-size: inherit !important;
  line-height: normal !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-end !important;
}

html body #main-content #product-demo .wa-chat .msg.bot-msg {
  align-self: flex-start !important;
}

html body #main-content #product-demo .wa-chat .msg.user-msg {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}

html body #main-content #product-demo .wa-chat .bubble {
  max-width: 320px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 12.8px !important;
  line-height: 1.42 !important;
  white-space: normal !important;
}

html body #main-content #product-demo .bot-msg .bubble {
  background: #202c33 !important;
  color: #e9edef !important;
}

html body #main-content #product-demo .user-msg .bubble {
  background: #005c4b !important;
  color: #e9edef !important;
}

html body #main-content #product-demo .avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 26px !important;
}

html body #main-content #product-demo .time {
  margin-top: 5px !important;
  color: rgba(255, 255, 255, .42) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: right !important;
}

html body #main-content #product-demo .actions.recovery-actions {
  display: flex !important;
  gap: 10px !important;
  width: calc(100% - 48px) !important;
  max-width: 320px !important;
  margin: 0 0 0 34px !important;
}

html body #main-content #product-demo .actions.recovery-actions .btn {
  appearance: none !important;
  border: 0 !important;
  flex: 1 1 0 !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

html body #main-content #product-demo .actions.recovery-actions .btn.yes {
  background: linear-gradient(135deg, #63ded7, #44bab5) !important;
  color: #062524 !important;
  box-shadow: 0 12px 26px rgba(68, 186, 181, .25) !important;
}

html body #main-content #product-demo .actions.recovery-actions .btn.no {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
}

html body #main-content #product-demo .actions.recovery-actions .btn:hover {
  transform: translateY(-1px) !important;
}

html body #main-content #product-demo .wa-action-hint {
  width: calc(100% - 48px) !important;
  max-width: 320px !important;
  margin: -2px 0 0 38px !important;
  color: rgba(255, 255, 255, .54) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

html body #main-content #product-demo .wa-typing {
  padding: 10px 16px !important;
  border-top: 1px solid #1f2c33 !important;
  background: #0b141a !important;
  color: #8696a0 !important;
  font-size: 12px !important;
}

@media (max-width: 640px) {
  html body #main-content #product-demo .wa-section {
    border-radius: 24px !important;
  }

  html body #main-content #product-demo .wa-chat .bubble,
  html body #main-content #product-demo .actions.recovery-actions,
  html body #main-content #product-demo .wa-action-hint {
    max-width: 292px !important;
  }
}

/* === BUU HOME HERO ALIGNMENT FIX: keep copy centered, CTA near hero footer === */
html body #main-content #banner-main .hero-container {
  position: relative !important;
}

@media (min-width: 768px) {
  html body #main-content #banner-main .hero-container {
    min-height: 100svh !important;
    padding-top: clamp(104px, 12vh, 142px) !important;
    padding-bottom: clamp(116px, 15vh, 170px) !important;
    display: grid !important;
    place-items: center !important;
  }

  html body #main-content #banner-main .hero-content,
  html body #main-content #banner-main .container.topo.centered-hero,
  html body #main-content #banner-main .container.topo.centered-hero .lef {
    position: static !important;
  }

  html body #main-content #banner-main .btn-group,
  html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(34px, 7vh, 74px) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
}

@media (min-width: 1440px) {

  html body #main-content #banner-main .hero-title,
  html body #banner-main .container.topo.centered-hero .lef .hero-title,
  html body #banner-main .container.topo .lef .hero-title {
    font-size: clamp(3.4rem, 5vw, 5.15rem) !important;
  }
}

@media (max-width: 767px) {

  html body #main-content #banner-main .btn-group,
  html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 54px !important;
  }
}


/* === FINAL HERO / FLOATING CHAT FIX === */
html body #main-content #banner-main .hero-container {
  position: relative !important;
  min-height: 100svh !important;
  padding-top: clamp(118px, 12vh, 150px) !important;
  padding-bottom: clamp(110px, 13vh, 154px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #main-content #banner-main .hero-content,
html body #main-content #banner-main .container.topo.centered-hero,
html body #main-content #banner-main .container.topo.centered-hero .lef {
  width: min(100%, 1120px) !important;
  min-height: clamp(500px, 68vh, 700px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body #main-content #banner-main .container.topo.centered-hero .lef {
  padding-bottom: clamp(42px, 5vh, 72px) !important;
}

html body #main-content #banner-main .hero-title,
html body #banner-main .container.topo.centered-hero .lef .hero-title,
html body #banner-main .container.topo .lef .hero-title {
  max-width: 20.8ch !important;
  margin: 0 auto !important;
}

html body #main-content #banner-main .hero-subtitle,
html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
html body #main-content #banner-main p.hero-subtitle {
  margin-top: 26px !important;
  max-width: min(92vw, 860px) !important;
}

html body #main-content #banner-main .btn-group,
html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  margin: auto auto 0 !important;
  padding-top: clamp(42px, 5vh, 60px) !important;
}

html body #main-content #banner-main .btn-getstarted,
html body #main-content #banner-main .btn-getstarted:focus,
html body #main-content #banner-main .btn-getstarted:active {
  min-width: 272px !important;
}

html body .whatsapp-float .buu-whatsapp-icon svg {
  width: 28px !important;
  height: 28px !important;
}

@media (min-width: 768px) {
  html body #main-content #banner-main .hero-container {
    min-height: 100svh !important;
  }

  html body #main-content #banner-main .hero-content,
  html body #main-content #banner-main .container.topo.centered-hero,
  html body #main-content #banner-main .container.topo.centered-hero .lef {
    min-height: clamp(520px, 70vh, 720px) !important;
  }
}

@media (max-width: 767px) {
  html body #main-content #banner-main .hero-container {
    padding-top: 108px !important;
    padding-bottom: 72px !important;
  }

  html body #main-content #banner-main .hero-content,
  html body #main-content #banner-main .container.topo.centered-hero,
  html body #main-content #banner-main .container.topo.centered-hero .lef {
    min-height: auto !important;
  }

  html body #main-content #banner-main .container.topo.centered-hero .lef {
    padding-bottom: 0 !important;
  }

  html body #main-content #banner-main .btn-group,
  html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    margin-top: 42px !important;
    padding-top: 0 !important;
  }
}


/* === BUU HOTFIX v45: hero title/subtitle visible, CTA below, chat icon preserved === */
html body #main-content #banner-main {
  position: relative !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}

html body #main-content #banner-main .hero-impact-bar,
html body #main-content #banner-main .hero-kicker,
html body #main-content #banner-main .hero-automation-visual,
html body #main-content #banner-main .ellipse-main {
  display: none !important;
}

html body #main-content #banner-main .hero-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(112px, 13vh, 152px) 24px clamp(72px, 9vh, 104px) !important;
  margin: 0 auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #main-content #banner-main .hero-content,
html body #main-content #banner-main .container.topo.centered-hero,
html body #main-content #banner-main .container.topo.centered-hero .lef {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  width: min(100%, 1120px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

html body #main-content #banner-main .hero-title,
html body #banner-main .container.topo.centered-hero .lef .hero-title,
html body #banner-main .container.topo .lef .hero-title {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 20.8ch !important;
  color: #ffffff !important;
  text-align: center !important;
  font-size: clamp(3rem, 5.1vw, 5.35rem) !important;
  line-height: .92 !important;
  letter-spacing: -.065em !important;
  font-weight: 950 !important;
}

html body #main-content #banner-main .hero-subtitle,
html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
html body #main-content #banner-main p.hero-subtitle {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  margin: clamp(24px, 3vh, 34px) auto 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: min(92vw, 860px) !important;
  color: rgba(255, 255, 255, .84) !important;
  text-align: center !important;
  font-size: clamp(.78rem, .88vw, .96rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #main-content #banner-main .btn-group,
html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
  position: static !important;
  inset: auto !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: clamp(58px, 8vh, 96px) auto 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #main-content #banner-main .btn-start {
  display: none !important;
}

html body #main-content #banner-main .btn-getstarted,
html body #main-content #banner-main .btn-getstarted:focus,
html body #main-content #banner-main .btn-getstarted:active {
  position: relative !important;
  z-index: 5 !important;
  min-width: 272px !important;
  min-height: 58px !important;
  padding: 18px 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .74) !important;
  background: #ffffff !important;
  color: #267076 !important;
  box-shadow: 0 24px 70px rgba(7, 31, 33, .22) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

html body #main-content #banner-main .btn-getstarted:hover {
  background: #effffd !important;
  color: #164449 !important;
  border-color: rgba(255, 255, 255, .92) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 30px 84px rgba(7, 31, 33, .30) !important;
}

html body .whatsapp-float .buu-whatsapp-icon svg {
  width: 28px !important;
  height: 28px !important;
}

@media (min-width: 1440px) {

  html body #main-content #banner-main .hero-title,
  html body #banner-main .container.topo.centered-hero .lef .hero-title,
  html body #banner-main .container.topo .lef .hero-title {
    font-size: clamp(3.25rem, 4.75vw, 5.15rem) !important;
  }
}

@media (max-width: 767px) {
  html body #main-content #banner-main .hero-container {
    min-height: 100svh !important;
    padding: 106px 20px 64px !important;
  }

  html body #main-content #banner-main .hero-title,
  html body #banner-main .container.topo.centered-hero .lef .hero-title,
  html body #banner-main .container.topo .lef .hero-title {
    max-width: 20.8ch !important;
    font-size: clamp(3rem, 12vw, 4.2rem) !important;
    line-height: .9 !important;
  }

  html body #main-content #banner-main .hero-subtitle,
  html body #banner-main .container.topo.centered-hero .lef .hero-subtitle,
  html body #main-content #banner-main p.hero-subtitle {
    max-width: 320px !important;
    white-space: normal !important;
    font-size: .72rem !important;
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    margin-top: 24px !important;
  }

  html body #main-content #banner-main .btn-group,
  html body #main-content #banner-main .btn-group.buu-hero-cta-fixed {
    margin-top: 44px !important;
  }

  html body #main-content #banner-main .btn-getstarted {
    min-width: min(100%, 264px) !important;
  }
}


/* === PRODUCT DEMO: alternative time chips after “Não” === */
html body #main-content #product-demo .buu-chat-time-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

html body #main-content #product-demo .buu-chat-time-option {
  appearance: none !important;
  border: 1px solid rgba(38, 112, 118, .18) !important;
  border-radius: 999px !important;
  background: rgba(68, 186, 181, .14) !important;
  color: #267076 !important;
  cursor: default !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

html body #main-content #product-demo .buu-chat-time-option:hover {
  background: rgba(68, 186, 181, .2) !important;
}

/* Buu assertive content pass — cleaner proof, niche copy and FAQ focus */
#main-content .segment-overlay {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 28px !important;
  text-align: left !important;
}

#main-content .segment-overlay p {
  margin: 8px 0 0 !important;
  max-width: 290px !important;
  color: rgba(255, 255, 255, .84) !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

#main-content #nps-service .nps-value {
  font-size: clamp(1.45rem, 2.2vw, 2.35rem) !important;
  letter-spacing: -0.04em !important;
}

#main-content #nps-service .nps-label {
  letter-spacing: .04em !important;
}

#main-content #final-cta .subtext {
  max-width: 720px !important;
  margin-inline: auto !important;
}

@media (max-width: 767px) {
  #main-content .segment-overlay {
    padding: 22px !important;
  }

  #main-content .segment-overlay p {
    font-size: .9rem !important;
  }
}

/* === Follow-up refinements: segment readability + recovery grid background === */
html body #main-content .segment-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 28px !important;
}

html body #main-content .segment-overlay h3 {
  display: block !important;
  max-width: 210px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.28rem, 1.8vw, 1.72rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
}

html body #main-content .segment-overlay p {
  display: block !important;
  max-width: 250px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.98rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-wrap: pretty !important;
}

html body #main-content #product-demo.buu-recovery-demo,
html body #main-content #product-demo.buu-recovery-compact {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html body #main-content #product-demo.buu-recovery-demo::before,
html body #main-content #product-demo.buu-recovery-compact::before {
  z-index: 1 !important;
}

html body #main-content #product-demo.buu-recovery-demo::after,
html body #main-content #product-demo.buu-recovery-compact::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(16, 34, 35, 0.12) 0%, rgba(16, 34, 35, 0.02) 42%, rgba(16, 34, 35, 0.18) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
  background-size: auto, 128px 128px, 128px 128px !important;
  opacity: 0.9 !important;
}

html body #main-content #product-demo.buu-recovery-demo .container,
html body #main-content #product-demo.buu-recovery-compact .container {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 767px) {
  html body #main-content .segment-overlay {
    gap: 8px !important;
    padding: 22px !important;
  }

  html body #main-content .segment-overlay h3 {
    max-width: 180px !important;
    font-size: 1.18rem !important;
  }

  html body #main-content .segment-overlay p {
    max-width: 220px !important;
    font-size: 0.9rem !important;
    line-height: 1.36 !important;
  }
}


/* === Hotfix: segments alignment + recovery grid background === */
#main-content .segment-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
}

#main-content .segment-overlay h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}

#main-content .segment-overlay p {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  max-width: 100% !important;
}

html body #main-content #product-demo.buu-recovery-compact,
html body #main-content #product-demo.buu-recovery-demo {
  position: relative !important;
  overflow: hidden !important;
}

html body #main-content #product-demo.buu-recovery-compact::after,
html body #main-content #product-demo.buu-recovery-demo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(16, 34, 35, .10) 0%, rgba(16, 34, 35, 0) 44%, rgba(16, 34, 35, .18) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .062) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px) !important;
  background-size: auto, 128px 128px, 128px 128px !important;
}

html body #main-content #product-demo.buu-recovery-compact .container,
html body #main-content #product-demo.buu-recovery-demo .container {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 767px) {
  #main-content .segment-overlay {
    gap: 8px !important;
  }

  #main-content .segment-overlay h3 {
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
  }

  #main-content .segment-overlay p {
    font-size: .88rem !important;
    line-height: 1.35 !important;
  }
}


/* === Final refinement: less AI, more Buu === */
:root {
  --buu-refine-shadow-soft: 0 12px 32px rgba(19, 63, 66, 0.08);
  --buu-refine-shadow-card: 0 16px 40px rgba(19, 63, 66, 0.10);
  --buu-refine-radius: 22px;
}

#main-content #banner-main {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 24%),
    linear-gradient(135deg, #44bab5 0%, #2e9799 46%, #267076 100%) !important;
}

#main-content #banner-main::before {
  background:
    linear-gradient(180deg, rgba(16, 34, 35, .10) 0%, rgba(16, 34, 35, .02) 44%, rgba(16, 34, 35, .16) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .04) 1px, transparent 1px) !important;
  background-size: auto, 132px 132px, 132px 132px !important;
}

#main-content #banner-main::after {
  color: rgba(255, 255, 255, .055) !important;
  font-size: clamp(7rem, 20vw, 18rem) !important;
  inset: auto 0 9vh 0 !important;
}

html body #main-content #product-demo.buu-recovery-demo::before,
html body #main-content #product-demo.buu-recovery-compact::before {
  content: none !important;
  display: none !important;
}

#main-content .demo-badge,
#main-content .motor-badge,
#main-content .video-demo-badge,
#main-content .pricing-pill,
#main-content .pricing-pill-trial,
#main-content .pricing-pill-recommended {
  letter-spacing: .12em !important;
  font-size: .62rem !important;
  background: rgba(255, 255, 255, .08) !important;
}

#main-content .motor-card,
#main-content .segment-card,
#main-content .pricing-card,
#main-content .faq-item,
#main-content .testimonial-card,
#main-content .buu-pain-card,
#main-content .buu-compare-card,
#main-content .demo-stage,
#main-content .wa-section {
  border-radius: var(--buu-refine-radius) !important;
  box-shadow: var(--buu-refine-shadow-soft) !important;
}

#main-content .segment-card,
#main-content .pricing-card,
#main-content .faq-item,
#main-content .problem-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(38, 112, 118, .10) !important;
}

#main-content .motor-card:hover,
#main-content .segment-card:hover,
#main-content .pricing-card:hover,
#main-content .testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--buu-refine-shadow-card) !important;
}

.segment-card:hover img {
  transform: scale(1.03) !important;
}

#main-content .segment-overlay {
  background: linear-gradient(180deg, rgba(10, 22, 23, 0.04) 0%, rgba(10, 22, 23, 0.72) 100%) !important;
}

#main-content .segment-overlay h3 {
  text-shadow: none !important;
}

#main-content .segment-overlay p {
  color: rgba(255, 255, 255, .90) !important;
}

#main-content .motor-section,
#main-content #pricing,
#main-content #faq {
  background-image: none !important;
}

#main-content .testimonials-wrapper {
  backdrop-filter: none !important;
}

html body #main-content #product-demo.buu-recovery-demo,
html body #main-content #product-demo.buu-recovery-compact {
  background:
    radial-gradient(circle at 14% 10%, rgba(68, 186, 181, .18), transparent 24%),
    linear-gradient(135deg, #267076 0%, #1f5e64 100%) !important;
}

html body #main-content #product-demo.buu-recovery-demo::after,
html body #main-content #product-demo.buu-recovery-compact::after {
  background:
    linear-gradient(180deg, rgba(16, 34, 35, 0.08) 0%, rgba(16, 34, 35, 0.01) 44%, rgba(16, 34, 35, 0.14) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: auto, 132px 132px, 132px 132px !important;
  opacity: .75 !important;
}

html body #main-content #product-demo .buu-whatsapp-card,
html body #main-content #product-demo .wa-section,
html body #main-content #product-demo .demo-stage {
  box-shadow: 0 18px 44px rgba(7, 31, 33, .18) !important;
}

html body #main-content #product-demo .wa-chat .bubble {
  border-radius: 18px !important;
}

@media (max-width: 767px) {
  #main-content #banner-main::after {
    font-size: clamp(5rem, 24vw, 8rem) !important;
    inset: auto 0 6vh 0 !important;
  }

  #main-content .motor-card:hover,
  #main-content .segment-card:hover,
  #main-content .pricing-card:hover,
  #main-content .testimonial-card:hover {
    transform: none !important;
  }
}
@media (max-width: 992px) {
  #main-content .segments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}