/* =============================================================
   Healthy Lifestyle BD — design tokens, reset, typography, atoms
   ============================================================= */

:root {
  /* Brand — leaf greens */
  --green-900:#12361D; --green-800:#1A4A27; --green-700:#1E5C2C;
  --green-600:#2F7A3E; --green-500:#3E9450; --green-400:#6BB273;
  --green-200:#BFDCC4; --green-100:#E3F0E5; --green-50:#F1F8F2;

  /* Accent — honey / amber */
  --honey-700:#B8791E; --honey-600:#D98E1F; --honey-500:#F2A93B;
  --honey-300:#F8CC85; --honey-100:#FDF0D8;

  /* Earth + neutrals */
  --cream:#FBF8F1; --cream-2:#F5EFE2; --sand:#EFE7D6;
  --ink:#15251B; --ink-2:#2C3E32; --muted:#6B7A6F; --muted-2:#94A399;
  --line:#E4E9E1; --line-2:#D4DCD2;
  --white:#FFFFFF;

  --danger:#D94A2B; --danger-bg:#FDECE7;
  --warn:#B58900;   --warn-bg:#FDF6E0;
  --info:#3E7C8C;   --info-bg:#E8F3F5;
  --ok:#2F7A3E;     --ok-bg:#E7F3E9;

  /* Semantic */
  --brand:var(--green-600);
  --brand-dark:var(--green-700);
  --accent:var(--honey-500);
  --bg:var(--cream);
  --surface:var(--white);
  --text:var(--ink);

  /* Type */
  --font-display:"Fraunces","Georgia",serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-bn:"Hind Siliguri","Noto Sans Bengali",var(--font-body);
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  /* Space + shape */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(21,37,27,.06);
  --shadow-sm:0 2px 8px rgba(21,37,27,.06), 0 1px 2px rgba(21,37,27,.04);
  --shadow:0 8px 24px rgba(21,37,27,.08), 0 2px 6px rgba(21,37,27,.04);
  --shadow-lg:0 20px 48px rgba(21,37,27,.12), 0 4px 12px rgba(21,37,27,.06);
  --shadow-brand:0 12px 28px rgba(47,122,62,.22);

  --container:1240px;
  /* The header carries brand + 7 nav links + search + 5 actions, which needs
     more room than the reading-width content grid. It gets its own track. */
  --header-max:1600px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lang-bn{font-family:var(--font-bn)}
body.lang-bn h1,body.lang-bn h2,body.lang-bn h3{font-family:var(--font-bn)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
:focus-visible{outline:3px solid var(--green-400);outline-offset:2px;border-radius:4px}
::selection{background:var(--honey-300);color:var(--ink)}

/* ---------- icons ----------
   One flat shape, no outline, inheriting colour from its container. The
   nudge on vertical-align sits a glyph on the text baseline when it is
   used inline; flex/grid parents ignore it. */
.svg-ico{display:inline-block;flex:none;vertical-align:-.16em}
.ico-tile{
  display:grid;place-items:center;flex:none;border-radius:14px;
  width:46px;height:46px;background:var(--green-50);color:var(--green-700);
}
.feature-ico{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:18px;background:var(--green-50);color:var(--green-700);
}
.empty-ico{display:grid;place-items:center;color:var(--green-200);margin-bottom:12px}
.verified{display:inline-flex;align-items:center;gap:4px;color:var(--green-600)}
.badge-on-dark{background:rgba(255,255,255,.16);color:#fff}
.stat-star{color:var(--honey-500);margin-left:2px;vertical-align:-.06em}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);font-weight:600;line-height:1.14;
  margin:0 0 .5em;color:var(--ink);letter-spacing:-.015em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
h1{font-size:clamp(1.75rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
h4{font-size:1.15rem}
/* Long product names and Bengali compounds must fold rather than push the
   layout sideways on a narrow phone. */
h1,h2,h3,h4,h5{overflow-wrap:break-word}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
small{font-size:.85em}
.lead{font-size:1.12rem;color:var(--muted);line-height:1.7}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow.center::after{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}

.serif{font-family:var(--font-display)}
.text-muted{color:var(--muted)}
.text-brand{color:var(--brand)}
.text-accent{color:var(--honey-700)}
.text-danger{color:var(--danger)}
.text-center{text-align:center}
.text-right{text-align:right}
.uppercase{text-transform:uppercase;letter-spacing:.08em}

/* underline flourish for section headings */
.title-flourish{position:relative;display:inline-block}
.title-flourish::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C40 1 60 7 100 4s60-4 98 1' fill='none' stroke='%23F2A93B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.container-narrow{max-width:860px}
.container-wide{max-width:1440px}
.section{padding:clamp(48px,7vw,88px) 0}
.section-sm{padding:clamp(32px,4vw,52px) 0}
.section-head{margin-bottom:38px}
.section-head.center{text-align:center;max-width:660px;margin-inline:auto}
.section-head p{color:var(--muted);font-size:1.05rem;margin:0}
.section-head .row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.grid{display:grid;gap:22px}
.grid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.wrap{flex-wrap:wrap}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.w-full{width:100%}
.hidden{display:none !important}

.bg-cream{background:var(--cream)}
.bg-white{background:var(--white)}
.bg-mint{background:var(--green-50)}
.bg-sand{background:var(--cream-2)}
.bg-dark{background:var(--green-900);color:#E9F1EA}
.bg-dark h2,.bg-dark h3{color:#fff}
.bg-dark p{color:#B9CDBE}

/* organic grain overlay for hero sections */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-pill);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s,border-color .18s;
  white-space:nowrap;text-align:center;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-brand)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn.is-disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-primary{--btn-bg:var(--brand)}
.btn-primary:hover{--btn-bg:var(--green-700)}
.btn-accent{--btn-bg:var(--honey-500);--btn-fg:#3D2708}
.btn-accent:hover{--btn-bg:var(--honey-600);box-shadow:0 12px 28px rgba(217,142,31,.3)}
.btn-dark{--btn-bg:var(--green-900)}
.btn-danger{--btn-bg:var(--danger)}
.btn-white{--btn-bg:#fff;--btn-fg:var(--green-700)}
.btn-outline{--btn-bg:transparent;--btn-fg:var(--brand);--btn-bd:var(--green-200)}
.btn-outline:hover{--btn-bg:var(--green-50);--btn-bd:var(--brand);box-shadow:none}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent}
.btn-ghost:hover{--btn-bg:var(--green-50);box-shadow:none}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.btn-xl{padding:19px 40px;font-size:1.12rem}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-block{display:flex;width:100%}
.btn-icon{padding:0;width:42px;height:42px;border-radius:50%}

/* pulsing CTA for funnels */
.btn-pulse{animation:btnPulse 2.4s infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,.55)}
  50%{box-shadow:0 0 0 16px rgba(242,169,59,0)}
}

/* ---------- badges & pills ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--green-100);color:var(--green-700);
}
.badge-accent{background:var(--honey-100);color:var(--honey-700)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-dark{background:var(--green-900);color:#fff}
.badge-outline{background:transparent;border:1px solid var(--line-2);color:var(--muted)}

.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);
  font-size:.85rem;font-weight:600;color:var(--ink-2);
  transition:all .18s var(--ease);
}
.chip:hover{border-color:var(--green-400);color:var(--green-700);background:var(--green-50)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}

.status-pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:700;
  background:color-mix(in srgb,var(--pill) 12%,transparent);
  color:var(--pill);border:1px solid color-mix(in srgb,var(--pill) 26%,transparent);
}

/* ---------- stars ----------
   A half star is the same glyph twice: the filled copy is clipped down
   the middle and sits on top of the empty one. */
.stars{display:inline-flex;gap:2px;color:var(--line-2);--star:16px}
.stars i{display:inline-grid;line-height:0}
.stars i svg{grid-area:1/1;width:var(--star);height:var(--star)}
.stars i.on{color:var(--honey-500)}
.stars i.half svg:last-child{color:var(--honey-500);clip-path:inset(0 50% 0 0)}
.stars.lg{--star:22px}
.stars.sm{--star:13px}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label,.label{
  display:block;font-size:.85rem;font-weight:700;color:var(--ink-2);
  margin-bottom:7px;letter-spacing:.01em;
}
.label .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);color:var(--ink);font-size:.98rem;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100);
}
.input.is-error,.select.is-error,.textarea.is-error{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-bg)}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B7A6F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field-error{color:var(--danger);font-size:.82rem;margin-top:6px;display:flex;gap:5px;align-items:center}
.field-hint{color:var(--muted);font-size:.82rem;margin-top:6px}

.input-group{display:flex;gap:10px}
.input-group .input{flex:1}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.92rem;line-height:1.5}
.check input{
  appearance:none;width:20px;height:20px;flex:none;margin-top:2px;
  border:1.5px solid var(--line-2);border-radius:6px;background:#fff;
  cursor:pointer;transition:all .16s;position:relative;
}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg);
}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]:checked::after{
  left:4px;top:4px;width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none;
}

/* ---------- alerts ---------- */
.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;border-radius:var(--r);margin-bottom:18px;
  font-size:.93rem;border:1px solid transparent;line-height:1.55;
}
.alert-icon{flex:none;font-size:1.1rem;line-height:1.4}
.alert-success{background:var(--ok-bg);color:#1B5E2A;border-color:#BFE0C6}
.alert-error{background:var(--danger-bg);color:#9E3319;border-color:#F5CDC1}
.alert-warning{background:var(--warn-bg);color:#7A5C00;border-color:#EFDDA6}
.alert-info{background:var(--info-bg);color:#2A5C68;border-color:#C3DFE5}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{padding:24px}
.card-hover{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-200)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.table{width:100%;font-size:.92rem;min-width:600px}
.table th{
  text-align:left;padding:14px 16px;background:var(--green-50);
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--green-50)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- utilities ---------- */
.divider-leaf{display:flex;align-items:center;gap:14px;color:var(--green-400);margin:34px 0}
.divider-leaf::before,.divider-leaf::after{content:"";flex:1;height:1px;background:var(--line)}

.skeleton{background:linear-gradient(90deg,var(--line) 25%,#EFF3EE 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.spinner{
  width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link — hidden until it takes focus, which is the whole point of it.
   A permanently invisible skip link helps nobody. */
.skip-link{
  position:absolute;top:-100px;left:14px;z-index:9999;
  padding:12px 20px;border-radius:0 0 var(--r) var(--r);
  background:var(--brand);color:#fff;font-weight:700;font-size:.92rem;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].revealed{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- responsive helpers ---------- */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .hide-md{display:none !important}
}
@media (max-width:560px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hide-sm{display:none !important}
  .btn-xl{padding:16px 26px;font-size:1rem}
  .section{padding:40px 0}
}
/* Small phones (360px and under). The gutter is the first thing to give. */
@media (max-width:400px){
  .container{padding-inline:14px}
  .card-pad{padding:18px}
  .btn{padding:12px 18px}
  .btn-lg{padding:14px 22px;font-size:1rem}
  .btn-sm{padding:8px 12px;font-size:.8rem}
  .table{min-width:480px}
}

/* An inline form must be allowed to collapse: a text input carries an
   intrinsic min-width of about 20 characters, which is what pushes flex rows
   past the viewport on a narrow phone. */
.input,.select,.textarea{min-width:0;max-width:100%}
input,select,textarea{max-width:100%}