:root {
     --mg-green: #307F00;
     --mg-aqua: #0098BC;
     --mg-navy: #0C245B;
     --mg-terra: #DF7A15;
     --mg-white: #FFFFFF;
     --mg-green-10: rgba(48, 127, 0, 0.10);
     --mg-green-20: rgba(48, 127, 0, 0.20);
     --mg-aqua-30: rgba(0, 152, 188, 0.30);
     --mg-navy-10: rgba(12, 36, 91, 0.10);
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 body {
     font-family: 'Urbanist', sans-serif;
     font-weight: 400;
     color: var(--mg-navy);
     background: var(--mg-white);
     overflow-x: hidden;
 }

 /* ─── TYPOGRAPHY ─── */
 h1,
 h2,
 h3,
 h4,
 .display-font {
     font-weight: 700;
 }

 .semibold {
     font-weight: 600;
 }

 .medium {
     font-weight: 500;
 }
.mg-green{
    color: var(--mg-green);
}
 /* ─── LOGO ─── */
 .logo-img {
     width: 100%;
     height: 80px;
 }


 /* ─── TOP BAR ─── */
 .topbar {
     background: var(--mg-navy);
     color: var(--mg-white);
     font-size: 0.8rem;
     font-weight: 500;
     padding: 8px 0;
     text-align: center;
     letter-spacing: 0.03em;
 }

 .topbar a {
     color: var(--mg-white);
     text-decoration: none;
 }

 /* ─── STICKY HEADER ─── */
 .sticky-header {
     position: sticky;
     top: 0;
     z-index: 999;
     background: var(--mg-white);
     border-bottom: 2px solid var(--mg-green-10);
     padding: 12px 0;
     box-shadow: 0 2px 16px rgba(12, 36, 91, 0.07);
 }

 /* ─── HERO ─── */
.hero {
    /* This layers the gradient on top of the image (70% opacity) */
    background: linear-gradient(135deg, rgba(240, 249, 232, 0.82) 0%, rgba(230, 244, 249, 0.8) 100%), url('banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
}
 
.banner-img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 768px) {
    .banner-img{
        height: 400px;
    }
}
 .hero-eyebrow {
     /* color: var(--mg-navy); */
     font-weight: 600;
 }

 .hero-eyebrow .dot {
     width: 7px;
     height: 7px;
     background: var(--mg-terra);
     border-radius: 50%;
 }

 .hero-headline {
     /* font-size: clamp(2rem, 4.5vw, 2.1rem); */
     font-weight: 800;
     color: var(--mg-navy);
     line-height: 1.15;
     margin-bottom: 16px;
 }

 .hero-headline .accent {
     color: var(--mg-green);
 }

 .hero-sub {
     font-size: 1.15rem;
     color: #3a5068;
     font-weight: 500;
     /* margin-bottom: 32px; */
 }

 .persona-label {
     font-weight: 600;
     color: var(--mg-navy);
     margin-bottom: 8px;
 }

 .persona-select {
     border: 2px solid var(--mg-green);
     border-radius: 12px;
     padding: 14px 18px;
     text-align: center;
     font-family: 'Urbanist', sans-serif;
     font-size: 1rem;
     font-weight: 600;
     color: var(--mg-navy);
     background: var(--mg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23307F00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 16px center;
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     max-width: 500px;
     cursor: pointer;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .persona-select:focus {
     outline: none;
     border-color: var(--mg-aqua);
     box-shadow: 0 0 0 3px var(--mg-aqua-30);
 }

 /* ─── TRUST STRIP ─── */
 .trust-strip {
     background: var(--mg-navy);
     color: var(--mg-white);
     padding: 28px 0;
 }

 .trust-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 0 12px;
 }

 .trust-num {
     font-size: 1.9rem;
     font-weight: 800;
     color: var(--mg-white);
     line-height: 1;
 }

 .trust-label {
     font-size: 0.78rem;
     font-weight: 500;
     margin-top: 4px;
     opacity: 0.85;
 }

 .trust-divider {
     width: 1px;
     height: 48px;
     background: rgba(255, 255, 255, 0.15);
     align-self: center;
 }

 /* ─── DYNAMIC OFFER BLOCK ─── */
 .offer-section {
     padding: 72px 0;
     /* background: var(--mg-white); */
     
 }
/* 
 .offer-card {
    position: relative;
     /* border: 2px solid var(--mg-green); /
     border-radius: 20px;
     overflow: hidden;
     /* box-shadow: 0 8px 40px rgba(48, 127, 0, 0.10); /
     transition: box-shadow 0.3s;
     /* background: #ffffff61; /
     z-index: 2;

     .btn-cta{
        background: var(--mg-white) !important;
        color: var(--mg-green);
        border: 1px solid var(--mg-green);
        transition: all 0.3s;
     }
     .btn-cta:hover{
        background: var(--mg-green) !important;
        color: var(--mg-white) !important;
     }
 }
.offer-card::after{
       content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
       background: rgb(255 255 255);
    filter: blur(85px);
    z-index: -1;
}
 .offer-card:hover {
     box-shadow: 0 16px 56px rgba(48, 127, 0, 0.16);
 }

 .offer-header {
     /* background: var(--mg-green);
     color: var(--mg-white); /
     /* padding: 20px; /
 }

 .offer-title {
     font-size: 20px;
     line-height: normal;
     font-weight: 700;
     margin: 0;
 }

 .offer-body {
     /* padding: 20px; /
     /* background: var(--mg-white); /
 }

 .offer-price {
     font-size: 2.4rem;
     font-weight: 800;
     color: var(--mg-green);
 }

 .offer-badge {
     background: var(--mg-terra);
     color: var(--mg-white);
     font-size: 0.78rem;
     font-weight: 700;
     padding: 4px 12px;
     border-radius: 50px;
     display: inline-block;
     margin-left: 10px;
     vertical-align: middle;
 }

 .offer-meta {
     color: #5a7080;
     font-size: 0.9rem;
     font-weight: 500;
     margin-bottom: 20px;
 }

 .offer-modules {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 22px;
 }

 .offer-chip {
     background: var(--mg-green-10);
     color: var(--mg-green);
     font-size: 0.82rem;
     font-weight: 600;
     padding: 5px 14px;
     border-radius: 50px;
 }

 .btn-cta {
     background: var(--mg-green);
     color: var(--mg-white);
     font-family: 'Urbanist', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     padding: 15px 32px;
     width: 100%;
     display: block;
     text-align: center;
     cursor: pointer;
     transition: background 0.2s, transform 0.1s;
     text-decoration: none;
 }

 .btn-cta:hover {
     background: #256600;
     color: var(--mg-white);
     transform: translateY(-1px);
 }

 .btn-cta:active {
     transform: translateY(0);
 }

 .btn-secondary {
     display: block;
     text-align: center;
     margin-top: 14px;
     color: var(--mg-navy);
     font-size: 0.9rem;
     font-weight: 600;
     text-decoration: underline;
     cursor: pointer;
 }

 .btn-secondary:hover {
     color: var(--mg-green);
 } */
.offer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.offer-actions .btn-cta,
.offer-actions .btn-buy-now {
    margin-top: 16px !important;
}

.btn-buy-now {
    display: inline-block;
    padding: 15px 32px;
    border-radius: 10px;
    background: var(--mg-terra);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-buy-now:hover {
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 575px) {
    .offer-actions {
        flex-direction: column;
        width: 100%;
    }

    .offer-actions .btn-cta,
    .offer-actions .btn-buy-now {
        width: 100%;
    }
}
 .offer-card {
     border: 2px solid var(--mg-green);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 8px 40px rgba(48, 127, 0, 0.10);
     transition: box-shadow 0.3s;
 }

 .offer-card:hover {
     box-shadow: 0 16px 56px rgba(48, 127, 0, 0.16);
 }

 .offer-header {
     background: var(--mg-green);
     color: var(--mg-white);
     padding: 20px;
 }

 .offer-title {
     font-size: 20px;
     line-height: normal;
     font-weight: 700;
     margin: 0;
 }

 .offer-body {
     padding: 20px;
     background: var(--mg-white);
 }

 .offer-price {
     font-size: 2.4rem;
     font-weight: 800;
     color: var(--mg-green);
 }

 .offer-badge {
     background: var(--mg-terra);
     color: var(--mg-white);
     font-size: 0.78rem;
     font-weight: 700;
     padding: 4px 12px;
     border-radius: 50px;
     display: inline-block;
     margin-left: 10px;
     vertical-align: middle;
 }

 .offer-meta {
     color: #5a7080;
     font-size: 0.9rem;
     font-weight: 500;
     margin-bottom: 20px;
 }

 .offer-modules {
         display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: center;
 }

 .offer-chip {
     background: var(--mg-green-10);
     color: var(--mg-green);
     font-size: 0.82rem;
     font-weight: 600;
     padding: 5px 14px;
     border-radius: 50px;
 }

 .btn-cta {
     background: var(--mg-green);
     color: var(--mg-white);
     font-family: 'Urbanist', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     padding: 15px 32px;
     /* width: 100%; */
     display: block;
     text-align: center;
     cursor: pointer;
     transition: background 0.2s, transform 0.1s;
     text-decoration: none;
 }

 .btn-cta:hover {
     background: #256600;
     color: var(--mg-white);
     transform: translateY(-1px);
 }

 .btn-cta:active {
     transform: translateY(0);
 }

 .btn-secondary {
     display: block;
     text-align: center;
     margin-top: 14px;
     color: var(--mg-navy);
     font-size: 0.9rem;
     font-weight: 600;
     text-decoration: underline;
     cursor: pointer;
 }

 .btn-secondary:hover {
     color: var(--mg-green);
 }

 /* ─── ROI / PROOF ─── */
 .roi-section {
     background: #f0f9e8;
     padding: 72px 0;
 }

 .section-eyebrow {
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--mg-aqua);
     margin-bottom: 10px;
 }

 .section-title {
     font-size: clamp(1.6rem, 3vw, 2.3rem);
     font-weight: 800;
     color: var(--mg-navy);
     margin-bottom: 8px;
 }

 .section-sub {
     color: #4a6070;
     font-size: 1rem;
     font-weight: 500;
 }

 .roi-card {
     background: var(--mg-white);
     border-radius: 16px;
     padding: 32px 24px;
     text-align: center;
     border-top: 4px solid var(--mg-green);
     box-shadow: 0 4px 24px rgba(12, 36, 91, 0.07);
 }

 .roi-num {
     font-size: 29px;
     font-weight: 800;
     color: var(--mg-green);
 }

 .roi-label {
     font-size: 18px;
     font-weight: 600;
     color: var(--mg-navy);
     margin-top: 6px;
 }

 .roi-sub {
     font-size: 16px;
     color: #6a8090;
     margin-top: 4px;
 }

 /* ─── VIDEO / FARM PROOF ─── */
 .farm-section {
     background: var(--mg-white);
     padding: 72px 0;
 }

 .farm-video-wrap {
     border-radius: 20px;
     overflow: hidden;
     aspect-ratio: 16/9;
     background: var(--mg-navy);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 40px rgba(12, 36, 91, 0.14);
     position: relative;
 }

 .farm-video-placeholder {
     color: var(--mg-white);
     text-align: center;
     padding: 20px;
 }

 .play-btn {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: var(--mg-green);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
     box-shadow: 0 0 0 12px rgba(48, 127, 0, 0.2);
 }

 .play-btn svg {
     margin-left: 4px;
 }

 .farm-caption {
     margin-top: 16px;
     font-size: 0.88rem;
     font-weight: 500;
     color: #5a7080;
     text-align: center;
     font-style: italic;
 }

 /* ─── WHAT YOU GET ─── */
 .offerings-section {
     background: #f5fbfd;
     padding: 72px 0;
 }

 .offering-card {
    background: var(--mg-white);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 24px rgba(12, 36, 91, 0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
 .offering-card:hover {
     box-shadow: 0 10px 40px rgba(12, 36, 91, 0.13);
 }
.offering-card .offer-badge{
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
}
 .offering-icon {
     font-size: 2.2rem;
     margin-bottom: 10px;
 }

 .offering-head {
     padding: 28px 24px 20px;
     border-bottom: 1px solid var(--mg-green-10);
 }

 .offering-name {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--mg-navy);
 }

 .offering-price {
     font-size: 20px;
     font-weight: 800;
     color: var(--mg-green);
     margin-top: 6px;
 }

 .offering-body {
     padding: 20px 24px;
 }

 .offering-list {
     list-style: none;
     padding: 0;
     margin: 0 0 24px;
 }

 .offering-list li {
     padding: 6px 0;
     font-size: 0.92rem;
     font-weight: 500;
     color: #3a5068;
     display: flex;
     align-items: flex-start;
     gap: 8px;
 }

 .offering-list li::before {
     content: '✓';
     color: var(--mg-green);
     font-weight: 700;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .btn-aqua {
     background: var(--mg-aqua);
     color: var(--mg-white);
     font-family: 'Urbanist', sans-serif;
     font-size: 0.95rem;
     font-weight: 700;
     border: none;
     border-radius: 10px;
     padding: 12px 24px;
     width: 100%;
     cursor: pointer;
     transition: background 0.2s;
     text-decoration: none;
     display: block;
     text-align: center;
 }

 .btn-aqua:hover {
     background: #0081a0;
     color: var(--mg-white);
 }

 /* ─── TESTIMONIALS ─── */
 .testimonials-section {
     background: var(--mg-white);
     padding: 72px 0;
 }

 .testimonial-card {
     background: var(--mg-green-10);
     border-radius: 20px;
     padding: 28px 24px;
     border-left: 4px solid var(--mg-green);
     min-height: 275px;
     display: flex;
    flex-direction: column;
 }

 .testimonial-quote {
     font-size: 1rem;
     font-weight: 500;
     color: var(--mg-navy);
     line-height: 1.65;
     margin-bottom: 20px;
     font-style: italic;
 }

 .testimonial-quote::before {
     content: '"';
     color: var(--mg-green);
     font-size: 1.6rem;
     line-height: 0;
     vertical-align: -0.5rem;
     margin-right: 4px;
 }

 .testimonial-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--mg-aqua);
     color: var(--mg-white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     font-weight: 700;
     flex-shrink: 0;
 }

 .testimonial-name {
     font-weight: 700;
     font-size: 0.95rem;
     color: var(--mg-navy);
 }

 .testimonial-detail {
     font-size: 0.8rem;
     color: #5a7080;
     font-weight: 500;
 }

 .outcome-tag {
     background: var(--mg-green);
     color: var(--mg-white);
     font-size: 0.72rem;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 50px;
     display: inline-block;
     margin-top: 6px;
 }

 /* ─── WHATSAPP STRIP ─── */
 .whatsapp-strip {
     background: var(--mg-navy);
     padding: 48px 0;
     text-align: center;
 }

 .btn-whatsapp {
     background: #25D366;
     color: var(--mg-white);
     font-family: 'Urbanist', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     border: none;
     border-radius: 50px;
     padding: 15px 36px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     text-decoration: none;
     transition: background 0.2s, transform 0.1s;
 }

 .btn-whatsapp:hover {
     background: #1ebe5a;
     color: var(--mg-white);
     transform: translateY(-2px);
 }

 /* ─── FINAL CTA ─── */
 .final-cta-section {
     background: linear-gradient(135deg, #e8f5de 0%, #e0f2f9 100%);
     padding: 72px 0;
     text-align: center;
 }

 .urgency-badge {
     background: var(--mg-terra);
     color: var(--mg-white);
     font-size: 0.85rem;
     font-weight: 700;
     padding: 8px 20px;
     border-radius: 50px;
     display: inline-block;
     margin-bottom: 20px;
     animation: pulse 2.5s ease-in-out infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(223, 122, 21, 0.4);
     }

     50% {
         box-shadow: 0 0 0 10px rgba(223, 122, 21, 0);
     }
 }

 /* ─── FAQ ─── */
 .faq-section {
     background: var(--mg-white);
     padding: 72px 0;
 }

 .accordion-button {
     font-family: 'Urbanist', sans-serif;
     font-weight: 600;
     font-size: 1rem;
     color: var(--mg-navy);
     background: var(--mg-white);
 }

 .accordion-button:not(.collapsed) {
     color: var(--mg-green);
     background: var(--mg-green-10);
     box-shadow: none;
 }

 .accordion-button::after {
     filter: invert(36%) sepia(62%) saturate(500%) hue-rotate(78deg);
 }

 .accordion-button:not(.collapsed)::after {
     filter: invert(36%) sepia(62%) saturate(500%) hue-rotate(78deg);
 }

 .accordion-body {
     font-family: 'Urbanist', sans-serif;
     font-size: 0.95rem;
     color: #4a6070;
     font-weight: 500;
     line-height: 1.65;
 }

 .accordion-item {
     border-color: var(--mg-green-10);
 }

 /* ─── FOOTER ─── */
 .site-footer {
     background: var(--mg-navy);
     color: rgba(255, 255, 255, 0.75);
     font-size: 0.88rem;
 }
 .footer-logo{
     width: 60px;
 }
 .site-footer a {
     color: #fff;
     text-decoration: none;
 }

 .footer-brand {
     color: var(--mg-white);
     font-weight: 700;
     font-size: 1rem;
 }

 .footer-tagline {
     /* color: var(--mg-aqua); */
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.08em;
 }

 /* ─── PERSONA CONTENT ─── */
 .persona-content {
     display: none;
 }

 .persona-content.active {
     display: block;
 }

 /* ─── UTILITIES ─── */
 .divider {
     height: 3px;
     background: linear-gradient(90deg, var(--mg-green) 0%, var(--mg-aqua) 100%);
     border-radius: 99px;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 768px) {
     .hero {
         padding: 48px 0 40px;
     }
     .hero-headline{
        font-size: clamp(1.8rem, 4.5vw, 1.2rem);
     }
     .trust-divider {
         display: none;
     }
     .offer-title{
        font-size: 18px;
        font-weight: 700;
        line-height: normal;
     }
     .hero-sub{
        font-size: 14px;
     }
     .trust-item {
         padding: 12px 8px;
     }
      .site-footer{
        text-align: center;
      }
     .offer-card {
         margin-top: 24px;
     }
 }

 /* Modal background (hidden by default) */
.modal-overlay {
  display: none; 
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
  backdrop-filter: blur(4px); /* Optional: blurs the background */
}

/* Modal box */
.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Close button */
.close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
}

/* Simple form styling */
#contactForm input, #contactForm textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}