*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#0b0b0b;color:#fff}

.hero{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
}
.hero h1{font-size:64px;letter-spacing:4px}
.hero p{color:#aaa;margin:15px 0}
.hero button{
  padding:12px 30px;
  border:1px solid #777;
  background:none;
  color:#fff;
}

section{padding:50px 8%}
h2{margin-bottom:25px}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.card{
  background:#111;
  padding:20px;
  border:1px solid #222;
  text-align:center;
}
.card button{
  margin-top:10px;
  padding:8px 20px;
  background:none;
  border:1px solid #555;
  color:#fff;
}

.cart input{
  display:block;
  margin:12px 0;
  padding:12px;
  width:300px;
  max-width:100%;
  background:#111;
  border:1px solid #333;
  color:#fff;
}

.cart button{
  padding:12px 30px;
  border:1px solid #777;
  background:none;
  color:#fff;
}

/* 📱 Mobile */
@media(max-width:768px){
  .hero h1{font-size:38px}
  .grid{grid-template-columns:1fr}
  section{padding:40px 6%}
}