*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#063306;font-family:'Hind Siliguri',system-ui,sans-serif;color:#1f2937;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.page{max-width:440px;margin:0 auto;background:#fff;min-height:100vh;padding-bottom:84px;overflow:hidden}
section{padding:34px 22px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.green{color:#0d4309}
.lead{color:#474747;font-size:17px;margin:12px 0 0}

/* হিরো */
.hero{padding-top:26px;padding-bottom:0}
.logo{width:110px;height:110px;border-radius:50%;margin:0 auto 8px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hero-title{margin:6px 0 0;font-size:44px;line-height:1.15;font-weight:700;color:#c8102e}
.hero-sub{margin:4px 0 0;font-size:30px;line-height:1.25;font-weight:700;color:#000}
.bolt{width:200px;height:20px;margin:6px auto 0;display:block}
.bolt.sm{width:150px}
.pills{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:16px;background:#ececec;border-radius:8px;padding:6px 12px;font-size:20px;font-weight:600;color:#111}
.plus{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font-size:15px;line-height:1}
.price-badge{position:relative;width:170px;margin:26px auto -40px;z-index:2}
.pb-old{width:118px;height:70px;margin:0 auto -12px;background:#FFC20E;border-radius:60px 60px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;font-size:20px;font-weight:600;color:#7a5a00}
.pb-new{background:#0f6b14;color:#fff;font-size:46px;font-weight:700;line-height:1;padding:12px 10px 8px;border-radius:6px;box-shadow:0 8px 20px rgba(15,107,20,.35);position:relative}
.pb-new small{font-size:22px;vertical-align:top;margin-left:2px}
.pb-save{width:130px;margin:0 auto;background:#FFC20E;color:#111;font-weight:700;font-size:16px;padding:6px 0 4px;border-radius:0 0 8px 8px}
.hero-img{position:relative;margin:0 -22px;padding:70px 18px 34px;background:linear-gradient(180deg,#fff 0%,#e9f7df 22%,#cdeab9 100%)}
.hero-img img{border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.18);margin-bottom:22px}

.btn-yellow{display:inline-block;background:#FFC20E;color:#111;font-weight:700;font-size:21px;text-decoration:none;padding:12px 28px 9px;border-radius:999px;box-shadow:0 6px 16px rgba(255,194,14,.45);transition:transform .15s}
.btn-yellow:hover,.btn-yellow:focus-visible{transform:translateY(-2px)}
.btn-yellow.sm{font-size:17px;padding:10px 20px 7px}

/* স্ট্রাইপ ব্যাকগ্রাউন্ড */
.stripes-green{background:repeating-linear-gradient(90deg,#eafbe3 0 22px,#e2f7d9 22px 23px)}
.stripes-cream{background:repeating-linear-gradient(90deg,#fffbea 0 22px,#fbf4d8 22px 23px)}

.story .q1{margin:0;font-size:28px;font-weight:600;color:#000}
.story .q2{margin:0;font-size:30px;font-weight:700;color:#0d4309;line-height:1.3}
.framed{border-radius:16px;margin:24px 0;border:6px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.h-mid{margin:0;font-size:24px;font-weight:700;color:#000;line-height:1.35}

.process{background:#fff}
.steps{display:grid;gap:14px;margin:20px 0 24px;text-align:left}
.step{display:flex;gap:12px;align-items:center;background:#f7faf5;border:1px solid #e3eedd;border-radius:14px;padding:10px}
.step img{width:92px;height:92px;object-fit:cover;border-radius:10px;flex:none}
.step b{display:block;font-size:18px;color:#0d4309}
.step span{font-size:15px;color:#4b5563;line-height:1.45;display:block}
.video-wrap{margin:0 0 24px;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18);background:#000}
.video-wrap video{width:100%;display:block;aspect-ratio:9/16;max-height:620px}

.combo .c1{margin:0;font-size:24px;font-weight:600;color:#000}
.combo .c2{margin:0;font-size:30px;font-weight:700;color:#0f6b14;line-height:1.3}
.combo .c3{margin:4px 0 0;font-size:20px;font-weight:500;color:#333}
.poster{border-radius:14px;margin-top:22px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.dash{width:80%;height:60px;margin:0 auto}
.combo-box{display:inline-block;background:#fff;border:1.5px solid #e5e7eb;border-right:3px solid #0f6b14;border-bottom:3px solid #0f6b14;border-radius:12px;padding:10px 22px 8px}
.cb-top{font-size:19px;font-weight:700;border-bottom:1px solid #e5e7eb;padding-bottom:6px}
.cb-price{font-size:24px;font-weight:600;color:#333}
.cb-price s{color:#9ca3af;font-size:20px}
.cb-price b{color:#0f6b14;font-size:34px}

.icon-circle{width:44px;height:44px;border-radius:50%;background:#cfe9c4;display:grid;place-items:center;margin:0 auto 8px}
.icon-circle.grey{background:#c4c4c4}
.r1{margin:0;color:#4b5563;font-size:17px}
.r2{margin:0 0 18px;font-size:28px;color:#0f6b14}
.slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -22px;padding-left:22px;padding-right:22px}
.review{flex:0 0 86%;scroll-snap-align:center;margin:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;text-align:left}
.review img{width:100%}
.review figcaption{padding:12px 14px}
.review b{display:block;font-size:17px}
.review small{color:#6b7280}
.review p{margin:6px 0 0;font-size:15px;color:#374151}

/* অর্ডার */
.order{text-align:left}
.order .icon-circle{margin-bottom:6px}
.h-order{text-align:center;margin:0;font-size:30px;color:#374151}
.order-note{text-align:center;margin:8px auto 22px;background:#FFE58A;display:table;padding:2px 12px;border-radius:6px;font-size:15px}
.alert{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:10px 14px;border-radius:10px;margin-bottom:14px}
.hp{position:absolute;left:-9999px}
fieldset{border:0;margin:0;padding:0}
.products{display:grid;gap:18px}
.pcard{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid #d1d5db;border-radius:10px;padding:16px 12px 12px;cursor:pointer;background:#fff}
.pcard.has-badge{margin-top:6px}
.pcard:has(input:checked){border:2px solid #0f6b14;background:#f6fbf3}
.pcard input{width:20px;height:20px;accent-color:#0f6b14;flex:none}
.pcard img{width:58px;height:58px;object-fit:cover;border-radius:8px;flex:none}
.pbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#FFC20E;color:#111;font-size:13px;font-weight:700;padding:2px 12px;border-radius:999px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.pinfo b{display:block;font-size:17px;line-height:1.3}
.pinfo small{display:block;color:#6b7280;font-size:13px}
.pprice{display:flex;gap:6px;align-items:center;margin-top:4px}
.pprice s{color:#9ca3af;font-size:14px}
.pprice em{font-style:normal;background:#0f6b14;color:#fff;font-weight:700;font-size:15px;padding:1px 8px;border-radius:5px}
.qty-row{display:flex;justify-content:space-between;align-items:center;margin:18px 0 4px;font-weight:600;font-size:17px}
.qty{display:flex;border:1.5px solid #d1d5db;border-radius:10px;overflow:hidden}
.qty button{width:44px;height:44px;border:0;background:#f3f4f6;font-size:22px;cursor:pointer}
.qty input{width:52px;border:0;text-align:center;font:inherit;font-size:18px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.form-h{font-size:24px;margin:22px 0 12px;font-weight:600;color:#111}
.field{display:block;margin-bottom:14px}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;padding:13px 14px;background:#fff8e6;border:2px solid #f6d68a;border-radius:10px;outline:none;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#e0a800;background:#fff}
.field input::placeholder,.field textarea::placeholder{color:#4b5563}
.delivery{background:#f8f9fb;border:1px solid #eceef2;border-radius:12px;padding:18px 16px;margin:8px 0 18px}
.delivery h3{margin:0 0 14px;font-size:21px;display:flex;gap:10px;align-items:center}
.dz{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dcard{border:1.5px solid #d1d5db;border-radius:10px;background:#fff;text-align:center;padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px}
.dcard input{position:absolute;opacity:0}
.dcard b{font-size:15px}
.dcard span{background:#f1f2f4;color:#4b5563;font-weight:700;font-size:15px;padding:6px 14px;border-radius:6px}
.dcard:has(input:checked){border:2px solid #0f6b14}
.dcard:has(input:checked) span{background:#0f6b14;color:#fff}
.dcard:has(input:focus-visible){outline:3px solid #FFC20E}
.summary{width:100%;border-collapse:collapse;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;font-size:16px;margin-bottom:18px}
.summary th,.summary td{padding:13px 16px;border-bottom:1px solid #eef0f2;text-align:left}
.summary th:last-child,.summary td:last-child{text-align:right;white-space:nowrap}
.summary th{font-weight:500;color:#4b5563}
.summary .tot td{font-weight:700;font-size:18px;border-bottom:0}
.xq{background:#0f6b14;color:#fff;font-weight:700;font-size:13px;padding:1px 7px;border-radius:5px;white-space:nowrap}
.pay{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:20px}
.pay-h{padding:14px 14px;font-weight:600;border-bottom:1px solid #eee}
.pay p{margin:0;background:#f8f8f8;padding:12px 18px;color:#4b5563;font-size:15px}
.btn-submit{width:100%;border:0;background:#16a34a;color:#fff;font:inherit;font-size:20px;font-weight:700;padding:14px 10px 11px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(22,163,74,.35)}
.btn-submit:disabled{opacity:.7;cursor:wait}

.foot{background:#0b2410;color:#e5efe6;text-align:center;padding:28px 22px 34px}
.foot p{margin:0 0 12px}
.call{display:inline-block;background:#FFC20E;color:#111;text-decoration:none;font-weight:700;padding:9px 22px 6px;border-radius:999px;margin-bottom:14px}
.social{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.social a{color:#bbf7d0}
.foot small{color:#9fb5a3}

.sticky{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:calc(100% - 24px);max-width:416px;background:#000;color:#fff;border-radius:22px;padding:10px 12px 10px 18px;display:flex;justify-content:space-between;align-items:center;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s,opacity .25s}
.sticky small{display:block;font-size:13px;line-height:1}
.sticky b{font-size:22px;line-height:1.2}
.sticky.hide{opacity:0;pointer-events:none;transform:translate(-50%,120%)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ================= অ্যানিমেশন ================= */
/* ১. হেডলাইন: শব্দগুলো একে একে লাফিয়ে আসে, তারপর হালকা ঝিলিক */
.hero-title .w{display:inline-block;opacity:0;transform:translateY(28px) scale(.6);background:linear-gradient(100deg,#c8102e 0%,#c8102e 38%,#ff7a45 50%,#c8102e 62%,#c8102e 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:6px 2px 2px;margin-top:-6px;animation:wordPop .7s cubic-bezier(.2,1.4,.4,1) forwards, shine 3.5s linear infinite;animation-delay:calc(.15s + var(--i)*.18s), calc(1.6s + var(--i)*.25s)}
@keyframes wordPop{to{opacity:1;transform:none}}

@keyframes shine{from{background-position:100% 0}to{background-position:-100% 0}}
.hero-sub{opacity:0;animation:fadeUp .6s ease-out .75s forwards}
.hero .bolt path{stroke-dasharray:260;stroke-dashoffset:260;animation:draw .8s ease-out 1.1s forwards}
.pills{opacity:0;animation:fadeUp .6s ease-out 1.3s forwards}
.hero .lead{opacity:0;animation:fadeUp .6s ease-out 1.5s forwards}
.price-badge{opacity:0;animation:badgeIn .7s cubic-bezier(.2,1.5,.4,1) 1.7s forwards}
.pb-new{animation:pricePulse 2.4s ease-in-out 2.6s infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes badgeIn{from{opacity:0;transform:scale(.5) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes pricePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ২. অর্ডার বাটন: চারপাশে ঢেউ + মাঝে মাঝে নড়ে ওঠে */
.btn-yellow,.btn-submit{position:relative;animation:btnShake 3s ease-in-out 2s infinite}
.btn-yellow::after,.btn-submit::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,194,14,.7);animation:ring 1.8s ease-out infinite;pointer-events:none}
.btn-submit::after{box-shadow:0 0 0 0 rgba(22,163,74,.6)}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,194,14,.7)}100%{box-shadow:0 0 0 16px rgba(255,194,14,0)}}
.btn-submit::after{animation-name:ringG}
@keyframes ringG{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}100%{box-shadow:0 0 0 16px rgba(22,163,74,0)}}
@keyframes btnShake{0%,82%,100%{transform:none}85%{transform:rotate(-3deg) scale(1.05)}88%{transform:rotate(3deg) scale(1.05)}91%{transform:rotate(-2deg) scale(1.03)}94%{transform:rotate(2deg)}}
.btn-yellow:hover,.btn-yellow:focus-visible{animation-play-state:paused}
.sticky .btn-yellow::after{animation-duration:1.5s}

/* ৩. ডেলিভারি চার্জ: রাস্তায় গাড়ি চলছে */
.truck-road{position:relative;display:inline-block;width:110px;height:30px;overflow:hidden;border-bottom:2px dashed #d1d5db;vertical-align:middle}
.truck{position:absolute;bottom:1px;left:0;animation:drive 3.2s linear infinite}
.truck path{animation:bump .35s ease-in-out infinite alternate}
@keyframes drive{0%{transform:translateX(-36px)}100%{transform:translateX(116px)}}
@keyframes bump{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}

/* ৪. স্ক্রল করলে লেখা আর ছবি ধীরে ভেসে ওঠে */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .hero-title .w{-webkit-text-fill-color:#c8102e}
  .hero-title .w,.hero-sub,.pills,.hero .lead,.price-badge{opacity:1;transform:none}
  .hero .bolt path{stroke-dashoffset:0}
  .js .reveal{opacity:1;transform:none}
  .truck{left:40px}
}

/* ৫. দামের বক্সের চারপাশে ঘুরন্ত আলো */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.combo-box{position:relative;border:3px solid transparent;border-radius:14px;
  background:linear-gradient(#fff,#fff) padding-box,
             conic-gradient(from var(--spin),#0f6b14 0deg,#16a34a 60deg,#FFC20E 110deg,#ff7a45 140deg,#16a34a 190deg,#e5e7eb 250deg,#e5e7eb 320deg,#0f6b14 360deg) border-box;
  animation:spinBorder 2.6s linear infinite;box-shadow:0 8px 22px rgba(15,107,20,.15)}
@keyframes spinBorder{to{--spin:360deg}}