/* Hero em grid e patterns (substitui o filme) + logo em imagem na navbar. Carregado depois de styles.css. */
.logo-img { display: block; width: 34px; height: 34px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24); }
.hero--v2 { background: #01040b; }
.hero--v2 .hero__stage { --cell: 64px; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__lines { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(153, 202, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(153, 202, 255, 0.1) 1px, transparent 1px); background-size: var(--cell) var(--cell); }
.hero__glow { position: absolute; inset: 0; background: radial-gradient(44% 52% at 84% 16%, rgba(14, 118, 255, 0.5), transparent 70%), radial-gradient(36% 40% at 58% 104%, rgba(32, 94, 227, 0.42), transparent 70%), radial-gradient(30% 34% at 8% 6%, rgba(100, 176, 242, 0.12), transparent 70%); }
.hero__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(153, 202, 255, 0.34) 1px, transparent 1.6px); background-size: calc(var(--cell) / 4) calc(var(--cell) / 4); -webkit-mask-image: linear-gradient(115deg, transparent 46%, #000 62%, transparent 86%); mask-image: linear-gradient(115deg, transparent 46%, #000 62%, transparent 86%); opacity: .55; }
.hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__marks i { position: absolute; width: 15px; height: 15px; margin: -7px 0 0 -7px; background: linear-gradient(#f5f5f5, #f5f5f5) center / 100% 1.5px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) center / 1.5px 100% no-repeat; opacity: .7; }
.hero__marks i:nth-child(1) { left: calc(var(--cell) * 3); top: calc(var(--cell) * 2); }
.hero__marks i:nth-child(2) { left: calc(var(--cell) * 11); top: calc(var(--cell) * 4); }
.hero__marks i:nth-child(3) { left: calc(var(--cell) * 17); top: calc(var(--cell) * 2); }
.hero__marks i:nth-child(4) { left: calc(var(--cell) * 8); top: calc(var(--cell) * 9); }
.hero--v2 .hero__shade { background: linear-gradient(90deg, rgba(1, 4, 11, 0.9) 0%, rgba(1, 4, 11, 0.62) 34%, rgba(1, 4, 11, 0) 68%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 26%), linear-gradient(180deg, rgba(1, 4, 11, 0.7) 0%, rgba(1, 4, 11, 0) 16%); }
@media (max-width: 900px) {
  .hero--v2 .hero__stage { --cell: 46px; }
  .hero--v2 .hero__shade { background: linear-gradient(180deg, rgba(1, 4, 11, 0.86) 0%, rgba(1, 4, 11, 0.7) 46%, rgba(1, 4, 11, 0.2) 72%, #000 100%); }
}