*{

box-sizing:border-box;

}


body{

margin:0;

font-family:
Arial,
"Microsoft YaHei",
sans-serif;

color:#222;

}



.container{

max-width:1000px;

margin:auto;

padding:40px 20px;

}



header{

background:
linear-gradient(
135deg,
#0066ff,
#00c6ff
);

color:white;

text-align:center;

padding:80px 0;

}



h1{

font-size:50px;

}



.button{

display:inline-block;

margin:10px;

padding:12px 25px;

background:white;

color:#0066ff;

border-radius:8px;

text-decoration:none;

font-weight:bold;

}



section{

background:white;

}



.dark{

background:#111;

color:white;

}



.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}



.card{

background:#222;

padding:25px;

border-radius:10px;

}



footer{

background:#000;

color:white;

text-align:center;

padding:20px;

}