/* ---------- Tokens ---------- */
:root{
  --forest: #163B2C;
  --leaf: #2D8659;
  --leaf-light: #E8F3EC;
  --cream: #FBFAF6;
  --ink: #16231C;
  --ink-soft: #4A5A50;
  --gold: #C99A3E;
  --line: #D9E4DC;
  --radius: 14px;
  --max: 1080px;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-display);color:var(--forest);margin:0 0 .5em;line-height:1.15;}
a{color:inherit;}
ul{padding:0;margin:0;list-style:none;}

.btn{
  display:inline-block;
  padding:.95rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-size:1rem;
  font-family:var(--font-body);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn--primary{background:var(--leaf);color:var(--cream);box-shadow:0 8px 20px rgba(45,134,89,.28);}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(45,134,89,.35);}
.btn--block{width:100%;text-align:center;}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line);}
.topbar__inner{
  max-width:var(--max);margin:0 auto;padding:.9rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar__logo{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--forest);}
.topbar__cta{
  background:var(--forest);color:var(--cream);padding:.55rem 1.1rem;
  border-radius:999px;font-size:.9rem;font-weight:600;text-decoration:none;
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--leaf-light);padding:2.5rem 1.25rem 3.5rem;}
.hero__swirl{position:absolute;right:-90px;top:-90px;width:340px;height:340px;color:var(--leaf);opacity:.12;}
.hero__inner{
  max-width:var(--max);margin:0 auto;position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
}
.hero__eyebrow{color:var(--leaf);font-weight:600;margin:0 0 .6rem;}
.hero__title{font-size:clamp(1.9rem, 3.2vw, 2.7rem);max-width:15ch;}
.hero__lead{max-width:46ch;color:var(--ink-soft);font-size:1.05rem;}
.hero__points{margin:1.3rem 0 1.6rem;display:flex;flex-direction:column;gap:.55rem;}
.hero__points li{position:relative;padding-left:1.5rem;color:var(--ink);}
.hero__points li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  border-radius:50%;background:var(--leaf);
}
.hero__media{position:relative;justify-self:center;}
.hero__media img{width:min(420px, 90vw);}
.hero__badge{
  position:absolute;top:6%;left:-6%;background:var(--forest);color:var(--cream);
  border-radius:50%;width:92px;height:92px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;transform:rotate(-8deg);
  box-shadow:0 10px 24px rgba(22,59,44,.35);
}
.hero__badge-off{font-family:var(--font-display);font-size:1.4rem;font-weight:700;}
.hero__badge-label{font-size:.6rem;letter-spacing:.02em;}

/* ---------- Sections shared ---------- */
section{padding:3.5rem 1.25rem;}
.ingredients, .howto{max-width:var(--max);margin:0 auto;text-align:center;}
.section-lead{color:var(--ink-soft);margin-top:-.4rem;margin-bottom:2rem;}

/* ---------- Ingredients ---------- */
.ingredients__grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem;text-align:left;
}
.ing-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.1rem;
}
.ing-card h3{font-size:1rem;margin:0;color:var(--ink);font-weight:600;font-family:var(--font-body);}
.ingredients__disclaimer{
  margin-top:2rem;font-size:.85rem;color:var(--ink-soft);max-width:60ch;
  margin-left:auto;margin-right:auto;
}

/* ---------- How to ---------- */
.howto{background:transparent;}
.howto__steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem;text-align:left;
}
.howto__steps li{
  background:var(--leaf-light);border-radius:var(--radius);padding:1.4rem 1.2rem;
  color:var(--ink);
}
.howto__steps span{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--leaf);color:#fff;
  font-weight:700;margin-bottom:.7rem;font-family:var(--font-display);
}

/* ---------- Order ---------- */
.order{background:var(--forest);color:var(--cream);}
.order__inner{
  max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;
}
.order h2{color:var(--cream);}
.order p{color:#CFE0D6;}
.price-box{display:flex;align-items:baseline;gap:.8rem;margin:1.2rem 0 1.4rem;}
.price-box__old{text-decoration:line-through;color:#8FAB9C;font-size:1.1rem;}
.price-box__new{font-family:var(--font-display);font-size:2.4rem;color:var(--gold);font-weight:700;}
.order__trust{display:flex;flex-direction:column;gap:.5rem;}
.order__trust li{position:relative;padding-left:1.4rem;color:#E3EEE7;}
.order__trust li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
}

.order__form-wrap{background:var(--cream);border-radius:var(--radius);padding:1.8rem;color:var(--ink);}
.orderForm{display:flex;flex-direction:column;gap:.35rem;}
.orderForm label{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-top:.6rem;}
.orderForm input[type="text"],
.orderForm input[type="tel"]{
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:var(--font-body);background:#fff;color:var(--ink);
}
.orderForm input:focus{outline:2px solid var(--leaf);outline-offset:1px;}
.orderForm .btn{margin-top:1.1rem;}
.order__fineprint{font-size:.78rem;color:var(--ink-soft);text-align:center;margin:.7rem 0 0;}
.hp-field{position:absolute;left:-9999px;top:-9999px;}

.form-alert{
  background:#FBEAEA;border:1px solid #E7A9A9;color:#8A2E2E;
  border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem;
}
.form-alert p{margin:.2rem 0;}

/* ---------- Footer ---------- */
.footer{
  max-width:var(--max);margin:0 auto;padding:2rem 1.25rem 3rem;
  color:var(--ink-soft);font-size:.8rem;text-align:center;
}

/* ---------- Thanks page ---------- */
.thanks-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--leaf-light);padding:1.5rem;
}
.thanks-card{
  background:var(--cream);border-radius:var(--radius);padding:2.5rem 2rem;
  max-width:420px;text-align:center;box-shadow:0 20px 40px rgba(22,59,44,.12);
}
.thanks-check{margin-bottom:1rem;}
.thanks-summary{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--leaf-light);border-radius:10px;padding:.9rem 1.1rem;margin:1.3rem 0;
}
.thanks-summary strong{font-family:var(--font-display);font-size:1.3rem;color:var(--forest);}
.thanks-note{font-size:.85rem;color:var(--ink-soft);}
.thanks-btn{
  display:inline-block;margin-top:1rem;color:var(--leaf);font-weight:600;text-decoration:none;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero__inner{grid-template-columns:1fr;text-align:center;}
  .hero__lead{margin-left:auto;margin-right:auto;}
  .hero__points{align-items:center;}
  .hero__points li{text-align:left;}
  .ingredients__grid{grid-template-columns:repeat(2,1fr);}
  .howto__steps{grid-template-columns:1fr;}
  .order__inner{grid-template-columns:1fr;}
  .hero__badge{left:2%;}
}
@media (max-width: 480px){
  .ingredients__grid{grid-template-columns:1fr;}
}