*{box-sizing:border-box}body{margin:0;background:#0e101a;color:#e9eef7;font-family:Inter,system-ui,sans-serif}
.hero{position:relative;height:46vh;overflow:hidden;perspective:1000px}
.layer{position:absolute;inset:-10% -10% auto -10%;height:80%;filter:blur(60px);opacity:.6;transform:translateZ(-200px) scale(1.1)}
.l1{background:radial-gradient(600px 300px at 10% 30%,#6c5ce7,transparent)}
.l2{background:radial-gradient(700px 360px at 80% 10%,#ff6ec7,transparent)}
.hero .content{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;transform:translateZ(60px)}
.avatar{width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.wrap{max-width:1000px;margin:0 auto;padding:20px;display:grid;gap:12px}
.card{background:#151a2b;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;animation:float 6s ease-in-out infinite}
.gridp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gridp img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.08);padding:8px 10px;border-radius:999px}
.chips img{width:22px;height:22px;border-radius:999px}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@media(max-width:900px){.gridp{grid-template-columns:repeat(2,1fr)}}