body { margin: 0; font-family: 'Poppins', sans-serif; overflow-x: hidden; background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80); background-size: 600% 600%; animation: gradientShift 20s ease infinite; color: white; transition: all 0.5s ease; }
@keyframes gradientShift { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }
body.light { background: linear-gradient(120deg, #ffffff, #e0e0e0); color: #111; }
.main-card { max-width: 500px; margin: 120px auto 30px; padding: 30px 20px; backdrop-filter: blur(14px); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 25px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); text-align: center; opacity: 0; transform: translateY(50px); transition: all 1s ease; }
.main-card.show-card { opacity: 1; transform: translateY(0); }
.main-card.light { background: rgba(255,255,255,0.9); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
.profile-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; transition: all 0.3s; }
h1 { margin: 10px 0; font-size: 32px; }
p.bio { font-size: 14px; opacity: 0.8; margin-bottom: 20px; }
.link-card { margin: 12px 0; padding: 15px; border-radius: 20px; background: linear-gradient(135deg, #00f260, #0575e6); color: white; font-weight: bold; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: all 0.3s; }
.link-card:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.social-icons a { margin: 0 8px; font-size: 24px; text-decoration: none; color: inherit; transition: transform 0.2s; }
.social-icons a:hover { transform: scale(1.3); }
.top-buttons { position: fixed; top: 20px; right: 20px; display: flex; gap: 12px; z-index: 999; }
.top-buttons button { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(5px); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; color: inherit; transition: all 0.3s; }
.top-buttons button:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
.dropdown { position: absolute; top: 65px; right: 20px; background: rgba(0,0,0,0.8); border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); padding: 8px 0; display: none; flex-direction: column; z-index: 1000; }
.dropdown a { padding: 10px 20px; color: white; text-decoration: none; }
.dropdown a:hover { background: rgba(255,255,255,0.1); }
body.light .dropdown { background: rgba(255,255,255,0.95); color: #000; }
body.light .dropdown a { color: #111; }
.fab-whatsapp { position: fixed; bottom: 25px; left: 20px; background-color: #25D366; color: white; border-radius: 50%; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); z-index: 999; transition: transform 0.3s; }
.fab-whatsapp:hover { transform: scale(1.1); }
@media(max-width: 768px) { .main-card { margin: 80px 10px; padding: 20px 10px; } h1 { font-size: 26px; } .profile-img { width: 100px; height: 100px; } .link-card { font-size: 14px; } }
@media(max-width: 480px) { .top-buttons { top: 10px; right: 10px; } .fab-whatsapp { bottom: 15px; left: 10px; width: 45px; height: 45px; font-size: 20px; } }