.hero-card{

position:relative;

width:100%;

height:100%;

overflow:hidden;

border-radius:14px;

}



.hero-card img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}



.hero-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:50px;

background:linear-gradient(

transparent,

rgba(0,0,0,.92)

);

}



.hero-overlay h1{

font-size:42px;

margin-bottom:12px;

}



.hero-overlay p{

max-width:700px;

line-height:1.6;

color:#d0d0d0;

margin-bottom:20px;

}



.hero-overlay button{

padding:12px 24px;

background:#3cff83;

border:none;

border-radius:8px;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}



.hero-overlay button:hover{

transform:scale(1.05);

}



#new-release,

#continue-watching,

#all-time-popular,

#trending{

display:grid;

grid-template-columns:

repeat(auto-fill,minmax(180px,1fr));

gap:22px;

}



.anime-card{

background:#171717;

border-radius:12px;

overflow:hidden;

transition:.3s;

cursor:pointer;

}



.anime-card:hover{

transform:translateY(-6px);

box-shadow:

0 10px 25px

rgba(60,255,131,.25);

}



.anime-card img{

width:100%;

aspect-ratio:2/3;

object-fit:cover;

display:block;

}



.anime-card h3{

font-size:18px;

padding:12px 12px 6px;

}



.anime-card p{

padding:0 12px;

color:#9e9e9e;

font-size:14px;

}



.status{

margin:12px;

padding:6px 10px;

display:inline-block;

background:#3cff83;

color:#000;

border-radius:6px;

font-size:12px;

font-weight:bold;

}



@media(max-width:768px){

.hero-overlay{

padding:20px;

}



.hero-overlay h1{

font-size:28px;

}



.hero-overlay p{

font-size:14px;

}



#new-release,

#continue-watching,

#all-time-popular,

#trending{

grid-template-columns:

repeat(2,1fr);

gap:15px;

}

}