:root {
  --bg: #020308;
  --fg: #f5f5f5;
  --accent: #5cf7ff;
  --accent-soft: rgba(92, 247, 255, 0.2);
  --muted: #8c8f98;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: radial-gradient(circle at top, #0a0d16 0, #020308 55%, #000 100%);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  overflow: hidden;
}

/* Subtle fullscreen noise */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: noiseShift 8s linear infinite;
}

@keyframes noiseShift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-40px, 20px, 0); }
}

/* Parallax orb */
.orb {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #5cf7ff, transparent 60%),
              radial-gradient(circle at 70% 80%, #ff2b6e, transparent 55%);
  filter: blur(6px);
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 200ms ease-out;
}

/* Main frame */
.frame {
  position: relative;
  max-width: 1200px;
  height: 100vh;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--muted);
}

.badge {
  border: 1px solid var(--accent-soft);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2, 3, 8, 0.8);
  backdrop-filter: blur(10px);
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1dfd7a;
  box-shadow: 0 0 8px #1dfd7a;
}

/* Hero layout */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px;
  align-items: center;
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Glitch title */
.hero-text {
  position: relative;
  z-index: 2;
}

.glitch {
  position: relative;
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.3;
  color: var(--fg);
  text-align: left;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.glitch::before {
  color: #5cf7ff;
  transform: translate3px;
  clip-path: polygon(0 0, 100% 3%, 100% 35%, 0 38%);
  animation: glitchTop 3s infinite linear alternate-reverse;
}

.glitch::after {
  color: #ff2b6e;
  transform: translate(-2px, 0);
  clip-path: polygon(0 60%, 100% 58%, 100% 100%, 0 100%);
  animation: glitchBottom 2.4s infinite linear alternate-reverse;
}

@keyframes glitchTop {
  0% { transform: translate(2px, -1px); }
  50% { transform: translate(-3px, 1px); }
  100% { transform: translate(1px, 0); }
}

@keyframes glitchBottom {
  0% { transform: translate(-2px, 1px); }
  50% { transform: translate(3px, 0); }
  100% { transform: translate(-1px, -1px); }
}

.subtitle {
  margin-top: 16px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Panel */
.hero-panel {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  border: 1px solid var(--accent-soft);
  background: rgba(3, 4, 10, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02),
              0 20px 60px rgba(0, 0, 0, 0.8);
  padding: 18px 18px 16px;
  backdrop-filter: blur(12px);
  font-size: 0.86rem;
}

.panel-title {
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.panel-body {
  color: var(--muted);
  line-height: 1.5;
}

.panel-body p + p {
  margin-top: 10px;
}

.panel-line {
  font-family: monospace;
}

.accent {
  color: var(--accent);
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

@media (max-width: 700px) {
  .footer {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

.hint {
  opacity: 0.8;
}

.tiny {
  opacity: 0.6;
}