:root{--red:#ff1744;--red2:#ff5252;--dark:#0a0204;--glow:0 0 10px #ff1744,0 0 30px #ff1744aa}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(circle at 50% 0%,#3a0010,var(--dark) 70%);color:#fff;font-family:'Rajdhani',sans-serif;font-size:1.25rem;line-height:1.6;min-height:100vh;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:0}
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0000002e 3px 4px)}
main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:40px 16px}
.hero{text-align:center;padding:30px 0 50px}
.avatar-wrap{position:relative;width:220px;height:220px;margin:0 auto 30px;animation:float 3.5s ease-in-out infinite}
.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--red);box-shadow:var(--glow)}
.ring{position:absolute;inset:-14px;border-radius:50%;border:3px dashed var(--red2);animation:spin 12s linear infinite;opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-14px)}}
h1{font-family:'Press Start 2P',monospace;font-size:clamp(1.5rem,6vw,3rem);color:#fff;text-shadow:var(--glow);position:relative;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{text-shadow:0 0 20px #ff1744,0 0 60px #ff1744}}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:#0ff;left:3px;clip-path:inset(0 0 60% 0);animation:gl 3s infinite steps(1)}
.glitch::after{color:#f0f;left:-3px;clip-path:inset(60% 0 0 0);animation:gl 2.4s infinite steps(1) reverse}
@keyframes gl{0%,90%{transform:translate(0)}92%{transform:translate(-4px,2px)}95%{transform:translate(4px,-2px)}98%{transform:translate(-2px,0)}}
.sub{font-family:'Orbitron',sans-serif;font-size:1.1rem;margin-top:22px;color:var(--red2);min-height:1.8em;letter-spacing:2px}
.cursor{animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}
.links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{font-family:'Orbitron',sans-serif;font-weight:700;text-decoration:none;color:#fff;padding:16px 30px;border-radius:12px;border:2px solid;transition:.25s;letter-spacing:1px;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,#0000,#fff6,#0000);transform:skewX(-20deg);animation:shine 3s infinite}
@keyframes shine{60%,100%{left:160%}}
.yt{background:#c4001d;border-color:#ff5252;box-shadow:0 0 18px #ff1744aa}
.dc{background:#4752c4;border-color:#8a93ff;box-shadow:0 0 18px #5865f2aa}
.btn:hover{transform:translateY(-5px) scale(1.07)}
.card{background:#14000acc;border:2px solid #ff174466;border-radius:18px;padding:28px 30px;margin:28px 0;backdrop-filter:blur(4px);box-shadow:0 0 25px #ff17442e}
.card:hover{border-color:var(--red);box-shadow:0 0 30px #ff174477}
.card h2{font-family:'Orbitron',sans-serif;color:var(--red2);margin-bottom:14px;font-size:1.4rem;text-shadow:0 0 12px #ff1744}
.card p{margin:8px 0}
blockquote{border-left:4px solid var(--red);padding:10px 18px;margin:12px 0;font-style:italic;background:#ff17440f;border-radius:0 10px 10px 0}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(50px);transition:1s}
.reveal.show{opacity:1;transform:none}
footer{text-align:center;color:#ffffff88;font-size:1rem;padding:30px 0 10px}

/* ===== Mobile ===== */
html{-webkit-text-size-adjust:100%}
.btn{-webkit-tap-highlight-color:transparent}
@media (max-width:640px){
  body{font-size:1.1rem}
  main{padding:20px 14px}
  .hero{padding:10px 0 30px}
  .avatar-wrap{width:170px;height:170px;margin-bottom:26px}
  h1{font-size:clamp(1.1rem,7.5vw,1.8rem);line-height:1.4}
  .sub{font-size:.85rem;letter-spacing:1px;margin-top:16px}
  .links{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
  .btn{text-align:center;padding:16px 20px;font-size:1rem}
  .card{padding:20px 18px;margin:20px 0;border-radius:14px}
  .card h2{font-size:1.1rem}
  blockquote{padding:8px 14px}
  .scanlines{opacity:.5}
}
@media (hover:none){.btn:hover{transform:none}.btn:active{transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.dc-logo{width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.35em}
footer .credit{margin-top:10px;color:#ffffffcc;font-size:1.05rem}
footer .credit strong{font-family:'Orbitron',sans-serif;color:var(--red2);text-shadow:0 0 10px #ff1744;animation:pulse 2s infinite}
footer{font-size:.75rem}
footer .credit{font-size:.7rem;margin-top:6px}
.rb{background:rgba(190,190,200,.14);border-color:rgba(200,200,210,.45);color:#d4d4dc;box-shadow:0 0 14px rgba(200,200,210,.15);backdrop-filter:blur(4px)}
.rb:hover{background:rgba(190,190,200,.26)}
.rb-logo{width:1.25em;height:1.25em;vertical-align:-.28em;margin-right:.4em;color:rgba(210,210,220,.7)}
.label{font-family:'Orbitron',sans-serif;color:var(--red2);letter-spacing:3px;margin-top:30px;text-shadow:0 0 10px #ff1744;font-size:1rem}
.links-d{margin-top:14px}
.tw{background:#7a3fe0;border-color:#b794ff;box-shadow:0 0 18px #9146ffaa}
.tw-logo{width:1.2em;height:1.2em;vertical-align:-.25em;margin-right:.4em}
.label.first{margin-top:18px}