.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-art { display: block; width: 260px; height: auto; max-width: 100%; overflow: hidden; }
footer .logo-art { width: 190px; }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero > .hero-meta, .hero > .hero-body, .hero > .hero-bottom { position: relative; z-index: 2; }
.hero .matrix-art {
  --hero-cycle: 18s;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 82%, transparent 100%);
  z-index: 0;
}
.matrix-signature {
  position: absolute;
  width: 99%;
  left: .5%;
  top: 38%;
  color: #8fff64;
  opacity: 0;
  filter: blur(2.8px);
  animation: matrix-breath var(--hero-cycle) ease-in-out infinite;
}
.matrix-signature svg { display: block; width: 100%; height: auto; filter: sepia(1) saturate(2.5) hue-rotate(32deg); }
.matrix-art canvas { position: absolute; inset: 0; z-index: 1; }
.matrix-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080b09a6, #080b0959 47%, #080b0910 78%);
  z-index: 2;
}
@keyframes matrix-breath {
  0%, 42%, 100% { opacity: 0; }
  10%, 30% { opacity: .15; }
}
@media (max-width: 1150px) { .header .logo-art { width: 215px; } }
@media (max-width: 950px) and (min-width: 681px) {
  .header nav { display: none; }
  .header .logo-art { width: 250px; }
}
@media (max-width: 680px) {
  .header .logo-art { width: 185px; }
  footer .logo-art { width: 160px; }
  .hero-body { min-height: 560px; }
  .matrix-signature { top: 61%; width: 100%; left: 0; }
  .matrix-art::after { background: linear-gradient(180deg, #080b0970, #080b098c 48%, #080b0910 83%); }
}
@media (max-width: 360px) {
  .header .logo-art { width: 158px; }
  .header .language-symbol { display: none; }
  .header .language-picker select { max-width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .matrix-signature { animation: none; opacity: 0; } }