:root{
    --page-bg:#0b0b11;
    --text:#ffffff;
    --muted:#c7c7d1;
    --card-bg:#ffffff;
    --card-text:#111111;
    --card-border:rgba(255,255,255,.18);
    --card-radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
    color:var(--text);
    background:var(--page-bg);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.42));
    z-index:0;
}
.bio-wrap{
    position:relative;
    z-index:1;
    width:min(100%,680px);
    margin:0 auto;
    padding:48px 18px 32px;
}
.profile{text-align:center;margin-bottom:28px}
.profile-logo{
    width:112px;height:112px;border-radius:50%;
    object-fit:cover;border:3px solid rgba(255,255,255,.65);
    box-shadow:0 16px 44px rgba(0,0,0,.28);
    background:#fff;
}
.profile h1{margin:16px 0 8px;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.1}
.profile p{margin:0 auto;color:var(--muted);max-width:560px;line-height:1.55}
.links{display:grid;gap:14px}
.link-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:66px;
    padding:14px 18px;
    border-radius:var(--card-radius);
    text-decoration:none;
    background:var(--card-bg);
    color:var(--card-text);
    border:1px solid var(--card-border);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.link-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.22);filter:brightness(1.02)}
.link-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:13px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:rgba(127,127,127,.10);
}
.link-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.link-icon-fallback{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:1.25rem;
}
.link-copy{flex:1;min-width:0}
.link-copy strong{display:block;font-size:1rem;line-height:1.25}
.link-copy span{display:block;font-size:.83rem;opacity:.72;margin-top:3px}
.link-arrow{font-size:1.2rem;opacity:.55}
.footer{text-align:center;margin-top:28px;font-size:.8rem;color:var(--muted);opacity:.85}
@media (max-width:540px){
    .bio-wrap{padding-top:30px}
    .profile-logo{width:96px;height:96px}
    .link-card{min-height:62px}
}