/* styles.css (enhanced with new features) */
:root{
  --bg:#0d1117;
  --panel:#0f1724;
  --muted:#98a0aa;
  --accent:#58a6ff;
  --accent-dark:#1f6feb;
  --text:#e6eef8;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --container-w:1100px;
  --nav-h:76px;
  --max-mobile-width:980px;
  --success:#3fb950;
  --warning:#d29922;
  --error:#f85149;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:linear-gradient(180deg,var(--bg),#071021);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; line-height:1.6}
a{color:inherit; text-decoration: none}
.container{max-width:var(--container-w);margin:24px auto;padding:0 20px}

/* Header */
.header{height:var(--nav-h);display:flex;align-items:center;justify-content:center;gap:16px;position:relative}
nav.primary{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
nav.primary a{padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:600;transition:all .18s;white-space:nowrap}
nav.primary a.active, nav.primary a:hover{background:var(--glass);border:1px solid rgba(255,255,255,0.04);color:var(--accent);transform:translateY(-3px)}

/* Hero */
.hero{display:flex;gap:28px;align-items:center;padding:22px 0;animation:fadeUp .4s both}
.avatar{
  width:184px;height:184px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);border:3px solid rgba(255,255,255,0.04);font-weight:800;font-size:44px;color:var(--text);flex-shrink:0;position:relative;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.bio{flex:1}
.site-name-large{font-size:28px;font-weight:800;color:var(--text);margin-bottom:4px}
.bio .subtitle{color:var(--accent);font-weight:700;margin-bottom:8px}
.bio p{color:var(--muted);margin-bottom:12px}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 16px 0;
  align-items: center;
}

.info-item {
  display: contents;
}

.kv {
  font-weight: 600;
  color: var(--text);
}

.cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--glass);
  color: var(--text);
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn.primary:hover {
  background: var(--accent-dark);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.stat-card {
  background: var(--glass);
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}

.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Layout card */
.main-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:24px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);margin-bottom:20px;animation:fadeUp .36s both}
.section-title{font-size:20px;color:#fff;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(2,6,23,0.6)}
.card h3{color:var(--accent);margin-bottom:8px}
.card p{color:var(--muted);font-size:14px; margin-bottom: 12px;}

/* Enhanced Project Cards */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}

.card-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
}

.tech-stack {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tech-tag {
  background: rgba(88, 166, 255, 0.1);
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(88, 166, 255, 0.2);
  white-space: nowrap;
}

.project-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.project-features li {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

.project-features li:before {
  content: "▸";
  color: var(--accent);
  position: absolute;
  left: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.project-type {
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.project-links {
  display: flex;
  gap: 8px;
}

.project-link {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.project-link:hover {
  background: rgba(88, 166, 255, 0.1);
}

/* Project Filters */
.project-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Form Styles */
.form .input, .form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text); font-family: inherit}
textarea{min-height:120px;resize:vertical}
footer{padding:18px 0;color:var(--muted);text-align:center}

/* Featured Projects */
.card.featured {
  border: 1px solid rgba(88, 166, 255, 0.2);
  background: linear-gradient(135deg, var(--panel), rgba(88, 166, 255, 0.05));
}

/* Responsive Design - No Hamburger */
@media (max-width:980px){
  .hero{flex-direction:column;align-items:center;text-align:center}
  
  nav.primary {
    gap: 8px;
  }
  
  nav.primary a {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .header {
    height: auto;
    padding: 16px 0;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .cta-buttons {
    justify-content: center;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .project-filters {
    justify-content: center;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px){
  nav.primary a {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  
  .avatar{width:136px;height:136px;font-size:34px}
  .site-name-large{font-size:22px}
  .bio .subtitle{font-size:0.9rem}
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grid .card{opacity:0;transform:translateY(6px);animation:cardIn .45s forwards;animation-delay:calc(var(--i)*0.05s)}
@keyframes cardIn{to{opacity:1;transform:none}}
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(88,166,255,0.12);outline-offset:2px}