* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: #f4f2f7;
  color: #1a1a1a;
}

.bio-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  z-index: -1;
  animation: blob-drift 16s ease-in-out infinite;
  pointer-events: none;
}
.blob-a { width: 320px; height: 320px; top: -80px; left: -60px; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%); animation-delay: 0s; }
.blob-b { width: 380px; height: 380px; bottom: -120px; right: -80px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); animation-delay: -5s; }
.blob-c { width: 260px; height: 260px; bottom: 30%; left: -100px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); animation-delay: -10s; }
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.08); }
  66% { transform: translate(-18px, 16px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none; }
}
.bio-card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  padding: 40px 28px 34px;
  border-radius: 32px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
  animation: card-in .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.avatar-ring {
  width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 18px;
  padding: 3px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  border: 2px solid rgba(0,0,0,.6);
  display: block;
}
.bio-name { font-size: 1.55rem; font-weight: 800; margin: 4px 0; letter-spacing: -.02em; }
.bio-bio { font-size: 0.95rem; opacity: 0.85; white-space: pre-line; margin-bottom: 22px; line-height: 1.55; }
.socials { display: flex; justify-content: center; gap: 16px; margin: 16px 0; flex-wrap: wrap; }
.social-float {
  width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  animation: social-float-bob 3s ease-in-out infinite;
}
.social-float svg { width: 22px; height: 22px; }
.social-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.3); background: rgba(255,255,255,.14); }
.social-float:nth-child(2) { animation-delay: .4s; }
@keyframes social-float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-float { animation: none; }
}

.link-item {
  display: block;
  padding: 15px 18px;
  margin: 12px 0;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: .98rem;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
  overflow: hidden;
  position: relative;
}
.link-item:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.05); }
.link-item:active { transform: translateY(-1px) scale(.99); }
.link-item img { width: 100%; border-radius: 10px; display: block; margin-bottom: 8px; }

/* Button styles */
.link-item.style-outline { border: 2px solid var(--btn-color); background: transparent; color: var(--btn-color); }
.link-item.style-outline:hover { background: color-mix(in srgb, var(--btn-color) 12%, transparent); }
.link-item.style-solid { background: var(--btn-color); color: var(--btn-text-color, #fff); border: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-color) 45%, transparent); }
.link-item.style-glass {
  background: color-mix(in srgb, var(--btn-color) 25%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--btn-color) 40%, transparent);
  color: var(--btn-text-color, #fff);
}

/* Corner roundness */
.link-item.radius-square { border-radius: 4px; }
.link-item.radius-slight { border-radius: 10px; }
.link-item.radius-rounded { border-radius: 18px; }
.link-item.radius-pill { border-radius: 999px; }

/* Button shadow */
.link-item.shadow-none { box-shadow: none; }
.link-item.shadow-soft { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.link-item.shadow-strong { box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.link-item.shadow-hard { box-shadow: 4px 4px 0 rgba(0,0,0,.85); }

/* Header layouts */
.header-layout-hero .avatar-ring { width: 140px; height: 140px; }
.header-layout-hero .bio-name { font-size: 1.7rem; }
.header-layout-banner { position: relative; padding-top: 40px; }
.header-layout-banner .avatar-ring { box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.5); }
.header-layout-cutout .avatar-ring { border-radius: 20px; width: 124px; height: 124px; }
.header-layout-cutout .avatar { border-radius: 16px; }

@media (max-width: 600px) {
  .bio-page { padding: 32px 12px; align-items: center; }
  .bio-card { max-width: 100%; padding: 28px 18px 26px; border-radius: 22px; }
  .avatar-ring { width: 92px; height: 92px; }
  .header-layout-hero .avatar-ring { width: 112px; height: 112px; }
  .bg-blob { filter: blur(40px); }
  .bio-name { font-size: 1.25rem; }
  .social-float { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .bio-name { font-size: 1.1rem; }
  .link-item { padding: 12px 14px; font-size: 0.92rem; }
  .social-float { width: 40px; height: 40px; border-radius: 13px; }
  .social-float svg { width: 20px; height: 20px; }
}