/* Theme & site styles (simplified, unified buttons) */
:root{
  --bg:#0f1724;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --text:#e6eef8;
  --muted:#9aa4b2;
  --accent:#6ee7b7;
  --accent-2:#60a5fa;
  --btn-color: rgba(96,165,250,0.12); /* unified button color */
  --btn-border: rgba(96,165,250,0.14);
  --shadow: 0 20px 50px rgba(2,6,23,0.6);

  --blob-x: 0px;
  --blob-y: 0px;
  --blob-x2: 0px;
  --blob-y2: 0px;
}
[data-theme="light"]{
  --bg:#f6f8fb;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95));
  --text:#0f1724;
  --muted:#6b7280;
  --accent:#0ea5a3;
  --accent-2:#2563eb;
  --btn-color: rgba(96,165,250,0.10);
  --btn-border: rgba(96,165,250,0.12);
  --shadow: 0 14px 40px rgba(15,23,36,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background .32s ease, color .32s ease;
}

.page{width:100%;max-width:980px;margin:24px auto}
.card{
  background:var(--card-bg);
  border-radius:18px;
  padding:36px 42px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.03);
  position:relative;
  overflow:visible;
}

/* animated background blobs */
.page::before,
.page::after{ content:""; position:fixed; z-index:-2; filter:blur(70px); opacity:.12; pointer-events:none }
.page::before{ width:640px;height:420px;left:4%;top:6%; background: radial-gradient(circle at 20% 20%, rgba(96,165,250,0.6), transparent 30%); transform: translate(var(--blob-x), var(--blob-y)); transition: transform .08s linear }
.page::after{ width:580px;height:380px;right:6%;bottom:8%; background: radial-gradient(circle at 80% 80%, rgba(110,231,183,0.5), transparent 30%); transform: translate(var(--blob-x2), var(--blob-y2)); transition: transform .08s linear }

.avatar{ width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:2px solid rgba(255,255,255,0.06); position:relative; }
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.avatar::after{ content:""; position:absolute; inset:-10px; border-radius:50%; background: conic-gradient(from 0deg, rgba(96,165,250,0.12), rgba(110,231,183,0.10)); filter:blur(10px); animation: ring 6s linear infinite; z-index:-1 }
@keyframes ring{ to{ transform: rotate(1turn) } }

.name{margin:16px 0 0;font-weight:800;font-size:clamp(20px,2.8vw,28px);text-align:center}
.role{margin:6px 0 0;color:var(--muted);font-weight:600;text-align:center}
.bio{max-width:760px;margin:12px auto 18px;color:var(--muted);text-align:center}

/* theme toggle */
.theme-toggle{ position:absolute; right:22px; top:22px; width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:var(--text); cursor:pointer; }
.theme-toggle:active{ transform:scale(.98) }

/* unified contacts */
.contacts{ display:flex; flex-direction:column; gap:18px; align-items:center; width:100%; padding:6px 8px; margin-top:12px }
.btn{ position:relative; display:block; width:100%; max-width:720px; margin:0 auto; padding:16px 20px; border-radius:14px; background:var(--btn-color); border:1px solid var(--btn-border); color:var(--text); text-decoration:none; box-shadow: 0 14px 36px rgba(2,6,23,0.45); transition: transform .18s, box-shadow .18s }
.btn:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 26px 56px rgba(2,6,23,0.55) }
.btn:focus{ outline:4px solid rgba(96,165,250,0.12); transform: translateY(-4px) }

.btn-text{ display:block; text-align:center; font-weight:800; font-size:18px; line-height:1 }

.foot{ margin-top:18px; text-align:center }
.chip{ display:inline-block; background: rgba(255,255,255,0.03); padding:8px 12px; border-radius:999px; margin:0 6px; font-weight:700; color:var(--muted); cursor:pointer }
.chip.lang.active{ background: rgba(96,165,250,0.14); color:var(--accent-2) }
.small{ color:var(--muted); font-size:13px; margin-top:8px }

/* responsive */
@media (max-width:720px){ .avatar{width:140px;height:140px} .btn{padding:14px} .btn-text{font-size:15px} }