@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&display=swap');
:root{
  --bg:#050505;
  --accent:#ff2d2d;
  --flash:#ff0077;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:white;font-family:'Orbitron',sans-serif;overflow:hidden;}
canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;animation:shakebg 8s infinite alternate;}
h1{font-size:5rem;color:var(--accent);text-shadow:0 0 20px var(--accent),0 0 40px var(--flash);animation:flicker 2s infinite alternate;}
.tag{margin-top:.5rem;margin-bottom:1.5rem;opacity:.8;font-size:1.2rem;animation:pulseText 3s infinite alternate;}
.cta{font-size:1.3rem;padding:1rem 2rem;border:3px solid var(--accent);border-radius:10px;background:rgba(255,0,0,0.1);color:var(--accent);cursor:pointer;transition:.2s;animation:glow 1.5s infinite alternate;}
.cta:hover{background:var(--accent);color:black;box-shadow:0 0 40px var(--accent);}
.visual img{width:380px;max-width:80%;filter:drop-shadow(0 0 40px var(--flash));animation:spin 6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes flicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}20%,24%,55%{opacity:0.2;}}
@keyframes pulseText{0%{opacity:.6;}100%{opacity:1;}}
@keyframes glow{0%{box-shadow:0 0 10px var(--accent);}100%{box-shadow:0 0 40px var(--flash);}}
@keyframes shakebg{0%{background:#050505;}100%{background:#200000;}}
.shake{animation:shake .3s;}
@keyframes shake{0%,100%{transform:translate(0);}25%{transform:translate(8px,-8px);}50%{transform:translate(-8px,8px);}75%{transform:translate(8px,8px);}}