/* =============================================================
   Farthec — Hero avançado (duas colunas + mockup + aurora).
   Tudo em CSS: nada de imagem externa (a CSP bloquearia) e nenhum
   style inline. Pensado para o modo escuro, que é o padrão.
   ============================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(68px + var(--e-8)) 0 var(--e-9);
}

/* --- Camadas de fundo ---------------------------------------- */

/* Segundo halo de cor (roxo/verde), somado ao .hero-brilho azul. */
.hero-aurora {
  position: absolute;
  top: -10%;
  right: -15%;
  width: min(680px, 100vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 30% 30%, rgba(124, 92, 240, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(31, 169, 113, 0.18), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
  animation: aurora-flutua 20s ease-in-out infinite;
}

@keyframes aurora-flutua {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 4%) scale(1.08); }
}

/* Malha de pontos sutil, esmaecendo do topo. Dá "textura" ao fundo. */
.hero-grade-fundo {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--borda) 1px, transparent 1.4px);
  background-size: 30px 30px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%);
  pointer-events: none;
}

/* --- Layout em duas colunas ---------------------------------- */

.hero-interno {
  position: relative;
  display: grid;
  gap: var(--e-7);
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
}

.hero-texto { min-width: 0; }

/* No desktop: texto à esquerda, visual à direita. */
@media (min-width: 960px) {
  .hero-interno {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--e-8);
    text-align: left;
  }

  .hero-texto h1 { margin-inline: 0; max-width: 15ch; }
  .hero-texto .hero-subtitulo { margin-inline: 0; }
  .hero-texto .hero-acoes { justify-content: flex-start; }
  .hero-texto .hero-provas { justify-content: flex-start; }
  .hero-texto .hero-selo { margin-inline: 0; }
}

/* CTA principal com brilho mais forte e um leve "respiro". */
.hero-acoes .btn-primario {
  box-shadow: 0 8px 30px rgba(46, 107, 230, 0.5);
  animation: cta-respira 3.2s ease-in-out infinite;
}

@keyframes cta-respira {
  0%, 100% { box-shadow: 0 8px 30px rgba(46, 107, 230, 0.45); }
  50% { box-shadow: 0 10px 40px rgba(46, 107, 230, 0.7); }
}

/* --- Mockup: janela de navegador ----------------------------- */

.hero-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  /* Flutua suavemente para dar vida. */
  animation: mockup-flutua 6s ease-in-out infinite;
}

@keyframes mockup-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.mock-janela {
  border-radius: var(--raio-lg);
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-lg), 0 0 60px rgba(46, 107, 230, 0.15);
  overflow: hidden;
  /* Leve perspectiva 3D, como nos sites de produto. */
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform var(--transicao-lenta);
}

.hero-visual:hover .mock-janela {
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

.mock-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px var(--e-4);
  background: var(--fundo-alt);
  border-bottom: 1px solid var(--borda);
}

.mock-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--borda-forte); }
.mock-url {
  flex: 1;
  height: 16px;
  margin-left: var(--e-3);
  border-radius: var(--raio-full);
  background: var(--fundo);
}

.mock-tela { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }

.mock-topo { display: flex; align-items: center; justify-content: space-between; }
.mock-logo { width: 46px; height: 14px; border-radius: 5px; background: var(--gradiente-primario); }
.mock-nav { width: 96px; height: 8px; border-radius: 5px; background: var(--borda); }

/* Bloco "hero" interno com gradiente da marca. */
.mock-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--e-5) var(--e-4);
  border-radius: var(--raio);
  background:
    radial-gradient(circle at 80% 20%, rgba(59, 165, 240, 0.25), transparent 60%),
    var(--fundo-alt);
  border: 1px solid var(--borda);
}

.mock-linha { height: 12px; border-radius: 6px; background: var(--borda-forte); }
.mock-linha-1 { width: 78%; background: var(--gradiente-primario); }
.mock-linha-2 { width: 55%; }
.mock-btn { width: 90px; height: 22px; margin-top: 6px; border-radius: var(--raio-full); background: var(--gradiente-primario); }

.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-card { height: 64px; border-radius: var(--raio-sm); background: var(--fundo-alt); border: 1px solid var(--borda); }
.mock-card-destaque {
  background: linear-gradient(160deg, rgba(46, 107, 230, 0.18), var(--fundo-alt));
  border-color: var(--azul-600);
  transform: translateY(-6px);
}

/* --- Selos flutuantes ---------------------------------------- */

.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--raio-full);
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-lg);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero-chip-1 { top: 12%; right: -6%; animation: chip-flutua 5s ease-in-out infinite; }
.hero-chip-2 { bottom: 14%; left: -8%; animation: chip-flutua 5s ease-in-out 1.5s infinite; }

.hero-chip-marca { width: 9px; height: 9px; border-radius: 50%; }
.hero-chip-verde { background: var(--verde); box-shadow: 0 0 0 4px var(--verde-fraco); }
.hero-chip-azul { background: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-fraco); }

@keyframes chip-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* No celular os selos encostam nas bordas; puxamos para dentro. */
@media (max-width: 560px) {
  .hero-chip-1 { right: 2%; }
  .hero-chip-2 { left: 2%; }
  .hero-visual { max-width: 400px; }
}

/* Em telas bem estreitas, o mockup perde a perspectiva (fica reto e menor)
   para não competir com a mensagem — o texto é o que converte. */
@media (max-width: 420px) {
  .mock-janela { transform: none; }
  .hero { padding-bottom: var(--e-8); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .hero-visual, .hero-chip-1, .hero-chip-2,
  .hero-acoes .btn-primario { animation: none; }
}