*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:system-ui,sans-serif;
}

body{
    background:#090013;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
}

/* Background Video */
#bg-video{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

/* Dark Overlay */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:-1;
}

/* Main Card */
.card{
    width:420px;
    max-width:90%;
    margin:60px auto;
    padding:30px;
    text-align:center;
    border-radius:25px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 0 35px rgba(138,43,226,.5);
}

/* Avatar */
.avatar{
    width:110px;
    height:110px;
    margin:0 auto 20px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid #9d4edd;
    box-shadow:0 0 25px #8b5cf6;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Title */
h1{
    margin-bottom:10px;
    font-size:32px;
}

p{
    opacity:.85;
    margin-bottom:20px;
}

/* Buttons */
.grid a{
    display:block;
    margin:12px 0;
    padding:15px;
    text-decoration:none;
    color:#fff;
    border-radius:15px;
    background:rgba(139,92,246,.25);
    border:1px solid rgba(119, 9, 9, 0.12);
    transition:.3s;
    font-weight:600;
}

.grid a:hover{
    transform:translateY(-3px);
    background:#7c3aed;
    box-shadow:0 0 20px #8b5cf6;
}

button{
    margin-top:20px;
    width:100%;
    padding:14px;
    border:none;
    border-radius:15px;
    background:#8b5cf6;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    background:#7c3aed;
}

#views{
    margin-top:15px;
    opacity:.8;
}

.note{
    margin-top:15px;
    font-size:13px;
    opacity:.6;
}

@media(max-width:500px){
    .card{
        width:92%;
        padding:25px;
    }

    h1{
        font-size:26px;
    }
}