:root{
  --blue:#0000AA;
  --ink:#1A1A1A;
  --muted:#77777F;
  --line:#E4E4EA;
  --bg:#EDEDEF;
  --card:#FFFFFF;
  --banner:#F6F6F8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;align-items:flex-start;
  padding:56px 16px 40px;
}
a{color:inherit;text-decoration:none}

/* ---------- card ---------- */
.card{
  width:100%;max-width:460px;
  background:var(--card);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,40,.04),0 24px 60px -28px rgba(20,20,40,.18);
}

/* ---------- banner (grafismos) ---------- */
.banner{
  position:relative;height:168px;
  background:var(--banner);
  overflow:hidden;
}
.banner img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;
}

/* ---------- profile ---------- */
.profile{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:0 32px;
}
.avatar{
  width:116px;height:116px;border-radius:50%;
  margin-top:-58px;               /* metade sobre o banner */
  border:5px solid var(--card);
  background:#ddd center/cover no-repeat;
  position:relative;z-index:1;
  box-shadow:0 6px 18px -8px rgba(20,20,40,.25);
  display:flex;align-items:center;justify-content:center;
}
.avatar.is-logo{background:var(--blue)}
.avatar.is-logo img{width:64%;height:auto;margin-top:6%;filter:brightness(0) invert(1)}
.name{
  margin-top:18px;
  font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.1;
}
.role{
  margin-top:6px;
  font-size:13px;color:var(--muted);letter-spacing:.01em;
}
.handle{
  display:inline-block;margin-top:12px;
  font-size:14px;font-weight:500;color:var(--blue);
  padding:6px 12px;border-radius:999px;
  background:rgba(0,0,170,.06);
  transition:background .2s;
}
.handle:hover{background:rgba(0,0,170,.12)}
.bio{
  margin-top:16px;max-width:320px;
  font-size:14px;line-height:1.5;color:#4A4A52;
}

/* ---------- links ---------- */
.links{
  list-style:none;
  padding:28px 28px 8px;
  display:flex;flex-direction:column;gap:10px;
}
.link{
  display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:12px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.link .num{font-size:12px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.link .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.link .title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.link .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link svg{width:18px;height:18px;color:var(--blue);transition:transform .2s}
.link:hover{border-color:var(--blue)}
.link:hover svg{transform:translateX(3px)}
.link:active{transform:scale(.99)}

.link.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.link.primary .num,.link.primary svg{color:#fff}
.link.primary .sub{color:rgba(255,255,255,.72)}
.link.primary:hover{background:#00008C}

/* ---------- footer ---------- */
.foot{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:30px 24px 30px;
}
.foot a.logo{display:block;transition:opacity .2s}
.foot a.logo:hover{opacity:.7}
.foot img{display:block;width:62px;height:auto}
.foot .tag{font-size:12px;line-height:1.3;color:var(--blue);text-align:center}
.foot .copy{margin-top:6px;font-size:11px;color:#A3A3AB}

@media (max-width:420px){
  body{padding:0;background:var(--card)}
  .card{border-radius:0;box-shadow:none;max-width:none}
  .banner{height:150px}
  .links{padding:24px 18px 8px}
}