/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .nav-links{display:none}
  .nav-burger{display:block}

  .brand-mark{
    width: 112px;
    height: 92px;
    transform: translateY(2px) !important;
  }

  .two-col{grid-template-columns: 1fr}
  .pack-grid{grid-template-columns: 1fr}
  .plan-grid{grid-template-columns: 1fr}
  .recipe-grid{grid-template-columns: 1fr}
  .testimonial-grid{grid-template-columns: 1fr}
  .promise-grid{grid-template-columns: 1fr}
  .story{grid-template-columns: 1fr}
  .delivery-grid{grid-template-columns: 1fr}
  .community{grid-template-columns: 1fr}

  .footer .footer-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .footer-cols{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    transition-duration: 0.001ms !important;
  }
  /* Stop ONLY the marquee + other continuous loops */
  .hero-trust-track{
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   FLOATING WHATSAPP CTA (bottom-right)
   HTML: <button class="wa-float" data-wa-float aria-label="WhatsApp"></button>
   or   <a class="wa-float" href="#" data-wa-float aria-label="WhatsApp"></a>
   ========================================================= */

.wa-float{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  width: 60px;
  height: 60px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);

  box-shadow:
    0 18px 55px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.55);

  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transform: translateZ(0);
}

.wa-float:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 70px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.wa-float:active{
  transform: translateY(0) scale(.98);
}

.wa-float img,
.wa-float svg{
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(15,23,42,.18));
}

/* Pulse / ring animation */
.wa-float::before,
.wa-float::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
}

.wa-float::before{
  border: 2px solid rgba(27,138,88,.30);
}

.wa-float::after{
  inset:-2px;
  box-shadow: 0 0 0 6px rgba(27,138,88,.12);
}

@media (prefers-reduced-motion: no-preference){
  .wa-float{ animation: waBreathe 6.5s ease-in-out infinite; }
  .wa-float::before{ animation: waRing 6.5s ease-in-out infinite; }
  .wa-float::after{ animation: waGlow 6.5s ease-in-out infinite; }
}

@keyframes waBreathe{
  0%, 70%, 100%{ transform: translateY(0) scale(1); }
  78%{ transform: translateY(-1px) scale(1.02); }
  86%{ transform: translateY(0) scale(1); }
}

@keyframes waRing{
  0%, 72%, 100%{ opacity: 0; transform: scale(0.96); }
  80%{ opacity: .85; transform: scale(1.06); }
  90%{ opacity: 0; transform: scale(1.12); }
}

@keyframes waGlow{
  0%, 72%, 100%{ opacity: 0; }
  82%{ opacity: .9; }
  92%{ opacity: 0; }
}

/* Mobile safe sizing */
@media (max-width: 640px){
  .wa-float{
    right: 14px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
  }
  .wa-float img,
  .wa-float svg{
    width: 26px;
    height: 26px;
  }
}
.wa-float,
.whatsapp-float-icon{
  pointer-events: auto !important;
  cursor: pointer;
}
/* =========================
   FOOTER LEGAL LINKS (centered)
   ========================= */

.footer-bottom .footer-bottom-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* center legal links horizontally */
.footer-legal{
  margin: 0 auto;                 /* ✅ centers in the marked zone */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 6px 10px;

  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.footer-legal a{
  display:inline-flex;
  margin:0 !important;
  opacity:.92;
  font-weight: 800;
  font-size: 13px;
  color: rgba(216,239,228,.92);
  text-decoration: none !important;
  transition: opacity .15s ease, transform .15s ease;
}

.footer-legal a:hover{
  opacity: 1;
  transform: translateY(-1px);
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.footer-legal .dot-sep{
  color: rgba(216,239,228,.55);
  font-weight: 900;
}

/* Mobile: stack cleanly (copyright + legal) */
@media (max-width: 720px){
  .footer-bottom .footer-bottom-inner{
    justify-content:center;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .footer-legal{
    margin: 0;
  }
}
/* =========================
   COMMUNITY SOCIAL BUTTON ICONS
   ========================= */

.btn-social{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* icon sizing */
.btn-social .btn-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  filter: saturate(1.1);
}

/* Instagram icon (white on green) */
.btn-primary .btn-icon{
  filter: brightness(1.15);
}

/* WhatsApp button accent */
.btn-ghost.btn-social{
  border-color: rgba(37,211,102,.35);
}

.btn-ghost.btn-social:hover{
  box-shadow: 0 14px 30px rgba(37,211,102,.18);
}

/* Mobile: full-width + centered icons */
@media (max-width: 640px){
  .community-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .community-actions .btn{
    width:100%;
    justify-content:center;
  }
}
/* Fix footer icons getting affected by .footer a { display:block; margin } */
.footer-social-icons a{
  display: inline-grid !important;
  margin: 0 !important;
  width: 38px;
  height: 38px;
}
.footer-social-icons img{
  max-width: 18px;
  max-height: 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.footer-social-icons a:hover{
  transform: translateY(-2px) !important;   /* keep your icon hover */
  text-decoration: none !important;
}
.btn-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.btn-ghost .btn-icon{
  fill: rgba(15,23,42,.85);
}
/* =========================
   Sprout FX: fade near footer + recolor by theme + parallax vars
   ========================= */


/* base */
.bg-sprout{
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: -1;

  /* controlled by theme + footer fade */
  opacity: calc(var(--sprout-opacity) * var(--sprout-fade));
  filter: var(--sprout-filter);

  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* LEFT — rotated +90° */
.bg-sprout--left{
  left: -120px;
  top: 40%;
  width: clamp(260px, 26vw, 420px);
  transform: rotate(90deg) translateY(var(--sprout-parallax-y));
  opacity: calc(0.09 * var(--sprout-fade));
}

/* RIGHT — rotated -90° */
.bg-sprout--right{
  right: -120px;
  top: 45%;
  width: clamp(260px, 26vw, 420px);
  transform: rotate(-90deg) translateY(calc(var(--sprout-parallax-y) * -1));
  opacity: calc(0.11 * var(--sprout-fade));
}

/* Mobile */
@media (max-width: 768px){
  .bg-sprout--left{
    left: -160px;
    width: 240px;
    opacity: calc(0.05 * var(--sprout-fade));
  }
  .bg-sprout--right{
    right: -160px;
    width: 240px;
    opacity: calc(0.06 * var(--sprout-fade));
  }
}

/* Theme: DEFAULT (light sections) */
body[data-sprout-theme="light"]{
  --sprout-filter: saturate(1.05) contrast(1.02);
  --sprout-opacity: 0.11;
}

/* Theme: NEUTRAL (soft-neutral sections) */
body[data-sprout-theme="neutral"]{
  --sprout-filter: saturate(1.02) contrast(1.02) brightness(0.98);
  --sprout-opacity: 0.09;
}

/* Theme: DARK (footer) */
body[data-sprout-theme="dark"]{
  /* make it visible but not loud on dark */
  --sprout-filter: saturate(1.06) contrast(1.04) brightness(1.18);
  --sprout-opacity: 0.08;
}

/* Reduced motion: kill parallax */
@media (prefers-reduced-motion: reduce){
  :root{ --sprout-parallax-y: 0px; }
  .bg-sprout{ transition: none !important; }
}
/* =========================
   DARK MODE THEME
   ========================= */

body[data-theme="dark"]{
  --bg: #070d0a;
  --text: #e6f3ec;
  --muted: #9fb8ad;
  --line: rgba(255,255,255,.10);

  --green: #1fa56f;
  --green2: #39d98a;

  --glass: rgba(10,18,14,.55);
  --glass-border: rgba(255,255,255,.12);

  --paper-1: rgba(255,255,255,.04);
  --paper-2: rgba(39,217,138,.06);
  --paper-3: rgba(255,255,255,.03);

  --shadow: 0 22px 60px rgba(0,0,0,.45);
  --shadow2: 0 14px 40px rgba(0,0,0,.35);
}

/* Dark mode image softening */
body[data-theme="dark"] img{
  filter: brightness(.95) contrast(1.02);
}

/* Cards in dark */
body[data-theme="dark"] .card,
body[data-theme="dark"] .pack-card,
body[data-theme="dark"] .plan{
  background: rgba(12,20,16,.85);
  border-color: rgba(255,255,255,.12);
}

/* Section soft background tweak */
body[data-theme="dark"] .section-soft,
body[data-theme="dark"] .section-soft-neutral{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(39,217,138,.08), transparent 60%),
    rgba(255,255,255,.02);
}
/* =========================
   THEME TOGGLE BUTTON
   ========================= */

.theme-toggle{
  margin-left: 8px;
  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
  cursor: pointer;

  transition: transform .15s ease, background .2s ease;
}

.theme-toggle:hover{
  transform: translateY(-1px);
}

.theme-icon{
  position: absolute;
  font-size: 18px;
  transition: opacity .2s ease, transform .2s ease;
}

.theme-icon.sun{ opacity: 1; }
.theme-icon.moon{ opacity: 0; }

/* When dark */
body[data-theme="dark"] .theme-icon.sun{
  opacity: 0;
  transform: rotate(-90deg) scale(.8);
}
body[data-theme="dark"] .theme-icon.moon{
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Dark background button */
body[data-theme="dark"] .theme-toggle{
  background: rgba(20,30,24,.65);
  border-color: rgba(255,255,255,.16);
}
/* =========================
   DARK MODE VISIBILITY PATCH
   ========================= */

body[data-theme="dark"]{
  color: var(--text);
}

/* Generic text */
body[data-theme="dark"] .muted,
body[data-theme="dark"] .tiny{
  color: var(--muted) !important;
}

/* Section headings + normal paragraphs */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] p,
body[data-theme="dark"] li,
body[data-theme="dark"] summary,
body[data-theme="dark"] .quote{
  color: var(--text) !important;
}

/* NAV links (you hard-coded rgba(15,23,42,...) there) */
body[data-theme="dark"] .nav-links a{
  color: rgba(230,243,236,.86) !important;
}
body[data-theme="dark"] .nav-links a:hover{
  color: rgba(230,243,236,.98) !important;
}

/* Dropdown menu */
body[data-theme="dark"] .nav-more-menu{
  background: rgba(10,18,14,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body[data-theme="dark"] .nav-more-menu a{
  color: rgba(230,243,236,.88) !important;
}
body[data-theme="dark"] .nav-more-menu a:hover{
  background: rgba(39,217,138,.12) !important;
}

/* HERO text */
body[data-theme="dark"] .pill{
  color: rgba(230,243,236,.88) !important;
  background: rgba(39,217,138,.14) !important;
  border-color: rgba(39,217,138,.22) !important;
}
/* HERO text */
body[data-theme="dark"] .harvest-indicator{
  color: rgba(230,243,236,.88) !important;
  background: rgba(39,217,138,.14) !important;
  border-color: rgba(39,217,138,.22) !important;
}
body[data-theme="dark"] .lead{
  color: rgba(230,243,236,.78) !important;
}
body[data-theme="dark"] .accent{
  color: rgba(230,243,236,.98) !important;
}
body[data-theme="dark"] .accent-2{
  color: var(--green2) !important;
}

/* Cards + inner text that uses hardcoded rgba */
body[data-theme="dark"] .trust-title,
body[data-theme="dark"] .step-title,
body[data-theme="dark"] .recipe-title,
body[data-theme="dark"] .plan-title{
  color: rgba(230,243,236,.96) !important;
}
body[data-theme="dark"] .trust-sub,
body[data-theme="dark"] .plan-meta{
  color: rgba(230,243,236,.70) !important;
}

/* Chips / tags */
body[data-theme="dark"] .tag,
body[data-theme="dark"] .story-points span,
body[data-theme="dark"] .delivery-areas__label{
  color: rgba(230,243,236,.88) !important;
  background: rgba(39,217,138,.12) !important;
  border-color: rgba(39,217,138,.18) !important;
}

/* Inputs */
body[data-theme="dark"] .input{
  color: rgba(230,243,236,.92) !important;
  background: rgba(12,20,16,.86) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body[data-theme="dark"] .input::placeholder{
  color: rgba(230,243,236,.55) !important;
}

/* FAQ */
body[data-theme="dark"] .faq-list details{
  background: rgba(12,20,16,.88) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Buttons (ghost button text can go dark otherwise) */
body[data-theme="dark"] .btn-ghost{
  color: rgba(230,243,236,.88) !important;
  background: rgba(12,20,16,.70) !important;
  border-color: rgba(255,255,255,.16) !important;
}
/* =========================
   DARK MODE — RECIPE MODAL FIX
   ========================= */

body[data-theme="dark"] .recipe-modal-content{
  background: rgba(10,18,14,.96);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  color: var(--text);
}

/* Modal title + subtitle */
body[data-theme="dark"] .recipe-modal-content h3,
body[data-theme="dark"] .recipe-modal-content p{
  color: rgba(230,243,236,.92) !important;
}

/* Recipe steps */
body[data-theme="dark"] .recipe-step{
  background: rgba(20,32,26,.92) !important;
  border-color: rgba(39,217,138,.22) !important;
  color: rgba(230,243,236,.94) !important;
}

/* Step numbers (if any) */
body[data-theme="dark"] .recipe-step strong{
  color: #39d98a !important;
}

/* Close button */
body[data-theme="dark"] .recipe-close{
  background: rgba(20,30,24,.85);
  color: rgba(230,243,236,.95);
  border-color: rgba(255,255,255,.18);
}
/* =========================
   THEME TOGGLE (SVG)
   ========================= */

.theme-toggle{
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
}

.theme-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.theme-toggle:active{ transform: translateY(0) scale(.98); }

/* SVG sizing + color */
.theme-ico{
  position: absolute;
  width: 20px;
  height: 20px;
  color: rgba(15,23,42,.82);
  transition: opacity .2s ease, transform .2s ease;
  will-change: opacity, transform;
}

/* default: show sun */
.theme-ico--sun{ opacity: 1; transform: rotate(0deg) scale(1); }
.theme-ico--moon{ opacity: 0; transform: rotate(90deg) scale(.85); }

/* dark mode: show moon */
body[data-theme="dark"] .theme-ico{
  color: rgba(230,243,236,.92);
}
body[data-theme="dark"] .theme-toggle{
  background: rgba(20,30,24,.65);
  border-color: rgba(255,255,255,.16);
}
body[data-theme="dark"] .theme-ico--sun{
  opacity: 0;
  transform: rotate(-90deg) scale(.85);
}
body[data-theme="dark"] .theme-ico--moon{
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* =========================
   DARK MODE — HERO OVERLAY FIX
   ========================= */

body[data-theme="dark"] .hero::before{
  filter: brightness(.55) contrast(1.08);
}

body[data-theme="dark"] .hero-overlay{
  background:
    radial-gradient(
      900px 560px at 18% 34%,
      rgba(0,0,0,.55),
      rgba(0,0,0,.65) 60%,
      rgba(0,0,0,.75) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,.30) 65%,
      rgba(0,0,0,.15) 85%
    );
}
body[data-theme="dark"] .hero h1{
  color: #eafff5 !important;
  text-shadow: 0 16px 38px rgba(0,0,0,.55);
}

body[data-theme="dark"] .lead{
  color: rgba(230,243,236,.86) !important;
}
body[data-theme="dark"] .pill{
  background: rgba(39,217,138,.18) !important;
  border-color: rgba(39,217,138,.35) !important;
  color: #eafff5 !important;
}
body[data-theme="dark"] .theme-toggle{
  background: rgba(10,16,13,.85) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
body[data-theme="dark"] .theme-toggle:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}
body[data-theme="dark"] .trust-card{
  background: rgba(12,22,18,.88) !important;
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .trust-title{
  color: #eafff5 !important;
}
body[data-theme="dark"] .trust-sub{
  color: rgba(230,243,236,.72) !important;
}
/* =========================================================
   DARK MODE — PER-SECTION TUNING (packs / recipes / footer)
   Paste at END of styles.css
   ========================================================= */

/* ---------- GLOBAL POLISH (dark mode only) ---------- */
body[data-theme="dark"]{
  color: var(--text);
}

/* Keep section headers readable */
body[data-theme="dark"] .section-head h2{
  color: rgba(234,255,245,.96) !important;
}
body[data-theme="dark"] .section-head p{
  color: rgba(230,243,236,.74) !important;
}

/* Make soft sections feel like dark glass panels */
body[data-theme="dark"] .section-soft,
body[data-theme="dark"] .section-soft-neutral{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------- PACKS SECTION ---------- */
body[data-theme="dark"] #packs.section-soft{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(39,217,138,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 70%, rgba(255,255,255,.03), transparent 65%),
    rgba(255,255,255,.015) !important;
}

/* Pack card: darker + better text contrast */
body[data-theme="dark"] .pack-card{
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
}

/* Keep pack image visible but darker */
body[data-theme="dark"] .pack-bg{
  filter: brightness(.62) contrast(1.08) saturate(1.08) !important;
}

/* Pack overlay gradient must be dark (your current one is light) */
body[data-theme="dark"] .pack-content{
  background: linear-gradient(
    90deg,
    rgba(6,12,9,.92) 0%,
    rgba(6,12,9,.78) 46%,
    rgba(6,12,9,.35) 72%,
    rgba(6,12,9,0) 100%
  ) !important;
}

/* Pack text */
body[data-theme="dark"] .pack-content h3{
  color: rgba(234,255,245,.96) !important;
}
body[data-theme="dark"] .pack-content .muted{
  color: rgba(230,243,236,.72) !important;
}
body[data-theme="dark"] .pack-content .muted.tiny{
  color: rgba(230,243,236,.80) !important;
}

/* Tag */
body[data-theme="dark"] .tag{
  background: rgba(39,217,138,.14) !important;
  border-color: rgba(39,217,138,.24) !important;
  color: rgba(234,255,245,.90) !important;
}

/* Bullets */
body[data-theme="dark"] .bullets{
  color: rgba(234,255,245,.88) !important;
}
body[data-theme="dark"] .bullets b{
  color: rgba(57,217,138,.95) !important; /* makes Benefit/Best with pop */
}

/* Limited badge: keep warm but not neon */
body[data-theme="dark"] .pack-badge.limited{
  filter: saturate(1.05) brightness(.98);
}

/* Pack CTA button (ghost) */
body[data-theme="dark"] .pack-card .btn-ghost{
  background: rgba(12,20,16,.78) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(234,255,245,.88) !important;
}
body[data-theme="dark"] .pack-card .btn-ghost:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.55) !important;
}

/* Mobile pack overlay (since your CSS switches to vertical gradient) */
@media (max-width: 980px){
  body[data-theme="dark"] .pack-content{
    background: linear-gradient(
      180deg,
      rgba(6,12,9,.86) 0%,
      rgba(6,12,9,.64) 44%,
      rgba(6,12,9,.22) 74%,
      rgba(6,12,9,0) 100%
    ) !important;
  }
}

/* ---------- RECIPES SECTION ---------- */
body[data-theme="dark"] #recipes.section-soft{
  background:
    radial-gradient(900px 520px at 18% 35%, rgba(39,217,138,.10), transparent 60%),
    rgba(255,255,255,.012) !important;
}

/* Recipe cards: dark glass */
body[data-theme="dark"] .recipe.card{
  background: rgba(12,20,16,.86) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

/* Recipe title + subtext */
body[data-theme="dark"] .recipe-title{
  color: rgba(234,255,245,.94) !important;
}
body[data-theme="dark"] .recipe .muted{
  color: rgba(230,243,236,.70) !important;
}

/* Recipe image: tone down brightness */
body[data-theme="dark"] .recipe img{
  filter: brightness(.82) contrast(1.06) saturate(1.06) !important;
}

/* Recipe hover: still premium */
body[data-theme="dark"] .recipe:hover{
  box-shadow: 0 24px 70px rgba(0,0,0,.68) !important;
}

/* Recipe modal already fixed earlier — keep consistency */
body[data-theme="dark"] .recipe-modal{
  background: rgba(0,0,0,.62) !important;
}

/* ---------- FOOTER SECTION ---------- */
/* Footer is already dark, but tune contrast + links */
body[data-theme="dark"] .footer{
  background: #050f0a !important;
  color: rgba(216,239,228,.92) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Footer titles */
body[data-theme="dark"] .footer-title{
  color: rgba(234,255,245,.96) !important;
}

/* Footer links */
body[data-theme="dark"] .footer a{
  color: rgba(216,239,228,.82) !important;
  opacity: 1 !important;
}
body[data-theme="dark"] .footer a:hover{
  color: rgba(234,255,245,.96) !important;
}

/* Footer legal pill stays visible */
body[data-theme="dark"] .footer-legal{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}
body[data-theme="dark"] .footer-legal a{
  color: rgba(216,239,228,.90) !important;
}

/* Footer social icons background (if you want) */
body[data-theme="dark"] .footer-social-icons a{
  background: rgba(255,255,255,.04);
  border-radius: 12px;
}
/* =========================
   FOOTER CONTACT ICONS — PERFECT CENTERING
   ========================= */

.footer-social-icons{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-social-icons a{
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;

  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.footer-social-icons a:hover{
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

/* Icon itself (img/svg) */
.footer-social-icons a img,
.footer-social-icons a svg{
  width: 20px !important;
  height: 20px !important;
  display:block;
  object-fit: contain;
}
/* =========================
   DARK MODE — TRUST ICONS (XL, NO BOX, GLASS)
   ========================= */

body[data-theme="dark"] .trust-card{
  display: flex;
  align-items: center;
  gap: 18px;                 /* more breathing room */
  padding: 16px 18px;
}

/* ICON — EXTRA LARGE, FLOATING */
body[data-theme="dark"] .trust-card img{
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0;

  /* glassy glow, no container */
  filter:
    drop-shadow(0 10px 24px rgba(39,217,138,.55))
    drop-shadow(0 0 12px rgba(39,217,138,.25))
    saturate(1.18);

  opacity: .98;
}

/* TEXT BLOCK */
body[data-theme="dark"] .trust-card > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* TITLE */
body[data-theme="dark"] .trust-title{
  font-size: 15.5px;         /* scale text slightly too */
  font-weight: 900;
  color: #eafff5;
  line-height: 1.25;
}

/* SUBTITLE */
body[data-theme="dark"] .trust-sub{
  font-size: 13.5px;
  color: rgba(230,243,236,.78);
  line-height: 1.35;
}
/* Right-side controls: theme + burger */
.nav-controls{
  margin-left: auto;          /* pushes to right */
  display: flex;
  align-items: center;
  gap: 10px;                  /* spacing between icons */
  flex-shrink: 0;
}

/* Prevent wrapping on mobile */
.nav-inner{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Mobile-safe sizing */
@media (max-width: 768px){
  .nav-controls{
    gap: 8px;
  }

  .theme-toggle,
  .nav-burger{
    width: 42px;
    height: 42px;
  }
}
@media (max-width: 640px){
  .hero::before{
    background-size: cover !important;
    background-position: 60% 88% !important;  /* move focus down/right to bowls */
    transform: scale(1.00) !important;        /* remove zoom */
  }
}
/* =====================================================
   MOBILE HERO — FONT COLOR & VISIBILITY UPGRADE
   ===================================================== */
@media (max-width: 640px){

  /* HERO TITLE */
  .hero h1{
    color: #0b1220; /* deep neutral black (better than pure black) */
    text-shadow:
      0 2px 6px rgba(255,255,255,.35),
      0 8px 22px rgba(0,0,0,.18);
  }

  /* GREEN EMPHASIS LINE */
  .hero h1 .accent-2,
  .hero h1 span.green{
    color: #0f7a4a;              /* richer green */
    font-weight: 900;
    text-shadow:
      0 1px 4px rgba(255,255,255,.25),
      0 6px 18px rgba(15,122,74,.35);
  }

  /* HERO SUBTEXT */
  .lead{
    color: rgba(15,23,42,.92);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(255,255,255,.35);
  }

  /* MONDAY & THURSDAY HIGHLIGHT */
  .lead b,
  .lead strong{
    color: #0f7a4a;
    font-weight: 800;
  }

  /* SMALL PILL (Fresh microgreens • Hyderabad) */
  .hero .pill{
    backdrop-filter: blur(10px);
  }

  /* CTA BUTTON — STRONGER */
  .btn-primary{
    font-weight: 900;
    box-shadow:
      0 10px 26px rgba(15,107,67,.45),
      inset 0 1px 0 rgba(255,255,255,.25);
  }

  /* SECONDARY BUTTON */
  .btn-ghost{
    color: #0f172a;
    font-weight: 800;
    background: rgba(255,255,255,.90);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }

  /* TRUST CARD TEXT */
  .trust-title{
    color: #0b1220;
    font-weight: 900;
  }

  .trust-sub{
    color: rgba(15,23,42,.80);
    font-weight: 600;
  }

  /* OPTIONAL: slight glass pad behind text block */
  .hero-copy{
    padding: 8px 4px;
  }
}
/* ========================================================= */

/* =========================================================
   FIX 2: REMOVE EXTRA SPACE ABOVE "Your greens are growing" pill
   (mobile hero spacing tightened)
   ========================================================= */

@media (max-width: 640px){
  .hero{
    padding-top: 46px !important;     /* reduce top padding */
    padding-bottom: 22px !important;
  }
  .hero-inner{
    padding-top: 0 !important;
  }
  .hero-copy{
    transform: none !important;
    padding-top: 0 !important;
  }
  /* reduce gap before indicator */
  .harvest-indicator{
    margin: 0 0 8px !important;
  }
}


/* =========================================================
   FIX 3: MAKE BOTH PILLS GREEN + GLASSY + CLEAN ANIMATION
   (.pill + .harvest-indicator)
   ========================================================= */

.pill,
.harvest-indicator{
  background: rgba(18, 150, 95, 0.18) !important;    /* green glass */
  border: 1px solid rgba(18, 150, 95, 0.28) !important;
  color: rgba(15,23,42,.92) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;
  position: relative;
  overflow: hidden;
}

/* subtle glossy sweep (premium, not flashy) */
.pill::after,
.harvest-indicator::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,0) 60%
  );
  transform: translateX(-45%) rotate(10deg);
  opacity: .55;
  pointer-events:none;
}

@media (prefers-reduced-motion: no-preference){
  .pill::after,
  .harvest-indicator::after{
    animation: pillSweep 8s ease-in-out infinite;
  }
}

@keyframes pillSweep{
  0%, 55% { transform: translateX(-45%) rotate(10deg); opacity: 0; }
  70%     { opacity: .65; }
  100%    { transform: translateX(30%) rotate(10deg); opacity: 0; }
}

/* =========================================
   HERO CTA — MOBILE: 2 buttons side-by-side
   ========================================= */
@media (max-width: 640px){

  /* force 2-column layout */
  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* stop full-width stacking */
  .hero-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 12px 10px !important;   /* tighter so text fits */
    font-size: 14px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* if WhatsApp icon makes Start button look tight */
  .hero-actions .btn .btn-icon{
    width: 16px !important;
    height: 16px !important;
  }
}

/* Extra-tight phones (<=360px): allow wrap but keep 2-column feel */
@media (max-width: 360px){
  .hero-actions .btn{
    font-size: 13px !important;
    padding: 11px 8px !important;
  }
}
/* =====================================================
   HERO CTA — PREMIUM PROFESSIONAL BUTTON UPGRADE
   ===================================================== */

/* Base CTA polish */
.hero-actions .btn{
  font-weight: 900;
  letter-spacing: .01em;
  border-radius: 16px; /* slightly stronger geometry */
  transition:
    transform .16s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
}

/* =========================
   PRIMARY — Start Your Habit
   ========================= */
.hero-actions .btn-primary{
  background:
    linear-gradient(
      180deg,
      #1fa56f 0%,
      #138a5b 55%,
      #0b6e49 100%
    );

  box-shadow:
    0 14px 34px rgba(15,107,67,.35),
    inset 0 1px 0 rgba(255,255,255,.28);

  border: none;
}

/* premium hover lift */
.hero-actions .btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 20px 46px rgba(15,107,67,.45),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* press feel */
.hero-actions .btn-primary:active{
  transform: translateY(0) scale(.985);
  box-shadow:
    0 10px 26px rgba(15,107,67,.38),
    inset 0 2px 6px rgba(0,0,0,.18);
}

/* WhatsApp icon refinement */
.hero-actions .btn-primary .btn-icon{
  filter: brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.25));
}


/* =========================
   SECONDARY — View Packs
   ========================= */
.hero-actions .btn-ghost{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.86)
    );

  border: 1px solid rgba(15,23,42,.16);
  color: #0f172a;

  box-shadow:
    0 10px 22px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* subtle hover (not competing with primary) */
.hero-actions .btn-ghost:hover{
  transform: translateY(-1px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,1),
      rgba(255,255,255,.92)
    );
  box-shadow:
    0 14px 30px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* press */
.hero-actions .btn-ghost:active{
  transform: translateY(0) scale(.99);
}


/* =========================
   MOBILE-SPECIFIC TUNING
   ========================= */
@media (max-width: 640px){

  .hero-actions .btn{
    padding: 13px 10px;     /* confident but compact */
    font-size: 14.5px;
  }

  /* Primary gets visual dominance */
  .hero-actions .btn-primary{
    box-shadow:
      0 12px 30px rgba(15,107,67,.42),
      inset 0 1px 0 rgba(255,255,255,.28);
  }

  /* Secondary stays calm */
  .hero-actions .btn-ghost{
    box-shadow:
      0 8px 18px rgba(15,23,42,.10);
  }
}
/* =========================================================
   HERO TRUST — FINAL (DESKTOP + MOBILE)
   Paste at END of styles.css (overrides all earlier versions)
   ========================================================= */

/* ---------- DESKTOP / TABLET (641px and up) ---------- */
@media (min-width: 641px){
  .hero-trust{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
    max-width: 760px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hero-trust .trust-card{
    width: 100% !important;               /* equal cards */
    min-width: 0 !important;
    max-width: none !important;

    padding: 12px 14px !important;
    border-radius: 18px !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    background: rgba(255,255,255,.62) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
  }

  .hero-trust .trust-card img{
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    object-fit: contain !important;
  }

  .hero-trust .trust-title{
    font-weight: 900 !important;
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .hero-trust .trust-sub{
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    color: rgba(15,23,42,.68) !important;
  }
}


/* =========================================================
   NAV LOGO ORBIT SPROUTS (Mobile Only)
   5 sprouts rotate around logo center and settle
   ========================================================= */

.brand-sprouts{ display:none; }

@media (max-width: 768px){

  .brand{
    position: relative;
    display: flex;
    align-items: center;
  }

  .brand-logo{
    position: relative;
    z-index: 2;
  }

  .brand-sprouts{
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 14px; /* final landing position */
    gap: 6px;
  }

  .nav-sprout{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 18px;

    /* start invisible */
    opacity: 0;

    /* pivot around logo center */
    transform-origin: calc(-1 * (var(--orbit-radius, 42px))) center;

    animation: orbitSettle 1.4s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--i) * 0.08s);
  }
}

/* Orbit animation */
@keyframes orbitSettle{

  0%{
    opacity: 0;
    transform: rotate(-360deg) scale(.4);
  }

  20%{
    opacity: 1;
  }

  80%{
    transform: rotate(12deg) scale(1);
  }

  100%{
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .nav-sprout{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}



/* =========================================================
   HERO TRUST MARQUEE — FINAL OVERRIDE
   Desktop: 3-up grid (no animation)
   Mobile: continuous LEFT ➜ RIGHT using duplicated cards (6 items)
   ========================================================= */

@media (min-width: 641px){
  .hero-trust{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    max-width: 760px !important;
  }

  .hero-trust-track{
    display: contents !important;
    animation: none !important;
    transform: none !important;
  }

  /* hide duplicates on desktop */
  .hero-trust-track > .trust-card:nth-child(n+4){
    display: none !important;
  }
}

@media (max-width: 640px){
  .hero-trust{
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;

    /* soft edge fade (optional) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .hero-trust-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    will-change: transform !important;

    /* Continuous scroll animation */
    animation: trustAutoScroll 20s linear infinite !important;
  }

  /* show duplicates on mobile */
  .hero-trust-track > .trust-card:nth-child(n+4){
    display: flex !important;
  }

  .hero-trust .trust-card{
    flex: 0 0 auto !important;
    min-width: 200px !important;
    max-width: 200px !important;
    width: 200px !important;
  }

  .hero-trust .trust-card img{
    width: 44px !important;
    height: 44px !important;
  }

  .hero-trust .trust-title{
    font-size: 12px !important;
  }

  .hero-trust .trust-sub{
    font-size: 11px !important;
  }

  /* pause while pressing (touch/hold) */
  .hero-trust:active .hero-trust-track{
    animation-play-state: paused !important;
  }
}

/* Trust cards scroll animation - MUST be outside media query */
@keyframes trustAutoScroll{
  0%{ transform: translate3d(0, 0, 0); }
  100%{ transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .hero-trust-track{ animation: none !important; transform: none !important; }
}
/* =========================================================
   METRICS STRIP (between Hero and How/Why)
   3 separate dark-green glass rectangles + count-up
   ========================================================= */

.metrics-strip{
  position: relative;
  z-index: 5;
  padding: 16px 0 28px;               /* pushes it down */
  margin-top: 10px;                   /* extra separation from hero */
}

.metrics-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Hide duplicates on desktop */
@media (min-width: 641px){
  .metric-duplicate{
    display: none !important;
  }
}

/* Individual metric rectangle */
.metric-box{
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;

  background: linear-gradient(180deg, rgba(7,86,54,.96), rgba(6,66,44,.96));
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 46px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.12);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease;
}

.metric-box:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 62px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(1.02);
}

.metric-value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;

  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(234,255,245,.98);

  font-size: 24px;
  line-height: 1;
}

.metric-plus{
  color: rgba(57,217,138,.95);
  font-weight: 900;
  font-size: 18px;
  margin-left: 1px;
}

.metric-label{
  font-weight: 700;
  font-size: 12px;
  color: rgba(216,239,228,.82);
  white-space: nowrap;
}

/* Mobile: keep horizontal if possible, otherwise 2 + 1 */
@media (max-width: 640px){
  .metrics-strip{
    padding: 14px 0 20px;
    margin-top: 12px;
  }

  .metrics-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .metric-value{
    font-size: 26px;
  }
}
/* Mobile: continuous scroll loop */
@media (max-width: 640px){
  .metrics-strip .container{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .metrics-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: max-content !important;
    padding-bottom: 6px;
    
    /* Continuous scroll animation */
    animation: metricsAutoScroll 15s linear infinite !important;
    will-change: transform !important;
  }
  
  .metric-box{
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    padding: 12px 18px !important;
  }

  .metric-value{
    font-size: 22px !important;
  }

  .metric-label{
    font-size: 11px !important;
  }
  
  /* Hide duplicates on desktop */
  .metric-duplicate{
    display: flex !important;
  }
  
  .metrics-grid::-webkit-scrollbar{ display:none; }
}

/* Metrics auto-scroll animation */
@keyframes metricsAutoScroll{
  0%{ transform: translate3d(0, 0, 0); }
  100%{ transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .metrics-grid{ animation: none !important; transform: none !important; }
}

/* =========================================================
   TESTIMONIALS - SCROLLING GRADIENT CARDS
   ========================================================= */
.testimonials-container{
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.testimonials-track{
  display: flex;
  gap: 16px;
  width: max-content;
  animation: testimonialsScroll 40s linear infinite;
  will-change: transform;
}

.testimonials-track:hover{
  animation-play-state: paused;
}

.testimonial-card{
  flex: 0 0 auto;
  width: 320px;
  padding: 24px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  color: white;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.testimonial-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent);
  pointer-events: none;
}

.testimonial-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.testimonial-quote{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.testimonial-author{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.testimonial-location{
  font-size: 12px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.testimonial-date{
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
  margin-top: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}

@keyframes testimonialsScroll{
  0%{ transform: translate3d(0, 0, 0); }
  100%{ transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px){
  .testimonial-card{
    width: 280px;
    padding: 20px 18px;
  }
  
  .testimonial-quote{
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .testimonials-track{
    animation: none !important;
  }
}

/* =========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================= */
.scroll-reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed{
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-left.revealed{
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right{
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-right.revealed{
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale{
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-scale.revealed{
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   SOCIAL PROOF - INTERACTIVE CARDS
   ========================================================= */
.social-proof{
  position: relative;
  overflow: hidden;
}

.social-proof h2{
  margin-bottom: 28px;
}

.social-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.social-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}

.social-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(5,150,105,.3));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.social-card:hover{
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 20px 60px rgba(15,23,42,.18);
}

.social-card:hover::before{
  opacity: 1;
}

.social-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.social-card:hover img{
  transform: scale(1.1);
  filter: brightness(1.1) saturate(1.2);
}

.social-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  color: white;
  font-weight: 800;
  font-size: 14px;
  z-index: 2;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-card:hover .social-overlay{
  transform: translateY(0);
}

@media (max-width: 640px){
  .social-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
/* =========================================================
   Testimonials — DailyGro Premium
   - White glass cards with subtle green/blue tint + border glow
   - Green/Blue highlight cards with soft luxury gradients
   - Subtle shine sweep only on highlights
   ========================================================= */

/* Base card (always readable) */
#testimonials .testimonial-card{
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  padding: 24px 20px;
  border-radius: 22px;

  color: #0f172a;
  opacity: 1;
  filter: none;

  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);

  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Text inside */
#testimonials .testimonial-quote{ color: inherit; opacity: 1; }
#testimonials .testimonial-author{ color: inherit; opacity: .95; font-weight: 650; }
#testimonials .testimonial-location{ color: rgba(15,23,42,.72); opacity: 1; }

/* ---------- Normal cards: subtle brand tint + gradient border ---------- */
#testimonials .testimonial-card:not(.is-highlight){
  background:
    linear-gradient(135deg,
      rgba(16,185,129,.07) 0%,
      rgba(59,130,246,.06) 55%,
      rgba(255,255,255,.82) 100%
    );
}

/* gradient border glow using ::before (so ::after stays free for shine on highlights) */
#testimonials .testimonial-card:not(.is-highlight)::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    rgba(16,185,129,.35),
    rgba(59,130,246,.28),
    rgba(16,185,129,.20)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

/* ---------- Highlight cards ---------- */
#testimonials .testimonial-card.is-highlight{
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 14px 34px rgba(2, 6, 23, .14),
    0 1px 0 rgba(255,255,255,.22) inset;
}

/* GREEN highlight */
#testimonials .testimonial-card.is-highlight.highlight-green{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(135deg,
      rgba(16,185,129,.88) 0%,
      rgba(5,150,105,.82) 55%,
      rgba(20,184,166,.74) 100%
    );
}

/* BLUE highlight */
#testimonials .testimonial-card.is-highlight.highlight-blue{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(135deg,
      rgba(59,130,246,.86) 0%,
      rgba(29,78,216,.82) 60%,
      rgba(37,99,235,.74) 100%
    );
}

/* NEON highlight - PREMIUM UNIQUE (Pranavi) */
#testimonials .testimonial-card.is-highlight.highlight-neon{
  background:
    radial-gradient(140% 140% at 25% 5%,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0) 60%
    ),
    radial-gradient(110% 110% at 85% 92%,
      rgba(34,211,238,.15) 0%,
      rgba(34,211,238,0) 55%
    ),
    linear-gradient(145deg,
      rgba(16,185,129,.92) 0%,
      rgba(34,211,238,.88) 48%,
      rgba(5,150,105,.86) 100%
    );
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 16px 42px rgba(16,185,129,.22),
    0 1px 0 rgba(255,255,255,.32) inset;
}

/* Enhanced shine effect for neon */
#testimonials .testimonial-card.is-highlight.highlight-neon::after{
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 100%
  );
}

/* ---------- Shine sweep only on highlights (uses ::after) ---------- */
#testimonials .testimonial-card.is-highlight::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-60%;
  width: 55%;
  height: 170%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  pointer-events:none;
  opacity: 0;
}

#testimonials .testimonial-card.is-highlight.shine::after{
  animation: dgShine 3.6s ease-in-out 1;
  opacity: 1;
}

#testimonials .testimonial-card.is-highlight:hover::after{
  animation: dgShine 3.2s ease-in-out 1;
  opacity: 1;
}

@keyframes dgShine{
  0%   { transform: translateX(-20%) rotate(18deg); opacity: 0; }
  18%  { opacity: .9; }
  55%  { opacity: .55; }
  100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}
/* =========================================================
   Mobile spacing polish — tighter, neater, premium
   Paste at END of styles_1.css
   ========================================================= */

/* 1) Global section spacing tighter on mobile */
@media (max-width: 768px){
  .section{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* if you have soft sections that add extra padding */
  .section-soft,
  .section-soft-neutral{
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* reduce header-to-content gap inside sections */
  .section-head{
    margin-bottom: 14px !important;
  }

  .section-head h2{
    margin: 0 0 6px !important;
    letter-spacing: -0.2px;
  }

  .section-head p{
    margin: 0 !important;
  }

  /* any generic stacks/grids */
  .stack,
  .grid,
  .cards,
  .row{
    gap: 12px !important;
  }
}

/* 2) Even tighter for small phones */
@media (max-width: 480px){
  .section{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .section-head{
    margin-bottom: 12px !important;
  }
}

/* =========================================================
   Testimonials mobile: neater + less empty space
   ========================================================= */
@media (max-width: 768px){
  #testimonials .testimonials-container{
    margin-top: 8px !important;
  }

  #testimonials .testimonials-track{
    gap: 12px !important;              /* reduce horizontal gap */
    padding: 8px 4px 4px !important;   /* reduce extra padding */
  }

  #testimonials .testimonial-card{
    width: 260px !important;           /* smaller cards on mobile */
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }

  #testimonials .testimonial-quote{
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #testimonials .testimonial-author{
    margin-top: 10px !important;
    font-size: 13px !important;
  }

  #testimonials .testimonial-location{
    margin-top: 2px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   Remove accidental "double spacing" between adjacent sections
   (common when last element has margin-bottom)
   ========================================================= */
@media (max-width: 768px){
  .section *:last-child{
    margin-bottom: 0 !important;
  }
  .section .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
/* =========================================================
   Premium page scroll + section separation (DailyGro)
   Paste at END of styles_1.css
   ========================================================= */

/* Smooth in-page anchor scrolling (nav links) */
html{
  scroll-behavior: smooth;
}

/* Prevent headings getting hidden under sticky nav */
main section[id]{
  scroll-margin-top: 92px;
}
@media (max-width: 768px){
  main section[id]{ scroll-margin-top: 76px; }
}

/* ---------- Section separation: subtle divider + glow + depth ---------- */
.section{
  position: relative;
}

/* Thin premium gradient divider line at bottom of each section */
.section::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(920px, calc(100% - 32px));
  height: 1px;
  background: linear-gradient(90deg,
    rgba(16,185,129,0),
    rgba(16,185,129,.22),
    rgba(59,130,246,.20),
    rgba(16,185,129,0)
  );
  opacity: .75;
}

/* Soft “depth” halo near the divider (very subtle) */
.section::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  width: min(980px, calc(100% - 24px));
  height: 44px;
  background: radial-gradient(closest-side,
    rgba(16,185,129,.08),
    rgba(59,130,246,.06),
    rgba(0,0,0,0)
  );
  filter: blur(6px);
  opacity: .65;
  pointer-events:none;
}

/* Don’t draw divider on final section */
.section:last-of-type::after,
.section:last-of-type::before{
  display:none;
}

/* Dark theme divider tuning */
body[data-theme="dark"] .section::after{
  background: linear-gradient(90deg,
    rgba(16,185,129,0),
    rgba(16,185,129,.20),
    rgba(59,130,246,.18),
    rgba(16,185,129,0)
  );
  opacity: .8;
}
body[data-theme="dark"] .section::before{
  opacity: .45;
}

/* ---------- Scroll reveal animation (section enters) ---------- */
:root{
  --reveal-y: 18px;
  --reveal-dur: 750ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
}

.section[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}

/* When in view */
.section.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger inside a section (cards, feature blocks, etc.) */
.section .reveal-item{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 650ms var(--reveal-ease),
    transform 650ms var(--reveal-ease);
}
.section.is-inview .reveal-item{
  opacity: 1;
  transform: translateY(0);
}

/* Slight stagger effect using CSS variable */
.section.is-inview .reveal-item{
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .section[data-reveal],
  .section .reveal-item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (min-width: 769px){
  body{
    overscroll-behavior-y: none;
  }
}
/* =========================================================
   Alternating section surfaces + scroll progress indicator
   Paste at END of styles_1.css
   ========================================================= */

/* ---------- Alternating surfaces (subtle, premium) ---------- */
main section.section{
  position: relative;
}

/* Default surface (odd sections) */
main section.section:nth-of-type(odd){
  background:
    radial-gradient(1200px 320px at 50% -10%,
      rgba(16,185,129,.08),
      rgba(0,0,0,0) 60%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.0),
      rgba(255,255,255,.0)
    );
}

/* Alternate surface (even sections): slight “paper” tint */
main section.section:nth-of-type(even){
  background:
    radial-gradient(1200px 320px at 50% -10%,
      rgba(59,130,246,.07),
      rgba(0,0,0,0) 60%
    ),
    linear-gradient(180deg,
      rgba(16,185,129,.03),
      rgba(59,130,246,.02)
    );
}

/* Keep your existing section-soft backgrounds working */
main section.section.section-soft,
main section.section.section-soft-neutral{
  background-blend-mode: normal;
}

/* Dark mode surfaces */
body[data-theme="dark"] main section.section:nth-of-type(odd){
  background:
    radial-gradient(1200px 320px at 50% -10%,
      rgba(16,185,129,.12),
      rgba(0,0,0,0) 62%
    );
}
body[data-theme="dark"] main section.section:nth-of-type(even){
  background:
    radial-gradient(1200px 320px at 50% -10%,
      rgba(59,130,246,.10),
      rgba(0,0,0,0) 62%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,0)
    );
}

/* ---------- Scroll progress indicator (thin premium bar) ---------- */
.dg-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}

.dg-progress .dg-progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    rgba(16,185,129,.95),
    rgba(59,130,246,.90),
    rgba(16,185,129,.85)
  );
  box-shadow: 0 0 14px rgba(16,185,129,.22);
  border-radius: 0 999px 999px 0;
  transform: translateZ(0);
}

/* Make it feel even more premium on mobile */
@media (max-width: 768px){
  .dg-progress{ height: 3px; }
  .dg-progress .dg-progress-bar{
    box-shadow: 0 0 12px rgba(59,130,246,.22);
  }
}

/* Dark mode: slightly brighter glow */
body[data-theme="dark"] .dg-progress .dg-progress-bar{
  box-shadow: 0 0 16px rgba(59,130,246,.28);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .dg-progress{ display:none; }
}
/* =========================================================
   Premium background texture + mesh blobs (SAFE overlay)
   Paste at END of styles_1.css
   ========================================================= */

body{
  position: relative;
  isolation: isolate; /* ensures overlays don't blend weirdly with children */
}

/* Global mesh blobs (very subtle) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* premium mesh-style blobs */
  background:
    radial-gradient(900px 500px at 10% 12%,
      rgba(16,185,129,.10),
      rgba(16,185,129,0) 60%
    ),
    radial-gradient(760px 420px at 88% 18%,
      rgba(59,130,246,.09),
      rgba(59,130,246,0) 62%
    ),
    radial-gradient(900px 520px at 55% 92%,
      rgba(16,185,129,.07),
      rgba(16,185,129,0) 60%
    ),
    radial-gradient(560px 360px at 18% 78%,
      rgba(59,130,246,.06),
      rgba(59,130,246,0) 62%
    );
  filter: blur(18px);
  opacity: .95;
  transform: translateZ(0);
}

/* Fine grain texture (paper-like) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* grain via layered micro-gradients (no external image) */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(15,23,42,.020) 0px,
      rgba(15,23,42,.020) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.012) 0px,
      rgba(15,23,42,.012) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 6px
    );
  mix-blend-mode: multiply;
  opacity: .18;
}

/* Dark mode tuning: blobs stronger + grain lighter */
body[data-theme="dark"]::before{
  background:
    radial-gradient(900px 520px at 12% 14%,
      rgba(16,185,129,.18),
      rgba(16,185,129,0) 62%
    ),
    radial-gradient(820px 480px at 88% 16%,
      rgba(59,130,246,.16),
      rgba(59,130,246,0) 64%
    ),
    radial-gradient(980px 620px at 50% 92%,
      rgba(16,185,129,.13),
      rgba(16,185,129,0) 62%
    ),
    radial-gradient(620px 420px at 18% 78%,
      rgba(59,130,246,.11),
      rgba(59,130,246,0) 66%
    );
  filter: blur(22px);
  opacity: .85;
}

body[data-theme="dark"]::after{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.020) 0px,
      rgba(255,255,255,.020) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: screen;
  opacity: .10;
}

/* Reduce motion / battery: keep it static and light */
@media (prefers-reduced-motion: reduce){
  body::before{ filter: blur(14px); }
}


/* =========================
   FIXES: Testimonials readability + dark mode cards
   ========================= */
#testimonials .testimonial-card:not(.is-highlight){
  color: var(--text);
}

/* Ensure non-highlight cards become true dark cards in dark mode (no washed-out white) */
body[data-theme="dark"] #testimonials .testimonial-card:not(.is-highlight){
  background:
    linear-gradient(135deg,
      rgba(39,217,138,.06) 0%,
      rgba(59,130,246,.06) 55%,
      rgba(255,255,255,.02) 100%
    ),
    rgba(12,20,16,.86);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.40);
}

/* Dark mode - highlighted testimonials stay vibrant */
body[data-theme="dark"] #testimonials .testimonial-card.is-highlight.highlight-green{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(135deg,
      rgba(16,185,129,1) 0%,
      rgba(5,150,105,.95) 55%,
      rgba(20,184,166,.90) 100%
    );
  box-shadow: 0 18px 48px rgba(16,185,129,.35);
}

body[data-theme="dark"] #testimonials .testimonial-card.is-highlight.highlight-blue{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(135deg,
      rgba(59,130,246,.98) 0%,
      rgba(29,78,216,.94) 60%,
      rgba(37,99,235,.88) 100%
    );
  box-shadow: 0 18px 48px rgba(59,130,246,.35);
}

body[data-theme="dark"] #testimonials .testimonial-card.is-highlight.highlight-neon{
  background:
    radial-gradient(140% 140% at 25% 5%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 60%
    ),
    radial-gradient(110% 110% at 85% 92%,
      rgba(34,211,238,.20) 0%,
      rgba(34,211,238,0) 55%
    ),
    linear-gradient(145deg,
      rgba(16,185,129,1) 0%,
      rgba(34,211,238,.96) 48%,
      rgba(5,150,105,.94) 100%
    );
  border-color: rgba(255,255,255,.32);
  box-shadow:
    0 20px 55px rgba(16,185,129,.40),
    0 1px 0 rgba(255,255,255,.35) inset;
}

/* Quote + meta text tones (avoid "too dark" look) */
#testimonials .testimonial-quote{ color: inherit; }
#testimonials .testimonial-author{ color: inherit; }
#testimonials .testimonial-location{ color: var(--muted); opacity: 1; }
/* =========================
   FOOTER – PRO LOOK UPGRADE
   ========================= */

/* Main footer wrapper (adjust selector if yours differs) */
.footer {
  padding: 56px 0 0;
  background: radial-gradient(900px 500px at 20% 0%, rgba(120,255,180,0.08), transparent 60%),
              radial-gradient(800px 500px at 80% 10%, rgba(60,170,255,0.07), transparent 55%),
              rgba(7, 18, 14, 1);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Top footer grid area */
.footer .footer-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 52px;
  padding: 0 0 34px;
}

/* Column headings */
.footer-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
}

/* Footer links */
.footer a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.footer a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Link list spacing (safe even if you are not using ul) */
.footer .footer-links,
.footer .footer-links a,
.footer .footer-col a {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0;
}

/* Brand column text */
.footer .footer-brand p,
.footer .footer-brand .muted {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1.6;
}

/* CONTACT block refinement */
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* phone pill on its own row */
.footer-social-icons .footer-phone {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  padding: 0 16px;

  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.2px;

  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* icon buttons on next line – uniform */
.footer-social-icons a:not(.footer-phone) {
  width: 46px;
  height: 46px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.footer-social-icons a:not(.footer-phone):hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.18);
}

.footer-social-icons img,
.footer-social-icons svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Contact note text */
.footer .muted.tiny {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,0.52);
  font-size: 12.8px;
  line-height: 1.55;
}

/* Divider line before bottom bar */
.footer .footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin-top: 10px;
}

/* Bottom bar (copyright + policies) */
.footer .footer-bottom {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  color: rgba(255,255,255,0.55);
  font-size: 12.8px;
}

/* bottom links as pills */
.footer .footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
}

.footer .footer-bottom a:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px) {
  .footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  .footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer-social-icons a:not(.footer-phone) {
    width: 50px;
    height: 50px;
  }
  .footer-social-icons img,
  .footer-social-icons svg {
    width: 24px;
    height: 24px;
  }
}
/* =========================================
   PREMIUM SPACING + READABILITY (low risk)
   ========================================= */

/* Base text readability */
:root{
  --section-pad: 84px;   /* desktop section padding */
  --section-gap: 22px;   /* spacing inside section heads */
  --card-pad: 24px;      /* slightly more breathing room */
}

body{
  line-height: 1.65;      /* was tighter; this feels more premium */
  text-rendering: optimizeLegibility;
}

/* Section vertical spacing */
.section{
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* Section headings spacing */
.section-head{
  margin-bottom: var(--section-gap);
}
.section-head h2{
  margin-bottom: 10px;
}
.section-head p{
  margin-top: 0;
  max-width: 62ch;        /* nicer reading width */
}

/* Cards feel less cramped */
.card-pad{
  padding: var(--card-pad);
}

/* Lists/steps spacing */
.steps{ gap: 14px; }
.step{ gap: 12px; }
.bullets li{ margin: 8px 0; }

/* Grid spacing (packs / plans / recipes / delivery) */
.pack-grid,
.plan-grid,
.recipe-grid,
.delivery-grid,
.social-grid{
  gap: 22px;              /* more “luxury spacing” */
}

/* Testimonials spacing */
.testimonials-container{ margin-top: 18px; }

/* Footer spacing */
.footer{
  padding-top: 64px;
}
.footer-cols{
  gap: 44px;
}

/* Mobile tuning: keep premium feel but not too tall */
@media (max-width: 768px){
  :root{
    --section-pad: 56px;
    --card-pad: 20px;
  }
  body{ line-height: 1.62; }
  .pack-grid, .plan-grid, .recipe-grid, .delivery-grid, .social-grid{ gap: 16px; }
}

/* =========================================
   PERFORMANCE POLISH (reduce scroll-jank)
   ========================================= */

/* Let the browser skip layout/paint for below-fold sections */
.section,
footer{
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* prevents big jumps while rendering */
}

/* Reduce expensive paint on large blocks (shadows/blur) */
.card,
.plan,
.pack-card,
.recipe.card,
.testimonial-card,
.social-card,
.community.card{
  will-change: transform;         /* keeps hover/anim smooth */
  transform: translateZ(0);       /* compositor hint */
}

/* Prefer transforms over costly filters */
.hero-overlay,
.nav-backdrop{
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Avoid heavy blur on big surfaces (keep your look, reduce cost) */
.hero-overlay{
  filter: none !important;        /* if you had blur, remove it */
}

/* Smooth scrolling but respect accessibility */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ================================
   FOOTER ALIGNMENT POLISH
   ================================ */

/* Align all footer columns */
.footer-cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;      /* baseline alignment */
}

/* Column titles uniform */
.footer-title{
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Footer links spacing */
.footer-cols a{
  display: block;
  margin: 8px 0;
  line-height: 1.5;
}

/* Contact grouping */
.footer-social-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Phone number full row */
.footer-phone{
  flex-basis: 100%;
  margin-bottom: 4px;
}

/* Icon buttons */
.footer-social-icons a:not(.footer-phone){
  width: 44px;
  height: 44px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Footer bottom cleanup */
.footer-bottom{
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

/* Legal links as pills */
.footer-legal a{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}

.footer-legal a:hover{
  background: rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 820px){
  .footer-cols{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/* HERO polish */
.hero-copy h1{
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 10px 0 10px;
}

.hero-copy .lead{
  font-size: 18px;
  line-height: 1.65;
  max-width: 60ch;
  margin-top: 8px;
}

.hero-actions{
  gap: 12px;
  margin-top: 18px;
}

/* CTA buttons feel crisp */
.btn.btn-lg{
  padding: 14px 18px;
  border-radius: 14px;
}
/* Card density & consistency */
.pack-card .pack-content,
.plan.card-pad{
  padding: 22px;
}


.dark-mode .plan{
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.40);
}
/* Testimonials premium typography */
.testimonial-card{
  padding: 18px 18px 16px;
}

.testimonial-quote{
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}

.testimonial-author{
  margin-top: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.testimonial-location{
  margin-top: 2px;
  opacity: 0.75;
}

/* Dark mode: ensure normal cards look truly dark */
.dark-mode .testimonial-card:not(.is-highlight){
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.recipe.card{
  overflow: hidden;
}

.recipe.card img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px){
  .recipe.card img{ height: 170px; }
  .recipe-title{ font-size: 16px; }
}
/* Navbar buttons */
.theme-toggle,
.nav-burger{
  border-radius: 14px;
}

/* Drawer feel */
.nav-drawer{
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference){
  .nav-drawer{
    transition: transform 220ms ease, opacity 220ms ease;
  }
}
/* Keep scrolling smooth: avoid expensive paint on big layers */

.hero-overlay,
.nav-backdrop{
  transform: translateZ(0);
  will-change: transform;
}

/* Skip rendering below fold sections */
.section,
footer{
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}
/* Footer micro polish */
.footer-mark{ opacity: 0.95; }
.footer .muted{ line-height: 1.6; }

.footer-legal{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.footer-legal .dot-sep{ opacity: 0.55; }
/* =========================
   HERO TYPOGRAPHY POLISH
   ========================= */

/* Headline refinement */
.hero-copy h1{
  letter-spacing: -0.02em;   /* tighter premium look */
  line-height: 1.08;
  margin: 12px 0 10px;
  max-width: 20ch;           /* avoids very long lines */
}

/* Accent lines spacing */
.hero-copy h1 .accent,
.hero-copy h1 .accent-2{
  display: inline-block;
  margin-top: 4px;
}

/* Supporting paragraph */
.hero-copy .lead{
  font-size: 18px;
  line-height: 1.65;
  margin-top: 10px;
  max-width: 60ch;
  opacity: 0.92;
}

/* CTA spacing */
.hero-actions{
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Buttons feel premium */
.hero-actions .btn{
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
}

/* Trust strip spacing */
.hero-trust{
  margin-top: 22px;
}

/* Mobile tuning */
@media (max-width: 768px){
  .hero-copy h1{
    line-height: 1.12;
    max-width: none;
  }

  .hero-copy .lead{
    font-size: 16.5px;
  }

  .hero-actions{
    margin-top: 16px;
  }
}
.chip-soon{
  opacity: 0.88;
  border-style: dashed;
  cursor: pointer;
}
.chip-soon .chip-badge{
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14,163,106,.12);
  color: #0ea36a;
  font-weight: 700;
}
/* =========================
   NAV MORE BUTTON
========================= */

.nav-more {
  position: relative;
}

/* Button */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 14px;

  border: 1.5px solid #0ea36a;
  background: #ffffff;
  color: #0ea36a;

  cursor: pointer;
  transition: all .22s ease;
}

/* Hover */
.nav-more-btn:hover {
  background: #0ea36a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(14,163,106,.22);
}

/* Caret */
.nav-caret {
  font-size: 12px;
  transition: transform .2s ease;
}

/* Rotate caret when open */
.nav-more.open .nav-caret {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  min-width: 180px;

  background: #fff;
  border-radius: 14px;

  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);

  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: all .18s ease;
  z-index: 40;
}

/* Open state */
.nav-more.open .nav-more-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu links */
.nav-more-menu a {
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  color: #333;

  transition: all .15s ease;
}

/* Hover */
.nav-more-menu a:hover {
  background: rgba(14,163,106,.1);
  color: #0ea36a;
}
/* =========================================================
   HERO H1 — Mobile wrap + spacing fix (strong)
   ========================================================= */
.hero h1{
  margin: 10px 0 0;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance; /* modern browsers: improves wrap */
}

.hero h1 .accent,
.hero h1 .accent-2{
  display: inline;
}

/* MOBILE */
@media (max-width: 640px){

  /* Give the headline a better max width so it wraps nicely */
  .hero-copy{
    max-width: 360px;
  }

  .hero h1{
    font-size: clamp(24px, 7.2vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.4px;
  }

  /* Remove the forced <br> so browser can wrap naturally */
  .hero h1 br{
    display: none;
  }

  /* Make the green line a slightly smaller “sub-line” */
  .hero h1 .accent-2{
    display: block;
    margin-top: 8px;
    font-size: 0.92em;     /* key: prevents “week” dropping alone */
    line-height: 1.10;
  }

  /* Keep "twice a week" together so it doesn't break awkwardly */
  .hero h1 .accent-2{
    white-space: normal;
  }
  .hero h1 .accent-2{
    word-spacing: 0.5px;
  }

  .hero .lead{
    font-size: 14.5px;
    line-height: 1.45;
    margin-top: 12px;
    max-width: 34ch;
  }

  .pill{
    font-size: 12px;
    padding: 6px 12px;
  }
}
/* =========================================================
   HOW + WHY cards — premium style
   ========================================================= */
#how .two-col .card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(14,163,106,.06), rgba(255,255,255,1) 55%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#how .two-col .card:hover{
  transform: translateY(-3px);
  border-color: rgba(14,163,106,.25);
  box-shadow: 0 22px 55px rgba(14,163,106,.10);
}

/* Decorative corner glow */
#how .two-col .card::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:240px;height:240px;
  background: radial-gradient(circle, rgba(14,163,106,.18), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}

/* Headings inside the cards */
#how .two-col .card h2{
  font-size: 22px;
  letter-spacing: -.3px;
  margin-bottom: 14px;
}
/* Steps list styling */
.steps{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Each step row */
.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.05);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.step:hover{
  transform: translateY(-2px);
  border-color: rgba(14,163,106,.20);
  background: rgba(14,163,106,.06);
}



/* Step title */
.step-title{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
/* =========================================================
   Premium slow gradient motion — cards
   ========================================================= */

#how .two-col .card{
  position: relative;
  overflow: hidden;
}

/* Moving gradient layer */
#how .two-col .card::after{
  content: "";
  position: absolute;
  inset: -40%;

  background: radial-gradient(
      circle at 20% 30%,
      rgba(14,163,106,.12),
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(14,163,106,.10),
      transparent 50%
    );

  opacity: .6;
  pointer-events: none;

  animation: dgGradientDrift 26s linear infinite;
}

/* Ultra slow movement */
@keyframes dgGradientDrift{
  0%   { transform: translate(0%,0%); }
  50%  { transform: translate(8%,6%); }
  100% { transform: translate(0%,0%); }
}
@media (prefers-reduced-motion: reduce){
  #how .two-col .card::after{
    animation: none;
  }
}
/* =========================================================
   DARK MODE — HOW + WHY CARDS
   ========================================================= */
body[data-theme="dark"] #how .two-col .card{
  background: linear-gradient(
    180deg,
    rgba(14,163,106,.12),
    rgba(18,20,22,1) 55%
  );

  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* Hover */
body[data-theme="dark"] #how .two-col .card:hover{
  border-color: rgba(14,163,106,.45);
  box-shadow: 0 24px 60px rgba(14,163,106,.20);
}

/* Moving gradient glow adjustment */
body[data-theme="dark"] #how .two-col .card::after{
  opacity: .45;
  background:
    radial-gradient(circle at 20% 30%, rgba(14,163,106,.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(14,163,106,.14), transparent 55%);
}

/* Step rows */
body[data-theme="dark"] .step{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

body[data-theme="dark"] .step:hover{
  background: rgba(14,163,106,.12);
  border-color: rgba(14,163,106,.45);
}

/* Step icons */
body[data-theme="dark"] .step-icon-img{
  background: rgba(14,163,106,.20);
}

/* Why tiles */
body[data-theme="dark"] .why{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

body[data-theme="dark"] .why:hover{
  background: rgba(14,163,106,.12);
  border-color: rgba(14,163,106,.45);
}

/* Why icons */
body[data-theme="dark"] .why-ico{
  background: rgba(14,163,106,.25);
  color: #30e0a2;
}

/* Muted text */
body[data-theme="dark"] #how .muted{
  color: rgba(255,255,255,.70);
}
/* Move nav sprouts slightly down */
.brand-sprouts{
  transform: translateY(10px);
}
@media (max-width:640px){
  .brand-sprouts{
    transform: translateY(10px);
  }
}
/* Map legend - PREMIUM VERSION */
.dg-map-legend{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 
    0 20px 50px rgba(15,23,42,.14),
    0 0 0 1px rgba(255,255,255,.80) inset;
  font-weight: 700;
  font-size: 13.5px;
  min-width: 200px;
}

.dg-map-legend-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 12px;
  color: rgba(15,23,42,.92);
  letter-spacing: -.02em;
}

.dg-map-legend .lg-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.02);
  border: 1px solid rgba(15,23,42,.04);
  transition: all .18s ease;
}

.dg-map-legend .lg-row:hover{
  background: rgba(27,138,88,.08);
  border-color: rgba(27,138,88,.15);
  transform: translateX(2px);
}

.dg-map-legend .lg-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display:inline-block;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.dg-map-legend .lg-dot::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .18s ease;
}

.dg-map-legend .lg-row:hover .lg-dot::after{
  opacity: 1;
}

.dg-map-legend .lg-dot--active{ 
  background: linear-gradient(135deg, #1b8a58, #055f38);
}
.dg-map-legend .lg-dot--active::after{
  box-shadow: 0 0 0 3px rgba(27,138,88,.25);
}

.dg-map-legend .lg-dot--soon{ 
  background: linear-gradient(135deg, #5fc3f0, #4fb6e8);
}
.dg-map-legend .lg-dot--soon::after{
  box-shadow: 0 0 0 3px rgba(79,182,232,.25);
}

.dg-map-legend .lg-label{
  color: rgba(15,23,42,.85);
  font-size: 13px;
  font-weight: 700;
}

/* Dark mode legend - PREMIUM */
body[data-theme="dark"] .dg-map-legend{
  background: rgba(10,15,12,.96);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-color: rgba(255,255,255,.16);
  box-shadow: 
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

body[data-theme="dark"] .dg-map-legend-title{
  color: rgba(230,243,236,.96);
}

body[data-theme="dark"] .dg-map-legend .lg-row{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body[data-theme="dark"] .dg-map-legend .lg-row:hover{
  background: rgba(39,217,138,.12);
  border-color: rgba(39,217,138,.25);
}

body[data-theme="dark"] .dg-map-legend .lg-dot--active{
  background: linear-gradient(135deg, #39d98a, #27d98a);
  box-shadow: 0 4px 14px rgba(39,217,138,.45);
}
body[data-theme="dark"] .dg-map-legend .lg-dot--active::after{
  box-shadow: 0 0 0 3px rgba(39,217,138,.35);
}

body[data-theme="dark"] .dg-map-legend .lg-dot--soon{
  background: linear-gradient(135deg, #5fc3f0, #4fb6e8);
  box-shadow: 0 4px 14px rgba(79,182,232,.45);
}
body[data-theme="dark"] .dg-map-legend .lg-dot--soon::after{
  box-shadow: 0 0 0 3px rgba(79,182,232,.35);
}

body[data-theme="dark"] .dg-map-legend .lg-label{
  color: rgba(230,243,236,.90);
}
.selected-pack{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(27,138,88,.18);
  background:
    radial-gradient(800px 320px at 20% 10%, rgba(27,138,88,.10), transparent 60%),
    rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  margin: 14px 0 16px;
}
.selected-pack__label{ font-size:12px; font-weight:900; color: rgba(15,23,42,.55); text-transform: uppercase; letter-spacing:.06em;}
.selected-pack__name{ font-weight:900; font-size:16px; }
.selected-pack__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Dark mode - selected pack */
body[data-theme="dark"] .selected-pack{
  background:
    radial-gradient(800px 320px at 20% 10%, rgba(39,217,138,.15), transparent 60%),
    rgba(12,20,16,.88);
  border-color: rgba(39,217,138,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
body[data-theme="dark"] .selected-pack__label{
  color: rgba(230,243,236,.65);
}
body[data-theme="dark"] .selected-pack__name{
  color: rgba(230,243,236,.95);
}
/* Mobile: keep Change + Clear side-by-side (no stacked buttons) */
@media (max-width: 520px){
  .selected-pack{ flex-direction: column; align-items: stretch; }
  .selected-pack__left{ width: 100%; }
  .selected-pack__actions{ flex-wrap: nowrap; width: 100%; }
  .selected-pack__actions .btn{
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Only disable animation for users who specifically prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials-track {
    animation: none !important;
  }
  
  /* Make scrollable instead */
  .testimonials-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* =========================
   FOOTER CONTACT — phone full width + icons in a row
   ========================= */
@media (max-width: 640px){

  .footer-social-icons{
    display: flex !important;
    flex-wrap: wrap;                 /* allows phone on its own row */
    align-items: center;
    justify-content: flex-start;     /* left aligned */
    gap: 12px;
  }

  /* Phone takes full row */
  .footer-social-icons > a.footer-phone{
    flex: 0 0 100%;
    width: 100% !important;
    height: auto !important;

    display: block !important;
    text-align: left;

    padding: 14px 16px;
    border-radius: 16px;

    white-space: nowrap;            /* prevents vertical digit split */
    overflow: hidden;
    text-overflow: ellipsis;        /* safety if very tight screens */
  }

  /* Icons become a row below */
  .footer-social-icons > a:not(.footer-phone){
    flex: 0 0 auto;
    width: 44px;                    /* keep your icon button size */
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 640px){
  .footer-social-icons > a.footer-phone{
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 100%;

    padding: 12px 14px;
    margin-right: auto;      /* keep left aligned */
    white-space: nowrap;
  }
}
/* =========================
   FOOTER BRAND: bigger logo + tighter tagline spacing
   ========================= */

/* Desktop / default */
.footer .footer-mark{
  width: 150px !important;   /* increase logo */
  height: auto !important;   /* don't force square height */
}

.footer-brand{
  gap: 6px !important;       /* reduce space between logo and tagline */
}

/* The tagline text block in footer-brand */
.footer-brand .muted{
  margin: 0 !important;      /* kill any default margins */
  line-height: 1.35;         /* tighter */
}

/* Mobile tuning */
@media (max-width: 640px){
  .footer .footer-mark{
    width: 170px !important; /* bigger on mobile as per your screenshot */
  }
  .footer-brand{
    gap: 5px !important;     /* even tighter */
  }
}
/* Remove extra space after footer on mobile */
@media (max-width: 640px){
  body{
    min-height: auto !important;
    height: auto !important;
  }

  main,
  .page-wrapper,
  .site-wrapper{
    min-height: auto !important;
  }
}
/* =========================
   METRICS — Premium Fresh Finish
   ========================= */

.metric-box{
  border-radius: 22px;
  padding: 18px 22px;
  text-align: center;

  /* Fresh premium gradient */
  background: linear-gradient(
    160deg,
    #2e8f64 0%,
    #1f7a53 45%,
    #166344 100%
  );

  border: 1px solid rgba(255,255,255,0.22);

  /* premium lighting */
  box-shadow:
    0 14px 32px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);

  color: white;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* hover lift */
.metric-box:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 44px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* number */
.metric-value{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;

  font-weight: 900;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.5px;
  line-height: 1;

  color: rgba(255,255,255,0.96);
}

/* plus sign */
.metric-plus{
  font-size: 0.72em;
  opacity: .9;
  transform: translateY(-1px);
}

/* label */
.metric-label{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}
/* =========================
   METRIC CARD — Premium shine sweep
   ========================= */

.metric-box{
  position: relative;
  overflow: hidden;
}

/* shine layer */
.metric-box::after{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.18) 60%,
    transparent 100%
  );

  transform: skewX(-20deg);
  pointer-events: none;

  animation: metricShine 4.5s linear infinite;
}

/* shine movement */
@keyframes metricShine{
  0% { left: -120%; }
  100% { left: 140%; }
}
.metric-box::after{ animation: none; }
.metric-box:hover::after{
  animation: metricShine 1.2s ease;
}
/* =========================
   MOBILE UI UPGRADE: buttons + tap feedback
   ========================= */
@media (max-width: 980px){

  /* Make all primary CTAs feel tappable */
  .btn, button, a.btn, .nav-burger, .theme-toggle,
  .nav-drawer-inner a, .footer-social-icons > a:not(.footer-phone){
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .16s ease, box-shadow .2s ease, opacity .16s ease, filter .2s ease;
  }

  /* Press feedback */
  .btn:active, button:active, a.btn:active,
  .nav-burger:active, .theme-toggle:active,
  .nav-drawer-inner a:active, .footer-social-icons > a:not(.footer-phone):active{
    transform: translateY(1px) scale(.98);
    opacity: .95;
  }

  /* Slight premium lift on hover-capable devices (some Android browsers) */
  @media (hover:hover){
    .btn:hover, button:hover, a.btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0,0,0,.14);
    }
  }
}
@media (max-width: 980px){

  /* Drawer: smoother, more premium */
  .nav-drawer{
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
  }

  /* Drawer links: pill + soft highlight */
  .nav-drawer-inner{
    padding: 14px 14px 18px;
    gap: 10px;
  }

  .nav-drawer-inner a{
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(15,23,42,.06);
  }

  .nav-drawer-inner a:hover{
    background: rgba(39, 217, 138, 0.10);
    border-color: rgba(39, 217, 138, 0.18);
  }

  .nav-drawer-inner a.is-active{
    background: rgba(39, 217, 138, 0.14);
    border-color: rgba(39, 217, 138, 0.22);
  }
}
/* =========================
   METRICS — subtle glow pulse (premium)
   ========================= */
@media (max-width: 980px){
  .metric-box{
    position: relative;
    overflow: hidden;
  }

  .metric-box::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: inherit;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,0.20),
      transparent 60%
    );
    opacity: .55;
    pointer-events:none;
    animation: metricGlow 2.8s ease-in-out infinite;
  }

  @keyframes metricGlow{
    0%,100%{ opacity: .35; transform: scale(1); }
    50%{ opacity: .62; transform: scale(1.02); }
  }
}
/* =========================
   Scroll Reveal (mobile premium)
   ========================= */
@media (max-width: 980px){
  .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px){
  /* consistent radius and spacing */
  .card, .feature-card, .testimonial-card, .metric-box{
    border-radius: 22px;
  }

  /* section padding feels premium */
  section{
    padding-top: 26px;
    padding-bottom: 26px;
  }

  /* tighten headings for mobile */
  h1, h2{
    letter-spacing: -0.02em;
  }
}

/* =========================
   FIX #11: Section heading typography hierarchy
   ========================= */
@media (max-width: 640px) {
  .section-head h2 {
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .section-head {
    margin-bottom: 20px;
  }
}

/* =========================
   FIX #13: Footer tap targets
   ========================= */
@media (max-width: 980px) {
  .footer-cols a {
    display: block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }
  .footer-social-icons a:not(.footer-phone) {
    width: 44px !important;
    height: 44px !important;
  }
  .footer-phone {
    display: block;
    padding: 10px 0;
    font-size: 16px;
  }
}

/* =========================
   FIX #16: Community section image on mobile
   ========================= */
@media (max-width: 640px) {
  .community {
    grid-template-columns: 1fr;
  }
  .community-media {
    order: -1;
    margin: -22px -22px 16px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  .community-media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
  }
}