*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial}
body{background:#f5fbf7;color:#0f2c1f}
header{background:#0f8b64;padding:18px 7%;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}
.logo{color:#fff;font-size:28px;font-weight:900}
nav a{color:#fff;margin-left:18px;text-decoration:none;font-weight:600}
.hero{padding:70px 7%;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to right,#e9fff5,#dff9ef)}
.hero-text h1{font-size:42px;color:#0b6147;animation:fade .9s ease forwards}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-text p{margin:12px 0 20px}
.btn{padding:12px 22px;background:#0f8b64;color:#fff;text-decoration:none;border-radius:8px;display:inline-block;margin-right:10px;transition:.3s}
.btn:hover{transform:scale(1.05)}
.section{padding:55px 7%}
.section h2{font-size:32px;color:#0b6147;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.08);transition:.3s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%}
.card h3{padding:10px;color:#0b6147}
.price{padding:0 10px 12px;font-weight:600}
.add{background:#0f8b64;color:#fff;border:none;padding:10px 14px;border-radius:6px;margin:10px;cursor:pointer}
.cart-box{position:fixed;right:0;top:0;width:360px;height:100%;background:white;box-shadow:-6px 0 20px rgba(0,0,0,.1);padding:20px;display:none;flex-direction:column;z-index:50}
.cart-item{background:#f2fff6;padding:10px;margin:6px 0;border-radius:8px}
.cart-header{display:flex;justify-content:space-between;align-items:center}
footer{background:#111;color:#ddd;text-align:center;padding:26px;margin-top:50px}
@media(max-width:768px){.hero{flex-direction:column;text-align:center}}