@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Medium.ttf') format('opentype');
  font-style: normal;
}
    
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green-deep:  #1a3a1f;
--green-mid:   #2d6b35;
--green-light: #3d8b47;
--gold:        #c9a84c;
--gold-light:  #e8c96a;
--cream:       #f8f5ee;
--white:       #ffffff;
--text-dark:   #1a1a1a;
--text-mid:    #444444;
--text-light:  #777777;
--border:      #e0ddd6;


--green:       #1a4a2e;
--green-mid:   #2d7a4f;
--green-light: #4caf7d;
--green-pale:  #e8f5ed;
--gold:        #c8922a;
--cream:       #faf7f2;
--dark:        #0f1f14;
--text:        #1c2e22;
--muted:       #5a7060;
--white:       #ffffff;
--r:           14px;
--rl:          22px;

}

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato';
background: var(--cream);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}

/* OFFER STRIP */
.offer-strip{
  width:100%;
      height: 7vh;
  background:#0f1f14;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1vh 2vw;
  position: sticky;
  top: 0;
  z-index: 1001;
}

.offer-text{
  font-size:1.2rem;
  font-weight:600;
  text-align:center;
  letter-spacing:0.05em;
}

.offer-text span{
  color:#33e1aa;
  font-weight:700;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 7vh; /* adjust based on offer-strip height */
  z-index: 1000;
  background: rgba(250,247,242,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(45,122,79,0.14);
  padding: 14px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 48px;   /* adjust size */
  width: auto;
  display: block;
}

.nav-btn {
  background: #37b772;
  color: #fff;
  padding: 10px 22px;
  border-radius: 3px;

  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
}

.nav-btn:hover {
  transform: scale(1.03);
}

/* ── HERO ── */
.hero {
min-height: 88vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 1rem 8% 5rem;
background: linear-gradient(160deg, var(--cream) 0%, #dff0e7 100%);
position: relative; overflow: hidden;
}
.hero::before {
content: '';
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 700px; height: 700px; border-radius: 50%;
background: radial-gradient(circle, rgba(76,175,125,0.1) 0%, transparent 65%);
pointer-events: none;
}

.hero-badge {
display: inline-flex; align-items: center; gap: 7px;
background: var(--green-pale); border: 1px solid rgba(45,122,79,0.22);
color: var(--green-mid); padding: 6px 16px; border-radius: 100px;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; margin-bottom: 1.5rem;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.75)} }

.hero h1 {
font-size: clamp(2.6rem, 5vw, 4rem);
font-weight: 900; line-height: 1.1; color: var(--dark);
 margin-bottom: 1.4rem;
}
.hero h1 em { font-style: normal; color: var(--green-mid); }

.hero-sub {
font-size: 1.08rem; color: var(--muted); max-width: 560px;
margin: 0 auto 2.4rem; line-height: 1.75;
}

.hero-cta {
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
margin-bottom: 3rem;
}
.btn-p {
background: #37b772; color: var(--white);
padding: 16px 34px; border-radius: 100px;
 font-size: 1rem; font-weight: 600;
text-decoration: none; transition: all 0.2s;
box-shadow: 0 4px 22px rgba(26,74,46,0.28);
cursor: pointer;
}
.btn-p:hover {  transform: translateY(-2px); box-shadow: 0 7px 28px rgba(26,74,46,0.38); }
.btn-s {
background: transparent; color: var(--green);
border: 2px solid var(--green);
padding: 14px 28px; border-radius: 100px;
 font-size: 1rem; font-weight: 600;
text-decoration: none; transition: all 0.2s;
}
.btn-s:hover { background: var(--green-pale); }

.trust-row {
display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
}
.trust-item {
display: flex; align-items: center; gap: 8px;
font-size: 0.83rem; color: var(--muted); font-weight: 500;
}
.t-icon {
width: 28px; height: 28px; border-radius: 50%;
background: var(--green-pale);
display: flex; align-items: center; justify-content: center; font-size: 13px;
}

/* ── STATS BAR ── */
.bar {
background: var(--green); color: var(--white);
padding: 18px 8%;
display: flex; align-items: center; justify-content: center;
gap: 3rem; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-n {  font-size: 1.7rem; font-weight: 700; display: block; }
.stat-l { font-size: 0.73rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.vr { width: 1px; height: 36px; background: rgba(255,255,255,0.18); }

/* ── SECTION SHARED ── */
.section { padding: 5rem 8%; }
.sh { text-align: center; margin-bottom: 3rem; }
.stag {
display: inline-block; background: var(--green-pale); color: var(--green-mid);
font-size: 1.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; padding: 5px 14px; border-radius: 100px; margin-bottom: 0.9rem;
}
.stitle {
font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; color: var(--dark); margin-bottom: .75rem;
}
.ssub { color: var(--muted); font-size: 0.97rem; max-width: 500px; margin: 0 auto; }

/* ── WHY US ── */
.why-bg { background: var(--dark); }
.pillars {
display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 3rem;
}
.pillar { text-align: center; }
.pillar-icon {
width: auto;
    height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
}

.pillar-icon img {
  width: 38px;   /* adjust size */
  height: 38px;
  object-fit: contain;
}
.pillar-t {  font-size: 0.97rem; font-weight: 700; color: var(--white); margin-bottom: .45rem; }
.pillar-s { font-size: 0.81rem; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* ── REVIEWS ── */
.reviews-bg { background: var(--green-pale); }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.rcard {
background: var(--white); border-radius: var(--rl);
padding: 1.5rem;
box-shadow: 0 4px 18px rgba(15,31,20,0.07);
border: 1px solid rgba(45,122,79,0.09);
display: flex; flex-direction: column; gap: 1rem;
}
.rcard-stars { color: var(--gold); font-size: 0.9rem; }
.rcard-text {
font-size: 0.9rem; color: var(--text); line-height: 1.7;
font-style: italic; flex: 1;
}
.rcard-foot { display: flex; align-items: center; gap: 10px; }
.avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--green-pale);
display: flex; align-items: center; justify-content: center;
font-size: 0.78rem; font-weight: 700; color: var(--green); flex-shrink: 0;
}
.rname { font-size: 0.83rem; font-weight: 600; color: var(--dark); }
.rsource { font-size: 0.72rem; color: var(--muted); }
.chip {
margin-left: auto;
display: inline-flex; align-items: center; gap: 3px;
background: var(--green-pale); color: var(--green-mid);
font-size: 0.62rem; font-weight: 700; padding: 3px 9px;
border-radius: 100px; text-transform: uppercase;
}

/* ── FAQ ── */
.faq-list { max-width: 660px; margin: 0 auto; }
.fi {
background: var(--white); border-radius: var(--r);
margin-bottom: 10px; overflow: hidden;
box-shadow: 0 2px 8px rgba(15,31,20,0.05);
}
.fq {
padding: 1.05rem 1.2rem; font-weight: 600; font-size: 0.93rem; color: var(--dark);
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
user-select: none;
}
.ft { color: var(--green-mid); font-size: 1.2rem; transition: transform 0.2s; }
.fi.open .ft { transform: rotate(45deg); }
.fa { display: none; padding: 0 1.2rem 1.05rem; font-size: 0.86rem; color: var(--muted); line-height: 1.7; }
.fi.open .fa { display: block; }

/* ── CTA BANNER ── */
.cta-wrap {
background: linear-gradient(135deg, #1a4a2e 0%, #2d7a4f 100%);
padding: 5.5rem 8%; text-align: center; color: var(--white);
position: relative; overflow: hidden;
}
.cta-wrap::before, .cta-wrap::after {
position: absolute; font-size: 13rem; opacity: 0.05; pointer-events: none;
}
.cta-wrap::before { content:'🌿'; top: -2rem; left: -2rem; }
.cta-wrap::after { content:'🌿'; bottom: -2rem; right: -2rem; transform: scaleX(-1); }

.cta-pill {
display: inline-block; background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25); border-radius: 100px;
padding: 7px 20px; font-size: 0.83rem; font-weight: 600;
margin-bottom: 1.6rem; letter-spacing: 0.03em;
}
.cta-h {
font-size: clamp(1.8rem, 3.5vw, 2.9rem); font-weight: 900; margin-bottom: 1rem;
}
.cta-s { font-size: 0.98rem; opacity: 0.78; max-width: 460px; margin: 0 auto 2.2rem; }
.btn-w {
background: var(--white); color: var(--green);
padding: 16px 38px; border-radius: 100px; font-size: 1rem; font-weight: 700;
text-decoration: none; display: inline-block;
transition: all 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.btn-w:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.24); }


/* ─── DUAL CTA ─── */
.cta-section {
background-color: #0f1f14;
padding: 50px 40px;
text-align:center;
color:#fff;
position:relative;
overflow:hidden;
}
.cta-section::before {
content:'';
position:absolute; inset:0;
background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.16) 0%, transparent 60%);
pointer-events:none;
}
.cta-section h2 {
font-size:clamp(28px,4vw,52px);
font-weight:900;
margin-bottom:16px;
position:relative;
}
.cta-section h2 em { font-style:normal; color:var(--gold-light); }
.cta-desc { font-size:17px; color:rgba(255,255,255,.72); max-width:520px; margin:0 auto 44px; line-height:1.65; font-weight:300; position:relative; }

/* offer cards */
.offer-cards { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; position:relative; margin-bottom:40px; }
.offer-card {
background:rgba(255,255,255,.08);
border:1px solid rgba(201,168,76,.35);
border-radius:10px;
padding:28px 36px;
min-width:220px;
text-align:center;
}
.offer-card .pct {
font-size:48px; font-weight:900;
color:var(--gold-light);
line-height:1;
margin-bottom:6px;
}
.offer-card .pct-label { font-size:13px; color:rgba(255,255,255,.65); margin-bottom:16px; font-weight:300; }
.offer-card .code-box {
display:inline-block;
background:var(--gold);
color:var(--green-deep);
font-size:15px; font-weight:800;
padding:7px 20px; border-radius:4px;
letter-spacing:2px;
margin-bottom:10px;
}
.offer-card .fine { font-size:12px; color:rgba(255,255,255,.45); }

.email-form { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:0 auto 18px; position:relative; }
.email-input { flex:1; min-width:210px; padding:14px 18px; border:none; border-radius:4px; font-size:15px; outline:none; }
.email-btn { background:var(--gold); color:var(--green-deep); padding:14px 26px; border:none; border-radius:4px; font-size:15px; font-weight:700; cursor:pointer;  transition:background .2s; }
.email-btn:hover { background:var(--gold-light); }
.cta-note { font-size:12px; color:rgba(255,255,255,.38); position:relative; }

/* ── FOOTER ── */
footer {
background: var(--dark); color: rgba(255,255,255,0.45);
padding: 1rem 8%; text-align: center; font-size: 0.97rem; line-height: 1.95;
}
footer a { color: rgba(255,255,255,0.4); text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.pillars { grid-template-columns: repeat(2,1fr); }
.reviews-grid { grid-template-columns: 1fr; }
.bar { gap: 1.5rem; }
.vr { display: none; }
}
@media (max-width: 600px) {
     .offer-strip{
    padding:1.2vh 4vw;
  }

  .offer-text{
    font-size:1.1rem;
    line-height:1.4;
  }
    
.section { padding: 3.5rem 5%; }
.hero { padding: 2rem 5% 4rem; }
.pillars { grid-template-columns: 1fr 1fr; }
}