:root{
  --jungle:#1B6B4A; --jungle-dark:#0E4430; --leaf:#3E9B63; --leaf-light:#6BC98D;
  --gold:#C9A24B; --gold-light:#E4C87E;
  --bg-white:#FFFFFF; --bg-cream:#FAF7F0; --bg-green-tint:#EEF7F1; --bg-green-tint-2:#E4F2E8;
  --ink:#14261D; --ink-soft:#48594F; --ink-faint:#7C8B82;
  --glass-bg:rgba(255,255,255,0.55); --glass-bg-strong:rgba(255,255,255,0.82); --glass-border:rgba(255,255,255,0.65);
  --glass-shadow:0 20px 60px rgba(20,50,35,0.12);
  --radius-sm:14px; --radius-md:22px; --radius-lg:30px;
  --font-display:'Fraunces','Georgia',serif; --font-body:'Montserrat',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --container:1280px;
  --nav-h:72px;
  --hero-duration:6000ms;

  /* ── Loamy soil background ── */
  --soil-base:#F2EDE4;
  --soil-mid:#EDE5D8;
  --soil-grain1:rgba(168,138,105,0.055);
  --soil-grain2:rgba(140,108,78,0.045);
  --soil-grain3:rgba(195,168,130,0.06);
  --soil-grain4:rgba(120,90,60,0.038);
  --soil-grain5:rgba(210,185,148,0.07);
  --soil-speck1:rgba(100,72,45,0.08);
  --soil-speck2:rgba(80,55,32,0.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

/* ══════════════════════════════════════════
   LOAMY SOIL BODY BACKGROUND
   — warm sandy-loam base with layered SVG
     grain, fine speckle noise, and subtle
     aggregate particles.
   All layers are very light so text/cards
   remain fully readable.
════════════════════════════════════════════ */
body{
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;

  background-color: var(--soil-base);

  background-image:
    /* ── Layer 1: coarse aggregate dots (larger soil crumbs) ── */
    radial-gradient(ellipse 2.5px 1.8px at 6%   14%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.8px 2.2px at 19%  43%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.2px 1.5px at 34%   8%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.6px 2px   at 47%  67%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.4px 1.6px at 63%  29%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.9px 2.3px at 78%  82%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.1px 1.7px at 91%  11%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.5px 2px   at 11%  71%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.3px 1.6px at 55%  94%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.7px 2.1px at 83%  55%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2px   1.9px at 27%  86%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.6px 2.4px at 70%  47%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.2px 1.6px at 4%   58%, var(--soil-speck1) 100%, transparent 100%),
    radial-gradient(ellipse 1.8px 2px   at 44%  22%, var(--soil-speck2) 100%, transparent 100%),
    radial-gradient(ellipse 2.4px 1.8px at 88%  35%, var(--soil-speck1) 100%, transparent 100%),

    /* ── Layer 2: medium grain texture ── */
    repeating-linear-gradient(
      112deg,
      transparent               0px,
      transparent               3px,
      var(--soil-grain1)        3px,
      var(--soil-grain1)        3.6px,
      transparent               3.6px,
      transparent               8px,
      var(--soil-grain2)        8px,
      var(--soil-grain2)        8.4px,
      transparent               8.4px,
      transparent               14px
    ),
    repeating-linear-gradient(
      58deg,
      transparent               0px,
      transparent               5px,
      var(--soil-grain3)        5px,
      var(--soil-grain3)        5.5px,
      transparent               5.5px,
      transparent               11px,
      var(--soil-grain4)        11px,
      var(--soil-grain4)        11.4px,
      transparent               11.4px,
      transparent               18px
    ),

    /* ── Layer 3: fine silt cross-hatch ── */
    repeating-linear-gradient(
      0deg,
      transparent               0px,
      transparent               6px,
      var(--soil-grain5)        6px,
      var(--soil-grain5)        6.3px,
      transparent               6.3px,
      transparent               12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent               0px,
      transparent               7px,
      var(--soil-grain1)        7px,
      var(--soil-grain1)        7.25px,
      transparent               7.25px,
      transparent               15px
    ),

    /* ── Layer 4: warm tonal variation (loam colour zones) ── */
    radial-gradient(ellipse 80% 40% at 15%  30%, rgba(210,190,155,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80%  70%, rgba(180,155,115,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 70% 35% at 50%  90%, rgba(200,175,135,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 90%  10%, rgba(215,195,160,0.10) 0%, transparent 70%),

    /* ── Layer 5: base loam colour sweep ── */
    linear-gradient(168deg, var(--soil-base) 0%, var(--soil-mid) 55%, var(--soil-base) 100%);
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; margin:0; padding:0; }
input,textarea,select{ font-family:inherit; }
::selection{ background:var(--leaf-light); color:var(--jungle-dark); }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.container-narrow{ max-width:860px; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--jungle-dark); margin:0; font-weight:500; }
em{ font-style:italic; color:var(--jungle); }
p{ margin:0 0 12px; color:var(--ink-soft); }

.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-sm{ width:15px; height:15px; }
.icon-lg{ width:30px; height:30px; }

/* ── Glass card — lifted from the soil background ── */
.glass-card{
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.72);
  border-radius:var(--radius-md);
  box-shadow:var(--glass-shadow), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ── Buttons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:100px; font-weight:600; font-size:14.5px; letter-spacing:.2px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s ease,color .3s ease; position:relative; overflow:hidden; white-space:nowrap; }
.btn-primary{ background:linear-gradient(135deg,var(--jungle),var(--leaf)); color:#fff; box-shadow:0 12px 30px rgba(27,107,74,0.35); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(27,107,74,0.45); }
.btn-glass{ background:rgba(255,255,255,0.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fff; border:1px solid rgba(255,255,255,0.5); }
.btn-glass:hover{ background:rgba(255,255,255,0.3); transform:translateY(-3px); }
.btn-ghost{ border:1.5px solid var(--jungle); color:var(--jungle); padding:11px 22px; font-size:13.5px; }
.btn-ghost:hover{ background:var(--jungle); color:#fff; }
.btn-outline{ border:1.5px solid rgba(27,107,74,0.35); color:var(--jungle); background:rgba(27,107,74,0.04); }
.btn-outline:hover{ background:var(--jungle); color:#fff; border-color:var(--jungle); }
.btn-order{ width:100%; margin-top:14px; padding:12px 20px; font-size:13.5px; }
.ripple-el{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none; }
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* ── Loader ── */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--soil-base); display:flex; align-items:center; justify-content:center; transition:opacity .6s ease,visibility .6s ease; }
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ width:60px; height:60px; color:var(--jungle); animation:pulseLeaf 1.3s ease-in-out infinite; }
.loader-mark .icon{ width:100%; height:100%; stroke-width:1.4; }
@keyframes pulseLeaf{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.12); opacity:1; } }

/* ── Growth progress bar ── */
.growth-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--leaf),var(--gold)); z-index:2000; transition:width .1s linear; pointer-events:none; }

/* ══════════════════════ NAVBAR ══════════════════════ */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:all .4s var(--ease); }
.navbar.scrolled{ padding:10px 0; background:rgba(242,237,228,0.88); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); box-shadow:0 8px 30px rgba(20,50,35,0.08); }
.nav-inner{ max-width:var(--container); margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand-logo{ height:36px; width:auto; object-fit:contain; transition:height .4s ease; }
.navbar.scrolled .brand-logo{ height:30px; }
.brand-text{ font-family:var(--font-display); font-size:17px; font-weight:500; transition:color .4s ease; white-space:nowrap; }
.navbar:not(.scrolled) .brand-text{ color:#fff; }
.navbar.scrolled .brand-text{ color:var(--jungle-dark); }
.brand-text em{ color:inherit; opacity:.75; font-style:italic; font-size:13.5px; }
.nav-links{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); flex-wrap:nowrap; }
.nav-link{ font-size:13px; font-weight:500; position:relative; padding:6px 1px; white-space:nowrap; transition:color .3s ease; }
.navbar:not(.scrolled) .nav-link{ color:rgba(255,255,255,0.92); }
.navbar.scrolled .nav-link{ color:var(--ink-soft); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold); transition:width .35s var(--ease); }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.navbar.scrolled .nav-link:hover,.navbar.scrolled .nav-link.active{ color:var(--jungle); }
.nav-cta-mobile{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.navbar:not(.scrolled) .btn-ghost{ border-color:rgba(255,255,255,0.7); color:#fff; }
.navbar:not(.scrolled) .btn-ghost:hover{ background:#fff; color:var(--jungle); }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:24px; height:24px; z-index:1201; }
.nav-toggle span{ height:2px; width:100%; border-radius:2px; background:currentColor; transition:transform .4s var(--ease),opacity .3s ease; }
.navbar:not(.scrolled) .nav-toggle{ color:#fff; }
.navbar.scrolled .nav-toggle{ color:var(--jungle-dark); }
.nav-toggle.active{ color:var(--jungle-dark) !important; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-scrim{ position:fixed; inset:0; background:rgba(10,30,20,0.32); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:1099; }
.nav-scrim.show{ opacity:1; pointer-events:auto; }

/* ══════════════════════ HERO ══════════════════════ */
.hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; color:#fff; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.hero-slide.active{ opacity:1; z-index:1; }
.hero-slide.prev{ opacity:0; z-index:0; }
.hero-slide-img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 9s linear; will-change:transform; }
.hero-slide.active .hero-slide-img{ transform:scale(1.00); }
.hero-slide::after{ content:''; position:absolute; inset:0; background:var(--tint); z-index:1; }
.hero-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(10,40,28,0.45) 0%,rgba(10,40,28,0.22) 40%,rgba(8,30,20,0.78) 100%); }
.hero-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.particle{ position:absolute; bottom:-20px; border-radius:2px 2px 2px 10px; background:rgba(255,255,255,0.35); animation:floatUp linear infinite; }
@keyframes floatUp{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 10%{ opacity:.8; } 90%{ opacity:.5; } 100%{ transform:translateY(-110vh) rotate(320deg); opacity:0; } }
.hero-progress{ position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.18); z-index:10; }
.hero-progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold-light),var(--leaf-light)); width:0%; transition:width .1s linear; }
.hero-float-name{ position:absolute; top:130px; right:6%; z-index:5; display:flex; align-items:center; gap:10px; padding:12px 20px; color:#fff; background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.35); animation:floatBadge 4s ease-in-out infinite; }
.hero-float-name svg{ color:var(--gold-light); }
.hero-float-inner{ display:flex; flex-direction:column; gap:2px; }
.hero-float-inner span{ font-family:var(--font-display); font-style:italic; font-size:14.5px; letter-spacing:.3px; line-height:1.2; }
.hero-float-inner small{ font-size:11px; color:rgba(255,255,255,0.65); letter-spacing:.3px; }
@keyframes floatBadge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .3s,transform .3s,opacity .3s; opacity:0.7; }
.hero-arrow:hover{ background:rgba(255,255,255,0.28); opacity:1; }
.hero-prev{ left:28px; }
.hero-next{ right:28px; }
.hero-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.hero-next:hover{ transform:translateY(-50%) translateX(3px); }
.hero-content{ position:relative; z-index:5; max-width:720px; padding:0 32px; margin-left:6%; }
.hero-eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-light); margin-bottom:22px; padding:8px 18px; border:1px solid rgba(255,255,255,0.35); border-radius:100px; background:rgba(255,255,255,0.08); backdrop-filter:blur(8px); }
.hero-title{ font-size:clamp(40px,6vw,74px); line-height:1.05; color:#fff; font-weight:500; margin-bottom:24px; letter-spacing:-1px; }
.hero-title em{ color:var(--gold-light); font-style:italic; }
.hero-sub{ font-size:17px; color:rgba(255,255,255,0.85); max-width:540px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:28px; }
.hero-trust{ display:flex; gap:20px; flex-wrap:wrap; }
.hero-trust-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(255,255,255,0.78); font-weight:600; }
.hero-trust-item svg{ color:var(--gold-light); }
.hero-card{ position:absolute; right:6%; bottom:14%; z-index:5; padding:26px 30px; width:270px; animation:floatCard 5s ease-in-out infinite; }
@keyframes floatCard{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.hero-card .stat-num{ font-family:var(--font-display); font-size:40px; font-weight:500; }
.hero-card .stat-plus{ font-size:24px; color:var(--gold-light); font-weight:600; }
.hero-card-stat{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px; color:#fff; }
.hero-card .stat-label{ width:100%; font-size:12.5px; color:rgba(255,255,255,0.75); margin-top:6px; letter-spacing:.3px; }
.hero-card-divider{ height:1px; background:rgba(255,255,255,0.2); margin:16px 0; }
.hero-card-stat--sm{ margin-top:0; }
.stat-num--sm{ font-size:28px; }
.stat-plus--sm{ font-size:16px; }
.hero-nav-row{ position:absolute; left:6%; bottom:44px; z-index:10; display:flex; align-items:center; gap:12px; }
.hero-dots-inner{ display:flex; gap:7px; }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:all .3s ease; border:none; padding:0; }
.hero-dot.active{ background:var(--gold-light); width:24px; border-radius:4px; }
.hero-dot:hover:not(.active){ background:rgba(255,255,255,0.7); }
.hero-pause-btn{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .3s; flex-shrink:0; }
.hero-pause-btn:hover{ background:rgba(255,255,255,0.32); }
.hero-slide-counter{ font-size:12px; color:rgba(255,255,255,0.55); font-weight:600; letter-spacing:.5px; white-space:nowrap; }
.scroll-indicator{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,0.75); z-index:5; }
.scroll-line{ width:1px; height:34px; background:rgba(255,255,255,0.4); overflow:hidden; position:relative; }
.scroll-line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ to{ top:100%; } }
.scroll-indicator .icon{ animation:bounce 1.8s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ══════════════════════ SECTIONS ══════════════════════ */
.section{ padding:120px 0; position:relative; }
.section-head{ margin-bottom:60px; max-width:640px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--leaf); margin-bottom:14px; }
.section-head h2{ font-size:clamp(30px,4vw,44px); line-height:1.15; }
.section-sub{ margin-top:16px; font-size:16px; }
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ══════════════════════ WHY ══════════════════════ */
.why{ background:rgba(238,247,241,0.78); backdrop-filter:blur(2px); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.why-card{ padding:30px 24px; transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.why-card:hover{ transform:translateY(-8px); box-shadow:0 26px 50px rgba(20,50,35,0.14); }
.why-icon{ display:inline-flex; color:var(--jungle); }
.why-card h4{ font-size:16px; margin:14px 0 8px; }
.why-card p{ font-size:13.5px; margin:0; }

/* ══════════════════════ STATS ══════════════════════ */
.stats{ position:relative; padding:90px 0; overflow:hidden; }
.stats-bg{ position:absolute; inset:0; background:linear-gradient(120deg,var(--jungle-dark),var(--jungle) 60%,var(--leaf)); }
.stats .container{ position:relative; z-index:1; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; gap:30px; }
.stat-item{ color:#fff; }
.stat-num{ font-family:var(--font-display); font-size:clamp(36px,5vw,56px); font-weight:500; }
.stat-plus{ font-size:28px; color:var(--gold-light); font-weight:600; }
.stat-label{ display:block; font-size:13.5px; letter-spacing:.4px; color:rgba(255,255,255,0.8); margin-top:6px; }

/* ══════════════════════ PRODUCTS ══════════════════════ */
.products{ background:transparent; }
.products-toolbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; margin-bottom:22px; }
.search-box{ display:flex; align-items:center; gap:10px; padding:12px 18px; min-width:240px; flex:1; max-width:380px; color:var(--ink-faint); background:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.85); }
.search-box input{ border:none; background:none; outline:none; font-size:14px; width:100%; color:var(--ink); }
.search-clear{ color:var(--ink-faint); display:flex; align-items:center; transition:color .2s; }
.search-clear:hover{ color:var(--jungle); }
.toolbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.product-count-label{ font-size:13px; color:var(--ink-faint); white-space:nowrap; }
.product-count-label strong{ color:var(--jungle); }
.view-toggle{ display:flex; gap:4px; background:rgba(255,255,255,0.6); border-radius:var(--radius-sm); padding:4px; border:1px solid rgba(255,255,255,0.75); }
.view-btn{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); transition:all .3s ease; }
.view-btn.active{ background:#fff; color:var(--jungle); box-shadow:0 2px 8px rgba(20,50,35,0.12); }
.filter-tabs-wrap{ margin-bottom:40px; }
.filter-tabs{ display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-snap-type:x proximity; }
.filter-tabs::-webkit-scrollbar{ height:4px; }
.filter-tabs::-webkit-scrollbar-thumb{ background:rgba(27,107,74,0.2); border-radius:4px; }
.filter-tab{ padding:9px 18px; border-radius:100px; font-size:13px; font-weight:600; flex-shrink:0; background:rgba(255,255,255,0.65); color:var(--ink-soft); transition:all .3s ease; scroll-snap-align:start; border:1px solid rgba(255,255,255,0.8); }
.filter-tab:hover{ background:rgba(255,255,255,0.85); }
.filter-tab.active{ background:var(--jungle); color:#fff; border-color:var(--jungle); }
.compare-toggle{ position:relative; }
.compare-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--jungle); color:#fff; font-size:11px; font-weight:700; margin-left:4px; }
.products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.products-grid.list-view{ grid-template-columns:1fr; }
.products-grid.list-view .product-card{ display:grid; grid-template-columns:180px 1fr; gap:0; }
.products-grid.list-view .product-media{ border-radius:var(--radius-md) 0 0 var(--radius-md); overflow:hidden; }
.products-grid.list-view .product-image{ height:100%; aspect-ratio:auto; padding:14px; }
.products-grid.list-view .product-body{ padding:28px 30px; }
.product-card{ overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease); }
.product-card:hover{ transform:translateY(-8px); box-shadow:0 28px 60px rgba(20,50,35,0.16); }
.product-card.hidden{ display:none; }
.product-media{ position:relative; }
.product-image{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-md) var(--radius-md) 0 0; background:linear-gradient(160deg,rgba(238,247,241,0.9),rgba(228,242,232,0.7)); padding:4px; display:flex; align-items:center; justify-content:center; }
.product-image img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center; transition:transform .6s var(--ease); }
.product-card:hover .product-image img{ transform:scale(1.05); }
.product-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,hsl(var(--h,155) 35% 90%),hsl(var(--h,155) 40% 82%)); color:hsl(var(--h,155) 50% 45%); }
.product-badge{ position:absolute; top:14px; left:14px; font-size:11px; font-weight:700; color:#fff; background:var(--jungle); padding:5px 12px; border-radius:100px; }
.compare-check{ position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; cursor:pointer; background:rgba(255,255,255,0.88); padding:5px 10px; border-radius:100px; color:var(--ink-soft); transition:background .3s,color .3s; }
.compare-check:hover{ background:#fff; color:var(--jungle); }
.compare-check input{ width:13px; height:13px; accent-color:var(--jungle); }
.product-body{ padding:22px 22px 24px; }
.product-body h4{ font-size:17px; margin-bottom:4px; }
.product-size{ font-size:12.5px; font-weight:700; color:var(--leaf); display:block; margin-bottom:10px; }
.product-body p{ font-size:13.5px; margin-bottom:12px; }
.product-benefits-preview{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.benefit-chip{ display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--ink-soft); }
.benefit-chip .icon{ color:var(--leaf); margin-top:1px; }
.no-results{ text-align:center; padding:60px 0; font-size:16px; color:var(--ink-faint); }

/* ══════════════════════ ORDER MODAL ══════════════════════ */
.modal{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(10,30,20,0.55); backdrop-filter:blur(6px); }
.modal-panel{ position:relative; max-width:440px; width:100%; max-height:90vh; overflow-y:auto; background:var(--glass-bg-strong); animation:modalIn .4s var(--ease); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(30px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.modal-close{ position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:color .3s,background .3s; }
.modal-close:hover{ color:var(--jungle); background:#fff; }

.legal-panel{ max-width:620px; padding:36px 32px 32px; }
.legal-body{ display:flex; flex-direction:column; }
.legal-title{ font-size:22px; margin:0 0 4px; color:var(--jungle-dark, var(--jungle)); padding-right:30px; }
.legal-updated{ font-size:12px; color:var(--ink-soft); margin:0 0 18px; text-transform:uppercase; letter-spacing:.04em; }
.legal-content h4{ font-size:14px; color:var(--jungle); margin:16px 0 6px; }
.legal-content h4:first-child{ margin-top:0; }
.legal-content p{ font-size:13.5px; line-height:1.65; color:var(--ink); margin:0 0 4px; }
.order-body{ padding:36px 30px 30px; }
.mv-badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--jungle); background:var(--bg-green-tint); padding:5px 12px; border-radius:100px; margin-bottom:12px; }
.mv-title{ font-size:22px; margin-bottom:4px; }
.mv-size{ font-size:13px; color:var(--ink-faint); font-weight:600; display:block; margin-bottom:16px; }
.order-detail-row{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.order-detail-row .icon{ color:var(--leaf); flex-shrink:0; margin-top:1px; }
.order-benefits{ display:flex; flex-direction:column; gap:6px; margin:0 0 18px; }
.qty-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); letter-spacing:.3px; }
.qty-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.qty-control{ display:flex; align-items:center; background:#fff; border-radius:100px; border:1px solid rgba(27,107,74,0.2); overflow:hidden; }
.qty-control button{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:var(--jungle); transition:background .3s ease; }
.qty-control button:hover{ background:var(--bg-green-tint); }
.qty-control input{ width:48px; text-align:center; border:none; outline:none; font-size:14px; font-weight:700; color:var(--ink); background:none; -moz-appearance:textfield; }
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.order-total{ display:flex; justify-content:space-between; align-items:center; background:var(--bg-green-tint); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:22px; }
.order-total span{ font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; }
.order-total strong{ font-family:var(--font-display); font-size:19px; color:var(--jungle-dark); }
.fulfil-row{ margin-bottom:18px; }
.fulfil-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.fulfil-btn{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 10px; border-radius:var(--radius-sm); border:1.5px solid rgba(27,107,74,0.2); font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:all .3s ease; }
.fulfil-btn.active{ background:var(--jungle); border-color:var(--jungle); color:#fff; }
.delivery-fields{ margin-bottom:8px; animation:fadeSlide .4s var(--ease); }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.delivery-fields .form-field{ margin-bottom:14px; }
.delivery-fields label{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.delivery-fields select,.delivery-fields input{ width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid rgba(27,107,74,0.18); background:#fff; font-size:13.5px; outline:none; transition:border .3s,box-shadow .3s; }
.delivery-fields select:focus,.delivery-fields input:focus{ border-color:var(--jungle); box-shadow:0 0 0 3px rgba(27,107,74,0.1); }
.btn-whatsapp-order{ width:100%; margin-top:8px; background:linear-gradient(135deg,#1f9c53,#25D366); box-shadow:0 12px 30px rgba(37,211,102,0.35); }

/* ══════════════════════ COMPARE DRAWER ══════════════════════ */
.compare-drawer{ position:fixed; right:0; top:0; bottom:0; width:380px; max-width:92vw; z-index:2500; background:rgba(248,244,237,0.97); backdrop-filter:blur(20px); border-left:1px solid var(--glass-border); transform:translateX(100%); transition:transform .5s var(--ease); padding:30px; overflow-y:auto; }
.compare-drawer.open{ transform:translateX(0); }
.compare-drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.compare-drawer-head button{ width:32px; height:32px; border-radius:50%; background:var(--bg-green-tint); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; }
.compare-row{ background:#fff; border-radius:var(--radius-sm); padding:16px; margin-bottom:14px; box-shadow:0 6px 18px rgba(20,50,35,0.08); }
.compare-row h5{ margin:0 0 6px; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--jungle-dark); }
.compare-row p{ font-size:12.5px; margin:2px 0; }

/* ══════════════════════ SOLUTIONS ══════════════════════ */
.solutions{ background:rgba(238,247,241,0.7); backdrop-filter:blur(2px); }
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.solution-card{ padding:30px; transition:transform .4s var(--ease); }
.solution-card:hover{ transform:translateY(-8px); }
.sol-icon{ display:inline-flex; color:var(--jungle); }
.solution-card h4{ font-size:17px; margin:14px 0 8px; }
.solution-card p{ font-size:13.5px; margin:0; }

/* ══════════════════════ SERVICES ══════════════════════ */
.services{ background:transparent; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card{ padding:30px; position:relative; overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.service-card:hover{ transform:translateY(-8px); box-shadow:0 26px 50px rgba(20,50,35,0.14); }
.service-icon{ display:inline-flex; color:rgba(27,107,74,0.55); }
.service-card h4{ font-size:16px; margin:12px 0 8px; }
.service-card p{ font-size:13.5px; margin:0; }

/* ══════════════════════ DOWNLOADS ══════════════════════ */
.downloads{ background:rgba(238,247,241,0.7); backdrop-filter:blur(2px); }
.downloads-grid{ display:flex; flex-direction:column; gap:16px; }
.download-card{ display:flex; align-items:center; gap:22px; padding:24px 28px; transition:transform .35s var(--ease); }
.download-card:hover{ transform:translateX(6px); }
.dl-icon{ display:inline-flex; color:var(--jungle); }
.dl-info{ flex:1; }
.dl-info h4{ font-size:16px; margin-bottom:4px; }
.dl-info p{ font-size:13.5px; margin:0; }
.dl-btn{ display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* ══════════════════════ TESTIMONIALS ══════════════════════ */
.testimonials{ background:linear-gradient(150deg,rgba(238,247,241,0.75),rgba(250,247,240,0.8)); position:relative; overflow:hidden; }
.testimonials::before{ content:''; position:absolute; top:-120px; right:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(27,107,74,0.08),transparent 70%); pointer-events:none; }
.testimonials::after{ content:''; position:absolute; bottom:-140px; left:-140px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,75,0.10),transparent 70%); pointer-events:none; }

.testimonial-carousel{ max-width:760px; margin:0 auto; position:relative; }
.testimonial-stage{ position:relative; }
.testimonial-viewport{ overflow:hidden; border-radius:var(--radius-lg); }

.testi-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid rgba(27,107,74,0.16); display:flex; align-items:center; justify-content:center; color:var(--jungle); transition:all .3s var(--ease); box-shadow:0 10px 26px rgba(20,50,35,0.14); }
.testi-arrow:hover{ background:var(--jungle); color:#fff; border-color:var(--jungle); transform:translateY(-50%) scale(1.07); }
.testi-prev{ left:-58px; }
.testi-next{ right:-58px; }

.testimonial-track{ display:flex; transition:transform .6s var(--ease); }
.testimonial-slide{ flex:0 0 100%; padding:6px; }

.testimonial-card{ position:relative; padding:52px 56px 40px; text-align:center; overflow:hidden; }
.testi-quote-bg{ position:absolute; top:20px; left:26px; width:64px; height:64px; color:var(--jungle); opacity:0.07; pointer-events:none; }
.testi-quote-bg svg{ width:100%; height:100%; stroke:currentColor; stroke-width:1.5; fill:none; }

.testi-stars{ position:relative; display:flex; justify-content:center; gap:4px; margin-bottom:18px; }
.testi-stars .icon{ fill:var(--gold); stroke:var(--gold); }
.testi-text{ position:relative; font-family:var(--font-display); font-size:20px; line-height:1.65; color:var(--ink); font-style:normal; font-weight:500; margin:0 0 30px; }

.testimonial-author{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding-top:22px; border-top:1px solid rgba(27,107,74,0.12); }
.author-avatar{ flex-shrink:0; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--jungle),var(--leaf)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); font-size:17px; box-shadow:0 0 0 4px rgba(27,107,74,0.08); }
.author-info{ text-align:left; display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.author-info strong{ color:var(--ink); }
.author-info span{ color:var(--ink-faint); font-size:12px; }

.testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.testimonial-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(27,107,74,0.25); cursor:pointer; transition:all .3s ease; border:none; padding:0; }
.testimonial-dots .dot:hover{ background:rgba(27,107,74,0.45); }
.testimonial-dots .dot.active{ background:var(--jungle); width:22px; border-radius:4px; }

/* ══════════════════════ FAQS ══════════════════════ */
.faqs{ background:transparent; }
.accordion-item{ border-bottom:1px solid rgba(27,107,74,0.15); }
.accordion-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px; font-size:16px; font-weight:600; color:var(--ink); text-align:left; transition:color .3s; }
.accordion-head:hover{ color:var(--jungle); }
.accordion-icon{ color:var(--jungle); transition:transform .4s var(--ease); flex-shrink:0; }
.accordion-item.open .accordion-icon{ transform:rotate(180deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease),padding .5s var(--ease); }
.accordion-item.open .accordion-body{ max-height:300px; padding-bottom:20px; }
.accordion-body p{ font-size:14.5px; margin:0; }

/* ══════════════════════ CONTACT ══════════════════════ */
.contact{ background:rgba(238,247,241,0.65); backdrop-filter:blur(2px); }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:30px; }
.contact-info{ padding:40px; }
.contact-form h4{ font-size:20px; margin-bottom:24px; }
.office-block{ display:flex; gap:16px; align-items:flex-start; }
.office-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--bg-green-tint); color:var(--jungle); flex-shrink:0; }
.office-block h4{ font-size:15px; margin-bottom:6px; line-height:1.3; }
.office-block p{ font-size:13.5px; margin:0 0 6px; }
.office-phones{ display:flex; align-items:flex-start; gap:8px; font-weight:600; color:var(--ink); flex-wrap:wrap; }
.office-phones a{ color:var(--ink); text-decoration:none; transition:color .25s; }
.office-phones a:hover, .office-phones a:focus-visible{ color:var(--jungle); text-decoration:underline; }
.office-divider{ height:1px; background:rgba(27,107,74,0.15); margin:22px 0; }
.office-email{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--jungle); font-size:14px; margin-bottom:22px; transition:color .3s; }
.office-email:hover{ color:var(--gold); }
.map-placeholder{ height:150px; border-radius:var(--radius-sm); background:repeating-linear-gradient(45deg,var(--bg-green-tint-2),var(--bg-green-tint-2) 10px,rgba(255,255,255,0.6) 10px,rgba(255,255,255,0.6) 20px); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13px; }
.contact-form{ padding:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.3px; }
.form-field input,.form-field textarea{ width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid rgba(27,107,74,0.18); background:rgba(255,255,255,0.82); outline:none; font-size:14px; transition:border .3s ease,box-shadow .3s ease; resize:vertical; }
.form-field input:focus,.form-field textarea:focus{ border-color:var(--jungle); box-shadow:0 0 0 4px rgba(27,107,74,0.12); }
.form-field input.field-error{ border-color:#e53e3e; box-shadow:0 0 0 3px rgba(229,62,62,0.12); }
.btn-submit{ width:100%; margin-top:6px; }
.form-success{ margin-top:16px; text-align:center; color:var(--jungle); font-weight:600; font-size:14px; }

/* ══════════════════════ FOOTER ══════════════════════ */
.footer{ position:relative; background:var(--jungle-dark); color:rgba(255,255,255,0.8); padding:84px 0 0; overflow:hidden; }
.footer-watermark{ position:absolute; top:-60px; right:-60px; width:340px; height:340px; opacity:.05; color:#fff; pointer-events:none; }
.footer-watermark svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:0.6; }
.footer .container{ position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:1.5fr 0.9fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo img{ height:38px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.footer-logo span{ font-family:var(--font-display); font-size:18px; color:#fff; }
.footer-logo em{ color:var(--gold-light); font-style:italic; font-size:14px; }
.footer-brand p{ font-size:13.5px; color:rgba(255,255,255,0.62); margin:0 0 22px; max-width:280px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; transition:all .3s ease; color:#fff; }
.footer-social a .icon{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--jungle-dark); transform:translateY(-3px); }
.footer-col h5{ color:#fff; font-family:var(--font-body); font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:20px; }
.footer-col a{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,0.62); margin-bottom:13px; transition:color .3s ease; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-contact-col a{ align-items:flex-start; }
.footer-note{ font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:16px; }
.newsletter-form{ display:flex; border-radius:100px; overflow:hidden; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); }
.newsletter-form input{ flex:1; background:none; border:none; outline:none; padding:12px 16px; color:#fff; font-size:13px; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.5); }
.newsletter-form button{ padding:0 18px; color:var(--gold-light); display:flex; align-items:center; transition:color .3s; }
.newsletter-form button:hover{ color:#fff; }
.footer-bottom{ padding:26px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:12.5px; color:rgba(255,255,255,0.5); }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ color:rgba(255,255,255,0.5); transition:color .3s; }
.footer-legal a:hover{ color:var(--gold-light); }
.footer-tag strong{ color:var(--gold-light); }

/* ══════════════════════ FLOATING BUTTONS ══════════════════════ */
.float-btn{ position:fixed; right:26px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 26px rgba(20,50,35,0.3); z-index:900; transition:transform .3s var(--ease),opacity .3s ease; }
.float-whatsapp{ bottom:26px; background:#25D366; }
.float-call{ bottom:90px; background:var(--jungle); }
.float-top{ bottom:154px; background:rgba(255,255,255,0.9); color:var(--jungle); border:1px solid rgba(27,107,74,0.2); opacity:0; pointer-events:none; transform:translateY(10px); }
.float-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.float-btn:hover{ transform:translateY(-4px) scale(1.05); }
.float-top.show:hover{ transform:translateY(-4px) scale(1.05); }

/* ══════════════════════ TOAST ══════════════════════ */
.toast{ position:fixed; bottom:180px; right:26px; z-index:5000; background:var(--jungle-dark); color:#fff; padding:12px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; box-shadow:0 12px 36px rgba(10,30,20,0.35); opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease),transform .35s var(--ease); pointer-events:none; max-width:280px; }
.toast.show{ opacity:1; transform:translateY(0); }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width:1280px){ .products-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1180px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .solutions-grid,.services-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr 1fr; }
  .products-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1020px){
  .nav-links{ display:flex; position:fixed; top:0; right:0; height:100vh; width:min(260px,78vw); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; background:rgba(248,244,237,0.99); backdrop-filter:blur(26px) saturate(180%); border-left:1px solid rgba(255,255,255,0.5); padding:88px 24px 24px; transform:translateX(100%); transition:transform .5s var(--ease); box-shadow:-16px 0 50px rgba(20,50,35,0.18); z-index:1100; overflow-y:auto; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links .nav-link{ color:var(--jungle-dark) !important; font-size:14.5px; width:100%; padding:11px 0; border-bottom:1px solid rgba(27,107,74,0.1); }
  .nav-links .nav-link::after{ display:none; }
  .nav-cta-mobile{ display:inline-flex; margin-top:16px; width:100%; text-align:center; justify-content:center; padding:11px 18px; font-size:13px; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-prev{ left:-12px; }
  .testi-next{ right:-12px; }
}
@media (max-width:860px){
  .hero-card{ display:none; }
  .hero-float-name{ top:96px; right:20px; padding:9px 14px; }
  .hero-float-inner span{ font-size:12.5px; }
  .hero-float-inner small{ display:none; }
  .hero-arrow{ width:40px; height:40px; }
  .hero-prev{ left:12px; }
  .hero-next{ right:12px; }
  .why-grid{ grid-template-columns:1fr; }
  .solutions-grid,.services-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .section{ padding:80px 0; }
  .hero-content{ margin-left:0; }
  .fulfil-toggle{ grid-template-columns:1fr; }
  .products-grid{ grid-template-columns:1fr 1fr; }
  .testi-prev{ left:-6px; }
  .testi-next{ right:-6px; }
}
@media (max-width:600px){
  .hero-trust{ gap:12px; }
  .products-grid{ grid-template-columns:1fr; }
  .products-grid.list-view .product-card{ grid-template-columns:1fr; }
  .hero-arrow{ display:none; }
  .hero-content{ padding:0 20px; }
}
@media (max-width:540px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .testi-prev,.testi-next{ display:none; }
  .testimonial-card{ padding:38px 24px 30px; }
  .testi-text{ font-size:17px; }
  .testi-quote-bg{ width:48px; height:48px; top:14px; left:16px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } }