<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Energy Yi — Ancient Wisdom, Modern Insight. BaZi Four Pillars destiny readings, compatibility matching, and natural crystal bracelets. Discover your element balance and life path with AI-powered Chinese metaphysics.">
    <meta name="keywords" content="bazi, four pillars, destiny reading, chinese astrology, crystal bracelet, compatibility matching, feng shui, five elements, wu xing, energy healing, natural gemstone, zhenyin meditation">
    <meta name="author" content="Energy Yi">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://energyyi.com/">
    <meta property="og:title" content="Energy Yi — Ancient Wisdom, Modern Insight">
    <meta property="og:description" content="BaZi destiny readings, compatibility matching, and natural crystal bracelets. Discover your element balance with AI-powered Chinese metaphysics.">
    <meta property="og:url" content="https://energyyi.com/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://energyyi.com/images/crystals/prod2.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Energy Yi — Ancient Wisdom, Modern Insight">
    <meta name="twitter:description" content="BaZi destiny readings, compatibility matching, and natural crystal bracelets.">
    <title>Energy Yi - Ancient Wisdom, Modern Insight</title>
    <!-- Dynamic SEO: updates title + meta on SPA route change -->
    <script>
    (function(){
      var seoMap = {
        'home':        {title:'Energy Yi — Ancient Wisdom, Modern Insight', desc:'BaZi Four Pillars destiny readings, compatibility matching, and natural crystal bracelets. Discover your element balance with AI-powered Chinese metaphysics.'},
        'bazi':        {title:'Free BaZi Reading — Energy Yi', desc:'Get your free Four Pillars BaZi chart. Discover your destiny elements, life path, and personal strengths with AI-powered Chinese astrology.'},
        'compatibility':{title:'BaZi Compatibility Matching — Energy Yi', desc:'Compare two BaZi charts for love, business, or friendship compatibility. AI-powered relationship analysis based on Chinese metaphysics.'},
        'crystals':    {title:'Crystal Shop — Natural Gemstone Bracelets | Energy Yi', desc:'Shop natural crystal bracelets balanced for the Five Elements. Wood, Fire, Earth, Metal, Water — find your element and wear your energy.'},
        'zodiac':      {title:'Daily Chinese Zodiac Fortune — Energy Yi', desc:'Daily fortune for all 12 Chinese zodiac animals. Check your luck, love, career, and compatible signs every day.'},
        'yijing':      {title:'I Ching Oracle — Energy Yi', desc:'Cast your I Ching hexagram and receive AI-interpreted guidance. Ancient wisdom meets modern insight.'},
        'hepan':       {title:'He Pan Marriage Compatibility — Energy Yi', desc:'Traditional Chinese marriage compatibility reading based on BaZi birth charts and elemental harmony.'},
        'about':       {title:'About Energy Yi — Ancient Wisdom, Modern Insight', desc:'Learn about Energy Yi — combining classical Chinese metaphysics with modern AI to deliver personalized destiny readings and natural crystal products.'},
        'product-detail':{title:'Product Details — Energy Yi Crystal Shop', desc:'Detailed specifications, benefits, and shipping information for natural crystal products from Energy Yi.'},
        'draw':        {title:'Today\'s Fortune — Daily Guidance | Energy Yi', desc:'Draw your daily fortune card — reveal your zodiac animal, monthly energy forecast, and daily guidance. Share your card with friends!'},
        'growth-compass':{title:'Growth Compass Annual Forecast — Energy Yi', desc:'Your personalized annual BaZi forecast report. Discover upcoming opportunities, challenges, and element guidance for the year ahead.'},
        'meditation':  {title:'ZhenYin Meditation — Energy Yi', desc:'AI-generated sound healing and meditation audio. Personalized frequencies based on your Five Elements balance.'}
      };
      function updateSEO(route){
        var s = seoMap[route];
        if(!s) return;
        document.title = s.title;
        var metaDesc = document.querySelector('meta[name=\"description\"]');
        if(metaDesc) metaDesc.setAttribute('content', s.desc);
        var ogTitle = document.querySelector('meta[property=\"og:title\"]');
        if(ogTitle) ogTitle.setAttribute('content', s.title);
        var ogDesc = document.querySelector('meta[property=\"og:description\"]');
        if(ogDesc) ogDesc.setAttribute('content', s.desc);
        var ogUrl = document.querySelector('meta[property=\"og:url\"]');
        if(ogUrl) ogUrl.setAttribute('content', 'https://energyyi.com/' + (route==='home'?'':route));
        var canonical = document.querySelector('link[rel=\"canonical\"]');
        if(canonical) canonical.setAttribute('href', 'https://energyyi.com/' + (route==='home'?'':route));
      }
      window.__updateSEO = updateSEO;
      // Hook into hashchange for SPA navigation
      window.addEventListener('hashchange', function(){
        var route = window.location.hash.replace('#','') || 'home';
        updateSEO(route);
      });
      // Initial call
      var initRoute = window.location.hash.replace('#','') || 'home';
      if(initRoute !== 'home') updateSEO(initRoute);
    })();
    </script>
    <link rel="stylesheet" href="css/style-r4.css">
    <link rel="stylesheet" href="css/style-r5.css">
    <link rel="stylesheet" href="css/theme.css?v=9">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- PayPal SDK: lazy-loaded only on shop/checkout pages -->
    <script>
    (function(){
      var PAYPAL_CLIENT_ID = 'AS5p05fKksRJvYt1aSh4iJNt6cQjHdyvd2tYzHwmBGsREVwppIbQWGesdiRLk67kmewswYEsVcLu_iRD';
      var _loaded = false, _loading = false, _queue = [];
      window.__loadPayPal = function(cb){
        if (typeof paypal_sdk !== 'undefined' && paypal_sdk.Buttons) { cb && cb(); return; }
        _queue.push(cb);
        if (_loading) return;
        _loading = true;
        var s = document.createElement('script');
        s.src = 'https://www.paypal.com/sdk/js?client-id=' + PAYPAL_CLIENT_ID + '&currency=USD&intent=capture';
        s.setAttribute('data-namespace', 'paypal_sdk');
        s.onload = function(){
          _loaded = true;
          _queue.forEach(function(f){ f && f(); });
          _queue = [];
        };
        document.head.appendChild(s);
      };
      // Auto-load PayPal when navigating to paid sections
      var _origUpdateSEO = window.__updateSEO;
      window.__updateSEO = function(route){
        if (_origUpdateSEO) _origUpdateSEO(route);
        if (route === 'crystals' || route === 'yijing' || route === 'growth-compass' || route === 'draw' || route === 'compatibility' || route === 'product-detail' || route === 'bazi' || route === 'hepan') {
          window.__loadPayPal();
        }
      };
    })();
    </script>
    <!-- Google Analytics + Google Ads -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-JXPDTS5HNX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-JXPDTS5HNX');
    gtag('config', 'AW-18240616652');
    // Google Ads conversion events fire dynamically on payment success (see app.v4.js)
    // DO NOT paste the event snippet here — it would fire on every page load.
    </script>
    <!-- Facebook Pixel — replace XXXXXXXXXX with your Pixel ID -->
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '1876293439675378');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1876293439675378&ev=PageView&noscript=1"/></noscript>
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Energy Yi",
      "url": "https://energyyi.com",
      "logo": "https://energyyi.com/images/crystals/prod2.jpg",
      "description": "Ancient Wisdom, Modern Insight — BaZi destiny readings, compatibility matching, and natural crystal bracelets.",
      "sameAs": [
        "https://www.facebook.com/EnergyYi",
        "https://www.instagram.com/we.lls498",
        "https://www.youtube.com/@WellsTian-I-Ching"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "customer service",
        "url": "https://energyyi.com/",
        "availableLanguage": ["English"]
      }
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Energy Yi",
      "url": "https://energyyi.com",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://energyyi.com/?s={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
    <script type="application/ld+json" id="jsonld-product-list">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": "Crystal Shop",
      "url": "https://energyyi.com/crystals",
      "numberOfItems": 14,
      "itemListElement": []
    }
    </script>
</head>
<body class="dark-theme">
    <!-- Rotating Bagua Background -->
    <div class="bagua-bg" id="baguaBg"></div>

    <!-- Golden Light Particles -->
    <canvas id="particleCanvas" class="particle-canvas"></canvas>

    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand" onclick="var n=window.__navInstance;if(n)n.navigateTo('home');" style="cursor:pointer;">
                <div class="logo">
                    <i class="fas fa-yin-yang logo-spin"></i>
                    <span>Energy Yi</span>
                </div>
            </div>
            <button class="nav-toggle" id="navToggle" onclick="toggleMobileNav()" aria-label="Toggle navigation menu">
                <span></span><span></span><span></span>
            </button>
            <div class="nav-menu" id="navMenu">
                <button class="nav-link active" data-target="home"><i class="fas fa-home"></i> Home</button>
                <button class="nav-link" data-target="bazi"><i class="fas fa-calendar-alt"></i> BaZi Reading</button>
                <button class="nav-link" data-target="hepan"><i class="fas fa-heart"></i> Compatibility Matching</button>
                <button class="nav-link" data-target="yijing"><i class="fas fa-hexagon"></i> I Ching Oracle</button>
                <button class="nav-link" data-target="crystals"><i class="fas fa-gem"></i> Crystal Shop</button>
                </div>
            <div class="nav-overlay" id="navOverlay" onclick="toggleMobileNav()"></div>
            <div class="nav-account" id="navAccount">
                <div class="research-dropdown" id="researchDropdown" style="position:relative;margin-right:0.4rem;">
                    <button class="btn btn-research" onclick="toggleResearchDropdown()" style="font-size:0.8rem;padding:0.4rem 0.8rem;background:var(--cinnabar);border:1px solid var(--cinnabar);border-radius:6px;color:#fff;cursor:pointer;">
                        <i class="fas fa-lightbulb"></i> Insights <i class="fas fa-chevron-down" style="font-size:0.6rem;margin-left:0.3rem;"></i>
                    </button>
                    <div class="research-menu" id="researchMenu" style="display:none;position:absolute;top:100%;left:0;margin-top:0.4rem;background:#1a1a24;border:1px solid rgba(139,92,246,0.3);border-radius:8px;padding:0.4rem 0;min-width:260px;z-index:200;box-shadow:0 8px 30px rgba(0,0,0,0.5);">
                        <a href="https://energyyi.com/crystals-guide.html" style="display:block;padding:0.5rem 1rem;color:#c8c0b0;text-decoration:none;font-size:0.82rem;" onmouseenter="this.style.background='rgba(139,92,246,0.1)';this.style.color='#a78bfa'" onmouseout="this.style.background='none';this.style.color='#c8c0b0'">
                            <i class="fas fa-gem" style="margin-right:0.4rem;color:#8b5cf6;width:16px;"></i> Crystal Guide
                        </a>
                        <div style="border-top:1px solid rgba(255,255,255,0.06);margin:0.3rem 0.8rem;"></div>
                        <a href="https://energyyi.com/research/bazi-guide.html" style="display:block;padding:0.5rem 1rem;color:#c8c0b0;text-decoration:none;font-size:0.82rem;" onmouseenter="this.style.background='rgba(139,92,246,0.1)';this.style.color='#a78bfa'" onmouseout="this.style.background='none';this.style.color='#c8c0b0'">
                            <i class="fas fa-book" style="margin-right:0.4rem;color:#a78bfa;width:16px;"></i> BaZi Guide
                        </a>
                        <a href="https://energyyi.com/research/east-west-cross-study.html" style="display:block;padding:0.5rem 1rem;color:#c8c0b0;text-decoration:none;font-size:0.82rem;" onmouseenter="this.style.background='rgba(139,92,246,0.1)';this.style.color='#a78bfa'" onmouseout="this.style.background='none';this.style.color='#c8c0b0'">
                            <i class="fas fa-book-open" style="margin-right:0.4rem;color:#8b5cf6;width:16px;"></i> Cross-Disciplinary Study
                        </a>
                        <div style="border-top:1px solid rgba(255,255,255,0.06);margin:0.3rem 0.8rem;"></div>
                        <a href="https://energyyi.com/elements/" style="display:block;padding:0.5rem 1rem;color:#c8c0b0;text-decoration:none;font-size:0.82rem;" onmouseenter="this.style.background='rgba(139,92,246,0.1)';this.style.color='#a78bfa'" onmouseout="this.style.background='none';this.style.color='#c8c0b0'">
                            <i class="fas fa-tree" style="margin-right:0.4rem;color:#4CAF50;width:16px;"></i> Five Elements
                        </a>
                        <a href="https://energyyi.com/zodiac/" style="display:block;padding:0.5rem 1rem;color:#c8c0b0;text-decoration:none;font-size:0.82rem;" onmouseenter="this.style.background='rgba(139,92,246,0.1)';this.style.color='#a78bfa'" onmouseout="this.style.background='none';this.style.color='#c8c0b0'">
                            <i class="fas fa-star" style="margin-right:0.4rem;color:#f59e0b;width:16px;"></i> Chinese Zodiac
                        </a>
                    </div>
                </div>
                <button class="btn btn-account" onclick="showMyOrders()" style="font-size:0.8rem;padding:0.4rem 0.8rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.3);border-radius:6px;color:var(--text-primary);cursor:pointer;margin-right:0.4rem;">
                    <i class="fas fa-box"></i> My Orders
                </button>
                <button class="btn btn-account" id="btnLoginOpen" style="font-size:0.8rem;padding:0.4rem 0.8rem;background:rgba(52,211,153,0.15);border:1px solid var(--cinnabar);border-radius:6px;color:var(--text-primary);cursor:pointer;">
                    <i class="fas fa-user"></i> Log In
                </button>
                <div class="account-menu" id="accountMenu" style="display:none;position:relative;">
                    <button class="btn btn-account" id="btnAccountOpen" style="font-size:0.8rem;padding:0.4rem 0.8rem;background:rgba(52,211,153,0.15);border:1px solid var(--cinnabar);border-radius:6px;color:var(--text-primary);cursor:pointer;">
                        <i class="fas fa-user-circle"></i> <span id="accountNameDisplay">My Account</span>
                    </button>
<!-- Account Dropdown Menu -->
<div class="dropdown-menu" id="accountDropdown" style="display:none;position:absolute;top:100%;right:0;background:var(--bg-card);border:1px solid rgba(52,211,153,0.3);border-radius:8px;padding:0.5rem;min-width:180px;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,0.3);">
    <div style="padding:0.5rem 0.8rem;border-bottom:1px solid rgba(52,211,153,0.15);margin-bottom:0.3rem;">
        <div style="font-weight:600;font-size:0.9rem;" id="dropdownUserName">User</div>
        <div style="font-size:0.75rem;color:var(--text-muted);" id="dropdownUserEmail">email</div>
    </div>
    <button class="dropdown-item" id="btnViewHistory" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-history"></i> Reading History
    </button>
    <button class="dropdown-item" id="btnProfileSettings" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-cog"></i> Account Settings
    </button>
    <button class="dropdown-item" id="btnLogout" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-sign-out-alt"></i> Log Out
    </button>
</div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
        <!-- ========== Home ========== -->
        <section id="home" class="page active">
            <div class="hero-section">
                <div class="hero-content">
                    <h1 class="hero-title">Unlock Ancient Wisdom,<br>Illuminate Your Life</h1>
                    <p class="hero-subtitle">Rooted in the 3,000-year-old I Ching Najia system and classical BaZi, amplified by AI — your compass for the turning points that define you. <span style="display:inline-flex;align-items:center;gap:0.25rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:50px;padding:0.15rem 0.6rem;font-size:0.7rem;color:#c8c0b0;margin-left:0.3rem;"><i class="fas fa-robot" style="color:#34d399;font-size:0.6rem;"></i> AI-Powered</span> <span style="display:inline-flex;align-items:center;gap:0.25rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:50px;padding:0.15rem 0.6rem;font-size:0.7rem;color:#c8c0b0;"><i class="fas fa-scroll" style="color:#34d399;font-size:0.6rem;"></i> Ancient Wisdom</span> <span style="display:inline-flex;align-items:center;gap:0.25rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:50px;padding:0.15rem 0.6rem;font-size:0.7rem;color:#c8c0b0;"><i class="fas fa-gift" style="color:#34d399;font-size:0.6rem;"></i> Free Reading</span> <span style="display:inline-flex;align-items:center;gap:0.25rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:50px;padding:0.15rem 0.6rem;font-size:0.7rem;color:#c8c0b0;"><i class="fas fa-shield-alt" style="color:#34d399;font-size:0.6rem;"></i> Secure & Private</span></p>
                    <div class="hero-actions">
                        <div class="hero-action-item">
                            <button class="btn btn-primary btn-large glow-btn" id="start-bazi">
                                <i class="fas fa-calendar-alt"></i> What's Your Element?
                            </button>
                            <p class="hero-action-desc">What does your birth date say about who you were meant to become? Your Four Pillars chart reveals your Day Master, Five Elements, and life direction — free, in under a minute.</p>
                        </div>
                        <div class="hero-action-item">
                            <button class="btn btn-secondary btn-large glow-btn" id="start-hepan">
                                <i class="fas fa-heart"></i> Are You Two a Match?
                            </button>
                            <p class="hero-action-desc">Two birth charts. One revealing score. How do your elements interact — harmony, friction, or destined to cross paths? Find out before you commit.</p>
                        </div>
                        <div class="hero-action-item">
                            <button class="btn btn-secondary btn-large glow-btn" id="start-yijing">
                                <i class="fas fa-hexagon"></i> What Does Fate Say?
                            </button>
                            <p class="hero-action-desc">One question. Six coin tosses. 64 hexagrams of ancient insight. The I Ching has guided emperors and seekers for 3,000 years — what will it say about yours?</p>
                        </div>
                    </div>
                    <!-- Trust Stats Bar -->
                    <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:2rem;padding:1rem 0;border-top:1px solid rgba(52,211,153,0.1);">
                        <div style="text-align:center;"><div style="font-size:1.5rem;font-weight:800;color:#34d399;">12,000+</div><div style="font-size:0.75rem;color:#8a8070;">Readings Delivered</div></div>
                        <div style="text-align:center;"><div style="font-size:1.5rem;font-weight:800;color:#34d399;">100%</div><div style="font-size:0.75rem;color:#8a8070;">Natural Crystals</div></div>
                        <div style="text-align:center;"><div style="font-size:1.5rem;font-weight:800;color:#34d399;">3,000+</div><div style="font-size:0.75rem;color:#8a8070;">Years of Wisdom</div></div>
                        <div style="text-align:center;"><div style="font-size:1.5rem;font-weight:800;color:#34d399;">30-Day</div><div style="font-size:0.75rem;color:#8a8070;">Money-Back Guarantee</div></div>
                    </div>
                </div>
                <div class="hero-visual">
                    <div class="taiji-container">
                        <div class="taiji"></div>
                        <button class="fortune-float-btn" id="fortuneFloatBtn" onclick="openOmniSoulModal()">
                            🦋 OmniSoul
                        </button>
                        <div class="omnisoul-tagline">Define your soul companion</div>
                    </div>
                </div>
            </div>

            <!-- Free Tools Quick Links -->
            <div class="quick-links-row" style="display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin:1rem 0 2rem;">
                <a href="javascript:void(0)" onclick="var n=window.__navInstance;if(n)n.navigateTo('bazi');" style="color:#34d399;text-decoration:none;font-size:0.85rem;padding:0.4rem 1rem;border:1px solid rgba(52,211,153,0.2);border-radius:20px;transition:all 0.3s;" onmouseover="this.style.background='rgba(52,211,153,0.1)';this.style.borderColor='rgba(52,211,153,0.4)'" onmouseout="this.style.background='none';this.style.borderColor='rgba(52,211,153,0.2)'">
                    🗓️ BaZi Reading
                </a>
                <a href="javascript:void(0)" onclick="var n=window.__navInstance;if(n)n.navigateTo('hepan');" style="color:#34d399;text-decoration:none;font-size:0.85rem;padding:0.4rem 1rem;border:1px solid rgba(52,211,153,0.2);border-radius:20px;transition:all 0.3s;" onmouseover="this.style.background='rgba(52,211,153,0.1)';this.style.borderColor='rgba(52,211,153,0.4)'" onmouseout="this.style.background='none';this.style.borderColor='rgba(52,211,153,0.2)'">
                    💕 Compatibility
                </a>
                <a href="javascript:void(0)" onclick="var n=window.__navInstance;if(n)n.navigateTo('yijing');" style="color:#34d399;text-decoration:none;font-size:0.85rem;padding:0.4rem 1rem;border:1px solid rgba(52,211,153,0.2);border-radius:20px;transition:all 0.3s;" onmouseover="this.style.background='rgba(52,211,153,0.1)';this.style.borderColor='rgba(52,211,153,0.4)'" onmouseout="this.style.background='none';this.style.borderColor='rgba(52,211,153,0.2)'">
                    ☯️ I Ching
                </a>
                <a href="javascript:void(0)" onclick="var n=window.__navInstance;if(n)n.navigateTo('draw');" style="color:#f59e0b;text-decoration:none;font-size:0.85rem;padding:0.4rem 1rem;border:1px solid rgba(245,158,11,0.2);border-radius:20px;transition:all 0.3s;" onmouseover="this.style.background='rgba(245,158,11,0.1)';this.style.borderColor='rgba(245,158,11,0.4)'" onmouseout="this.style.background='none';this.style.borderColor='rgba(245,158,11,0.2)'">
                    🃏 Today's Fortune
                </a>
                <a href="javascript:void(0)" onclick="var n=window.__navInstance;if(n)n.navigateTo('crystals');" style="color:#34d399;text-decoration:none;font-size:0.85rem;padding:0.4rem 1rem;border:1px solid rgba(52,211,153,0.2);border-radius:20px;transition:all 0.3s;" onmouseover="this.style.background='rgba(52,211,153,0.1)';this.style.borderColor='rgba(52,211,153,0.4)'" onmouseout="this.style.background='none';this.style.borderColor='rgba(52,211,153,0.2)'">
                    💎 Shop
                </a>
            </div>

            <!-- Free BaZi Teaser -->
            <div style="background:linear-gradient(135deg,rgba(52,211,153,0.06),rgba(5,150,105,0.03));border:1px solid rgba(52,211,153,0.15);border-radius:16px;padding:1.5rem 2rem;margin:1.5rem 0;text-align:center;cursor:pointer;" onclick="var n=window.__navInstance;if(n)n.navigateTo('bazi');">
                <h3 style="color:#34d399;margin:0 0 0.5rem;font-size:1.2rem;">🗓️ Free BaZi Destiny Reading</h3>
                <p style="color:#c8c0b0;margin:0 0 0.8rem;font-size:0.9rem;">Enter your birth information and get your Four Pillars chart — Day Master, Five Elements balance, and life path analysis. <strong style="color:#34d399;">No sign-up required.</strong></p>
                <span style="display:inline-block;background:linear-gradient(135deg,#34d399,#059669);color:#fff;padding:0.5rem 1.5rem;border-radius:25px;font-size:0.85rem;font-weight:600;">Start Reading →</span>
            </div>

            <!-- Mid-Page Conversion CTA -->
            <div style="text-align:center;margin:2rem 0;padding:1.5rem;background:linear-gradient(135deg,rgba(52,211,153,0.08),rgba(5,150,105,0.04));border:1px solid rgba(52,211,153,0.2);border-radius:16px;">
                <p style="color:#34d399;font-size:1rem;font-weight:600;margin:0 0 0.8rem;">✨ Want to save your readings and unlock personalized insights?</p>
                <button onclick="if(typeof showAuthModal==='function')showAuthModal(false);else document.getElementById('btnLoginOpen').click();" style="background:linear-gradient(135deg,#34d399,#059669);color:#fff;border:none;padding:0.6rem 2rem;border-radius:50px;font-size:0.9rem;font-weight:700;cursor:pointer;box-shadow:0 0 20px rgba(52,211,153,0.25);">
                    <i class="fas fa-user-plus"></i> Create Free Account
                </button>
            </div>

            <!-- Five Elements Video Banner -->
            <div id="fiveElementsBanner" style="margin:1.5rem 0;position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(52,211,153,0.2);cursor:pointer;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;"
                 onclick="window.open('/elements/','_blank')"
                 onmouseover="this.style.transform='scale(1.01)';this.style.borderColor='rgba(52,211,153,0.5)';this.style.boxShadow='0 8px 40px rgba(52,211,153,0.1)';"
                 onmouseout="this.style.transform='scale(1)';this.style.borderColor='rgba(52,211,153,0.2)';this.style.boxShadow='none';">
                <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,20,0.75) 0%,rgba(10,10,20,0.2) 60%,rgba(10,10,20,0.6) 100%);z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0.6rem;padding:2rem;">
                    <div class="fe-label" style="font-size:0.75rem;color:var(--cinnabar);text-transform:uppercase;letter-spacing:0.15em;font-weight:600;">📚 Educational Series</div>
                    <div class="fe-title" style="font-size:1.6rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.5);">What is Five Elements?</div>
                    <div class="fe-sub" style="font-size:0.95rem;color:rgba(255,255,255,0.8);max-width:420px;text-align:center;">Wood · Fire · Earth · Metal · Water — the ancient framework behind Chinese philosophy, medicine, and destiny</div>
                    <div class="fe-btn" style="margin-top:0.5rem;display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1.6rem;background:rgba(52,211,153,0.2);border:1px solid rgba(52,211,153,0.4);border-radius:24px;font-size:0.85rem;color:#34d399;font-weight:600;transition:background 0.2s;">
                        <span class="fe-btn-icon" style="font-size:1.1rem;">▶</span> Watch Now
                    </div>
                </div>
                <div class="fe-bg" style="height:220px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 70%,#1a1a2e 100%);"></div>
            </div>
            <style>
            @media (max-width: 768px) {
                #fiveElementsBanner .fe-label { font-size: 0.52rem !important; letter-spacing: 0.06em !important; }
                #fiveElementsBanner .fe-title { font-size: 0.9rem !important; }
                #fiveElementsBanner .fe-sub { font-size: 0.6rem !important; max-width: 260px !important; }
                #fiveElementsBanner .fe-btn { font-size: 0.6rem !important; padding: 0.3rem 1rem !important; }
                #fiveElementsBanner .fe-btn-icon { font-size: 0.7rem !important; }
                #fiveElementsBanner .fe-bg { height: 130px !important; }
            }
            </style>

            <!-- Trust Badges -->
            <div class="trust-badges">
                <span><i class="fas fa-check-circle"></i> 100% Genuine Crystals</span>
                <span><i class="fas fa-truck"></i> Free Shipping Over $99</span>
                <span><i class="fas fa-undo-alt"></i> 30-Day Returns</span>
                <span><i class="fas fa-lock"></i> Secure Checkout</span>
            </div>

            <!-- Featured Products + Enter Shop -->
            <div class="featured-products-section" style="margin:2rem 0;">
                <h2 class="section-title"><i class="fas fa-gem"></i> Crystals for Your Energy</h2>
                <p class="shop-subtitle" style="text-align:center;color:var(--text-muted);margin-bottom:1.5rem;">Hand-selected crystals recommended by your BaZi chart</p>
                <div class="featured-products-grid" id="featured-products-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:900px;margin:0 auto 1.5rem;">
                    <div class="shop-loading" style="grid-column:1/-1;text-align:center;padding:2rem;"><i class="fas fa-spinner fa-spin"></i> Loading featured crystals...</div>
                </div>
                <div style="text-align:center;">
                    <button class="btn btn-primary glow-btn" onclick="var n=window.__navInstance;if(n)n.navigateTo('crystals');" style="font-size:0.95rem;padding:0.7rem 2.5rem;">
                        <i class="fas fa-store"></i> Enter the Shop
                    </button>
                </div>
            </div>


        </section>

<!-- ========== Today's Fortune ========== -->
        <section id="draw" class="page">
            <div class="page-header">
                <h2><i class="fas fa-tarot"></i> Today's Fortune</h2>
                <p>Reveal your daily fortune — your zodiac animal, monthly energy, and today's guidance in a beautiful shareable card.</p>
            </div>
            <div class="draw-container" style="max-width:600px;margin:0 auto;">
                <!-- Birth Date Form -->
                <div class="draw-form-section" style="background:rgba(26,29,39,0.6);border:1px solid rgba(52,211,153,0.15);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;">
                    <h3 style="color:#34d399;margin-bottom:1rem;">Enter Your Birth Date</h3>
                    <div style="display:flex;flex-direction:column;gap:0.8rem;align-items:center;">
                        <div style="display:flex;gap:0.3rem;align-items:center;">
                            <input type="text" id="draw-day" placeholder="DD" maxlength="2" style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                            <span style="color:#666;">/</span>
                            <input type="text" id="draw-month" placeholder="MM" maxlength="2" style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                            <span style="color:#666;">/</span>
                            <input type="text" id="draw-year" placeholder="YYYY" maxlength="4" style="width:80px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                        </div>
                        <div class="radio-group">
                            <label class="radio-label"><input type="radio" name="draw-gender" value="male" checked><span class="radio-custom"></span> Male</label>
                            <label class="radio-label"><input type="radio" name="draw-gender" value="female"><span class="radio-custom"></span> Female</label>
                        </div>
                        <button id="draw-submit" class="btn btn-primary glow-btn" style="font-size:0.9rem;padding:0.6rem 2rem;">
                            <i class="fas fa-tarot"></i> Draw My Card
                        </button>
                    </div>
                </div>
                <!-- Fortune Card Result -->
                <div id="draw-result" style="display:none;">
                    <div id="draw-card-content"></div>
                    <div style="margin-top:1rem;display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;">
                        <button id="draw-png-btn" class="btn btn-outline" style="font-size:0.8rem;">
                            <i class="fas fa-download"></i> Save as PNG
                        </button>
                        <button id="draw-share-btn" class="btn btn-outline" style="font-size:0.8rem;">
                            <i class="fas fa-share-alt"></i> Share
                        </button>
                    </div>
                    <!-- Annual Compass Upsell -->
                    <div style="margin-top:1.5rem;background:linear-gradient(135deg,rgba(52,211,153,0.08),rgba(52,211,153,0.03));border:1px solid rgba(52,211,153,0.2);border-radius:12px;padding:1.2rem;text-align:center;">
                        <p style="color:#f4e4bc;font-size:0.9rem;margin-bottom:0.5rem;">✨ Want to explore your <strong>Annual Compass</strong>?</p>
                        <p style="color:var(--text-muted);font-size:0.8rem;margin-bottom:0.8rem;">Full 4-chapter report: Energy Map · Life Rhythm · 4-Dimension Assessment · Growth Strategy</p>
                        <button class="btn btn-primary glow-btn" onclick="var n=window.__navInstance;if(n)n.navigateTo('growth-compass');" style="font-size:0.85rem;padding:0.5rem 1.5rem;">
                            <i class="fas fa-compass"></i> Get Annual Compass · $7.50
                        </button>
                    </div>
                </div>
            </div>
        </section>

<!-- ========== Growth Compass ========== -->
        <section id="growth-compass" class="page">
            <div class="page-header">
                <h2><i class="fas fa-compass"></i> Annual Growth Compass</h2>
                <p>Your personalized 4-chapter BaZi annual forecast — Energy Map, Life Rhythm, Four-Dimension Assessment, and Growth Strategy.</p>
            </div>
            <div class="compass-container" style="max-width:100%;margin:0 auto;">
                <!-- Birth Date Form -->
                <div class="compass-form-section" style="background:rgba(26,29,39,0.6);border:1px solid rgba(52,211,153,0.15);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;">
                    <h3 style="color:#34d399;margin-bottom:1rem;">Enter Your Birth Information</h3>
                    <div style="display:flex;flex-direction:column;gap:0.8rem;align-items:center;">
                        <input type="text" id="compass-name" placeholder="Your Name" style="width:200px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                        <input type="email" id="compass-email" placeholder="Your Email (for order receipt)" style="width:260px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                        <div style="display:flex;gap:0.3rem;align-items:center;">
                            <input type="text" id="compass-day" placeholder="DD" maxlength="2" style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                            <span style="color:#666;">/</span>
                            <input type="text" id="compass-month" placeholder="MM" maxlength="2" style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                            <span style="color:#666;">/</span>
                            <input type="text" id="compass-year" placeholder="YYYY" maxlength="4" style="width:80px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                        </div>
                        <div class="radio-group">
                            <label class="radio-label"><input type="radio" name="compass-gender" value="male" checked><span class="radio-custom"></span> Male</label>
                            <label class="radio-label"><input type="radio" name="compass-gender" value="female"><span class="radio-custom"></span> Female</label>
                        </div>
                        <button id="compass-submit" class="btn btn-primary glow-btn" style="font-size:0.9rem;padding:0.6rem 2rem;">
                            <i class="fas fa-compass"></i> Generate Report
                        </button>
                    </div>
                </div>
                <!-- Report Result -->
                <div id="compass-result" style="display:none;">
                    <div id="compass-report-content"></div>
                </div>
            </div>
        </section>

<!-- ========== I Ching Oracle ========== -->
        <section id="yijing" class="page">
            <div class="page-header">
                <h2><i class="fas fa-hexagon"></i> I Ching Oracle</h2>
                <p>Cast your hexagram with the ancient coin-tossing method. Focus your mind, ask your question, and let the wisdom of the I Ching guide you.</p>
            </div>
            <div class="meihua-container">
                <div class="meihua-input-section">
                    <h3>Cast Your Hexagram</h3>
                    <div class="divination-methods">
                        <div class="method-card active" data-method="coin">
                            <div class="method-icon"><i class="fas fa-coins"></i></div>
                            <h4>Coin Toss</h4>
                        </div>
                    </div>
                    <div class="method-intro">
                        <p>The Six Yao (六爻) method originated from the Zhou Yi (周易). Toss three coins six times — each toss produces one yao line (⚊ Yang or ⚋ Yin). Lines are built from bottom to top, forming a complete hexagram. Old Yang (three heads) and Old Yin (three tails) become "changing lines" that reveal the dynamics of your situation.</p>
                    </div>
                    <form id="meihua-coin-form" class="form-method active-form">
                        <div class="form-group">
                            <label for="question-coin"><i class="fas fa-question-circle"></i> Your Question</label>
                            <textarea id="question-coin" placeholder="Focus your mind on your question, then begin casting..." rows="3" class="script-input"></textarea>
                        </div>
                        <div class="coin-toss-area">
                            <div class="coin-status-row">
                                <div class="coin-status">
                                    <span id="coin-progress">0/6</span>
                                    <span id="coin-label"></span>
                                </div>
                                <div class="coin-btn-group">
                                    <button type="button" class="btn btn-primary btn-lg glow-btn" id="toss-coin">
                                        <i class="fas fa-coins"></i> Toss Coins
                                    </button>
                                    <button type="button" class="btn btn-outline" id="reset-coins" style="display:none;">
                                        <i class="fas fa-undo"></i> Start Over
                                    </button>
                                    <button type="button" class="btn btn-secondary glow-btn" id="coin-submit" style="display:none;">
                                        <i class="fas fa-magic"></i> Interpret Hexagram
                                    </button>
                                </div>
                            </div>
                            <div class="coin-results" id="coin-results">
                                <div class="coin-slot" data-idx="5">⚊</div>
                                <div class="coin-slot" data-idx="4">⚊</div>
                                <div class="coin-slot" data-idx="3">⚊</div>
                                <div class="coin-slot" data-idx="2">⚊</div>
                                <div class="coin-slot" data-idx="1">⚊</div>
                                <div class="coin-slot" data-idx="0">⚊</div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="meihua-result-section">
                    <h3>Hexagram Result</h3>
                    <div class="gua-display" id="gua-display">
                        <div class="gua-result-placeholder">
                            <i class="fas fa-hexagon"></i>
                            <p>Your hexagram will appear after casting</p>
                        </div>
                    </div>
                    <div class="interpretation-section">
                        <h4>Interpretation</h4>
                        <div class="interpretation-content" id="yijing-interpretation">
                            <p class="placeholder-text">Awaiting divination...</p>
                        </div>
                    </div>
                    <!-- Consultant upsell — shown after interpretation -->
                    <div class="consult-upsell" id="consult-upsell" style="display:none;margin-top:1.5rem;background:linear-gradient(135deg,rgba(52,211,153,0.1),rgba(52,211,153,0.03));border:1px solid rgba(52,211,153,0.25);border-radius:12px;padding:1.5rem;text-align:center;">
                        <p style="color:#f4e4bc;font-size:0.95rem;margin-bottom:0.3rem;"><strong>Want to talk to your consultant for more details?</strong></p>
                        <p style="font-size:1.8rem;font-weight:800;color:#ffd700;margin:0.3rem 0;">$65</p>
                        <p style="color:var(--text-muted);font-size:0.82rem;margin-bottom:1rem;">Private 60-minute online session — detailed hexagram analysis, changing line interpretation, and future guidance for your situation.</p>
                        <div id="yijing-paypal-container" style="min-height:45px;"></div>
                    </div>
                    <div class="action-buttons" style="margin-top:1rem;text-align:center;">
                        <button class="btn btn-outline" id="save-divination">
                            <i class="fas fa-save"></i> Save Record
                        </button>
                    </div>
                </div>
            </div>
        </section>

<!-- ========== Crystal Shop ========== -->
        <section id="crystals" class="page">
            <div class="page-header">
                <h2><i class="fas fa-gem"></i> Crystal &amp; Gemstone Shop</h2>
                <p>Hand-selected natural crystals recommended by your BaZi chart. Balance your Five Elements and enhance your energy.</p>
            </div>
            <div class="shop-container" style="max-width:1200px;margin:0 auto;padding:0 1rem;">
                <div class="shop-grid" id="crystal-shop-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;">
                    <div class="shop-loading" style="grid-column:1/-1;text-align:center;padding:2rem;color:var(--text-muted);">
                        <i class="fas fa-spinner fa-spin"></i> Loading products...
                    </div>
                </div>
            </div>
        </section>

<!-- ========== BaZi Reading ========== -->

        <section id="bazi" class="page">
            <div class="page-header">
                <h2><i class="fas fa-birthday-cake"></i> BaZi Reading</h2>
                <p>Enter birth information to get an accurate BaZi chart analysis <a href="#home" onclick="var n=window.__navInstance;if(n)n.navigateTo('home');return false;" style="color:var(--cinnabar);font-size:0.8rem;margin-left:0.5rem;text-decoration:none;">← Back to Home</a></p>
            </div>
            
            <div class="bazi-container">
                <div class="bazi-input-section">
                    <h3>Enter Birth Information</h3>
                    <form id="bazi-form">
                        <div class="form-group">
                            <label for="bazi-name"><i class="fas fa-user"></i> Your Name</label>
                            <input type="text" id="bazi-name" placeholder="e.g. Zhang San" class="script-input">
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-calendar"></i> Birth Date</label>
                            <div style="display:flex;gap:0.5rem;align-items:center;">
                                <input type="text" id="birth-day" placeholder="DD" maxlength="2" required style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                                <span style="color:#666;">/</span>
                                <input type="text" id="birth-month" placeholder="MM" maxlength="2" required style="width:60px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                                <span style="color:#666;">/</span>
                                <input type="text" id="birth-year" placeholder="YYYY" maxlength="4" required style="width:80px;text-align:center;padding:0.6rem;background:#1a1d27;border:1px solid #374151;border-radius:8px;color:#fff;font-size:0.9rem;">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="birth-time"><i class="fas fa-clock"></i> Birth Time</label>
                            <input type="time" id="birth-time" required value="12:00">
                        </div>
                        
                        <div class="form-group">
                            <label for="gender"><i class="fas fa-user"></i> Gender</label>
                            <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" name="gender" value="male" checked>
                                <span class="radio-custom"></span>
                                Male
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="gender" value="female">
                                <span class="radio-custom"></span>
                                Female
                            </label>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="button" class="btn btn-primary glow-btn" id="bazi-submit-btn">
                                <i class="fas fa-calculator"></i> Calculate Chart
                            </button>
                            <button type="button" class="btn btn-outline" id="bazi-reset">
                                <i class="fas fa-redo"></i> Reset
                            </button>
                        </div>
                    </form>
                </div>
                
                <div class="bazi-result-section">
                    <h3>Reading Results</h3>
                    <div class="result-placeholder" id="result-placeholder">
                        <div class="placeholder-content">
                            <i class="fas fa-yin-yang fa-spin"></i>
                            <p>Enter your birth information to see your BaZi chart results</p>
                        </div>
                    </div>
                    
                    <div class="bazi-result" id="bazi-result" style="display: none;">
                        <!-- Four Pillars Display -->
                        <div class="four-pillars">
                            <h4>Four Pillars</h4>
                            <div class="pillars-grid" id="pillars-grid">
                                <!-- Dynamically populated -->
                            </div>
                        </div>

                        <!-- Stem-Branch Relations -->
                        <div class="relations-section" id="relations-section" style="margin-top: 1rem;">
                            <h4>Stem-Branch Relations</h4>
                            <div class="relations-grid">
                                <div class="relation-card">
                                    <h5>Heavenly Stem Relations</h5>
                                    <div id="gan-relations" class="relation-content"></div>
                                </div>
                                <div class="relation-card">
                                    <h5>Earthly Branch Relations</h5>
                                    <div id="zhi-relations" class="relation-content"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Five Elements Distribution -->
                        <div class="wuxing-chart">
                            <h4>Five Elements Distribution</h4>
                            <div class="wuxing-bars">
                                <div class="wuxing-bar" data-element="wood">
                                    <div class="bar-label"><span class="wuxing-dot wood-dot"></span> Wood</div>
                                    <div class="bar-container">
                                        <div class="bar-fill wood-fill" style="width: 0%"></div>
                                    </div>
                                    <div class="bar-value">0%</div>
                                </div>
                                <div class="wuxing-bar" data-element="fire">
                                    <div class="bar-label"><span class="wuxing-dot fire-dot"></span> Fire</div>
                                    <div class="bar-container">
                                        <div class="bar-fill fire-fill" style="width: 0%"></div>
                                    </div>
                                    <div class="bar-value">0%</div>
                                </div>
                                <div class="wuxing-bar" data-element="earth">
                                    <div class="bar-label"><span class="wuxing-dot earth-dot"></span> Earth</div>
                                    <div class="bar-container">
                                        <div class="bar-fill earth-fill" style="width: 0%"></div>
                                    </div>
                                    <div class="bar-value">0%</div>
                                </div>
                                <div class="wuxing-bar" data-element="metal">
                                    <div class="bar-label"><span class="wuxing-dot metal-dot"></span> Metal</div>
                                    <div class="bar-container">
                                        <div class="bar-fill metal-fill" style="width: 0%"></div>
                                    </div>
                                    <div class="bar-value">0%</div>
                                </div>
                                <div class="wuxing-bar" data-element="water">
                                    <div class="bar-label"><span class="wuxing-dot water-dot"></span> Water</div>
                                    <div class="bar-container">
                                        <div class="bar-fill water-fill" style="width: 0%"></div>
                                    </div>
                                    <div class="bar-value">0%</div>
                                </div>
                            </div>
                            <div id="wuxing-analysis" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--bronze);"></div>
                        </div>
                        
                        <!-- Ten Gods Analysis -->
                        <div class="shishen-section" id="shishen-section" style="margin-top: 1rem;">
                            <h4>Ten Gods Analysis</h4>
                            <div id="shishen-content" class="shishen-content"></div>
                        </div>

                        <!-- Decade Cycles -->
                        <div class="dayun-section" id="dayun-section" style="margin-top: 1rem;">
                            <h4>Decade Cycles</h4>
                            <div id="dayun-display" class="dayun-display"></div>
                        </div>

                        <!-- Current Decade Cycle + Annual -->
                        <div class="current-transit" id="current-transit" style="margin-top: 1rem;">
                            <div class="current-grid" id="current-grid"></div>
                        </div>

                        <!-- Annual Forecast List -->
                        <div class="liunian-section" id="liunian-section" style="margin-top: 1rem;">
                            <h4>Annual Forecast</h4>
                            <div id="liunian-list" class="liunian-list"></div>
                        </div>
                        
                        <!-- Interpretation -->
                        <div class="interpretation">
                            <h4>Destiny Reading</h4>
                            <div class="interpretation-content" id="interpretation-content"></div>
                        </div>
                    </div>
                    
                    <!-- In-Depth Reading -->
                    <div class="ai-reading-trigger" style="display: none; margin-top: 1rem; text-align: center;" id="ai-reading-trigger">
                        <div style="padding:1.2rem;border-radius:12px;border:1px solid rgba(52,211,153,0.3);background:rgba(52,211,153,0.08);">
                            <p style="font-size:0.95rem;font-weight:600;margin-bottom:0.3rem;color:var(--text-primary);">
                                📞 Human Expert Consultation</p>
                            <p style="font-size:0.85rem;color:var(--cinnabar,#D4A850);font-weight:700;margin-bottom:0.8rem;">
                                $29.9 — In-depth personalized reading via WhatsApp video</p>
                            <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:0.8rem;">
                                Get a comprehensive analysis from our BaZi master, covering your life direction, career, relationships, and more.</p>
                            <a href="https://wa.me/8613701201377" target="_blank"
                               style="display:inline-flex;align-items:center;gap:0.5rem;
                                      background:#25D366;color:#fff;padding:0.7rem 1.5rem;
                                      border-radius:8px;text-decoration:none;font-size:0.95rem;
                                      font-weight:600;">
                                <i class="fab fa-whatsapp" style="font-size:1.2rem;"></i>
                                Book Now · Mr. Tian
                            </a>
                        </div>
                    </div>
                    
                    <!-- Crystal Enhancement Button -->
                    <div class="ai-reading-trigger" style="display: none; margin-top: 1rem; text-align: center;" id="crystal-trigger">
                        <button class="btn btn-primary btn-large glow-btn" id="crystal-btn">
                            <i class="fas fa-gem"></i> Crystal Enhancement
                        </button>
                        <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem;">
                            Based on your BaZi Five Elements, we recommend crystals to enhance your chart
                        </p>
                    </div>
                    
                    <!-- Crystal Result -->
                    <div class="crystal-result" id="crystal-result" style="display:none; margin-top: 1rem;">
                        <div class="reading-section">
                            <h4><i class="fas fa-gem"></i> Crystal Enhancement</h4>
                            <div id="crystal-content"></div>
                        </div>
                    </div>
                    
                    <!-- Life Reading Button -->
                    <div class="life-reading-trigger" style="display:none; margin-top: 1.5rem; text-align: center;" id="life-reading-trigger">
                    </div>

                    <!-- Life Reading Result -->
                    <div class="life-reading-result" id="life-reading-result" style="display:none; margin-top: 1.5rem;"></div>
                    
                    <!-- Full Report Unlock -->
                    <div class="report-unlock" id="bazi-report-unlock" style="display:none; margin-top: 1.5rem; text-align: center;"></div>
                </div>
            </div>
        </section>

        <!-- ========== Compatibility Matching ========== -->
        <section id="hepan" class="page">
            <div class="page-header">
                <h2><i class="fas fa-heart"></i> Compatibility Matching</h2>
                <p>Enter two people's birth information to analyze BaZi compatibility and relationship dynamics <a href="#home" onclick="var n=window.__navInstance;if(n)n.navigateTo('home');return false;" style="color:var(--cinnabar);font-size:0.8rem;margin-left:0.5rem;text-decoration:none;">← Back to Home</a></p>
            </div>
            
            <div class="bazi-container">
                <div class="bazi-input-section">
                    <h3>Enter Both Birth Information</h3>
                    <div class="hepan-form-grid">
                        <div class="hepan-person">
                            <h4 style="color:var(--vermilion);margin-bottom:0.8rem;">👤 Person A</h4>
                            <form id="hepan-form-a">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" id="hepan-name-a" placeholder="e.g. Zhang San" class="script-input">
                                </div>
                                <div class="form-group">
                                    <label><i class="fas fa-calendar"></i> Birth Date</label>
                                    <div style="display:flex;gap:0.4rem;align-items:center;">
                                        <input type="text" id="hepan-day-a" placeholder="DD" maxlength="2" required class="script-input" style="width:55px;text-align:center;">
                                        <span style="color:#666;">/</span>
                                        <input type="text" id="hepan-month-a" placeholder="MM" maxlength="2" required class="script-input" style="width:55px;text-align:center;">
                                        <span style="color:#666;">/</span>
                                        <input type="text" id="hepan-year-a" placeholder="YYYY" maxlength="4" required class="script-input" style="width:70px;text-align:center;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label><i class="fas fa-clock"></i> Birth Time</label>
                                    <input type="time" id="hepan-time-a" required value="12:00" class="script-input">
                                </div>
                                <div class="form-group">
                                    <label>Gender</label>
                                    <div class="radio-group">
                                        <label class="radio-label"><input type="radio" name="gender-a" value="male" checked><span class="radio-custom"></span> Male</label>
                                        <label class="radio-label"><input type="radio" name="gender-a" value="female"><span class="radio-custom"></span> Female</label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="hepan-person">
                            <h4 style="color:var(--bronze);margin-bottom:0.8rem;">👤 Person B</h4>
                            <form id="hepan-form-b">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" id="hepan-name-b" placeholder="e.g. Li Si" class="script-input">
                                </div>
                                <div class="form-group">
                                    <label><i class="fas fa-calendar"></i> Birth Date</label>
                                    <div style="display:flex;gap:0.4rem;align-items:center;">
                                        <input type="text" id="hepan-day-b" placeholder="DD" maxlength="2" required class="script-input" style="width:55px;text-align:center;">
                                        <span style="color:#666;">/</span>
                                        <input type="text" id="hepan-month-b" placeholder="MM" maxlength="2" required class="script-input" style="width:55px;text-align:center;">
                                        <span style="color:#666;">/</span>
                                        <input type="text" id="hepan-year-b" placeholder="YYYY" maxlength="4" required class="script-input" style="width:70px;text-align:center;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label><i class="fas fa-clock"></i> Birth Time</label>
                                    <input type="time" id="hepan-time-b" required value="12:00" class="script-input">
                                </div>
                                <div class="form-group">
                                    <label>Gender</label>
                                    <div class="radio-group">
                                        <label class="radio-label"><input type="radio" name="gender-b" value="male" checked><span class="radio-custom"></span> Male</label>
                                        <label class="radio-label"><input type="radio" name="gender-b" value="female"><span class="radio-custom"></span> Female</label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="form-actions" style="justify-content:center;">
                        <button type="button" class="btn btn-primary glow-btn btn-large" id="hepan-submit-btn">
                            <i class="fas fa-heart"></i> Start Compatibility Analysis
                        </button>
                    </div>
                </div>
                
                <div class="bazi-result-section">
                    <h3>Compatibility Results</h3>
                    <div class="result-placeholder" id="hepan-placeholder">
                        <div class="placeholder-content">
                            <i class="fas fa-heart fa-beat"></i>
                            <p>Enter both people's information to see compatibility analysis</p>
                        </div>
                    </div>
                    
                    <div class="bazi-result" id="hepan-result" style="display:none;">
                        <!-- Both BaZi Charts -->
                        <div class="hepan-bazi-display" id="hepan-bazi-display"></div>
                        
                        <!-- Overall Score -->
                        <div class="hepan-score" id="hepan-score"></div>
                        
                        <!-- Dimension Analysis -->
                        <div class="hepan-dimensions" id="hepan-dimensions"></div>
                        
                        <!-- Strengths & Challenges -->
                        <div class="hepan-pros-cons" id="hepan-pros-cons"></div>
                        
                        <!-- Relationship Advice -->
                        <div class="hepan-advice" id="hepan-advice"></div>
                        
                        <!-- Report Unlock Button -->
                        <div class="report-unlock" id="hepan-report-unlock" style="display:none;margin-top:1.5rem;text-align:center;"></div>
                    </div>
                </div>
            </div>

            <!-- Human Expert Consultation -->
            <div style="text-align:center;margin-top:2rem;padding:1.5rem;border-radius:12px;border:1px solid rgba(52,211,153,0.3);background:rgba(52,211,153,0.05);">
                <p style="font-size:1rem;font-weight:600;margin-bottom:0.3rem;color:var(--text-primary);">
                    📞 Need Deeper Insight?</p>
                <p style="font-size:0.85rem;color:var(--cinnabar,#D4A850);font-weight:700;margin-bottom:0.5rem;">
                    $29.9 — Human Expert Compatibility Consultation via WhatsApp</p>
                <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;">
                    Our BaZi master provides in-depth analysis of your relationship dynamics, strengths, challenges, and personalized advice.</p>
                <a href="https://wa.me/8613701201377" target="_blank"
                   style="display:inline-flex;align-items:center;gap:0.5rem;
                          background:#25D366;color:#fff;padding:0.7rem 1.5rem;
                          border-radius:8px;text-decoration:none;font-size:0.95rem;
                          font-weight:600;">
                    <i class="fab fa-whatsapp" style="font-size:1.2rem;"></i>
                    Book Now · Mr. Tian
                </a>
            </div>
        </section>

        </section>

        <!-- ========== Product Detail ========== -->
        <section id="product-detail" class="page">
            <div class="page-header">
                <a href="#" class="back-to-shop" onclick="var n=window.__navInstance;if(n){n.navigateTo('crystals')};return false;">
                    <i class="fas fa-arrow-left"></i> Back to Shop
                </a>
            </div>
            <div id="product-detail-content" class="product-detail-container">
                <!-- Rendered by ProductDetailEngine -->
            </div>
        </section>
    </main>

<!-- Auth Modal -->
<div class="modal-overlay" id="authModal" style="display:none;">
    <div class="modal-content" style="max-width:400px;">
        <div class="modal-header">
            <h3 id="authModalTitle">Log In</h3>
            <button class="modal-close" id="authModalClose">&times;</button>
        </div>
        <div class="modal-body">
            <form id="authForm" onsubmit="return false;">
                <div class="form-group" id="authNameGroup" style="display:none;">
                    <label>Name</label>
                    <input type="text" id="authName" placeholder="Your name" class="script-input">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" id="authEmail" placeholder="your@email.com" required class="script-input">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" id="authPassword" placeholder="Password (min 6 chars)" required class="script-input">
                </div>
                <div class="form-group" id="authVerifyGroup" style="display:none;">
                    <label>Verification Code</label>
                    <div style="display:flex;gap:0.5rem;">
                        <input type="text" id="authVerifyCode" placeholder="6-digit code" class="script-input" style="flex:1;">
                        <button type="button" id="authSendVerifyBtn" class="btn" style="background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:0.75rem;white-space:nowrap;padding:0 0.6rem;">Send Code</button>
                    </div>
                </div>
                <div class="auth-error" id="authError" style="color:var(--vermilion);font-size:0.85rem;margin-bottom:0.5rem;display:none;"></div>
                <div class="form-actions" style="justify-content:center;">
                    <button type="submit" class="btn btn-primary glow-btn" id="authSubmitBtn">
                        <i class="fas fa-sign-in-alt"></i> Log In
                    </button>
                </div>
            </form>
            <div style="text-align:center;margin-top:0.5rem;font-size:0.85rem;">
                <span id="authToggleText">Don't have an account?</span>
                <button class="btn btn-link" id="authToggleBtn" style="color:var(--cinnabar);background:none;border:none;cursor:pointer;text-decoration:underline;font-size:0.85rem;">Register</button>
            </div>
            <div id="authForgotPw" style="text-align:center;margin-top:0.3rem;">
                <button id="authForgotPwBtn" style="color:var(--text-muted);background:none;border:none;cursor:pointer;font-size:0.75rem;text-decoration:underline;">Forgot password?</button>
            </div>
            <div id="authRememberGroup" style="text-align:center;margin-top:0.5rem;display:none;">
                <label style="font-size:0.8rem;color:var(--text-muted);cursor:pointer;">
                    <input type="checkbox" id="authRememberMe" style="margin-right:0.3rem;"> Remember me
                </label>
            </div>
        </div>
    </div>
</div>

<!-- Profile Settings Modal -->
<div class="modal-overlay" id="profileModal" style="display:none;">
    <div class="modal-content" style="max-width:420px;">
        <div class="modal-header">
            <h3>⚙️ Account Settings</h3>
            <button class="modal-close" id="profileModalClose">&times;</button>
        </div>
        <div class="modal-body">
            <form id="profileForm" onsubmit="return false;">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" id="profileName" class="script-input">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" id="profileEmail" class="script-input">
                </div>
                <div id="profileError" style="color:var(--vermilion);font-size:0.8rem;display:none;margin-bottom:0.5rem;"></div>
                <div id="profileSuccess" style="color:#34d399;font-size:0.8rem;display:none;margin-bottom:0.5rem;"></div>
                <button type="submit" class="btn btn-primary glow-btn" id="profileSaveBtn" style="width:100%;">
                    <i class="fas fa-save"></i> Save Changes
                </button>
            </form>
            <hr style="border-color:rgba(52,211,153,0.1);margin:1rem 0;">
            <div style="margin-bottom:0.8rem;" id="verifySection">
                <label style="font-size:0.85rem;color:var(--text-muted);">Email Verification</label>
                <p id="verifyStatus" style="font-size:0.75rem;color:#f59e0b;margin:0.3rem 0;">⚠ Your email is not verified.</p>
                <div style="display:flex;gap:0.5rem;margin-top:0.4rem;">
                    <input type="text" id="profileVerifyCode" class="script-input" placeholder="6-digit code" style="flex:1;">
                    <button id="profileSendVerifyBtn" class="btn" style="background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:0.75rem;padding:0.4rem 0.8rem;white-space:nowrap;">Send Code</button>
                </div>
                <button id="profileVerifyBtn" class="btn" style="background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#34d399;font-size:0.8rem;padding:0.4rem 1rem;margin-top:0.5rem;width:100%;">Verify Email</button>
            </div>
            <hr style="border-color:rgba(52,211,153,0.1);margin:1rem 0;">
            <div style="margin-bottom:0.8rem;">
                <label style="font-size:0.85rem;color:var(--text-muted);">Change Password</label>
                <input type="password" id="profileCurrentPw" class="script-input" placeholder="Current password" style="margin-top:0.3rem;">
                <input type="password" id="profileNewPw" class="script-input" placeholder="New password (min 6 chars)" style="margin-top:0.4rem;">
                <div id="pwError" style="color:var(--vermilion);font-size:0.8rem;display:none;margin:0.3rem 0;"></div>
                <button id="profileChangePwBtn" class="btn" style="background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:0.8rem;padding:0.4rem 1rem;margin-top:0.3rem;">Change Password</button>
            </div>
            <hr style="border-color:rgba(52,211,153,0.1);margin:1rem 0;">
            <div>
                <button id="profileDeleteBtn" class="btn" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#ef4444;font-size:0.8rem;padding:0.4rem 1rem;">⚠ Delete Account</button>
            </div>
        </div>
    </div>
</div>

        <div style="font-size:0.75rem;color:var(--text-muted);" id="dropdownUserEmail">email</div>
    </div>
    <button class="dropdown-item" id="btnViewHistory" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-history"></i> Reading History
    </button>
    <button class="dropdown-item" id="btnProfileSettings" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-cog"></i> Account Settings
    </button>
    <button class="dropdown-item" id="btnLogout" style="display:block;width:100%;text-align:left;padding:0.5rem 0.8rem;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:0.85rem;border-radius:4px;">
        <i class="fas fa-sign-out-alt"></i> Log Out
    </button>
</div>

<!-- AI Chat Widget -->
<div class="chat-widget" id="chatWidget">
    <div class="chat-toggle" id="chatToggle">
        <i class="fas fa-comment-dots"></i>
    </div>
    <div class="chat-panel" id="chatPanel" style="display:none;">
        <div class="chat-header">
            <span><i class="fas fa-robot"></i> AI Assistant</span>
            <button class="chat-close" id="chatClose">&times;</button>
        </div>
        <div class="chat-messages" id="chatMessages">
            <div class="chat-msg chat-msg-bot">
                <div class="chat-msg-content">Hello! I'm your Energy Yi AI assistant. Ask me anything about BaZi, I Ching, or Chinese metaphysics!</div>
            </div>
        </div>
        <div class="chat-input-area">
            <input type="text" class="chat-input" id="chatInput" placeholder="Type your question..." autocomplete="off">
            <button class="chat-send" id="chatSend"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>
</div>

<!-- History Modal -->
<div class="modal-overlay" id="historyModal" style="display:none;">
    <div class="modal-content" style="max-width:600px;max-height:80vh;overflow-y:auto;">
        <div class="modal-header">
            <h3><i class="fas fa-history"></i> Reading History</h3>
            <button class="modal-close" id="historyModalClose">&times;</button>
        </div>
        <div class="modal-body" id="historyBody">
            <div style="text-align:center;padding:2rem;color:var(--text-muted);"><i class="fas fa-spinner fa-spin"></i> Loading...</div>
        </div>
    </div>
</div>

<!-- Footer -->
    <footer class="footer">
        <!-- Customer Reviews -->
        <div style="max-width:1200px;margin:2rem auto;padding:0 1rem;">
            <h2 class="section-title">⭐ What Our Customers Say</h2>
            <div id="reviewsContainer" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1rem;">
                <div style="text-align:center;color:#6b7280;padding:2rem;">Loading reviews...</div>
            </div>
            <!-- Reviews loaded from API -->
            <div style="text-align:center;margin-bottom:2rem;">
                <button onclick="showReviewForm()" style="padding:0.5rem 1.2rem;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);border-radius:8px;color:#34d399;cursor:pointer;font-size:0.85rem;">✍ Write a Review</button>
            </div>
            <!-- Review Form (hidden by default) -->
            <div id="reviewFormWrap" style="display:none;max-width:500px;margin:0 auto 2rem;padding:1.2rem;background:#1a1d27;border:1px solid rgba(52,211,153,0.15);border-radius:12px;">
                <h4 style="color:#34d399;margin-bottom:0.8rem;">Share Your Experience</h4>
                <div style="margin-bottom:0.5rem;">
                    <label style="font-size:0.8rem;color:#9ca3af;">Rating</label>
                    <div id="starPicker" style="font-size:1.5rem;cursor:pointer;">
                        <span onclick="setRating(1)">☆</span><span onclick="setRating(2)">☆</span><span onclick="setRating(3)">☆</span><span onclick="setRating(4)">☆</span><span onclick="setRating(5)">☆</span>
                    </div>
                </div>
                <input type="text" id="reviewName" placeholder="Your name" style="width:100%;padding:0.5rem;background:#0f1117;border:1px solid #374151;border-radius:6px;color:#e5e7eb;font-size:0.85rem;margin-bottom:0.5rem;">
                <textarea id="reviewText" rows="3" placeholder="What did you love about your crystal or reading?" style="width:100%;padding:0.5rem;background:#0f1117;border:1px solid #374151;border-radius:6px;color:#e5e7eb;font-size:0.85rem;resize:vertical;margin-bottom:0.5rem;"></textarea>
                <div id="reviewMsg" style="font-size:0.75rem;margin-bottom:0.5rem;"></div>
                <button onclick="submitReview()" style="padding:0.5rem 1.5rem;background:#34d399;color:#111;border:none;border-radius:6px;font-weight:600;cursor:pointer;">Submit Review</button>
            </div>
        </div>
        
        <!-- Newsletter -->
        <div style="text-align:center;padding:1.5rem 1rem;border-top:1px solid rgba(52,211,153,0.1);border-bottom:1px solid rgba(52,211,153,0.1);margin:1rem 0;">
            <h4 style="color:#34d399;font-size:0.9rem;margin-bottom:0.3rem;">📬 Stay Connected</h4>
            <p style="color:#9ca3af;font-size:0.8rem;margin-bottom:0.6rem;">Get weekly insights on Five Elements, crystal wisdom, and exclusive offers.</p>
            <div style="display:flex;justify-content:center;gap:0.4rem;max-width:400px;margin:0 auto;">
                <input type="email" id="newsletterEmail" placeholder="your@email.com" style="flex:1;padding:0.5rem 0.7rem;background:#0f1117;border:1px solid #374151;border-radius:6px;color:#e5e7eb;font-size:0.82rem;">
                <button onclick="subscribeNewsletter()" style="padding:0.5rem 1.2rem;background:#34d399;color:#111;border:none;border-radius:6px;font-weight:600;cursor:pointer;font-size:0.82rem;">Subscribe</button>
            </div>
            <div id="newsletterMsg" style="font-size:0.75rem;margin-top:0.4rem;"></div>
        </div>
        
        <div class="footer-content">
            <div class="footer-section">
                <h4>Energy Yi</h4>
                <p>The perfect fusion of ancient wisdom and modern technology</p>
                <div class="social-links">
                    <a href="https://wa.me/8613701201377" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                    <a href="https://www.facebook.com/EnergyYi" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
                    <a href="https://www.instagram.com/we.lls498" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/@WellsTian-I-Ching" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            
            <div class="footer-section">
                <h4>Readings</h4>
                <ul>
                    <li><a href="#bazi">BaZi Reading</a></li>
                    <li><a href="#hepan">Compatibility Analysis</a></li>
                    <li><a href="#yijing">I Ching Oracle</a></li>
                    <li><a href="#draw">Today's Fortune</a></li>
                    <li><a href="#growth-compass">Annual Compass</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>Shop & More</h4>
                <ul>
                    <li><a href="#crystals">Crystal Shop</a></li>
                    <li><a href="#meditation">ZhenYin Meditation</a></li>
                    <li><a href="#about">About Energy Yi</a></li>
                    <li><a href="/shipping">Shipping Policy</a></li>
                    <li><a href="/refund">Refund Policy</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>Explore</h4>
                <ul>
                    <li><a href="/research/bazi-landing.html">Free BaZi Reading</a></li>
                    <li><a href="/research/hepan-landing.html">Compatibility Matching</a></li>
                    <li><a href="/research/yijing-landing.html">I Ching Oracle</a></li>
                    <li><a href="/research/compass-landing.html">Annual Growth Compass</a></li>
                    <li><a href="/research/meditation-landing.html">ZhenYin Meditation</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>Legal</h4>
                <p>This platform is for entertainment and cultural reference purposes only, and does not constitute professional advice. Fortune-telling results should not be used as the sole basis for major life decisions.</p>
                <p><a href="/privacy">Privacy Policy</a> · <a href="/terms">Terms of Service</a> · <a href="/refund">Refund Policy</a> · <a href="/shipping">Shipping Policy</a></p>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>© 2026 Energy Yi · Passing Down Millennia of Wisdom, Illuminating Modern Lives</p>
            <p class="version">Version: 2.3.2 · v15r17 · Golden Light Protection</p>
        </div>
    </footer>

    <script>
    // Auto-format date inputs: DD/MM/YYYY mask
    (function(){
        function maskDate(e) {
            var val = e.target.value.replace(/[^0-9]/g, ''); // digits only
            if (val.length >= 4) val = val.slice(0,2) + '/' + val.slice(2,4) + (val.length > 4 ? '/' + val.slice(4,8) : '');
            else if (val.length >= 2) val = val.slice(0,2) + (val.length > 2 ? '/' + val.slice(2) : '');
            e.target.value = val;
        }
        document.addEventListener('input', function(e) {
            if (e.target.placeholder === 'DD/MM/YYYY') maskDate(e);
        });
        // Also handle paste
        document.addEventListener('paste', function(e) {
            if (e.target.placeholder === 'DD/MM/YYYY') setTimeout(function(){ maskDate(e); }, 0);
        });
    })();
    </script>
    <script>
    // Auto-advance date fields: DD→MM→YYYY
    document.addEventListener('input', function(e) {
        var t = e.target;
        var max = parseInt(t.getAttribute('maxlength'));
        if (max && t.value.length >= max) {
            // Find next sibling input in the date group
            var next = t.parentElement.querySelector('input:not([value="' + t.value + '"])');
            // More reliable: find by id pattern
            var ids = ['birth-day','birth-month','birth-year',
                       'draw-day','draw-month','draw-year',
                       'compass-day','compass-month','compass-year',
                       'hepan-day-a','hepan-month-a','hepan-year-a',
                       'hepan-day-b','hepan-month-b','hepan-year-b'];
            var idx = ids.indexOf(t.id);
            if (idx >= 0 && idx < ids.length - 1) {
                var nextEl = document.getElementById(ids[idx + 1]);
                if (nextEl) nextEl.focus();
            }
        }
    });
    </script>
    <script src="js/app.v16.js?b=44"></script>
    <script>
    // === Mobile Navigation Toggle ===
    window.toggleMobileNav = function() {
        var menu = document.getElementById('navMenu');
        var overlay = document.getElementById('navOverlay');
        var btn = document.getElementById('navToggle');
        if (!menu || !overlay || !btn) return;
        var isOpen = menu.classList.contains('active');
        if (isOpen) {
            menu.classList.remove('active');
            overlay.classList.remove('active');
            btn.classList.remove('active');
            document.body.style.overflow = '';
        } else {
            menu.classList.add('active');
            overlay.classList.add('active');
            btn.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    };
    // Close mobile nav when a nav link is clicked
    document.addEventListener('click', function(e) {
        if (e.target.closest('.nav-link')) {
            var menu = document.getElementById('navMenu');
            if (menu && menu.classList.contains('active')) {
                window.toggleMobileNav();
            }
        }
    });
    // Global function bridge — ensures onclick handlers work regardless of IIFE scope
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            if (typeof showMyOrders !== 'undefined') window.showMyOrders = showMyOrders;
            if (typeof downloadBaziPDF !== 'undefined') window.downloadBaziPDF = downloadBaziPDF;
            if (typeof downloadHepanPDF !== 'undefined') window.downloadHepanPDF = downloadHepanPDF;
            if (typeof unlockReport !== 'undefined') window.unlockReport = unlockReport;
            console.log('Global bridge: showMyOrders=' + typeof window.showMyOrders + ' pdf=' + typeof window.downloadBaziPDF);
        }, 100);
    });
    </script>

    <!-- ====== Support Chat Widget ====== -->
    <style>
    .support-chat-panel {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        z-index: 9999; width: 380px; max-width: calc(100vw - 2rem); max-height: 560px;
        background: #1a1d27; border: 1px solid rgba(52,211,153,0.25);
        border-radius: 14px; display: none; flex-direction: column;
        box-shadow: 0 8px 40px rgba(0,0,0,0.6); overflow: hidden;
    }
    .support-chat-panel.open { display: flex; }
    .support-chat-header {
        padding: 0.8rem 1rem; background: rgba(52,211,153,0.08);
        border-bottom: 1px solid rgba(52,211,153,0.15);
        display: flex; justify-content: space-between; align-items: center;
    }
    .support-chat-header span { color: #34d399; font-weight: 600; font-size: 0.9rem; }
    .support-chat-close { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 1.1rem; }
    .support-chat-msgs {
        flex: 1; overflow-y: auto; padding: 0.8rem; min-height: 120px; max-height: 300px;
        display: flex; flex-direction: column; gap: 0.5rem;
    }
    .support-msg { 
        padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.8rem;
        line-height: 1.5; max-width: 85%; word-wrap: break-word;
    }
    .support-msg.bot { background: rgba(52,211,153,0.08); color: #e5e7eb; align-self: flex-start; border: 1px solid rgba(52,211,153,0.1); }
    .support-msg.user { background: rgba(59,130,246,0.12); color: #e5e7eb; align-self: flex-end; border: 1px solid rgba(59,130,246,0.15); }
    .support-quick-btns {
        padding: 0 0.8rem 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem;
    }
    .support-quick-btns button {
        padding: 0.3rem 0.6rem; font-size: 0.7rem; border-radius: 14px;
        background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2);
        color: #34d399; cursor: pointer; white-space: nowrap;
    }
    .support-chat-input-wrap {
        display: flex; padding: 0.5rem 0.8rem 0.8rem; gap: 0.4rem;
        border-top: 1px solid rgba(52,211,153,0.1);
    }
    .support-chat-input-wrap input {
        flex: 1; padding: 0.5rem 0.7rem; border-radius: 8px;
        background: #0f1117; border: 1px solid #374151; color: #e5e7eb; font-size: 0.82rem;
    }
    .support-chat-input-wrap button {
        padding: 0.5rem 0.8rem; border-radius: 8px; border: none;
        background: #34d399; color: #111; font-weight: 600; cursor: pointer; font-size: 0.8rem;
    }
    .support-typing { color: #6b7280; font-size: 0.75rem; padding: 0.25rem 0.75rem; }
    .support-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; display: none; }
    .support-overlay.show { display: block; }
    </style>
    <div class="support-overlay" id="supportOverlay" onclick="toggleSupportChat()"></div>
    <div class="support-chat-panel" id="supportChatPanel">
        <div class="support-chat-header">
            <span>💬 Customer Support</span>
            <button class="support-chat-close" onclick="toggleSupportChat()">✕</button>
        </div>
        <div class="support-chat-msgs" id="supportMsgs">
            <div class="support-msg bot">Hi! 👋 I'm the Energy Yi assistant. How can I help you today?</div>
        </div>
        <div class="support-quick-btns" id="supportQuickBtns">
            <button onclick="sendSupportMsg('How long does shipping take?')">📦 Shipping time?</button>
            <button onclick="sendSupportMsg('What is your return policy?')">↩ Returns?</button>
            <button onclick="sendSupportMsg('How do I track my order?')">🔍 Track order</button>
            <button onclick="sendSupportMsg('What payment methods do you accept?')">💳 Payments</button>
            <button onclick="escalateToHuman()" style="background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#f87171;">📞 Contact Manager</button>
        </div>
        <div class="support-chat-input-wrap">
            <input type="text" id="supportInput" placeholder="Type your question..." onkeydown="if(event.key==='Enter')sendSupportMsg()">
            <button onclick="sendSupportMsg()">Send</button>
        </div>
    </div>
    <script>
    function toggleSupportChat() {
        document.getElementById('supportChatPanel').classList.toggle('open');
        document.getElementById('supportOverlay').classList.toggle('show');
    }
    function sendSupportMsg(msg) {
        var input = document.getElementById('supportInput');
        var text = msg || input.value.trim();
        if (!text) return;
        if (!msg) input.value = '';
        var msgs = document.getElementById('supportMsgs');
        msgs.innerHTML += '<div class="support-msg user">' + text.replace(/</g,'&lt;') + '</div>';
        msgs.innerHTML += '<div class="support-typing" id="supportTyping">Thinking...</div>';
        msgs.scrollTop = msgs.scrollHeight;
        fetch('/api/support', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({message: text})
        }).then(function(r){ return r.json(); }).then(function(data){
            var typing = document.getElementById('supportTyping');
            if (typing) typing.remove();
            var reply = data.reply || data.fallback_reply || 'Sorry, something went wrong.';
            msgs.innerHTML += '<div class="support-msg bot">' + reply.replace(/</g,'&lt;') + '</div>';
            msgs.scrollTop = msgs.scrollHeight;
        }).catch(function(){
            var typing = document.getElementById('supportTyping');
            if (typing) typing.remove();
            msgs.innerHTML += '<div class="support-msg bot">Connection error. Please try again or email support@energyyi.com.</div>';
            msgs.scrollTop = msgs.scrollHeight;
        });
    }
    function escalateToHuman() {
        var msgs = document.getElementById('supportMsgs');
        msgs.innerHTML += '<div class="support-msg bot" style="background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.2);">' +
            '📞 <b>Connect with our manager:</b><br><br>' +
            '📧 <b>Email:</b> support@energyyi.com<br>' +
            '📱 <b>Phone / WhatsApp:</b> <a href="https://wa.me/8613701201377" target="_blank" style="color:#25D366;">+86 137-0120-1377</a><br><br>' +
            '<i>Our manager typically responds within 2-4 hours during business hours (Beijing Time).</i><br><br>' +
            '<button onclick="leaveMessage()" style="background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:0.35rem 0.8rem;border-radius:6px;cursor:pointer;font-size:0.78rem;">✉ Leave a Message</button></div>';
        msgs.scrollTop = msgs.scrollHeight;
        // Save escalation attempt
        fetch('/api/support/escalate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({reason: 'customer_request', chat_log: document.getElementById('supportMsgs').innerText.substring(0, 1000)})
        }).catch(function(){});
    }
    function leaveMessage() {
        var email = prompt('Your email address (so our manager can reply):');
        if (!email || !email.includes('@')) return;
        var msg = prompt('Please describe your issue in detail:');
        if (!msg) return;
        var msgs = document.getElementById('supportMsgs');
        fetch('/api/support/escalate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({reason: 'leave_message', email: email, message: msg})
        }).then(function(r){ return r.json(); }).then(function(d){
            msgs.innerHTML += '<div class="support-msg bot" style="background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.2);">' +
                '✅ <b>Message sent!</b> Our manager will reply to <b>' + email.replace(/</g,'&lt;') + '</b> within 24 hours. Thank you for your patience.</div>';
            msgs.scrollTop = msgs.scrollHeight;
        }).catch(function(){
            msgs.innerHTML += '<div class="support-msg bot">Sorry, failed to send message. Please email support@energyyi.com directly.</div>';
            msgs.scrollTop = msgs.scrollHeight;
        });
    }
    </script>

    <!-- Toast notification -->
    <style>
    .report-toast {
        position: fixed !important; top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important; margin: 0 !important;
        z-index: 10000; pointer-events: none;
        background: rgba(26,29,39,0.95); border: 1px solid rgba(52,211,153,0.35);
        border-radius: 20px; padding: 2.5rem 3rem; text-align: center;
        box-shadow: 0 16px 56px rgba(0,0,0,0.6);
        opacity: 0; transition: opacity 0.3s ease;
        max-width: 420px;
    }
    .report-toast.show { opacity: 1; }
    .report-toast .toast-icon { font-size: 3rem; margin-bottom: 0.6rem; }
    .report-toast .toast-msg { color: #e5e7eb; font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
    .report-toast .toast-sub { color: #9ca3af; font-size: 0.85rem; margin-top: 0.4rem; }
    .toast-arrow {
        margin-top: 0.6rem; font-size: 1.5rem; color: #34d399;
        animation: toastBounce 1s ease-in-out infinite;
    }
    @keyframes toastBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(8px); }
    }
    /* ── BaZi Report Cards ── */
    .etag{display:inline-block;padding:0.12rem 0.45rem;border-radius:9px;font-size:0.7rem;font-weight:600;margin:0 0.1rem}
    .e-wood{color:#34d399;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.2)}
    .e-fire{color:#f87171;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.2)}
    .e-earth{color:#fbbf24;background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.2)}
    .e-metal{color:#e5e7eb;background:rgba(229,231,235,0.08);border:1px solid rgba(229,231,235,0.15)}
    .e-water{color:#60a5fa;background:rgba(96,165,250,0.1);border:1px solid rgba(96,165,250,0.2)}
    .score-bar{height:6px;background:rgba(255,255,255,0.05);border-radius:3px;margin:0.2rem 0;overflow:hidden}
    .s-wood{background:#34d399}.s-fire{background:#f87171}.s-earth{background:#fbbf24}.s-metal{background:#e5e7eb}.s-water{background:#60a5fa}
    .rd-chapter{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem 1.2rem;margin:0.8rem 0}
    .rd-chapter h4{margin-top:0;color:#34d399;font-size:0.9rem}
    .rd-insight{background:rgba(139,92,246,0.05);border-left:3px solid #8b5cf6;padding:0.7rem 1rem;margin:0.8rem 0;border-radius:0 6px 6px 0;font-size:0.85rem;color:#c8c0b0}
    .rd-warn{background:rgba(248,113,113,0.05);border-left:3px solid #f87171;padding:0.7rem 1rem;margin:0.8rem 0;border-radius:0 6px 6px 0;font-size:0.85rem;color:#c8c0b0}
    /* ── I Ching Report Classes ── */
    .reading-section{background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.04);border-radius:10px;padding:1.2rem;margin:1rem 0}
    .reading-section h5{color:#34d399;margin-top:0;font-size:0.9rem}
    .insight{background:rgba(139,92,246,0.05);border-left:3px solid #8b5cf6;padding:0.8rem 1.2rem;margin:1rem 0;border-radius:0 6px 6px 0;font-size:0.88rem;color:#c8c0b0}
    .warn{background:rgba(248,113,113,0.05);border-left:3px solid #f87171;padding:0.8rem 1.2rem;margin:1rem 0;border-radius:0 6px 6px 0;font-size:0.88rem;color:#c8c0b0}
    .cta-box{background:rgba(52,211,153,0.05);border:1px solid rgba(52,211,153,0.15);border-radius:12px;padding:1.5rem;margin:2rem 0;text-align:center}
    .cta-box a{display:inline-block;background:linear-gradient(135deg,#059669,#a07020);color:#fff;padding:0.7rem 2rem;border-radius:8px;text-decoration:none;font-weight:700;margin-top:0.6rem}
    .rd-divider{border:none;border-top:1px solid rgba(52,211,153,0.12);margin:1.5rem 0}
    @keyframes hintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
    </style>
    <div class="report-toast" id="reportToast">
        <div class="toast-icon">📋</div>
        <div class="toast-msg" id="toastMsg">Report is ready!</div>
        <div class="toast-sub">Scroll down to review</div>
        <div class="toast-arrow">↓</div>
    </div>

    <!-- Shopping Cart Modal -->
    <style>
    .cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; display:none; }
    .cart-overlay.show { display:block; }
    .cart-modal {
        position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
        z-index:9999; width:400px; max-width:calc(100vw-2rem); max-height:80vh;
        background:#1a1d27; border:1px solid rgba(52,211,153,0.25);
        border-radius:14px; display:none; flex-direction:column;
        box-shadow:0 8px 40px rgba(0,0,0,0.6); overflow:hidden;
    }
    .cart-modal.show { display:flex; }
    .cart-header {
        padding:0.8rem 1rem; background:rgba(52,211,153,0.08);
        border-bottom:1px solid rgba(52,211,153,0.15);
        display:flex; justify-content:space-between; align-items:center;
    }
    .cart-header span { color:#34d399; font-weight:600; font-size:0.9rem; }
    .cart-close { background:none; border:none; color:#6b7280; cursor:pointer; font-size:1.1rem; }
    .cart-items { flex:1; overflow-y:auto; padding:0.8rem; }
    .cart-item {
        display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0;
        border-bottom:1px solid rgba(255,255,255,0.04);
    }
    .cart-item-info { flex:1; }
    .cart-item-name { color:#e5e7eb; font-size:0.82rem; font-weight:500; }
    .cart-item-price { color:#34d399; font-size:0.8rem; }
    .cart-item-qty {
        display:flex; align-items:center; gap:0.3rem;
    }
    .cart-item-qty button {
        width:24px; height:24px; border-radius:4px; border:1px solid rgba(255,255,255,0.15);
        background:transparent; color:#9ca3af; cursor:pointer; font-size:0.8rem;
    }
    .cart-item-qty span { color:#e5e7eb; font-size:0.8rem; min-width:20px; text-align:center; }
    .cart-item-remove { color:#6b7280; cursor:pointer; font-size:0.75rem; background:none; border:none; }
    .cart-footer {
        padding:0.8rem; border-top:1px solid rgba(255,255,255,0.06);
    }
    .cart-total {
        display:flex; justify-content:space-between; align-items:center;
        font-size:0.95rem; font-weight:700; color:#e5e7eb; margin-bottom:0.6rem;
    }
    .cart-total span:last-child { color:#34d399; }
    .cart-checkout-btn {
        width:100%; padding:0.6rem; background:#34d399; color:#111;
        border:none; border-radius:8px; font-size:0.9rem; font-weight:700; cursor:pointer;
    }
    .cart-checkout-btn:disabled { opacity:0.4; cursor:default; }
    .cart-empty { text-align:center; color:#6b7280; padding:2rem; font-size:0.85rem; }
    </style>
    <div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>
    <div class="cart-modal" id="cartModal">
        <div class="cart-header">
            <span>🛒 Shopping Cart</span>
            <button class="cart-close" onclick="toggleCart()">✕</button>
        </div>
        <div class="cart-items" id="cartItems"></div>
        <div class="cart-footer" id="cartFooter"></div>
    </div>
    <script>
    var cart = JSON.parse(localStorage.getItem('ey_cart') || '[]');

    function saveCart() { localStorage.setItem('ey_cart', JSON.stringify(cart)); updateCartBadge(); }
    function updateCartBadge() {
        var count = cart.reduce(function(s,i){return s+i.qty;}, 0);
        var badge = document.getElementById('cartCountBadge');
        if (badge) { badge.textContent = count; badge.style.display = count > 0 ? 'block' : 'none'; }
    }

    window.addToCart = function(id, name, price) {
        var existing = cart.find(function(i){return i.id===id;});
        if (existing) existing.qty++;
        else cart.push({id:id, name:name, price:parseFloat(price), qty:1});
        saveCart();
        showToast('Added to cart!', name, '🛒');
    };

    function toggleCart() {
        document.getElementById('cartModal').classList.toggle('show');
        document.getElementById('cartOverlay').classList.toggle('show');
        if (document.getElementById('cartModal').classList.contains('show')) renderCart();
    }

    function renderCart() {
        var el = document.getElementById('cartItems');
        var ft = document.getElementById('cartFooter');
        if (!cart.length) {
            el.innerHTML = '<div class="cart-empty">Your cart is empty</div>';
            ft.innerHTML = '';
            return;
        }
        var total = 0;
        var html = '';
        cart.forEach(function(item, idx) {
            total += item.price * item.qty;
            html += '<div class="cart-item">' +
                '<div class="cart-item-info">' +
                '<div class="cart-item-name">' + item.name.replace(/</g,'&lt;') + '</div>' +
                '<div class="cart-item-price">$' + item.price.toFixed(2) + '</div></div>' +
                '<div class="cart-item-qty">' +
                '<button onclick="cartQty(' + idx + ',-1)">-</button>' +
                '<span>' + item.qty + '</span>' +
                '<button onclick="cartQty(' + idx + ',1)">+</button></div>' +
                '<button class="cart-item-remove" onclick="cartRemove(' + idx + ')">✕</button></div>';
        });
        el.innerHTML = html;
        ft.innerHTML = '<div class="cart-total"><span>Total</span><span>$' + total.toFixed(2) + '</span></div>' +
            '<button class="cart-checkout-btn" onclick="cartCheckout()">Proceed to Checkout</button>';
    }

    function cartQty(idx, delta) {
        cart[idx].qty += delta;
        if (cart[idx].qty <= 0) cart.splice(idx, 1);
        saveCart(); renderCart();
    }
    function cartRemove(idx) { cart.splice(idx, 1); saveCart(); renderCart(); }

    function cartCheckout() {
        if (!cart.length) return;
        var total = cart.reduce(function(s,i){return s + i.price*i.qty;}, 0);
        var desc = cart.map(function(i){return i.name + ' x' + i.qty;}).join(', ');
        // Open the crystal shop for secure PayPal checkout
        toggleCart();
        window.location.href = '/crystals';
    }

    updateCartBadge();

    // ---- Reviews ----
    var _reviewRating = 5;
    function setRating(n) {
        _reviewRating = n;
        var stars = document.querySelectorAll('#starPicker span');
        stars.forEach(function(s,i){ s.textContent = i < n ? '★' : '☆'; s.style.color = i < n ? '#f59e0b' : '#6b7280'; });
    }
    function showReviewForm() { document.getElementById('reviewFormWrap').style.display = 'block'; }
    function submitReview() {
        var name = document.getElementById('reviewName').value.trim();
        var text = document.getElementById('reviewText').value.trim();
        var msg = document.getElementById('reviewMsg');
        if (!text) { msg.textContent = 'Please write your review.'; msg.style.color = '#ef4444'; return; }
        fetch('/api/reviews', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({name: name || 'Anonymous', rating: _reviewRating, text: text})
        }).then(function(r){ return r.json(); }).then(function(d){
            if (d.success) {
                msg.textContent = 'Thank you! Your review has been submitted.';
                msg.style.color = '#34d399';
                document.getElementById('reviewFormWrap').style.display = 'none';
                loadReviews();
            } else { msg.textContent = d.error || 'Failed.'; msg.style.color = '#ef4444'; }
        }).catch(function(){ msg.textContent = 'Connection error.'; msg.style.color = '#ef4444'; });
    }
    function loadReviews() {
        var container = document.getElementById('reviewsContainer');
        fetch('/api/reviews').then(function(r){ return r.json(); }).then(function(d){
            if (!d.reviews || !d.reviews.length) {
                container.innerHTML = '<div style="text-align:center;color:#6b7280;padding:1rem;">Be the first to leave a review!</div>';
                return;
            }
            var html = '';
            d.reviews.forEach(function(rv){
                var stars = '';
                for (var i=0;i<5;i++) stars += i < rv.rating ? '★' : '☆';
                html += '<div style="background:#1a1d27;border:1px solid rgba(52,211,153,0.1);border-radius:10px;padding:1rem;">' +
                    '<div style="color:#f59e0b;margin-bottom:0.3rem;">' + stars + '</div>' +
                    '<div style="color:#e5e7eb;font-size:0.85rem;line-height:1.5;margin-bottom:0.4rem;">' + rv.text.replace(/</g,'&lt;') + '</div>' +
                    '<div style="display:flex;justify-content:space-between;font-size:0.7rem;color:#6b7280;"><span>' + rv.name.replace(/</g,'&lt;') + '</span><span>' + (rv.created_at||'').substring(0,10) + '</span></div></div>';
            });
            container.innerHTML = html;
        }).catch(function(){ container.innerHTML = '<div style="text-align:center;color:#6b7280;padding:1rem;">Unable to load reviews.</div>'; });
    }
    // Defer reviews load until page fully rendered to avoid layout-shift scroll
    window.addEventListener('load', function() {
        setTimeout(function() { setRating(5); loadReviews(); }, 1000);
    });
    
    function subscribeNewsletter() {
        var email = document.getElementById('newsletterEmail').value.trim();
        var msgEl = document.getElementById('newsletterMsg');
        if (!email || !email.includes('@')) { msgEl.textContent = 'Please enter a valid email.'; msgEl.style.color = '#ef4444'; return; }
        fetch('/api/subscribe', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({email: email})
        }).then(function(r){ return r.json(); }).then(function(d){
            msgEl.textContent = d.message || 'Subscribed!';
            msgEl.style.color = d.success ? '#34d399' : '#ef4444';
            if (d.success) document.getElementById('newsletterEmail').value = '';
        }).catch(function(){ msgEl.textContent = 'Connection error.'; msgEl.style.color = '#ef4444'; });
    }
    </script>


<div id="scrollHint" style="display:none;position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:9999;text-align:center;pointer-events:none;">
    <div style="font-size:2.5rem;animation:hintBounce 0.8s ease-in-out infinite;">👇</div>
    <div style="font-size:0.75rem;color:#34d399;margin-top:0.3rem;">Scroll down for your reading</div>
</div>


<!-- ═══════════════ OmniSoul Modal ═══════════════ -->
<style>
.omnisoul-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:none;align-items:center;justify-content:center}
.omnisoul-overlay.show{display:flex}
.omnisoul-modal{background:#1a1d27;border:1px solid rgba(52,211,153,0.25);border-radius:16px;padding:2rem;max-width:440px;width:90%;position:relative}
.omnisoul-close{position:absolute;top:0.8rem;right:1rem;background:none;border:none;color:#6b7280;font-size:1.2rem;cursor:pointer}
.omnisoul-modal h3{color:#34d399;text-align:center;margin-bottom:0.3rem}
.omnisoul-modal .sub{color:#9ca3af;text-align:center;font-size:0.85rem;margin-bottom:1.5rem}
.omnisoul-form{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap}
.omnisoul-form input,.omnisoul-form select{padding:0.6rem 0.8rem;border-radius:8px;border:1px solid #374151;background:#0f1117;color:#e5e7eb;font-size:0.85rem;width:100px}
.omnisoul-form .btn{padding:0.6rem 1.2rem}
.omnisoul-preview{margin-top:1rem;display:none}
.omnisoul-preview .type-name{color:#34d399;font-size:1.3rem;text-align:center;font-weight:700}
.omnisoul-preview .type-drive{color:#9ca3af;text-align:center;font-style:italic;margin:0.5rem 0;font-size:0.9rem}
.omnisoul-preview .locked{text-align:center;color:#6b7280;font-size:0.8rem;padding:0.5rem;background:rgba(255,255,255,0.02);border-radius:8px;margin:0.5rem 0}
.omnisoul-preview .locked span{color:#34d399}
.omnisoul-link{display:block;text-align:center;margin-top:1rem;color:#34d399;font-size:0.85rem}
</style>

<div class="omnisoul-overlay" id="omnisoulOverlay" onclick="event.target===this&&closeOmniSoul()">
<div class="omnisoul-modal" id="omnisoulModal">
    <button class="omnisoul-close" onclick="closeOmniSoul()">✕</button>
    <h3>🦋 OmniSoul · 灵心万象</h3>
    <p class="sub">Discover your Five Elements personality type</p>
    <div class="omnisoul-form" id="omnisoulForm">
        <input type="text" id="eyOmniDay" placeholder="DD/MM/YYYY" maxlength="10">
        <input type="number" id="eyOmniHour" placeholder="Hr" min="0" max="23" value="12" style="width:60px">
        <select id="eyOmniGender"><option>Male</option><option>Female</option></select>
        <button class="btn btn-primary btn-sm" onclick="eyOmniDiscover()">Discover</button>
    </div>
    <div class="omnisoul-preview" id="omnisoulPreview"></div>
    <a class="omnisoul-link" href="https://omnisoul.org" target="_blank">Open OmniSoul →</a>
</div>
</div>

<script>
function openOmniSoulModal(){document.getElementById('omnisoulOverlay').classList.add('show')}
function closeOmniSoul(){document.getElementById('omnisoulOverlay').classList.remove('show');document.getElementById('omnisoulPreview').style.display='none';document.getElementById('omnisoulForm').style.display='flex'}
async function eyOmniDiscover(){
    var d=document.getElementById('eyOmniDay').value.trim();
    var h=document.getElementById('eyOmniHour').value;
    var g=document.getElementById('eyOmniGender').value;
    if(!d)return;
    var p=d.split('/');if(p.length!==3)return;
    var day=p[0],mon=p[1],yr=p[2];
    var btn=document.querySelector('#omnisoulForm .btn');
    btn.textContent='...';btn.disabled=true;
    try{
        var r=await fetch('https://energyyi.com/api/elemental/profile',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({year:parseInt(yr),month:parseInt(mon),day:parseInt(day),hour:parseInt(h)||12,gender:g})});
        var data=await r.json();
        if(data.success){
            var dt=data.profile.dominant_type;
            var el=document.getElementById('omnisoulPreview');
            el.innerHTML='<div class=\"type-name\">'+dt.english_name+'</div><div style=\"text-align:center;color:#6b7280;font-size:0.8rem\">'+dt.shishen+'</div><p class=\"type-drive\">\"'+(data.profile.who_you_are?.core_drive||dt.core_drive||'')+'\"</p><div class=\"locked\">🔒 <span>3 Core Patterns</span> · <span>Value Compass</span> · <span>Growth Path</span> — unlock on OmniSoul</div>';
            el.style.display='block';
            document.getElementById('omnisoulForm').style.display='none';
        }
    }catch(e){}
    btn.textContent='Discover';btn.disabled=false;
}
document.addEventListener('input',function(e){if(e.target.id==='eyOmniDay'){var v=e.target.value.replace(/[^0-9]/g,'');if(v.length>=4)v=v.slice(0,2)+'/'+v.slice(2,4)+(v.length>4?'/'+v.slice(4,8):'');else if(v.length>=2)v=v.slice(0,2)+(v.length>2?'/'+v.slice(2):'');e.target.value=v}});
</script>
</body>
</html>