:root{
  --kraft:#D9C7A1;
  --label:#F2D36B;
  --coffee:#3B2A1A;
  --cacao:#6B4F3A;
  --ink:#111111;
  --paper:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
}

/* Layout helpers */
.container{width:min(1100px,92%); margin-inline:auto}
.section{padding:72px 0}
.section-contrast{background:var(--kraft)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid #eee;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand img{height:42px}

.site-nav{display:flex; align-items:center; gap:18px}
.site-nav a{color:var(--ink); text-decoration:none; font-weight:500}
.site-nav .btn{margin-left:6px}

/* Burger */
.nav-toggle{display:none; background:none; border:0; width:38px; height:34px; padding:0; cursor:pointer}
.nav-toggle span{display:block; height:2px; background:var(--ink); margin:7px 0; transition:.3s}

/* Buttons */
.btn{
  display:inline-block; border:2px solid var(--coffee);
  padding:.7rem 1rem; border-radius:999px; text-decoration:none; font-weight:600; cursor:pointer
}
.btn-primary{background:var(--coffee); color:#fff; border-color:var(--coffee)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{color:var(--coffee); background:transparent}
.btn-outline:hover{background:var(--label); border-color:var(--label)}
.btn-full{width:100%; text-align:center}

/* Hero */
.hero{
  background:
    radial-gradient(60% 120% at 110% -10%, var(--label) 0%, transparent 60%),
    radial-gradient(50% 90% at -10% 10%, #fff7d6 0%, transparent 60%);
  padding:96px 0 72px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(2rem,4vw,3rem); margin:0 0 8px; color:var(--coffee)}
.hero p{color:#333; margin:0 0 18px}
.hero-cta{display:flex; gap:10px; margin:14px 0 8px}
.hero-bullets{display:flex; gap:16px; padding:0; margin:18px 0 0; list-style:none; color:#444}
.hero-media img{width:100%; max-width:420px; display:block; margin-inline:auto; filter:drop-shadow(0 12px 30px rgba(0,0,0,.18))}

/* Two columns */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px}

/* Cards & lists */
.card{border:1px solid #eee; border-radius:16px; padding:22px}
.card-kraft{background:linear-gradient(180deg, #efe4c8, var(--kraft))}
.check-list{padding-left:0; list-style:none; margin:10px 0 0}
.check-list li{padding-left:28px; position:relative; margin:8px 0}
.check-list li::before{
  content:"✔"; position:absolute; left:0; top:0; color:var(--cacao); font-weight:600
}

/* Features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.feature{padding:18px; border:1px solid #eee; border-radius:14px; background:#fff}
.feature h4{margin:0 0 6px; color:var(--coffee)}

/* Products */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:18px}
.product-card{border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.product-card img{width:100%; aspect-ratio:4/3; object-fit:contain; background:linear-gradient(180deg,#fff,#faf7ef)}
.product-body{padding:16px; display:flex; gap:10px; flex-direction:column}
.product-body h3{margin:2px 0; color:var(--coffee)}
.meta{color:#555; font-size:.95rem}
.price{font-size:1.2rem; font-weight:700; color:var(--cacao)}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Cart */
.cart{margin-top:28px; border:1px dashed var(--coffee); border-radius:16px; padding:16px; background:#fff}
.cart-list{list-style:none; padding:0; margin:0 0 10px}
.cart-list li{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f0f0f0}
.cart-list li:last-child{border-bottom:0}
.cart-footer{display:flex; justify-content:space-between; margin-bottom:12px; font-weight:600}

/* Services */
.services .service-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px}
.service{padding:18px; border-radius:14px; background:#fff; border:1px solid #eee}
.service h4{margin:0 0 6px; color:var(--coffee)}

/* Contact */
.contact-list{padding-left:0; list-style:none}
.contact-list a{color:var(--cacao); text-decoration:none}
.contact-form{display:flex; flex-direction:column; gap:10px}
.contact-form textarea{resize:vertical; padding:12px; border-radius:12px; border:1px solid #ddd; font:inherit}

/* Footer */
.site-footer{border-top:1px solid #eee; padding:28px 0; background:#fff}
.footer-grid{display:flex; justify-content:space-between; align-items:center; gap:14px}
.footer-nav a{color:#555; text-decoration:none; margin-left:12px}

/* Responsive */
@media (max-width:960px){
  .hero-grid, .two-col{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .services .service-list{grid-template-columns:1fr 1fr}
  .site-nav{position:fixed; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid #eee;
           display:none; flex-direction:column; padding:14px 20px; gap:12px}
  .nav-toggle{display:block}
}
@media (max-width:540px){
  .features,.product-grid,.services .service-list{grid-template-columns:1fr}
}