*{margin:0;padding:0;box-sizing:border-box}
body{
background:#030814;
color:white;
font-family:Segoe UI,sans-serif;
overflow-x:hidden;
}
#bg{
position:fixed;inset:0;z-index:-1;
}
.nav{
display:flex;justify-content:space-between;
padding:30px 60px;
}
.nav nav a{
margin-left:30px;color:#ccc;text-decoration:none
}
.active{color:#66aaff}
.hero{
display:flex;align-items:center;
justify-content:center;
gap:80px;
padding:50px 8%;
min-height:70vh;
}
.avatar{
width:420px;height:420px;border-radius:50%;
object-fit:cover;
border:4px solid #4ea1ff;
box-shadow:0 0 50px #3d8cff;
}
.status{
margin-top:20px;
display:inline-block;
padding:10px 18px;
background:#09172d;
border-radius:30px;
}
.badge{
display:inline-block;
padding:10px 16px;
border:1px solid rgba(255,255,255,.15);
border-radius:30px;
margin-bottom:20px;
}
h1{
font-size:90px;
margin-bottom:20px;
}
.intro p{
font-size:24px;
color:#aaa;
line-height:1.8;
}
.socials button{
margin-top:25px;
margin-right:12px;
padding:14px 18px;
background:#09172d;
border:none;color:white;
border-radius:12px;
}
.posts{
padding:50px 60px;
}
.posts h2{margin-bottom:25px}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:20px;
backdrop-filter:blur(10px);
}
.card img{
width:100%;
border-radius:14px;
margin-bottom:15px;
}
.card p{
color:#aaa;
margin-top:10px;
}