:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --border: #1a1a2e;
  --text: #c0c0d0;
  --dim: #555570;
  --cyan: #00f0ff;
  --magenta: #ff00aa;
  --green: #00ff88;
  --yellow: #ffee00;
  --purple: #8844ff;
  --glow-cyan: 0 0 20px rgba(0,240,255,0.3);
  --glow-magenta: 0 0 20px rgba(255,0,170,0.3);
  --glow-green: 0 0 20px rgba(0,255,136,0.3);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-mono); line-height:1.7; overflow-x:hidden; }
::selection { background:var(--cyan); color:var(--bg); }

/* Scanlines overlay */
body::after {
  content:''; position:fixed; top:0; left:0; width:100%; height:100%;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  pointer-events:none; z-index:9999;
}

/* Matrix rain canvas */
#matrix-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; opacity:0.06; }

/* Glitch effect */
@keyframes glitch {
  0%,100% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); }
  25% { text-shadow: -2px -1px var(--cyan), 2px 1px var(--magenta); }
  50% { text-shadow: 1px 2px var(--cyan), -1px -2px var(--magenta); }
  75% { text-shadow: -1px 1px var(--cyan), 1px -1px var(--magenta); }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes typewriter { from{width:0} to{width:100%} }
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

.cursor { animation:blink 0.8s infinite; color:var(--cyan); }
.glitch:hover { animation:glitch 0.3s infinite; }

/* Nav */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,15,0.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); padding:0.8rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { color:var(--cyan); font-size:1rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.nav-logo span { color:var(--magenta); }
.nav-links { display:flex; gap:1.5rem; }
.nav-links a { color:var(--dim); font-size:0.8rem; text-decoration:none; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; }
.nav-links a:hover { color:var(--cyan); text-shadow:var(--glow-cyan); }

/* Hero */
.hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:6rem 2rem 4rem; max-width:900px; margin:0 auto;
}
.hero-pre { color:var(--dim); font-size:0.8rem; margin-bottom:0.5rem; }
.hero-name {
  font-size:3.5rem; font-weight:900; letter-spacing:-1px;
  background:linear-gradient(135deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:0.5rem;
}
.hero-title { color:var(--green); font-size:1.1rem; margin-bottom:1.5rem; }
.hero-bio { color:var(--dim); font-size:0.9rem; max-width:600px; line-height:1.8; }
.hero-bio .hl { color:var(--cyan); }
.hero-bio .hl2 { color:var(--magenta); }
.hero-bio .hl3 { color:var(--green); }
.hero-links { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero-links a {
  padding:8px 18px; border:1px solid var(--border); border-radius:4px;
  color:var(--text); text-decoration:none; font-size:0.8rem; transition:all 0.3s;
}
.hero-links a:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-cyan); }

/* Terminal */
.terminal {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  margin:2rem 0; overflow:hidden;
}
.terminal-header {
  background:rgba(255,255,255,0.03); padding:8px 14px;
  display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border);
}
.terminal-dot { width:10px; height:10px; border-radius:50%; }
.terminal-dot.red { background:#ff5f57; }
.terminal-dot.yellow { background:#ffbd2e; }
.terminal-dot.green { background:#28c840; }
.terminal-title { color:var(--dim); font-size:0.7rem; margin-left:8px; }
.terminal-body { padding:1.2rem 1.5rem; font-size:0.85rem; line-height:2; }
.terminal-body .prompt { color:var(--green); }
.terminal-body .cmd { color:var(--cyan); }
.terminal-body .output { color:var(--dim); }
.terminal-body .val { color:var(--yellow); }
.terminal-body .key { color:var(--magenta); }

/* Sections */
.section { max-width:900px; margin:0 auto; padding:4rem 2rem; }
.section-header {
  display:flex; align-items:center; gap:1rem; margin-bottom:2rem;
  padding-bottom:0.5rem; border-bottom:1px solid var(--border);
}
.section-header h2 { font-size:1.3rem; color:var(--cyan); letter-spacing:2px; text-transform:uppercase; }
.section-header .line { flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }

/* Timeline */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:1px; background:var(--border); }
.timeline-item { position:relative; margin-bottom:2.5rem; animation:fadeUp 0.6s ease-out; }
.timeline-item::before {
  content:''; position:absolute; left:-2rem; top:8px;
  width:13px; height:13px; border-radius:50%;
  border:2px solid var(--cyan); background:var(--bg);
}
.timeline-item.active::before { background:var(--cyan); box-shadow:var(--glow-cyan); }
.timeline-item .period { color:var(--dim); font-size:0.75rem; margin-bottom:4px; }
.timeline-item .role { color:var(--text); font-size:1rem; font-weight:700; }
.timeline-item .company { color:var(--magenta); font-size:0.9rem; }
.timeline-item .desc { color:var(--dim); font-size:0.82rem; margin-top:6px; }
.timeline-item .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tag {
  font-size:0.7rem; padding:2px 8px; border-radius:3px;
  border:1px solid var(--border); color:var(--dim);
}
.tag-lang { border-color:var(--cyan); color:var(--cyan); }
.tag-infra { border-color:var(--green); color:var(--green); }
.tag-ai { border-color:var(--magenta); color:var(--magenta); }

/* Skills grid */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.skill-card {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:1.2rem; transition:all 0.3s;
}
.skill-card:hover { border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.skill-card h3 { color:var(--cyan); font-size:0.9rem; margin-bottom:0.8rem; }
.skill-bar { height:3px; background:var(--border); border-radius:2px; margin:6px 0; overflow:hidden; }
.skill-bar-fill { height:100%; border-radius:2px; transition:width 1s ease-out; }
.skill-bar-fill.cyan { background:var(--cyan); }
.skill-bar-fill.magenta { background:var(--magenta); }
.skill-bar-fill.green { background:var(--green); }
.skill-name { display:flex; justify-content:space-between; font-size:0.78rem; color:var(--dim); }

/* Projects */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.project-card {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:1.5rem; transition:all 0.3s; position:relative; overflow:hidden;
}
.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
}
.project-card:hover { border-color:var(--magenta); transform:translateY(-2px); box-shadow:var(--glow-magenta); }
.project-card h3 { font-size:0.95rem; color:var(--text); margin-bottom:0.5rem; }
.project-card p { font-size:0.8rem; color:var(--dim); }
.project-card .project-tech { margin-top:0.8rem; display:flex; gap:6px; flex-wrap:wrap; }

/* Agent status */
.agent-status {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:1.5rem; margin:1rem 0;
}
.agent-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:0.82rem; }
.agent-dot { width:8px; height:8px; border-radius:50%; animation:pulse 2s infinite; }
.agent-dot.online { background:var(--green); }
.agent-dot.idle { background:var(--yellow); }
.agent-name { color:var(--cyan); min-width:140px; }
.agent-task { color:var(--dim); }

/* Footer */
.footer {
  text-align:center; padding:3rem 1rem; color:var(--dim); font-size:0.75rem;
  border-top:1px solid var(--border);
}
.footer .heartbeat { color:var(--green); animation:pulse 2s infinite; }

/* Mobile */
@media(max-width:600px) {
  .hero-name { font-size:2.2rem; }
  .nav { padding:0.6rem 1rem; }
  .nav-links { gap:0.8rem; }
  .nav-links a { font-size:0.7rem; }
  .section { padding:3rem 1rem; }
  .skills-grid, .project-grid { grid-template-columns:1fr; }
}