/* Updated CSS with max-width 350px for card */
:root{
  --bg:#0f0219;
  --bg-grad:linear-gradient(180deg,#3a0a53 0%, #140423 70%);
  --text:#ffffff;
  --muted:#c5b8d3;
  --card-bg:#ffffff;
  --ink:#878787;
  --accent:#7f57cf;
  --accent-2:#f59f00;
  --ring: rgba(127,87,207,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background: var(--bg);
  color: var(--text);
}

.hero{
  padding: 56px 20px 28px;
  background: var(--bg-grad);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.avatar-wrap{
  width:120px;height:120px;border-radius:50%;
  margin:0 auto 16px auto; padding:6px;
  background:rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

h1{font-size:28px; line-height:1.15; margin:0 0 6px; font-weight:700}
.title{margin:0; opacity:.8}

.cta-row{
  margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:6px; text-decoration:none;
  color:#fff; background:#666; box-shadow:var(--shadow); font-weight:600;
  border:2px solid transparent;
}
.btn.outline{background:transparent;border-color:#ABABAB}
.btn i{margin-right:6px}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:3px solid var(--ring); outline-offset:2px}

.card{
  background:var(--card-bg); color:var(--ink);
  border-radius:18px 18px 0 0; margin-top:-12px; padding:16px 16px 24px;
  max-width:350px; margin-left:auto; margin-right:auto;
}

.info{display:grid; gap:2px; margin:6px 0 10px}
.row{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid #eee; border-radius:12px}
.icon{font-size:20px; width:28px; text-align:center; margin-top:2px}
.icon i{color:#878787}
.col{display:flex; flex-direction:column; gap:4px}
.label{font-size:12px; color:#666}
.value{font-size:16px; color:#666; text-decoration:none}
.value:hover{text-decoration:underline}
.strong{font-weight:600}

.social{margin-top:6px}
.social h2{font-size:16px; color:#878787; margin:6px 4px 10px}
.social-row{display:flex; gap:12px; flex-wrap:wrap}
.social-btn{
  border:1px solid #eee; border-radius:999px; padding:10px 14px; text-decoration:none; color:#666; display:flex; align-items:center
}
.social-btn i{margin-right:6px; color:#e4405f}

.fab{
  position:fixed; right:180px; bottom:18px; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:none; color:#ff8a00; font-size:24px; font-weight:700; 
}

.foot{color:#a597bf; text-align:center; padding:24px; font-size:12px; opacity:.9}

/* Larger screens */
@media (min-width:720px){
  .hero{padding-top:80px; padding-bottom:40px}
  h1{font-size:36px}
  .title{font-size:18px}
}