500;600;700;800&display=swap");
#hero{--hero-primary:#087523;--hero-deep:#004a28;--hero-heading:#00472b;--hero-text:#14251b;--hero-background:#f7f9ee;--hero-secondary:#07512b;--hero-button-text:#ffffff;--hero-green:#087523;--hero-lime:#72c52f;--hero-ink:#14251b;--hero-cream:#fbfff5;font-family:"Hind Siliguri",sans-serif;color:var(--hero-text);box-sizing:border-box}
#hero *,#hero *::before,#hero *::after{box-sizing:border-box}
#hero{--green:var(--hero-primary);--deep:var(--hero-deep);--lime:#72c52f;--ink:var(--hero-text);--cream:#fbfff5}#hero, #hero *{box-sizing:border-box}#hero{min-width:0;background:#edf2df}#hero{margin:0;color:var(--hero-ink);font-family:"Hind Siliguri",sans-serif}#hero{position:relative;isolation:isolate;overflow:hidden;width:min(100%,1600px);height:auto;min-height:0;max-height:none;margin:0 auto;border-radius:0 0 27px 27px;background:var(--hero-background);box-shadow:0 16px 55px #18390b18}#hero .hero-stage:after{content:"";position:absolute;z-index:-1;inset:0;background:url("/static/v1.0.38/assets/cp-hero-bg-v1.0.38-desktop.webp") center/cover no-repeat;opacity:0;transform:scale(1.015);animation:hero-backgroundReveal 1.35s cubic-bezier(.2,.7,.2,1) .08s forwards;will-change:opacity,transform}#hero .hero-stage:before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,rgba(251,255,247,.18) 0%,rgba(251,255,247,.05) 43%,transparent 64%);pointer-events:none}#hero .hero-copy{position:relative;z-index:1;width:55%;padding:14px 0 0 clamp(26px,8vw,120px);animation:none;opacity:1;transform:none}#hero .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 19px;border-radius:30px;background:#f4f8dfd9;box-shadow:0 5px 18px #18390b17;color:#226d18;font-size:clamp(14px,1.45vw,23px);font-weight:700;white-space:nowrap;animation:hero-float 3.4s ease-in-out infinite}#hero .hero-leaf{width:23px;height:23px;display:inline-block;color:#168c26;flex:none}#hero h1{margin:6px 0 2px;color:var(--hero-heading);font-size:clamp(42px,4.8vw,68px);font-weight:800;line-height:.92;letter-spacing:-2.2px;text-shadow:0 2px 0 #ffffff4d}#hero h1 .hero-accent{display:block;padding-left:clamp(18px,4vw,68px);color:#279324;position:relative}#hero h1 .hero-accent:after{content:"";position:absolute;left:47%;bottom:-6px;width:88px;height:19px;border-top:4px solid #62b935;border-radius:50%;transform:rotate(-9deg)}#hero .hero-sub{max-width:610px;margin:6px 0 7px;font-size:clamp(15px,1.35vw,19px);line-height:1.2;font-weight:600;color:#28362f}#hero .hero-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 6px}#hero .hero-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid #e5eadc;border-radius:17px;background:#ffffffde;box-shadow:0 4px 14px #24431718;font:600 clamp(11px,.9vw,14px) "Hind Siliguri",sans-serif;white-space:nowrap;animation:none;opacity:1;transform:none}#hero .hero-badge:nth-child(2){animation-delay:.12s}#hero .hero-badge:nth-child(3){animation-delay:.24s}#hero .hero-badge-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#48b920,#087421);color:#fff;box-shadow:inset 0 1px 3px #ffffff66}#hero .hero-badge-icon svg{width:21px;height:21px}#hero .hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#hero .hero-btn{position:relative;overflow:hidden;min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:5px 21px;border:2px solid #13852b;border-radius:38px;text-decoration:none;font-size:clamp(17px,1.65vw,23px);font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}#hero .hero-btn:hover{transform:translateY(-3px);box-shadow:0 9px 19px #104d2635}#hero .hero-btn-primary{color:var(--hero-button-text);background:linear-gradient(110deg,#30ad18,#087526);box-shadow:0 5px 12px #145d2630}#hero .hero-btn-secondary{color:var(--hero-secondary);background:#ffffffdf}#hero .hero-btn svg{width:25px;height:25px;flex:none}#hero .hero-btn-primary .hero-cart{animation:hero-cart-bob 2s ease-in-out infinite}#hero .hero-glint{position:absolute;inset:-60% auto -60% -30%;width:25%;background:linear-gradient(90deg,transparent,#ffffff66,transparent);transform:skewX(-22deg);animation:hero-shine 4s ease-in-out infinite;pointer-events:none}#hero .hero-product-hint{position:absolute;z-index:1;right:2%;bottom:2%;font-size:10px;color:#ffffffba;text-shadow:0 1px 3px #18390b}#hero-notice:empty{display:none}@keyframes hero-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes hero-cart-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hero-shine{0%,30%{left:-35%}65%,100%{left:125%}}@keyframes hero-backgroundReveal{0%{opacity:0;transform:scale(1.045)}100%{opacity:1;transform:scale(1)}}@media(min-width:1601px){#hero .hero-stage:after{background-position:center center}}@media(min-width:851px) and (max-width:1100px){#hero .hero-stage:after{background-position:56% center}#hero .hero-copy{width:61%;padding-left:5vw}#hero h1{font-size:clamp(43px,5.5vw,58px)}#hero .hero-sub{font-size:16px}#hero .hero-btn{padding-inline:15px}}@media(max-width:850px){#hero .hero-stage:after{background-position:58% center}#hero .hero-stage:before{background:linear-gradient(90deg,#fafff4f5 0%,#fafff4e8 52%,#fafff48c 76%,transparent)}#hero .hero-copy{width:76%;padding-left:5vw}#hero h1{font-size:clamp(40px,6vw,52px)}#hero .hero-sub{font-size:16px}}@media(max-width:560px){#hero{border-radius:0 0 16px 16px}#hero .hero-stage:after{background-size:cover;background-position:66% center}#hero .hero-stage:before{background:linear-gradient(90deg,#fafff4f5 0%,#fafff4e8 59%,#fafff470 84%,transparent)}#hero .hero-copy{width:100%;padding:13px 14px 0}#hero h1{font-size:clamp(34px,9.5vw,42px);letter-spacing:-1.4px;margin:5px 0 2px}#hero h1 .hero-accent{padding-left:14px}#hero .hero-sub{max-width:350px;font-size:14px;line-height:1.12;margin:5px 0}#hero .hero-wide{display:none}#hero .hero-badges{gap:4px;margin-bottom:5px}#hero .hero-badge{padding:3px 6px;gap:4px;font-size:10px}#hero .hero-badge-icon{width:22px;height:22px}#hero .hero-badge-icon svg{width:16px;height:16px}#hero .hero-actions{gap:6px}#hero .hero-btn{min-height:38px;padding:4px 10px;gap:5px;font-size:15px}#hero .hero-btn svg{width:19px;height:19px}#hero .hero-product-hint{display:none}}@media(prefers-reduced-motion:reduce){#hero, #hero *, #hero *:before, #hero *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* The hero remains one unified background image at every breakpoint. */
#hero{width:100%;max-width:1600px;height:auto;min-height:0;container:hero-layout / inline-size;overflow:hidden}
#hero .hero-stage{position:relative;isolation:isolate;overflow:hidden;height:350px;min-height:350px;max-height:none;display:flex;align-items:flex-start;border-radius:inherit;background:var(--hero-background)}
#hero .hero-stage::after{inset:0;z-index:-2;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:1}
#hero .hero-stage::before{z-index:-1}
#hero .hero-copy{position:relative;z-index:2}
@container hero-layout (max-width:900px){
 #hero .hero-stage{height:350px;min-height:350px;align-items:center}
 #hero .hero-stage::after{inset:0;background-size:cover;background-position:65% center}
 #hero .hero-stage::before{inset:0;background:linear-gradient(90deg,rgba(250,255,244,.83),rgba(250,255,244,.71))}
 #hero .hero-copy{width:100%;max-width:760px;padding:10px 14px;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
 #hero .hero-eyebrow{font-size:clamp(13px,2.1cqw,17px);padding:5px 13px;margin:0;max-width:100%}
 #hero .hero-leaf{width:19px;height:19px}
 #hero h1{font-size:clamp(39px,6.7cqw,56px);line-height:.92;letter-spacing:-1.5px;margin:0}
 #hero h1 .hero-accent{padding:0}
 #hero h1 .hero-accent::after{left:50%;transform:translateX(-50%) rotate(-9deg);width:65px}
 #hero .hero-sub{max-width:550px;font-size:clamp(13px,2.05cqw,17px);line-height:1.25;margin:0;text-align:center}
 #hero .hero-badges{justify-content:center;gap:7px;margin:0}
 #hero .hero-badge{font-size:clamp(10px,1.5cqw,12px);padding:3px 7px;gap:4px}
 #hero .hero-badge-icon{width:23px;height:23px}
 #hero .hero-badge-icon svg{width:17px;height:17px}
 #hero .hero-actions{justify-content:center;gap:10px;margin:0}
 #hero .hero-btn{min-height:40px;padding:4px 14px;gap:6px;font-size:clamp(15px,2.4cqw,19px)}
 #hero .hero-btn svg{width:20px;height:20px}
 #hero .hero-product-hint{display:none}
}
@container hero-layout (max-width:550px){
 #hero .hero-stage{height:auto;min-height:360px;max-height:none;align-items:center}
 #hero .hero-stage::after{inset:0;background-size:cover;background-position:69% center}
 #hero .hero-stage::before{inset:0;background:linear-gradient(90deg,rgba(250,255,244,.86),rgba(250,255,244,.78))}
 #hero .hero-copy{min-height:360px;max-width:100%;width:100%;padding:14px 10px;gap:9px;margin:0 auto}
 #hero .hero-eyebrow{font-size:clamp(12px,3.65cqw,15px);padding:4px 11px;white-space:normal}
 #hero h1{font-size:clamp(34px,10.6cqw,48px);line-height:.92;margin:0}
 #hero .hero-sub{font-size:clamp(12px,3.5cqw,15px);max-width:390px;line-height:1.2;margin:0}
 #hero .hero-wide{display:none}
 #hero .hero-badges{gap:5px;margin:0;justify-content:center}
 #hero .hero-badge{font-size:clamp(9px,2.65cqw,11px);padding:2px 5px;gap:3px}
 #hero .hero-badge-icon{width:21px;height:21px}
 #hero .hero-badge-icon svg{width:16px;height:16px}
 #hero .hero-actions{gap:7px;justify-content:center;flex-wrap:wrap}
 #hero .hero-btn{font-size:clamp(13px,3.75cqw,16px);padding:4px 10px;gap:5px;min-height:38px}
 #hero .hero-btn svg{width:18px;height:18px}
}
@container hero-layout (max-width:350px){
 #hero .hero-stage{min-height:365px}
 #hero .hero-copy{min-height:365px;padding:11px 7px;gap:7px}
 #hero h1{font-size:34px}
 #hero .hero-badge{padding:2px 4px;font-size:9px}
 #hero .hero-btn{font-size:13px;padding:3px 8px}
}

/* Mobile-first hero tightening and single primary action */
#hero .hero-btn-secondary { display: none !important; }
#hero .hero-product-hint { display: none !important; }
@media (max-width: 850px) {
  #hero { padding-top: 0 !important; }
  #hero .hero-stage { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #hero .hero-copy { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: clamp(10px, 3vw, 18px) !important; gap: 7px !important; justify-content: flex-start !important; text-align: center !important; }
  #hero .hero-title-main, #hero .hero-accent { font-size: clamp(38px, 10.8vw, 58px) !important; line-height: .98 !important; letter-spacing: -.045em !important; text-shadow: 0 2px 18px rgba(4, 55, 28, .15); }
  #hero .hero-accent::before { content: " "; white-space: pre; }
  #hero .hero-sub { max-width: 34ch; margin: 0 auto; }
  #hero .hero-badges { justify-content: center; gap: 6px; }
  #hero .hero-actions { display: flex !important; width: 100% !important; max-width: 460px; margin: 6px auto 0 !important; }
  #hero .hero-btn-primary { width: 100% !important; min-height: 60px !important; justify-content: center !important; font-size: 18px !important; }
}
@media (max-width: 560px) {
  #hero .hero-stage { border-radius: inherit; }
  #hero .hero-copy { padding: 9px 12px 14px !important; gap: 6px !important; }
  #hero .hero-eyebrow { margin-bottom: 0 !important; }
  #hero .hero-title-main, #hero .hero-accent { font-size: clamp(36px, 10.6vw, 48px) !important; }
  #hero .hero-btn-primary { min-height: 58px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #hero *, #hero *::before, #hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Critical first screen is visible before JavaScript or font loading. */
#hero .hero-stage:after{opacity:1!important;transform:none!important;animation:none!important;will-change:auto!important}
#hero .hero-copy,#hero .hero-badge{opacity:1!important;transform:none!important;animation:none!important}
@media (max-width:760px){#hero .hero-stage:after{background-image:url("/static/v1.0.38/assets/cp-hero-bg-v1.0.38-mobile.webp")}}
