* { box-sizing: border-box; cursor: crosshair; }
body { margin: 0; height: 100vh; background: radial-gradient(circle at top,#12002a,#000); font-family: 'Share Tech Mono', monospace; color: #e0e0e0; overflow: hidden; }
.noise { position: fixed; width: 100%; height: 100%; background-image: url("https://grainy-gradients.vercel.app/noise.svg"); opacity: 0.08; pointer-events: none; }
.container { position: relative; top: 50%; transform: translateY(-50%); text-align: center; max-width: 500px; margin: auto; padding: 40px; border: 1px solid #6f00ff; box-shadow: 0 0 40px #6f00ff55; background: rgba(0,0,0,0.7); }
.glitch { font-size: 72px; color: #b388ff; position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; width: 100%; opacity: 0.7; }
.glitch::before { color: #ff2fd3; animation: glitch 2s infinite; }
.glitch::after { color: #7df9ff; animation: glitch 1.5s infinite; }
@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-3px,3px); } 40% { transform: translate(-3px,-3px); } 60% { transform: translate(3px,3px); } 80% { transform: translate(3px,-3px); } 100% { transform: translate(0); } }
.subtitle { color: #7df9ff; margin-top: 10px; font-size: 18px; }
.desc { color: #aaa; margin: 20px 0 30px; }
.btn { display: inline-block; padding: 10px 25px; border: 1px solid #ff2fd3; color: #ff2fd3; text-decoration: none; transition: 0.3s; }
.btn:hover { background: #ff2fd3; color: black; box-shadow: 0 0 20px #ff2fd3; }