*{box-sizing:border-box}
body{font-family:Arial,sans-serif;margin:0;color:#111;background:#fff}
.hero{height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#000;color:#fff}
.hero h1{font-size:60px;margin:10px}
.hero a,a{padding:15px 30px;background:#111;color:#fff;text-decoration:none}
section{padding:60px 10%;text-align:center}
.grid,.products{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.card{padding:20px;border:1px solid #ddd}
.card img,.product img{width:100%}
.product{max-width:800px;margin:auto;padding:30px}
footer{text-align:center;padding:30px}
@media(max-width:700px){.grid,.products{grid-template-columns:1fr}.hero h1{font-size:36px}}