/* MealHive download page */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: #1C1B22; background: #F3F3F6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html[lang="bn"] body { font-family: var(--font-bangla); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -.02em; line-height: 1.08; }
p { margin: 0; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.l-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.l-nav { position: sticky; top: 0; z-index: 30; background: rgba(243,243,246,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.l-nav__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.l-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.l-logo svg { width: 38px; height: 38px; }
.l-links { display: flex; gap: 22px; font-weight: 600; color: #4A4953; margin-left: 12px; }
.l-links a:hover { color: #1C1B22; }
.l-nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.l-lang { display: inline-flex; padding: 3px; border-radius: 12px; background: #E6E6EB; }
.l-lang button { height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #737280; }
.l-lang button.is-on { background: #fff; color: #1C1B22; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
@media (max-width: 760px) { .l-links { display: none; } .l-nav__right .l-btn { display: none; } }

.l-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: 15px; font-weight: 700; white-space: nowrap; transition: transform .12s, box-shadow .2s; }
.l-btn:active { transform: scale(.97); }
.l-btn--lg { height: 58px; padding: 0 24px; border-radius: 18px; font-size: 17px; }
.l-btn--honey { background: #FFC62E; color: #1C1B22; box-shadow: 0 14px 30px -14px rgba(224,161,0,.8); }
.l-btn--ink { background: #1C1B22; color: #fff; }
.l-btn--white { background: #fff; color: #1C1B22; }
.l-btn small { font-size: 12.5px; font-weight: 600; opacity: .7; }
.l-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #8A5A00; }
.l-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; }
html[lang="bn"] .l-eyebrow { text-transform: none; letter-spacing: 0; font-size: 14px; }
.l-eyebrow--dark { color: #FFC62E; }
.l-lead { font-size: 19px; color: #4A4953; max-width: 560px; }

.l-hero { padding: 40px 0 70px; }
.l-hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; }
.l-hero h1 { font-size: clamp(40px, 5.6vw, 68px); font-weight: 800; margin: 16px 0 18px; }
.l-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.l-proof { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 22px; color: #4A4953; font-weight: 600; font-size: 14.5px; }
.l-proof span { display: inline-flex; gap: 6px; align-items: center; }
.l-hero__visual { position: relative; display: grid; place-items: center; min-height: 640px; }
.l-hero__visual::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: #FFC62E; opacity: .9; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.l-phone { position: relative; width: 300px; height: 620px; border-radius: 46px; background: #1C1B22; padding: 11px; box-shadow: 0 40px 80px -30px rgba(28,27,34,.55), inset 0 0 0 2px #3A3945; }
.l-phone__screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #F3F3F6; position: relative; }
.l-phone__screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 776px; border: 0; transform: scale(.7128); transform-origin: 0 0; }
.l-qr { position: absolute; left: -10px; bottom: 34px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: #fff; border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(28,27,34,.35); }
.l-qr__code { width: 86px; height: 86px; }
.l-qr__code svg { width: 100%; height: 100%; }
.l-qr b { display: block; font-size: 15px; }
.l-qr span { font-size: 13px; color: #737280; }
.l-float { position: absolute; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 20px 40px -18px rgba(28,27,34,.35); display: grid; line-height: 1.2; }
.l-float span { font-size: 12px; color: #737280; font-weight: 600; }
.l-float b { font-family: var(--font-display); font-size: 22px; }
.l-float em { font-style: normal; font-size: 12px; font-weight: 700; color: #0E8F5B; display: inline-flex; gap: 3px; align-items: center; }
.l-float--rate { right: 0; top: 70px; }
.l-float--bal { right: 26px; bottom: 150px; }
.due { color: #D93A3A; }
@media (max-width: 960px) {
  .l-hero__inner { grid-template-columns: 1fr; }
  .l-hero__visual { min-height: 580px; }
  .l-hero__visual::before { width: 420px; height: 420px; }
  .l-qr { left: 0; }
}
@media (max-width: 480px) {
  .l-hero__visual { min-height: 540px; }
  .l-phone { width: 262px; height: 540px; }
  .l-phone__screen iframe { transform: scale(.6154); }
  .l-float--rate { right: -6px; }
  .l-qr { display: none; }
  .l-cta .l-btn { width: 100%; }
}

.l-strip { background: #1C1B22; color: #fff; }
.l-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 26px; padding-bottom: 26px; }
.l-strip b { display: block; font-family: var(--font-display); font-size: 26px; color: #FFC62E; }
.l-strip span { color: rgba(255,255,255,.65); font-size: 14px; }
@media (max-width: 760px) { .l-strip__inner { grid-template-columns: repeat(2, 1fr); } }

.l-section { padding: 90px 0; }
.l-section--ink { background: #16151C; color: #fff; }
.l-section--ink .l-lead { color: rgba(255,255,255,.7); }
.l-section--soft { background: #fff; }
.l-head { max-width: 720px; margin-bottom: 40px; }
.l-head h2, .l-maths h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; margin-top: 12px; }
.l-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l-feature { background: #fff; border-radius: 26px; padding: 26px; }
.l-feature__icon { width: 52px; height: 52px; border-radius: 17px; background: #FFF1C6; color: #8A5A00; display: grid; place-items: center; margin-bottom: 18px; }
.l-feature__icon .icon { width: 24px; height: 24px; }
.l-feature h3 { font-size: 21px; margin-bottom: 8px; }
.l-feature p { color: #5A5966; }
@media (max-width: 900px) { .l-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .l-features { grid-template-columns: 1fr; } }

.l-maths { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.l-maths .l-lead { margin-top: 18px; }
.l-sum { background: #FFC62E; color: #1C1B22; border-radius: 30px; padding: 26px 28px; box-shadow: 0 30px 60px -30px rgba(255,198,46,.5); }
.l-sum__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 17px; }
.l-sum__row b { font-family: var(--font-display); font-size: 20px; text-align: right; }
.l-sum__row--rate { border-top: 2px dashed rgba(28,27,34,.25); margin-top: 6px; padding-top: 14px; }
.l-sum__row--rate b { font-size: 34px; }
.l-sum__divider { height: 12px; }
.l-sum__row--credit { background: #1C1B22; color: #fff; border-radius: 16px; padding: 12px 16px; margin-top: 8px; }
.l-sum__row--credit b { color: #5FE0A6; font-size: 26px; }
@media (max-width: 860px) { .l-maths { grid-template-columns: 1fr; } }

.l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l-step { background: #fff; border-radius: 26px; padding: 26px; position: relative; }
.l-step__n { width: 46px; height: 50px; display: grid; place-items: center; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); background: #1C1B22; color: #FFC62E; font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-bottom: 16px; }
.l-step h3 { font-size: 22px; margin-bottom: 8px; }
.l-step p { color: #5A5966; }
@media (max-width: 800px) { .l-steps { grid-template-columns: 1fr; } }

.l-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.l-qa { border-bottom: 1px solid #E6E6EB; padding: 18px 0; }
.l-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 18px; }
.l-qa summary::-webkit-details-marker { display: none; }
.l-qa summary .icon { transition: transform .2s; }
.l-qa[open] summary .icon { transform: rotate(45deg); }
.l-qa p { color: #5A5966; margin-top: 10px; }
@media (max-width: 800px) { .l-faq { grid-template-columns: 1fr; } }

.l-band { background: #FFC62E; border-radius: 36px; padding: 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.l-band h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.l-band p { margin-top: 8px; font-size: 18px; color: #3B3A44; }
.l-band .l-cta { margin-top: 0; }

.l-foot { padding: 40px 0 50px; }
.l-foot__inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.l-foot p { color: #737280; margin-top: 10px; }
.l-foot__links { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; color: #4A4953; }
.l-credit { width: 100%; font-size: 13px; }