:root{
  --honey-500:#E8A020; --honey-300:#F5C86B; --honey-100:#FDF3DC;
  --coffee-900:#3B2314; --coffee-700:#5C3A21; --coffee-500:#8A5A32;
  --cream:#FFFBF2; --white:#FFFFFF; --leaf:#4E7A3A;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--coffee-900);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Be Vietnam Pro",sans-serif;font-size:16px;line-height:1.6}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--coffee-900);line-height:1.3}
h1{font-size:28px} h2{font-size:22px} h3{font-size:17px}
a{color:var(--coffee-700)}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
section{padding:48px 0}
section:nth-of-type(even){background:var(--honey-100)}
.hero{background:var(--coffee-900);color:var(--cream);text-align:center;padding:64px 0}
.hero h1{color:var(--cream)}
.hero p{color:#FDF3DC}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--honey-500);color:var(--coffee-900)}
.btn-outline{border:2px solid var(--honey-300);color:var(--cream)}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.badge{background:var(--honey-300);color:var(--coffee-900);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}
.badge-leaf{background:var(--leaf);color:#fff}
.grid{display:grid;gap:16px}
.card{background:var(--white);border:1px solid var(--coffee-500);border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(59,35,20,.08)}
.card .price{font-weight:700;color:var(--coffee-700)}
.card .pack{font-size:15px}
.steps{counter-reset:step}
.step{position:relative;padding-left:48px;margin-bottom:20px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--honey-500);color:var(--coffee-900);font-weight:700;display:flex;align-items:center;justify-content:center}
.note{font-size:13px;color:var(--coffee-700)}
footer{background:var(--coffee-900);color:var(--cream);padding:40px 0}
footer a{color:var(--honey-300)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:var(--white);border-top:1px solid var(--coffee-500);padding:10px 16px;text-align:center;z-index:10}
.sticky-cta .btn{width:100%}
main{padding-bottom:72px}
@media(min-width:768px){
  .grid-products{grid-template-columns:repeat(2,1fr)}
  .grid-info{grid-template-columns:repeat(2,1fr)}
  h1{font-size:36px} h2{font-size:26px}
  .story{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .sticky-cta{display:none} main{padding-bottom:0}
}
@media(min-width:1024px){
  .grid-products{grid-template-columns:repeat(4,1fr)}
  .grid-info{grid-template-columns:repeat(4,1fr)}
  section{padding:72px 0}
}
