:root{
  --ink:#EEEEEE; --muted:#cfd3d4; --bg:#222831; --card:#393E46;
  --accent:#00ADB5; --accent-dark:#008a91; --line:#2f353b;
  --radius:16px; --shadow:0 8px 20px rgba(0,0,0,.35);
}

body{margin:0;font-family:ui-sans-serif,system-ui;background:var(--bg);color:var(--ink);}
.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* nav */
header.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#6ff);box-shadow:var(--shadow)}
.site-title{font-size:20px;margin:0}
.top-links a{color:var(--muted);text-decoration:none;margin-left:16px}
.top-links a:hover{color:var(--ink)}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;background:var(--accent);color:#062b2d;text-decoration:none;font-weight:600}
.btn:hover{background:var(--accent-dark);color:white}
.btn-ghost{background:transparent;color:var(--ink);outline:1px solid var(--line)}
.btn-ghost:hover{outline-color:var(--accent);color:var(--accent)}
.linkedin { display:inline-flex; align-items:center; justify-content:center; padding:8px; border-radius:999px; line-height:0; }
.linkedin img { width: 64px; height: 64px; display:block; }

/* hero */
.card-xl{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding:28px;border-radius:var(--radius);background:linear-gradient(180deg,#2a3139, #232931);}
.hero-title{font-size:28px;margin:0 0 8px}
.hero-sub{color:var(--muted);margin:0 0 14px}
.actions{display:flex;gap:10px;margin:10px 0 14px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 12px;border-radius:999px;background:#2a2f36;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.hero-right{display:grid;justify-items:center;gap:12px}
.avatar{width:110px;height:110px;border-radius:20px;background:
  radial-gradient(60% 60% at 30% 30%, #6ff, transparent 70%),
  radial-gradient(80% 80% at 70% 40%, var(--accent), transparent 60%), #0f1419;
  box-shadow:var(--shadow)}
.stats{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.stats li{display:grid;justify-items:center}
.stats b{font-size:18px}
.stats span{font-size:12px;color:var(--muted)}

/* sections */
.section{margin:28px 0}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.section-head h3{margin:0;font-size:20px}
.panel{background:var(--card);border:1px solid var(--line);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* grid + cards */
.grid{display:grid;gap:14px}
.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .card-xl{grid-template-columns:1fr} .grid.cards,.grid.cards.three{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.card h4{margin:0 0 8px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#2a2f36;border:1px solid var(--accent);color:var(--accent);font-size:12px}
.proj-icon {
  width: 64px;
  height: 64px;
  margin-right:6px;
  vertical-align:middle;
  filter: drop-shadow(0 0 1px #000);
}
.project h4 {
  display:flex;
  align-items:center;
  gap:6px;
}
.card.project {
  display:block;
  color:inherit;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.card.project:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.profile-icon {
  width: 160px;
  height: 160px;
  margin-right:6px;
  vertical-align:middle;
  filter: drop-shadow(0 0 1px #000);
}

/* timeline */
.timeline{position:relative;display:grid;gap:14px}
.timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
.t{position:relative;padding-left:28px}
.t::before{content:"";position:absolute;left:4px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.t .t-head{display:grid;margin-bottom:6px}
.t time{color:var(--muted);font-size:12px}
.t.minor{opacity:.8}
.k{margin-top:6px;color:var(--muted);font-size:13px}

/* lists */
ul{margin:8px 0 0 18px}
li{margin:4px 0}
.brackets{color:var(--muted)}

/* footer */
.footer{margin:32px 0 8px;color:var(--muted);text-align:center;font-size:13px}

/* Projects page */
.crumbs{margin:6px 0 14px;color:var(--muted);font-size:13px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.media-grid img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width:900px){ .media-grid{grid-template-columns:1fr} }

.download-btn {
  background-color: #fff;
  color: #333;
  padding: 4px 8px;
  font-size: 0.85em;
  border-radius: 4px;
  text-decoration: none;
}
.download-btn:hover {
  background-color: #eee;
}