/* =============================================
   SADHNA AYURVEDA – LANDING PAGE STYLESHEET
   ============================================= */

/* ---------- GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---------- CSS VARIABLES ---------- */
:root {
  --brown:       #6B3A1F;
  --brown-dark:  #4a2510;
  --brown-light: #9b6040;
  --green:       #3A7D44;
  --green-light: #5aba6a;
  --gold:        #C8941A;
  --gold-light:  #e8b830;
  --cream:       #F5F0E8;
  --cream-dark:  #EDE4D4;
  --white:       #ffffff;
  --dark:        #1a0f05;
  --dark-2:      #2a1a0a;
  --muted:       #7a6050;
  --red:         #c0392b;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-accent:  'Outfit', sans-serif;

  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  --shadow-sm:  0 2px 10px rgba(107,58,31,.10);
  --shadow-md:  0 8px 30px  rgba(107,58,31,.14);
  --shadow-lg:  0 20px 60px rgba(107,58,31,.18);
  --shadow-hover: 0 28px 80px rgba(107,58,31,.24);

  --transition: all .35s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .18s ease;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width:100%; display:block; }
a  { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ==========================================
   UTILITY
   ========================================== */
.container {
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.section-tag {
  font-family: var(--font-accent);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--green);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.section-tag::before {
  content:'';
  display:inline-block;
  width:28px; height:2px;
  background: var(--green);
  border-radius:2px;
}
.section-title {
  font-family: var(--font-display);
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:700;
  color: var(--dark);
  line-height:1.2;
  margin-bottom:14px;
}
.section-title span { color: var(--brown); }
.section-desc {
  font-size:1rem;
  color: var(--muted);
  max-width:520px;
  margin: 0 auto;
}
.section-header {
  text-align:center;
  margin-bottom:56px;
}
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-light) 100%);
  color: #fff;
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.95rem;
  padding:14px 30px;
  border-radius: var(--radius-xl);
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(107,58,31,.30);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 10px 32px rgba(107,58,31,.40);
}
.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color: var(--brown);
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.95rem;
  padding:13px 28px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--brown);
  transition: var(--transition);
}
.btn-outline:hover {
  background: var(--brown);
  color:#fff;
  transform:translateY(-2px);
}
.btn-whatsapp {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.95rem;
  padding:14px 30px;
  border-radius: var(--radius-xl);
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(37,211,102,.35);
}
.btn-whatsapp:hover {
  transform:translateY(-2px);
  box-shadow: 0 10px 32px rgba(37,211,102,.45);
}
.btn-gold {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--dark);
  font-family: var(--font-accent);
  font-weight:700;
  font-size:.95rem;
  padding:14px 30px;
  border-radius: var(--radius-xl);
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(200,148,26,.35);
}
.btn-gold:hover {
  transform:translateY(-2px);
  box-shadow: 0 10px 32px rgba(200,148,26,.50);
}

/* ---------- SCROLL ANIMATIONS ---------- */
.reveal {
  opacity:0;
  transform:translateY(36px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}
.reveal-left {
  opacity:0;
  transform:translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-left.visible {
  opacity:1;
  transform:translateX(0);
}
.reveal-right {
  opacity:0;
  transform:translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-right.visible {
  opacity:1;
  transform:translateX(0);
}

/* ==========================================
   TOPBAR
   ========================================== */
.topbar {
  background: var(--dark-2);
  color: #fff;
  font-family: var(--font-accent);
  font-size:.82rem;
  font-weight:500;
  text-align:center;
  padding:10px 24px;
  overflow:hidden;
  position:relative;
}
.topbar-track {
  display:flex;
  gap:60px;
  animation: marquee 28s linear infinite;
  width:max-content;
}
.topbar-track span {
  white-space:nowrap;
  opacity:.92;
}
.topbar-track span i { color: var(--gold-light); margin-right:5px; }
@keyframes marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ==========================================
   NAVBAR
   ========================================== */
.lp-nav {
  position:sticky;
  top:0;
  z-index:900;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(107,58,31,.10);
  transition: var(--transition);
}
.lp-nav.scrolled {
  box-shadow: 0 4px 30px rgba(107,58,31,.12);
}
.lp-nav-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  max-width:1180px;
  margin:0 auto;
}
.lp-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 auto;
}
.lp-logo img {
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:50%;
  box-shadow: 0 4px 18px rgba(107, 58, 31, 0.18);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-logo:hover img {
  transform: scale(1.08) rotate(1deg);
}
.lp-logo-text { line-height:1.1; text-align:left; }
.lp-logo-name {
  display:block;
  font-family: var(--font-display);
  font-size:1.45rem;
  font-weight:800;
  color: var(--brown);
  letter-spacing:.05em;
}
.lp-logo-sub {
  display:block;
  font-family: var(--font-accent);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--green);
}
.lp-nav-actions { display:flex; align-items:center; gap:12px; }
.lp-nav-contact {
  font-family: var(--font-accent);
  font-size:.82rem;
  font-weight:500;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.lp-nav-contact i { color: var(--green); }

/* ==========================================
   HERO SECTION
   ========================================== */
.hero {
  min-height: 92vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: linear-gradient(135deg, #1a0f05 0%, #2d1a0a 45%, #3d2510 100%);
}
.hero-bg-orbs {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.25;
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-1 {
  width:500px; height:500px;
  background: radial-gradient(circle, var(--brown) 0%, transparent 70%);
  top:-100px; left:-100px;
  animation-delay:0s;
}
.orb-2 {
  width:400px; height:400px;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  bottom:-80px; right:10%;
  animation-delay:3s;
}
.orb-3 {
  width:300px; height:300px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  top:30%; right:30%;
  animation-delay:5s;
}
@keyframes orbFloat {
  0%, 100% { transform:translateY(0) scale(1); }
  50%       { transform:translateY(-30px) scale(1.06); }
}

/* Floating herb particles */
.hero-particles { position:absolute; inset:0; pointer-events:none; }
.particle {
  position:absolute;
  font-size:1.4rem;
  opacity:.12;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { transform:translateY(100vh) rotate(0deg); opacity:0; }
  10%  { opacity:.15; }
  90%  { opacity:.15; }
  100% { transform:translateY(-100px) rotate(720deg); opacity:0; }
}

.hero-inner {
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:80px 24px 60px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}
.hero-content { color:#fff; }
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(200,148,26,.18);
  border:1px solid rgba(200,148,26,.35);
  color: var(--gold-light);
  font-family: var(--font-accent);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:100px;
  margin-bottom:24px;
  backdrop-filter:blur(6px);
}
.hero-badge i { font-size:.7rem; }
.hero-title {
  font-family: var(--font-display);
  font-size:clamp(2.4rem, 5.5vw, 4rem);
  font-weight:800;
  line-height:1.1;
  margin-bottom:20px;
  letter-spacing:-.01em;
}
.hero-title .line-green { color: var(--green-light); }
.hero-title .line-gold  { color: var(--gold-light); }
.hero-desc {
  font-size:1.05rem;
  color:rgba(255,255,255,.72);
  margin-bottom:32px;
  max-width:440px;
  line-height:1.7;
}
.hero-stats {
  display:flex;
  gap:32px;
  margin-bottom:38px;
}
.stat-item { text-align:left; }
.stat-num {
  display:block;
  font-family: var(--font-display);
  font-size:1.8rem;
  font-weight:700;
  color: var(--gold-light);
  line-height:1;
}
.stat-label {
  font-family: var(--font-accent);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.06em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.hero-ctas {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.hero-trust-row {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:28px;
  flex-wrap:wrap;
}
.hero-trust-pill {
  display:flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-accent);
  font-size:.75rem;
  font-weight:500;
  color:rgba(255,255,255,.65);
}
.hero-trust-pill i { color: var(--green-light); font-size:.7rem; }

/* Hero Image Side */
.hero-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-img-glow {
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(200,148,26,.3) 0%, transparent 70%);
  filter:blur(40px);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform:scale(1); opacity:.6; }
  50%       { transform:scale(1.1); opacity:1; }
}
.hero-img-ring {
  position:relative;
  width:400px; height:400px;
  border-radius:50%;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(200,148,26,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  animation: ringRotate 20s linear infinite;
}
@keyframes ringRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.hero-img-ring::before {
  content:'';
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:1px dashed rgba(200,148,26,.18);
  animation: ringRotate 30s linear infinite reverse;
}
.hero-main-img {
  width:300px;
  height:300px;
  object-fit:contain;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.5));
  animation: heroFloat 5s ease-in-out infinite;
  border-radius:50%;
  animation: heroFloat 5s ease-in-out infinite, ringRotate 0s; /* don't inherit ring rotation */
  transform-origin:center;
  position:relative;
  z-index:2;
}

/* Counter-rotate the image to stay upright while ring rotates */
.hero-img-inner {
  animation: ringRotate 20s linear infinite reverse;
  display:flex;
  align-items:center;
  justify-content:center;
}
@keyframes heroFloat {
  0%, 100% { transform:translateY(0); }
  50%       { transform:translateY(-14px); }
}

/* Floating product badges on hero */
.hero-float-badge {
  position:absolute;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  animation: badgeFloat 4s ease-in-out infinite;
  color:#fff;
}
.hero-float-badge.badge-1 { top:10%; right:-20px; animation-delay:0s; }
.hero-float-badge.badge-2 { bottom:18%; left:-30px; animation-delay:2s; }
.hero-float-badge.badge-3 { top:60%; right:-25px; animation-delay:1s; }
@keyframes badgeFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
.float-badge-icon {
  width:36px; height:36px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  color:#fff;
  flex-shrink:0;
}
.float-badge-icon.gold-icon {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--dark);
}
.float-badge-text { line-height:1.2; }
.float-badge-text strong {
  display:block;
  font-family: var(--font-accent);
  font-size:.78rem;
  font-weight:700;
}
.float-badge-text span {
  font-size:.68rem;
  opacity:.7;
  font-family: var(--font-body);
}

/* ==========================================
   TRUST BADGES BAR
   ========================================== */
.trust-bar {
  background: var(--white);
  border-bottom:1px solid rgba(107,58,31,.08);
  padding:20px 0;
}
.trust-bar-inner {
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.trust-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px;
}
.trust-icon {
  width:42px; height:42px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color: var(--brown);
  flex-shrink:0;
}
.trust-text strong {
  display:block;
  font-family: var(--font-accent);
  font-size:.85rem;
  font-weight:600;
  color: var(--dark);
}
.trust-text span {
  font-size:.72rem;
  color: var(--muted);
}
.trust-divider {
  width:1px;
  height:36px;
  background: var(--cream-dark);
}

/* ==========================================
   PROBLEM → SOLUTION
   ========================================== */
.problem-section {
  padding:100px 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.problem-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.problem-list { margin-top:28px; }
.problem-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border-radius: var(--radius);
  background: var(--white);
  border:1px solid rgba(192,57,43,.15);
  margin-bottom:12px;
  transition: var(--transition);
}
.problem-item:hover { transform:translateX(4px); border-color:rgba(192,57,43,.3); }
.problem-item-icon {
  width:38px; height:38px;
  border-radius:10px;
  background: rgba(192,57,43,.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--red);
  font-size:1rem;
  flex-shrink:0;
}
.problem-item-text strong {
  display:block;
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.9rem;
  color: var(--dark);
  margin-bottom:2px;
}
.problem-item-text span {
  font-size:.8rem;
  color: var(--muted);
}
.solution-card {
  background: linear-gradient(135deg, var(--dark-2) 0%, #3d2510 100%);
  border-radius: 24px;
  padding:44px 40px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.solution-card::before {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:200px; height:200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(200,148,26,.25) 0%, transparent 70%);
}
.solution-card::after {
  content:'';
  position:absolute;
  bottom:-40px; left:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(58,125,68,.25) 0%, transparent 70%);
}
.solution-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(58,125,68,.25);
  border:1px solid rgba(90,186,106,.3);
  color: var(--green-light);
  font-family: var(--font-accent);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:20px;
}
.solution-title {
  font-family: var(--font-display);
  font-size:1.8rem;
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
}
.solution-title span { color: var(--gold-light); }
.solution-desc {
  font-size:.9rem;
  color:rgba(255,255,255,.68);
  line-height:1.7;
  margin-bottom:28px;
}
.solution-benefits { list-style:none; margin-bottom:32px; }
.solution-benefits li {
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-accent);
  font-size:.88rem;
  font-weight:500;
  color:rgba(255,255,255,.85);
  margin-bottom:10px;
}
.solution-benefits li i { color: var(--green-light); font-size:.8rem; }
.solution-img {
  position:absolute;
  right:-20px;
  bottom:0;
  width:180px;
  opacity:.18;
  pointer-events:none;
}

/* ==========================================
   PRODUCTS SECTION
   ========================================== */
.products-section {
  padding:100px 0;
  background: var(--white);
}
.products-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border:1px solid rgba(107,58,31,.09);
  overflow:hidden;
  transition: var(--transition);
  position:relative;
  cursor:pointer;
}
.product-card:hover {
  transform:translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color:rgba(107,58,31,.18);
}
.product-img-wrap,
.product-img-wrapper {
  position:relative;
  width: 100%;
  height: 240px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
  padding: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img-wrap::before,
.product-img-wrapper::before {
  content:'';
  position:absolute;
  top:-30px; right:-30px;
  width:100px; height:100px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(107,58,31,.12) 0%, transparent 70%);
}
.product-img-wrap img,
.product-img-wrapper img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  position: relative;
  z-index: 1;
  transition: transform .5s ease;
}
.product-card:hover .product-img-wrap img,
.product-card:hover .product-img-wrapper img {
  transform:scale(1.06);
}
.product-badges-row,
.product-badges {
  position:absolute;
  top:12px; left:12px;
  z-index: 10;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.badge {
  font-family: var(--font-accent);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:100px;
}
.badge-sale    { background: var(--red);   color:#fff; }
.badge-new     { background: var(--green); color:#fff; }
.badge-organic { background: rgba(58,125,68,.12); color:var(--green); border:1px solid rgba(58,125,68,.25); }
.badge-hot     { background: var(--gold); color:var(--dark); }

.product-wishlist {
  position:absolute;
  top:12px; right:12px;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color: var(--muted);
  transition: var(--transition-fast);
  border:1px solid rgba(107,58,31,.1);
}
.product-wishlist:hover { color: var(--red); transform:scale(1.1); }

.product-info { padding:20px; }
.product-cat {
  font-family: var(--font-accent);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--green);
  margin-bottom:6px;
}
.product-name {
  font-family: var(--font-display);
  font-size:1rem;
  font-weight:600;
  color: var(--dark);
  line-height:1.35;
  margin-bottom:8px;
}
.product-stars {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
}
.product-stars .stars {
  display:flex;
  gap:2px;
  color: var(--gold);
  font-size:.8rem;
}
.product-stars span {
  font-size:.75rem;
  color: var(--muted);
}
.product-price-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:14px;
}
.price-original {
  font-size:.85rem;
  color: var(--muted);
  text-decoration:line-through;
}
.price-sale {
  font-family: var(--font-accent);
  font-size:1.15rem;
  font-weight:700;
  color: var(--brown);
}
.price-off {
  font-family: var(--font-accent);
  font-size:.7rem;
  font-weight:700;
  color: var(--white);
  background: var(--green);
  padding:2px 8px;
  border-radius:100px;
}
.product-btn-group {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.btn-buy-now {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-light) 100%);
  color:#fff;
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.85rem;
  padding:11px 16px;
  border-radius:100px;
  transition: var(--transition);
  box-shadow:0 3px 12px rgba(107,58,31,.25);
}
.btn-buy-now:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(107,58,31,.35);
}
.btn-add-cart {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:transparent;
  color: var(--brown);
  font-family: var(--font-accent);
  font-weight:600;
  font-size:.85rem;
  padding:10px 16px;
  border-radius:100px;
  border:1.5px solid var(--brown);
  transition: var(--transition);
}
.btn-add-cart:hover {
  background: var(--brown);
  color:#fff;
}

/* ==========================================
   WHY SADHNA
   ========================================== */
.why-section {
  padding:100px 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.why-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:0;
}
.why-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding:36px 28px;
  text-align:center;
  border:1px solid rgba(107,58,31,.08);
  transition: var(--transition);
  position:relative;
  overflow:hidden;
}
.why-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--brown) 0%, var(--gold) 50%, var(--green) 100%);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .4s ease;
}
.why-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.why-card:hover::after { transform:scaleX(1); }
.why-icon {
  width:68px; height:68px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin:0 auto 20px;
  transition: var(--transition);
}
.why-card:hover .why-icon { transform:scale(1.1) rotate(-3deg); }
.why-icon-brown { background:rgba(107,58,31,.10); color:var(--brown); }
.why-icon-green  { background:rgba(58,125,68,.10); color:var(--green); }
.why-icon-gold   { background:rgba(200,148,26,.10); color:var(--gold); }
.why-icon-red    { background:rgba(192,57,43,.08);  color:var(--red); }
.why-card-title {
  font-family: var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  color: var(--dark);
  margin-bottom:10px;
}
.why-card-desc {
  font-size:.875rem;
  color: var(--muted);
  line-height:1.65;
}

/* ==========================================
   TESTIMONIALS
   ========================================== */
.testimonials-section {
  padding:100px 0;
  background: var(--white);
  overflow:hidden;
}
.testimonials-track-wrap {
  overflow:hidden;
  position:relative;
  margin-top:16px;
}
.testimonials-track-wrap::before,
.testimonials-track-wrap::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.testimonials-track-wrap::before {
  left:0;
  background:linear-gradient(to right, var(--white), transparent);
}
.testimonials-track-wrap::after {
  right:0;
  background:linear-gradient(to left, var(--white), transparent);
}
.testimonials-track {
  display:flex;
  gap:24px;
  width:max-content;
  animation: testimonialScroll 32s linear infinite;
}
.testimonials-track:hover { animation-play-state:paused; }
@keyframes testimonialScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.testimonial-card {
  width:320px;
  flex-shrink:0;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding:28px;
  border:1px solid rgba(107,58,31,.10);
  position:relative;
}
.testimonial-quote {
  position:absolute;
  top:18px; right:20px;
  font-size:2.5rem;
  color: rgba(107,58,31,.12);
  font-family: var(--font-display);
  line-height:1;
}
.testimonial-stars {
  display:flex;
  gap:3px;
  color: var(--gold);
  font-size:.85rem;
  margin-bottom:14px;
}
.testimonial-text {
  font-size:.88rem;
  color: var(--dark);
  line-height:1.7;
  margin-bottom:20px;
  font-style:italic;
}
.testimonial-author {
  display:flex;
  align-items:center;
  gap:12px;
}
.author-avatar {
  width:40px; height:40px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family: var(--font-display);
  font-size:1rem;
  font-weight:700;
  flex-shrink:0;
}
.author-info strong {
  display:block;
  font-family: var(--font-accent);
  font-size:.88rem;
  font-weight:600;
  color: var(--dark);
}
.author-info span {
  font-size:.75rem;
  color: var(--muted);
}
.verified-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family: var(--font-accent);
  font-size:.66rem;
  font-weight:600;
  color: var(--green);
  background:rgba(58,125,68,.10);
  padding:3px 8px;
  border-radius:100px;
  margin-top:4px;
}

/* ==========================================
   GUARANTEE BANNER
   ========================================== */
.guarantee-section {
  padding:80px 0;
  background: linear-gradient(135deg, var(--dark-2) 0%, #2d1a0a 50%, #3d2510 100%);
  position:relative;
  overflow:hidden;
}
.guarantee-section::before {
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:350px; height:350px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(200,148,26,.18) 0%, transparent 70%);
}
.guarantee-inner {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  align-items:center;
}
.guarantee-card {
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding:32px 28px;
  text-align:center;
  color:#fff;
  transition: var(--transition);
}
.guarantee-card:hover {
  background:rgba(255,255,255,.10);
  transform:translateY(-4px);
}
.guarantee-icon {
  font-size:2.2rem;
  margin-bottom:14px;
  display:block;
}
.guarantee-title {
  font-family: var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:8px;
  color: var(--gold-light);
}
.guarantee-desc {
  font-size:.83rem;
  color:rgba(255,255,255,.6);
  line-height:1.6;
}
.guarantee-cta-col {
  text-align:center;
}
.guarantee-headline {
  font-family: var(--font-display);
  font-size:clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:700;
  color:#fff;
  line-height:1.2;
  margin-bottom:10px;
}
.guarantee-headline span { color: var(--gold-light); }
.guarantee-sub {
  font-size:.9rem;
  color:rgba(255,255,255,.6);
  margin-bottom:28px;
}
.guarantee-cta-btns {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================
   STICKY WHATSAPP
   ========================================== */
.sticky-whatsapp {
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.wa-bubble {
  width:58px; height:58px;
  border-radius:50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.5rem;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition: var(--transition);
  cursor:pointer;
  animation: waBounce 2.5s ease-in-out infinite;
}
.wa-bubble:hover { transform:scale(1.12); }
@keyframes waBounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.wa-tooltip {
  background: var(--dark-2);
  color:#fff;
  font-family: var(--font-accent);
  font-size:.78rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:100px;
  box-shadow: var(--shadow-md);
  white-space:nowrap;
  opacity:0;
  transform:translateX(10px);
  transition: var(--transition-fast);
  pointer-events:none;
}
.sticky-whatsapp:hover .wa-tooltip {
  opacity:1;
  transform:translateX(0);
}

/* ==========================================
   FOOTER
   ========================================== */
.lp-footer {
  background: var(--dark-2);
  padding:60px 0 30px;
  color:rgba(255,255,255,.65);
}
.footer-inner {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:48px;
  margin-bottom:40px;
}
.footer-brand .lp-logo { margin-bottom:16px; }
.footer-brand-desc {
  font-size:.85rem;
  line-height:1.7;
  color:rgba(255,255,255,.5);
  margin-bottom:20px;
  max-width:280px;
}
.footer-socials {
  display:flex;
  gap:10px;
}
.social-btn {
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  transition: var(--transition-fast);
}
.social-btn:hover { background: var(--brown); color:#fff; }

.footer-col-title {
  font-family: var(--font-accent);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-bottom:16px;
}
.footer-links { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a {
  font-size:.83rem;
  color:rgba(255,255,255,.5);
  transition: var(--transition-fast);
}
.footer-links a:hover { color: var(--gold-light); padding-left:4px; }

.footer-contact-item {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:.83rem;
}
.footer-contact-item i {
  color: var(--gold);
  width:16px;
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-copy {
  font-size:.78rem;
  color:rgba(255,255,255,.35);
}
.footer-legal {
  display:flex;
  gap:20px;
}
.footer-legal a {
  font-size:.78rem;
  color:rgba(255,255,255,.35);
  transition: var(--transition-fast);
}
.footer-legal a:hover { color: var(--gold-light); }

/* ==========================================
   FLASH SALE STRIP
   ========================================== */
.flash-strip {
  background: linear-gradient(90deg, var(--red) 0%, #e84040 50%, var(--red) 100%);
  background-size:200% 100%;
  animation: flashGradient 3s ease infinite;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
@keyframes flashGradient {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.flash-strip-text {
  font-family: var(--font-accent);
  font-size:.88rem;
  font-weight:700;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.flash-strip-text i { animation: flashBolt .5s ease-in-out infinite alternate; }
@keyframes flashBolt { from { opacity:.5; } to { opacity:1; } }
.flash-timer {
  display:flex;
  align-items:center;
  gap:6px;
}
.flash-timer-box {
  background:rgba(0,0,0,.25);
  color:#fff;
  font-family: var(--font-accent);
  font-weight:700;
  font-size:.88rem;
  padding:4px 10px;
  border-radius:6px;
  min-width:36px;
  text-align:center;
}
.flash-colon { color:rgba(255,255,255,.7); font-weight:700; }
.flash-strip-cta {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color: var(--red);
  font-family: var(--font-accent);
  font-weight:700;
  font-size:.82rem;
  padding:8px 18px;
  border-radius:100px;
  transition: var(--transition-fast);
}
.flash-strip-cta:hover { background:var(--cream); }

/* Desktop default for nav WhatsApp text */
.wa-text-short { display: none; }
.wa-text-full { display: inline; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns:repeat(2, 1fr); }
  .why-grid { grid-template-columns:repeat(2, 1fr); }
  .guarantee-inner { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns:1fr;
    text-align:center;
    padding:60px 20px 40px;
    gap:36px;
  }
  .hero-content { order:1; }
  .hero-visual  { order:2; }
  .hero-stats   { justify-content:center; }
  .hero-ctas    { justify-content:center; flex-direction:column; width:100%; gap:12px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-whatsapp { width:100%; justify-content:center; }
  .hero-trust-row { justify-content:center; }
  .hero-desc    { margin:0 auto 28px; }
  .hero-img-ring { width:280px; height:280px; }
  .hero-main-img { width:210px; height:210px; }
  .hero-float-badge { display:none; }

  .problem-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr; }
  .guarantee-inner { grid-template-columns:1fr; }
  .guarantee-cta-btns { flex-direction:column; width:100%; gap:12px; }
  .guarantee-cta-btns .btn-whatsapp,
  .guarantee-cta-btns .btn-outline { width:100%; justify-content:center; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .trust-divider { display:none; }
  .trust-bar-inner { gap:4px; }
  .topbar-track { animation-duration:18s; }

  .lp-nav-contact { display:none; }
}

@media (max-width: 576px) {
  .wa-text-short { display: inline; }
  .wa-text-full { display: none; }

  .lp-nav-inner { padding: 12px 16px; justify-content: center; }
  .lp-logo { gap: 10px; margin: 0 auto; justify-content: center; }
  .lp-logo img { width: 46px; height: 46px; }
  .lp-logo-name { font-size: 1.2rem; font-weight: 800; }
  .lp-logo-sub { font-size: 0.58rem; letter-spacing: 0.16em; }

  .nav-wa-btn {
    padding: 8px 12px;
    font-size: 0.78rem;
    gap: 5px;
    white-space: nowrap;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(37,211,102,.3);
  }

  .sticky-whatsapp {
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: 16px;
    z-index: 10000;
  }
  .wa-tooltip { display: none; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns:1fr; }
  .hero-title { font-size:1.85rem; }
  .hero-img-ring { width:240px; height:240px; }
  .hero-main-img { width:180px; height:180px; }
  .hero-stats { gap:16px; }
  .stat-num { font-size:1.3rem; }
  .flash-strip { flex-direction:column; gap:10px; text-align:center; padding:10px 14px; }
  .wa-bubble { width:48px; height:48px; font-size:1.25rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-legal { justify-content:center; }
}