/* Bitsyfer Hero — composição baseada na referência enviada */
:root {
  --ink: #0b0d0b;
  --white: #f7f7f2;
  --muted: rgba(247,247,242,.88);
  --line: rgba(255,255,255,.34);
  --page-pad: clamp(24px, 4.8vw, 56px);
  --font: "Manrope", "Avenir Next", Avenir, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--font); }
a { color: inherit; text-decoration: none; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 79% 108% at 100% 100%, #a6ec24 0%, #83b923 29%, #4c681d 55%, rgba(27,39,13,.95) 76%, transparent 100%),
    linear-gradient(110deg, #0b0d0c 0%, #11160d 44%, #273b12 100%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 74% 58%, rgba(161,225,35,.12), transparent 70%);
}
.topbar {
  position: absolute; z-index: 5; top: 25px; left: var(--page-pad); right: var(--page-pad);
  min-height: 68px; padding: 0 25px;
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center;
  border: 1px solid rgba(255,255,255,.13); border-right-color: rgba(206,239,117,.38);
  border-bottom-color: rgba(206,239,117,.34); border-radius: 8px;
  background: rgba(9,11,9,.30);
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.brand { display: inline-flex; align-items: center; gap: 17px; width: max-content; font-size: 17px; font-weight: 800; letter-spacing: .045em; }
.brand__mark { width: 34px; height: 28px; }
.navigation { display: flex; align-items: center; justify-content: center; gap: clamp(36px, 6.3vw, 76px); }
.navigation a, .navigation__contact { font-size: 17px; font-weight: 500; transition: opacity .2s ease; }
.navigation a:hover, .navigation__contact:hover { opacity: .68; }
.navigation__contact { justify-self: end; }
.hero__content {
  position: relative; width: min(680px, 80vw);
  padding-top: clamp(210px, 36.7vh, 240px);
  margin-left: var(--page-pad);
}
.hero__content h1 {
  margin: 0; font-size: clamp(40px, 4.25vw, 49px); line-height: 1.22;
  letter-spacing: -.045em; font-weight: 500;
}
.hero__content p {
  margin: 35px 0 0; color: var(--muted); font-size: 18px;
  line-height: 1.42; letter-spacing: -.015em; font-weight: 400;
}
.hero__actions { display: flex; gap: 29px; margin-top: 50px; }
.button {
  display: inline-flex; min-width: 148px; height: 36px; padding: 0 19px;
  align-items: center; justify-content: center; border: 1px solid var(--line);
  border-radius: 5px; color: rgba(255,255,255,.82); font-size: 13px;
  font-weight: 500; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.button:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.72); transform: translateY(-1px); }
.scroll-cue {
  position: absolute; right: var(--page-pad); bottom: 21px;
  display: flex; align-items: center; gap: 29px; font-size: 14px; font-weight: 600;
}
.scroll-cue__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.58); border-left-color: transparent;
  border-radius: 50%; transition: transform .25s ease, background .25s ease;
}
.scroll-cue:hover .scroll-cue__icon { transform: translateY(4px); background: rgba(255,255,255,.1); }
.scroll-cue__icon svg { width: 19px; height: 19px; fill: none; stroke: white; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle { display: none; }
@media (min-width: 1400px) {
  .hero__content { padding-top: 36.7vh; }
}
@media (max-width: 760px) {
  :root { --page-pad: 20px; }
  .hero { min-height: 720px; min-height: 100svh; }
  .topbar { top: 16px; min-height: 62px; padding: 0 17px; grid-template-columns: 1fr auto; }
  .brand { gap: 12px; font-size: 15px; }
  .brand__mark { width: 30px; }
  .navigation, .navigation__contact { display: none; }
  .menu-toggle { display: flex; width: 38px; height: 38px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; }
  .menu-toggle span { display: block; height: 1px; width: 22px; background: white; }
  .topbar.is-open { grid-template-rows: 62px auto; }
  .topbar.is-open .navigation { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 2px 0 14px 42px; }
  .topbar.is-open .navigation a { padding: 10px 0; font-size: 15px; }
  .hero__content { width: calc(100% - 40px); padding-top: clamp(190px, 31vh, 245px); }
  .hero__content h1 { font-size: clamp(36px, 9vw, 48px); line-height: 1.18; }
  .hero__content p { margin-top: 27px; font-size: 16px; }
  .hero__actions { gap: 12px; flex-wrap: wrap; margin-top: 38px; }
  .button { min-width: 137px; }
  .scroll-cue { right: 20px; bottom: 18px; gap: 14px; font-size: 12px; }
  .scroll-cue__icon { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .hero__content h1 { font-size: 34px; }
  .hero__actions { gap: 9px; }
  .button { min-width: 128px; padding: 0 12px; }
}


/* ==========================================================
   HERO — FUNDO ESPELHADO 3D
   Mantém o degradê escuro -> verde da composição original,
   usando os mesmos tons dos cartões e do título da seção Foco.
   Efeitos restritos à Hero; não alteram outras seções.
   ========================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 82% 112% at 100% 100%,
      #b5fa39 0%,
      #98d330 23%,
      #709c24 43%,
      rgba(76,104,29,.96) 58%,
      rgba(27,39,13,.96) 75%,
      transparent 100%
    ),
    linear-gradient(
      112deg,
      #0b0d0c 0%,
      #11160d 38%,
      #273b12 72%,
      #709c24 100%
    );
}

/* Grande superfície refletiva com profundidade e bordas luminosas. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: -16% -12% -24% 24%;
  border-radius: 48% 0 0 38%;
  background:
    linear-gradient(
      128deg,
      transparent 4%,
      rgba(255,255,255,.025) 17%,
      rgba(255,255,255,.16) 28%,
      rgba(220,255,164,.055) 36%,
      transparent 48%,
      rgba(194,255,94,.12) 66%,
      rgba(255,255,255,.035) 78%,
      transparent 91%
    ),
    linear-gradient(
      155deg,
      rgba(181,250,57,.20) 0%,
      rgba(152,211,48,.12) 34%,
      rgba(112,156,36,.18) 68%,
      rgba(25,38,12,.06) 100%
    );
  border-top: 1px solid rgba(235,255,201,.24);
  border-left: 1px solid rgba(235,255,201,.10);
  box-shadow:
    inset 0 2px 18px rgba(255,255,255,.10),
    inset 0 -35px 70px rgba(10,20,0,.15),
    -22px 16px 80px rgba(0,0,0,.12);
  transform: perspective(1300px) rotateY(-13deg) rotateX(4deg);
  transform-origin: right center;
  opacity: .88;
  mix-blend-mode: screen;
}

/* Reflexo especular suave que percorre a superfície. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 35%,
      rgba(255,255,255,0) 43%,
      rgba(255,255,255,.16) 49%,
      rgba(225,255,185,.07) 52%,
      rgba(255,255,255,0) 59%,
      transparent 66%
    );
  opacity: .48;
  transform: translateX(-38%);
  animation: bfHeroMirrorReflection 13s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 100% at 78% 50%,
    #000 10%,
    rgba(0,0,0,.82) 48%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 78% 100% at 78% 50%,
    #000 10%,
    rgba(0,0,0,.82) 48%,
    transparent 100%
  );
}

.hero__glow {
  z-index: 0;
  background:
    radial-gradient(
      ellipse 58% 70% at 76% 57%,
      rgba(181,250,57,.18),
      rgba(152,211,48,.07) 42%,
      transparent 74%
    ),
    linear-gradient(
      145deg,
      transparent 40%,
      rgba(255,255,255,.035) 52%,
      transparent 64%
    );
}

.hero__content,
.scroll-cue {
  z-index: 2;
}

@keyframes bfHeroMirrorReflection {
  0%, 12% {
    transform: translateX(-48%);
    opacity: .18;
  }
  48% {
    opacity: .52;
  }
  88%, 100% {
    transform: translateX(28%);
    opacity: .20;
  }
}

@media (max-width: 760px) {
  .hero::before {
    inset: 8% -48% -8% 8%;
    border-radius: 52% 0 0 42%;
    transform: perspective(900px) rotateY(-8deg) rotateX(3deg);
    opacity: .72;
  }
  .hero::after {
    opacity: .28;
    animation-duration: 17s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
    transform: translateX(0);
    opacity: .24;
  }
}


/* ==========================================================
   HERO MIRROR — REFLEXO DINÂMICO E PROFUNDIDADE 3D REAL
   Variáveis atualizadas por bf-mirrors.js.
   ========================================================== */
.hero {
  --hero-mirror-x: 50%;
  --hero-mirror-y: 50%;
  --hero-rotate-x: 0deg;
  --hero-rotate-y: 0deg;
  background:
    radial-gradient(
      ellipse 82% 112% at 100% 100%,
      #b5fa39 0%,
      #98d330 23%,
      #709c24 43%,
      rgba(76,104,29,.96) 58%,
      rgba(27,39,13,.96) 75%,
      transparent 100%
    ),
    linear-gradient(112deg, #0b0d0c 0%, #11160d 38%, #273b12 72%, #709c24 100%);
}
.hero::before {
  transform:
    perspective(1300px)
    rotateY(calc(-13deg + var(--hero-rotate-y)))
    rotateX(calc(4deg + var(--hero-rotate-x)));
  background:
    radial-gradient(
      ellipse 42% 50% at var(--hero-mirror-x) var(--hero-mirror-y),
      rgba(255,255,255,.28) 0%,
      rgba(226,255,180,.13) 18%,
      transparent 68%
    ),
    linear-gradient(
      128deg,
      transparent 4%,
      rgba(255,255,255,.035) 17%,
      rgba(255,255,255,.24) 28%,
      rgba(220,255,164,.075) 36%,
      transparent 48%,
      rgba(194,255,94,.17) 66%,
      rgba(255,255,255,.055) 78%,
      transparent 91%
    ),
    linear-gradient(
      155deg,
      rgba(181,250,57,.24) 0%,
      rgba(152,211,48,.15) 34%,
      rgba(112,156,36,.22) 68%,
      rgba(25,38,12,.08) 100%
    );
  transition: transform .22s ease-out;
}
.hero::after {
  background:
    radial-gradient(
      ellipse 35% 55% at var(--hero-mirror-x) var(--hero-mirror-y),
      rgba(255,255,255,.15),
      transparent 72%
    ),
    linear-gradient(
      112deg,
      transparent 35%,
      rgba(255,255,255,0) 43%,
      rgba(255,255,255,.22) 49%,
      rgba(225,255,185,.11) 52%,
      rgba(255,255,255,0) 59%,
      transparent 66%
    );
  background-size: 100% 100%, 220% 100%;
  animation:
    bfHeroMirrorReflection 11s ease-in-out infinite,
    bfHeroMirrorGlint 8s ease-in-out infinite;
}
@keyframes bfHeroMirrorGlint {
  0%, 100% { background-position: center, 0% 50%; }
  50% { background-position: center, 100% 50%; }
}
@media (max-width: 760px) {
  .hero::before {
    transform:
      perspective(900px)
      rotateY(calc(-8deg + var(--hero-rotate-y)))
      rotateX(calc(3deg + var(--hero-rotate-x)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { transition: none; }
  .hero::after {
    animation: none;
    background-position: center;
    opacity: .28;
  }
}


/* ==========================================================
   HERO — FUNDO FIEL À IMAGEM DE REFERÊNCIA ENVIADA
   Usa o recorte real do fundo verde da captura original.
   O menu, textos e botões continuam sendo HTML funcional.
   ========================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b0d0c !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 10, 9, .96) 0%,
      rgba(8, 10, 9, .76) 27%,
      rgba(8, 10, 9, .18) 58%,
      rgba(8, 10, 9, 0) 100%
    ),
    url("../images/hero-mirror-reference.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  background-position: center, center right !important;
}
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}
.hero__glow {
  opacity: 0 !important;
  display: none !important;
}