:root{
  --bg:#0b0b0f;
  --panel:#12121a;
  --ink:#eaeef5;
  --muted:#aab3c0;
  --neon1:#00f0ff;
  --neon2:#ff00ff;
  --neon3:#39ff14;
  --accent:#fdee00;
  --grid: rgba(255,255,255,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(0,240,255,.1), transparent 60%),
              radial-gradient(1000px 800px at 110% 10%, rgba(255,0,255,.08), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}
.container{width:min(1100px, 92%); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:20; background:rgba(11,11,15,.7); backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--grid)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-family:Audiowide, Inter; font-size:1.2rem; letter-spacing:.08em; text-decoration:none; color:var(--ink)}
.brand-glow{text-shadow:0 0 6px var(--neon1), 0 0 18px var(--neon2)}
.brand-sub{opacity:.7; margin-left:.25rem; font-size:.9rem}
nav .nav-link{position:relative; margin-left:18px; text-decoration:none; color:var(--ink); opacity:.9}
nav .nav-link::after{content:attr(data-glitch); position:absolute; left:0; top:0; mix-blend-mode:screen; opacity:.0; text-shadow:-1px 0 var(--neon1), 1px 0 var(--neon2)}
nav .nav-link:hover::after{animation:glitch 900ms steps(2,end) infinite; opacity:.9}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-1px,-1px)}40%{transform:translate(1px,1px)}60%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}100%{transform:translate(0)}}

.hero{padding:12vh 0 8vh; text-align:center}
.neon-title{
  font-family:Audiowide, Inter; font-size: clamp(2.2rem, 7vw, 4.2rem);
  letter-spacing:.06em; margin:0 0 .5rem;
  text-shadow: 0 0 6px var(--neon1), 0 0 14px var(--neon1), 0 0 28px var(--neon2);
}
.tagline{opacity:.85; max-width:52ch; margin:0 auto 1.5rem; font-weight:300}
.cta-row{display:flex; gap:12px; justify-content:center}
.btn{padding:12px 18px; border:1px solid var(--grid); background:var(--panel); color:var(--ink); text-decoration:none; border-radius:8px; transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-neon{border-color:rgba(0,240,255,.5); box-shadow:0 0 14px rgba(0,240,255,.3) inset, 0 0 24px rgba(255,0,255,.16) inset}
.btn-outline{background:transparent}

.grid-section{padding:40px 0 70px}
.section-title{font-family:Audiowide, Inter; letter-spacing:.08em}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--panel); border:1px solid var(--grid); border-radius:12px; padding:14px}
.card-thumb{width:100%; aspect-ratio:16/10; background-size:cover; background-position:center; border-radius:8px; margin-bottom:10px; filter:saturate(115%) contrast(105%)}
.card h3{margin:.4rem 0}
.card p{opacity:.85}
.card-link{color:var(--neon1); text-decoration:none}
.card:hover{box-shadow:0 0 32px rgba(0,240,255,.08), 0 0 32px rgba(255,0,255,.06)}

.page-title{font-family:Audiowide, Inter; margin:26px 0}
.project{border-top:1px dashed var(--grid); padding:22px 0}
.project .tag{font-size:.8rem; color:var(--accent)}
.project-media{display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0 8px}
.project-media .img{width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:10px; filter:contrast(105%)}
.meta{display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; opacity:.9}

.about-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.about-card{background:var(--panel); border:1px solid var(--grid); border-radius:12px; padding:16px}

.site-footer{margin-top:60px; background:rgba(18,18,26,.7); border-top:1px solid var(--grid)}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:24px 0}
.link-list{list-style:none; padding:0; margin:0}
.link-list li{margin:6px 0}

.scanlines{
  pointer-events:none; position:fixed; inset:0; z-index:1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;
  animation:scan 6s linear infinite;
}
@keyframes scan{
  0%{background-position-y:0}
  100%{background-position-y:8px}
}

@media (prefers-reduced-motion: reduce){
  .scanlines, nav .nav-link::after, .neon-title{animation:none}
}
/* SFX toggle button styling */
.sfx-toggle{
  margin-left: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--grid);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.sfx-toggle:hover{
  box-shadow: 0 0 12px rgba(0,240,255,.25) inset, 0 0 16px rgba(255,0,255,.12) inset;
}