:root {
   --green: #07854c;
   --dark: #15382b;
   --mint: #eff5ed;
   --ink: #1a2520;
   --muted: #59645d;
   --line: #e0e6df;
   --cream: #f7f8f5
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter, Arial, sans-serif;
   color: var(--ink);
   line-height: 1.55
}

a {
   color: inherit;
   text-decoration: none
}

button,
input {
   font: inherit
}

.wrap {
   max-width: 1190px;
   padding: 0 24px;
   margin: auto
}

.announcement {
   background: #e7f2e9;
   text-align: center;
   padding: 9px 18px;
   font-size: 12px;
   letter-spacing: .04em;
   color: #275841;
   font-weight: 700
}

.top {
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 20;
   box-shadow: 0 2px 14px #1111
}

.nav {
   min-height: 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 22px
}

.brand {
   font-weight: 850;
   letter-spacing: -.04em;
   font-size: 25px;
   white-space: nowrap
}

.brand i {
   display: inline-block;
   width: 15px;
   height: 18px;
   background: var(--green);
   transform: skew(-15deg);
   margin-right: 8px
}

.navlinks {
   display: flex;
   align-items: center;
   gap: 28px;
   font-size: 14px;
   font-weight: 650
}

.navlinks a:hover,
.footer a:hover {
   color: var(--green)
}

.btn {
   border: 0;
   background: var(--green);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 24px;
   border-radius: 5px;
   font-weight: 750;
   cursor: pointer;
   transition: .2s;
   line-height: 1.25;
   text-align: center
}

.btn:hover {
   background: #086839;
   transform: translateY(-1px)
}

.btn-outline {
   background: transparent;
   color: var(--dark);
   border: 1px solid #b8c7b9
}

.btn-outline:hover {
   background: #e7f3e9;
   color: var(--dark)
}

.hamb {
   display: none;
   border: 1px solid var(--line);
   background: white;
   border-radius: 5px;
   padding: 9px
}

.hero {
   display: grid;
   grid-template-columns: 48% 52%;
   min-height: 530px;
   background: var(--green)
}

.hero-photo {
   background: url('img/hero-desk.webp') center center/cover no-repeat
}

.hero-copy {
   padding: 90px clamp(32px, 6vw, 116px) 70px 60px;
   color: white;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: center
}

.eyebrow {
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: 12px;
   font-weight: 800
}

.hero h1 {
   font-size: clamp(28px, 3.0vw, 48px);
   line-height: 1.12;
   letter-spacing: -.045em;
   margin: 21px 0 19px;
   max-width: 780px
}

.hero p {
   font-size: 16px;
   max-width: 560px;
   opacity: .93
}

.hero .btn {
   background: #fff;
   color: var(--dark);
   margin-top: 17px
}

.hero .btn:hover {
   background: #def3e3
}

.hero small {
   display: block;
   margin-top: 14px;
   font-size: 11px;
   opacity: .9
}

.section {
   padding: 85px 0
}

.section h2 {
   font-size: clamp(28px, 2.7vw, 39px);
   line-height: 1.17;
   letter-spacing: -.04em;
   margin: 0 0 18px
}

.intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 90px;
   align-items: center
}

.intro-grid p {
   color: var(--muted);
   margin: 0 0 15px
}

.mini {
   color: var(--green);
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: 12px;
   font-weight: 800;
   margin-bottom: 14px
}

.light {
   background: var(--cream)
}

.section-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 34px
}

.section-heading p {
   max-width: 630px;
   color: var(--muted);
   margin: 0
}

.cat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px
}

.cat {
   background: #fff;
   border: 1px solid var(--line);
   transition: .2s;
   overflow: hidden
}

.cat:hover,
.product:hover {
   box-shadow: 0 12px 28px #123b231a;
   transform: translateY(-3px)
}

.cat img {
   display: block;
   width: 100%;
   height: 158px;
   object-fit: cover
}

.cat strong {
   padding: 15px 12px;
   display: block;
   text-align: center;
   font-size: 14px
}

.perks {
   background: #f1f4ed;
   padding: 31px 0
}

.perks-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px
}

.perk {
   display: flex;
   gap: 14px;
   align-items: flex-start
}

.perk-icon {
   width: 40px;
   height: 40px;
   border: 1px solid #9bb09f;
   border-radius: 50%;
   display: grid;
   place-items: center;
   flex-shrink: 0;
   font-size: 20px;
   color: var(--green)
}

.perk strong {
   display: block;
   font-size: 14px
}

.perk span {
   font-size: 12px;
   color: var(--muted)
}

.features {
   display: grid;
   grid-template-columns: 35% 65%;
   gap: 45px
}

.features>div:first-child p {
   color: var(--muted);
   max-width: 340px
}

.accordion {
   padding-right: 45px
}

.faq {
   border-bottom: 1px solid var(--line)
}

.faq summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 18px 0;
   font-size: 14px;
   font-weight: 700
}

.faq summary::-webkit-details-marker {
   display: none
}

.faq summary:after {
   content: '+';
   font-size: 24px;
   font-weight: 400
}

.faq[open] summary:after {
   content: '−'
}

.faq p {
   color: var(--muted);
   font-size: 14px;
   margin: 0 0 20px
}

.products {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.product {
   border: 1px solid var(--line);
   background: #fff;
   transition: .2s
}

.product img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   display: block
}

.product-body {
   padding: 18px
}

.product small {
   color: var(--muted);
   font-size: 12px
}

.product h3 {
   font-size: 18px;
   line-height: 1.35;
   margin: 9px 0 13px;
   min-height: 48px
}

.product .button-link {
   color: var(--green);
   font-weight: 800;
   font-size: 14px
}

.banner {
   background: #0c6040;
   color: #fff;
   text-align: center;
   padding: 66px 20px
}

.banner h2 {
   margin: 0 0 17px;
   font-size: 37px;
   letter-spacing: -.035em
}

.banner p {
   max-width: 700px;
   margin: 0 auto 28px;
   opacity: .9
}

.banner .btn {
   background: #fff;
   color: var(--dark)
}

.footer {
   background: #17372b;
   color: white;
   padding: 60px 0 26px
}

.footer-cols {
   display: grid;
   grid-template-columns: 1.35fr .8fr 1.2fr;
   gap: 65px
}

.footer .muted {
   opacity: .7;
   font-size: 13px
}

.footer h3 {
   font-size: 16px;
   margin: 0 0 15px
}

.footer a {
   display: block;
   margin-bottom: 9px;
   font-size: 13px;
   opacity: .85
}

.subscribe {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.subscribe input {
   min-width: 180px;
   flex: 1;
   padding: 13px;
   border: 1px solid #adc2b0;
   border-radius: 5px
}

.subscribe button {
   padding: 13px 18px
}

.copyright {
   border-top: 1px solid #ffffff30;
   margin-top: 42px;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   gap: 20px;
   font-size: 12px;
   opacity: .7
}

.modal {
   position: fixed;
   inset: 0;
   background: #0a241bd4;
   z-index: 60;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px
}

.modal.open {
   display: flex
}

.dialog {
   background: white;
   max-width: 500px;
   width: 100%;
   border-radius: 8px;
   padding: 35px;
   position: relative;
   max-height: 92vh;
   overflow: auto
}

.dialog h2 {
   font-size: 27px;
   margin: 5px 0 8px
}

.dialog p {
   font-size: 14px;
   color: var(--muted)
}

.close {
   position: absolute;
   right: 17px;
   top: 12px;
   background: transparent;
   border: 0;
   font-size: 29px;
   cursor: pointer
}

.form-field {
   display: block;
   margin: 13px 0
}

.form-field span {
   font-weight: 700;
   font-size: 13px;
   display: block;
   margin-bottom: 5px
}

.form-field input {
   width: 100%;
   padding: 13px;
   border: 1px solid #c9d4c9;
   border-radius: 5px
}

.form-check {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 12px;
   margin: 18px 0
}

.form-check input {
   margin-top: 3px
}

.form-note {
   font-size: 12px !important
}

.feedback {
   font-size: 13px;
   padding: 12px;
   margin-top: 12px;
   border-radius: 5px;
   background: #edf6ed;
   display: none
}

.feedback.visible {
   display: block
}

.hp {
   position: absolute;
   left: -99999px;
   opacity: 0
}

.legal {
   max-width: 850px;
   margin: 0 auto;
   padding: 75px 24px 110px
}

.legal h1 {
   font-size: 38px;
   letter-spacing: -.03em
}

.legal h2 {
   font-size: 20px;
   margin-top: 33px
}

.legal p,
.legal li {
   color: #4e5b54
}

.legal a {
   color: var(--green);
   text-decoration: underline
}

@media(max-width:950px) {
   .navlinks {
      gap: 12px
   }

   .hero {
      grid-template-columns: 45% 55%
   }

   .hero-copy {
      padding: 50px 30px
   }

   .cat-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .footer-cols {
      gap: 25px
   }
}

@media(max-width:700px) {
   .wrap {
      padding: 0 18px
   }

   .nav {
      min-height: 65px
   }

   .brand {
      font-size: 20px
   }

   .hamb {
      display: block
   }

   .navlinks {
      display: none;
      position: absolute;
      top: 65px;
      left: 0;
      right: 0;
      padding: 18px;
      background: #fff;
      flex-direction: column;
      box-shadow: 0 10px 15px #1112
   }

   .navlinks.open {
      display: flex
   }

   .hero {
      display: block
   }

   .hero-photo {
      height: 290px
   }

   .hero-copy {
      padding: 44px 22px 55px
   }

   .hero h1 {
      font-size: 35px
   }

   .section {
      padding: 56px 0
   }

   .intro-grid {
      grid-template-columns: 1fr;
      gap: 8px
   }

   .cat-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .cat img {
      height: 115px
   }

   .cat strong {
      font-size: 12px;
      padding: 12px 7px
   }

   .section-heading {
      display: block
   }

   .perks-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px
   }

   .features {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .accordion {
      padding-right: 0
   }

   .products {
      grid-template-columns: 1fr
   }

   .product img {
      height: 235px
   }

   .footer-cols {
      grid-template-columns: 1fr;
      gap: 25px
   }

   .copyright {
      display: block
   }

   .banner h2 {
      font-size: 29px
   }

   .dialog {
      padding: 27px 20px
   }
}

/* HERO v2: independent images for desktop/mobile, copy without coloured panel.
   Replace assets/img/hero-desktop.webp and hero-mobile.webp with your own files. */
.hero {
   position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   min-height: 560px;
   background: #f2f5f0;
   isolation: isolate;
   overflow: hidden
}

.hero-media {
   position: absolute;
   inset: 0;
   z-index: -1;
   display: block
}

.hero-media img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   object-position: center
}

.hero-photo {
   display: none
}

.hero-copy {
   width: min(52%, 780px);
   margin-left: auto;
   padding: 65px clamp(28px, 5vw, 90px);
   color: #17372b;
   background: transparent;
   text-shadow: none
}

.hero .btn {
   background: var(--green);
   color: white
}

.hero .btn:hover {
   background: #086839;
   color: white
}

.hero small {
   opacity: 1
}

@media(max-width:950px) and (min-width:701px) {
   .hero-copy {
      width: 55%;
      padding: 45px 28px
   }
}

@media(max-width:700px) {
   .hero {
      display: flex;
      flex-direction: column;
      min-height: 0;
      align-items: stretch;
      background: white
   }

   .hero-media {
      position: relative;
      inset: auto;
      z-index: auto;
      width: 100%;
      height: 310px
   }

   .hero-media img {
      object-position: center
   }

   .hero-copy {
      width: 100%;
      margin: 0;
      padding: 34px 22px 44px;
      color: var(--dark);
      background: transparent
   }

   .hero h1 {
      font-size: 34px
   }

   .hero .btn {
      background: var(--green);
      color: #fff
   }
}
.product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.price-current {
    color: #e53920;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.price-old {
    color: #929292;
    font-size: 16px;
    font-weight: 400;
    text-decoration: line-through;
    line-height: 1.3;
}

/* Shared 3-second post-submit preloader */
.submission-preloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 33, 26, .90); color: #fff;
  padding: 24px; opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity .2s ease, visibility .2s;
}
.submission-preloader.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.submission-preloader__content {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; text-align: center; max-width: 330px;
  font-size: 16px; line-height: 1.5;
}
.submission-preloader__content strong { font-size: 21px; font-weight: 700; }
.submission-preloader__content span { opacity: .85; font-size: 14px; }
.submission-preloader__spinner {
  width: 55px; height: 55px; border: 5px solid rgba(255,255,255,.2);
  border-top-color: #79dfac; border-radius: 50%;
  animation: garden-submit-spin .8s linear infinite;
}
@keyframes garden-submit-spin { to { transform: rotate(360deg); } }
body.submission-in-progress { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .submission-preloader__spinner { animation-duration: 1.8s; }
}