@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex; justify-content: center;
  background: #0e0e1a;
}

.bg-wrap {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(140deg, #0f0c29 0%, #1a0a2e 30%, #24243e 100%);
}
.bg-wrap .orb {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5;
  animation: float 12s ease-in-out infinite alternate;
}
.bg-wrap .orb:nth-child(1) { width:400px;height:400px;top:-100px;left:-80px;background:radial-gradient(circle,#7c3aed,#a855f7);animation-duration:14s; }
.bg-wrap .orb:nth-child(2) { width:350px;height:350px;top:30%;right:-100px;background:radial-gradient(circle,#ec4899,#f43f5e);animation-duration:10s;animation-delay:-3s; }
.bg-wrap .orb:nth-child(3) { width:300px;height:300px;bottom:-60px;left:30%;background:radial-gradient(circle,#06b6d4,#3b82f6);animation-duration:16s;animation-delay:-7s; }
.bg-wrap .orb:nth-child(4) { width:200px;height:200px;top:50%;left:10%;background:radial-gradient(circle,#f59e0b,#ef4444);animation-duration:11s;animation-delay:-5s; }

@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-40px) scale(1.05); }
  66%  { transform: translate(-20px,20px) scale(0.95); }
  100% { transform: translate(15px,-15px) scale(1.02); }
}

.container {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  min-height: 100vh;
  padding: 48px 20px 40px;
  display: flex; flex-direction: column; align-items: center;
}

@property --led {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.avatar-ring {
  position: relative;
  width: 150px; height: 150px;
  border-radius: 50%; padding: 4px;
  margin-bottom: 16px;
  isolation: isolate;
}
.avatar-ring::before,
.avatar-ring::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--led), #ff0040, #ff8a00, #ffe600, #00ff6a, #00e5ff, #2f6bff, #b400ff, #ff0040);
  animation: led-spin 2.4s linear infinite;
  z-index: -1;
}
.avatar-ring::after {
  inset: -6px;
  filter: blur(14px);
  opacity: 0.85;
  z-index: -2;
}
@keyframes led-spin {
  to { --led: 360deg; }
}
.avatar-ring img {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #0e0e1a;
  display: block;
}

.profile-name   { font-size:24px;font-weight:800;color:#fff;letter-spacing:-0.5px;margin-bottom:4px; }
.profile-handle { font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:8px; }
.profile-bio    { font-size:14px;color:rgba(255,255,255,0.7);text-align:center;max-width:320px;line-height:1.6;margin-bottom:24px; }

.social-row { display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:32px; }

.social-icon {
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;overflow:hidden;
  background:#000;border:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  transition:transform 0.25s,box-shadow 0.25s;
  position:relative;
}
.social-icon:hover { transform:translateY(-4px) scale(1.12);box-shadow:0 12px 32px rgba(0,0,0,0.5); }
.social-icon img  { width:100%;height:100%;object-fit:cover;display:block; }
.social-icon svg  { position:relative;z-index:1;width:22px;height:22px; }
.social-icon.tg   { background:#26a5e4; }
.social-icon.tt   { background:#1a1a1a; }

.social-icon .tooltip {
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.85);color:#fff;
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity 0.2s,bottom 0.2s;
}
.social-icon:hover .tooltip { opacity:1;bottom:-34px; }

.links-list { width:100%;display:flex;flex-direction:column;gap:12px;margin-bottom:32px; }

.link-card {
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 20px;border-radius:16px;
  text-decoration:none;color:#fff;
  position:relative;overflow:hidden;
  transition:transform 0.25s,box-shadow 0.25s;
}
.link-card::before {
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
}
.link-card:hover { transform:translateY(-2px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.link-card:hover::before { background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2); }

.link-icon {
  position:relative;z-index:1;
  width:54px;height:54px;flex-shrink:0;
  border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.link-icon img   { width:100%;height:100%;object-fit:cover;display:block; }
.link-icon.tg-bg { background:#26a5e4; }
.link-icon svg   { width:28px;height:28px; }

.zoom { transform:scale(1.5); }

.link-text   { position:relative;z-index:1;flex:1; }
.link-title  { font-size:15px;font-weight:700;margin-bottom:2px; }
.link-desc   { font-size:12px;color:rgba(255,255,255,0.5); }
.link-arrow  { position:relative;z-index:1;color:rgba(255,255,255,0.3);transition:color 0.2s,transform 0.2s; }
.link-card:hover .link-arrow { color:rgba(255,255,255,0.7);transform:translateX(3px); }

.page-footer { margin-top:auto;padding-top:24px;text-align:center; }
.page-footer .brand {
  font-size:13px;font-weight:600;color:rgba(255,255,255,0.25);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:color 0.2s;
}
.page-footer .brand:hover { color:rgba(255,255,255,0.45); }

.container > * { animation:fadeUp 0.6s ease-out both; }
.container > *:nth-child(1){animation-delay:0.05s}
.container > *:nth-child(2){animation-delay:0.1s}
.container > *:nth-child(3){animation-delay:0.15s}
.container > *:nth-child(4){animation-delay:0.2s}
.container > *:nth-child(5){animation-delay:0.25s}
.container > *:nth-child(6){animation-delay:0.3s}
.container > *:nth-child(7){animation-delay:0.35s}

@keyframes fadeUp {
  from { opacity:0;transform:translateY(20px); }
  to   { opacity:1;transform:translateY(0); }
}