:root{
  --bg: #f5f7fa;
  --card: #ffffff;
  --txt: #333333;
  --muted: #7f8c8d;
  --acc: #8e44ad;
  --acc-2: #3498db;
  --ring: rgba(142, 68, 173, 0.35);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; font-family: 'Montserrat', sans-serif; color:var(--txt); background:var(--bg); }

.container{ width:min(1100px, 92%); margin:0 auto; }

.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding: clamp(2rem, 3vw, 3rem) 0 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.hero__content{ display:flex; gap:2rem; align-items:center; }
.avatar{
  width:120px; height:120px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid #e0e0e0; box-shadow: 0 0 0 6px rgba(0,0,0,.02);
}
.hero__text h1{ margin:0 0 .2rem; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing:-.015em; }
.subtitle{ margin:.1rem 0; color:var(--muted); font-weight:600 }
.meta{ margin:.4rem 0 1rem; color:var(--muted) }

.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius:12px;
  text-decoration:none; border:1px solid #e0e0e0; font-weight:600;
}
.btn.primary{ background: linear-gradient(135deg, var(--acc), var(--acc-2));
  border-color: transparent; color:#fff; box-shadow: 0 10px 30px rgba(142, 68, 173,.25);
}
.btn.ghost{ color:var(--txt); background: #fff; }

.hero__bg{
  position:absolute; inset:-20% -10% auto -10%; height:280px; z-index:-1;
  background:
   radial-gradient(800px 200px at 10% 30%, rgba(142, 68, 173,.15), transparent 60%),
   radial-gradient(500px 180px at 80% 10%, rgba(52, 152, 219,.12), transparent 60%),
   radial-gradient(600px 200px at 50% 100%, rgba(142, 68, 173,.08), transparent 60%);
  filter:saturate(120%);
}

main{ padding: 1.5rem 0 3rem; }
.card{
  background: var(--card);
  border:1px solid #e0e0e0; border-radius:16px; padding:1.25rem; margin:1rem 0;
  box-shadow: 0 0 0 6px rgba(0,0,0,.01);
}
.card h2{ margin:0 0 .75rem; font-size:1.2rem; letter-spacing:.02em }

.item{ padding: .5rem 0 1rem; border-bottom:1px dashed #e0e0e0 }
.item:last-child{ border-bottom:0 }
.item__header{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline }
.item__header h3{ margin:.25rem 0; font-size:1.05rem }
.item__time{ color:var(--muted); font-size:.9rem }
.item__role{ margin:.25rem 0 .5rem; color:var(--txt); font-weight:600 }
.muted{ opacity:.8 }

.bullets{ margin:.25rem 0 0 1rem; padding:0 }
.bullets li{ margin:.25rem 0 }

.tags{ display:flex; gap:.5rem; flex-wrap:wrap }
.tag{ background:#f5f7fa; border:1px solid #e0e0e0; padding:.4rem .6rem; border-radius:999px; font-size:.9rem }

.contact-grid{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.contact-tile{
  display:flex; flex-direction:column; gap:.2rem; align-items:flex-start; justify-content:center;
  background:#f5f7fa; border:1px solid #e0e0e0; border-radius:12px; padding:1rem; color:var(--txt);
  text-decoration:none; cursor:pointer;
}
.contact-tile:hover{ outline: 2px solid var(--ring) }

.footer{ text-align:center; color:var(--muted); margin-top:2rem }

.todo{ color:#f39c12 }
@media (max-width:640px){
  .hero__content{ flex-direction:column; align-items:flex-start }
  .avatar{ width:96px; height:96px }
}