:root {
            --heading-color: #111827;
            --body-text-color: #374151;
            --brand-yellow: #fecb3a;
            --brand-indigo: #6468af;
            --brand-lavender: #a5a8d4;
            --bg-light-1: #ffffff;
            --bg-light-2: #f9fafb;
            --bg-light-lilac: #f8f6fc;
            --dark-card-start: #111827;
            --dark-card-end: #1f2937;
            /* Midnight palette tokens */
            --midnight-900: #0b1220;
            --midnight-800: #0f1b2d;
            --midnight-700: #13223a;
            --midnight-600: #183255;
            --dark-heading: #e6ecff;
            --dark-body: #c7d2fe;
            --dark-muted: #9fb1d6;
            --dark-border: #23314d;
            --dark-surface-1: #0e1b2e;
            --dark-surface-2: #0b1526;
            --dark-surface-3: #14213a;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light-1);
            color: var(--body-text-color);
            font-size: 16px;
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--heading-color);
            text-transform: uppercase;
            font-weight: 300 !important;
        }

        /* Hero Section Styling */
        .hero-gradient {
            background: linear-gradient(135deg, var(--brand-yellow), var(--brand-indigo), var(--brand-lavender));
        }

        @keyframes hover-float {
          0%, 100% { transform: translateY(0) rotate(var(--initial-rotate, 0deg)); }
          50% { transform: translateY(-20px) rotate(var(--initial-rotate, 0deg)); }
        }
        
        @keyframes magical-fade-in {
          0% {
            opacity: 0;
            transform: translateY(30px) scale(0.8) rotate(calc(var(--initial-rotate, 0deg) + 10deg));
            filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(8px);
          }
          60% {
            opacity: 0.8;
            transform: translateY(-10px) scale(1.05) rotate(calc(var(--initial-rotate, 0deg) - 5deg));
            filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(2px);
          }
          100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotate(var(--initial-rotate, 0deg));
            filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(0px);
          }
        }
        
        .hover-bottle {
          animation: magical-fade-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                     hover-float 6s ease-in-out infinite;
          animation-delay: var(--fade-delay, 0s), var(--fade-delay, 0s);
          position: absolute;
          filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15));
          will-change: transform, opacity;
          opacity: 0;
        }

        /* Ritual Section Animations */
        @keyframes gentle-shake {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(-3deg); }
            75% { transform: rotate(3deg); }
        }

        .ritual-card-1:hover .ritual-image-bottle { animation: gentle-shake 0.5s ease-in-out infinite alternate; }
        .ritual-card-2:hover .ritual-image-bottle { 
            transform: scale(1.5) translateY(20px) rotate(25deg); 
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .ritual-card-3 .glow-overlay {
            position: absolute; inset: 0;
            background: radial-gradient(circle, rgba(165, 168, 212, 0.6) 0%, rgba(254, 203, 58, 0.4) 100%);
            opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 25;
        }
        .ritual-card-3:hover .glow-overlay { opacity: 1; }
        .ritual-image, .ritual-image-bottle { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

        /* Bento Grid & Card Hovers */
        .bento-card:hover img { transform: scale(1.05); }
        .bento-card img, .shop-card img { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
        .shop-card:hover img { transform: scale(1.05); }

        .science-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .science-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(100, 104, 175, 0.1), 0 8px 10px -6px rgba(100, 104, 175, 0.1);
        }
        
        /* FAQ Accordion */
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        details > summary .accordion-icon { transition: transform 0.3s ease; }
        details[open] > summary .accordion-icon { transform: rotate(180deg); }

        /* Scroll-Reveal Animations */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

        /* Modal Styles */
        #modal {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        #modal.is-visible { opacity: 1; pointer-events: auto; }
        #modal.is-visible #modal-content { transform: translateY(0); opacity: 1; }
        /* Modal content sizing - refined design */
        #modal-content {
            max-width: 7xl;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            position: relative;
        }
        
        @media (max-width: 1023px) {
            #modal-content {
                max-width: 95vw;
                width: 100%;
            }
        }

        /* Modal typography - matching reference design exactly */
        #modal-body {
            font-size: 1rem;
            line-height: 1.6;
            color: #ffffff;
        }
        
        #modal-body p { 
            margin: 0 0 1rem 0; 
            color: #e5e7eb;
            font-weight: 400;
        }
        
        #modal-body strong { 
            color: #ffffff; 
            font-weight: 600; 
        }
        
        #modal-body h2 { 
            color: #ffffff; 
            font-weight: 800; 
            font-size: 2.25rem;
            margin: 0 0 0.75rem 0;
            letter-spacing: -0.025em;
            text-transform: uppercase;
        }
        
        #modal-body h3 { 
            color: #ffffff; 
            font-weight: 600; 
            font-size: 1.125rem;
            margin: 1rem 0 0.75rem 0;
            letter-spacing: -0.025em;
        }
        
        #modal-body h4 { 
            color: #ffffff; 
            font-weight: 600; 
            font-size: 1rem;
            margin: 1rem 0 0.5rem 0; 
            letter-spacing: -0.025em;
        }
        
        #modal-body ul { 
            margin: 0.75rem 0 1rem 1.5rem; 
            padding: 0; 
        }
        
        #modal-body li { 
            margin: 0.375rem 0; 
            list-style: disc;
            color: #e5e7eb;
            line-height: 1.5;
            font-size: 1rem;
        }
        
        /* Special styling for scientific content */
        #modal-body .modal-subtitle {
            color: #a1a1aa;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            text-transform: lowercase;
            font-style: italic;
        }
        
        /* Modal layout - two column structure matching reference */
        #modal-main-content {
            display: flex;
            min-height: auto;
        }
        
        /* Left panel - visual content */
        #modal-visual-panel {
            flex: 1;
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        /* Right panel - text content */
        #modal-text-panel {
            flex: 1;
            background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        
        /* Image container styling */
        #modal-image-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        #modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 0.75rem;
            transition: transform 0.3s ease;
        }
        
        #modal-image:hover {
            transform: scale(1.02);
        }
        
        #modal-caption {
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 1.5rem;
            text-align: center;
            font-style: italic;
            line-height: 1.5;
        }
        
        
        /* Mobile responsive layout - stack panels */
        @media (max-width: 1023px) {
            #modal-main-content {
                flex-direction: column;
                min-height: auto;
                max-height: none;
            }
            
            #modal-visual-panel {
                flex: none;
                min-height: 250px;
                max-height: none;
                height: auto;
                padding: 2rem;
            }
            
            #modal-text-panel {
                flex: none;
                min-height: auto;
                max-height: none;
                height: auto;
                padding: 2rem;
                overflow-y: visible;
                justify-content: flex-start;
            }
            
            #modal-body {
                font-size: 1rem;
            }
            
            #modal-body h2 {
                font-size: 1.75rem;
            }
        }
        
        /* Tablet responsive */
        @media (max-width: 768px) {
            #modal-visual-panel {
                padding: 1.5rem;
                max-height: none;
            }
            
            #modal-text-panel {
                padding: 1.5rem;
                max-height: none;
            }
        }
        
        /* Ingredient mode overrides (applies only when #modal-content has .modal--ingredient) */
        #modal-content.modal--ingredient {
            max-width: 6xl;
        }
        #modal-content.modal--ingredient #modal-main-content {
            min-height: 520px;
        }
        #modal-content.modal--ingredient #modal-visual-panel {
            flex: 1.5; /* ~60% */
            padding: 1.5rem;
        }
        #modal-content.modal--ingredient #modal-text-panel {
            flex: 1;   /* ~40% */
            padding: 1.25rem 1.5rem; /* tighter */
            justify-content: center; /* vertical centering */
        }
        #modal-content.modal--ingredient #modal-text-content {
            max-width: 42ch; /* prevent overly wide single-line sentences */
            margin: 0 auto;
        }
        #modal-content.modal--ingredient #modal-body {
            font-size: 0.95rem;
            line-height: 1.55;
        }
        #modal-content.modal--ingredient #modal-body p {
            margin: 0 0 0.75rem 0;
        }
        #modal-content.modal--ingredient #modal-body h2 {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02em;
            text-transform: uppercase;
        }
        #modal-content.modal--ingredient #modal-body h3 {
            margin: 0.75rem 0 0.5rem 0;
        }
        #modal-content.modal--ingredient #modal-image-container {
            padding: 0; /* reduce white margins around image */
        }
        
        /* Soft divider for very short content */
        #modal-content.modal--ingredient.short-text #modal-text-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 1.5rem;
            right: 1.5rem;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(100, 104, 175, 0.35), transparent);
            z-index: 2;
        }
        html.dark #modal-content.modal--ingredient.short-text #modal-text-panel::before {
            background: linear-gradient(90deg, transparent, rgba(165, 168, 212, 0.35), transparent);
        }
        
        /* Ingredient mode responsive tweaks */
        @media (max-width: 1023px) {
            #modal-content.modal--ingredient #modal-main-content {
                min-height: auto;
            }
            #modal-content.modal--ingredient #modal-visual-panel {
                min-height: 200px;
                max-height: none;
                height: auto;
                padding: 1rem;
            }
            #modal-content.modal--ingredient #modal-text-panel {
                min-height: auto;
                max-height: none;
                height: auto;
                padding: 1rem 1.25rem;
            }
            #modal-content.modal--ingredient #modal-text-content {
                max-width: 46ch;
            }
            #modal-content.modal--ingredient #modal-body {
                font-size: 0.95rem;
            }
            #modal-content.modal--ingredient #modal-body h2 {
                font-size: 1.5rem;
            }
        }
        @media (max-width: 768px) {
            #modal-content.modal--ingredient #modal-visual-panel {
                padding: 0.75rem;
                max-height: none;
                min-height: 180px;
            }
            #modal-content.modal--ingredient #modal-text-panel {
                padding: 0.75rem 1rem;
            }
        }
        
        /* Special handling for content with inline figures */
        #modal-body .two-images {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin: 1.5rem 0;
        }
        
        @media (min-width: 768px) {
            #modal-body .two-images {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        #modal-body figure {
            margin: 1.5rem 0;
            text-align: center;
        }
        
        #modal-body figure img {
            width: 100%;
            height: auto;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Science Modal Styles */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.75);
            transition: opacity 0.3s ease-in-out;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        .modal {
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
            margin: 2rem auto;
        }
        .modal.hidden {
            transform: scale(0.95);
            opacity: 0;
            pointer-events: none;
        }
        .info-panel {
            transition: opacity 0.3s ease-in-out;
        }
        
        /* Ensure science modals content is fully visible */
        @media (max-width: 1023px) {
            .modal {
                margin: 1rem auto;
            }
        }
        
        #modal-body figcaption {
            font-size: 0.875rem;
            color: #a1a1aa;
            margin-top: 0.75rem;
            text-align: center;
            font-style: italic;
            line-height: 1.5;
        }
        
        /* Enhanced content styling */
        #modal-body blockquote {
            border-left: 4px solid #3b82f6;
            padding-left: 1rem;
            margin: 1.5rem 0;
            font-style: italic;
            color: #d1d5db;
        }
        
        #modal-body code {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }
        
        #modal-body pre {
            background-color: rgba(0, 0, 0, 0.3);
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1rem 0;
        }
        
        #modal-body pre code {
            background: none;
            padding: 0;
        }
        
        /* Dark mode modal styling */
        html.dark #modal-text-panel {
            background: linear-gradient(135deg, var(--midnight-900) 0%, var(--midnight-800) 100%);
        }
        
        html.dark #modal-visual-panel {
            background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface-3) 100%);
        }
        
        
        html.dark #modal-caption {
            color: var(--dark-muted);
        }
        
        html.dark #modal-body figure img {
            border-color: var(--dark-border);
        }
        
        html.dark #modal-body figcaption {
            color: var(--dark-muted);
        }
        
        html.dark #modal-close {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
        html.dark #modal-close:hover {
            background: rgba(0, 0, 0, 0.5);
        }
        html.dark #modal-body { color: var(--dark-body); }
        html.dark #modal-body strong, html.dark #modal-body h4 { color: var(--dark-heading); }

        .nav-link.active {
            color: var(--heading-color) !important;
        }
        /* Active color should always contrast the white sliding capsule */
        header:not(.nav-on-white) .nav-link.active { color: #111827 !important; }
        header.nav-on-white .nav-link.active { color: #111827 !important; }
        /* Hide sliding capsule until a link is active */
        #sliding-capsule { opacity: 0; }
        .nav-link, .mobile-nav-link {
            text-transform: uppercase;
            font-weight: 400 !important; /* regular */
            letter-spacing: 0.02em;
            transition: color 0.2s ease;
        }
        /* Default to white nav text; switch to dark when header has nav-on-white */
        header:not(.nav-on-white) .nav-link { color: #ffffff !important; }
        /* On hover, the sliding capsule moves under the link → text must turn dark for contrast */
        header:not(.nav-on-white) .nav-link:hover { color: #111827 !important; }
        header.nav-on-white .nav-link { color: #111827 !important; }
        header.nav-on-white .nav-link:hover { color: #000000 !important; }
        /* Ensure dark mode respects section-based color switching */
        html.dark header:not(.nav-on-white) .nav-link { color: #ffffff !important; }
        /* In dark mode on dark backgrounds, keep links white on hover for contrast */
        html.dark header:not(.nav-on-white) .nav-link:hover { color: #ffffff !important; }
        html.dark header.nav-on-white .nav-link { color: #111827 !important; }
        html.dark header.nav-on-white .nav-link:hover { color: #000000 !important; }
        html.dark header:not(.nav-on-white) .nav-link.active { color: #ffffff !important; }
        html.dark header.nav-on-white .nav-link.active { color: #111827 !important; }

        /* Final override: only force dark text when header is on white */
        header.nav-on-white .nav-link.active, header.nav-on-white .nav-link.active:hover { color: #111827 !important; }
        
        /* Dark mode: always keep nav text white regardless of section background */
        html.dark header .nav-link { color: #ffffff !important; }
        html.dark header .nav-link:hover { color: #ffffff !important; }
        html.dark header .nav-link.active, html.dark header .nav-link.active:hover { color: #ffffff !important; }
        html.dark header.nav-on-white .nav-link { color: #ffffff !important; }
        html.dark header.nav-on-white .nav-link:hover { color: #ffffff !important; }
        html.dark header.nav-on-white .nav-link.active, html.dark header.nav-on-white .nav-link.active:hover { color: #ffffff !important; }
        
        .glass-capsule {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        /* Mobile Navigation - Modern & Beautiful Design */
        #mobile-nav.is-open { opacity: 1; pointer-events: auto; }
        #mobile-nav.is-open #mobile-nav-panel { transform: translateY(0); opacity: 1; }
        
        /* Premium gradient backdrop */
        #mobile-nav { 
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(100, 104, 175, 0.2));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        
        /* Mobile nav panel - Ultra-modern glass morphism */
        #mobile-nav-panel {
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
            background: linear-gradient(165deg, 
                rgba(255, 255, 255, 0.98) 0%, 
                rgba(248, 250, 252, 0.95) 100%);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset,
                0 4px 16px rgba(100, 104, 175, 0.08);
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            height: 100vh;
        }
        
        /* Elegant animated gradient overlay */
        #mobile-nav-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 300px;
            background: linear-gradient(180deg, 
                rgba(100, 104, 175, 0.05) 0%,
                rgba(165, 168, 212, 0.03) 50%,
                transparent 100%);
            animation: gentle-float 8s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }
        
        @keyframes gentle-float {
            0%, 100% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(20px); opacity: 0.7; }
        }
        
        /* Mobile nav content */
        #mobile-nav-content {
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
        }
        
        /* Mobile nav header - Elevated design */
        #mobile-nav-header {
            padding: 0 0 1.5rem;
            margin-bottom: 2rem;
            position: relative;
        }
        
        #mobile-nav-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--brand-indigo) 50%, 
                transparent 100%);
            border-radius: 999px;
        }
        
        /* Mobile nav links - Modern card-based design */
        #mobile-nav-links {
            padding: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 2rem;
        }
        
        .mobile-nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            color: #1f2937;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            text-decoration: none;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(100, 104, 175, 0.12);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            transform: translateX(-30px);
            animation: slideInFromLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        }
        
        .mobile-nav-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--brand-lavender), var(--brand-indigo));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .mobile-nav-link::after {
            content: '→';
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            color: var(--brand-indigo);
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .mobile-nav-link:nth-child(1) { animation-delay: 0.05s; }
        .mobile-nav-link:nth-child(2) { animation-delay: 0.1s; }
        .mobile-nav-link:nth-child(3) { animation-delay: 0.15s; }
        .mobile-nav-link:nth-child(4) { animation-delay: 0.2s; }
        .mobile-nav-link:nth-child(5) { animation-delay: 0.25s; }
        .mobile-nav-link:nth-child(6) { animation-delay: 0.3s; }
        
        @keyframes slideInFromLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .mobile-nav-link:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(100, 104, 175, 0.25);
            transform: translateX(4px);
            box-shadow: 
                0 8px 20px rgba(100, 104, 175, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.9) inset;
        }
        
        .mobile-nav-link:hover::before {
            opacity: 1;
        }
        
        .mobile-nav-link:hover::after {
            opacity: 1;
            transform: translateX(0);
        }
        
        .mobile-nav-link.active {
            background: linear-gradient(135deg, 
                var(--brand-indigo) 0%, 
                var(--brand-lavender) 100%);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 
                0 12px 24px rgba(100, 104, 175, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
            transform: scale(1.02);
        }
        
        .mobile-nav-link.active::before {
            opacity: 0;
        }
        
        .mobile-nav-link.active::after {
            color: #ffffff;
        }
        
        /* Language and Contact sections - Modern card design */
        #mobile-nav-language,
        #mobile-nav-contact {
            padding: 1.25rem;
            margin: 0 0 1rem 0;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(100, 104, 175, 0.1);
            border-radius: 20px;
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(255, 255, 255, 0.7) inset;
        }
        
        .language-section-title,
        .contact-title {
            color: var(--brand-indigo);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 1rem;
            text-align: center;
            position: relative;
            display: inline-block;
            width: 100%;
        }
        
        .language-section-title::after,
        .contact-title::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--brand-indigo) 50%, 
                transparent 100%);
        }
        
        .language-buttons {
            display: flex;
            justify-content: center;
            gap: 1.25rem;
        }
        
        .language-btn {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 18px;
            border: 2px solid rgba(100, 104, 175, 0.15);
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.9) 0%, 
                rgba(248, 250, 252, 0.8) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
            position: relative;
            overflow: hidden;
        }
        
        .language-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--brand-lavender), var(--brand-indigo));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .language-btn img {
            width: 2rem;
            height: 2rem;
            border-radius: 12px;
            object-fit: cover;
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }
        
        .language-btn:hover {
            transform: translateY(-4px) scale(1.05);
            border-color: var(--brand-indigo);
            box-shadow: 
                0 12px 24px rgba(100, 104, 175, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        }
        
        .language-btn:hover::before {
            opacity: 0.1;
        }
        
        .language-btn:hover img {
            transform: scale(1.08);
        }
        
        .language-btn:active {
            transform: translateY(-2px) scale(1);
        }
        
        /* Language button active state styling */
        #lang-de-header,
        #lang-en-header,
        #lang-de-mobile,
        #lang-en-mobile {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            position: relative;
        }
        
        #lang-de-header:hover,
        #lang-en-header:hover,
        #lang-de-mobile:hover,
        #lang-en-mobile:hover {
            transform: scale(1.05);
        }
        
        #lang-de-header:active,
        #lang-en-header:active,
        #lang-de-mobile:active,
        #lang-en-mobile:active {
            transform: scale(0.95);
        }
        
        /* Prevent image from blocking clicks */
        #lang-de-header img,
        #lang-en-header img,
        #lang-de-mobile img,
        #lang-en-mobile img {
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        
        /* Contact section */
        .contact-card {
            background: transparent;
            border: none;
            padding: 0;
            box-shadow: none;
        }
        
        .contact-title {
            color: var(--brand-indigo);
            font-size: 0.7rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: block;
            text-align: center;
        }
        
        .contact-title::before {
            content: '';
            display: none;
        }
        
        .contact-info {
            color: #4b5563;
            font-size: 0.8rem;
            line-height: 1.6;
            text-align: center;
        }
        
        .contact-info p {
            margin: 0.25rem 0;
        }
        
        .contact-email {
            color: var(--brand-indigo);
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.75rem 1.5rem;
            background: rgba(100, 104, 175, 0.08);
            border-radius: 12px;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .contact-email::before {
            content: '✉';
            font-size: 1rem;
        }
        
        .contact-email:hover {
            background: var(--brand-indigo);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(100, 104, 175, 0.2);
        }
        
        /* Close button - Modern floating design */
        #mobile-nav-close {
            width: 3rem;
            height: 3rem;
            border-radius: 16px;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.9) 0%, 
                rgba(248, 250, 252, 0.85) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(100, 104, 175, 0.15);
            color: #6b7280;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
        }
        
        #mobile-nav-close:hover {
            transform: rotate(90deg) scale(1.1);
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(254, 226, 226, 0.95);
            box-shadow: 
                0 12px 24px rgba(239, 68, 68, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        }
        
        #mobile-nav-close:active {
            transform: rotate(90deg) scale(0.95);
        }
        
        /* Smooth scrollbar styling */
        #mobile-nav-panel::-webkit-scrollbar {
            width: 6px;
        }
        
        #mobile-nav-panel::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.02);
        }
        
        #mobile-nav-panel::-webkit-scrollbar-thumb {
            background: rgba(100, 104, 175, 0.2);
            border-radius: 999px;
        }
        
        #mobile-nav-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 104, 175, 0.4);
        }

        /* Variants */
        .logo-capsule { background: #ffffff; }
        .glass-panel {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88));
            backdrop-filter: blur(20px) saturate(120%);
            -webkit-backdrop-filter: blur(20px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.25), 0 10px 12px -6px rgba(0, 0, 0, 0.15);
        }
        
        /* Dark mode (midnight) overrides */
        html.dark body {
            background-color: var(--midnight-900);
            color: var(--dark-body);
        }
        /* Logos: black in light, white in dark */
        .logo-img { filter: none; transition: filter 0.2s ease; }
        html.dark .logo-img { filter: brightness(0) invert(1); }
        html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
            color: var(--dark-heading);
        }
        html.dark .hero-gradient {
            background: linear-gradient(135deg, #0b1220 0%, #11203a 50%, #1b2b4a 100%);
        }
        html.dark .glass-capsule {
            background: linear-gradient(to bottom, rgba(17, 24, 39, 0.65), rgba(17, 24, 39, 0.35));
            border: 1px solid rgba(148, 163, 184, 0.22);
            color: #e5e7eb;
        }
        html.dark .logo-capsule {
            background: rgba(255, 255, 255, 0.06);
        }
        html.dark #sliding-capsule {
            background: rgba(255, 255, 255, 0.10) !important;
            border: 1px solid rgba(148, 163, 184, 0.18);
        }
        /* Global dark-mode color for links that use the nav-link class outside header (if any) */
        html.dark .nav-link { color: #cbd5e1 !important; }
        /* Do not force active to white here — header-specific rules above handle contrast */
        html.dark .nav-link:hover { color: #e8efff !important; }

        /* Sections and cards */
        html.dark section.bg-white { background-color: var(--midnight-900) !important; }
        html.dark section.bg-gray-50 { background-color: var(--midnight-800) !important; }
        html.dark .bg-white { background-color: var(--dark-surface-1) !important; }
        html.dark .bg-gray-50 { background-color: var(--dark-surface-2) !important; }
        html.dark .border-gray-200, html.dark .border-gray-100 { border-color: var(--dark-border) !important; }

        /* Text contrasts */
        html.dark .text-gray-900, html.dark .text-gray-800 { color: #e5e7eb !important; }
        html.dark .text-gray-700, html.dark .text-gray-600 { color: #cbd5e1 !important; }
        html.dark .text-gray-500 { color: #9fb1d6 !important; }
        html.dark .text-gray-400 { color: #8aa0c7 !important; }
        html.dark a:hover { color: #ffffff; }
        html.dark .accordion-icon svg path, html.dark .accordion-icon path { stroke: #a3b6da !important; }

        /* Ingredient badges (titles) - match science card typography */
        html.dark .ingredient-title {
            background: rgba(11, 18, 32, 0.85) !important;
            color: #e5e7eb !important; /* match science card text color */
            font-weight: 700 !important; /* font-bold - matches science card h3 */
            font-size: 1.125rem !important; /* text-lg - matches science card h3 */
            letter-spacing: 0.025em !important; /* match science card letter spacing */
            box-shadow: 0 2px 8px rgba(2, 6, 23, 0.45);
            border: 1px solid rgba(148, 163, 184, 0.22);
        }

        /* Science cards */
        html.dark .science-card { background-color: var(--dark-surface-2) !important; box-shadow: 0 20px 25px -5px rgba(18, 32, 58, 0.35), 0 8px 10px -6px rgba(18, 32, 58, 0.3) !important; }
        html.dark .science-card p, html.dark .science-card h3 { color: #e5e7eb; }

        /* Shop cards */
        html.dark .shop-card { background-color: var(--dark-surface-2) !important; }
        html.dark .shop-card .text-gray-500 { color: #9fb1d6 !important; }
        html.dark .shop-card .text-gray-900 { color: #e5e7eb !important; }
        html.dark .shop-card a { background-color: #253b63 !important; }
        html.dark .shop-card a:hover { background-color: #1d2f50 !important; }

        /* Modal */
        html.dark #modal-content { background-color: var(--dark-surface-1); color: var(--dark-body); }
        html.dark #modal-close { color: #a5b4fc; }

        /* Mobile nav panel - Dark mode - Ultra premium */
        html.dark #mobile-nav {
            background: linear-gradient(135deg, rgba(11, 18, 32, 0.6), rgba(19, 34, 58, 0.4));
        }
        
        html.dark #mobile-nav-panel {
            background: linear-gradient(165deg, 
                rgba(11, 18, 32, 0.98) 0%, 
                rgba(15, 27, 45, 0.96) 100%);
            backdrop-filter: blur(40px) saturate(150%);
            -webkit-backdrop-filter: blur(40px) saturate(150%);
            border: 1px solid rgba(165, 168, 212, 0.15);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 4px 16px rgba(100, 104, 175, 0.1);
        }
        
        html.dark #mobile-nav-panel::before {
            background: linear-gradient(180deg, 
                rgba(165, 168, 212, 0.08) 0%,
                rgba(100, 104, 175, 0.05) 50%,
                transparent 100%);
        }
        
        html.dark #mobile-nav-header::after {
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--brand-lavender) 50%, 
                transparent 100%);
        }
        
        html.dark .mobile-nav-link {
            color: #e5e7eb;
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(165, 168, 212, 0.12);
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        }
        
        html.dark .mobile-nav-link::after {
            color: var(--brand-lavender);
        }
        
        html.dark .mobile-nav-link:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(165, 168, 212, 0.25);
            color: #ffffff;
            box-shadow: 
                0 8px 20px rgba(100, 104, 175, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }
        
        html.dark .mobile-nav-link.active {
            background: linear-gradient(135deg, 
                var(--brand-lavender) 0%, 
                var(--brand-indigo) 100%);
            color: #ffffff;
            border-color: transparent;
        }
        
        html.dark #mobile-nav-language,
        html.dark #mobile-nav-contact {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(165, 168, 212, 0.1);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        }
        
        html.dark .language-section-title,
        html.dark .contact-title {
            color: var(--brand-lavender);
        }
        
        html.dark .language-section-title::after,
        html.dark .contact-title::after {
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--brand-lavender) 50%, 
                transparent 100%);
        }
        
        html.dark .language-btn {
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.08) 0%, 
                rgba(255, 255, 255, 0.04) 100%);
            border-color: rgba(165, 168, 212, 0.2);
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        }
        
        html.dark .language-btn:hover {
            border-color: var(--brand-lavender);
            box-shadow: 
                0 12px 24px rgba(165, 168, 212, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }
        
        html.dark .language-btn::before {
            background: linear-gradient(135deg, var(--brand-lavender), var(--brand-indigo));
        }
        
        html.dark .contact-info {
            color: #cbd5e1;
        }
        
        html.dark .contact-email {
            color: var(--brand-lavender);
            background: rgba(165, 168, 212, 0.1);
        }
        
        html.dark .contact-email:hover {
            background: var(--brand-lavender);
            color: #111827;
            box-shadow: 0 8px 16px rgba(165, 168, 212, 0.3);
        }
        
        html.dark #mobile-nav-close {
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.08) 0%, 
                rgba(255, 255, 255, 0.04) 100%);
            border-color: rgba(165, 168, 212, 0.2);
            color: #cbd5e1;
            box-shadow: 
                0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        }
        
        html.dark #mobile-nav-close:hover {
            background: rgba(254, 226, 226, 0.15);
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.4);
            box-shadow: 
                0 12px 24px rgba(239, 68, 68, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }
        
        html.dark #mobile-menu-button { 
            background-color: rgba(255, 255, 255, 0.08); 
            color: #e5e7eb;
        }
        
        html.dark #mobile-nav-panel::-webkit-scrollbar-thumb {
            background: rgba(165, 168, 212, 0.3);
        }
        
        html.dark #mobile-nav-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(165, 168, 212, 0.5);
        }

        /* Footer - Modern Design */
        footer {
            position: relative;
        }
        
        /* Footer link animations */
        footer a {
            position: relative;
        }
        
        footer a span {
            display: inline-block;
        }
        
        /* Footer dark mode */
        html.dark footer {
            background: var(--midnight-900);
        }
        
        html.dark footer .absolute.inset-0 {
            background: linear-gradient(135deg, var(--midnight-800) 0%, var(--midnight-900) 50%, var(--midnight-800) 100%);
            opacity: 1;
        }
        
        html.dark footer .absolute.top-0 {
            background: radial-gradient(circle at top right, rgba(165, 168, 212, 0.08) 0%, transparent 70%);
        }
        
        html.dark footer .absolute.bottom-0 {
            background: radial-gradient(circle at bottom left, rgba(254, 203, 58, 0.06) 0%, transparent 70%);
        }
        
        html.dark footer p:not([data-i18n="text135"]) {
            color: var(--dark-body);
        }
        
        html.dark footer h3 {
            color: var(--dark-heading);
        }
        
        html.dark footer a:not(.legal-trigger):not([href="mailto:info@sirtfood.com"]) {
            color: var(--dark-body);
        }
        
        html.dark footer a:hover {
            color: var(--brand-lavender);
        }
        
        html.dark footer .border-gray-200 {
            border-color: var(--dark-border);
        }
        
        html.dark footer .bg-gradient-to-br.from-gray-50 {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-color: var(--dark-border);
        }
        
        html.dark footer [data-i18n="text135"] {
            color: var(--dark-muted);
        }
        
        html.dark footer .text-gray-400 {
            color: var(--dark-muted);
        }
        
        html.dark footer .bg-gray-300 {
            background-color: var(--dark-border);
        }
        
        /* Footer logo handling - black in light mode, white in dark mode */
        .footer-logo {
            filter: none;
            opacity: 0.85;
            transition: filter 0.2s ease, opacity 0.2s ease;
        }
        
        .footer-main-logo {
            filter: none;
            opacity: 1;
            transition: filter 0.2s ease, opacity 0.2s ease;
        }
        
        html.dark .footer-logo {
            filter: brightness(0) invert(1);
            opacity: 0.95;
        }
        
        html.dark .footer-main-logo {
            filter: brightness(0) invert(1);
            opacity: 1;
        }
        
        /* Quality badges dark mode */
        html.dark footer .bg-gray-100 {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: var(--dark-border);
        }
        
        html.dark footer .text-gray-600:not(a) {
            color: var(--dark-body);
        }
        
        html.dark footer input,
        html.dark footer button[type="submit"] {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: var(--dark-border);
            color: var(--dark-heading);
        }
        
        html.dark footer input::placeholder {
            color: var(--dark-muted);
        }
        
        html.dark footer button[type="submit"] {
            background-color: var(--brand-lavender);
            color: var(--midnight-900);
        }
        
        html.dark footer button[type="submit"]:hover {
            background-color: var(--brand-indigo);
        }
        
        /* Social icons dark mode */
        html.dark footer .bg-gray-100:has(svg) {
            background-color: rgba(255, 255, 255, 0.08);
        }
        
        html.dark footer .bg-gray-100:has(svg):hover {
            background-color: var(--brand-lavender);
        }
        
        /* Footer mobile responsiveness */
        @media (max-width: 640px) {
            footer {
                padding-top: 3rem;
            }
            
            footer .grid.lg\\:grid-cols-12 {
                gap: 3rem;
            }
            
            footer .grid.sm\\:grid-cols-3 {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            
            footer h3 {
                font-size: 0.875rem;
                margin-bottom: 1.25rem;
            }
            
            footer .quality-badges {
                justify-content: center;
            }
            
            footer .partner-badge {
                width: 100%;
                justify-content: center;
            }
        }

        /* Theme toggle button */
        #theme-toggle { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
        #theme-toggle:hover { transform: translateY(-1px); }
        html.dark #theme-toggle { background: rgba(255, 255, 255, 0.10); border-color: rgba(148, 163, 184, 0.25); color: #e5e7eb; }

        /* Ritual card 3 readability overlay
           Light mode: remove overlay for better contrast.
           Dark mode: keep gradient for legibility. */
        .ritual-gradient-overlay { display: none; }
        html.dark .ritual-gradient-overlay {
            display: block;
            position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 20;
            background: linear-gradient(to top, rgba(5, 10, 20, 0.92), rgba(5, 10, 20, 0.6), rgba(5, 10, 20, 0));
        }
        /* Ensure strong typography contrast in light mode for card 03 */
        html:not(.dark) .ritual-card-3 h3 { color: var(--heading-color) !important; }
        html:not(.dark) .ritual-card-3 p { color: var(--body-text-color) !important; }

        /* Benefits Section Responsive Improvements */
        @media (max-width: 1023px) {
            #benefits {
                min-height: 100vh;
            }
            
            #benefits .grid {
                grid-template-columns: 1fr;
                gap: 2rem;
                min-height: 70vh;
            }
            
            #benefits .reveal-on-scroll:first-child {
                order: 2;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 100%;
            }
            
            #benefits .reveal-on-scroll:last-child {
                order: 1;
            }
            
            #benefits .mb-8.lg\\:mb-16 {
                margin-bottom: 1.5rem;
            }
            
            #benefits .flex.flex-col.justify-end {
                justify-content: flex-start;
            }
        }
        
        @media (max-width: 768px) {
            #benefits {
                min-height: 100vh;
            }
            
            #benefits .grid {
                min-height: 60vh;
            }
            
            #benefits .text-3xl.sm\\:text-4xl.lg\\:text-5xl {
                font-size: 1.75rem;
                line-height: 1.1;
            }
            
            #benefits .text-base.lg\\:text-lg {
                font-size: 0.875rem;
            }
            
            #benefits .text-xl.lg\\:text-2xl {
                font-size: 1.125rem;
            }
            
            #benefits .space-y-3.lg\\:space-y-4 li {
                margin-bottom: 0.75rem;
            }
            
            #benefits .text-sm.lg\\:text-base {
                font-size: 0.8rem;
            }
        }
        
        @media (max-width: 480px) {
            #benefits .text-3xl.sm\\:text-4xl.lg\\:text-5xl {
                font-size: 1.5rem;
                line-height: 1.1;
            }
            
            #benefits .text-base.lg\\:text-lg {
                font-size: 0.8rem;
            }
            
            #benefits .text-xl.lg\\:text-2xl {
                font-size: 1rem;
            }
            
            #benefits .text-sm.lg\\:text-base {
                font-size: 0.75rem;
            }
        }
        
        @media (min-width: 1024px) {
            #benefits .grid {
                align-items: start;
            }
            
            #benefits .reveal-on-scroll:first-child {
                order: 1;
            }
            
            #benefits .reveal-on-scroll:last-child {
                order: 2;
            }
        }
        
        /* Dynamic font scaling based on viewport */
        @media (min-width: 1200px) {
            #benefits .text-3xl.sm\\:text-4xl.lg\\:text-5xl {
                font-size: 3.5rem;
            }
        }
        
        @media (min-width: 1400px) {
            #benefits .text-3xl.sm\\:text-4xl.lg\\:text-5xl {
                font-size: 4rem;
            }
        }

        /* Mobile-only layout refinements */
        @media (max-width: 640px) {
            /* Modern Bento Grid for Ingredients - Mobile */
            #ingredients .max-w-6xl {
                max-width: 100%;
                padding: 0;
            }
            
            /* First row - 2 large cards side by side */
            #ingredients > div > div > div:first-child {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
                margin-bottom: 0.75rem;
            }
            
            /* Make first two cards (Mango & Olive) more compact but side-by-side */
            #ingredients > div > div > div:first-child > button {
                padding: 1rem;
                min-height: 240px;
                display: flex;
                flex-direction: column;
                background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
                border: 1px solid rgba(100, 104, 175, 0.1);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                position: relative;
                overflow: visible;
            }
            
            /* Add gradient overlay to first card */
            #ingredients > div > div > div:first-child > button:first-child::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 50%;
                background: linear-gradient(180deg, rgba(254, 203, 58, 0.08) 0%, transparent 100%);
                pointer-events: none;
                z-index: 1;
            }
            
            /* Add gradient overlay to second card */
            #ingredients > div > div > div:first-child > button:nth-child(2)::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 50%;
                background: linear-gradient(180deg, rgba(100, 104, 175, 0.06) 0%, transparent 100%);
                pointer-events: none;
                z-index: 1;
            }
            
            /* Image containers for large cards */
            #ingredients > div > div > div:first-child > button > div:first-child {
                height: 100px;
                margin-bottom: 0.75rem;
                flex-shrink: 0;
            }
            
            /* Text content for large cards */
            #ingredients > div > div > div:first-child > button > div:last-child {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                position: relative;
                z-index: 2;
            }
            
            #ingredients > div > div > div:first-child h3 {
                font-size: 0.875rem;
                line-height: 1.1;
                margin-bottom: 0.375rem;
                font-weight: 800;
            }
            
            #ingredients > div > div > div:first-child p {
                font-size: 0.7rem;
                line-height: 1.3;
                opacity: 0.8;
            }
            
            #ingredients > div > div > div:first-child .inline-block {
                font-size: 0.625rem;
                padding: 0.25rem 0.5rem;
                margin-bottom: 0.5rem;
            }
            
            /* Second row - Modern asymmetric bento grid */
            #ingredients > div > div > div:last-child {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(2, 140px);
                gap: 0.75rem;
            }
            
            /* Apple - spans 2 columns, 2 rows (tall) */
            #ingredients > div > div > div:last-child > button:nth-child(1) {
                grid-column: 1 / 3;
                grid-row: 1 / 3;
                background: linear-gradient(135deg, #fef3f2 0%, #ffffff 100%);
                border: 1px solid rgba(239, 68, 68, 0.1);
                box-shadow: 0 8px 16px rgba(239, 68, 68, 0.08);
                position: relative;
            }
            
            /* Blueberry - spans 2 columns, 1 row (wide top) */
            #ingredients > div > div > div:last-child > button:nth-child(2) {
                grid-column: 3 / 5;
                grid-row: 1 / 2;
                background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
                border: 1px solid rgba(59, 130, 246, 0.1);
                box-shadow: 0 8px 16px rgba(59, 130, 246, 0.08);
                position: relative;
            }
            
            /* Broccoli - spans 2 columns, 1 row (wide bottom) */
            #ingredients > div > div > div:last-child > button:nth-child(3) {
                grid-column: 3 / 5;
                grid-row: 2 / 3;
                background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
                border: 1px solid rgba(34, 197, 94, 0.1);
                box-shadow: 0 8px 16px rgba(34, 197, 94, 0.08);
                position: relative;
            }
            
            /* All bottom cards styling */
            #ingredients > div > div > div:last-child > button {
                padding: 1rem;
                display: flex;
                flex-direction: column;
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            
            /* Decorative corner accents */
            #ingredients > div > div > div:last-child > button::after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 60px;
                height: 60px;
                background: radial-gradient(circle at bottom right, currentColor 0%, transparent 70%);
                opacity: 0.03;
                pointer-events: none;
            }
            
            /* Image sizing for bottom cards */
            #ingredients > div > div > div:last-child > button > div:first-child {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 0.75rem;
                min-height: 60px;
            }
            
            #ingredients > div > div > div:last-child > button > div:first-child img {
                max-height: 80px;
                width: auto;
            }
            
            /* Text for bottom cards */
            #ingredients > div > div > div:last-child > button > div:last-child {
                flex-shrink: 0;
            }
            
            #ingredients > div > div > div:last-child h3 {
                font-size: 0.8rem;
                line-height: 1.15;
                margin-bottom: 0.375rem;
                font-weight: 800;
                letter-spacing: 0.02em;
            }
            
            #ingredients > div > div > div:last-child p {
                font-size: 0.65rem;
                line-height: 1.3;
                opacity: 0.75;
            }
            
            /* Touch feedback effects */
            #ingredients button {
                -webkit-tap-highlight-color: transparent;
                user-select: none;
                -webkit-user-select: none;
            }
            
            #ingredients button:active {
                transform: scale(0.98) !important;
                transition: transform 0.1s ease;
            }
            
            /* Prevent overflow issues */
            #ingredients {
                overflow-x: hidden;
            }
            
            #ingredients .w-full {
                overflow-x: hidden;
            }
            
            /* Add floating animation on scroll-reveal */
            #ingredients .reveal-on-scroll.is-visible {
                animation: floatIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            }
            
            @keyframes floatIn {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* Stagger animation delays */
            #ingredients .reveal-on-scroll:nth-child(1) { animation-delay: 0.05s; }
            #ingredients .reveal-on-scroll:nth-child(2) { animation-delay: 0.1s; }
            #ingredients .reveal-on-scroll:nth-child(3) { animation-delay: 0.15s; }
            #ingredients .reveal-on-scroll:nth-child(4) { animation-delay: 0.2s; }
            #ingredients .reveal-on-scroll:nth-child(5) { animation-delay: 0.25s; }
            
            /* 03 Ritual card: match desktop layout on mobile */
            .ritual-card-3 > span { display: block; }
            .ritual-card-3 h3, .ritual-card-3 p { text-shadow: none; }
            /* Better mobile composition matching desktop */
            .ritual-card-3 { min-height: 240px; }
            .ritual-card-3 img { object-position: center center; }
            .ritual-card-3 .relative.z-30 { justify-content: flex-end; align-items: center; padding: 2rem; }
            /* Remove the light panel behind text so it mirrors desktop */
            html:not(.dark) .ritual-card-3 .relative.z-30::before { content: none !important; }
        }
        
        /* Extra small screens refinement (iPhone SE, etc.) */
        @media (max-width: 375px) {
            #ingredients > div > div > div:first-child > button {
                padding: 0.875rem;
                min-height: 220px;
            }
            
            #ingredients > div > div > div:first-child h3 {
                font-size: 0.8rem;
            }
            
            #ingredients > div > div > div:first-child p {
                font-size: 0.65rem;
            }
            
            #ingredients > div > div > div:last-child {
                grid-template-rows: repeat(2, 130px);
            }
            
            #ingredients > div > div > div:last-child h3 {
                font-size: 0.75rem;
            }
            
            #ingredients > div > div > div:last-child p {
                font-size: 0.6rem;
            }
        }

        /* Dark mode bento grid */
        @media (max-width: 640px) {
            html.dark #ingredients > div > div > div:first-child > button {
                background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface-3) 100%);
                border-color: rgba(165, 168, 212, 0.15);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }
            
            html.dark #ingredients > div > div > div:first-child > button:first-child::before {
                background: linear-gradient(180deg, rgba(254, 203, 58, 0.12) 0%, transparent 100%);
            }
            
            html.dark #ingredients > div > div > div:first-child > button:nth-child(2)::before {
                background: linear-gradient(180deg, rgba(165, 168, 212, 0.12) 0%, transparent 100%);
            }
            
            html.dark #ingredients > div > div > div:last-child > button:nth-child(1) {
                background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--dark-surface-2) 100%);
                border-color: rgba(239, 68, 68, 0.2);
                box-shadow: 0 8px 16px rgba(239, 68, 68, 0.15);
            }
            
            html.dark #ingredients > div > div > div:last-child > button:nth-child(2) {
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--dark-surface-2) 100%);
                border-color: rgba(59, 130, 246, 0.2);
                box-shadow: 0 8px 16px rgba(59, 130, 246, 0.15);
            }
            
            html.dark #ingredients > div > div > div:last-child > button:nth-child(3) {
                background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, var(--dark-surface-2) 100%);
                border-color: rgba(34, 197, 94, 0.2);
                box-shadow: 0 8px 16px rgba(34, 197, 94, 0.15);
            }
        }

        /* Hero primary CTA contrast in dark mode */
        html.dark .order-now-btn {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.28) !important;
            box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }

        /* Shop slider dots active state */
        #shop-slider .shop-dots button.is-active { background: #111827; }
        
        /* Loading states */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--brand-indigo);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Enhanced focus states */
        .focus-visible:focus-visible {
            outline: 2px solid var(--brand-indigo);
            outline-offset: 2px;
        }
        
        /* Smooth scroll behavior */
        html { scroll-behavior: smooth; }

        /* Hero network canvas */
        #hero-network-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        
        /* Image loading optimization */
        img[loading="lazy"] {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        img[loading="lazy"].loaded {
            opacity: 1;
        }
        

/* Respect accessibility preferences without hiding animated content. */
:focus-visible { outline: 3px solid var(--brand-indigo); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
    .hover-bottle { opacity: 1 !important; }
}