:root { --max: 980px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; line-height: 1.55; }
.container { max-width: var(--max); margin: 0 auto; padding: 28px 18px 60px; }
.hero { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #eee; }
h1 { margin: 0 0 6px; font-size: 34px; }
.subtitle { margin: 0; opacity: .75; }
.contact { text-align: right; font-size: 14px; opacity: .85; }
h2 { margin: 22px 0 10px; font-size: 20px; }
h3 { margin: 0; font-size: 16px; }
.muted { opacity: .7; }
.card { border: 1px solid #eee; border-radius: 12px; padding: 14px 14px 10px; margin: 10px 0; }
.row { display: flex; justify-content: space-between; gap: 10px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #eee; border-radius: 999px; padding: 6px 10px; font-size: 13px; }
.footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid #eee; font-size: 13px; }

@media (max-width: 720px){
  .hero { flex-direction: column; }
  .contact { text-align: left; }
  .grid { grid-template-columns: 1fr; }
}
/* LinkedIn-like header */
.li-card{
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.li-cover{
  height: 220px;
  background-size: cover;
  background-position: center;
}

.li-body{
  padding: 0 18px 18px;
  position: relative;
}

.li-avatar-wrap{
  position: absolute;
  top: -56px;
  left: 18px;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: #fff;
  padding: 4px;
  border: 1px solid #ededed;
}

.li-avatar{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.li-top{
  padding-top: 78px; /* space for avatar overlap */
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.li-left{ flex: 1; min-width: 0; }
.li-right{ width: 280px; display: flex; flex-direction: column; gap: 10px; }

.li-name{
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
}

.li-headline{
  margin: 0 0 10px;
  opacity: .85;
}

.li-meta{
  font-size: 14px;
  opacity: .75;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.li-meta a{ text-decoration: none; }
.li-meta a:hover{ text-decoration: underline; }
.dot{ opacity: .55; }

.li-connections{
  margin-top: 10px;
  font-size: 14px;
  opacity: .9;
  font-weight: 600;
}

.li-cta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #d8d8d8;
  white-space: nowrap;
}

.btn-primary{
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

.btn-ghost{
  background: #fff;
  color: #111;
}

.btn-ghost:hover{ background: #f6f6f6; }

.li-affil{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.li-affil-logo{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e9e9e9;
}

.li-affil-text{
  font-size: 14px;
  opacity: .9;
  line-height: 1.25;
}

/* Responsive */
@media (max-width: 860px){
  .li-right{ width: 100%; }
  .li-top{ flex-direction: column; }
  .li-cover{ height: 180px; }
}