:root{
  --bg:#0b1515; --ink:#0E1A1A; --card:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.18); --text:#EAF8F6; --muted:#BFEAE3;
  --primary:#00C2A8; --primary-2:#00A38E; --shadow:0 10px 30px rgba(0,0,0,0.25);
}
:root.light{ --bg:#F7FFFD; --ink:#0E1A1A; --card:rgba(255,255,255,0.7);
  --border:rgba(0,0,0,0.08); --text:#163030; --muted:#4b6b6b; --primary:#00C2A8; --primary-2:#00A38E; --shadow:0 10px 30px rgba(0,0,0,0.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1000px 600px at 10% 0%, rgba(0,194,168,0.15), transparent 60%),
  radial-gradient(800px 500px at 90% 10%, rgba(0,163,142,0.14), transparent 60%), var(--bg); overflow-x:hidden;}
#bg{position:fixed; inset:0; z-index:-1; filter: blur(60px) saturate(1.05); opacity:.65;}
.wrap{max-width:560px; margin:40px auto; padding:16px;}
.hero{display:grid; place-items:center; text-align:center; padding:28px 20px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border-radius:24px; box-shadow:var(--shadow);}
.avatar{width:108px; height:108px; border-radius:26px; border:1px solid var(--border); background:#fff; object-fit:contain; box-shadow:var(--shadow);}
h1{font-size:28px; margin:14px 0 6px 0; letter-spacing:.2px} .tag{margin:0; color:var(--muted); font-size:14px}
.social{display:flex; gap:10px; margin-top:14px}
.ic{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; border:1px solid var(--border); background:var(--card); backdrop-filter: blur(8px); transition:.2s transform background;}
.ic:hover{transform: translateY(-1px); background: rgba(255,255,255,0.18);} .ic svg{width:20px; height:20px; fill:#fff}
.ic.ig{background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); border:none}
.ic.yt{background:#fff; border:none} .ic.yt svg{fill:#e62117} .ic.wa{background:#25D366; border:none}
.links{display:grid; gap:12px; margin:18px 0}
.card{display:grid; grid-template-columns:40px 1fr 24px; gap:12px; align-items:center; padding:14px; border-radius:18px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); backdrop-filter: blur(8px); box-shadow:var(--shadow);
  text-decoration:none; color:var(--text); transition:.2s transform background, .2s border-color;}
.card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,0.3);}
.card .icon{font-size:20px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background: rgba(255,255,255,0.12); border:1px solid var(--border);}
.card small{display:block; color:var(--muted)} .card .chev{opacity:.7}
.card.primary{background: linear-gradient(180deg, rgba(0,194,168,0.25), rgba(0,163,142,0.20)); border-color: rgba(0,194,168,0.45);}
.foot{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; padding:12px; border-radius:18px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));}
.ghost{background: transparent; color: var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:12px; cursor:pointer;}
.sep{opacity:.4}
.theme{position:absolute; top:12px; right:12px; width:46px; height:34px; border-radius:16px; border:1px solid var(--border); background: var(--card); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:flex-start; padding:4px; cursor:pointer;}
.theme span{width:24px; height:24px; border-radius:12px; background:#fff; transition:.2s transform}
:root.light .theme{justify-content:flex-end}
@media (max-width:520px){ .wrap{margin:18px auto;} }
/* ... mantém o que você já tinha e acrescente/ajuste o abaixo ... */

/* Avatar com leve flutuação */
.avatar { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }

/* Ícones sociais: flutuação + pop no hover */
.social .ic{ transition: transform .25s ease, filter .25s ease; animation: wobble 5s ease-in-out infinite; }
.social .ic:hover{ transform: translateY(-2px) scale(1.06) rotate(-1deg); }
@keyframes wobble{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* Cards com entrada e brilho */
.links .card{
  position: relative; overflow: hidden;
  transform: translateY(10px); opacity: 0;
}
.links .card.reveal{ animation: slideUp .6s cubic-bezier(.2,.65,.2,1) both; animation-delay: var(--delay,0ms); }

@keyframes slideUp { to { transform: translateY(0); opacity: 1; } }

.links .card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%); transition: transform .6s ease;
}
.links .card:hover::after{ transform: translateX(120%); }

/* Ripple no clique */
.links .card .ripple{
  position:absolute; width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.45); transform: translate(-50%,-50%) scale(0);
  animation: ripple .6s ease-out; pointer-events: none;
}
@keyframes ripple { to { transform: translate(-50%,-50%) scale(18); opacity: 0; } }

/* Menos movimento para quem prefere */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}