/* Hero da landing da SBR: "Seus dados organizados. Seus agentes de IA sob controle."
   Pixel em SVG (crispEdges), no molde da janela do livro da Brevvi: texto de um lado, objeto pixel do outro.
   Blocos de dados chegam espalhados e se alinham na grade; o agente fica atrás do portão, dentro dos colchetes de controle. */
.hero-sbr h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; margin-bottom: .6rem; }
.hero-sbr h1 span { display: block; }
.hero-sbr h1 span + span { color: var(--roxo); }
.hero-sbr .sub-hero { max-width: 44ch; }
.hero-sbr .hero-ordem { width: min(100%, 26rem); }
.hero-pixel { display: block; width: 100%; aspect-ratio: 5 / 4; border: 2px solid var(--borda); background: var(--fundo-janela); box-shadow: 4px 4px 0 var(--borda); image-rendering: pixelated; }
.hero-pixel rect { shape-rendering: crispEdges; }
.hero-pixel .d { fill: var(--roxo); }
.hero-pixel .d.b { fill: var(--ciano); }
.hero-pixel .d.c { fill: var(--ouro); }
.hero-pixel .portao { fill: var(--borda); }
.hero-pixel .colchete { fill: var(--roxo); }
.hero-pixel .agente { fill: var(--texto); }
.hero-pixel .olho { fill: var(--destaque); }
.hero-pixel .cadeado { fill: var(--ouro); }
.hero-pixel .miolo { fill: var(--fundo-janela); }
.hero-pixel .d { animation: hero-ordena 6s steps(5, end) infinite; }
.hero-pixel .olho { animation: hero-pisca 6s steps(1, end) infinite; }
@keyframes hero-ordena {
  0%, 12% { transform: translate(var(--dx), var(--dy)); }
  55%, 92% { transform: translate(0, 0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes hero-pisca { 0%, 88% { opacity: 1; } 90%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-pixel .d, .hero-pixel .olho { animation: none; transform: none; } }