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

*{
  body{background:#faf7f2;color:#111}
  header{display:flex;justify-content:space-between;align-items:center;padding:20px 6%;background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.05)}
  .logo{font-weight:700;font-size:26px;letter-spacing:2px}
  .logo span{color:#ff6b00}
  nav a{margin-left:25px;text-decoration:none;color:#111;font-weight:500}
  .btn{background:#111;color:#fff;padding:12px 28px;border:none;border-radius:30px;cursor:pointer;transition:.3s}
  .btn:hover{background:#ff6b00}
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:60px 6%;gap:40px}
  .hero h1{font-size:60px;line-height:1.1}
  .hero h1 span{color:#ff6b00}
  .hero p{margin:20px 0;color:#666;font-size:18px}
  .hero-img img{width:100%;border-radius:30px}
  .section{padding:60px 6%}
  .section h2{font-size:32px;margin-bottom:30px}
  .products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:25px}
  .card{background:#fff;border-radius:20px;padding:15px;transition:.3s;box-shadow:0 5px 15px rgba(0,0,0,.04)}
  .card:hover{transform:translateY(-8px)}
  .card img{width:100%;height:220px;object-fit:cover;border-radius:15px}
  .card h3{margin:12px 0 5px;font-size:18px}
  .price{font-weight:700;color:#ff6b00}
  .card button{width:100%;margin-top:12px;background:#111;color:#fff;border:none;padding:10px;border-radius:20px;cursor:pointer}
  .banner{background:#111;color:#fff;border-radius:30px;padding:40px;text-align:center;margin:60px 6%}
  .banner h2{font-size:36px}
  footer{background:#fff;padding:40px 6%;text-align:center;margin-top:40px;color:#888}
  @media(max-width:800px){.hero{grid-template-columns:1fr}.hero h1{font-size:42px}}
  @media (min-width:425px){
    .hero{
        display: block;
        width: 60%;
        margin: 0 auto;
    }
    .card{
        margin-bottom: 10px;
        margin-top: 10px;
    }
}
}