@font-face {
  font-family: "OpenHackDisplay";
  src: url("/fonts/9a4ee768fed045da-s.p.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.font-display-hero,
.font-headline-lg,
.font-headline-md,
.font-headline-sm,
.font-label-caps {
  font-family: "OpenHackDisplay", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body { overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #171119; }
::-webkit-scrollbar-thumb { background: #39333b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ff0af6; }

@media (max-width: 639px) {
  .hero-title { font-size: 34px !important; line-height: 38px !important; }
  .section-title { font-size: 24px !important; line-height: 28px !important; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 28px !important; line-height: 32px !important; }
}

.tab-btn { transition: all 0.3s ease; }
.tab-btn.active {
  background: #ff0af6;
  color: #51004d;
  box-shadow: 0 0 25px rgba(255, 10, 246, 0.6);
}
.tab-btn:not(.active) { background: #2e2830; color: #dcbed3; }
.tab-btn:not(.active):hover { background: #39333b; }

.hud-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
}

@keyframes ufoPatrolFlight {
  0% { left: 8px; transform: translateY(0px) rotate(-2deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { left: calc(100% - 116px); transform: translateY(0px) rotate(2deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
  100% { left: 8px; transform: translateY(0px) rotate(-2deg); }
}

.ufo-patrol {
  position: absolute;
  top: -38px;
  width: max-content;
  max-width: none;
  flex-shrink: 0;
  pointer-events: none;
  animation: ufoPatrolFlight 7s ease-in-out infinite;
  will-change: left, transform;
  z-index: 30;
}