* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0c10;
  --fg: #e6e6e6;
  --muted: #a3a3a3;
  --accent: #9cf1ff;
  --orb: #d0f0ff;
  --halo: rgba(156, 241, 255, 0.25);
}
html, body { height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 800px at 50% 20%, #141622 0%, #0b0c10 55%, #07080b 100%);
  color: var(--fg);
  overflow-x: hidden;
}
#grain, .scanlines { pointer-events: none; position: fixed; inset: 0; }
#grain {
  opacity: .12;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
  mix-blend-mode: soft-light;
}
.scanlines {
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 2px, transparent 4px);
  opacity: .08;
}
main { min-height: 100%; display: grid; place-items: center; padding: 6rem 1.25rem 2rem; }
.brand { text-align: center; margin-bottom: 2rem; }
.brand h1 { font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); }
.brand h1 span { opacity: .7; }
.tagline { margin-top: .5rem; color: var(--muted); }
.orb { width: 120px; height: 120px; margin: 0 auto 1rem; position: relative; filter: drop-shadow(0 0 30px rgba(156,241,255,.3)); animation: float 6s ease-in-out infinite; }
.orb-core { width: 100%; height: 100%; border-radius: 999px; background: radial-gradient(circle at 40% 35%, var(--orb), #9ed9ff 40%, #4e7d99 70%, #17384c 100%); box-shadow: inset 0 0 40px rgba(255,255,255,.25); }
.orb-halo { position: absolute; inset: -18px; border-radius: 999px; background: radial-gradient(circle, var(--halo), transparent 60%); animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .20; } 50% { opacity: .45; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.intro { margin: 1.25rem 0 2rem; text-align: center; }
.typewriter { font-family: monospace; color: var(--accent); min-height: 1.4em; }
footer { margin-top: 2.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(560px, 100%); }
footer .easter { background: transparent; border: 1px solid rgba(156,241,255,.2); color: var(--muted); border-radius: .5rem; padding: .35rem .6rem; cursor: pointer; }
footer small { color: var(--muted); }
@media (max-width: 520px) { footer { flex-direction: column; } }