:root {
  --light-bg: #ece5d8; 
  --card-bg: #f5efe6; 
  --card-alt: #f3eee6; 
  --body-bg: #f7f4ee; 
  --purple-dark: #3b2863; 
  --text-dark: #111111;
  --text-black: #000; 
  --text-muted: #795C39; 
}

html { scroll-behavior: smooth; }
body {font-family: 'Inter', sans-serif; background-color: var(--body-bg); color: var(--text-dark); overflow-x: hidden; margin: 0; padding: 0; }
.serif-font { font-family: 'Playfair Display', serif; }

/* Font Size Utilities */
.fs-7 { font-size: 0.8rem; }
.fs-8 { font-size: 0.8rem; }
.leter1 { letter-spacing: 1.2px; }
@media (min-width: 1200px) {
.fs-1 {font-size: 3.5rem !important;}
.fs-2 {font-size: 2.6rem !important;}
.fs-5 {font-size: 1.15rem !important;}
}

/* Common Overrides */
.shadow-sm { box-shadow: 0 .125rem 1.25rem rgba(0,0,0,.075) !important; }
.rounded { border-radius: .60rem !important; }
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { outline: none !important; }
.btn.focus, .btn:focus { outline: 0 !important; box-shadow: none !important; }
.navbar-toggler:focus { box-shadow: none; }

/* text color Utilities */
.text-dark{color: var(--purple-dark) !important;}
.text-black{color: var(--text-black) !important;}
.text-muted{color: var(--text-muted) !important;}

/* BG Utilities */
.bg-success { background-color: var(--purple-dark) !important; }
.bg-dangerlight { background-color: var(--body-bg) !important; }
.bg-dangerdark { background-color: var(--light-bg) !important; }

/* Container & Padding */
@media (min-width: 1400px) { .container { max-width: 1250px; } }
.homepad { padding-top: 5rem; padding-bottom: 5rem; }
.menupad { padding-right: 0 !important; }


/* ========================================================
   2. TOP BANNER
   ======================================================== */
.top-banner { background-color: var(--purple-dark); color: #ffffff; text-align: center; font-size: 13px; font-weight: 500; padding: 8px 15px; letter-spacing: 0.3px; }
.top-banner a { color: #d8c5ff; text-decoration: underline; transition: all 0.3s ease; }
.top-banner a:hover { color: #ffffff; }


/* ========================================================
   3. NAVBAR & MOBILE OFFCANVAS
   ======================================================== */
.navbar { background: transparent; transition: all 0.3s ease; padding: 20px 0; z-index: 1000; }
.navbar-brand { font-size: 24px; font-weight: 800; color: var(--purple-dark) !important; letter-spacing: 2px; }
.nav-link {font-size: 16px; font-weight: 500; color: #333333 !important; margin: 0 10px; transition: color 0.3s ease;}
.nav-link:hover { color: var(--purple-dark) !important; }

.btn-theme-dark {background-color: var(--purple-dark); color: #ffffff; border-radius: 50px; padding: 10px 24px; font-weight: 600; border: 2px solid var(--purple-dark); transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn-theme-dark:hover { background-color: transparent; color: var(--purple-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27,60,25,0.2); }

.mobile-toggle-btn { display: none; background: transparent; border: none; padding: 4px; cursor: pointer; }
.offcanvas-start { width: 280px; background-color: var(--body-bg); border-right: 1px solid rgba(0,0,0,0.08); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.mobile-nav-link { font-size: 16px; font-weight: 600; color: var(--purple-dark); padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.05); text-decoration: none; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; }
.mobile-nav-link:hover { color: var(--purple-dark); padding-left: 8px; }

/* ========================================================
   4. HERO SECTION
   ======================================================== */
.hero-section {position: relative; padding: 7rem 0 !important; background-size: cover; background-position: center right;}
.hero-bg-overlay { background: linear-gradient(90deg, rgba(247,244,238,0.95) 0%, rgba(247,244,238,0.85) 55%, rgba(247,244,238,0.1) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-content { position: relative; z-index: 2; }
.navbar.navbar-expand-lg { background-color: #F6F3EE !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); position: relative; z-index: 10; }
.hero-container { background: url('https://fi-html.perceptioncare.in/Tzaar/HTML/images/banner-img.png') no-repeat center right / cover; position: relative; background-color: #F6F3EE !important; padding-bottom: 30px !important; min-height: auto !important; }

/* ========================================================
   5. STATS BAR
   ======================================================== */
.stats-bar { background-color: var(--purple-dark); color: #ffffff; padding: 35px 0; margin-top: -40px; position: relative; z-index: 3; }
.stat-item { text-align: center; border-right: 1px solid rgba(255,255,255,0.15); padding: 0 15px; }
.stat-item:last-child { border-right: none; }
.stat-number {font-size: 42px; font-weight: 700; font-family: 'Playfair Display', serif; line-height: 1; margin-bottom: 8px; color: #ffffff; }
.stat-label {opacity: 0.85; text-transform: lowercase; }

/* ========================================================
   6. BRAIN CHEMISTRY SECTION (Section 3)
   ======================================================== */
.brain-sec-wrapper {background-color: var(--body-bg); }
.btn-theme-outline {background-color: transparent; color: var(--purple-dark); border-radius: 50px; padding: 10px 24px; font-size: 14px; font-weight: 600; border: 1.5px solid rgba(27,60,25,0.3); transition: all 0.3s ease; text-decoration: none; display: inline-block; }
.btn-theme-outline:hover { border-color: var(--purple-dark); background-color: rgba(27,60,25,0.05); }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tag-item {border: 1px solid rgb(231, 215, 186); padding: 5px 14px; border-radius: 20px;}

/*.product-card-box { background: #ffffff; border-radius: 24px; padding: 40px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.03);*/ display: flex; align-items: center; justify-content: center; min-height: 400px; }
.product-img { max-width: 100%; height: auto; border-radius: 12px; }
.badge-top-left { position: absolute; top: 20px; left: 20px; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); padding: 11px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--purple-dark); box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.badge-bottom-right { position: absolute; bottom: 20px; right: 20px; background: var(--purple-dark); color: #ffffff; padding: 11px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* ========================================================
   7. GABA CRAVING SECTION (Section 4)
   ======================================================== */
.gaba-card { background-color: var(--body-bg); border-radius: 20px; padding: 30px; height: 100%; border: 1px solid rgba(220, 199, 165, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gaba-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(27,60,25,0.06); }
.gaba-card-num { font-size: 56px; font-weight: 600; color: rgba(27,60,25,0.25); line-height: 1; margin-bottom: 25px; }

/* ========================================================
   8. RESEARCH & TRUST SECTION (Section 5)
   ======================================================== */
.research-card { background-color: var(--card-alt); border-radius: 20px; padding: 30px; height: 100%; border: 1px solid rgba(216, 200, 175, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.research-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(27,60,25,0.06); }
.research-card-icon { width: 44px; height: 44px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--purple-dark); margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }

/* ========================================================
   9. COMPARE TABLE SECTION (Section 6)
   ======================================================== */
.div-compare-container {background: var(--card-alt); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); }
.div-compare-header { display: flex; background-color: var(--purple-dark); border-radius: 16px 16px 0px 0px; padding: 18px 20px; color: #ffffff; font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 8px; letter-spacing: 0.3px; }
.div-compare-header > div { flex: 1; }
.div-compare-header > div:first-child { text-align: left; flex: 1.5; padding-left: 10px; }
.div-compare-row {display: flex; align-items: center; padding: 14px 16px; font-size: 15px; color: var(--text-dark); font-weight: 500; border-bottom: 1px solid rgba(27,60,25,0.12); text-align: center;}
.div-compare-row:last-child { border-bottom: none; }
.div-compare-row > div { flex: 1; }
.div-compare-row > div:first-child { text-align: left; flex: 1.5; font-weight: 600; color: var(--purple-dark);}
.icon-check { color: #1b5e20; font-size: 18px; font-weight: 900; }
.icon-cross { color: #b71c1c; font-size: 18px; font-weight: 900; }
.mobile-sticky-table-view { display: none; }

/* ========================================================
   10. PRICING SECTION (Section 7)
   ======================================================== */
.pricing-pill-tag { color: var(--purple-dark); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; display: inline-block; margin-bottom: 12px; background: rgba(41,84,39,0.1); padding: 4px 14px; border-radius: 20px; }
.pricing-heading { font-size: 42px; font-weight: 700; color: var(--purple-dark); margin-bottom: 15px; }
.pricing-subtext { font-size: 15px; color: var(--text-muted); margin-bottom: 50px; }
.price-card { background-color: var(--card-alt); border-radius: 20px; padding: 35px 30px; height: 100%; border: 1px solid rgba(216, 200, 175, 0.8); position: relative; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.price-card.featured { background-color: #ffffff; border: 2px solid var(--purple-dark); box-shadow: 0 15px 35px rgba(27,60,25,0.08); }
.price-card:hover { transform: translateY(-5px); }
.badge-popular { position: absolute; top: -12px; right: 25px; background-color: var(--purple-dark); color: #ffffff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 20px; }
.price-box { font-size: 32px; font-weight: 700; color: var(--purple-dark); margin-bottom: 20px; display: flex; align-items: baseline; gap: 5px; }
.btn-price { display: block; width: 100%; background-color: transparent; border: 1.5px solid var(--purple-dark); color: var(--purple-dark); border-radius: 50px; padding: 10px 0; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; transition: all 0.3s ease; }
.price-card.featured .btn-price { background-color: var(--purple-dark); color: #ffffff; }
.btn-price:hover { background-color: var(--purple-dark); color: #ffffff; }
.price-card .price-sub{font-size: 13px; font-weight: normal; color: #6d3fcd;}
.price-card .pricetop{font-size: 11px; letter-spacing: 0.08em; display: block; margin-bottom: 4px;}

/* ========================================================
   11. WAITLIST SECTION
   ======================================================== */
.waitlist-card { background-color: var(--purple-dark); border-radius: 40px; padding: 70px 30px; text-align: center; color: #ffffff; position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; }
.waitlist-card::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 350px; height: 350px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; pointer-events: none; }
.waitlist-btn { background-color: #ffffff; color: var(--text-dark); font-weight: 700; padding: 14px 36px; border-radius: 50px; border: none; text-decoration: none; display: inline-block; transition: transform 0.2s ease, background-color 0.2s ease; }
.waitlist-btn:hover { background-color: var(--card-bg); color: #000000; transform: translateY(-2px); }

/* ========================================================
   12. FOOTER SECTION
   ======================================================== */
.footer-wrapper { background-color: var(--light-bg); padding: 70px 0 40px 0; border-top: 1px solid rgba(0,0,0,0.05); }
.footer-brand { font-size: 24px; font-weight: 700; letter-spacing: 4px; color: var(--purple-dark); text-decoration: none; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 15px; }
.footer-socials a { color: var(--purple-dark); font-size: 18px; transition: opacity 0.2s; }
.footer-socials a:hover { opacity: 0.7; }
.footer-column-title {letter-spacing: 1.5px; color: #797979; font-family: 'Playfair Display', serif;}
.footer-links { list-style: none; padding: 0;}
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: var(--text-muted) !important; font-size: 14px; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.footer-links a:hover { color: var(--purple-dark); }
.footer-bottom-divider {border-top: 1px solid rgb(207, 195, 172) !important;}
.footer-disclaimer { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* =============== 13. BACK TO TOP BUTTON =================== */
.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; background-color: var(--purple-dark); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; border: none; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(27,60,25,0.25); text-decoration: none; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: var(--purple-dark); color: #ffffff; transform: translateY(-3px); }
.bottom-logo img {max-width: 40px;}