/*
Theme Name: Kilvassanta
Theme URI: https://kilvassanta.com
Author: Kilvassanta
Description: Premium mobile-first landing theme for Kilvassanta with WooCommerce integration.
Version: 2.0.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kilvassanta
*/

/* ==========================================
   2. VARIABLES & DESIGN SYSTEM
   ========================================== */
:root {
       /* Brand Colors - Red Theme */
       --primary-light: #FFCDD2;
       --primary-base: #E53935;
       --primary-dark: #B71C1C;
   
       /* Core Colors */
       --text-dark: #1a1a1a;
       --text-muted: #666666;
       --bg-color: #0a0a0a;
       /* Fallback for dark hero */
   
       /* Glassmorphism System */
       --glass-bg: rgba(255, 255, 255, 0.7);
       --glass-border: rgba(255, 255, 255, 0.5);
       --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
   
       /* Typography - Mobile First Default Sizes */
       --font-heading: 'Poppins', sans-serif;
       --font-body: 'Inter', sans-serif;
   
       --text-h1: 38px;
       --text-h2: 26px;
       --text-h3: 22px;
       --text-body: 16px;
       --text-small: 14px;
       --text-button: 16px;
   
       --lh-body: 1.6;
       --lh-heading: 1.15;
       --ls-heading: -0.5px;
       --ls-body: 0px;
   
       --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

       --kilv-mobile-top-header-h: calc(30px + env(safe-area-inset-top, 0px));
       --kilv-mobile-nav-h: calc(80px + env(safe-area-inset-bottom, 0px));
       --kilv-header-offset-mobile: calc(var(--kilv-mobile-top-header-h) + 16px);
       --kilv-header-offset-desktop: calc(24px + 64px + 32px);
       --hero-slider-dots-zone: 44px;
   }
   
   /* Typography Desktop Overrides */
   @media (min-width: 768px) {
       :root {
           --text-h1: 64px;
           --text-h2: 36px;
           --text-h3: 28px;
           --text-body: 18px;
           --text-small: 15px;
       }
   }
   
   /* ==========================================
      3. RESET & BASE STYLES
      ========================================== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   .screen-reader-text {
       border: 0;
       clip: rect(1px, 1px, 1px, 1px);
       clip-path: inset(50%);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
       word-wrap: normal !important;
   }
   
   body {
       background-color: #ffffff;
       color: var(--text-dark);
       font-family: var(--font-body);
       font-size: var(--text-body);
       font-weight: 400;
       line-height: var(--lh-body);
       letter-spacing: var(--ls-body);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }
   
   a {
       text-decoration: none;
       color: inherit;
       -webkit-tap-highlight-color: transparent;
   }
   
   li {
       list-style: none;
   }
   
   /* iOS zoom fix for form inputs */
   input,
   textarea,
   select {
       font-family: var(--font-body);
       font-size: 16px !important;
       line-height: 1.5;
   }
   
   /* Headings Base */
   h1,
   h2,
   h3 {
       font-family: var(--font-heading);
       line-height: var(--lh-heading);
       letter-spacing: var(--ls-heading);
   }
   
   /* ==========================================
      4. GLOBAL UI COMPONENTS
      ========================================== */
   .glass-pill {
       background: var(--glass-bg);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
       box-shadow: var(--glass-shadow);
       border-radius: 999px;
       z-index: 100;
   }
   
   .btn-primary {
       background: var(--primary-base);
       color: #fff;
       padding: 14px 32px;
       border-radius: 99px;
       font-family: var(--font-body);
       font-size: var(--text-button);
       font-weight: 600;
       border: none;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
       min-height: 48px;
   }
   
   .btn-primary:hover {
       background: var(--primary-dark);
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3);
   }
   
   /* ==========================================
      5. NAVIGATION
      ========================================== */
   /* Desktop Nav (Floats Top) */
   .desktop-nav {
       position: fixed;
       top: 24px;
       left: 50%;
       transform: translateX(-50%);
       width: 90%;
       max-width: 1100px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 24px;
   }
   
   .nav-logo {
       font-family: var(--font-heading);
       font-size: 1.25rem;
       font-weight: 700;
       letter-spacing: -0.5px;
    color: #c63b39;
   }

   .nav-logo-img {
       height: 50px;
       width: auto;
       display: block;
   }
    
   .nav-links {
       display: flex;
       gap: 32px;
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
   }
   
   .nav-link {
       font-size: 15px;
       font-weight: 500;
       color: var(--text-muted);
       position: relative;
       padding: 4px 0;
       transition: var(--transition);
   }
   
   .nav-link:hover {
       color: var(--text-dark);
   }
   
   .nav-link.active {
       color: var(--primary-base);
   }
   
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: -2px;
       left: 0;
       width: 0%;
       height: 2px;
       background: var(--primary-base);
       border-radius: 2px;
       transition: var(--transition);
   }
   
   .nav-link:hover::after,
   .nav-link.active::after {
       width: 100%;
   }
   
   /* Mobile top bar (logo only, fixed to viewport top) */
   .mobile-top-header {
       display: none;
   }
   
   /* Mobile Nav (full-width bar, fixed to viewport bottom) */
   .mobile-nav {
       display: none;
   }
   
   @media (max-width: 767px) {
       /* Reserve space so page content is not hidden behind the bars */
        /*body:has(.mobile-top-header) {
           --kilv-mobile-top-header-h: calc(50px + env(safe-area-inset-top, 0px));
           padding-top: var(--kilv-mobile-top-header-h);
       } */
   
       body.mobile-menu-open {
           overflow: hidden;
       }
   
       body:has(.mobile-nav) {
           /* +1px: matches .mobile-nav bottom:-1px bleed so content is not covered */
           padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
       }
   
       .desktop-nav {
           display: none;
       }
   
       .mobile-top-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           position: fixed;
           top: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 80%;
           max-width: 100%;
           box-sizing: border-box;
           padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px;
           z-index: 120;
       }
   
       /* Attached top: rounded bottom only; glass */
       .mobile-top-header.glass-pill {
           border-radius: 0 0 22px 22px;
           background: rgba(255, 255, 255, 0.82);
           backdrop-filter: blur(24px);
           -webkit-backdrop-filter: blur(24px);
           border-width: 0 1px 1px;
           border-style: solid;
           border-color: rgba(255, 255, 255, 0.65);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
       }
   
       .mobile-top-header .nav-logo {
           font-size: 1.1rem;
           flex: 1;
           min-width: 0;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           text-align: left;
       }

       .mobile-top-header .nav-logo-img {
           height: 40px;
       }
    
       .mobile-menu-toggle {
           flex-shrink: 0;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 44px;
           height: 44px;
           margin: -6px -8px -6px 0;
           padding: 0;
           border: none;
           border-radius: 12px;
           background: transparent;
           color: var(--text-dark);
           cursor: pointer;
           transition: var(--transition);
           -webkit-tap-highlight-color: transparent;
       }
   
       .mobile-menu-toggle:hover,
       .mobile-menu-toggle:focus-visible {
           background: rgba(229, 57, 53, 0.1);
           color: var(--primary-base);
           outline: none;
       }
   
       .mobile-menu-toggle .mobile-menu-icon {
           font-size: 26px;
           line-height: 1;
       }
   
       .mobile-menu-toggle .mobile-menu-icon-close {
           display: none;
       }
   
       .mobile-menu-toggle[aria-expanded='true'] .mobile-menu-icon-open {
           display: none;
       }
   
       .mobile-menu-toggle[aria-expanded='true'] .mobile-menu-icon-close {
           display: block;
       }
   
       .mobile-menu-sheet {
           position: fixed;
           inset: 0;
           z-index: 115;
           pointer-events: none;
       }
   
       .mobile-menu-sheet[hidden] {
           display: none !important;
       }
   
       .mobile-menu-sheet:not([hidden]) {
           display: block;
       }
   
       .mobile-menu-sheet.is-open {
           pointer-events: auto;
       }
   
       .mobile-menu-backdrop {
           position: absolute;
           inset: 0;
           width: 100%;
           height: 100%;
           border: none;
           padding: 0;
           margin: 0;
           background: rgba(0, 0, 0, 0.35);
           backdrop-filter: blur(2px);
           -webkit-backdrop-filter: blur(2px);
           cursor: pointer;
           opacity: 0;
           transition: opacity 0.25s ease;
       }
   
       .mobile-menu-sheet.is-open .mobile-menu-backdrop {
           opacity: 1;
       }
   
       .mobile-menu-panel {
           position: absolute;
           left: 50%;
           top:2%;
           transform: translateX(-50%) translateY(-12px);
           width: 80%;
           max-width: 100%;
           box-sizing: border-box;
           top: var(--kilv-mobile-top-header-h, calc(50px + env(safe-area-inset-top, 0px)));
           padding: 35px 18px 20px;
           max-height: min(70vh, calc(100vh - var(--kilv-mobile-top-header-h, 50px) - 24px));
           overflow-y: auto;
           -webkit-overflow-scrolling: touch;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.22s ease, transform 0.22s ease;
           border-radius: 0 0 20px 20px;
           z-index: 1;
       }
   
       .mobile-menu-sheet.is-open .mobile-menu-panel {
           opacity: 1;
           transform: translateX(-50%) translateY(0);
           pointer-events: auto;
       }
   
       .mobile-menu-panel.glass-pill {
           border-radius: 0 0 20px 20px; 
           /* border-radius:20px; */
           background: rgba(255, 255, 255, 0.94);
           backdrop-filter: blur(20px);
           -webkit-backdrop-filter: blur(20px);
           border-width: 0 1px 1px;
           border-style: solid;
           border-color: rgba(255, 255, 255, 0.6);
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
       }
   
       .mobile-menu-list {
           list-style: none;
           margin: 0 0 16px;
           padding: 0;
       }
   
       .mobile-menu-list li {
           border-bottom: 1px solid rgba(0, 0, 0, 0.06);
       }
   
       .mobile-menu-list li:last-child {
           border-bottom: none;
       }
   
       .mobile-menu-link {
           display: block;
           padding: 14px 4px;
           font-size: 16px;
           font-weight: 500;
           color: var(--text-dark);
           transition: var(--transition);
       }
   
       .mobile-menu-link:hover,
       .mobile-menu-link:focus-visible {
           color: var(--primary-base);
           outline: none;
       }
   
       .mobile-menu-cta {
           width: 100%;
           text-align: center;
           box-sizing: border-box;
       }
   
       .mobile-nav {
            display: flex;
            position: fixed;
            
            /* Float it 16px above the bottom screen edge/safe area */
            bottom: calc(4px + env(safe-area-inset-bottom, 0px)); 
            
            /* Center the pill horizontally */
            left: 50%;
            width: 90%; 
            max-width: 400px; /* Prevents it from getting too wide on large phones */
            
            justify-content: space-evenly;
            align-items: center;
            
            /* Symmetrical padding inside the pill */
            padding: 10px 16px; 
            box-sizing: border-box;
            
            /* Smooth Smart Nav Animation (Combines centering X and animation Y) */
            transform: translate(-50%, 0);
            transition: transform 0.3s cubic-bezier(0.3, 0, 0, 1);
            will-change: transform;
        }

        /* Class injected by JS to hide the menu when scrolling down */
        .mobile-nav.nav-hidden {
            /* Keeps it centered (X) while pushing it off-screen (Y) */
            transform: translate(-50%, 250%);
            pointer-events: none;
        }

        .mobile-nav.glass-pill {
            background: rgba(255, 240, 240, 0.88);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(229, 57, 53, 0.18);
            box-shadow:
                var(--glass-shadow),
                0 2px 14px rgba(183, 28, 28, 0.08);
        }

       .m-nav-item {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 2px;
           color: var(--text-muted);
           flex: 1 1 0;
           min-width: 0;
           max-width: 100%;
           padding: 4px 2px;
           border-radius: 8px;
           transition: var(--transition);
       }
   
       .m-nav-icon {
           font-size: 20px;
           transition: var(--transition);
       }
   
       .m-nav-label {
           font-size: 10px;
           font-weight: 500;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           width: 100%;
           text-align: center;
       }
   
       .m-nav-item:hover {
           color: var(--primary-dark);
           background-color: rgba(255, 205, 210, 0.3);
       }
   
       .m-nav-item.active {
           color: var(--primary-base);
       }
   
       .m-nav-item.active .m-nav-icon {
           transform: translateY(-2px);
       }
   }
   
   @media (min-width: 768px) {
       .mobile-menu-sheet {
           display: none !important;
       }
   }
   
   /* ==========================================
      6. HERO SECTION (Split layout)
      ========================================== */
   .hero-split-section {
       width: 100%;
       background-color: #F3F4F6;
       overflow: hidden;
       padding-top: var(--kilv-header-offset-mobile);
       position: relative;
   }

   .hero-slider-viewport {
       width: 100%;
       overflow: hidden;
       position: relative;
       max-height: calc(100svh - var(--kilv-header-offset-mobile));
   }

   .hero-slider-track {
       display: flex;
       width: 100%;
       align-items: stretch;
       min-height: 100%;
       height: 100%;
       transition: transform var(--hero-slider-transition-ms, 600ms) ease;
       will-change: transform;
   }

   .hero-slide {
       flex: 0 0 100%;
       width: 100%;
       min-width: 100%;
       min-height: 100%;
       display: flex;
       flex-direction: column;
   }

   .hero-slide .hero-split-container {
       flex: 1 1 auto;
   }

   .hero-slide--impact .hero-slide-inner {
       flex: 1 1 auto;
       display: flex;
       flex-direction: column;
       min-height: 100%;
       width: 100%;
   }

   .hero-slide--impact .hero-slide-footer {
       flex-shrink: 0;
       margin-top: auto;
       padding: 20px 16px 24px calc(16px + var(--hero-slider-dots-zone));
   }

   .hero-slider-dots {
       position: absolute;
       left: 16px;
       bottom: 16px;
       z-index: 20;
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 0;
   }

   .hero-slider-dot {
       width: 10px;
       height: 10px;
       border: 0;
       border-radius: 999px;
       padding: 0;
       background: #D1D5DB;
       cursor: pointer;
       transition: var(--transition);
   }

   .hero-slider-dot.is-active {
       background: var(--primary-base);
       transform: scale(1.1);
   }

   .hero-slider-dot:focus-visible {
       outline: 2px solid var(--primary-base);
       outline-offset: 2px;
   }

   .hero-slider-nav {
       display: none;
       position: absolute;
       top: calc(var(--kilv-header-offset-mobile) / 2 + 50%);
       z-index: 25;
       width: 44px;
       height: 44px;
       border: 1px solid rgba(255, 255, 255, 0.5);
       border-radius: 999px;
       padding: 0;
       /* background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(8px); */
       background-color: transparent;
       color: var(--text-dark);
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: var(--transition);
       font-size: 18px;
   }

   .hero-slider-nav--prev {
       left: 16px;
       transform: translateY(-50%);
   }

   .hero-slider-nav--next {
       right: 16px;
       transform: translateY(-50%);
   }

   .hero-slider-nav:hover {
       border-color: var(--primary-base);
       color: var(--primary-base);
   }

   .hero-slider-nav:focus-visible {
       outline: 2px solid var(--primary-base);
       outline-offset: 2px;
   }

   .hero-feature-grid {
       list-style: none;
       display: grid;
       grid-template-columns: 1fr;
       gap: 12px;
       margin-bottom: 24px;
   }

   .hero-feature-item {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       font-weight: 600;
       font-size: 0.95rem;
       color: var(--text-dark);
   }

   .hero-feature-icon {
       font-size: 22px;
       color: var(--primary-base);
       flex-shrink: 0;
       margin-top: 1px;
   }

   .hero-mini-features {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 10px;
       margin-bottom: 24px;
   }

   .hero-mini-feature {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.75);
       border: 1px solid rgba(255, 255, 255, 0.8);
       font-weight: 600;
       font-size: 0.9rem;
       color: var(--text-dark);
   }

   .hero-mini-feature-icon {
       font-size: 20px;
       color: var(--primary-base);
       flex-shrink: 0;
   }

   .hero-slide-footer {
       background: #FCE8E6;
       padding: 20px 16px 24px;
   }

   .hero-slide-footer-title {
       font-size: 1.1rem;
       font-weight: 800;
       margin-bottom: 14px;
       color: var(--text-dark);
   }

   .hero-slide-footer-list {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .hero-slide-footer-list li {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       font-size: 0.92rem;
       font-weight: 600;
       color: var(--text-dark);
   }

   .hero-slide-footer-icon {
       font-size: 20px;
       color: var(--primary-base);
       flex-shrink: 0;
       margin-top: 1px;
   }

   .hero-slide--health .hero-title .text-accent {
       display: block;
   }

   .hero-slide--impact .hero-title .text-accent {
       display: block;
   }

   .hero-description--mobile {
       display: none;
   }

   .hero-slider .hero-split-container {
       min-height: auto;
       padding-bottom: 48px;
   }

   .hero-slider .hero-slide--impact .hero-split-container {
       padding-bottom: 48px;
   }

   @media (min-width: 768px) {
       .hero-split-section {
           padding-top: var(--kilv-header-offset-desktop);
       }

       .hero-slider-viewport {
           max-height: calc(100svh - var(--kilv-header-offset-desktop));
       }
   }

   .hero-split-section .hero-split-container {
       display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: 1fr;
       width: 100%;
       min-height: 80vh;
       padding: 0;
   }

   .hero-split-section .hero-text-content {
       grid-column: 1 / -1;
       grid-row: 1 / -1;
       z-index: 2;
       padding: 16px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .hero-split-section .text-glass-card {
       background: rgba(255, 255, 255, 0.55);
       backdrop-filter: blur(2px);
       -webkit-backdrop-filter: blur(2px);
       border: 1px solid rgba(255, 255, 255, 0.6);
       padding: 24px 20px;
       border-radius: 16px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   }

   .hero-split-section .hero-kicker {
       display: block;
       font-size: 0.8rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       font-weight: 800;
       color: var(--primary-base);
       margin-bottom: 8px;
   }

   .hero-split-section .hero-title {
       font-size: 2rem;
       line-height: 1.15;
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 12px;
       color: var(--text-dark);
   }

   .hero-split-section .text-accent {
       color: var(--primary-base);
   }

   .hero-split-section .hero-description {
       font-size: 1rem;
       color: var(--text-dark);
       font-weight: 500;
       margin-bottom: 20px;
   }

   .hero-split-section .hero-trust-list {
       list-style: none;
       margin-bottom: 24px;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .hero-split-section .hero-trust-list li {
       display: flex;
       align-items: center;
       font-weight: 700;
       font-size: 0.95rem;
       color: var(--text-dark);
   }

   .hero-split-section .hero-trust-icon {
       font-size: 18px;
       color: var(--primary-base);
       margin-right: 10px;
       flex-shrink: 0;
   }

   .hero-split-section .hero-actions {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .hero-split-section .hero-btn {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       padding: 12px 20px;
       font-size: 0.95rem;
       font-weight: 700;
       border-radius: 8px;
       text-decoration: none;
       transition: var(--transition);
       cursor: pointer;
       text-align: center;
   }

   .hero-split-section .hero-btn-primary {
       background-color: var(--primary-base);
       color: #FFFFFF;
       border: 2px solid var(--primary-base);
       box-shadow: 0 4px 12px rgba(229, 57, 53, 0.2);
   }

   .hero-split-section .hero-btn-primary:hover {
       background-color: var(--primary-dark);
       border-color: var(--primary-dark);
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(229, 57, 53, 0.3);
   }

   .hero-split-section .hero-btn-secondary {
       background-color: transparent;
       color: var(--text-dark);
       border: 2px solid var(--text-dark);
   }

   .hero-split-section .hero-btn-secondary:hover {
       background-color: rgba(255, 255, 255, 0.8);
   }

   .hero-split-section .hero-image-content {
       grid-column: 1 / -1;
       grid-row: 1 / -1;
       z-index: 1;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
   }

   .hero-split-section .image-glow {
       position: absolute;
       width: 250px;
       height: 250px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(229, 57, 53, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 1;
   }

   .hero-split-section .hero-image {
       width: 65%;
       max-width: 320px;
       height: 100%;
       max-height: 65%;
       object-fit: contain;
       object-position: center;
       position: relative;
       z-index: 2;
   }

   .hero-image-content--curved .image-glow {
       width: 280px;
       height: 280px;
   }

   .hero-image-content--curved .hero-image {
       width: 88%;
       max-width: 380px;
       height: auto;
       max-height: 72%;
       object-fit: contain;
       object-position: center;
   }

   @media (max-width: 991px) {
       .hero-split-section .hero-split-container {
           display: flex;
           flex-direction: column;
           min-height: calc(100svh - var(--kilv-header-offset-mobile));
           padding-bottom: 28px;
       }

       .hero-slider .hero-split-container {
           min-height: auto;
           padding-bottom: 48px;
       }

       .hero-split-section .hero-image-content {
           order: -1;
           grid-column: auto;
           grid-row: auto;
           min-height: 240px;
           height: auto;
           flex-shrink: 0;
           padding: 8px 0 0;
       }

       .hero-split-section .hero-text-content {
           grid-column: auto;
           grid-row: auto;
           z-index: auto;
           padding: 12px 16px 0;
           justify-content: flex-start;
       }

       .hero-split-section .text-glass-card {
           background: rgba(255, 255, 255, 0.92);
           backdrop-filter: none;
           -webkit-backdrop-filter: none;
           padding: 24px 20px;
       }

       .hero-split-section .hero-title {
           font-size: clamp(2rem, 7vw, 2.75rem);
       }

       .hero-split-section .hero-description {
           font-size: 1.05rem;
       }

       .hero-split-section .hero-trust-list {
           gap: 10px;
       }

       .hero-split-section .hero-image {
           width: 88%;
           max-width: 380px;
           max-height: none;
           height: auto;
       }

       .hero-split-section .image-glow {
           width: 280px;
           height: 280px;
       }
   }

   @media (max-width: 767px) {
       .hero-split-section .hero-split-container {
           position: relative;
           min-height: auto;
           padding-bottom: 32px;
       }

       .hero-split-section .hero-image-content {
           z-index: 1;
           min-height: 220px;
           padding: 8px 16px 40px;
       }

       .hero-split-section .hero-text-content {
           z-index: 2;
           margin-top: -48px;
           padding: 0 16px;
       }

       .hero-split-section .text-glass-card {
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
       }

       .hero-split-section .hero-image {
           width: 100%;
           max-width: 320px;
       }

       .hero-slider .hero-split-container {
           padding-bottom: 48px;
           flex: 1 1 auto;
           min-height: 0;
           height: 100%;
       }

       .hero-slider .hero-slide {
           height: 100%;
           min-height: 0;
       }

       .hero-slider .hero-slide--impact .hero-slide-inner {
           min-height: 0;
           height: 100%;
       }

       .hero-slider-viewport {
           max-height: none;
       }

       .hero-slider-dots {
           left: 50%;
           transform: translateX(-50%);
       }

       .hero-description--desktop {
           display: none;
       }

       .hero-description--mobile {
           display: block;
       }

       .hero-slider .hero-image-content {
           min-height: 160px;
           padding: 4px 16px 24px;
           flex-shrink: 0;
       }

       .hero-slider .hero-image-content .image-glow {
           width: 200px;
           height: 200px;
       }

       .hero-slider .hero-image,
       .hero-slider .hero-image-content--circle .hero-image {
           width: 85%;
           max-width: 240px;
           height: auto;
           max-height: none;
           object-fit: contain;
       }

       .hero-slider .hero-image-content--circle .hero-image {
           border-radius: 50%;
       }

       .hero-slider .hero-text-content {
           margin-top: -32px;
           flex: 1 1 auto;
           display: flex;
           flex-direction: column;
           min-height: 0;
       }

       .hero-slider .text-glass-card {
           padding: 18px 20px;
           flex: 1 1 auto;
           display: flex;
           flex-direction: column;
           min-height: 0;
       }

       .hero-slider .hero-title {
           font-size: clamp(1.75rem, 6.5vw, 2.25rem);
           margin-bottom: 12px;
       }

       .hero-slider .hero-description {
           font-size: 0.98rem;
           margin-bottom: 16px;
       }

       .hero-slider .hero-trust-list {
           gap: 8px;
           margin-bottom: 16px;
       }

       .hero-slider .hero-trust-list li {
           font-size: 0.88rem;
       }

       .hero-slider .hero-actions {
           gap: 10px;
           flex-wrap: wrap;
           margin-top: auto;
           padding-top: 16px;
           width: 100%;
       }

       .hero-slider .hero-btn {
           padding: 11px 18px;
           font-size: 0.9rem;
           width: 100%;
           justify-content: center;
       }

       .hero-slider .hero-feature-grid {
           gap: 10px;
       }

       .hero-slider .hero-mini-features {
           gap: 8px;
       }

       .hero-slider .hero-mini-feature {
           padding: 8px 10px;
           font-size: 0.85rem;
       }

       .hero-slider .hero-slide-footer {
           padding: 16px 16px 16px calc(16px + var(--hero-slider-dots-zone));
       }

       .hero-slider .hero-slide-footer-title {
           font-size: 1rem;
           margin-bottom: 10px;
       }

       .hero-slider .hero-slide-footer-list {
           gap: 10px;
       }

       .hero-slider .hero-slide-footer-list li {
           font-size: 0.85rem;
       }

       .hero-slider .hero-slide--impact .hero-split-container {
           padding-bottom: 48px;
       }

       .hero-slider-nav {
           display: flex;
           top: calc(var(--kilv-header-offset-desktop) / 2 + 50%);
       }
   }

   @media (min-width: 768px) and (max-width: 991px) {
       .hero-split-section .hero-split-container {
           min-height: calc(100svh - var(--kilv-header-offset-desktop));
       }

       .hero-slider .hero-split-container {
           min-height: auto;
       }

       .hero-split-section .hero-text-content {
           padding: 16px 32px 0;
       }

       .hero-split-section .hero-image {
           max-width: 420px;
       }

       .hero-split-section .image-glow {
           width: 340px;
           height: 340px;
       }
       .hero-slider-nav {
        display: flex;
        top: calc(var(--kilv-header-offset-desktop) / 2 + 50%);
        background-color: transparent;
        backdrop-filter: none;
    }
   }

   @media (min-width: 992px) {
       .hero-split-section .hero-split-container {
           display: flex;
           flex-direction: row;
           align-items: center;
           min-height: 85vh;
           padding: 0;
           max-width: 1440px;
           margin: 0 auto;
       }

       .hero-slider .hero-split-container {
           min-height: auto;
           padding-bottom: 48px;
       }

       .hero-split-section .hero-text-content {
           width: 60%;
           padding: 60px 4% 60px 8%;
       }

       .hero-split-section .text-glass-card {
           background: transparent;
           backdrop-filter: none;
           -webkit-backdrop-filter: none;
           border: none;
           padding: 0;
           box-shadow: none;
       }

       .hero-split-section .hero-kicker {
           font-size: 0.85rem;
           margin-bottom: 12px;
       }

       .hero-split-section .hero-title {
           font-size: 4rem;
           margin-bottom: 20px;
       }

       .hero-split-section .hero-description {
           font-size: 1.25rem;
           color: var(--text-muted);
           font-weight: 400;
           margin-bottom: 28px;
       }

       .hero-split-section .hero-trust-list {
           margin-bottom: 32px;
           gap: 12px;
       }

       .hero-split-section .hero-trust-list li {
           font-weight: 600;
           font-size: 1rem;
       }

       .hero-split-section .hero-trust-icon {
           font-size: 20px;
           margin-right: 12px;
       }

       .hero-split-section .hero-btn-secondary {
           border: 2px solid #D1D5DB;
       }

       .hero-split-section .hero-btn-secondary:hover {
           background-color: #E5E7EB;
           border-color: #D1D5DB;
       }

       .hero-split-section .hero-actions {
           flex-direction: row;
           gap: 16px;
       }

       .hero-split-section .hero-btn {
           padding: 16px 32px;
           font-size: 1rem;
       }

       .hero-split-section .hero-image-content {
           width: 45%;
           height: 100%;
           min-height: 600px;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .hero-slider .hero-image-content {
           min-height: auto;
       }

       .hero-split-section .image-glow {
           width: 600px;
           height: 600px;
       }

       .hero-split-section .hero-image {
           width: 100%;
           max-width: none;
           height: auto;
           max-height: 90vh;
       }

       .hero-split-section .fade-in-up {
           opacity: 0;
           transform: translateY(20px);
           transition: opacity 0.8s ease-out, transform 0.8s ease-out;
       }

       .hero-split-section .fade-in-up.is-visible {
           opacity: 1;
           transform: translateY(0);
       }

       .hero-feature-grid {
           grid-template-columns: 1fr 1fr;
           gap: 16px 20px;
           margin-bottom: 32px;
       }

       .hero-mini-features {
           flex-direction: row;
           flex-wrap: wrap;
           gap: 12px;
           margin-bottom: 32px;
       }

       .hero-mini-feature {
           flex: 1 1 calc(33.333% - 12px);
           min-width: 180px;
       }

       .hero-image-content--curved .hero-image {
           width: 100%;
           max-width: none;
           max-height: min(520px, 70vh);
       }

       .hero-image-content--curved .image-glow {
           width: 600px;
           height: 600px;
       }

       .hero-image-content--circle .hero-image {
           border-radius: 50%;
           aspect-ratio: 1 / 1;
           object-fit: cover;
           max-height: min(520px, 70vh);
       }

       .hero-slide-footer {
           max-width: 1440px;
           margin: 0 auto;
           padding: 24px 8%;
       }

       .hero-slide--impact .hero-slide-footer {
           padding: 24px 8% 24px calc(8% + var(--hero-slider-dots-zone));
       }

       .hero-slide-footer-list {
           flex-direction: row;
           gap: 24px;
       }

       .hero-slide-footer-list li {
           flex: 1;
       }

       .hero-slider-dots {
           left: 8%;
       }

       .hero-slider-nav {
        display: flex;
           width: 48px;
           height: 48px;
           font-size: 20px;
           top: calc(var(--kilv-header-offset-desktop) / 2 + 50%);
       }

       .hero-slider-nav--prev {
           left: 24px;
       }

       .hero-slider-nav--next {
           right: 24px;
       }
   }

   /* ==========================================
      7. CHALLENGE & SOLUTION SECTION
      ========================================== */
   .cs-section {
       padding: 64px 20px;
       background-color: #FAFAFA;
       color: var(--text-dark);
       position: relative;
       z-index: 10;
   }
   
   .cs-container {
       max-width: 1000px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .cs-grid {
       display: flex;
       flex-direction: column;
       gap: 12px;
       position: relative;
   }
   
   .cs-card {
       background: #ffffff;
       border-radius: 20px;
       padding: 24px;
       display: flex;
       flex-direction: column;
       transition: var(--transition);
       border: 1px solid rgba(0, 0, 0, 0.04);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03);
       flex: 1;
       position: relative;
       overflow: hidden;
   }
   
   .cs-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
   }
   
   .cs-challenge {
       background: linear-gradient(145deg, #ffffff, #fcfcfc);
       border-bottom: 3px solid var(--primary-dark);
   }
   
   .cs-solution {
       background: linear-gradient(145deg, #ffffff, rgba(229, 57, 53, 0.02));
       border-bottom: 3px solid var(--primary-base);
   }
   
   .cs-icon-wrapper {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin-bottom: 16px;
       transition: var(--transition);
   }
   
   .challenge-icon {
       background: #f5f5f5;
       color: var(--primary-dark);
   }
   
   .solution-icon {
       background: var(--primary-light);
       color: var(--primary-base);
   }
   
   .cs-card:hover .solution-icon {
       background: var(--primary-base);
       color: #ffffff;
       transform: scale(1.05);
   }
   
   .cs-label {
       font-family: var(--font-body);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 8px;
   }
   
   .cs-challenge .cs-label {
       color: var(--text-muted);
   }
   
   .cs-solution .cs-label {
       color: var(--primary-base);
   }
   
   .cs-subheadline {
       font-size: 18px;
       line-height: 1.3;
       margin-bottom: 12px;
       color: var(--text-dark);
   }
   
   .cs-desc {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.5;
       margin-bottom: 0;
   }
   
   .cs-desc strong {
       font-weight: 600;
   }
   
   .cs-challenge .cs-desc strong {
       color: var(--primary-dark);
   }
   
   .cs-solution .cs-desc strong {
       color: var(--primary-base);
   }
   
   .cs-divider {
       display: flex;
       align-items: center;
       justify-content: center;
       margin: -16px 0;
       z-index: 5;
   }
   
   .arrow-circle {
       width: 40px;
       height: 40px;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--primary-base);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   }
   
   .arrow-icon {
       font-size: 18px;
       transform: rotate(90deg);
       transition: var(--transition);
   }
   
   .cs-action {
       display: flex;
       flex-direction: column;
       justify-content: center;
       margin-top: 8px;
       gap: 10px;
   }
   
   @media (min-width: 768px) {

        .cs-action {
           flex-direction: row;
           column-gap:30px;
        }
       .cs-section {
           padding: 100px 48px;
       }
   
       .cs-grid {
           flex-direction: row;
           align-items: stretch;
           gap: 0;
       }
   
       .cs-card {
           padding: 40px 32px;
       }
   
       .cs-challenge {
           margin-right: 20px;
       }
   
       .cs-solution {
           margin-left: 20px;
       }
   
       .cs-subheadline {
           font-size: 22px;
       }
   
       .cs-divider {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           margin: 0;
       }
   
       .arrow-icon {
           transform: rotate(0deg);
       }
   }
   
   /* ==========================================
      8. TRUST & BENEFITS SECTION
      ========================================== */
   .trust-section-alt {
       padding: 64px 20px;
       background-color: #ffffff;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .trust-container-alt {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .trust-benefits {
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .tb-card {
       display: flex;
       align-items: flex-start;
       gap: 20px;
   }
   
   .tb-icon-wrapper {
       color: var(--primary-base);
       font-size: 28px;
       flex-shrink: 0;
       background: var(--primary-light);
       width: 52px;
       height: 52px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 16px;
       transition: var(--transition);
   }
   
   .tb-card:hover .tb-icon-wrapper {
       background: var(--primary-base);
       color: #ffffff;
   }
   
   .tb-content {
       display: flex;
       flex-direction: column;
   }
   
   .tb-title {
       font-size: 18px;
       font-weight: 600;
       color: var(--text-dark);
       margin-bottom: 8px;
       line-height: 1.3;
   }
   
   .tb-desc {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.6;
       margin-bottom: 0;
   }
   
   @media (min-width: 768px) {
       .trust-section-alt {
           padding: 80px 48px;
       }
   
       .trust-benefits {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 40px 32px;
       }
   }
   
   @media (min-width: 1024px) {
       .trust-section-alt {
           padding: 120px 48px;
       }
   }
   
   /* ==========================================
      9. PURCHASE / PRODUCT SHOWCASE SECTION
      ========================================== */
   .purchase-section {
       padding: 64px 20px;
       background-color: #FAFAFA;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }

   .product-type-switcher {
       display: flex;
       gap: 8px;
       justify-content: center;
   }

   .product-type-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 10px 24px;
       border-radius: 999px;
       border: 2px solid rgba(0, 0, 0, 0.12);
       background: #fff;
       color: #555;
       font-size: 0.95rem;
       font-weight: 600;
       cursor: pointer;
       transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
   }

   .product-type-btn:hover {
       border-color: var(--primary-base);
       color: var(--primary-base);
   }

   .product-type-btn.active {
       background: var(--primary-base);
       border-color: var(--primary-base);
       color: #fff;
       box-shadow: 0 2px 12px rgba(229, 57, 53, 0.25);
   }
   
   .purchase-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 40px;
   }
   
   .product-visual {
       position: relative;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       padding: 24px 16px;
       min-height: 300px;
       background: #ffffff;
       border-radius: 32px;
       border: 1px solid rgba(0, 0, 0, 0.03);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
   }
   
   .visual-glow {
       position: absolute;
       width: 70%;
       height: 70%;
       background: radial-gradient(circle, rgba(229, 57, 53, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
       z-index: 1;
   }
   
   .visual-badges {
       /* position: absolute;
       top: 24px;
       left: 24px; */
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       gap: 8px;
       z-index: 3;
   }
   
   .v-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       font-weight: 600;
       color: var(--primary-dark);
       background: #ffffff;
       padding: 6px 12px;
       border-radius: 99px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       border: 1px solid rgba(229, 57, 53, 0.1);
   }
   
   .product-bottle {
       position: relative;
       z-index: 2;
    width: auto;
    max-width: min(100%, 260px);
    max-height: 42vh;
       aspect-ratio: 4/5;
    object-fit: contain;
       border-radius: 16px;
       mix-blend-mode: multiply;
   }
   
   .buy-box {
       display: flex;
       flex-direction: column;
       gap: 32px;
       padding: 16px 0;
   }
   
   .bb-header {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
   .stock-status {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 1px;
       color: var(--primary-base);
   }
   
   .status-dot {
       width: 8px;
       height: 8px;
       background-color: var(--primary-base);
       border-radius: 50%;
       animation: pulseStock 2s infinite;
   }
   
   @keyframes pulseStock {
       0% {
           box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4);
       }
   
       70% {
           box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
       }
   
       100% {
           box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
       }
   }
   
   .title-price-row {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .bb-title {
       font-family: var(--font-heading);
       font-size: 32px;
       font-weight: 700;
       color: var(--text-dark);
       line-height: 1.1;
   }
   
   .bb-price {
       font-family: var(--font-heading);
       font-size: 28px;
       font-weight: 600;
       color: var(--text-dark);
   }
   
   .bb-desc {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.6;
   }
   
   .bb-variants {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .variant-label {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-dark);
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .variant-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 5px;
   }

   /* Prevent display:grid/flex from overriding the HTML hidden attribute on toggled groups. */
   .variant-grid[hidden],
   .product-mode-group[hidden] {
       display: none !important;
   }
   
   .variant-btn {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 12px;
       padding: 16px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .variant-btn:hover {
       border-color: rgba(0, 0, 0, 0.3);
   }
   
   .variant-btn.active {
       border: 2px solid var(--primary-base);
       background: var(--primary-light);
   }
   
   .v-weight {
       font-size: 16px;
       font-weight: 600;
       color: var(--text-dark);
   }
   
   .variant-btn.active .v-weight,
   .variant-btn.active .v-price {
       color: var(--primary-dark);
   }
   
   .v-price {
       font-size: 14px;
       color: var(--text-muted);
       font-weight: 500;
   }
   
   .bb-actions {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .btn-buy-now {
       background: var(--primary-base);
       color: #ffffff;
       border: none;
       border-radius: 12px;
       padding: 18px 24px;
       font-size: 18px;
       font-weight: 600;
       font-family: var(--font-body);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       cursor: pointer;
       transition: var(--transition);
       box-shadow: 0 8px 20px rgba(229, 57, 53, 0.2);
   }
   
   .btn-buy-now:hover {
       background: var(--primary-dark);
       transform: translateY(-2px);
       box-shadow: 0 12px 24px rgba(229, 57, 53, 0.3);
   }
   
   .btn-calculate {
       background: transparent;
       color: var(--text-dark);
       border: 1px solid rgba(0, 0, 0, 0.15);
       border-radius: 12px;
       padding: 16px 24px;
       font-size: 16px;
       font-weight: 600;
       font-family: var(--font-body);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .btn-calculate:hover {
       background: rgba(0, 0, 0, 0.03);
       border-color: rgba(0, 0, 0, 0.3);
   }
   
   .bb-trust {
       display: flex;
       flex-direction: column;
       gap: 12px;
       padding-top: 16px;
       border-top: 1px solid rgba(0, 0, 0, 0.06);
   }
   
   .trust-pill {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: var(--text-muted);
       font-weight: 500;
   }
   
   .trust-pill i {
       color: var(--primary-base);
       font-size: 16px;
   }
   
   @media (min-width: 768px) {
       .title-price-row {
           flex-direction: row;
           align-items: baseline;
           justify-content: space-between;
       }
   
       .variant-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   
       .bb-trust {
           flex-direction: row;
           justify-content: space-between;
       }
   }
   
    @media (min-width: 1024px) {
        .purchase-section {
            padding: 100px 48px;
        }

        .purchase-container {
            display: grid;
            grid-template-columns: 1fr minmax(0, 500px);
            align-items: start;
            gap: 80px;
        }

        .product-type-switcher {
            grid-column: 1 / -1;
            justify-self: center;
            margin-bottom: 0;
        }

        .product-visual {
           flex: 1;
           position: sticky;
           top: 120px;
        padding: 28px 24px;
        min-height: 440px;
       }
   
       .product-bottle {
        max-width: min(100%, 300px);
        max-height: 56vh;
       }
   
       .buy-box {
           flex: 1;
           max-width: 500px;
           padding: 0;
       }
   
       .bb-title {
           font-size: 40px;
       }
   
       .bb-price {
           font-size: 32px;
       }
   }

/* Keep core section typography consistent across the landing page. */
.section-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.section-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
}

.section-desc {
    font-size: 16px;
    line-height: 1.7;
    font-family: var(--font-body);
}
   
   /* ==========================================
      10. INDICATIONS SECTION
      ========================================== */
   .indications-section {
       padding: 64px 20px;
       background-color: #ffffff;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .indications-container {
       max-width: 1000px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .section-header {
       text-align: center;
       max-width: 600px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .section-label {
       font-family: var(--font-body);
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       color: var(--primary-base);
       margin-bottom: 12px;
       background: var(--primary-light);
       padding: 4px 12px;
       border-radius: 99px;
   }
   
   .section-title {
       font-size: 28px;
       color: var(--text-dark);
       margin-bottom: 16px;
       line-height: 1.2;
   }
   
   .section-desc {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.6;
   }
   
   .ind-tag {
       font-size: 11px;
       font-weight: 600;
       padding: 4px 10px;
       border-radius: 99px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
       white-space: nowrap;
   }
   
   .tag-red {
       background: rgba(229, 57, 53, 0.1);
       color: var(--primary-dark);
   }
   
   .tag-neutral {
       background: rgba(0, 0, 0, 0.04);
       color: var(--text-muted);
   }
   
   .tag-light {
       background: rgba(229, 57, 53, 0.05);
       color: var(--primary-base);
   }
   
   .ind-featured-card {
       background: linear-gradient(135deg, rgba(229, 57, 53, 0.08) 0%, rgba(229, 57, 53, 0.02) 100%);
       border: 1px solid rgba(229, 57, 53, 0.1);
       border-radius: 24px;
       padding: 32px 24px;
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   
   .featured-header {
       display: flex;
       align-items: center;
   }
   
   .pulse-tag {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(229, 57, 53, 0.15);
       color: var(--primary-dark);
       font-size: 12px;
       font-weight: 700;
       padding: 6px 14px;
       border-radius: 99px;
       text-transform: uppercase;
   }
   
   .pulse-dot {
       width: 8px;
       height: 8px;
       background-color: var(--primary-base);
       border-radius: 50%;
       animation: pulseIndication 2s infinite;
   }
   
   @keyframes pulseIndication {
       0% {
           box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4);
       }
   
       70% {
           box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
       }
   
       100% {
           box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
       }
   }
   
   .featured-title {
       font-size: 24px;
       font-weight: 700;
       color: var(--primary-dark);
       margin-bottom: 12px;
       line-height: 1.2;
   }
   
   .featured-desc {
       font-size: var(--text-body);
       color: var(--text-dark);
       line-height: 1.6;
       margin-bottom: 24px;
   }
   
   .tag-row {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }
   
   .indications-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
   }
   
   .ind-card {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 20px;
       padding: 24px;
       display: flex;
       flex-direction: column;
       transition: var(--transition);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
   }
   
   .ind-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
       border-color: rgba(229, 57, 53, 0.2);
   }
   
   .ind-card-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 20px;
   }
   
   .ind-icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: rgba(229, 57, 53, 0.06);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       transition: var(--transition);
   }
   
   .ind-card:hover .ind-icon {
       background: var(--primary-base);
       color: #ffffff;
   }
   
   .ind-title {
       font-size: 18px;
       font-weight: 600;
       color: var(--text-dark);
       margin-bottom: 8px;
       line-height: 1.3;
   }
   
   .ind-desc {
       font-size: 15px;
       color: var(--text-muted);
       line-height: 1.5;
       margin-bottom: 0;
   }
   
   .expert-banner {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 20px;
       padding: 24px;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 20px;
       margin-top: 16px;
   }
   
   .expert-text {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .expert-title {
       font-size: 18px;
       font-weight: 600;
       color: var(--primary-dark);
   }
   
   .expert-desc {
       font-size: 15px;
       color: var(--text-muted);
   }
   
   .btn-outline-dark {
       background: #ffffff;
       color: var(--text-dark);
       border: 1px solid rgba(0, 0, 0, 0.15);
       padding: 12px 24px;
       border-radius: 12px;
       font-family: var(--font-body);
       font-size: 15px;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: var(--transition);
       cursor: pointer;
       width: 100%;
       justify-content: center;
   }
   
   .btn-outline-dark:hover {
       border-color: var(--text-dark);
       background: rgba(0, 0, 0, 0.02);
   }
   
   @media (min-width: 768px) {
       .indications-section {
           padding: 80px 48px;
       }
   
       .indications-container {
           gap: 48px;
       }
   
       .section-title {
           font-size: 36px;
       }
   
       .ind-featured-card {
           padding: 48px;
       }
   
       .featured-title {
           font-size: 32px;
       }
   
       .indications-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 24px;
       }
   
       .expert-banner {
           flex-direction: row;
           align-items: center;
           justify-content: space-between;
           padding: 32px 40px;
           margin-top: 24px;
       }
   
       .btn-outline-dark {
           width: auto;
       }
   }
   
   @media (min-width: 1024px) {
       .indications-section {
           padding: 100px 48px;
       }
   
       .indications-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   /* ==========================================
      11. LEGACY & STORY SECTION
      ========================================== */
   .legacy-section {
       padding: 64px 20px;
       background-color: #FAFAFA;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .legacy-container {
       max-width: 1100px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .legacy-visual-col {
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .founder-portrait-container {
       position: relative;
       width: 100%;
       max-width: 320px;
       margin: 0 auto;
       display: flex;
       justify-content: center;
   }
   
   .founder-image-wrapper {
       width: 260px;
       height: 260px;
       border-radius: 50%;
       background: #ffffff;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .founder-img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       margin-top: 30px;
   }
   
   .badge-since {
       position: absolute;
       top: 16px;
       left: 0;
       background: #ffffff;
       color: var(--primary-dark);
       font-family: var(--font-body);
       font-size: 13px;
       font-weight: 700;
       padding: 8px 16px;
       border-radius: 99px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
       letter-spacing: 0.5px;
       text-transform: uppercase;
       z-index: 2;
   }
   
   .legacy-stats {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #ffffff;
       padding: 24px;
       border-radius: 20px;
       border: 1px solid rgba(0, 0, 0, 0.04);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
       max-width: 400px;
       margin: 0 auto;
       width: 100%;
   }
   
   .stat-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       gap: 4px;
   }
   
   .stat-num {
       font-family: var(--font-heading);
       font-size: 28px;
       font-weight: 700;
       color: var(--primary-base);
       line-height: 1;
   }
   
   .stat-label {
       font-size: 12px;
       font-weight: 500;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .legacy-content-col {
       display: flex;
       flex-direction: column;
       gap: 24px;
   }
   
   .header-left {
       align-items: flex-start;
       text-align: left;
       margin: 0;
   }
   
   .legacy-story {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
   .legacy-story p {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.7;
       margin-bottom: 0;
   }
   
   .legacy-story strong {
       color: var(--text-dark);
       font-weight: 600;
   }
   
   .mission-box {
       margin-top: 16px;
       background: linear-gradient(145deg, #ffffff, rgba(229, 57, 53, 0.03));
       border: 1px solid rgba(229, 57, 53, 0.15);
       border-radius: 20px;
       padding: 32px 24px;
       display: flex;
       align-items: flex-start;
       gap: 20px;
       box-shadow: 0 12px 32px rgba(229, 57, 53, 0.05);
   }
   
   .mission-icon {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       background: var(--primary-light);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       flex-shrink: 0;
   }
   
   .mission-text {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   
   .mission-title {
       font-size: 18px;
       font-weight: 700;
       color: var(--primary-dark);
       line-height: 1.2;
   }
   
   .mission-desc {
       font-size: 15px;
       color: var(--text-dark);
       line-height: 1.6;
       margin-bottom: 0;
   }
   
   @media (min-width: 768px) {
       .legacy-section {
           padding: 80px 48px;
       }
   
       .founder-portrait-container {
           max-width: 400px;
       }
   
       .founder-image-wrapper {
           width: 320px;
           height: 320px;
       }
   
       .legacy-stats {
           max-width: 500px;
           padding: 32px;
       }
   
       .stat-num {
           font-size: 36px;
       }
   }
   
   @media (min-width: 1024px) {
       .legacy-section {
           padding: 120px 48px;
       }
   
       .legacy-container {
           flex-direction: row;
           align-items: center;
           gap: 80px;
       }
   
       .legacy-visual-col {
           flex: 0 0 400px;
       }
   
       .founder-portrait-container,
       .legacy-stats {
           margin: 0;
       }
   
       .legacy-content-col {
           flex: 1;
           padding-top: 24px;
       }
   
       .mission-box {
           margin-top: 24px;
           padding: 32px;
       }
   }
   
   /* ==========================================
      12. THE SCIENCE SECTION
      ========================================== */
   .science-section {
       padding: 64px 20px;
       background-color: #ffffff;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .science-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .science-content-grid {
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .science-theory-col {
       display: flex;
       flex-direction: column;
       gap: 40px;
   }
   
   .theory-intro {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .theory-icon {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       background: var(--primary-light);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       margin-bottom: 8px;
   }
   
   .theory-title {
       font-size: 22px;
       font-weight: 700;
       color: var(--text-dark);
       line-height: 1.3;
   }
   
   .theory-desc {
       font-size: var(--text-body);
       color: var(--text-muted);
       line-height: 1.6;
   }
   
   .healing-process {
       display: flex;
       flex-direction: column;
   }
   
   .process-title {
       font-size: 13px;
       font-weight: 700;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 24px;
   }
   
   .healing-timeline {
       display: flex;
       flex-direction: column;
       gap: 24px;
       position: relative;
   }
   
   .healing-timeline::before {
       content: '';
       position: absolute;
       top: 16px;
       bottom: 16px;
       left: 17px;
       width: 2px;
       background: rgba(229, 57, 53, 0.15);
       z-index: 1;
   }
   
   .timeline-step {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       position: relative;
       z-index: 2;
   }
   
   .step-num {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: var(--primary-base);
       color: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-body);
       font-weight: 700;
       font-size: 14px;
       flex-shrink: 0;
       box-shadow: 0 0 0 6px #ffffff;
   }
   
   .step-content {
       display: flex;
       flex-direction: column;
       gap: 4px;
       padding-top: 6px;
   }
   
   .step-title {
       font-size: 16px;
       font-weight: 700;
       color: var(--text-dark);
   }
   
   .step-desc {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.5;
   }
   
   .science-comp-col {
       display: flex;
       flex-direction: column;
   }
   
   .comp-card {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.04);
       border-radius: 24px;
       padding: 32px 24px;
       display: flex;
       flex-direction: column;
       gap: 24px;
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.02);
   }
   
   .comp-header {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .comp-icon {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       background: #ffffff;
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
   }
   
   .comp-title {
       font-size: 22px;
       font-weight: 700;
       color: var(--text-dark);
       line-height: 1.3;
   }
   
   .comp-desc {
       font-size: 15px;
       color: var(--text-muted);
       line-height: 1.6;
   }
   
   .ingredient-list {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   
   .ingredient-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #ffffff;
       padding: 14px 16px;
       border-radius: 12px;
       border: 1px solid rgba(0, 0, 0, 0.03);
   }
   
   .ing-name {
       font-weight: 600;
       font-size: 14px;
       color: var(--text-dark);
   }
   
   .ing-tag {
       font-size: 11px;
       font-weight: 600;
       padding: 4px 12px;
       border-radius: 99px;
   }
   
   .comp-benefits {
       display: flex;
       flex-direction: column;
       gap: 12px;
       margin-top: 8px;
   }
   
   .comp-benefits li {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 14px;
       font-weight: 500;
       color: var(--text-dark);
   }
   
   .comp-benefits i {
       color: var(--primary-base);
       background: rgba(229, 57, 53, 0.1);
       padding: 4px;
       border-radius: 50%;
       font-size: 12px;
   }
   
   .comp-footer {
       margin-top: 8px;
       padding-top: 24px;
       border-top: 1px solid rgba(0, 0, 0, 0.06);
   }
   
   .comp-footer p {
       font-size: 12px;
       color: var(--text-muted);
       line-height: 1.5;
   }
   
   @media (min-width: 768px) {
       .science-section {
           padding: 80px 48px;
       }
   
       .comp-card {
           padding: 40px 32px;
       }
   }
   
   @media (min-width: 1024px) {
       .science-section {
           padding: 120px 48px;
       }
   
       .science-content-grid {
           flex-direction: row;
           align-items: stretch;
           gap: 80px;
       }
   
       .science-theory-col {
           flex: 1;
           padding-right: 20px;
       }
   
       .theory-title {
           font-size: 28px;
       }
   
       .science-comp-col {
           flex: 1;
           max-width: 500px;
       }
   
       .healing-timeline {
           gap: 32px;
       }
   }
   
   /* ==========================================
      13. CERTIFICATIONS & STATS SECTION
      ========================================== */
   .cert-stats-section {
       padding: 64px 20px;
       background-color: #FAFAFA;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .cert-stats-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 24px;
   }
   
   .cert-box {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 20px;
       padding: 32px 24px;
       display: flex;
       flex-direction: column;
       gap: 24px;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
   }
   
   .cert-header-title {
       font-family: var(--font-body);
       font-size: 13px;
       font-weight: 700;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       color: var(--text-muted);
   }
   
   .cert-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
   }
   
   .cert-grid--heritage {
       margin-top: 0;
   }
   
   .cert-item {
       display: flex;
       align-items: center;
       gap: 16px;
       background: rgba(229, 57, 53, 0.04);
       padding: 16px;
       border-radius: 16px;
       border: 1px solid rgba(229, 57, 53, 0.05);
   }
   
   .cert-icon {
       width: 40px;
       height: 40px;
       background: rgba(229, 57, 53, 0.1);
       color: var(--primary-dark);
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       flex-shrink: 0;
   }
   
   .cert-text {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   
   .cert-text strong {
       font-size: 15px;
       color: var(--text-dark);
       font-weight: 700;
   }
   
   .cert-text span {
       font-size: 13px;
       color: var(--text-muted);
       font-weight: 500;
   }
   
   .guarantee-stats-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 16px;
   }
   
   .g-stat-card {
       background: rgba(229, 57, 53, 0.04);
       border: 1px solid rgba(229, 57, 53, 0.05);
       border-radius: 20px;
       padding: 32px 16px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       gap: 8px;
       transition: var(--transition);
   }
   
   .g-stat-card:hover {
       background: rgba(229, 57, 53, 0.06);
       transform: translateY(-2px);
   }
   
   .g-stat-num {
       font-family: var(--font-heading);
       font-size: 32px;
       font-weight: 700;
       color: var(--primary-base);
       line-height: 1;
   }
   
   .g-stat-label {
       font-size: 13px;
       font-weight: 500;
       color: var(--text-dark);
   }
   
   @media (min-width: 768px) {
       .cert-stats-section {
           padding: 80px 48px;
       }
   
       .cert-grid--standards {
           grid-template-columns: repeat(2, 1fr);
       }
   
       .cert-grid--heritage {
           grid-template-columns: repeat(3, 1fr);
       }
   
       .guarantee-stats-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   
       .g-stat-card {
           padding: 40px 24px;
       }
   
       .g-stat-num {
           font-size: 40px;
       }
   
       .g-stat-label {
           font-size: 15px;
       }
   }
   
   @media (min-width: 1024px) {
       .cert-stats-section {
           padding: 100px 48px;
       }
   
       .cert-stats-container {
           gap: 32px;
       }
   
       .cert-box {
           padding: 40px;
       }
   
       .cert-grid--standards {
           grid-template-columns: repeat(4, 1fr);
       }
   
       .cert-grid--heritage {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   /* ==========================================
      14. DOSAGE CALCULATOR SECTION
      ========================================== */
   .dosage-section-comp {
       padding: 64px 20px;
       background-color: #FAFAFA;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .dosage-container-comp {
       max-width: 1000px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .comp-header {
       gap: 8px;
   }
   
   .integrated-calc {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 24px;
       padding: 16px;
       display: flex;
       flex-direction: column;
       gap: 16px;
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.03);
   }
   
   .calc-input-area {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .calc-toggle-small {
       display: flex;
       background: rgba(0, 0, 0, 0.03);
       border-radius: 12px;
       padding: 4px;
       border: 1px solid rgba(0, 0, 0, 0.05);
   }
   
   .toggle-btn {
       flex: 1;
       background: transparent;
       border: none;
       padding: 10px 12px;
       border-radius: 9px;
       font-family: var(--font-body);
       font-weight: 600;
       font-size: 14px;
       color: var(--text-muted);
       cursor: pointer;
   }
   
   .toggle-btn.active {
       background: var(--primary-dark);
       color: #ffffff;
   }
   
   .input-stacked {
       display: flex;
       align-items: center;
       gap: 12px;
       background: #FAFAFA;
       padding: 12px;
       border-radius: 12px;
       border: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .input-stacked label {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-dark);
       flex-shrink: 0;
   }
   
   .input-stacked input {
       width: 100%;
       border: none;
       background: transparent;
       font-family: var(--font-heading);
       font-size: 24px;
       font-weight: 700;
       color: var(--text-dark);
       outline: none;
       text-align: right;
       padding: 0;
   }
   
   .preset-wrap {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 6px;
   }
   
   .preset-btn {
       background: rgba(0, 0, 0, 0.03);
       border: 1px solid rgba(0, 0, 0, 0.05);
       color: var(--text-dark);
       font-family: var(--font-body);
       font-size: 12px;
       font-weight: 600;
       padding: 10px 0;
       border-radius: 8px;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .preset-btn.active,
   .preset-btn:hover {
       background: var(--primary-dark);
       color: #ffffff;
       border-color: var(--primary-dark);
   }
   
   /* Inline Dosage Breakdown */
   .inline-breakdown {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.04);
       border-radius: 12px;
       padding: 16px;
       margin-top: 8px;
   }

   .calc-results-area .inline-breakdown {
       margin-top: 0;
   }
   
   .ib-title {
       font-size: 11px;
       font-weight: 700;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 12px;
   }
   
   .ib-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 8px;
   }
   
   .ib-item {
       display: flex;
       flex-direction: column;
       gap: 4px;
       border-right: 1px solid rgba(0, 0, 0, 0.05);
   }
   
   .ib-item:last-child {
       border-right: none;
   }
   
   .ib-label {
       font-size: 11px;
       color: var(--text-muted);
   }
   
   .ib-val {
       font-size: 14px;
       font-weight: 700;
       color: var(--text-dark);
   }
   
   /* Dynamic Results Area */
   .calc-results-area {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
   .rec-card-compact {
       background: var(--primary-dark);
       color: #ffffff;
       border-radius: 16px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 16px;
       text-align: center;
   }
   
   .rec-title-price {
       display: flex;
       align-items: baseline;
       gap: 12px;
   }
   
   .rec-title-price .v-weight {
       font-family: var(--font-heading);
       font-size: 32px;
       font-weight: 700;
       color: #ffffff;
       line-height: 1;
   }
   
   .rec-title-price .v-price {
       font-size: 18px;
       font-weight: 600;
       color: #ffffff;
       opacity: 0.9;
   }
   
   .btn-buy-compact {
       width: 100%;
       background: #ffffff;
       color: var(--text-dark);
       border: none;
       padding: 14px 16px;
       border-radius: 10px;
       font-family: var(--font-body);
       font-weight: 600;
       font-size: 15px;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
       transition: var(--transition);
   }
   
   .btn-buy-compact:hover {
       background: var(--primary-light);
       transform: translateY(-2px);
   }
   
   .rec-note {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.8);
       margin-bottom: 0;
   }
   
   .total-needed {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       padding: 12px 16px;
       background: #FAFAFA;
       border-radius: 12px;
       border: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .total-label {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
   }
   
   #out-total {
       font-size: 18px;
       font-weight: 700;
       color: var(--text-dark);
   }
   
   .admin-instructions-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
   }
   
   .admin-block {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 16px;
       padding: 20px;
   }
   
   .admin-title {
       font-size: 14px;
       font-weight: 700;
       color: var(--primary-dark);
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .admin-title i {
       color: var(--primary-base);
   }
   
   .admin-desc {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.6;
       margin-bottom: 0;
   }
   
   @media (min-width: 768px) {
       .dosage-section-comp {
           padding: 80px 48px;
       }
   
       .integrated-calc {
           flex-direction: row;
           padding: 32px;
           gap: 40px;
           align-items: flex-start;
       }
   
       .calc-input-area {
           flex: 1;
           gap: 20px;
       }
   
       .preset-wrap {
           gap: 10px;
       }
   
       .preset-btn {
           font-size: 14px;
       }
   
       .input-stacked input {
           font-size: 32px;
       }
   
       .calc-results-area {
           flex: 1;
           max-width: 400px;
       }
   
       .admin-instructions-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 24px;
       }
   }
   
   /* ==========================================
      15. FAQ SECTION
      ========================================== */
   .faq-section {
       padding: 64px 20px;
       background-color: #ffffff;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
   }
   
   .faq-container {
       max-width: 1100px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .faq-content-grid {
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .faq-sidebar {
       display: flex;
       flex-direction: column;
       gap: 32px;
   }
   
   .faq-contact-box {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 20px;
       padding: 32px 24px;
       text-align: center;
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
   .contact-title {
       font-size: 18px;
       font-weight: 700;
       color: var(--primary-dark);
   }
   
   .contact-desc {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.5;
       margin-bottom: 8px;
   }
   
   .btn-full {
       width: 100%;
   }
   
   .faq-accordions {
       display: flex;
       flex-direction: column;
   }
   
   .faq-item {
       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   }
   
   .faq-item:first-child {
       border-top: 1px solid rgba(0, 0, 0, 0.06);
   }
   
   .faq-question {
       width: 100%;
       background: transparent;
       border: none;
       padding: 24px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
       text-align: left;
       cursor: pointer;
       color: var(--text-dark);
       font-family: var(--font-body);
       font-size: 16px;
       font-weight: 600;
       gap: 16px;
       transition: var(--transition);
   }
   
   .faq-question:hover {
       color: var(--primary-base);
   }
   
   .faq-icon {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: rgba(229, 57, 53, 0.06);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       flex-shrink: 0;
       transition: var(--transition);
   }
   
   .faq-item.active .faq-icon {
       background: var(--primary-base);
       color: #ffffff;
       transform: rotate(45deg);
   }
   
   .faq-item.active .faq-question {
       color: var(--primary-dark);
   }
   
   .faq-answer {
       display: grid;
       grid-template-rows: 0fr;
       transition: grid-template-rows 0.3s ease-out;
   }
   
   .faq-item.active .faq-answer {
       grid-template-rows: 1fr;
   }
   
   .faq-answer-inner {
       overflow: hidden;
   }
   
   .faq-answer-inner p {
       padding-bottom: 24px;
       font-size: 15px;
       color: var(--text-muted);
       line-height: 1.6;
       margin: 0;
   }
   
   @media (min-width: 768px) {
       .faq-section {
           padding: 80px 48px;
       }
   
       .faq-question {
           font-size: 18px;
       }
   }
   
   @media (min-width: 1024px) {
       .faq-section {
           padding: 120px 48px;
       }
   
       .faq-content-grid {
           flex-direction: row;
           align-items: flex-start;
           gap: 80px;
       }
   
       .faq-sidebar {
           flex: 0 0 340px;
           position: sticky;
           top: 120px;
       }
   
       .faq-accordions {
           flex: 1;
       }
   }
   
   /* ==========================================
      15b. BLOG SLIDER SECTION
      ========================================== */
   .blog-slider-section {
       padding: 64px 0;
       background-color: #ffffff;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
       overflow: hidden;
   }

   .blog-slider-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .blog-slider-header {
       margin-bottom: 32px;
   }

   .blog-slider-view-all {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       margin-top: 16px;
       font-size: 0.95rem;
       font-weight: 700;
       color: var(--primary-base);
       text-decoration: none;
       transition: var(--transition);
   }

   .blog-slider-view-all:hover {
       color: var(--primary-dark);
   }

   .blog-slider-viewport {
       overflow: hidden;
       width: 100%;
   }

   .blog-slider-track {
       display: flex;
       gap: 16px;
       transition: transform 400ms ease;
       will-change: transform;
   }

   .blog-slider-card {
       flex: 0 0 calc(100% - 32px);
       max-width: 340px;
   }

   .blog-slider-card-link {
       display: flex;
       flex-direction: column;
       height: 100%;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 16px;
       overflow: hidden;
       text-decoration: none;
       color: inherit;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
       transition: var(--transition);
   }

   .blog-slider-card-link:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
   }

   .blog-slider-card-media {
       aspect-ratio: 16 / 9;
       background: #F3F4F6;
       overflow: hidden;
   }

   .blog-slider-card-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .blog-slider-card-placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--primary-base);
       font-size: 2.5rem;
       background: linear-gradient(135deg, #FCE8E6 0%, #F3F4F6 100%);
   }

   .blog-slider-card-body {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding: 18px 18px 20px;
       flex: 1 1 auto;
   }

   .blog-slider-card-date {
       font-size: 0.78rem;
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: var(--text-muted);
   }

   .blog-slider-card-title {
       font-family: var(--font-heading);
       font-size: 1.1rem;
       line-height: 1.35;
       color: var(--text-dark);
   }

   .blog-slider-card-excerpt {
       font-size: 0.92rem;
       line-height: 1.55;
       color: var(--text-muted);
       margin: 0;
   }

   .blog-slider-read-more {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       margin-top: auto;
       padding-top: 8px;
       font-size: 0.9rem;
       font-weight: 700;
       color: var(--primary-base);
   }

   .blog-slider-controls {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
       margin-top: 24px;
   }

   .blog-slider-nav {
       width: 40px;
       height: 40px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 999px;
       background: #ffffff;
       color: var(--text-dark);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: var(--transition);
   }

   .blog-slider-nav:hover:not(:disabled) {
       border-color: var(--primary-base);
       color: var(--primary-base);
   }

   .blog-slider-nav:disabled {
       opacity: 0.35;
       cursor: not-allowed;
   }

   .blog-slider-dots {
       display: flex;
       align-items: center;
       gap: 8px;
       min-height: 10px;
   }

   .blog-slider-dot {
       width: 8px;
       height: 8px;
       border: 0;
       border-radius: 999px;
       padding: 0;
       background: #D1D5DB;
       cursor: pointer;
       transition: var(--transition);
   }

   .blog-slider-dot.is-active {
       background: var(--primary-base);
       transform: scale(1.15);
   }

   .blog-slider-dot:focus-visible,
   .blog-slider-nav:focus-visible {
       outline: 2px solid var(--primary-base);
       outline-offset: 2px;
   }

   @media (min-width: 768px) {
       .blog-slider-card {
           flex-basis: calc(50% - 8px);
           max-width: none;
       }
   }

   @media (min-width: 992px) {
       .blog-slider-card {
           flex-basis: calc(33.333% - 11px);
       }

       .blog-slider-header {
           margin-bottom: 40px;
       }
   }

   /* ==========================================
      15c. BLOG ARCHIVE
      ========================================== */
   .blog-archive-section {
       padding: calc(var(--kilv-header-offset-mobile) + 48px) 0 64px;
       background-color: #ffffff;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
       min-height: 50vh;
   }

   .blog-archive-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .blog-archive-header {
       margin-bottom: 40px;
   }

   .blog-archive-title {
       margin-bottom: 16px;
   }

   .blog-archive-back-link {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       margin-top: 16px;
       font-size: 0.95rem;
       font-weight: 700;
       color: var(--primary-base);
       text-decoration: none;
       transition: var(--transition);
   }

   .blog-archive-back-link:hover {
       color: var(--primary-dark);
   }

   .blog-archive-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 24px;
   }

   .blog-archive-grid .blog-slider-card {
       flex: none;
       max-width: none;
       width: 100%;
   }

   .blog-archive-pagination {
       margin-top: 40px;
   }

   .blog-archive-pagination .nav-links {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       gap: 10px;
   }

   .blog-archive-pagination .page-numbers {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       min-width: 40px;
       height: 40px;
       padding: 0 14px;
       border-radius: 999px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       background: #ffffff;
       color: var(--text-dark);
       font-size: 0.92rem;
       font-weight: 700;
       text-decoration: none;
       transition: var(--transition);
   }

   .blog-archive-pagination .page-numbers.current {
       background: var(--primary-base);
       border-color: var(--primary-base);
       color: #ffffff;
   }

   .blog-archive-pagination .page-numbers:hover:not(.current) {
       border-color: var(--primary-base);
       color: var(--primary-base);
   }

   .blog-archive-pagination .page-numbers.dots {
       border: 0;
       min-width: auto;
       padding: 0 4px;
   }

   .blog-archive-empty {
       text-align: center;
       padding: 48px 20px;
       border: 1px dashed rgba(0, 0, 0, 0.12);
       border-radius: 16px;
       background: #FAFAFA;
   }

   .blog-archive-empty p {
       margin-bottom: 20px;
       color: var(--text-muted);
       font-size: 1rem;
   }

   @media (min-width: 768px) {
       .blog-archive-section {
           padding-top: calc(var(--kilv-header-offset-desktop) + 48px);
       }

       .blog-archive-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (min-width: 992px) {
       .blog-archive-grid {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }
   }

   /* ==========================================
      15d. BLOG SINGLE POST (Revamped)
      ========================================== */

   /* Section & Container */
   .blog-single-section {
       padding: calc(var(--kilv-header-offset-mobile) + 32px) 0 64px;
       background-color: #ffffff;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
       min-height: 50vh;
   }

   .blog-single-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .blog-single-article {
       max-width: 100%;
   }

   /* ---- 1. Hero Header ---- */
   .bs-hero {
       max-width: 760px;
       margin-bottom: 40px;
   }

   .bs-hero-categories {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 16px;
   }

   .bs-category-pill {
       display: inline-block;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--primary-base);
       background: var(--primary-light);
       padding: 5px 14px;
       border-radius: 99px;
       text-decoration: none;
       transition: var(--transition);
   }

   .bs-category-pill:hover {
       background: var(--primary-base);
       color: #ffffff;
   }

   .bs-hero-title {
       font-family: var(--font-heading);
       font-size: clamp(28px, 4.5vw, 48px);
       font-weight: 700;
       line-height: 1.12;
       letter-spacing: -0.5px;
       color: var(--text-dark);
       margin: 0 0 20px;
   }

   .bs-hero-meta {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 12px;
       margin-bottom: 28px;
       font-size: 14px;
       color: var(--text-muted);
   }

   .bs-meta-author {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .bs-meta-avatar {
       border-radius: 50%;
       width: 36px;
       height: 36px;
   }

   .bs-meta-author-info {
       display: flex;
       flex-direction: column;
       line-height: 1.2;
   }

   .bs-meta-author-name {
       font-weight: 600;
       color: var(--text-dark);
       font-size: 14px;
   }

   .bs-meta-author-role {
       font-size: 12px;
       color: var(--text-muted);
   }

   .bs-meta-divider {
       width: 1px;
       height: 16px;
       background: rgba(0, 0, 0, 0.12);
   }

   .bs-meta-reviewer,
   .bs-meta-date,
   .bs-meta-readtime {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 13px;
   }

   .bs-meta-reviewer strong {
       color: var(--text-dark);
   }

   .bs-meta-reviewer i {
       color: #059669;
   }

   .bs-hero-featured {
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
   }

   .bs-hero-featured-image {
       display: block;
       width: 100%;
       height: auto;
       object-fit: cover;
   }

   /* ---- 2. Lead Paragraph + Key Takeaways ---- */
   .bs-lead {
       max-width: 760px;
       margin-bottom: 40px;
   }

   .bs-lead-text {
       font-size: 20px;
       line-height: 1.65;
       color: var(--text-dark);
       margin-bottom: 28px;
   }

   .bs-lead-text p {
       margin: 0;
   }

   .bs-takeaways {
       background: linear-gradient(145deg, #ffffff, rgba(229, 57, 53, 0.03));
       border: 1px solid rgba(229, 57, 53, 0.12);
       border-radius: 20px;
       padding: 28px 24px;
       box-shadow: 0 8px 24px rgba(229, 57, 53, 0.04);
   }

   .bs-takeaways-header {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 16px;
   }

   .bs-takeaways-icon {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       background: var(--primary-light);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       flex-shrink: 0;
   }

   .bs-takeaways-title {
       font-family: var(--font-heading);
       font-size: 18px;
       font-weight: 700;
       color: var(--text-dark);
       margin: 0;
   }

   .bs-takeaways-list {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .bs-takeaways-list li {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       font-size: 15px;
       line-height: 1.5;
       color: var(--text-dark);
   }

   .bs-takeaways-list li i {
       color: var(--primary-base);
       font-size: 18px;
       margin-top: 2px;
       flex-shrink: 0;
   }

   /* ---- 3. Asymmetric Layout (70/30) ---- */
   .bs-layout {
       display: flex;
       flex-direction: column;
       gap: 40px;
       margin-bottom: 48px;
   }

   .bs-layout--full .bs-main {
       max-width: 760px;
   }

   .bs-main {
       min-width: 0;
   }

   /* Entry content typography */
   .bs-content {
       font-family: var(--font-body);
       font-size: var(--text-body);
       line-height: 1.75;
       color: var(--text-dark);
   }

   .bs-content::after {
       content: '';
       display: table;
       clear: both;
   }

   .bs-content h2 {
       font-family: var(--font-heading);
       font-size: var(--text-h3);
       font-weight: 700;
       line-height: var(--lh-heading);
       color: var(--text-dark);
       margin: 48px 0 16px;
       scroll-margin-top: 100px;
   }

   .bs-content h3 {
       font-family: var(--font-heading);
       font-size: 20px;
       font-weight: 600;
       line-height: 1.3;
       color: var(--text-dark);
       margin: 36px 0 12px;
       scroll-margin-top: 100px;
   }

   .bs-content p {
       margin-bottom: 20px;
   }

   .bs-content img {
       display: block;
       max-width: 100%;
       height: auto;
       border-radius: 12px;
       margin: 24px 0;
   }

   .bs-content ul,
   .bs-content ol {
       padding-left: 24px;
       margin-bottom: 20px;
   }

   .bs-content li {
       margin-bottom: 8px;
   }

   .bs-content blockquote {
       margin: 24px 0;
       padding: 16px 20px;
       border-left: 4px solid var(--primary-base);
       background: #FAFAFA;
       border-radius: 0 8px 8px 0;
       font-style: italic;
       color: var(--text-muted);
   }

   .bs-content a {
       color: var(--primary-base);
       text-decoration: underline;
       text-underline-offset: 2px;
       transition: var(--transition);
   }

   .bs-content a:hover {
       color: var(--primary-dark);
   }

   .bs-content pre {
       background: #f5f5f5;
       padding: 16px;
       border-radius: 8px;
       overflow-x: auto;
       margin-bottom: 20px;
       font-size: 14px;
       line-height: 1.5;
   }

   .bs-content code {
       font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
       font-size: 0.9em;
       background: #f5f5f5;
       padding: 2px 6px;
       border-radius: 4px;
   }

   .bs-content pre code {
       background: none;
       padding: 0;
       border-radius: 0;
   }

   /* Block editor content elements */
   .bs-content figure {
       margin: 24px 0;
   }

   .bs-content figure img {
       margin: 0;
   }

   .bs-content figcaption {
       font-size: var(--text-small);
       color: var(--text-muted);
       text-align: center;
       margin-top: 8px;
       font-style: italic;
   }

   .bs-content .wp-block-image {
       margin: 24px 0;
   }

   .bs-content .wp-block-image img {
       margin: 0;
   }

   .bs-content .wp-block-image.alignwide {
       margin-left: -20px;
       margin-right: -20px;
   }

   .bs-content .wp-block-image.alignfull {
       margin-left: calc(-50vw + 50%);
       margin-right: calc(-50vw + 50%);
       max-width: 100vw;
       width: 100vw;
   }

   .bs-content .wp-block-image.alignleft {
       margin: 8px 0 16px 0;
       max-width: 100%;
   }

   .bs-content .wp-block-image.alignright {
       margin: 8px 0 16px 0;
       max-width: 100%;
   }

   .bs-content .wp-block-pullquote {
       border-top: 3px solid var(--primary-base);
       border-bottom: 3px solid var(--primary-base);
       border-left: 0;
       margin: 32px 0;
       padding: 24px 0;
       background: none;
       text-align: center;
   }

   .bs-content .wp-block-pullquote blockquote {
       border: 0;
       padding: 0;
       margin: 0;
       background: none;
   }

   .bs-content .wp-block-separator {
       margin: 32px auto;
       border: 0;
       border-top: 2px solid rgba(0, 0, 0, 0.08);
       max-width: 80px;
   }

   .bs-content .wp-block-quote {
       margin: 24px 0;
       padding: 16px 20px;
       border-left: 4px solid var(--primary-base);
       background: #FAFAFA;
       border-radius: 0 8px 8px 0;
   }

   .bs-content .wp-block-quote p {
       margin-bottom: 8px;
   }

   .bs-content .wp-block-quote cite {
       display: block;
       font-size: var(--text-small);
       color: var(--text-muted);
       font-style: normal;
       margin-top: 8px;
   }

   .bs-content table {
       width: 100%;
       border-collapse: collapse;
       margin: 24px 0;
       font-size: var(--text-small);
   }

   .bs-content th,
   .bs-content td {
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   }

   .bs-content th {
       font-weight: 700;
       color: var(--text-dark);
       background: #FAFAFA;
       border-bottom: 2px solid rgba(0, 0, 0, 0.12);
   }

   .bs-content tr:hover td {
       background: rgba(229, 57, 53, 0.02);
   }

   /* ---- Sidebar ---- */
   .bs-sidebar {
       display: flex;
       flex-direction: column;
       gap: 24px;
   }

   /* Table of Contents */
   .bs-toc {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 16px;
       padding: 20px;
   }

   .bs-toc-heading {
       display: flex;
       align-items: center;
       gap: 8px;
       font-family: var(--font-heading);
       font-size: 14px;
       font-weight: 700;
       color: var(--text-dark);
       margin: 0 0 12px;
       text-transform: uppercase;
       letter-spacing: 0.04em;
   }

   .bs-toc-heading i {
       color: var(--primary-base);
   }

   .bs-toc-list {
       list-style: none;
       margin: 0;
       padding: 0;
   }

   .bs-toc-item {
       border-left: 2px solid rgba(0, 0, 0, 0.06);
   }

   .bs-toc-item--sub {
       padding-left: 12px;
   }

   .bs-toc-link {
       display: block;
       padding: 8px 12px;
       font-size: 13px;
       font-weight: 500;
       color: var(--text-muted);
       text-decoration: none;
       border-left: 2px solid transparent;
       margin-left: -2px;
       transition: var(--transition);
       line-height: 1.3;
   }

   .bs-toc-link:hover {
       color: var(--text-dark);
   }

   .bs-toc-item.active .bs-toc-link {
       color: var(--primary-base);
       font-weight: 600;
       border-left-color: var(--primary-base);
       background: rgba(229, 57, 53, 0.04);
       border-radius: 0 6px 6px 0;
   }

   /* Reviewer Card (sidebar) */
   .bs-reviewer-card {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 16px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       gap: 8px;
   }

   .bs-reviewer-card-header {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: #059669;
       margin-bottom: 4px;
   }

   .bs-reviewer-avatar {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       object-fit: cover;
   }

   .bs-reviewer-avatar-placeholder {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       background: var(--primary-light);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
   }

   .bs-reviewer-name {
       font-size: 15px;
       font-weight: 700;
       color: var(--text-dark);
   }

   .bs-reviewer-credentials {
       font-size: 12px;
       font-weight: 600;
       color: var(--primary-base);
       background: var(--primary-light);
       padding: 2px 10px;
       border-radius: 99px;
   }

   .bs-reviewer-bio {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.5;
       margin: 0;
   }

   /* Sidebar Product Recommendations */
   .bs-sidebar-products {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .bs-sidebar-products-heading {
       display: flex;
       align-items: center;
       gap: 8px;
       font-family: var(--font-heading);
       font-size: 14px;
       font-weight: 700;
       color: var(--text-dark);
       margin: 0;
       text-transform: uppercase;
       letter-spacing: 0.04em;
   }

   .bs-sidebar-products-heading i {
       color: var(--primary-base);
   }

   .bs-product-card {
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 14px;
       padding: 16px;
       display: flex;
       gap: 14px;
       align-items: center;
       transition: var(--transition);
   }

   .bs-product-card:hover {
       border-color: var(--primary-base);
       box-shadow: 0 4px 16px rgba(229, 57, 53, 0.08);
   }

   .bs-product-card-img {
       width: 56px;
       height: 56px;
       flex-shrink: 0;
       border-radius: 10px;
       overflow: hidden;
       background: #FAFAFA;
   }

   .bs-product-card-img img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }

   .bs-product-card-body {
       flex: 1;
       min-width: 0;
   }

   .bs-product-card-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--text-dark);
       margin: 0 0 2px;
       line-height: 1.3;
   }

   .bs-product-card-price {
       font-size: 13px;
       font-weight: 700;
       color: var(--primary-base);
       margin-bottom: 4px;
   }

   .bs-product-card-link {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 12px;
       font-weight: 600;
       color: var(--primary-base);
       text-decoration: none;
       transition: var(--transition);
   }

   .bs-product-card-link:hover {
       color: var(--primary-dark);
   }

   /* ---- 4. Contextual Product Carousel ---- */
   .bs-products {
       margin-bottom: 48px;
       padding: 48px 24px;
       background: #FAFAFA;
       border-radius: 24px;
       border: 1px solid rgba(0, 0, 0, 0.04);
   }

   .bs-products-header {
       text-align: center;
       margin-bottom: 32px;
   }

   .bs-products-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
       max-width: 800px;
       margin: 0 auto;
   }

   /* ---- 5. Author & Reviewer Bios ---- */
   .bs-bios {
       display: flex;
       flex-direction: column;
       gap: 20px;
       margin-bottom: 40px;
   }

   .bs-bio-card {
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 20px;
       padding: 24px;
   }

   .bs-bio-card-header {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: var(--text-muted);
       margin-bottom: 16px;
   }

   .bs-bio-card-header i {
       color: var(--primary-base);
   }

   .bs-bio-card-body {
       display: flex;
       gap: 16px;
       align-items: flex-start;
   }

   .bs-bio-avatar {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       object-fit: cover;
       flex-shrink: 0;
   }

   .bs-bio-avatar-placeholder {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       background: var(--primary-light);
       color: var(--primary-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       flex-shrink: 0;
   }

   .bs-bio-info {
       flex: 1;
       min-width: 0;
   }

   .bs-bio-name {
       display: block;
       font-size: 16px;
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 2px;
   }

   .bs-bio-credentials {
       display: inline-block;
       font-size: 12px;
       font-weight: 600;
       color: var(--primary-base);
       background: var(--primary-light);
       padding: 2px 10px;
       border-radius: 99px;
       margin-bottom: 8px;
   }

   .bs-bio-text {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.6;
       margin: 0 0 8px;
   }

   .bs-bio-link {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 13px;
       font-weight: 700;
       color: var(--primary-base);
       text-decoration: none;
       transition: var(--transition);
   }

   .bs-bio-link:hover {
       color: var(--primary-dark);
   }

   /* ---- 6. Medical Disclaimer ---- */
   .bs-disclaimer {
       margin-bottom: 40px;
   }

   .bs-disclaimer-item {
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 12px;
       overflow: hidden;
   }

   .bs-disclaimer-toggle {
       width: 100%;
       background: #FAFAFA;
       border: none;
       padding: 16px 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 13px;
       font-weight: 600;
       color: var(--text-muted);
       cursor: pointer;
       transition: var(--transition);
   }

   .bs-disclaimer-toggle:hover {
       background: #f0f0f0;
   }

   .bs-disclaimer-toggle span {
       flex: 1;
       text-align: left;
   }

   .bs-disclaimer-icon {
       transition: transform 0.3s ease;
   }

   .bs-disclaimer-item.active .bs-disclaimer-icon {
       transform: rotate(45deg);
       color: var(--primary-base);
   }

   .bs-disclaimer-content {
       display: grid;
       grid-template-rows: 0fr;
       transition: grid-template-rows 0.3s ease-out;
   }

   .bs-disclaimer-item.active .bs-disclaimer-content {
       grid-template-rows: 1fr;
   }

   .bs-disclaimer-inner {
       overflow: hidden;
   }

   .bs-disclaimer-inner p {
       padding: 0 20px 20px;
       font-size: 13px;
       line-height: 1.6;
       color: var(--text-muted);
       margin: 0;
   }

   /* ---- 7. Post Navigation ---- */
   .bs-post-nav {
       display: flex;
       gap: 16px;
       margin-bottom: 48px;
   }

   .bs-post-nav-link {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 6px;
       padding: 20px;
       background: #FAFAFA;
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 16px;
       text-decoration: none;
       transition: var(--transition);
   }

   .bs-post-nav-link:hover {
       background: #ffffff;
       border-color: var(--primary-base);
       box-shadow: 0 8px 24px rgba(229, 57, 53, 0.1);
       transform: translateY(-2px);
   }

   .bs-post-nav-link span {
       font-size: 12px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--primary-base);
       display: inline-flex;
       align-items: center;
       gap: 6px;
   }

   .bs-post-nav-link strong {
       font-size: var(--text-small);
       font-weight: 600;
       color: var(--text-dark);
       line-height: 1.3;
   }

   .bs-post-nav-link--next {
       text-align: right;
   }

   .bs-post-nav-link--next span {
       justify-content: flex-end;
   }

   .bs-post-nav-spacer {
       flex: 1;
   }

   /* ---- Related Articles ---- */
   .bs-related {
       margin-bottom: 48px;
       padding: 40px 24px;
       background: #FAFAFA;
       border-radius: 20px;
       border: 1px solid rgba(0, 0, 0, 0.04);
   }

   .bs-related-title {
       font-family: var(--font-heading);
       font-size: var(--text-h3);
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 24px;
   }

   .bs-related-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 24px;
   }

   .bs-related-grid .blog-slider-card {
       flex: none;
       max-width: none;
       width: 100%;
   }

   /* Inline product callout */
   .bs-inline-product {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 16px;
       margin: 24px 0;
       background: #FAFAFA;
       border: 1px solid rgba(229, 57, 53, 0.1);
       border-radius: 14px;
       border-left: 4px solid var(--primary-base);
   }

   .bs-inline-product img {
       width: 48px;
       height: 48px;
       object-fit: contain;
       border-radius: 8px;
       flex-shrink: 0;
   }

   .bs-inline-product-info {
       flex: 1;
       min-width: 0;
   }

   .bs-inline-product-label {
       display: block;
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--text-muted);
   }

   .bs-inline-product-name {
       display: block;
       font-size: 14px;
       font-weight: 700;
       color: var(--text-dark);
   }

   .bs-inline-product-price {
       font-size: 13px;
       font-weight: 600;
       color: var(--primary-base);
   }

   .bs-inline-product-link {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 13px;
       font-weight: 700;
       color: var(--primary-base);
       text-decoration: none;
       white-space: nowrap;
       transition: var(--transition);
   }

   .bs-inline-product-link:hover {
       color: var(--primary-dark);
   }

   /* ---- Responsive ---- */
   @media (min-width: 768px) {
       .blog-single-section {
           padding-top: calc(var(--kilv-header-offset-desktop) + 32px);
       }

       .bs-hero-title {
           font-size: clamp(36px, 4vw, 48px);
       }

       .bs-meta-avatar {
           width: 40px;
           height: 40px;
       }

       .bs-products-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }

       .bs-bios {
           flex-direction: row;
       }

       .bs-bio-card {
           flex: 1;
       }

       .bs-related-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }

       .bs-content .wp-block-image.alignwide {
           margin-left: -40px;
           margin-right: -40px;
       }

       .bs-content .wp-block-image.alignleft {
           float: left;
           margin: 8px 24px 16px 0;
           max-width: 50%;
       }

       .bs-content .wp-block-image.alignright {
           float: right;
           margin: 8px 0 16px 24px;
           max-width: 50%;
       }
   }

   @media (min-width: 1024px) {
       .bs-layout {
           flex-direction: row;
           gap: 60px;
           align-items: flex-start;
       }

       .bs-main {
           flex: 1;
           min-width: 0;
       }

       .bs-sidebar {
           flex: 0 0 300px;
           position: sticky;
           top: 120px;
       }

       .bs-products-grid {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }

       .bs-related-grid {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }

       .bs-content .wp-block-image.alignwide {
           margin-left: -60px;
           margin-right: -60px;
       }
   }

   /* ==========================================
      16. TESTIMONIALS SECTION
      ========================================== */
   .testimonials-section {
       padding: 64px 0;
       background-color: #FAFAFA;
       position: relative;
       border-top: 1px solid rgba(0, 0, 0, 0.04);
       overflow: hidden;
   }
   
   .testi-header-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
       margin-bottom: 40px;
   }
   
   .global-rating {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       margin-top: 16px;
   }
   
   .stars {
       display: flex;
       gap: 4px;
       color: #F59E0B;
       font-size: 20px;
   }
   
   .rating-text {
       font-size: 14px;
       color: var(--text-muted);
   }
   
   .rating-text strong {
       color: var(--text-dark);
       font-size: 15px;
   }
   
   .testi-marquee-container {
       display: flex;
       flex-direction: column;
       gap: 24px;
       align-items: center;
   }
   
   .scroller {
       width: 100%;
       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);
   }
   
   .scroller-inner {
       display: flex;
       gap: 24px;
       width: max-content;
       animation: scrollMarquee 40s linear infinite;
   }
   
   .scroller[data-direction="right"] .scroller-inner {
       animation-direction: reverse;
   }
   
   .scroller:hover .scroller-inner {
       animation-play-state: paused;
   }
   
   .scroller-track {
       display: flex;
       gap: 24px;
       align-items: stretch;
   }
   
   @keyframes scrollMarquee {
       to {
           transform: translateX(calc(-50% - 12px));
       }
   }
   
   .marquee-card {
       width: 320px;
       flex-shrink: 0;
       border-radius: 20px;
       padding: 32px 24px;
       display: flex;
       flex-direction: column;
       gap: 20px;
       transition: var(--transition);
       cursor: grab;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.06);
       color: var(--text-dark);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
   }
   
   .marquee-card:active {
       cursor: grabbing;
   }
   
   .quote-icon {
       width: 44px;
       height: 44px;
       background: rgba(229, 57, 53, 0.06);
       color: var(--primary-base);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
   }
   
   .card-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
   }
   
   .small-stars {
       font-size: 14px;
   }
   
   .trust-badge {
       font-size: 11px;
       font-weight: 600;
       padding: 6px 10px;
       border-radius: 99px;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
   }
   
   .badge-green {
       background: rgba(16, 185, 129, 0.1);
       color: #059669;
   }
   
   .badge-blue {
       background: rgba(59, 130, 246, 0.1);
       color: #2563EB;
   }
   
   .testi-quote-standard {
       font-size: 15px;
       line-height: 1.6;
       margin: 0;
       flex: 1;
   }
   
   .testi-author {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: 8px;
       border-top: 1px solid rgba(0, 0, 0, 0.05);
       padding-top: 16px;
   }
   
   .author-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 14px;
       color: #ffffff;
       flex-shrink: 0;
   }
   
   .avatar-orange {
       background-color: #F59E0B;
   }
   
   .avatar-red {
       background-color: var(--primary-base);
   }
   
   .avatar-dark {
       background-color: var(--text-dark);
   }
   
   .author-info {
       display: flex;
       flex-direction: column;
   }
   
   .author-info strong {
       font-size: 14px;
       font-weight: 600;
       color: var(--text-dark);
   }
   
   .author-info span {
       font-size: 12px;
       color: var(--text-muted);
   }
   
   @media (min-width: 768px) {
       .testimonials-section {
           padding: 100px 0;
       }
   
       .testi-header-container {
           padding: 0 48px;
           margin-bottom: 64px;
       }
   
       .global-rating {
           flex-direction: row;
           gap: 16px;
       }
   
       .scroller {
           -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
       }
   
       .marquee-card {
           width: 380px;
           padding: 40px 32px;
       }
   
       .testi-quote-standard {
           font-size: 16px;
       }
   
       .author-avatar {
           width: 48px;
           height: 48px;
           font-size: 16px;
       }
   
       .author-info strong {
           font-size: 15px;
       }
   
       .author-info span {
           font-size: 13px;
       }
   }
   
   /* ==========================================
      17. FINAL CTA SECTION
      ========================================== */
   
   .final-cta-section {
       padding: 64px 20px;
       background-color: #ffffff;
   }
   
   .cta-container {
       max-width: 1000px;
       margin: 0 auto;
   }
   
   .cta-card {
       background: linear-gradient(145deg, rgba(229, 57, 53, 0.08) 0%, rgba(229, 57, 53, 0.03) 100%);
       border: 1px solid rgba(229, 57, 53, 0.05);
       border-radius: 32px;
       padding: 48px 24px;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 24px;
   }
   
   .cta-title {
       font-size: 32px;
       font-weight: 700;
       color: var(--primary-dark);
       line-height: 1.2;
   }
   
   .cta-title em {
       font-style: italic;
       font-weight: 600;
   }
   
   .cta-desc {
       font-size: 15px;
       color: var(--text-dark);
       line-height: 1.5;
       max-width: 500px;
       margin: 0 auto;
   }
   
   /* Modifier for a wider, more prominent button */
   .btn-large {
       width: 100%;
       max-width: 360px;
       padding: 18px 32px;
       font-size: 18px;
       border-radius: 16px;
       gap: 8px;
       box-shadow: 0 8px 20px rgba(229, 57, 53, 0.2);
   }
   
   .btn-large:hover {
       box-shadow: 0 12px 28px rgba(229, 57, 53, 0.3);
   }
   
   .cta-help {
       font-size: 14px;
       color: var(--text-muted);
   }
   
   .cta-help strong {
       color: var(--primary-base);
   }
   
   .mobile-break {
       display: block;
   }
   
   /* ==========================================
      18. FOOTER SECTION
      ========================================== */
   
   .site-footer {
       background-color: #0a0a0a;
       /* Deep dark theme for premium grounding */
       color: #ffffff;
       padding: 64px 20px 24px;
   }
   
   .footer-container {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 48px;
   }
   
   .footer-top {
       display: flex;
       flex-direction: column;
       gap: 40px;
   }
   
   .footer-brand {
       display: flex;
       flex-direction: column;
       gap: 16px;
       max-width: 320px;
   }
   
   .footer-logo {
       font-family: var(--font-heading);
       font-size: 24px;
       font-weight: 700;
       color: #ffffff;
       letter-spacing: -0.5px;
   }
   
   .footer-brand-desc {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.6);
       line-height: 1.6;
   }
   
   .footer-links-group {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   
   .footer-heading {
       font-size: 13px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #ffffff;
   }
   
   .footer-links {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .footer-links a {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.6);
       transition: var(--transition);
   }
   
   .footer-links a:hover {
       color: var(--primary-light);
   }
   
   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 24px;
       text-align: center;
   }
   
   .copyright {
       font-size: 13px;
       color: rgba(255, 255, 255, 0.4);
   }
   
   /* ==========================================
      DESKTOP ADAPTATION (Sections 17 & 18)
      ========================================== */
   
   @media (min-width: 768px) {
   
       /* CTA Adjustments */
       .final-cta-section {
           padding: 80px 48px;
       }
   
       .cta-card {
           padding: 80px 48px;
           gap: 32px;
       }
   
       .cta-title {
           font-size: 44px;
       }
   
       .cta-desc {
           font-size: 16px;
       }
   
       .mobile-break {
           display: none;
       }
   
       /* Footer Adjustments */
       .site-footer {
           padding: 80px 48px 24px;
       }
   
       .footer-top {
           flex-direction: row;
           justify-content: space-between;
       }
   
       .footer-links-group {
           min-width: 160px;
       }
   
       .footer-bottom {
           text-align: left;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
   }
   
   @media (min-width: 1024px) {
       .cta-title {
           font-size: 52px;
       }
   }


/*****Custom CTA Button************************************************************************************************/
.custom-cta-button {
    /* Colors */
    background-color: #ffffff;
    color: #E53935;
    border: 2px solid #E53935;
    
    /* Layout & Spacing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between text and icon */
    padding: 14px 28px;
    
    /* Typography */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    
    /* Shape & Polish */
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  /* Hover & Interaction */
  .custom-cta-button:hover {
    background-color: #fef2f2; /* Subtle red-tinted highlight */
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.15);
    transform: translateY(-1px);
  }
  
  .custom-cta-button:active {
    transform: translateY(0);
  }
  
  /* Phosphor Icon Styling */
  .custom-cta-button i {
    font-size: 20px; /* Slightly larger than text for visual balance */
    display: flex;
    align-items: center;
  }

  .cta-card .custom-cta-button, .cta-card .btn-large,  
  .testi-marquee-container .custom-cta-button
  {
    border-radius: 16px;
    width:100%;
    max-width: 360px;
  }

  .purchase-section .custom-cta-button,  
  .cs-action .btn-primary,
  .cs-section .custom-cta-button,
  .trust-container-alt .custom-cta-button,
  .cs-action .custom-cta-button,
  .science-section .custom-cta-button,
  .cert-stats-section .custom-cta-button,
  .dosage-section-comp .custom-cta-button
  {
    border-radius: 16px;
  }

  
  /* Mobile Optimization */
  @media (max-width: 600px) {
    .custom-cta-button {
      width: 100%;       /* Full width on mobile for easy tapping */
      padding: 14px;     /* Larger tap area */
      font-size: 16px;   /* Improved readability */
    }
    .cta-card .btn-large{
        border-radius: 16px;
        width:100%;
      }
  }
/*****Custom CTA Button************************************************************************************************/