:root{
  --bg:#010207;
  --neon1:#00ffd5;
  --neon2:#00a3ff;
  --neon3:#8aff6b;
  --muted:#9fb9c6;
  --panel: rgba(6,10,18,0.6);
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at center, rgba(2,6,20,1) 0%, rgba(1,2,7,1) 60%);
  color:#d9e6ef;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

/* canvas + svg layers */
#matrix-canvas { position: fixed; inset:0; z-index:0; pointer-events:none; }
#network-svg { position: fixed; inset:0; z-index:1; pointer-events:none; opacity:0.22; }

/* mouse follower */
#mouse-follower{
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: screen;
  transform: translate(-50%,-50%) scale(0.9);
  transition: transform .08s linear;
  box-shadow: 0 0 18px rgba(0,160,255,0.9), 0 0 34px rgba(0,255,197,0.25);
  background: radial-gradient(circle at 30% 30%, rgba(0,255,213,0.98), rgba(0,123,255,0.8));
}

/* container */
.container{ max-width:var(--maxw); margin:0 auto; padding:2rem; position:relative; z-index:3; }

/* nav */
.nav-wrap{ position: sticky; top:0; z-index:30; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(1,2,7,0.45), rgba(1,2,7,0.15)); border-bottom: 1px solid rgba(255,255,255,0.02); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 2rem; }
.brand{ display:flex; flex-direction:column; }
.logo{ font-family:'Orbitron', monospace; color:var(--neon1); font-weight:700; letter-spacing:1px; font-size:1.1rem; text-shadow: 0 0 14px rgba(0,255,213,0.06); }
.subtitle{ font-size:0.75rem; color:var(--muted) }
.nav-links{ list-style:none; display:flex; gap:1rem; align-items:center; margin:0; padding:0 }
.nav-links a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; font-weight:500; }
.nav-links a:hover{ color:var(--neon2); transform: translateY(-3px); }

/* cta */
.cta{ background: linear-gradient(90deg,var(--neon1),var(--neon2)); padding:8px 14px; border-radius:10px; color:#001219; font-weight:700; text-decoration:none; }

/* hero */
.hero{ min-height:78vh; display:flex; align-items:center; z-index:3; padding:3rem 1rem; }
.hero-grid{ display:grid; grid-template-columns: 1fr 420px; gap:2rem; align-items:center; }
.hero-left{ padding:1rem; }
.neon{ font-family:'Orbitron', monospace; font-size:3rem; color:var(--neon1); margin:0; text-shadow:0 0 28px rgba(0,255,213,0.12); }
.lead{ color:#9fb9c6; margin:8px 0 16px; font-weight:500 }
.desc{ color:var(--muted); margin-bottom:18px; max-width:620px; }

/* buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; cursor:pointer; border:1px solid rgba(255,255,255,0.04); transition: all .25s ease; box-shadow: 0 6px 22px rgba(0,0,0,0.6); }
.btn-primary{ background: linear-gradient(90deg,var(--neon1),var(--neon2)); color:#001219; font-weight:700; }
.btn-ghost{ background: transparent; color:var(--neon1); border:1px solid rgba(255,255,255,0.04); }

/* hacker card */
.hacker-card{ position:relative; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.6); border:1px solid rgba(0,120,255,0.06); }
.hacker-shape{ width:100%; height:300px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(255,255,255,0.02)); }

/* sections */
.section{ padding:4.5rem 0; position:relative; z-index:3; }
.section h2{ font-family:'Orbitron', monospace; color:var(--neon2); margin-bottom:1rem; font-size:1.6rem; text-shadow:0 0 12px rgba(0,160,255,0.08) }

/* about grid */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1rem }

/* skills */
.skills-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1rem; }
.skill-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); padding:1.2rem; border-radius:12px; border:1px solid rgba(0,120,255,0.04); }

/* projects */
.projects-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }

/* contact */
.contact-cards{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.card{ background: var(--glass); padding:1rem; border-radius:10px; min-width:180px; border:1px solid rgba(255,255,255,0.02); }

/* forms */
.contact-form{ display:grid; gap:.6rem; max-width:700px; }
.contact-form input, .contact-form textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:#e6f7ff }

/* footer */
.footer{ padding:2rem 0; border-top:1px solid rgba(255,255,255,0.02); color:var(--muted); z-index:3 }
.footer-grid{ display:flex; justify-content:space-between; gap:1rem; align-items:center }

/* AOS */
[data-aos]{ opacity:0; transform: translateY(10px); transition: all .8s ease }
[data-aos].aos-animate{ opacity:1; transform:none }

/* responsive */
@media (max-width:980px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center }
  .nav-links{ display:none }
  .about-grid{ grid-template-columns: 1fr }
  .skills-grid{ grid-template-columns: 1fr }
  .mobile-toggle{ display:block }
}