:root { --primary: #f72585; --secondary: #7209b7; --tertiary: #4cc9f0; --bg: #0a0014; --card: rgba(15,0,30,0.9); --card-border: rgba(247,37,133,0.2); --text: #e0d7f5; --text-muted: #8b7fb5; --font: 'Space Grotesk', -apple-system, sans-serif; }
body { font-family: var(--font); line-height: 1.7; color: var(--text); background: var(--bg); min-height: 100vh; margin: 0; padding: 2rem; background-image: radial-gradient(ellipse at 20% 50%, rgba(114,9,183,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(247,37,133,0.1) 0%, transparent 50%); }
.wrapper { max-width: 860px; margin: 0 auto; }
.hero { background: var(--card); backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 24px; padding: 3rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--primary), transparent, var(--secondary), transparent, var(--tertiary), transparent); animation: rotate 10s linear infinite; opacity: 0.03; }
@keyframes rotate { to { transform: rotate(360deg); } }
.cover-wrap { position: relative; margin: -3rem -3rem 0; height: 200px; overflow: hidden; border-radius: 24px 24px 0 0; }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2); }
.cover-wrap .overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(transparent, var(--card)); }
.profile-section { position: relative; z-index: 2; text-align: center; margin-top: -70px; }
.no-cover .profile-section { margin-top: 0; }
.avatar-wrap { width: 130px; height: 130px; margin: 0 auto 1.2rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--primary); box-shadow: 0 0 40px rgba(247,37,133,0.3), 0 0 80px rgba(114,9,183,0.15); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.name { font-size: 2.4rem; margin: 0 0 0.3rem; background: linear-gradient(135deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }
.bio { color: var(--text-muted); font-size: 1rem; margin: 0 0 1.5rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.social-bar { display: flex; justify-content: center; gap: 10px; margin: 1.5rem 0; flex-wrap: wrap; }
.social-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(247,37,133,0.15), rgba(114,9,183,0.15)); border: 1px solid var(--card-border); color: var(--primary); transition: all 0.3s; }
.social-link svg { width: 18px; height: 18px; }
.social-link:hover { box-shadow: 0 0 20px rgba(247,37,133,0.4); border-color: var(--primary); transform: translateY(-2px); }
.contact-bar { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 1rem 0; font-size: 0.8rem; color: var(--text-muted); }
.contact-bar span { display: flex; align-items: center; gap: 5px; }
.sections-grid { display: grid; gap: 1.5rem; }
.section-card { background: var(--card); backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 16px; padding: 2rem; }
.section-card h2 { font-size: 1.4rem; margin: 0 0 1rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-card p, .section-card .content { color: var(--text); font-size: 0.9rem; }
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.link-card { display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: linear-gradient(135deg, rgba(247,37,133,0.1), rgba(114,9,183,0.1)); border: 1px solid var(--card-border); color: var(--text); text-decoration: none; border-radius: 14px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s; }
.link-card:hover { border-color: var(--primary); box-shadow: 0 0 30px rgba(247,37,133,0.2); transform: translateY(-3px); }
.footer { text-align: center; margin-top: 2rem; padding: 2rem; color: var(--text-muted); font-size: 0.75rem; }
.footer a { background: linear-gradient(135deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; }
@media (max-width: 640px) { body { padding: 1rem; } .hero { padding: 1.5rem; } .cover-wrap { margin: -1.5rem -1.5rem 0; height: 140px; } .name { font-size: 1.8rem; } .avatar-wrap { width: 100px; height: 100px; } .profile-section { margin-top: -50px; } }