*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
-apple-system,
BlinkMacSystemFont,
"PingFang SC",
"Microsoft YaHei",
sans-serif;

color:#1d1d1f;

background:#fff;

}


.nav{

display:flex;

justify-content:space-between;

padding:20px 10%;

}


.nav a{

margin-left:25px;

text-decoration:none;

color:#333;

}



.hero{

text-align:center;

padding:100px 20px;

}


.hero h1{

font-size:60px;

}


.hero p{

font-size:22px;

color:#6e6e73;

}



.products{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

padding:60px 10%;

}



.card{

width:380px;

background:#f5f5f7;

border-radius:30px;

padding:50px;

text-align:center;

}



.box{

height:180px;

background:#111;

border-radius:25px;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

font-weight:bold;

}



.card h2{

font-size:32px;

}



.price{

font-size:30px;

margin:20px;

}



.btn{

display:inline-block;

padding:12px 30px;

background:#111;

color:white;

border-radius:30px;

text-decoration:none;

}



.section{

padding:80px 10%;

text-align:center;

}



.features{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.feature{

width:250px;

background:#f5f5f7;

padding:30px;

border-radius:25px;

}



.footer{

text-align:center;

padding:50px;

color:#888;

}