:root{
  --bg:#fae6e7;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0a66c2;
  --border:#e6eef8;
  --shadow: 0 6px 18px rgba(12,22,39,0.08);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body{
  background: linear-gradient(180deg,#fff0f6,#fde8ef);
  margin:0; padding:40px; -webkit-font-smoothing:antialiased;
}

.profile-card{
  max-width:1000px;
  margin:0 auto;
  background:var(--card);
  border-radius:10px;
  display:flex;
  gap:28px;
  padding:28px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.left{
  width:280px;
  padding-right:10px;
  border-right:1px solid #f0f4f8;
}

.avatar{
  width:120px; height:120px; object-fit:cover;
  border-radius:50%; display:block; margin-bottom:12px; border:4px solid #fff; box-shadow:0 4px 12px rgba(10,102,194,0.12);
}

.name{ margin:0; font-size:20px; }
.headline{ color:var(--muted); margin:6px 0 2px; font-size:14px; }
.location{ color:var(--muted); font-size:13px; }

.section{ margin-top:18px; }
.section h3{ margin:0 0 8px; font-size:14px; color:#111827; }

.skills{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.skills li{ background:#eef6ff; color:var(--accent); padding:6px 10px; border-radius:999px; font-size:13px; }

.right{
  flex:1;
  padding-left:18px;
}

.about p{ margin:6px 0 0; color:#111827; }
.item{ margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed #f1f5f9; }
.title{ margin:0; font-size:15px; color:#0b1220; }
.company{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.desc{ margin:8px 0 0; color:#374151; font-size:14px; }

@media (max-width:800px){
  .profile-card{ flex-direction:column; padding:18px; }
  .left{ width:auto; border-right:none; display:flex; gap:12px; align-items:center; }
  .avatar{ width:84px; height:84px; }
  .right{ padding-left:0; }
}