:root{--bg1:#dbeafe;--bg2:#e0e7ff;--ac:#2563eb}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.stage{--tx:#0f172a;--mu:#64748b;--card:rgba(255,255,255,.62);--btn:rgba(255,255,255,.9);--bd:rgba(255,255,255,.8);
 min-height:100vh;padding:40px 16px;display:flex;justify-content:center;align-items:flex-start;color:var(--tx);
 background:radial-gradient(circle at 20% 0,rgba(255,255,255,.5),transparent 50%),linear-gradient(135deg,var(--bg1),var(--bg2));background-attachment:fixed}
.stage.dark{--tx:#f1f5f9;--mu:#94a3b8;--card:rgba(15,23,42,.55);--btn:rgba(30,41,59,.85);--bd:rgba(255,255,255,.09)}
.card{width:100%;max-width:440px;padding:32px 22px 24px;text-align:center;border-radius:32px;background:var(--card);border:1px solid var(--bd);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px -20px rgba(30,41,90,.35);animation:up .6s ease both}
.av{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:34px;font-weight:700;color:#fff;
 background:linear-gradient(135deg,var(--ac),#8b5cf6);border:4px solid var(--btn);box-shadow:0 8px 24px -6px rgba(0,0,0,.3)}
.av img{width:100%;height:100%;object-fit:cover}
h1{margin:0;font-size:26px;letter-spacing:-.02em}
.bio{margin:6px 0 22px;color:var(--mu);font-size:14px;line-height:1.5;white-space:pre-line}
nav{display:flex;flex-direction:column;gap:12px}
.lk{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--btn);border:1px solid var(--bd);
 color:var(--tx);text-decoration:none;font-size:15px;box-shadow:0 4px 14px -6px rgba(0,0,0,.2);opacity:0;animation:up .5s ease forwards;
 transition:transform .25s,box-shadow .25s}
.lk:hover,.lk:focus-visible{transform:translateY(-3px) scale(1.015);box-shadow:0 12px 24px -8px var(--c);outline:none}
.lk:active{transform:scale(.98)}
.ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c);transition:transform .3s}
.lk:hover .ic{transform:rotate(-8deg) scale(1.08)}
.ic svg{width:20px;height:20px}
.lk b{flex:1;font-weight:600;text-align:left;overflow-wrap:anywhere}
.lk em{font-style:normal;color:#f59e0b;font-size:14px}
.cta{margin-top:20px;width:100%;padding:15px;border:0;border-radius:999px;cursor:pointer;font:600 15px inherit;font-family:inherit;color:#fff;
 background:var(--ac);box-shadow:0 10px 24px -8px var(--ac);transition:transform .25s,filter .25s}
.cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition:none!important}}