:root{
  --wood:#7a4a2a;        /* Mninga tone */
  --wood-dark:#4a2a16;
  --sand:#f6f0e8;
  --green:#1f7a4f;       /* green ya brand */
  --green-dark:#14563a;
  --text:#1b1b1b;
  --muted:#6b6b6b;
  --card:#ffffff;
  --radius:18px;
}

*{box-sizing:border-box}
a{color:inherit;text-decoration:none}

body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);

  /* Floral carving + wood grain (like your sample) */
  background:
    /* Floral carving rosette tiles */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%237a4a2a' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M130 26c16 12 26 28 26 46s-10 34-26 46c-16-12-26-28-26-46s10-34 26-46Z'/%3E%3Cpath d='M130 234c16-12 26-28 26-46s-10-34-26-46c-16 12-26 28-26 46s10 34 26 46Z'/%3E%3Cpath d='M26 130c12-16 28-26 46-26s34 10 46 26c-12 16-28 26-46 26s-34-10-46-26Z'/%3E%3Cpath d='M234 130c-12-16-28-26-46-26s-34 10-46 26c12 16 28 26 46 26s34-10 46-26Z'/%3E%3Ccircle cx='130' cy='130' r='22'/%3E%3Ccircle cx='130' cy='130' r='44' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E"),

    /* Wood grain + knot lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%237a4a2a' stroke-opacity='.085' stroke-width='2'%3E%3Cpath d='M-30 40c70-30 130-30 200 0s130 30 220 0'/%3E%3Cpath d='M-30 78c80-28 140-28 210 0s130 28 230 0'/%3E%3Cpath d='M-30 116c75-26 145-26 220 0s145 26 240 0'/%3E%3Cpath d='M-30 154c90-24 150-24 230 0s140 24 250 0'/%3E%3Cpath d='M-30 192c85-22 155-22 240 0s155 22 260 0'/%3E%3Cpath d='M250 40c-18 14-28 26-28 40s10 26 28 40c18-14 28-26 28-40s-10-26-28-40Z' stroke-opacity='.08'/%3E%3Cpath d='M250 52c-10 8-16 16-16 28s6 20 16 28c10-8 16-16 16-28s-6-20-16-28Z' stroke-opacity='.07'/%3E%3C/g%3E%3C/svg%3E"),

    /* Soft brand gradients */
    radial-gradient(900px 520px at 10% 10%, rgba(31,122,79,.10), transparent 62%),
    radial-gradient(900px 520px at 90% 20%, rgba(122,74,42,.12), transparent 62%),
    linear-gradient(180deg, var(--sand), #fff);

  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 260px 260px, 360px 220px, auto, auto, auto;
}

/* Subtle background floating animation */
@keyframes bgFloat{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  50%  { background-position: 30px 18px, -22px 10px, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
}
body{ animation:bgFloat 18s ease-in-out infinite; }

.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,240,232,0.75);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex; gap:10px; align-items:center;
}
.logo{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: none; /* hakikisha hakuna background ya zamani */
}

.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand h1{font-size:16px;margin:0;letter-spacing:.4px}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{font-size:13px;color:#2a2a2a;opacity:.9}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  transition:.2s ease;
  font-weight:600;
}
.btn-primary{
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff; border:none;
  box-shadow:0 12px 30px rgba(31,122,79,.25);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost:hover{background:rgba(0,0,0,.04)}

/* HERO */
.hero{padding:44px 0 18px;}
.hero-advanced-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch;
}

.hero-card{
  background: linear-gradient(135deg, rgba(122,74,42,.10), rgba(31,122,79,.08));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:26px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  overflow:hidden;
  position:relative;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-40px -40px auto auto;
  width:180px;height:180px;border-radius:50%;
  background: radial-gradient(circle, rgba(31,122,79,.22), transparent 60%);
}

.kicker{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:999px;
  background:rgba(31,122,79,.10);
  color:var(--green-dark);
  font-size:12px;font-weight:600;
}

.h-title{
  font-family:"Playfair Display", serif;
  font-size:44px; line-height:1.05;
  margin:14px 0 10px;
}
.h-title span{color:var(--wood)}
.lead{color:var(--muted);max-width:56ch;margin:0 0 16px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{
  font-size:12px;color:#2b2b2b;
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.06);
}

.trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.trust-item{
  display:flex;gap:10px;align-items:flex-start;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:12px;
}
.trust-icon{
  width:36px;height:36px;border-radius:14px;
  background: linear-gradient(135deg, var(--green), var(--wood));
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* HERO RIGHT SIDE FIX */
.hero-visual{display:flex;flex-direction:column;gap:12px;}

.hero-image-wrap{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 70px rgba(0,0,0,.10);
  min-height: 520px;
  background: linear-gradient(135deg, rgba(122,74,42,.18), rgba(31,122,79,.10));
}

/* NOTE: hero photo comes from HTML using --hero-photo */
.hero-image{
  position:absolute; inset:0;
  background-image:
    radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg, rgba(122,74,42,.34), rgba(31,122,79,.18)),
    var(--hero-photo),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M-30 40c70-30 130-30 200 0s130 30 220 0'/%3E%3Cpath d='M-30 78c80-28 140-28 210 0s130 28 230 0'/%3E%3Cpath d='M-30 116c75-26 145-26 220 0s145 26 240 0'/%3E%3Cpath d='M-30 154c90-24 150-24 230 0s140 24 250 0'/%3E%3Cpath d='M-30 192c85-22 155-22 240 0s155 22 260 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, cover, cover, cover, 360px 220px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, center, center, center, center;
  transform: scale(1.03);
  z-index:1;
}

/* Overlay should never make it black */
.hero-image-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 10% 15%, rgba(31,122,79,.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.14));
  z-index:2;
}

.floating-card{
  position:absolute;
  left:18px; bottom:18px;
  z-index:3;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px 14px;
  width:min(320px, 92%);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}

.mini-proof{margin-top:12px}

/* SECTION */
.section{padding:32px 0}
.section h2{font-size:20px;margin:0 0 12px}

/* CARDS / GRID */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.img-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.img-wrap:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28), transparent 60%);
  transform: translateX(-120%);
  transition: .6s ease;
}
.img-wrap:hover:before{ transform: translateX(120%); }

.product-img{
  height:160px;border-radius:16px;
  background:linear-gradient(135deg, rgba(122,74,42,.22), rgba(31,122,79,.14));
  border:1px solid rgba(0,0,0,.06);
  margin-bottom:10px;
  background-size:cover;
  background-position:center;
}

.price{font-weight:800;color:var(--green-dark)}
.muted{color:var(--muted);font-size:13px}

/* OFFER */
.offer-card{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:14px;
  background: linear-gradient(135deg, rgba(122,74,42,.10), rgba(31,122,79,.10));
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
}
.offer-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.price-block{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding:12px;
}
.strike{font-weight:900;text-decoration: line-through;opacity:.55;margin-top:6px}
.price-big{font-weight:900;font-size:20px;margin-top:6px;color: var(--green-dark)}
.price-big.alt{color: var(--wood-dark)}
.offer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.timer-title{font-weight:900;margin-bottom:8px}
.timer{display:flex;gap:10px}
.tbox{
  flex:1;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding:12px;
  text-align:center;
}
.tval{font-weight:900;font-size:26px}
.tlabel{font-size:12px;color: var(--muted);margin-top:4px}
.offer-conditions{margin-top:12px}

/* FEATURE MATRIX */
.feature-matrix{
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding:10px;
  background: rgba(255,255,255,.75);
}
.fm-row{
  display:grid; grid-template-columns: 16px 1fr auto;
  gap:8px; align-items:center;
  padding:6px 0;
  border-top:1px dashed rgba(0,0,0,.06);
}
.fm-row:first-child{border-top:none}
.fm-row b{font-size:12px;color:#1f1f1f;opacity:.85}
.fm-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.fm-dot.ok{background: rgba(31,122,79,.65)}
.fm-dot.maybe{background: rgba(122,74,42,.55)}

/* TESTIMONIAL */
.tcard{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.07);
}
.timg{
  height:180px;
  background: linear-gradient(135deg, rgba(122,74,42,.22), rgba(31,122,79,.14));
}
.tmeta{padding:12px}

/* SWIPER */
.swiper{width:100%}
.swiper-slide{border-radius:16px;overflow:hidden}
.swiper-pagination-bullet{opacity:.35}
.swiper-pagination-bullet-active{opacity:.85}

/* MOBILE CTA */
.mobile-cta{
  position:fixed;
  left:16px; right:16px; bottom:14px;
  z-index:60;
  display:none;
  text-align:center;
  padding:14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff;
  font-weight:900;
  box-shadow: 0 16px 48px rgba(31,122,79,.30);
}

/* Pulse */
@keyframes pulse{
  0%{transform:translateY(0); box-shadow:0 12px 30px rgba(31,122,79,.25);}
  50%{transform:translateY(-1px); box-shadow:0 18px 44px rgba(31,122,79,.32);}
  100%{transform:translateY(0); box-shadow:0 12px 30px rgba(31,122,79,.25);}
}
.pulse{animation:pulse 2.2s ease-in-out infinite;}

/* FOOTER */
.footer{
  padding:30px 0;
  border-top:1px solid rgba(0,0,0,.06);
  color:var(--muted);
  font-size:13px;
}

/* RESPONSIVE */
@media(max-width:920px){
  .hero-advanced-grid{grid-template-columns:1fr;}
  .hero-image-wrap{min-height:320px;}
  .offer-card{grid-template-columns:1fr;}
  .offer-prices{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .h-title{font-size:36px;}
  .mobile-cta{display:block;}
}
/* Ensure hero content is visible even if AOS fails */
.hero .hero-card [data-aos]{
  opacity: 1 !important;
  transform: none !important;
}