
:root{
  --bg-top:#1b0000; --bg-bottom:#000000;
  --fg:#F7F7F7; --muted:#B8B8B8;
  --accent:#C40000; --card:#0F0F0F;
  --radius:18px; --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:var(--fg);
  font:16px/1.7 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji'}
img{max-width:100%;height:auto}
.container{max-width:1140px;margin:0 auto;padding:0 18px}
a{color:#fff;text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.72);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #1e1e1e}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:12px 0}
.brand{font-weight:900;letter-spacing:.2px;color:#fff;text-decoration:none;white-space:nowrap;font-size:20px}
.brand.halo{ text-shadow:0 0 6px rgba(196,0,0,.48),0 0 14px rgba(196,0,0,.34),0 0 26px rgba(196,0,0,.25); animation:haloPulse 3s ease-in-out infinite }
@keyframes haloPulse{0%{text-shadow:0 0 6px rgba(196,0,0,.38),0 0 14px rgba(196,0,0,.26),0 0 26px rgba(196,0,0,.18)}50%{text-shadow:0 0 12px rgba(196,0,0,.7),0 0 26px rgba(196,0,0,.5),0 0 46px rgba(196,0,0,.36)}100%{text-shadow:0 0 6px rgba(196,0,0,.38),0 0 14px rgba(196,0,0,.26),0 0 26px rgba(196,0,0,.18)}}
nav{flex:1;display:flex;justify-content:center}
nav .menu{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav .menu a{color:#fff;padding:10px 12px;border-radius:12px;transition:background .2s ease, transform .2s ease}
nav .menu a:hover{background:#171717;transform:translateY(-1px)}

/* CTA/buttons */
.cta{background:var(--accent);border-radius:1000px;padding:11px 16px;text-decoration:none;display:inline-block;
  box-shadow:0 0 20px rgba(196,0,0,.36);color:#fff;font-weight:700;letter-spacing:.2px;transition:transform .2s ease, filter .2s ease}
.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
@keyframes softPulse{0%{box-shadow:0 0 12px rgba(196,0,0,.35)}50%{box-shadow:0 0 24px rgba(196,0,0,.65)}100%{box-shadow:0 0 12px rgba(196,0,0,.35)}}
.cta.glow{animation:softPulse 2.8s ease-in-out infinite}
.btn{display:inline-block;background:#141414;border:1px solid #262626;border-radius:12px;padding:10px 14px;text-decoration:none;color:#fff;transition:background .2s ease, transform .2s ease}
.btn:hover{background:#1d1d1d;transform:translateY(-1px)}

/* Sections */
section{margin:30px 0}
.card{background:rgba(18,18,18,.9);border:1px solid #222;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
h1{font-size:30px;margin:0 0 14px}
h2{font-size:22px;margin:0 0 12px}
.muted{color:var(--muted)}

/* Footer */
footer{padding:28px 0;color:var(--muted);border-top:1px solid #1e1e1e;margin-top:28px}
.footer-inner{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;align-items:center}
.footer-legal{color:var(--accent);font-weight:600;text-decoration:none;transition:filter .25s ease, text-shadow .25s ease}
.footer-legal:hover{filter:brightness(1.1);text-shadow:0 0 10px rgba(196,0,0,.45)}
.footer-discord{display:inline-flex;align-items:center;gap:8px}
.footer-discord .cta{padding:9px 14px}

/* Grid for portfolio */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.embed-card{background:#0f0f0f;border:1px solid #242424;border-radius:14px;padding:12px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.embed-card:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(196,0,0,.24);border-color:#C40000}
.embed-card .caption{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:920px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* Stats */
.stats{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.avatar-wrap{position:relative;width:120px;height:120px;border-radius:999px;overflow:hidden;margin:auto}
.avatar{width:100%;height:100%;object-fit:cover;border-radius:999px}
.avatar-wrap::before{content:"";position:absolute;inset:-6px;border-radius:999px;box-shadow:0 0 26px rgba(196,0,0,.55), 0 0 50px rgba(196,0,0,.35)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{background:#0f0f0f;border:1px solid #242424;border-radius:14px;padding:14px;text-align:center}
.stat .num{font-size:28px;font-weight:800}
.stat .label{font-size:13px;color:var(--muted)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Socials */
.socials{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.socials .pill{display:inline-flex;align-items:center;gap:8px;background:#141414;border:1px solid #262626;color:#fff;
  padding:9px 12px;border-radius:999px;text-decoration:none;font-weight:600;transition:transform .2s ease, background .2s ease}
.socials .pill:hover{background:#1d1d1d;transform:translateY(-1px)}
.socials .pill .emoji{font-size:18px;line-height:1}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta,.btn,.brand.halo{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
