:root{
  --pink1:#ffd3ec;
  --pink2:#ffc2e6;
  --pink3:#ffa8db;
  --text:#c21867;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  background:linear-gradient(135deg,var(--pink1),var(--pink2),var(--pink3));
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:40px 10px;
}

.card{
  width:100%;
  max-width:520px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(22px);
  border-radius:30px;
  padding:35px 25px;
  box-shadow:0 10px 25px rgba(255,120,180,0.25);
  animation:fadeIn .7s ease-out;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

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

.name{
  text-align:center;
  margin-top:18px;
  font-size:30px;
  font-weight:700;
  color:var(--text);
}

.link{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.btn{
  text-decoration:none;
  padding:16px 22px;
  border-radius:20px;
  font-size:18px;
  font-weight:600;
  text-align:center;
  color:var(--text);
  background:white;
  box-shadow:0 4px 12px rgba(255,100,150,0.25);
  transition:.2s;
}

.btn:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(255,100,150,0.35);
}

@media(max-width:480px){
  .name{font-size:26px;}
  .btn{font-size:16px; padding:14px 16px;}
  .avatar{width:110px;height:110px;}
}