:root{
  --bg:#071026;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7c5cff;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-image: url("../assets/bg_v4.jpg");
  background-color: #071025; /* fallback */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.card{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg,rgba(var(--card),0.2), rgba(11,18,32,0.9));
  border-radius:var(--radius);
  padding:32px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  text-align:center;
  border:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  display:block;
  margin:0 auto 16px;
  object-fit:cover;
  border:3px solid rgba(255,255,255,0.06);
}

.name{
  margin:0 0 4px;
  font-size:1.25rem;
  letter-spacing:0.2px;
}

.subtitle{
  margin:0 0 18px;
  color:#ffffff;
  font-size:0.95rem;
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:8px 0 20px;
}

.link-item{
  width:100%;
  display:flex;
  flex-direction:column;
  /* allow children to stretch so buttons can take full available width */
  align-items:stretch;
}

.link-desc{
  margin:0 0 6px;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.1;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  /* make buttons fill most of the card width while respecting card padding */
  width:100%;
  max-width:420px; /* matches card max-width */
  box-sizing: border-box;
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  color:#0b1220; /* black text */
  background: #ffffff; /* white button */
  border: 1px solid rgba(11,18,32,0.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 3px 10px rgba(2,6,23,0.06);
  margin: 0 auto; /* center when constrained by max-width */
}

.btn:active{transform:translateY(1px)}
.btn:hover{transform:translateY(-3px)}

.linkedin{ background: #ffffff; color: #0b1220; border-color: rgba(11,18,32,0.06); }
.facebook{ background: #ffffff; color: #0b1220; border-color: rgba(11,18,32,0.06); }
.youtube{ background: #ffffff; color: #0b1220; border-color: rgba(11,18,32,0.06); }

/* ORCID button: light background with dark text */
.btn.orcid{
  background: #ffffff;
  color: #0b1220;
  border-color: rgba(11,18,32,0.06);
}

.icon{
  height:24px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}

.foot{
  margin-top:8px;
  font-size:0.82rem;
  color:var(--muted);
}

@media (max-width:420px){
  .card{ padding:22px }
  .btn{ padding:10px 14px; font-size:0.98rem }
}