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

html, body {
  height: 100%;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: #070b0e;
  color: #cfe9e6;
  overflow: hidden;
}

#vanta-bg { position: fixed; inset: 0; z-index: 0; }

main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100vh; gap: 1.4rem; text-align: center; padding: 2rem;
}

.badge {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: #21d4c4; border: 1px solid rgba(33, 212, 196, 0.35);
  border-radius: 999px; padding: 0.35rem 1rem;
  background: rgba(33, 212, 196, 0.06);
}

.title {
  font-size: clamp(3rem, 13vw, 9rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: #eafffb;
  text-shadow: 0 0 30px rgba(33, 212, 196, 0.45), 0 0 70px rgba(33, 212, 196, 0.2);
}
.title span { color: #21d4c4; }

.subtitle {
  font-size: clamp(0.7rem, 2vw, 0.95rem); letter-spacing: 0.3em;
  text-transform: uppercase; color: #6f8c89;
}

.prompt {
  margin-top: 0.5rem; font-size: clamp(0.8rem, 2.2vw, 1rem);
  color: #9fece5; min-height: 1.4em;
}
.caret { color: #21d4c4; }
.cursor { animation: blink 1.05s steps(1) infinite; color: #21d4c4; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #vanta-bg { display: none; }
  body { background: radial-gradient(ellipse at center, #0a2b28 0%, #070b0e 70%); }
  .cursor { animation: none; }
}