/* Reset & variables */
:root{
  --bg: #f8fbff;
  --card-bg: #ffffff;
  --primary: #36a3ff; /* lively blue */
  --accent: #ff6fb5; /* pink */
  --muted: #6b7280;
  --glass: rgba(255,255,255,0.6);
  --radius: 16px;
  --shadow: 0 8px 25px rgba(11,15,30,0.07);
  --transition: 300ms cubic-bezier(.2,.9,.3,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background: radial-gradient(1000px 600px at 10% 10%, rgba(54,163,255,0.08), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(255,111,181,0.06), transparent),
              var(--bg);
  -webkit-font-smoothing:antialiased;
  color:#0b1220;
}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px}
.card{
  width:100%;max-width:420px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
  border-radius:calc(var(--radius) + 6px);padding:36px;position:relative;box-shadow:var(--shadow);
  overflow:visible;backdrop-filter: blur(6px);
}

.profile{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px}
.avatar-3d{width:120px;height:120px;border-radius:50%;padding:6px;background:linear-gradient(135deg,var(--card-bg),var(--glass));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(54,163,255,0.12);transform-style:preserve-3d;transition:transform var(--transition)}
.avatar-3d img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-3d::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;left:50%;top:48px;transform:translateX(-50%);filter:blur(40px);opacity:.12;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:-1}
.avatar-3d:hover img {
  transform: scale(1.05) rotate(2deg);
  transition: transform 0.5s ease;
}


h1{font-size:20px;margin:14px 0 6px;font-weight:600}
h1 .subtitle{font-weight:400;color:var(--muted);font-size:14px;margin-left:6px}
.desc{margin:0;font-size:13px;color:var(--muted);max-width:86%;line-height:1.45}

.links{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.link{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  transform:translateZ(0);
}
.link i{font-size:20px}
.link .chevron{margin-left:auto;font-size:18px;opacity:.6}
.link:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 40px rgba(3,102,214,0.12);}
.link:active{transform:translateY(-2px) scale(.995)}

/* colorful accents for each link — playful */
.link:nth-child(1){border-left:4px solid rgba(54,163,255,0.18)}
.link:nth-child(2){border-left:4px solid rgba(102,102,255,0.12)}
.link:nth-child(3){border-left:4px solid rgba(255,111,181,0.12)}
.link:nth-child(4){border-left:4px solid rgba(255,196,0,0.12)}
.link:nth-child(5){border-left:4px solid rgba(0,200,150,0.12)}
.link:nth-child(6){border-left:4px solid rgba(255,102,102,0.12)}
.link.whatsapp{border-left:4px solid rgba(37,211,102,0.18)}

/* subtle icon animation */
.link i{transition:transform var(--transition)}
.link:hover i{transform:rotate(-8deg) translateY(-2px)}

.foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}

/* background blobs */
.bg-decor{position:fixed;inset:0;pointer-events:none;z-index:-1}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.14;animation:float 8s ease-in-out infinite}
.blob-1{width:300px;height:300px;left:-80px;top:-40px;background:linear-gradient(135deg,var(--primary),var(--accent));animation-delay:0s}
.blob-2{width:220px;height:220px;right:-60px;bottom:-20px;background:linear-gradient(135deg,#ffd89b,#ff6fb5);animation-delay:2s}
.blob-3{width:160px;height:160px;left:60%;top:20%;background:linear-gradient(135deg,#a0f0d1,#9ad0ff);animation-delay:4s}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px) rotate(4deg)}100%{transform:translateY(0)}}

/* responsive */
@media (max-width:480px){
  .card{padding:20px;border-radius:14px}
  .avatar-3d{width:96px;height:96px}
  h1{font-size:18px}
}

/* small 3D tilt effect on pointer move */
.card.tilt-enabled{perspective:1100px}