*{
box-sizing:border-box;
}


body{

margin:0;

background:#070707;

color:#fff;

font-family:
Inter,
system-ui,
sans-serif;

}


nav{

display:flex;

justify-content:space-between;

padding:40px 8%;

}


nav a{

color:#aaa;

text-decoration:none;

margin-left:30px;

}



.hero{

min-height:80vh;

padding:10% 8%;

}



.hero h1{

font-size:
clamp(3rem,8vw,7rem);

line-height:.95;

letter-spacing:-4px;

}



.hero p{

font-size:1.3rem;

color:#999;

max-width:500px;

}



.button{

display:inline-block;

margin-top:30px;

padding:15px 35px;

border-radius:50px;

background:white;

color:black;

text-decoration:none;

}



section{

padding:80px 8%;

}



.grid{

display:grid;

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

gap:30px;

}



.card{

background:#111;

border-radius:20px;

overflow:hidden;

}



.card img{

width:100%;

display:block;

}



.card h3,
.card p{

padding:0 25px;

}



h2{

font-size:3rem;

}



footer{

padding:50px 8%;

color:#666;

}