:root{
  --green:#234B35; --green-2:#2F6446; --green-3:#5C8F5A; --mint:#EEF4EA; --mint-2:#E2ECDD; --line:#DCE7D6;
  --cream:#F8F7F2; --ink:#1E2B24; --ink-soft:#5F6B64; --paper:#FFFFFF;
  --orange:#F26A1B; --orange-dark:#D9570C; --star:#F5A623; --red:#C2553F;
  --radius:18px; --max:760px; --wide:1180px;
  --shadow:0 10px 30px rgba(35,75,53,.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{color:var(--green); line-height:1.22; margin:0 0 .55em; font-weight:800; letter-spacing:-.01em;}
h2{font-size:clamp(25px,3vw,34px);}
h3{font-size:clamp(18px,2vw,21px); font-weight:700; margin-top:1.4em;}
p{margin:0 0 1.05em;}
a{color:var(--green-2);}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px;}
.prose{max-width:var(--max); margin:0 auto;}
.center{text-align:center;}
.kicker{display:block; width:56px; height:4px; border-radius:4px; background:var(--green-3); margin:0 auto 16px;}
.icon{width:24px; height:24px; flex:none;}
section{padding:72px 0; position:relative; scroll-margin-top:60px;}
.bg-mint{background:var(--mint);}
.bg-cream{background:var(--cream);}

/* ---------- header ---------- */
.topbar{background:var(--green); color:#D9EAD9; font-size:13px; padding:7px 0; text-align:center;}
header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--green); font-weight:800; font-size:19px;}
.logo svg{width:34px; height:34px;}
nav.main{display:flex; gap:28px;}
nav.main a{color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:600;}
nav.main a:hover{color:var(--green);}
.btn-head{display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; font-weight:700; font-size:14px; padding:10px 18px; border-radius:30px; cursor:pointer; white-space:nowrap;}
.btn-head:hover{background:var(--green-2);}
.btn-head .icon{width:18px; height:18px;}

/* ---------- buttons ---------- */
.cta-btn{display:inline-flex; align-items:center; gap:14px; background:var(--orange); color:#fff; font-weight:700; font-size:17px; padding:15px 18px 15px 24px; border-radius:40px; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(242,106,27,.32); transition:background .15s, transform .1s;}
.cta-btn:hover{background:var(--orange-dark); transform:translateY(-1px);}
.cta-btn .icon{width:22px; height:22px;}
.cta-btn .arr{width:30px; height:30px; border-radius:50%; background:#fff; color:var(--orange); display:flex; align-items:center; justify-content:center; margin-left:6px;}
.cta-btn .arr .icon{width:16px; height:16px;}
.cta-sub{font-size:13px; color:var(--ink-soft); margin:10px 0 0;}

/* ---------- hero ---------- */
.hero{position:relative; background:#F6F3EA; padding:64px 0 120px; overflow:hidden;}
.hero-bg{position:absolute; top:0; right:0; bottom:0; width:58%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%); mask-image:linear-gradient(90deg,transparent 0,#000 18%);}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:40% center;}
.hero .wrap{position:relative; z-index:2;}
.hero-text{max-width:500px;}
.hero h1{font-size:clamp(30px,3.3vw,44px); margin-bottom:16px;}
.hero .sub{font-size:18px; color:var(--ink-soft); margin-bottom:22px;}
.hero-mobile-img{display:none;}
.checks{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px;}
.checks li{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:15px;}
.checks .icon{width:20px; height:20px; color:var(--green-3); margin-top:2px;}
.price-box{display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 18px; margin-bottom:20px; box-shadow:var(--shadow);}
.price-box .old{color:var(--ink-soft); text-decoration:line-through; font-size:15px;}
.price-box .new{font-size:25px; font-weight:800; color:var(--green);}
.price-box .save{background:var(--orange); color:#fff; font-size:12px; font-weight:800; padding:4px 10px; border-radius:20px;}
.hero-badge{position:absolute; right:24px; bottom:-40px; display:none;}

.trust{position:relative; z-index:3; margin-top:-56px;}
.trust-card{background:#fff; border-radius:var(--radius); box-shadow:0 14px 40px rgba(35,75,53,.12); display:grid; grid-template-columns:repeat(4,1fr); padding:20px 10px;}
.trust-item{display:flex; align-items:center; gap:12px; padding:6px 20px; border-right:1px solid var(--line); font-size:14px; font-weight:600; line-height:1.35;}
.trust-item:last-child{border-right:none;}
.trust-item .ic{width:44px; height:44px; border-radius:50%; background:var(--mint); color:var(--green); display:flex; align-items:center; justify-content:center; flex:none;}
.eeat{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 30px; font-size:13.5px; color:var(--ink-soft); padding:22px 0 0;}
.eeat strong{color:var(--ink);}

/* ---------- about ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.photo{border-radius:0 28px 28px 0; overflow:hidden; box-shadow:var(--shadow);}
.photo.round{border-radius:28px;}
.photo img{width:100%; height:100%; object-fit:cover;}
.about .photo{margin-left:calc(-1 * max(24px, (100vw - var(--wide)) / 2 + 24px)); aspect-ratio:4/3.3;}
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;}
.spec{background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; gap:14px; align-items:flex-start;}
.spec .ic{width:44px; height:44px; border-radius:50%; background:var(--mint-2); color:var(--green); display:flex; align-items:center; justify-content:center; flex:none;}
.spec dt{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700; margin-bottom:2px;}
.spec dd{margin:0; font-size:14.5px; font-weight:600; line-height:1.45;}

/* ---------- benefits ---------- */
.benefits .split{gap:0; align-items:stretch; background:var(--mint); border-radius:28px; overflow:hidden;}
.benefits .list{padding:48px 48px;}
.ben{display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px dashed #C9D9C3;}
.ben:last-child{border-bottom:none;}
.ben .ic{width:48px; height:48px; border-radius:50%; background:#fff; color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 4px 12px rgba(35,75,53,.08);}
.ben p{margin:0; font-weight:600;}
.benefits .photo{border-radius:0; box-shadow:none; min-height:420px;}

/* ---------- ingredients ---------- */
.ing-wrap{overflow:hidden;}
.leaf-deco{position:absolute; width:70px; color:#7DB36A; opacity:.55; pointer-events:none;}
.ing-grid{display:grid; grid-template-columns:repeat(2,minmax(0,330px)); justify-content:center; gap:40px; margin:36px 0 20px;}
.ing{text-align:center;}
.ing .circle{width:220px; height:220px; margin:0 auto 18px; border-radius:50%; background:radial-gradient(circle at 50% 45%, #fff 0%, #F1F6EE 60%, #E3EDDD 100%); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
.ing .circle img{width:84%;}
.ing h4{font-size:18px; margin:0 0 6px;}
.ing .latin{display:block; font-size:13px; color:var(--green-3); font-weight:600; font-style:italic; margin-bottom:8px;}
.ing p{font-size:15px; color:var(--ink-soft); margin:0;}
.note{background:#FFF6EE; border:1px solid #F6D9C2; border-left:4px solid var(--orange); border-radius:12px; padding:16px 20px; font-size:14.5px; color:#7A3E17; margin:26px 0 0;}

/* ---------- steps ---------- */
.steps{display:flex; justify-content:center; align-items:flex-start; gap:18px; margin:36px 0 40px;}
.step{width:230px; text-align:center;}
.step .card{position:relative; height:120px; border-radius:18px; background:var(--cream); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--green); margin-bottom:14px;}
.step .card svg{width:58px; height:58px;}
.step .num{position:absolute; left:-12px; top:-12px; width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px;}
.step p{font-size:14.5px; font-weight:600; margin:0; line-height:1.45;}
.step-arrow{color:#A9BBA4; margin-top:46px;}
.placeholder{background:#FFF3C4; color:#7A5A00; font-weight:700; padding:1px 6px; border-radius:4px;}

/* ---------- reviews ---------- */
.rev-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:30px 0;}
.rev-col h4{display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:6px 14px; border-radius:20px; margin:0 0 14px;}
.rev-col.pos h4{background:#E5F2E2; color:var(--green);}
.rev-col.neg h4{background:#FBE9E5; color:var(--red);}
.rev{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow);}
.rev .who{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.rev .ava{width:42px; height:42px; border-radius:50%; background:var(--mint-2); color:var(--green); display:flex; align-items:center; justify-content:center; font-weight:800;}
.rev .name{font-weight:700; font-size:14.5px;}
.rev .src{font-size:12.5px; color:var(--ink-soft);}
.rev blockquote{margin:0; font-size:15px; color:var(--ink); position:relative; padding-left:26px;}
.rev blockquote::before{content:"\201C"; position:absolute; left:0; top:-10px; font-size:40px; color:var(--green-3); font-family:Georgia,serif;}

/* ---------- price ---------- */
.buy-split{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; align-items:stretch;}
.buybox{background:linear-gradient(160deg,#F4F8F1,#E4EEDF); border-radius:24px; padding:30px; text-align:center; border:1px solid var(--line);}
.buybox img{width:230px; margin:0 auto 14px; filter:drop-shadow(0 14px 18px rgba(35,75,53,.2));}
.buybox .name{font-size:22px; font-weight:800; color:var(--green);}
.buybox .price-row{display:flex; justify-content:center; align-items:baseline; gap:12px; margin:6px 0 2px;}
.buybox .old{color:var(--ink-soft); text-decoration:line-through;}
.buybox .new{font-size:30px; font-weight:800; color:var(--green);}
.buybox .price-note{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
.checkcard{background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:center;}
.checkcard h3{margin-top:0;}
.checkcard ul{list-style:none; padding:0; margin:0;}
.checkcard li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600;}
.checkcard li:last-child{border-bottom:none;}
.checkcard .box{width:28px; height:28px; border-radius:7px; background:var(--green-3); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.checkcard .box .icon{width:18px; height:18px;}

/* ---------- faq ---------- */
.faq{max-width:900px; margin:30px auto 0;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; box-shadow:0 4px 14px rgba(35,75,53,.05);}
.faq-q{width:100%; background:none; border:none; text-align:left; font:inherit; font-weight:700; font-size:16px; color:var(--ink); padding:16px 20px; cursor:pointer; display:flex; align-items:center; gap:14px;}
.faq-q .qm{width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none;}
.faq-q .plus{margin-left:auto; font-size:22px; color:var(--green); transition:transform .2s; flex:none;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{margin:0; padding:0 20px 18px 60px; color:var(--ink-soft);}

/* ---------- daily ---------- */
.info-card{display:flex; gap:20px; background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:28px 30px;}
.info-card .ic{width:52px; height:52px; border-radius:50%; background:var(--mint-2); color:var(--green); display:flex; align-items:center; justify-content:center; flex:none;}
.info-card h3{margin-top:4px;}
.info-card p{margin:0;}

/* ---------- final cta ---------- */
.final{padding:30px 0 70px;}
.final-card{display:grid; grid-template-columns:1fr 1.05fr; align-items:center; background:linear-gradient(100deg,#F1F5EC 0%,#E6EFDF 100%); border-radius:30px; overflow:hidden; box-shadow:var(--shadow);}
.final-card .txt{padding:44px 48px;}
.final-card h2{margin-bottom:12px;}
.final-card p{color:var(--ink-soft); font-size:17px; margin-bottom:24px;}
.final-card .img{align-self:stretch;}
.final-card .img img{width:100%; height:100%; object-fit:cover; object-position:left center;}

.sources{font-size:14px; color:var(--ink-soft); padding:0 0 60px;}
.sources h2{font-size:18px; color:var(--ink);}

/* ---------- footer ---------- */
footer{background:var(--green); color:#C9DCCB; padding:40px 0 40px; font-size:13.5px;}
footer .top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:20px;}
footer .logo{color:#fff;}
footer .legal{display:flex; gap:22px; flex-wrap:wrap;}
footer a{color:#E3EFE4;}
footer .disc{max-width:900px; line-height:1.65; opacity:.9; margin:0 0 10px;}

.sticky-cta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line); padding:10px 16px; box-shadow:0 -6px 18px rgba(0,0,0,.08);}
.sticky-cta .row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.sticky-cta .price{font-weight:800; color:var(--green); font-size:15px; line-height:1.2;}
.sticky-cta .price s{display:block; font-weight:500; font-size:12px; color:var(--ink-soft);}
.sticky-cta .cta-btn{font-size:15px; padding:11px 12px 11px 18px;}
.sticky-cta .cta-btn .arr{width:24px; height:24px;}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  nav.main{display:none;}
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .trust-card{grid-template-columns:repeat(2,1fr); row-gap:14px;}
  .trust-item:nth-child(2){border-right:none;}
}
@media (max-width:980px){
  body{font-size:16px;}
  section{padding:52px 0;}
  .hero{background:var(--cream); padding:0 0 80px;}
  .hero-bg{display:none;}
  .hero-text{max-width:none;}
  .hero-mobile-img{display:block; width:100%; aspect-ratio:1058/764; object-fit:cover; margin:0 0 24px;}
  .hero .wrap{padding-top:0;}
  .split,.buy-split,.rev-grid,.final-card{grid-template-columns:1fr;}
  .about .photo{margin:0 -24px; border-radius:0; aspect-ratio:3/2;}
  .benefits .list{padding:30px 22px;}
  .benefits .photo{min-height:0; aspect-ratio:3/2; order:-1; margin:0;}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .step{width:auto;}
  .step .card{height:86px;}
  .step .card svg{width:40px; height:40px;}
  .step .num{width:28px; height:28px; font-size:13px; left:-6px; top:-8px;}
  .step p{font-size:13px;}
  .step-arrow{display:none;}
  .leaf-deco{display:none;}
  .ing-grid{grid-template-columns:1fr; gap:30px;}
  .final-card .txt{padding:30px 24px;}
  .final-card .img{order:-1;}
  .btn-head{display:none;}
  .sticky-cta{display:block;}
  footer{padding-bottom:100px;}
  .faq-a p{padding-left:20px;}
}
@media (max-width:520px){
  .spec-grid{grid-template-columns:1fr;}
  .trust-card{grid-template-columns:1fr 1fr; padding:14px 6px;}
  .trust-item{border-right:none; padding:6px 8px; font-size:13px; gap:8px;}
  .trust-item .ic{width:36px; height:36px;}
  .cta-btn{font-size:16px;}
  .hero .cta-btn{width:100%; justify-content:space-between;}
}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .faq-a{transition:none;}}

/* logo image */
.logo img{display:block; height:40px; width:auto;}
footer .logo img{height:36px; background:#fff; padding:6px 12px; border-radius:10px; box-sizing:content-box;}
@media (max-width:600px){.logo img{height:32px;}}