/* ==========================================================================
   HyperCash — Botões CTA no estilo da LP original:
   fundo preto + borda reluzente (conic-gradient verde→branco) girando.
   ========================================================================== */
@property --hyper-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes hyper-rotate { to { --hyper-ang: 360deg; } }

/* ---- CTAs pretos (hero, Sobre, etc.) — borda reluzente como o original ---- */
.hb-cta--hero,
a.elementor-button {
  position: relative;
  background:
    linear-gradient(#0a7a30, #0a7a30) padding-box,
    conic-gradient(from var(--hyper-ang),
      rgba(0,0,0,0), #6beb56 3%, #eafff0 11%, #6beb56 19%, rgba(0,0,0,0) 26%) border-box !important;
  border: 3px solid transparent !important;
  border-radius: 360px !important;
  color: #ffffff !important;
  animation: hyper-rotate 2.6s linear infinite !important;
  transition: transform .15s ease;
}
/* glow externo da luz girando — em maior evidência */
.hb-cta--hero::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--hyper-ang),
    rgba(0,0,0,0), #6beb56 8%, #eafff0 14%, #6beb56 20%, rgba(0,0,0,0) 30%);
  filter: blur(10px); opacity: .9;
  animation: hyper-rotate 2.6s linear infinite;
}
.hb-cta--hero {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  margin-top: 8px; z-index: 4;
  font-family: "Oakes Grotesk", sans-serif !important;
  font-size: 18px; padding: 18px 40px; text-decoration: none;
}
.hb-cta--hero:hover, a.elementor-button:hover { transform: translateY(-2px); }

/* botão do hero centralizado (igual os CTAs do meio) */
.elementor-element-536b062 { width: 100% !important; max-width: 100% !important; }
.elementor-element-536b062,
.elementor-element-536b062 .elementor-widget-container { text-align: center !important; }
.hb-cta--hero:hover, a.elementor-button:hover { animation-duration: 1.6s !important; }

/* texto sempre branco dentro do botão Elementor */
a.elementor-button .elementor-button-content-wrapper,
a.elementor-button .elementor-button-text,
a.elementor-button span { color: #ffffff !important; }
a.elementor-button::before, a.elementor-button::after,
a.elementor-button span::before { display: none !important; content: none !important; }

/* ---- Botão do quiz (card escuro) — segue verde com anel reluzente ---- */
#hyper-quiz .hq-cta { position: relative; z-index: 0; isolation: isolate; }
#hyper-quiz .hq-cta::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--hyper-ang),
    transparent 0deg, #54ec66 30deg, #d8ffdf 62deg, rgba(84,236,102,0) 150deg, transparent 360deg);
  animation: hyper-rotate 3.2s linear infinite;
}
#hyper-quiz .hq-cta::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--hyper-ang),
    transparent 0deg, #54ec66 50deg, transparent 150deg, transparent 360deg);
  filter: blur(7px); opacity: .55; animation: hyper-rotate 3.2s linear infinite;
}
#hyper-quiz .hq-cta:hover::before, #hyper-quiz .hq-cta:hover::after { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .hb-cta--hero, a.elementor-button,
  #hyper-quiz .hq-cta::before, #hyper-quiz .hq-cta::after { animation: none !important; }
}

/* ==========================================================================
   Logo do hero — centralizada e compacta
   ========================================================================== */
.elementor-element-c4c847a,
.elementor-element-c4c847a .elementor-widget-container { text-align: center !important; }
.elementor-element-c4c847a img {
  display: inline-block !important; float: none !important;
  width: 120px !important; max-width: 120px !important; height: auto !important; margin: 0 auto !important;
}
@media (max-width: 560px) {
  .elementor-element-c4c847a img { width: 100px !important; max-width: 100px !important; }
}