<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:url("https://i.imgur.com/1Z4jK8F.png") center center / cover no-repeat fixed;
color:#fff;
min-height:100vh;
overflow:hidden;
}

header{
text-align:center;
padding:40px 20px;
}

.logo{
font-size:70px;
font-weight:900;
}

.section{
max-width:1200px;
margin:auto;
padding:20px;
}

.section h2{
margin-bottom:20px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
}



.card{
height:140px;
position:relative;
overflow:hidden;
border-radius:25px;
background:#111;
border:1px solid #222;
cursor:pointer;
transition:.3s;
}

.card-banner{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}

.card-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.95),
rgba(0,0,0,.1)
);
}

.card-info{
position:absolute;
left:15px;
right:15px;
bottom:15px;
display:flex;
align-items:center;
gap:12px;
z-index:2;
}

.card-avatar{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
border:none;
}

.card-name,
.card-user{
opacity:0;
transform:translateX(-20px);
transition:.35s ease;
}

.card-name{
font-size:18px;
font-weight:700;
}

.card-user{
font-size:14px;
color:#ccc;
}

.card.active .card-name,
.card.active .card-user{
opacity:1;
transform:translateX(0);
}

.card-text{
opacity:0;
transform:translateX(-20px);
transition:.35s ease;
}

.card.active .card-text{
opacity:1;
transform:translateX(0);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
-webkit-tap-highlight-color:transparent;
}

.card{
height:140px;
position:relative;
overflow:hidden;
border-radius:25px;
background:#111;
border:1px solid #222;
cursor:pointer;
transition:.3s;

outline:none;
user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}

.avatar-wrap{
position:relative;
width:60px;
height:60px;
flex-shrink:0;
}

.card-decoration{
position:absolute;
top:-8px;
left:-8px;
width:76px;
height:76px;
pointer-events:none;
}

.title{
font-family:'Cinzel',serif;
font-size:30px;
font-weight:900;
text-align:center;

background:linear-gradient(
90deg,
#ffffff 0%,
#c0c0c0 20%,
#ffffff 40%,
#8f8f8f 60%,
#ffffff 80%,
#c0c0c0 100%
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:silverMove 4s linear infinite;

letter-spacing:4px;
}

@keyframes silverMove{
0%{
background-position:0% center;
}
100%{
background-position:300% center;
}
}

.section-title{
text-align:center;
font-size:18px;
font-weight:800;

background:linear-gradient(
90deg,
#ffffff,
#c0c0c0,
#ffffff,
#8f8f8f,
#ffffff
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:silverMove 3s linear infinite;

margin-bottom:25px;
}

@media screen and (min-width:1024px){

.grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.card{
width:320px;
height:160px;
flex:none;
}

.section{
max-width:1400px;
margin:auto;
}

}

.card.active{
transform:scale(1.05);
border-color: none;
z-index:10;
}

.heartrev-logo{
display:block;
margin:auto;
width:320px;
max-width:80%;
user-select:none;
pointer-events:none;
}

.about-section{
max-width:900px;
margin:80px auto;
padding:0 20px;
}

.about-section{
max-width:900px;
margin:80px auto;
padding:35px;

background:rgba(0,0,0,.45);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

box-shadow:0 0 30px rgba(0,0,0,.35);
}

.about-title{
font-family:'Special Elite',cursive;
font-size:28px;
text-align:center;
margin-bottom:25px;
color:white;
}

.about-text{
font-family:'Special Elite',cursive;
font-size:18px;
line-height:1.8;
color:#e5e5e5;

white-space:pre-line;
word-wrap:break-word;
}

#gate{
position:fixed;
inset:0;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
cursor:pointer;
transition:.6s ease;
overflow:hidden;
}

.gate-text{
font-size:20px;
font-weight:900;
color:white;
letter-spacing:4px;
}
</style>