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

body{
background:#000;
overflow:hidden;
color:white;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

.background-animation{
position:fixed;
width:100%;
height:100%;
background:
linear-gradient(45deg,#111,#000,#181818,#000);
background-size:400% 400%;
animation:wave 8s infinite;
z-index:-1;
}

@keyframes wave{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.container{
text-align:center;
width:90%;
max-width:900px;
}

.container h1{
font-size:55px;
margin-bottom:20px;
}

.free-badge{
background:red;
padding:10px 25px;
border-radius:30px;
font-size:20px;
font-weight:bold;
}

.container h2{
margin-top:30px;
font-size:40px;
}

.container p{
margin-top:15px;
font-size:20px;
color:#d9d9d9;
}

.cards{
margin-top:50px;
display:flex;
gap:25px;
justify-content:center;
flex-wrap:wrap;
}

.card{
width:240px;
height:180px;
background:white;
color:black;
border-radius:20px;
text-decoration:none;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:22px;
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
background:red;
color:white;
}