:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#06b6d4;
  --glass:rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, Roboto, -apple-system, "Segoe UI", Arial;
  background-color: var(--bg);
  /* Use a full-bleed background image from the assets folder that covers the viewport without distortion */
  background-image: url("./assets/background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e6eef6;
  min-height:100vh;
}
.card{
  width:100%;
  max-width:420px;
  padding:28px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow:0 12px 40px rgba(2,6,23,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  text-align:center;
}

.glass{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  display:block;
  margin:0 auto 12px;
  object-fit:cover;
}

.avatar-wrap{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto 12px;display:block;box-shadow:0 8px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04)}
.avatar{width:100%;height:100%;display:block;object-fit:cover;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;will-change:transform}

/* Fix for backdrop-filter / border-radius artifacts in some browsers.
   Mask the wrapper as a circle and force its own compositing layer so the
   blur from parent (.glass) doesn't render as a square around the child. */
.avatar-wrap{
  position:relative;
  background:transparent;
  -webkit-mask-image: radial-gradient(circle at center, #000 100%);
  mask-image: radial-gradient(circle at center, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  isolation:isolate;
}
.name{margin:6px 0 0;font-size:20px}
.bio{color:var(--muted);font-size:14px;margin:8px 0 18px}
.links{display:flex;flex-direction:column;gap:10px;padding:0;margin:0 0 16px}
.btn{
  display:inline-flex;align-items:center;justify-content:flex-start;
  gap:12px;padding:14px 16px;border-radius:12px;text-decoration:none;color:inherit;font-weight:700;
  transition:transform .12s ease, box-shadow .18s ease, background .12s ease;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 8px 28px rgba(2,6,23,0.55), inset 0 -1px 0 rgba(255,255,255,0.02);
  padding-left:18px;
}
.btn:active{transform:translateY(1px)}
.btn .icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.02);flex:0 0 36px}
.btn .icon svg{display:block;color:rgba(255,255,255,0.95)}
.btn .label{flex:1;text-align:left}
.btn.telegram{--c:#1da1f2}
.btn.instagram{--c:#e1306c}
.btn.whatsapp{--c:#25D366}
.btn.email{--c:#8b5cf6}

.btn:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.25);
}

.btn.telegram:hover{box-shadow:0 14px 40px rgba(29,161,242,0.12), 0 0 28px rgba(29,161,242,0.06)}
.btn.instagram:hover{box-shadow:0 14px 40px rgba(225,48,108,0.12), 0 0 28px rgba(225,48,108,0.06)}
.btn.whatsapp:hover{box-shadow:0 14px 40px rgba(37,211,102,0.12), 0 0 28px rgba(37,211,102,0.06)}
.btn.email:hover{box-shadow:0 14px 40px rgba(139,92,246,0.12), 0 0 28px rgba(139,92,246,0.06)}
.footer{font-size:12px;color:var(--muted);margin-top:8px}
@media (max-width:820px){
  .card{max-width: 85vw;}
}