:root{
  --bg:#071019;
  --card:#0b1620;
  --muted:#9aa4ad;
  --accent:#7c5cff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; background:linear-gradient(180deg,#05080b 0%, #071421 100%);color:#e6eef6;line-height:1.5}
.container{max-width:960px;margin:0 auto;padding:36px}
.hero{text-align:center;padding:40px 0}
.name{font-size:28px;letter-spacing:0.12em;margin:0;font-weight:800}
.title{margin-top:8px;color:var(--accent);font-weight:700}
.lead{margin-top:12px;color:var(--muted);max-width:700px;margin-left:auto;margin-right:auto}
.cta{margin-top:18px;display:flex;gap:12px;justify-content:center}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accent),#5ac8fa);color:#001;box-shadow:0 6px 18px rgba(124,92,255,0.12)}
.section{padding:28px 0;border-top:1px solid rgba(255,255,255,0.02)}
.section h2{margin:0 0 12px 0;font-size:18px}
.timeline{display:grid;gap:14px}
.item{background:var(--card);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.date{color:var(--accent);font-size:13px}
.role{font-weight:700;margin-top:6px}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.chip-group{background:var(--card);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.chips-row{margin-top:8px;color:var(--muted);font-size:14px}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0}
.card .meta{margin-top:8px;color:var(--muted);font-size:13px}
.card .link{display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none}
.footer{text-align:center;padding:28px 0;color:var(--muted);font-size:13px}

/* simple fade-in */
.section, .card, .item{opacity:0;transform:translateY(8px);animation:fadeUp 0.6s ease forwards}
.section:nth-of-type(1){animation-delay:0.05s}
.section:nth-of-type(2){animation-delay:0.12s}
.section:nth-of-type(3){animation-delay:0.18s}
.section:nth-of-type(4){animation-delay:0.24s}
.section:nth-of-type(5){animation-delay:0.30s}
@keyframes fadeUp{to{opacity:1;transform:none}} 

/* responsive */
@media (max-width:640px){.name{font-size:22px}.container{padding:20px}}