@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;400;600&display=swap');

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-900:#05060a;
  --bg-800:#071026;
  --panel:#081425;
  --text:#cfe6f7;
  --muted:#9fb8c9;
  --accent-cyan:#00f0ff;
  --accent-mag:#ff4ec8;
  --neon-glow:0 0 18px rgba(0,240,255,0.12),0 0 34px rgba(255,78,200,0.06);
  --glass-border:rgba(255,255,255,0.06);
}
body{
  font-family:'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  background:radial-gradient(1200px 600px at 10% 10%, rgba(0,240,255,0.04), transparent),
             linear-gradient(180deg,var(--bg-900),var(--bg-800));
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
a{color:var(--accent-cyan);text-decoration:underline}
.container{width:90%;max-width:1100px;margin:0 auto}

/* Utility neon */
.neon{color:var(--accent-cyan);text-shadow:0 0 8px rgba(0,240,255,0.25),0 0 24px rgba(0,240,255,0.06)}
.glow{box-shadow:var(--neon-glow)}

/* Subtle vignette for atmospheric depth */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 48%, rgba(0,0,0,0.28) 100%);
  mix-blend-mode:multiply;
  opacity:0.6;
  transition:opacity .3s ease;
}

/* Header */
header{padding:18px 0}
.header-container{display:flex;justify-content:space-between;align-items:center}
.logo a{color:var(--text);font-weight:700;letter-spacing:0.08em}
.nav-list{list-style:none;display:flex;gap:18px}
.nav-list a{color:var(--muted);padding:6px 10px;border-radius:6px}
.nav-list a.active,.nav-list a:hover{color:var(--accent-mag);text-shadow:0 0 8px rgba(255,78,200,0.12)}

/* Hero */
/* Hero */
.hero{color:var(--text);text-align:center;padding:120px 0;background:linear-gradient(180deg,rgba(0,0,0,0.15),transparent)}
.hero h2{font-family:'Orbitron',sans-serif;font-size:3.2rem;margin-bottom:12px;letter-spacing:0.06em}
.hero p{font-size:1.15rem;color:var(--muted);margin-bottom:18px}
.btn{padding:10px 18px;border-radius:10px;font-weight:700;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-mag));color:#021018;box-shadow:0 6px 30px rgba(2,6,23,0.6);}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 0 24px rgba(0,240,255,0.18)}
.btn.ghost:hover{color:var(--accent-cyan);text-shadow:0 0 8px rgba(0,240,255,0.08)}

/* Sections */
/* Sections */
.section{padding:80px 0}
.section h2{text-align:center;margin-bottom:28px;font-family:'Orbitron',sans-serif}

/* Subtle heading flicker to suggest neon signs */
.neon-flicker{display:inline-block;color:var(--accent-cyan);text-shadow:0 0 8px rgba(0,240,255,0.18),0 0 20px rgba(255,78,200,0.04);animation:neonFlicker 3.8s infinite}

@keyframes neonFlicker{
  0%{opacity:1;text-shadow:0 0 8px rgba(0,240,255,0.22),0 0 22px rgba(255,78,200,0.06)}
  5%{opacity:.92;text-shadow:0 0 6px rgba(0,240,255,0.18)}
  10%{opacity:1;text-shadow:0 0 10px rgba(0,240,255,0.24),0 0 28px rgba(255,78,200,0.06)}
  30%{opacity:.96}
  60%{opacity:1}
  75%{opacity:.94;text-shadow:0 0 6px rgba(0,240,255,0.14)}
  100%{opacity:1;text-shadow:0 0 8px rgba(0,240,255,0.22)}
}

.section-full{padding:72px 0}

/* Panels / cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:12px;border:1px solid var(--glass-border);padding:16px;overflow:hidden}

/* Projects grid */
/* Projects grid */
.project-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.project-item{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.002));border-radius:10px;padding:14px;border:1px solid rgba(255,255,255,0.03);transition:transform .22s ease,box-shadow .22s ease}
.project-item:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(0,0,0,0.6),0 0 28px rgba(0,240,255,0.06)}
.project-item img{width:100%;height:auto;border-radius:6px}
.project-info h3{margin:12px 0 6px;font-family:'Orbitron',sans-serif}
.project-info p{color:var(--muted);font-size:0.95rem}

/* Footer */
/* Footer */
footer{background:transparent;text-align:center;padding:26px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* Small responsive tweaks */
@media (max-width:768px){
  .header-container{flex-direction:column;gap:10px}
  .nav-list{flex-direction:column;gap:10px}
  .hero{padding:80px 0}
}

/* Responsive */
@media (max-width:768px){
  .header-container{
    flex-direction: column;
    gap: 10px;
  }
  .nav-list{
    flex-direction: column;
    gap: 10px;
  }
}