/* style.css — Diabestiv, premium redesign pass.
   Design tokens updated: Emerald / Matte Gold / Warm Cream / White cards.
   Typography: Cormorant Garamond (display) + Manrope (body) + Noto Sans Devanagari (Hindi) + IBM Plex Mono (data/utility).
   All existing IDs, data-attributes and JS-hook classes preserved for js/*.js compatibility. */

:root{
  /* ---- Emerald / Matte Gold / Warm Cream palette ---- */
  --green-deep:#173327;      /* deep emerald — was #1F3D2B */
  --green-mid:#2C6349;       /* was #2E5238 */
  --green-soft:#4C8A68;      /* was #3E6B49 */
  --gold:#A9812E;            /* matte gold — was #C1962F (brighter/shinier) */
  --gold-light:#C9A25A;      /* matte, less shiny — was #E7C878 */
  --gold-pale:#EFE3C4;       /* was #F3E3B8 */
  --cream:#FBF6EC;           /* warm cream — was #F8F3E8 */
  --cream-2:#F1E7D2;         /* was #EFE4CB */
  --clay:#6B4226;
  --jamun:#452140;
  --jamun-soft:#6B3B62;
  --ink:#201D18;
  --white:#FFFFFF;           /* pure white cards — was #FFFDF8 */
  --line:rgba(23,51,39,0.12);

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-dev:'Noto Sans Devanagari', sans-serif;

  --container: 1180px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 4px 16px -6px rgba(23,51,39,0.10);
  --shadow-mid: 0 20px 44px -22px rgba(23,51,39,0.24);
  --shadow-lift: 0 28px 60px -20px rgba(23,51,39,0.30);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}

.hidden{display:none !important;}
[hidden]{display:none !important;}

/* Scroll-reveal (progressive enhancement — content is visible by default,
   JS below only adds the "in" class; if JS fails, nothing is hidden) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

/* Placeholder box for images not yet supplied (assets/images/*) */
.img-placeholder{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(155deg, rgba(201,162,90,0.30), rgba(23,51,39,0.12));
  border:1px dashed rgba(169,129,46,0.5);
  color:var(--clay);
  font-family:var(--font-mono);
  font-size:11px;
  text-align:center;
  overflow:hidden;
}
.img-placeholder span{
  background:rgba(23,51,39,0.72); color:var(--cream);
  padding:6px 10px; margin:10px; border-radius:8px;
}

/* Generic "data to confirm" placeholder — used for stats/testimonials/quotes
   that must not ship with invented numbers. Visually distinct + labeled. */
.data-placeholder{
  border:1px dashed rgba(169,129,46,0.55);
  background:rgba(201,162,90,0.08);
  border-radius:var(--radius-sm);
  position:relative;
}
.data-placeholder .dp-tag{
  display:inline-block; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--clay); background:var(--gold-pale); padding:3px 8px; border-radius:100px;
  margin-bottom:8px;
}

.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; color:var(--green-deep); letter-spacing:-0.005em;}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12px;
  color:var(--clay);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--gold);display:inline-block;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  border-radius:100px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.01em;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:focus-visible{outline:3px solid var(--jamun-soft); outline-offset:3px;}
/* Ripple: a soft radial pulse on click, CSS-only via :active */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 60%);
  opacity:0; transform:scale(0.4); transition:opacity .5s ease, transform .5s ease;
}
.btn:active::after{opacity:1; transform:scale(1.6); transition:opacity 0s, transform 0s;}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:var(--white);
  box-shadow:0 10px 24px -6px rgba(169,129,46,0.45);
  animation:pulse-cta 3.2s ease-in-out infinite;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(169,129,46,0.55); animation-play-state:paused;}
@keyframes pulse-cta{
  0%,100%{box-shadow:0 10px 24px -6px rgba(169,129,46,0.45);}
  50%{box-shadow:0 10px 30px -4px rgba(169,129,46,0.65);}
}
@media (prefers-reduced-motion: reduce){ .btn-gold{animation:none;} }
.btn-outline{
  background:transparent;
  border-color:rgba(23,51,39,0.35);
  color:var(--green-deep);
}
.btn-outline:hover{background:rgba(23,51,39,0.06);}
.btn-whatsapp{
  background:var(--green-deep);
  color:var(--cream);
}
.btn-whatsapp:hover{background:var(--green-mid); transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px; font-size:13px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,246,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-mark{
  width:56px;height:56px;border-radius:50%;
  background:var(--green-deep);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light); font-family:var(--font-display); font-weight:700; font-size:20px;
  border:1.5px solid var(--gold);
  overflow:hidden;
}
.brand-mark img{min-width:0; min-height:0;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--green-deep); line-height:1;}
.brand-sub{font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; color:var(--clay); text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:600;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--green-deep); margin:5px 0;}

/* Profile avatar */
.profile-menu{position:relative;}
.avatar-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold);
  background:var(--green-deep); color:var(--gold-light); font-family:var(--font-mono);
  font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.profile-dropdown{
  position:absolute; top:48px; right:0; background:var(--white); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lift); min-width:180px;
  padding:8px; display:none; z-index:50;
}
.profile-dropdown.open{display:block;}
.profile-dropdown a{
  display:block; padding:10px 12px; border-radius:8px; font-size:14px; text-decoration:none; color:var(--ink);
}
.profile-dropdown a:hover{background:var(--cream-2);}

/* Auth modal */
.auth-modal{
  position:fixed; inset:0; z-index:300; background:rgba(20,18,15,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.auth-modal[hidden]{display:none;}
.auth-modal-card{
  background:var(--white); border-radius:22px; padding:32px; width:100%; max-width:360px;
  max-height:90vh; overflow-y:auto; margin:auto;
  position:relative; box-shadow:var(--shadow-lift);
}
.auth-modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none; font-size:22px;
  line-height:1; cursor:pointer; color:var(--clay);
}
.auth-modal-card h3{margin-bottom:20px;}
.auth-field{display:block; margin-bottom:16px; font-size:13.5px; color:var(--ink);}
.auth-field[hidden]{display:none;}
.auth-field span{display:block; margin-bottom:6px; font-weight:700;}
.auth-field input{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:14px; background:var(--cream);
}
.auth-field input:focus{outline:2px solid var(--gold); border-color:var(--gold);}
.auth-error{
  background:rgba(69,33,64,0.08); color:var(--jamun); font-size:13px; padding:10px 12px;
  border-radius:10px; margin-bottom:14px;
}
.auth-error a{color:var(--jamun); text-decoration:underline; font-weight:600;}
.auth-info{
  background:rgba(44,99,73,0.1); color:var(--green-mid); font-size:13px; padding:10px 12px;
  border-radius:10px; margin-bottom:14px;
}
.auth-forgot-link{
  display:block; text-align:right; font-size:12.5px; color:var(--clay); text-decoration:underline;
  margin:-8px 0 16px;
}
.auth-toggle-mode{
  display:block; width:100%; text-align:center; background:none; border:none; margin-top:16px;
  color:var(--clay); font-size:13px; text-decoration:underline; cursor:pointer;
}

/* Order History / Order Tracking */
.auth-modal-card-wide{max-width:460px;}
.ingredients-modal-card{max-width:640px;}
.ingredients-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px;
}
.ingredient-cell{
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; gap:3px; overflow-wrap:break-word;
}
.ingredient-cell b{font-size:13px; color:var(--green-deep); line-height:1.3;}
.ing-latin{font-size:11px; font-style:italic; color:var(--clay); line-height:1.3;}
.ing-qty{font-family:var(--font-mono); font-size:11px; color:var(--jamun); margin-top:4px;}
.modal-status-text{font-size:13.5px; color:var(--clay); text-align:center; padding:20px 0;}
.order-item{
  border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.order-item-main{font-size:13.5px; color:var(--ink);}
.order-item-main b{display:block; font-family:var(--font-display); font-size:16px; margin-bottom:4px;}
.order-item-track{font-family:var(--font-mono); font-size:11px; color:var(--clay); margin-top:6px;}
.order-item-date{font-size:11.5px; color:#8a7d68; margin-top:2px;}
.order-status-badge{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
  padding:5px 10px; border-radius:100px; background:var(--green-deep); color:var(--gold-light); white-space:nowrap;
}
#order-tracking-result{margin-top:20px;}
.serviceability-result.ok{color:var(--green-mid);}
.serviceability-result.no{color:var(--jamun);}

/* Verified/unverified badge — used in the Profile modal (profile-pages.js).
   Previously only existed in admin.html's own scoped styles; needed here
   too since the Profile modal lives on the main site. */
.admin-badge{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
  padding:5px 10px; border-radius:100px; white-space:nowrap;
}
.admin-badge-initiated{background:rgba(107,66,38,0.12); color:var(--clay);}
.admin-badge-placed{background:var(--green-deep); color:var(--gold-light);}

/* ---------- Marquee ---------- */
.marquee-strip{
  background:var(--green-deep); color:var(--gold-pale);
  overflow:hidden; white-space:nowrap; padding:11px 0;
  border-bottom:1px solid rgba(201,162,90,0.25);
}
.marquee-track{display:inline-flex; animation:scroll 26s linear infinite;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-track span{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee-track span::after{content:"\2726"; color:var(--gold-light); font-size:10px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:76px 0 60px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(169,129,46,0.14), transparent 45%),
    radial-gradient(circle at 6% 90%, rgba(23,51,39,0.10), transparent 40%);
}
.hero-leaf-bg{position:absolute; top:-40px; right:-60px; width:340px; opacity:0.10; color:var(--green-deep); z-index:0; pointer-events:none;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
  position:relative; z-index:1;
}
.hero-dev{font-family:var(--font-dev); font-size:19px; font-weight:600; color:var(--jamun); margin-bottom:6px; display:block;}
.hero h1{font-size:58px; line-height:1.05; margin:14px 0 20px; font-weight:600;}
.hero h1 em{font-style:italic; font-weight:500; color:var(--clay);}
.hero p.lead{font-size:17.5px; color:#463c31; max-width:490px; margin-bottom:28px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px;}
.badge-row{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:26px;}
.badge-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--green-deep); font-weight:700;}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}

/* Social-proof strip (hero) — placeholders until real data is supplied */
.proof-row{display:flex; gap:14px; flex-wrap:wrap;}
.proof-chip{
  display:flex; align-items:center; gap:10px; background:var(--white); border:1px dashed rgba(169,129,46,0.5);
  border-radius:100px; padding:9px 16px 9px 12px; box-shadow:var(--shadow-soft);
}
.proof-chip .pc-icon{width:26px; height:26px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; color:var(--clay); flex-shrink:0;}
.proof-chip .pc-icon svg{width:14px; height:14px;}
.proof-chip .pc-text{font-size:12.5px; line-height:1.3;}
.proof-chip .pc-text b{display:block; font-family:var(--font-body); font-size:13px; color:var(--green-deep);}
.proof-chip .pc-text span{font-family:var(--font-mono); font-size:9.5px; color:var(--clay); text-transform:uppercase; letter-spacing:0.05em;}

.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; z-index:1;}
.hero-ring{
  position:absolute; width:420px; height:420px; border-radius:50%;
  border:1.5px dashed rgba(169,129,46,0.55);
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-ring.two{width:480px; height:480px; border-color:rgba(23,51,39,0.18); animation-duration:80s; animation-direction:reverse;}
.bottle-card{
  position:relative; z-index:2;
  background:var(--white);
  border-radius:28px;
  padding:30px 26px 22px;
  box-shadow:var(--shadow-lift);
  border:1px solid var(--line);
  width:280px;
  animation:float-bottle 5s ease-in-out infinite;
}
@keyframes float-bottle{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
@media (prefers-reduced-motion: reduce){ .bottle-card{animation:none;} }
.bottle-card img{border-radius:16px; width:100%;}
.price-flag{
  position:absolute; top:-14px; right:-14px; z-index:3;
  background:var(--jamun); color:var(--cream);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:9px 14px; border-radius:100px; box-shadow:0 8px 18px rgba(69,33,64,0.4);
  transform:rotate(6deg);
}
.floating-leaf{
  position:absolute; z-index:3; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:10px 14px; font-size:12px; font-weight:700; color:var(--green-deep);
  box-shadow:var(--shadow-mid); display:flex; align-items:center; gap:8px;
  animation:float-bottle 4.5s ease-in-out infinite;
}
.floating-leaf svg{width:16px; height:16px; color:var(--gold);}
.fl-1{top:8%; left:-6%; animation-delay:.3s;}
.fl-2{bottom:10%; right:-8%; animation-delay:1s;}

/* ---------- Section shells ---------- */
section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head.center{max-width:680px; margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:40px; margin-top:14px; line-height:1.12;}
.section-head p{color:#4f4536; font-size:16px; margin-top:14px;}
.band-cream2{background:var(--cream-2);}
.band-deep{background:var(--green-deep); color:var(--cream);}
.band-deep .eyebrow{color:var(--gold-light);}
.band-deep .eyebrow::before{background:var(--gold-light);}
.band-deep h2{color:var(--white);}
.band-deep .section-head p{color:rgba(251,246,236,0.78);}

.divider-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:0 auto; width:100%;}

/* ---------- Gradient-border premium card (reusable) ---------- */
.gcard{
  position:relative; border-radius:var(--radius-md); padding:1.5px;
  background:linear-gradient(155deg, rgba(201,162,90,0.55), rgba(23,51,39,0.10));
}
.gcard > .gcard-inner{
  background:var(--white); border-radius:calc(var(--radius-md) - 1.5px);
  height:100%; display:flex; flex-direction:column;
}

/* ---------- Why Choose Diabestiv (organ benefits) ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.why-card{
  padding:20px; text-align:left; transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:var(--shadow-soft);
}
.why-card .gcard-inner{padding:22px 20px;}
.why-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-mid);}
.organ-icon{width:28px; height:28px; color:var(--green-mid); margin-bottom:14px;}
.organ-icon-wrap{width:28px; height:28px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.organ-icon-wrap img{min-width:0; min-height:0;}
.organ-icon-wrap .organ-icon{margin-bottom:0;}
.why-card h4{font-family:var(--font-body); font-weight:700; font-size:15.5px; color:var(--green-deep); margin-bottom:6px;}
.why-card p{font-size:13px; color:#5b503f; margin:0; line-height:1.55;}

/* ---------- Science + Ayurveda ---------- */
.science-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.science-points{display:flex; flex-direction:column; gap:22px; margin-top:8px;}
.science-point{display:flex; gap:16px; align-items:flex-start;}
.science-point .sp-ico{
  width:44px; height:44px; border-radius:50%; background:var(--green-deep); color:var(--gold-light); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.science-point .sp-ico svg{width:20px; height:20px;}
.science-point h4{font-size:16.5px; font-family:var(--font-body); font-weight:700; color:var(--ink); margin-bottom:4px;}
.science-point p{margin:0; font-size:14px; color:#5b503f;}
.science-panel{
  background:var(--green-deep); border-radius:var(--radius-lg); padding:40px; color:var(--cream);
  box-shadow:var(--shadow-lift);
}
.science-panel .eyebrow{color:var(--gold-light);}
.science-panel .eyebrow::before{background:var(--gold-light);}
.science-panel h3{color:var(--white); font-size:24px; margin:12px 0 14px;}
.science-panel p{color:rgba(251,246,236,0.8); font-size:14.5px; margin-bottom:20px;}
.science-tag-row{display:flex; flex-wrap:wrap; gap:8px;}
.science-tag{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  background:rgba(251,246,236,0.1); color:var(--gold-light); padding:6px 12px; border-radius:100px;
  border:1px solid rgba(201,162,90,0.3);
}

/* ---------- Doctor ---------- */
.doctor-grid{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start;}
.doctor-photo{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,162,90,0.35);
  box-shadow:var(--shadow-mid);
}
.doctor-photo img{width:100%; height:100%; object-fit:cover;}
.doctor-photo-link{display:block; text-decoration:none;}
.doctor-name{font-size:32px; margin-top:0;}
.doctor-cred{font-family:var(--font-mono); font-size:12.5px; color:var(--clay); letter-spacing:0.05em; margin-top:6px; text-transform:uppercase;}
.doctor-quote{
  font-family:var(--font-display); font-style:italic; font-size:23px; line-height:1.5; color:var(--ink);
  margin:24px 0; padding-left:22px; border-left:3px solid var(--gold);
}
.cred-list{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; list-style:none; padding:0;}
.cred-list li{
  font-size:14px; padding:14px 16px; background:var(--white); border-radius:var(--radius-sm); border:1px solid var(--line);
  display:flex; gap:10px; align-items:flex-start; box-shadow:var(--shadow-soft);
}
.cred-list li .num{font-family:var(--font-mono); color:var(--gold); font-weight:600;}

/* Doctor's Perspective pull-quote (placeholder — replace with real interview excerpt) */
.perspective-card{margin-top:36px;}
.perspective-card .gcard-inner{padding:26px 28px; display:flex; gap:16px; align-items:flex-start;}
.perspective-card svg{width:28px; height:28px; color:var(--gold); flex-shrink:0;}
.perspective-card p{margin:0; font-size:14.5px; color:#4f4536; font-style:italic;}

/* ---------- Usage ---------- */
.usage-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.dose-visual{
  background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--line); padding:36px;
  box-shadow:var(--shadow-mid);
}
.dose-visual .cap{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--clay); text-align:center; margin-bottom:18px;}
.glass-row{display:flex; justify-content:center; gap:34px;}
.glass{
  width:70px; height:110px; border:2.5px solid var(--green-deep); border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  position:relative; overflow:hidden; background:rgba(23,51,39,0.04);
}
.glass .fill{position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg,var(--gold-light),var(--gold));}
.glass .mark{position:absolute; left:0; right:0; top:40%; height:1px; background:rgba(32,29,24,0.35);}
.glass-label{text-align:center; font-family:var(--font-mono); font-size:11.5px; margin-top:10px; color:var(--green-deep); font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;}
.glass-label svg{width:14px; height:14px; color:var(--gold);}
.glass-col{text-align:center;}
.steps{display:flex; flex-direction:column; gap:22px;}
.step{display:flex; gap:18px;}
.step-ico{
  width:46px; height:46px; border-radius:50%; background:var(--green-deep); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-mono); font-weight:600;
}
.step h4{font-size:17px; color:var(--ink); margin-bottom:4px; font-family:var(--font-body); font-weight:700;}
.step p{margin:0; font-size:14.5px; color:#514736;}

/* ---------- Ingredients ---------- */
.ing-hero-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:56px;}
.jar{
  background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line); padding:20px 16px;
  text-align:center; transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none; display:block; cursor:pointer; box-shadow:var(--shadow-soft);
}
.jar:hover{transform:translateY(-5px); box-shadow:var(--shadow-mid); border-color:rgba(201,162,90,0.5);}
.jar-icon{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%; font-size:24px;
  background:var(--cream-2); display:flex; align-items:center; justify-content:center;
}
.jar-name{font-weight:700; font-size:14.5px; color:var(--green-deep);}
.jar-latin{font-style:italic; font-size:11.5px; color:var(--clay); margin-top:2px;}
.jar-tag{font-family:var(--font-mono); font-size:10.5px; color:var(--jamun); margin-top:8px; text-transform:uppercase; letter-spacing:0.04em;}

.lab-table-card{
  background:var(--ink); border-radius:var(--radius-lg); padding:6px; overflow:hidden; box-shadow:var(--shadow-lift);
}
.lab-table-head{
  display:flex; justify-content:space-between; align-items:center; padding:20px 26px 10px;
  color:var(--cream);
}
.lab-table-head .eyebrow{color:var(--gold-light);}
.lab-table-head .eyebrow::before{background:var(--gold-light);}
table.lab{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13.5px;}
table.lab th{
  text-align:left; padding:12px 26px; color:rgba(251,246,236,0.55); font-weight:500; font-size:11px;
  text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid rgba(251,246,236,0.14);
}
table.lab td{padding:11px 26px; color:var(--cream); border-bottom:1px solid rgba(251,246,236,0.08);}
table.lab tr:last-child td{border-bottom:none;}
table.lab td.qty{color:var(--gold-light); text-align:right;}
table.lab td.latin{color:rgba(251,246,236,0.55); font-style:italic;}
.lab-foot{padding:16px 26px 22px; font-size:12px; color:rgba(251,246,236,0.5); font-family:var(--font-body);}

/* ---------- Sourcing trail (signature) ---------- */
.trail-wrap{position:relative; padding-top:20px;}
.trail-svg{position:absolute; top:60px; left:0; width:100%; height:calc(100% - 120px); z-index:0;}
.trail-nodes{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; z-index:1;}
.trail-node{display:flex; flex-direction:column; align-items:center; text-align:center;}
.trail-num{
  width:54px; height:54px; border-radius:50%; background:var(--cream);
  border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--green-deep);
  margin-bottom:16px;
}
.trail-node h4{font-size:14.5px; color:var(--white); font-family:var(--font-body); font-weight:700; margin-bottom:6px;}
.trail-node p{font-size:12.5px; color:rgba(251,246,236,0.68); margin:0; line-height:1.5;}

.photo-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; margin-top:56px; height:420px;}
.photo-ph{
  border-radius:var(--radius-md); position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  border:1px solid rgba(201,162,90,0.3);
}
.photo-ph:nth-child(1){grid-row:1/3;}
.photo-ph img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.photo-ph .ph-tag{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:11px; color:var(--cream); background:rgba(23,51,39,0.65);
  padding:8px 12px; margin:12px; border-radius:8px; backdrop-filter:blur(4px);
}

/* ---------- Before / After lifestyle (routine-based, no medical outcome claims) ---------- */
.lifestyle-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.lifestyle-card{border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-mid);}
.lifestyle-card.before{background:var(--cream-2); border:1px solid var(--line);}
.lifestyle-card.after{background:var(--green-deep); color:var(--cream);}
.lifestyle-card h4{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px;}
.lifestyle-card.before h4{color:var(--clay);}
.lifestyle-card.after h4{color:var(--gold-light);}
.lifestyle-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.lifestyle-list li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start;}
.lifestyle-list li svg{width:18px; height:18px; flex-shrink:0; margin-top:2px;}
.lifestyle-card.before svg{color:#a08a63;}
.lifestyle-card.after svg{color:var(--gold-light);}

/* ---------- Customer Journey (testimonials — placeholders, mark clearly) ---------- */
.journey-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.journey-card{padding:26px; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .2s ease;}
.journey-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-mid);}
.journey-card .gcard-inner{padding:26px;}
.journey-stars{display:flex; gap:3px; margin-bottom:14px; color:var(--gold);}
.journey-stars svg{width:15px; height:15px;}
.journey-card p{font-size:14px; color:#4f4536; font-style:italic; margin:0 0 18px;}
.journey-who{display:flex; align-items:center; gap:10px;}
.journey-avatar{width:38px; height:38px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--green-deep);}
.journey-who b{display:block; font-size:13.5px; color:var(--green-deep);}
.journey-who span{font-family:var(--font-mono); font-size:10.5px; color:var(--clay); text-transform:uppercase; letter-spacing:0.04em;}

/* ---------- Certificates ---------- */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cert-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 20px; text-align:center;
  text-decoration:none; display:block; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .2s ease;
}
.cert-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-mid);}
.cert-icon{width:50px;height:50px;margin:0 auto 14px; color:var(--gold);}
.cert-card h4{font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--green-deep); margin-bottom:6px;}
.cert-card p{font-size:12.5px; color:var(--clay); margin:0; font-family:var(--font-mono);}

/* ---------- Lab reports ---------- */
.report-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.report-card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; display:flex; flex-direction:column; gap:14px;
}
.report-top{display:flex; justify-content:space-between; align-items:flex-start;}
.report-icon{width:38px;height:38px; color:var(--jamun);}
.report-status{font-family:var(--font-mono); font-size:10.5px; background:var(--green-deep); color:var(--gold-light); padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:0.05em;}
.report-card h4{font-size:16px; font-family:var(--font-body); font-weight:700; color:var(--ink);}
.report-card p{font-size:13px; color:#5b503f; margin:0; flex-grow:1;}

/* ---------- Pricing ---------- */
.variant-tabs{display:flex; gap:12px; margin-bottom:40px;}
.vtab{
  flex:1; padding:20px 24px; border-radius:var(--radius-md); border:1.5px solid var(--line); background:var(--white);
  cursor:pointer; text-align:left; position:relative;
}
.vtab.active{border-color:var(--gold); background:linear-gradient(180deg, var(--white), var(--gold-pale) 220%); box-shadow:0 10px 24px -12px rgba(169,129,46,0.4);}
.vtab.locked{cursor:not-allowed; opacity:0.62;}
.vtab .vt-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.vtab h4{font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--green-deep);}
.vtab .vt-price{font-family:var(--font-mono); font-size:13px; color:var(--clay);}
.lock-tag{font-family:var(--font-mono); font-size:10px; background:var(--clay); color:var(--white); padding:3px 9px; border-radius:100px; text-transform:uppercase;}

.urgency-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--jamun); color:var(--cream); border-radius:var(--radius-md); padding:18px 28px; margin-bottom:44px;
}
.urgency-left{display:flex; align-items:center; gap:14px;}
.urgency-left .dot{width:9px;height:9px;border-radius:50%; background:#ff8b6b; box-shadow:0 0 0 4px rgba(255,139,107,0.25);}
.countdown{display:flex; gap:10px; font-family:var(--font-mono);}
.countdown .cd-box{background:rgba(255,255,255,0.12); border-radius:10px; padding:8px 12px; text-align:center; min-width:52px;}
.countdown .cd-box b{display:block; font-size:19px;}
.countdown .cd-box span{font-size:9px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.75;}

.stock-line{margin-bottom:48px;}
.stock-line .sl-top{display:flex; justify-content:space-between; font-size:13px; font-family:var(--font-mono); color:var(--clay); margin-bottom:8px;}
.stock-track{height:8px; background:var(--cream-2); border-radius:100px; overflow:hidden;}
.stock-fill{height:100%; width:45%; background:linear-gradient(90deg,var(--gold),var(--jamun)); border-radius:100px;}

.pack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pack-card{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px; position:relative;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:var(--shadow-soft);
}
.pack-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-mid);}
.pack-card.featured{border-color:var(--gold); background:linear-gradient(165deg, var(--white), var(--gold-pale) 260%);}
.pack-flag{
  position:absolute; top:-13px; left:22px; background:var(--green-deep); color:var(--gold-light);
  font-family:var(--font-mono); font-size:10.5px; padding:6px 14px; border-radius:100px; text-transform:uppercase; letter-spacing:0.05em;
}
.pack-days{font-family:var(--font-mono); font-size:12px; color:var(--clay); text-transform:uppercase; letter-spacing:0.06em;}
.pack-bottles{font-family:var(--font-display); font-size:27px; color:var(--ink); margin:8px 0 2px;}
.pack-sub{font-size:12.5px; color:#6b6050; margin-bottom:18px;}
.pack-prices{display:flex; align-items:baseline; gap:10px; margin-bottom:6px;}
.pack-mrp{font-family:var(--font-mono); font-size:14px; color:#9c8f78; text-decoration:line-through;}
.pack-sp{font-family:var(--font-display); font-size:31px; color:var(--green-deep); font-weight:700;}
.pack-save{font-family:var(--font-mono); font-size:12px; color:var(--jamun); margin-bottom:20px;}
.pack-select{margin-top:auto;}
.radio-fake{
  width:20px;height:20px;border-radius:50%; border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; margin-right:8px;
}
.pack-card.selected{border-color:var(--jamun); box-shadow:0 0 0 3px rgba(69,33,64,0.12);}
.pack-card.selected .radio-fake{border-color:var(--jamun); background:var(--jamun);}
.pack-card.selected .radio-fake::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--cream);}
.pack-pick-btn{
  width:100%; padding:12px; border-radius:12px; border:1.5px solid var(--line); background:var(--cream);
  font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pack-card.selected .pack-pick-btn{background:var(--jamun); color:var(--cream); border-color:var(--jamun);}

/* Conversion / assurance strip near checkout — wording is generic; CONFIRM exact policy terms before launch */
.assure-row{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0;}
.assure-item{
  display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--green-deep);
  background:var(--white); border:1px solid var(--line); border-radius:100px; padding:9px 16px; box-shadow:var(--shadow-soft);
}
.assure-item svg{width:16px; height:16px; color:var(--gold);}

.checkout-panel{
  margin-top:36px; background:var(--green-deep); border-radius:var(--radius-lg); padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--cream);
  box-shadow:var(--shadow-lift);
}
.checkout-info b{font-family:var(--font-display); font-size:21px; display:block; margin-bottom:4px;}
.checkout-info span{font-size:13px; color:rgba(251,246,236,0.7);}

/* ---------- Testimony strip ---------- */
.quote-band{padding:70px 0; text-align:center;}
.quote-band blockquote{
  font-family:var(--font-display); font-style:italic; font-size:27px; color:var(--green-deep); max-width:760px; margin:0 auto 16px;
}
.quote-band cite{font-family:var(--font-mono); font-size:12.5px; color:var(--clay); font-style:normal; text-transform:uppercase; letter-spacing:0.08em;}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft);
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--green-deep);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-family:var(--font-display); font-size:24px; color:var(--gold); flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-body{padding:0 24px 22px; font-size:14px; color:#4f4536; line-height:1.7;}

/* ---------- Shipping / Refund policy ---------- */
.policy-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.policy-card{padding:30px; box-shadow:var(--shadow-soft);}
.policy-card .gcard-inner{padding:30px;}
.policy-card svg{width:30px; height:30px; color:var(--green-mid); margin-bottom:14px;}
.policy-card h4{font-size:19px; margin-bottom:10px;}
.policy-card p{font-size:14px; color:#4f4536; margin:0 0 10px;}
.policy-card ul{margin:0; padding-left:18px; font-size:13.5px; color:#4f4536; line-height:1.8;}
.policy-note{
  margin-top:20px; font-family:var(--font-mono); font-size:11px; color:var(--clay); background:var(--gold-pale);
  padding:8px 14px; border-radius:10px; display:inline-block;
}

/* ---------- Contact strip ---------- */
.contact-band{background:var(--green-deep); color:var(--cream);}
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.contact-card{
  background:rgba(251,246,236,0.06); border:1px solid rgba(201,162,90,0.25); border-radius:var(--radius-md);
  padding:26px; text-align:center;
}
.contact-card svg{width:30px; height:30px; color:var(--gold-light); margin:0 auto 14px;}
.contact-card h4{color:var(--white); font-size:16px; margin-bottom:8px; font-family:var(--font-body); font-weight:700;}
.contact-card p, .contact-card a{color:rgba(251,246,236,0.78); font-size:13.5px; text-decoration:none;}
.contact-card a:hover{color:var(--gold-light);}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:rgba(251,246,236,0.72); padding:64px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px;}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
footer h5{color:var(--gold-light); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px;}
footer p, footer li{font-size:13.5px; line-height:1.8;}
footer ul{list-style:none; padding:0; margin:0;}
footer a{text-decoration:none; color:inherit;}
footer a:hover{color:var(--gold-light);}
.footer-bottom{border-top:1px solid rgba(251,246,236,0.12); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(251,246,236,0.5);}
.footer-bottom .legal-links{display:flex; gap:16px;}
.disclaimer{font-size:11.5px; color:rgba(251,246,236,0.45); max-width:900px; margin-top:14px; line-height:1.7;}

/* Standalone legal pages (privacy-policy.html, terms-of-use.html) */
.policy-page{padding:70px 0 100px;}
.policy-page .section-head{max-width:700px; margin-bottom:40px;}
.policy-content{max-width:760px; color:#5b503f; font-size:15px; line-height:1.75;}
.policy-content h2{font-size:19px; color:var(--green-deep); margin:34px 0 12px; font-family:var(--font-display); font-weight:600;}
.policy-content h2:first-of-type{margin-top:8px;}
.policy-content p{margin:0 0 16px;}
.policy-content ul{margin:0 0 16px; padding-left:22px;}
.policy-content li{margin-bottom:8px;}
.policy-content a{color:var(--green-deep); text-decoration:underline;}
.policy-content strong{color:var(--ink);}

/* Newsletter — form has no backend wired; hook up your email service before launch */
.footer-newsletter{display:flex; gap:8px; margin-top:4px;}
.footer-newsletter input{
  flex:1; min-width:0; padding:11px 14px; border-radius:10px; border:1px solid rgba(251,246,236,0.2);
  background:rgba(251,246,236,0.06); color:var(--cream); font-family:var(--font-body); font-size:13px;
}
.footer-newsletter input::placeholder{color:rgba(251,246,236,0.4);}
.footer-newsletter button{
  padding:11px 16px; border-radius:10px; border:none; background:var(--gold); color:var(--white);
  font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0;
}

/* Social icon row */
.social-row{display:flex; gap:10px; margin-top:14px;}
.social-link{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(248,243,232,0.25);
  display:flex; align-items:center; justify-content:center;
  color:rgba(248,243,232,0.85); transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.social-link:hover{background:rgba(248,243,232,0.12); color:var(--gold-light); border-color:var(--gold-light);}
.social-link svg{width:16px; height:16px;}
.social-icon{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(251,246,236,0.25);
  display:flex; align-items:center; justify-content:center;
}
.social-icon svg{width:16px; height:16px;}
.social-icon-disabled{opacity:0.4; cursor:not-allowed;}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--white);
  border-top:1px solid var(--line); padding:12px 18px; display:none; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 -8px 24px rgba(23,51,39,0.14);
}
.mobile-cta .mc-price b{display:block; font-family:var(--font-display); font-size:19px; color:var(--green-deep);}
.mobile-cta .mc-price span{font-size:11px; color:var(--clay); font-family:var(--font-mono);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero h1{font-size:42px;}
  .doctor-grid{grid-template-columns:1fr;}
  .usage-wrap{grid-template-columns:1fr;}
  .ing-hero-grid{grid-template-columns:repeat(2,1fr);}
  .trail-nodes{grid-template-columns:repeat(3,1fr); row-gap:36px;}
  .trail-svg{display:none;}
  .photo-grid{grid-template-columns:1fr 1fr; height:auto;}
  .photo-ph{height:180px;}
  .photo-ph:nth-child(1){grid-row:auto; grid-column:1/3; height:220px;}
  .cert-grid{grid-template-columns:repeat(2,1fr);}
  .report-grid{grid-template-columns:1fr;}
  .pack-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  .nav-links{display:none;}
  .menu-toggle{display:block;}
  .mobile-cta{display:flex;}
  body{padding-bottom:78px;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .science-grid{grid-template-columns:1fr; gap:32px;}
  .lifestyle-grid{grid-template-columns:1fr;}
  .journey-grid{grid-template-columns:1fr;}
  .policy-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hero h1{font-size:34px;}
  .wrap{padding:0 20px;}
  section{padding:64px 0;}
  .trail-nodes{grid-template-columns:1fr 1fr;}
  .cert-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  table.lab{font-size:11.5px;}
  table.lab th, table.lab td{padding:9px 14px;}
  .checkout-panel{flex-direction:column; align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
}