body {font-family: 'Segoe UI', sans-serif; margin:0; background:#f4f6f8;}
.container {max-width:1200px; margin:auto; padding:20px;}
.header {background:#0d0d0d; color:#fff; position:sticky; top:0;}
.nav {display:flex; justify-content:space-between; align-items:center;}
.nav a {color:#fff; margin-left:15px; text-decoration:none;}
.logo {font-size:22px; font-weight:bold;}

.hero {background:url('https://images.unsplash.com/photo-1586201375761-83865001e31c') center/cover no-repeat; color:white; padding:120px 20px;}
.hero h1 {font-size:48px;}
.btn {background:#ff7a18; padding:14px 22px; color:#fff; border-radius:8px; text-decoration:none;}

.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px;}
.card {background:white; padding:20px; border-radius:14px; box-shadow:0 10px 25px rgba(0,0,0,0.1); transition:0.3s;}
.card:hover {transform:translateY(-5px);}

.product-img {width:100%; border-radius:10px;}

.footer {background:#0d0d0d; color:#fff; text-align:center; padding:40px;}