:root{
  --hero-color-primary: #ffffff;
  --hero-color-secondary: #000000;
  --hero-color-tertiary: #333333;

  --hero-max-width: 1280px;
  --hero-gutter: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Source Code Pro', monospace;
  background: var(--hero-color-primary);
  color: var(--hero-color-secondary);
}

section.hero-hero{
  position:relative;
  overflow:visible;
  background: var(--hero-color-primary);
  padding: 64px 16px;
  display:flex;
  justify-content:center;
}

#hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero-container{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--hero-max-width);
  display:flex;
  gap:36px;
  align-items:center;
  padding:24px;
  margin:0 var(--hero-gutter);
}

/* layout: esquerda texto / direita imagem */
.hero-left{
  flex:1 1 520px;
  min-width:260px;
}

/* coluna direita com espaço adequado (não excessivo) */
.hero-right{
  flex:1.05 1 580px;
  min-width:280px;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
}

.hero-title{
  font-family:"Orbitron","Open Sans",sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3.2rem);
  line-height:1.02;
  margin:0 0 12px 0;
  letter-spacing:0.6px;
  color:var(--hero-color-secondary);
  opacity: 0;
  visibility: hidden;
}

.hero-subtitle{
  margin:0 0 22px 0;
  color:var(--hero-color-tertiary);
  font-size:clamp(1rem,1.8vw,1.125rem);
  max-width:56ch;
  line-height:1.6;
  font-weight:300;
  opacity: 0;
  visibility: hidden;

}

.hero-cta{ 
  display:flex; 
  gap:14px; 
  flex-wrap:wrap; 
  margin-top:12px; 
}

.hero-btn{
  font-family:inherit;
  font-size:0.95rem;
  padding:12px 18px;
  border-radius:10px;
  cursor:pointer;
  border:2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  display:inline-flex; 
  align-items:center; 
  gap:8px;
  opacity: 0;
  visibility: hidden;
}
.hero-btn:focus-visible{ outline:3px solid rgba(0,0,0,0.12); outline-offset:3px; }

.hero-btn--primary{
  background:var(--hero-color-secondary);
  color:var(--hero-color-primary);
  border-color:var(--hero-color-secondary);
  box-shadow:0 6px 22px rgba(0,0,0,0.12);
}
.hero-btn--primary:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,0.18); }

.hero-btn--secondary{
  background:transparent;
  color:var(--hero-color-secondary);
  border:2px solid var(--hero-color-secondary);
}
.hero-btn--secondary:hover{ transform:translateY(-3px); background:rgba(0,0,0,0.05); }

/* === IMAGEM: SOLUÇÃO DEFINITIVA - SEM FILTROS, SEM PROCESSAMENTO === */
.hero-image-wrapper{
  width:100%;
  max-width:640px;
  position:relative;
  overflow:visible;
  background:transparent;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px;
  opacity: 0;
  visibility: hidden;
}

/* SOLUÇÃO: Imagem completamente limpa - sem filtros, sem processamento */
.hero-image{
  width: clamp(320px, 42vw, 560px);
  height: auto;
  display:block;
  object-fit:contain;
  /* NENHUM FILTRO - deixa a imagem original intacta */
  transform-origin:center;
  transition: transform .6s ease;
  background:transparent;
  filter: grayscale(100%);
}

/* REMOVIDO: Processamento de fundo via CSS */
/* .hero-image[data-remove-bg] {
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
} */

/* extra: em telas muito largas, reduzíamos um pouco o máximo para manter equilíbrio */
@media (min-width: 1400px) {
  .hero-image-wrapper { max-width:600px; }
  .hero-image { width: clamp(360px, 34vw, 520px); }
}

/* glow / overlay sutil atrás da figura */
.hero-image-glow{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
}
.hero-image-glow::after{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88%; height:88%; border-radius:14px;
  background: radial-gradient(closest-side, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  mix-blend-mode:multiply; filter:blur(18px);
  pointer-events:none;
}

.hero-image-wrapper:hover .hero-image,
.hero-image-wrapper:focus-within .hero-image{
  transform:scale(1.02);
  /* SEM FILTROS NO HOVER TAMBÉM */
}

/* Classes para elementos visíveis após animação */
.hero-title.animate__animated,
.hero-subtitle.animate__animated,
.hero-btn.animate__animated,
.hero-image-wrapper.animate__animated {
  opacity: 1;
  visibility: visible;
}

/* Customização das animações para suavidade */
.animate__fadeInLeft,
.animate__fadeInUp,
.animate__fadeInTopLeft,
.animate__fadeInTopRight {
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

/* Responsividade: MOBILE: garantir que imagem fique grande o suficiente */
@media (max-width: 1024px){
  .hero-container{ gap:22px; padding:20px; }
  .hero-right{ order:2; }
  .hero-left{ order:1; }
}

@media (max-width: 820px){
  .hero-container{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-left, .hero-right{ min-width:auto; flex:none; }
  .hero-image-wrapper{
    width:100%;
    max-width:none;
    margin-top:18px;
  }
  /* Em mobile, imagem ocupa grande parte da largura (para evitar ser "ponto") */
  .hero-image{
    width: min(92vw, 900px);
  }
  .hero-cta{ justify-content:flex-start; }
}

@media (max-width:420px){
  section.hero-hero{ padding:32px 12px; }
  .hero-title{ font-size:clamp(1.6rem,6vw,2.1rem); }
  .hero-subtitle{ font-size:0.975rem; }
  .hero-cta{ gap:10px; }
  .hero-btn{ padding:10px 14px; border-radius:9px; }
  .hero-image{ width: min(90vw, 780px); }
}

@media (prefers-reduced-motion: reduce){
  .hero-image{ transition:none; }
  .hero-btn{ transition:none; }
  .hero-title,
  .hero-subtitle,
  .hero-btn,
  .hero-image-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
}

/* REMOVIDO: Solução adicional para desabilitar processamento via JavaScript */
/* .hero-image-wrapper .hero-image {
  background: transparent !important;
  filter: none !important;
} */