/* Base */
:root {
  --bg-0: #05010a;
  --bg-1: #0f0220;
  --neon-cyan: #00f5ff;
  --neon-pink: #ff00e6;
  --neon-purple: #8a2be2;
  --text: #e6e6e6;
  --muted: #9aa0a6;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
}
body {
  margin: 0;
  color: var(--text);
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: radial-gradient(1200px 800px at 70% 20%, rgba(255,0,230,0.09), transparent 60%),
              radial-gradient(1000px 700px at 30% 80%, rgba(0,245,255,0.08), transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0));
  overflow: hidden;
}

.container {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 24px;
}

/* Scanlines + noise overlay */
.scanlines::before,
.scanlines::after,
.noise::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.scanlines::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: soft-light;
  opacity: .2;
}
.scanlines::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.3), transparent);
  animation: sweep 6s linear infinite;
  opacity: .15;
}
.noise::before {
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: .4;
}

@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Brand */
.brand {
  text-align: center;
  margin-top: 6dvh;
}
.brand .tag {
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-top: 8px;
}

.glitch {
  position: relative;
  display: inline-block;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 7vw, 72px);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: white;
  text-shadow:
    0 0 10px var(--neon-cyan),
    0 0 20px var(--neon-cyan),
    0 0 30px var(--neon-pink),
    0 0 40px var(--neon-pink);
  animation: glow 3.2s ease-in-out infinite;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--neon-cyan);
  transform: translate(2px, -1px);
  mix-blend-mode: screen;
  animation: glitch-shift 2s infinite linear alternate-reverse;
}
.glitch::after {
  color: var(--neon-pink);
  transform: translate(-2px, 1px);
  mix-blend-mode: screen;
  animation: glitch-shift 1.7s infinite linear alternate;
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,245,255,.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(255,0,230,.7)); }
}
@keyframes glitch-shift {
  0% { clip-path: inset(0 0 80% 0); }
  20% { clip-path: inset(10% 0 60% 0); }
  40% { clip-path: inset(40% 0 30% 0); }
  60% { clip-path: inset(80% 0 0 0); }
  80% { clip-path: inset(50% 0 20% 0); }
  100% { clip-path: inset(0 0 80% 0); }
}

/* Buttons */
.cta {
  display: grid;
  gap: 16px;
  margin: 8dvh 0;
  grid-auto-rows: 1fr;
  width: min(520px, 92vw);
}

.btn {
  --border: rgba(255,255,255,.18);
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  backdrop-filter: blur(8px) saturate(120%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.btn.neon {
  box-shadow:
    inset 0 0 10px rgba(0,245,255,.15),
    0 0 0px rgba(0,0,0,0);
}
.btn.primary {
  border-color: rgba(255,0,230,.45);
  box-shadow:
    inset 0 0 10px rgba(255,0,230,.2),
    0 0 26px rgba(255,0,230,.18);
}

.btn span { letter-spacing: .08em; font-weight: 600; }

.btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg,
    var(--neon-cyan), var(--neon-pink), var(--neon-purple), var(--neon-cyan));
  filter: blur(14px);
  opacity: .0;
  transition: opacity .25s ease;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  background: rgba(5,1,10,.6);
}
.btn:hover { transform: translateY(-2px) scale(1.01); border-color: rgba(0,245,255,.45); }
.btn:hover::before { opacity: .45; }
.btn:active { transform: translateY(0) scale(.99); }

/* Footer */
.footer { color: var(--muted); font-size: 14px; text-align: center; margin-bottom: 2dvh; }
.mono { font-family: "Share Tech Mono", monospace; color: #c2c8cc; }

/* Responsive */
@media (max-width: 480px) {
  .btn { padding: 14px 18px; }
  .brand .tag { font-size: 14px; }
}