/* ===== Base Reset ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* Cyber Grid Background */
body::before{

content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(circle at center,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.6) 70%);

pointer-events:none;

}

body{

font-family: system-ui, sans-serif;
background-color:#0b0f14;
color:#e6edf3;
line-height:1.6;

background-image:
linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,.05) 1px, transparent 1px);

background-size:40px 40px;

animation:gridMove 20s linear infinite;

}

/* subtle movement */

@keyframes gridMove{

0%{
background-position:0 0;
}

100%{
background-position:40px 40px;
}

}

/* ===== Layout ===== */

.container{

max-width:1100px;
margin:auto;
padding:40px 20px;

}

/* ===== Header ===== */

.site-header{

background:#020617;
border-bottom:1px solid #1f2937;
padding:20px;

display:flex;
justify-content:space-between;
align-items:center;

}

/* =========================
   Logo Styling
========================= */
.logo-container{

display:flex;
flex-direction:column;

}

/* logo */

.logo{

font-family:'Press Start 2P', monospace;
font-size:18px;
letter-spacing:2px;

}

/* tagline */

.logo-tag{

font-size:11px;
margin-top:8px;
opacity:.7;
letter-spacing:2px;

}

/* glowing text */

.logo-main{

color:#60a5fa;

text-shadow:
0 0 5px #60a5fa,
0 0 10px #60a5fa,
0 0 20px #2563eb;

}

.logo-pixel{

color:#a855f7;

text-shadow:
0 0 5px #a855f7,
0 0 10px #9333ea,
0 0 20px #7e22ce;

}

.logo-main,
.logo-pixel{

animation:logoGlow 3s infinite alternate;

}

@keyframes logoGlow{

from{opacity:.8;}
to{opacity:1;}

}

/* =========================
   Navigation Styling
========================= */

.nav{

display:flex;
gap:20px;

}

.nav a{

position:relative;

font-family:'Press Start 2P', monospace;
font-size:11px;
letter-spacing:1px;

text-decoration:none;

color:#60a5fa;

padding:8px 10px;

transition:all .2s ease;

text-shadow:
0 0 4px #60a5fa,
0 0 8px #2563eb;

}

/* hover glow */

.nav a:hover{

color:#a855f7;

text-shadow:
0 0 6px #a855f7,
0 0 12px #9333ea,
0 0 18px #7e22ce;

}

/* animated underline */

.nav a::after{

content:"";

position:absolute;

left:0;
bottom:-4px;

width:0%;
height:2px;

background:#a855f7;

box-shadow:
0 0 6px #a855f7,
0 0 10px #9333ea;

transition:width .25s;

}

.nav a:hover::after{

width:100%;

}

/* ===== Hero ===== */

.hero{

margin-bottom:60px;

}

.hero h2{

margin-bottom:10px;

}

/* ===== Footer ===== */

.site-footer{

border-top:1px solid #1f2937;
background:#020617;
padding:20px;
text-align:center;

}

.download-card{

background:#020617;
border:1px solid #1f2937;
padding:20px;
margin-bottom:20px;
border-radius:8px;

}

.download-card h3{

margin-bottom:10px;

}

.download-card a{

color:#38bdf8;
text-decoration:none;

}

.size{

opacity:.7;
font-size:14px;

}

.projects{

margin-top:60px;

}

.project-card{

background:#020617;
border:1px solid #1f2937;
border-radius:8px;
padding:20px;
margin-bottom:20px;

transition:.2s;

}

.project-card:hover{

border-color:#38bdf8;
transform:translateY(-3px);

}

.project-card a{

color:#38bdf8;
text-decoration:none;

}

#projectList,
#downloadList{

margin-top:20px;

}