@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Montserrat', sans-serif;
  display:flex;
  min-height:100vh;
  color:#f5f5f5;
  background:#121212;
}
aside{
  width:240px;
  background:#1e1e1e;
  display:flex;
  flex-direction:column;
  padding:30px 20px;
  position:fixed;
  top:0;bottom:0;left:0;
}
.logo{
  font-size:1.6rem;
  font-weight:700;
  color:#ff3333;
  margin-bottom:40px;
}
nav ul{list-style:none;display:flex;flex-direction:column;gap:20px;}
nav a{
  color:#f5f5f5;
  text-decoration:none;
  font-weight:500;
  transition:color .3s;
}
nav a:hover{color:#ff3333;}
main{
  margin-left:240px;
  padding:60px 40px;
  width:100%;
}
section{max-width:1100px;margin:auto;margin-bottom:60px;}
.hero{width:100%;height:auto;border-radius:0;margin-top:0;}
h2{font-weight:700;font-size:2rem;margin-bottom:20px;color:#ff3333;}
h3{font-weight:500;font-size:1.3rem;margin:30px 0 16px;}
p,li{line-height:1.6;font-size:1rem;}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.card{
  background:#1e1e1e;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.card img{width:100%;height:260px;object-fit:cover;}
.card h4{
  padding:14px;
  font-size:1.1rem;
  font-weight:500;
}
footer{
  text-align:center;
  padding:30px 0;
  background:#1e1e1e;
  color:#aaa;
  margin-top:40px;
}
@media(max-width:768px){
  aside{position:static;width:100%;flex-direction:row;align-items:center;justify-content:space-between;}
  nav ul{flex-direction:row;gap:16px;}
  main{margin:0;padding:30px 20px;}
}