*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f5f5f5}
.container{max-width:1400px;margin:auto}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#ededed}
header h1{font-family:Georgia,serif}

.hero{
display:grid;
grid-template-columns:1.1fr 1fr;
align-items:center;
gap:40px;
padding:40px;
min-height:70vh;
}
.hero-content h2{font-size:clamp(2rem,5vw,4.5rem);margin:15px 0}
.hero-content p{color:#666;max-width:500px}
.badge{background:#fff;padding:10px 16px;border-radius:30px}
.buttons{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.primary,.secondary{padding:14px 22px;border-radius:30px}
.primary{background:#111;color:#fff;border:none}
.secondary{background:#fff;border:1px solid #aaa}
.hero-image{
height:500px;
border-radius:24px;
background:linear-gradient(180deg,#f4d6ca,#ffffff);
}

.categories,.products{padding:20px 40px}
.grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin-top:15px;
}
.grid button,.product{
background:white;border:1px solid #ddd;border-radius:12px;padding:12px;
}
.product{display:flex;gap:15px;align-items:center}
.thumb{width:100px;height:100px;background:#efefef;border-radius:10px}
.price{color:red;font-weight:bold}

@media (max-width:900px){
.hero{
grid-template-columns:1fr;
text-align:center;
}
.hero-image{
height:350px;
order:-1;
}
.buttons{justify-content:center}
.grid{
grid-template-columns:repeat(3,1fr);
}
}

@media (max-width:600px){
header{padding:16px}
.hero{padding:20px}
.categories,.products{padding:20px}
.grid{grid-template-columns:repeat(2,1fr)}
.hero-content h2{font-size:2rem}
}