/* ============================================================
   SELESA'S SMELLBLOCK — shared site stylesheet
   Brand: deep forest green spine, blue data shield, ochre CTA, cream base
   ============================================================ */
:root{
  --green-deep:#103B32;
  --green:#1B5547;
  --green-soft:#2C7A66;
  --blue-shield:#2B7BC0;
  --blue-soft:#E3EEF7;
  --ochre:#D79A3C;
  --cream:#F5F1E8;
  --cream-card:#FBF8F1;
  --ink:#1C2422;
  --muted:#5C6B66;
  --line:#E2DCCD;
  --radius:14px;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.15;letter-spacing:-0.01em}
p{margin:0 0 1em}
a{color:var(--green)}
img{max-width:100%;display:block}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;font-weight:700;font-size:15px;
  border-radius:999px;padding:12px 22px;background:var(--ochre);color:#241a06;
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.small{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn.green{background:var(--green-deep);color:#fff}

/* ---------- top nav ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(16,59,50,.97);backdrop-filter:saturate(120%) blur(6px);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:18px}
.brand{font-weight:800;letter-spacing:.02em;font-size:16px;color:#fff;text-decoration:none;white-space:nowrap}
.brand span{color:var(--ochre)}
.navlinks{display:flex;align-items:center;gap:22px;list-style:none}
.navlinks a{color:#D5E2DB;text-decoration:none;font-size:15px;font-weight:600}
.navlinks a:hover{color:#fff}
.navlinks a.active{color:#fff;border-bottom:2px solid var(--ochre);padding-bottom:3px}
.nav-cta{display:flex;align-items:center;gap:14px}

/* ---------- trust bar ---------- */
.trustbar{background:var(--green);color:#CFE0D8;font-size:13.5px;font-weight:600}
.trustbar .wrap{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:11px 22px}
.trustbar b{color:#fff}

/* ---------- hero (home) ---------- */
.hero{background:var(--green-deep);color:#F3EFE4;padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre);margin-bottom:18px}
.hero h1{font-size:42px;font-weight:800;margin-bottom:22px;color:#fff}
.hero .sub{font-size:18.5px;color:#CFE0D8;max-width:34ch}
.hero .sub b{color:#fff;font-weight:700}
.hero-cta{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-note{font-size:13.5px;color:#9FB6AC;margin-top:16px}

/* ---------- inner page sub-hero ---------- */
.subhero{background:var(--green-deep);color:#F3EFE4;padding:54px 0 48px;text-align:center}
.subhero .eyebrow{margin-bottom:14px}
.subhero h1{font-size:38px;color:#fff;max-width:20ch;margin:0 auto 16px}
.subhero p{font-size:18px;color:#CFE0D8;max-width:60ch;margin:0 auto}

/* ---------- image placeholders ---------- */
.ph{border:1.5px dashed rgba(255,255,255,.32);border-radius:var(--radius);background:linear-gradient(135deg,#16463B,#0E332B);
  padding:20px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;color:#BFD3CB;position:relative;overflow:hidden}
.ph.light{border-color:var(--line);background:linear-gradient(135deg,#EFE9DA,#F8F4EB);color:var(--muted)}
.ph-tag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(43,123,192,.22);color:#9FD0F2;border-radius:6px;padding:5px 9px}
.ph.light .ph-tag{background:var(--blue-soft);color:#1F5E96}
.ph-brief{font-size:13px;line-height:1.45}
.ph-brief b{color:#fff;display:block;margin-bottom:4px;letter-spacing:.02em}
.ph.light .ph-brief b{color:var(--green)}

/* ---------- sections ---------- */
section{padding:62px 0}
.lead-tag{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-soft);margin-bottom:14px}
h2.title{font-size:32px;font-weight:800;max-width:22ch;margin-bottom:26px;color:var(--green-deep)}
.center{text-align:center}
.center h2.title{margin-left:auto;margin-right:auto}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.body-copy{font-size:17.5px;color:#2C3733}
.body-copy p{margin-bottom:1.05em}
.body-copy .first{font-size:19px;color:var(--green-deep);font-weight:600}
.alt{background:var(--cream-card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- method cards ---------- */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.mcard .step{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mcard.diff{background:var(--green-deep);border-color:var(--green-deep);color:#EAF1ED}
.mcard.diff .step{color:var(--ochre)}
.mcard h3{font-size:18px;margin-bottom:10px;color:var(--green-deep)}
.mcard.diff h3{color:#fff}
.mcard p{font-size:15px;margin:0;color:#3A4742}
.mcard.diff p{color:#C9DAD2}

/* ---------- data shield ---------- */
.data{background:var(--green-deep);color:#EAF1ED}
.data .lead-tag{color:#8FD0F2}
.data h2.title{color:#fff}
.shield-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 26px}
.shield{background:linear-gradient(160deg,#13473C,#0D2F28);border:1px solid rgba(43,123,192,.4);border-radius:var(--radius);padding:26px 22px;text-align:center}
.shield .pct{font-size:42px;font-weight:800;color:#fff;line-height:1}
.shield .pct small{font-size:18px;color:#8FD0F2;font-weight:700}
.shield .who{font-size:14px;color:#A9C2BA;margin-top:10px}
.shield .who em{font-style:normal;color:#fff;font-weight:600;display:block}
.data-foot{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start;margin-top:6px}
.accred{font-size:14.5px;color:#BFD3CB}
.accred b{color:#fff}
.plain{background:rgba(255,255,255,.05);border-left:3px solid var(--ochre);border-radius:8px;padding:16px 18px;font-size:15.5px;color:#E7EFEA}
.honesty{font-size:14px;color:#9FB6AC;margin-top:18px;max-width:64ch}

/* ---------- product grid ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prodcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease}
.prodcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(16,59,50,.5)}
.prodthumb{aspect-ratio:4/3;background:linear-gradient(140deg,#1B5547,#103B32);color:#BFD3CB;display:flex;align-items:flex-end;padding:14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;position:relative}
.prodthumb.s2{background:linear-gradient(140deg,#27654F,#143F35)}
.prodthumb.s3{background:linear-gradient(140deg,#2C7A66,#163f37)}
.prodthumb.s4{background:linear-gradient(140deg,#1E6FB8,#103B32)}
.prodbody{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.prodbody h3{font-size:18px;color:var(--green-deep);margin-bottom:4px}
.prodbody .desc{font-size:14px;color:var(--muted);margin-bottom:14px;flex:1}
.prodbody .price{font-size:22px;font-weight:800;color:var(--green-deep);margin-bottom:14px}
.prodbody .price small{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- bundle highlight ---------- */
.bundle{background:var(--green-deep);color:#EAF1ED;border-radius:18px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;margin-top:30px}
.bundle h3{font-size:26px;color:#fff;margin-bottom:12px}
.bundle p{font-size:16px;color:#C9DAD2}
.bundle .ribbon{display:inline-block;background:var(--ochre);color:#241a06;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:5px 10px;margin-bottom:14px}
.bundle .bprice{font-size:38px;font-weight:800;color:#fff}
.bundle .bprice small{font-size:15px;color:#9FB6AC;font-weight:600;text-decoration:line-through;margin-left:8px}

/* ---------- offer card ---------- */
.offer-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -28px rgba(16,59,50,.4);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr}
.offer-main{padding:38px}
.lines{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 20px}
.chip{border:1.5px solid var(--green-soft);color:var(--green);border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;background:#fff}
.offer-side{background:var(--green-deep);color:#EAF1ED;padding:38px 32px;display:flex;flex-direction:column;justify-content:center}
.offer-side h3{font-size:20px;color:#fff;margin-bottom:14px}
.guarantee{background:rgba(43,123,192,.16);border:1px solid rgba(43,123,192,.4);border-radius:12px;padding:18px;margin-top:8px}
.guarantee b{color:#fff}
.cta-fine{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:54ch}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.revcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.stars{color:var(--ochre);font-size:15px;letter-spacing:2px;margin-bottom:10px}
.revcard p{font-size:15px;color:#3A4742;margin-bottom:12px}
.revcard .who{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
.stat .n{font-size:40px;font-weight:800;color:var(--green-deep)}
.stat .l{font-size:14px;color:var(--muted);margin-top:4px}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px;margin-bottom:12px}
details[open]{box-shadow:0 12px 30px -24px rgba(16,59,50,.5)}
summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;color:var(--green-deep);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary .plus{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s ease}
summary .plus::before,summary .plus::after{content:"";position:absolute;background:var(--ochre);border-radius:2px}
summary .plus::before{left:0;top:9.5px;width:22px;height:3px}
summary .plus::after{left:9.5px;top:0;width:3px;height:22px}
details[open] summary .plus{transform:rotate(45deg)}
details .ans{padding:0 0 22px;font-size:15.5px;color:#3A4742}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--green-deep);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.contact-side{background:var(--cream-card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.contact-side h3{color:var(--green-deep);font-size:19px;margin-bottom:14px}
.contact-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:15px}
.contact-line .ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}

/* ---------- restock ---------- */
.restock{background:var(--green-deep);color:#EAF1ED;text-align:center}
.restock h2{font-size:30px;color:#fff;max-width:24ch;margin:0 auto 18px}
.restock p{font-size:17px;color:#C9DAD2;max-width:54ch;margin:0 auto 28px}
.restock .tak{color:var(--ochre);font-weight:700}

/* ---------- footer ---------- */
footer{background:#0C2A24;color:#7E978E;font-size:13.5px;padding:46px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:26px}
footer .brand{display:inline-block;color:#fff;margin-bottom:10px}
footer h4{color:#CFE0D8;font-size:14px;margin-bottom:12px;letter-spacing:.04em}
footer ul{list-style:none}
footer ul li{margin-bottom:8px}
footer a{color:#9FB6AC;text-decoration:none}
footer a:hover{color:#fff}
.foot-about{max-width:42ch;line-height:1.6}
.disc{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;max-width:80ch;line-height:1.5;font-size:12.5px;color:#6E877E}

/* ---------- whatsapp float + mobile cta ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.mobile-cta{display:none}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .navlinks{display:none}
  .hero .wrap,.twocol,.data-foot,.offer-card,.bundle,.contact-grid,.foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}.subhero h1{font-size:28px}h2.title{font-size:25px}
  .method-grid,.shield-row,.prodgrid,.rev-grid,.stats{grid-template-columns:1fr}
  .prodgrid{grid-template-columns:1fr 1fr}
  section{padding:46px 0}.hero{padding:44px 0 40px}
  .ph{min-height:240px}.offer-main,.offer-side{padding:26px}
  .trustbar .wrap{gap:16px}
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(16,59,50,.97);padding:12px 16px;border-top:1px solid rgba(255,255,255,.12)}
  .mobile-cta .btn{display:block;text-align:center}
  body{padding-bottom:74px}
  .wa-float{bottom:80px}
}
@media (max-width:520px){.prodgrid{grid-template-columns:1fr}}

/* ---------- real images ---------- */
.shot{width:100%;border-radius:16px;object-fit:cover;display:block;box-shadow:0 18px 40px -28px rgba(16,59,50,.45)}
.prodthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cert-shot{max-width:330px;width:100%;margin:8px auto 0;border-radius:12px;box-shadow:0 22px 55px -20px rgba(0,0,0,.65);display:block}
.brandmark{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px -30px rgba(16,59,50,.4)}
.brandmark img{max-width:300px;width:100%}
.pay-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;margin-top:8px}
.pay-card img{max-width:190px;width:100%;margin:0 auto;border-radius:8px}
.pay-card .l{font-size:13px;color:var(--muted);margin-top:8px}
.data-cert{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start;margin-top:28px}
@media (max-width:880px){.data-cert{grid-template-columns:1fr}}

/* ---------- language toggle ---------- */
.langtoggle{color:#D5E2DB;text-decoration:none;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.38);
  border-radius:999px;padding:5px 12px;white-space:nowrap;line-height:1}
.langtoggle:hover{color:#fff;border-color:#fff}

/* ---------- mobile hamburger nav ---------- */
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px}
@media (max-width:880px){
  .navtoggle{display:block;order:3}
  .nav-cta{display:none}
  .navlinks{display:none;position:absolute;top:62px;left:0;right:0;background:rgba(16,59,50,.98);
    flex-direction:column;gap:0;padding:6px 0;border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
  .navlinks.open{display:flex}
  .navlinks li{width:100%}
  .navlinks a{display:block;padding:14px 22px;font-size:16px}
  .navlinks a.active{border-bottom:none;color:var(--ochre)}
}

/* ---------- category landing page ---------- */
.cat-hero{background:var(--green-deep);color:#F3EFE4;padding:54px 0}
.cat-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.cat-hero h1{font-size:38px;font-weight:800;color:#fff;margin-bottom:18px}
.cat-hero .sub{font-size:18px;color:#CFE0D8;max-width:40ch;margin-bottom:8px}
.orderpanel{background:var(--cream-card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 18px 40px -28px rgba(16,59,50,.4)}
.orderpanel h3{font-size:21px;color:var(--green-deep);margin-bottom:6px}
.orderpanel .price{font-size:30px;font-weight:800;color:var(--green-deep);margin:6px 0 4px}
.orderpanel .price small{font-size:14px;color:var(--muted);font-weight:600}
.orderpanel .note{font-size:13.5px;color:var(--muted);margin:10px 0 18px}
.orderpanel .btn{display:block;text-align:center}
.orderpanel .reassure{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}
@media (max-width:880px){.cat-hero .wrap{grid-template-columns:1fr}}

/* ---------- Meet Ah Kah video gallery ---------- */
.ahkah{background:var(--green-deep)}
.ahkah .title{color:#fff}
.ahkah .lead-tag{color:var(--ochre)}
.ahkah .ak-hint{color:rgba(255,255,255,.72);font-size:14px;margin:-14px 0 22px}
.ak-row{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ak-row::-webkit-scrollbar{height:8px}
.ak-row::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:999px}
.ak-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}
.ak-card{flex:0 0 auto;width:212px;scroll-snap-align:center;position:relative;border-radius:20px;overflow:hidden;background:#000;border:3px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.38);cursor:pointer;transition:transform .18s,border-color .18s}
.ak-card:hover{transform:translateY(-3px);border-color:var(--ochre)}
.ak-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.ak-badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none}
.ak-sound{position:absolute;right:9px;bottom:9px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.58);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;backdrop-filter:blur(4px);pointer-events:none}
@media(max-width:680px){.ak-card{width:168px}}

/* ---------- Hero: data chips + Ah Kah video ---------- */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.hchip{font-size:13px;font-weight:700;color:var(--green-deep);background:#fff;border-radius:999px;padding:6px 12px;box-shadow:0 2px 6px rgba(0,0,0,.18);white-space:nowrap}
.hero-vid{width:100%;max-width:296px;justify-self:center;margin:0 auto}
.hero-vid video{aspect-ratio:9/16}
.hero-vid .ak-badge{background:rgba(16,59,50,.72)}
@media(max-width:760px){
  .hero-vid{max-width:236px;margin-top:26px}
  .hero-chips{justify-content:flex-start}
}

.brandlogo{height:34px;width:auto;display:block}
@media(max-width:760px){.brandlogo{height:30px}}