<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MXG6QRZR');</script>
    <!-- End Google Tag Manager -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <!-- Intentional: theme-color for PWA support (Chrome, Edge, Safari, mobile browsers) -->
    <meta name="theme-color" content="#0f0f23">

    <!-- Google Verification -->
    <meta name="google-site-verification" content="HpQSlyxLgJ-xsYz8b1qiYIiI35zG9toHSrvPHpbLHBI">

    <!-- Security Headers -->
    <!-- CSP moved to HTTP headers via netlify.toml for better security -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-XSS-Protection" content="1; mode=block">
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">

    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">

    <!-- Optimized Favicon Loading -->
    <link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/logo/icon.png">

    <!-- PWA Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="DAMP">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="msapplication-TileColor" content="#1a1a2e">
    <meta name="msapplication-tap-highlight" content="no">

    <!-- Critical PWA Icons Only -->
    <link rel="icon" type="image/png" sizes="192x192" href="assets/images/logo/icon-192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="assets/images/logo/icon-512.png">

    <!-- SEO Meta Tags - Optimized for Smart Drinkware Attachments -->
    <title>Make Any Cup Smart | DAMP Smart Drinkware Attachments - Works with YETI, Stanley, Hydro Flask & All Bottles</title>
    <meta name="description" content="DAMP Smart Drinkware Attachments: Don't replace your bottle—make it smart. Universal attachments that work with YETI, Stanley, Hydro Flask, Starbucks, Contigo, Ember, and any cup. Upgrade your favorite drinkware with intelligent tracking, temperature monitoring, and instant alerts. Keep your bottle, add the intelligence. Starting at $29.99.">
    <meta name="keywords" content="smart coffee mug, mindful drinking gadget, YETI smart drinkware, Stanley tumbler tracker, Hydro Flask smart lid, Starbucks cup tracker, Contigo travel mug, Bluetooth-enabled drinkware, never lose coffee cup, smart drink reminder, business travel drinkware, travel-friendly drink tracker, DAMP Smart Drinkware, drink abandonment monitor, connected drinkware, Bluetooth cup sleeve, smart hydration tracker, IoT mug, wireless drink monitor, Ember mug alternative, fitness smart bottle, gym smart bottle, office mug reminder, workplace hydration tech, portable smart mug, commuter lifestyle cup, airport travel mug, camping smart mug, mindful coffee drinking, coffee lovers smart cup, hydration tracker athletes, caffeine tracking mug, energy drink hydration, Red Bull drink companion, mindful hydration, wellness drink tracker, smart water bottle, rechargeable smart mug, temperature-sensing mug, app-connected drinkware, drink tracking technology, adaptive cup design, BLE tracking, RFID smart cup, tech coffee gadget, business professional mug, executive coffee mug, smart travel tumbler, eco-friendly smart drinkware">
    <meta name="author" content="Zach Goodbody, WeCr8 Solutions LLC">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
    <link rel="canonical" href="https://dampdrink.com/">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dampdrink.com/">
    <meta property="og:title" content="Make Any Cup Smart | DAMP Smart Drinkware Attachments">
    <meta property="og:description" content="Don't replace your bottle—make it smart. DAMP universal attachments work with YETI, Stanley, Hydro Flask, and any cup. Keep your favorite drinkware, add intelligence. Pre-order starting $29.99.">
    <meta property="og:image" content="https://dampdrink.com/assets/images/og-image.jpg">
    <meta property="og:site_name" content="DAMP Smart Drinkware">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Make Any Cup Smart | DAMP Attachments">
    <meta name="twitter:description" content="Your cup, upgraded. Universal smart attachments for YETI, Stanley, Hydro Flask & all bottles. Don't replace it—make it smart. Pre-order now.">
    <meta name="twitter:image" content="https://dampdrink.com/assets/images/og-image.jpg">

    <!-- PERFORMANCE OPTIMIZATION: Resource Hints -->
    <!-- Google Analytics & Tag Manager -->
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    
    <!-- Google AdSense & Ad Quality -->
    <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
    <link rel="preconnect" href="https://adservice.google.com" crossorigin>
    <link rel="preconnect" href="https://googleads.g.doubleclick.net" crossorigin>
    <link rel="dns-prefetch" href="https://ep1.adtrafficquality.google">
    <link rel="dns-prefetch" href="https://ep2.adtrafficquality.google">
    
    <!-- Google Fonts & Static Resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://www.gstatic.com" crossorigin>
    
    <!-- Firebase Services -->
    <link rel="preconnect" href="https://firebase.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://firestore.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://firebaseinstallations.googleapis.com" crossorigin>
    <link rel="dns-prefetch" href="https://damp-smart-drinkware.firebaseapp.com">
    <link rel="dns-prefetch" href="https://damp-smart-drinkware.firebaseio.com">
    
    <!-- Stripe Payment Processing -->
    <link rel="preconnect" href="https://js.stripe.com" crossorigin>
    <link rel="dns-prefetch" href="https://api.stripe.com">

    <!-- AdSense Meta (script deferred to improve performance) -->
    <meta name="google-adsense-account" content="ca-pub-3639153716376265">

    <!-- Structured Data: Enhanced Schema.org JSON-LD for Google & LLMs -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "Organization",
                "@id": "https://dampdrink.com/#organization",
                "name": "DAMP Smart Drinkware",
                "legalName": "WeCr8 Solutions LLC",
                "alternateName": ["DAMP", "Drink Abandonment Monitoring Protocol"],
                "url": "https://dampdrink.com",
                "logo": {
                    "@type": "ImageObject",
                    "url": "https://dampdrink.com/assets/images/logo/logo.png",
                    "width": 512,
                    "height": 512
                },
                "description": "Smart Drinkware Attachments that make any cup intelligent. Universal compatibility with YETI, Stanley, Hydro Flask, and all bottle brands. Upgrade your drinkware, don't replace it.",
                "foundingDate": "2024",
                "foundingLocation": {
                    "@type": "Place",
                    "address": {
                        "@type": "PostalAddress",
                        "addressLocality": "San Diego",
                        "addressRegion": "CA",
                        "addressCountry": "US"
                    }
                },
                "founder": {
                    "@type": "Person",
                    "name": "Zach Goodbody",
                    "email": "zach@wecr8.info",
                    "jobTitle": "Founder & CEO"
                },
                "contactPoint": {
                    "@type": "ContactPoint",
                    "contactType": "Customer Service",
                    "email": "zach@wecr8.info",
                    "availableLanguage": ["English"]
                },
                "sameAs": [
                    "https://dampdrink.com",
                    "https://www.gethalfbaked.com/p/startup-ideas-429-cloud-calendar"
                ],
                "slogan": "Make Any Cup Smart",
                "knowsAbout": ["Smart Drinkware", "IoT Technology", "BLE Tracking", "Drink Monitoring", "Mindful Drinking", "Hydration Technology"],
                "areaServed": {
                    "@type": "Place",
                    "name": "Worldwide"
                },
                "brand": {
                    "@type": "Brand",
                    "name": "DAMP",
                    "description": "Smart drinkware tracking technology",
                    "logo": "https://dampdrink.com/assets/images/logo/logo.png"
                }
            },
            {
                "@type": "WebSite",
                "@id": "https://dampdrink.com/#website",
                "url": "https://dampdrink.com",
                "name": "DAMP Smart Drinkware",
                "description": "Smart Drinkware Attachments - Universal intelligence for any cup. Works with YETI, Stanley, Hydro Flask, and all bottle brands",
                "publisher": {
                    "@id": "https://dampdrink.com/#organization"
                },
                "inLanguage": "en-US",
                "potentialAction": {
                    "@type": "SearchAction",
                    "target": {
                        "@type": "EntryPoint",
                        "urlTemplate": "https://dampdrink.com/search?q={search_term_string}"
                    },
                    "query-input": "required name=search_term_string"
                }
            },
            {
                "@type": "BreadcrumbList",
                "@id": "https://dampdrink.com/#breadcrumb",
                "itemListElement": [
                    {
                        "@type": "ListItem",
                        "position": 1,
                        "name": "Home",
                        "item": "https://dampdrink.com/"
                    },
                    {
                        "@type": "ListItem",
                        "position": 2,
                        "name": "Products",
                        "item": "https://dampdrink.com/products"
                    },
                    {
                        "@type": "ListItem",
                        "position": 3,
                        "name": "About",
                        "item": "https://dampdrink.com/about"
                    },
                    {
                        "@type": "ListItem",
                        "position": 4,
                        "name": "Press",
                        "item": "https://dampdrink.com/press"
                    }
                ]
            },
            {
                "@type": "WebPage",
                "@id": "https://dampdrink.com/#webpage",
                "url": "https://dampdrink.com/",
                "name": "DAMP Smart Drinkware - Never Leave Your Coffee Cup Behind",
                "isPartOf": {
                    "@id": "https://dampdrink.com/#website"
                },
                "about": {
                    "@id": "https://dampdrink.com/#organization"
                },
                "primaryImageOfPage": {
                    "@type": "ImageObject",
                    "url": "https://dampdrink.com/assets/images/og-image.jpg"
                },
                "description": "Make any cup smart with DAMP attachments. Universal smart drinkware technology for YETI, Stanley, Hydro Flask, and all bottles. Upgrade, don't replace.",
                "inLanguage": "en-US"
            }
        ]
    }
    </script>

    <!-- Critical CSS Inlined for Performance -->
    <style id="critical-css">
        /* Critical CSS Variables and Base Styles */
        :root {
            --primary-color: #00d4ff;
            --primary-dark: #0099cc;
            --secondary-color: #00ff88;
            --accent-color: #ff4757;
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.85);
            --text-muted: rgba(255, 255, 255, 0.6);
            --bg-primary: #0f0f23;
            --bg-secondary: #1a1a2e;
            --card-bg: rgba(255, 255, 255, 0.08);
            --border-color: rgba(255, 255, 255, 0.15);
            --nav-height: 80px;
            --safe-area-top: env(safe-area-inset-top);
        }
            #liveActivityError {
                display: none;
                color: #d32f2f;
                font-weight: bold;
            }

        *,*::before,*::after{box-sizing:border-box}
        body,h1,h2,h3,h4,p{margin:0}
        html{font-display:swap;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f23;min-height:100vh}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#0f0f23 0%,#1a1a2e 50%,#16213e 100%) fixed!important;background-color:#0f0f23!important;color:#ffffff!important;line-height:1.6;overflow-x:hidden;margin:0;padding:0;min-height:100vh}

        .container{max-width:1200px;margin:0 auto;padding:0 20px}
        .skip-to-content{position:absolute;top:-40px;left:0;background:var(--primary-color);color:#000;padding:8px;text-decoration:none;z-index:10000;font-weight:700}
        .skip-to-content:focus{top:0}

        .hero-section{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 20px 80px;position:relative;contain:layout style paint}
        .hero-content{max-width:900px;z-index:2}
        .hero-logo{margin-bottom:40px}
        .hero-logo img{width:90px;height:90px;object-fit:contain}
        body .hero-section .hero-content h1.hero-title,body section.hero-section .container .hero-content h1.hero-title,body main #main-content section.hero-section .container .hero-content h1.hero-title,.hero-title{font-size:clamp(3.5rem,8vw,5rem)!important;font-weight:900!important;margin-bottom:30px!important;background-image:linear-gradient(45deg,#ffffff 0%,#00d4ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;background-color:transparent!important;text-shadow:none!important;line-height:1.1!important}
        .hero-subtitle{font-size:clamp(1.2rem,2.5vw,1.5rem);color:var(--text-secondary);margin-bottom:50px;line-height:1.5}

        .btn{display:inline-block;padding:18px 40px;border-radius:50px;font-size:1.1rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;text-transform:uppercase;letter-spacing:0.5px;margin:10px;text-align:center}
        .btn-primary{background:linear-gradient(45deg,var(--primary-color),var(--primary-dark));color:white;box-shadow:0 6px 20px rgba(0,212,255,0.3)}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,212,255,0.4)}
        .btn-secondary{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}
        .btn-secondary:hover{background:var(--primary-color);color:white}

        .hero-animation-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);z-index:100000;display:flex;align-items:center;justify-content:center;overflow:hidden;will-change:opacity;contain:layout style paint}
        body:not(.animation-complete){overflow:hidden;height:100vh}
        body:not(.animation-complete) main{opacity:0;visibility:hidden;will-change:opacity}
        body.animation-complete{overflow:auto;height:auto}
        body.animation-complete main{opacity:1;visibility:visible;transition:opacity 0.3s ease,visibility 0.3s ease}

        @media(max-width:768px){.hero-section{padding:100px 20px 60px}.btn{display:block;margin:10px auto;text-align:center}}
        @media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
    </style>

    <!-- Preload Critical Resources - Optimized loading order to prevent FOUC -->
    <!-- Preload must match the exact href to prevent duplicate requests -->
    <!-- Load stylesheets immediately (no preload needed since we load them right away) -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/navigation.css?v=2.1.3">
    <link rel="stylesheet" href="assets/css/components/hero-animation.css">
    <!-- Preload critical images that will be used soon -->
    <link rel="preload" href="assets/images/logo/logo.png" as="image" fetchpriority="high">
    <link rel="preload" href="assets/images/logo/icon.png" as="image" fetchpriority="high">


    <!-- Enhanced Visual Styles with Animations -->
    <!-- Removed duplicate CSS variables and base styles; all styles are consolidated in #critical-css above for performance and maintainability. -->
    
    <!-- CRITICAL FIX: Final override to ensure blue gradients display -->
    <style>
        /* Maximum specificity override for hero title gradient */
        body .hero-section .hero-content h1.hero-title,
        body section.hero-section .container .hero-content h1.hero-title,
        body main #main-content section.hero-section .container .hero-content h1.hero-title,
        .hero-section .hero-content .hero-title,
        .hero-section h1.hero-title,
        h1.hero-title {
            background-image: linear-gradient(45deg, #ffffff 0%, #00d4ff 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            background-color: transparent !important;
            text-shadow: none !important;
        }
        
        /* Force section title gradients */
        body section h2.section-title,
        body section .section-title,
        h2.section-title {
            background-image: linear-gradient(45deg, #ffffff 0%, #00d4ff 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            background-color: transparent !important;
            text-shadow: none !important;
        }
        
        /* Force button colors */
        body .hero-section .btn-primary,
        body .hero-section .btn.btn-primary {
            background: linear-gradient(45deg, #00d4ff, #0099cc) !important;
            color: white !important;
            background-color: transparent !important;
        }
        
        body .hero-section .btn-secondary,
        body .hero-section .btn.btn-secondary {
            background: transparent !important;
            color: #00d4ff !important;
            border: 2px solid #00d4ff !important;
        }
    </style>
</head>

<body>
    <!-- Animated Background Bubbles - Continuously Rising -->
    <div class="floating-bubble floating-bubble-1"></div>
    <div class="floating-bubble floating-bubble-2"></div>
    <div class="floating-bubble floating-bubble-3"></div>
    <div class="floating-bubble floating-bubble-4"></div>
    <div class="floating-bubble floating-bubble-5"></div>
    <div class="floating-bubble floating-bubble-6"></div>
    <div class="floating-bubble floating-bubble-7"></div>
    
    <!-- Google Tag Manager (noscript) -->
    <!-- Intentional: Inline style for GTM noscript iframe -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MXG6QRZR"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <!-- Skip to Content -->
    <a href="#main-content" class="skip-to-content">Skip to main content</a>

    <!-- Navigation Header -->
    <damp-header></damp-header>

    <!-- Main Content -->
    <main id="main-content">
        <!-- Hero Section -->
        <section class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <div class="hero-logo">
                        <img src="assets/images/logo/logo.png" alt="DAMP Logo" width="90" height="90" loading="eager" decoding="async">
                    </div>

                    <h1 class="hero-title">Make Any Cup Smart</h1>

                    <p class="hero-subtitle">
                        You don't need a new bottle. Just make yours smart.<br>
                        DAMP smart attachments transform your favorite cup into a connected device—no replacement needed.
                    </p>

                    <div class="hero-feature-box">
                        <div class="hero-feature-list">
                            <span class="hero-feature-item">✓ Works with ANY bottle</span>
                            <span class="hero-feature-separator">•</span>
                            <span class="hero-feature-item">✓ Keep your favorite cup</span>
                            <span class="hero-feature-separator">•</span>
                            <span class="hero-feature-item">✓ Upgrade, don't replace</span>
                        </div>
                        <p class="hero-feature-text">
                            Your Stanley, YETI, Hydro Flask — now smart.
                        </p>
                    </div>

                    <div class="hero-cta">
                        <a href="pages/pre-sale-funnel.html" class="btn btn-primary" data-analytics="cta" data-analytics-label="Hero CTA - Make Your Cup Smart" data-analytics-location="hero">
                            🚀 Make Your Cup Smart - Starting $29.99
                        </a>
                    </div>
                    
                    <div class="hero-nav-container">
                        <a href="pages/how-it-works.html" class="btn btn-secondary hero-nav-btn" data-analytics="navigation" data-analytics-label="How It Works" data-analytics-location="hero">
                            📖 How It Works
                        </a>
                        <a href="pages/products.html" class="btn btn-secondary hero-nav-btn" data-analytics="navigation" data-analytics-label="View Products" data-analytics-location="hero">
                            🛍️ View Products
                        </a>
                        <a href="pages/about.html" class="btn btn-secondary hero-nav-btn" data-analytics="navigation" data-analytics-label="About DAMP" data-analytics-location="hero">
                            ℹ️ About DAMP
                        </a>
                        <a href="pages/founders-note.html" class="btn btn-secondary hero-nav-btn" data-analytics="navigation" data-analytics-label="Founder's Note" data-analytics-location="hero">
                            ✍️ Founder's Note
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Why DAMP is Different -->
        <section class="section-gradient-dark">
            <div class="container section-container-centered">
                <div class="badge-smart">
                    SMART DRINKWARE ATTACHMENTS
                </div>
                
                <h2 class="heading-large-gradient">
                    We Don't Make Smart Bottles.<br>
                    <span class="text-gradient-primary">
                        We Make Any Bottle Smart.
                    </span>
                </h2>
                
                <p class="section-text-large">
                    That $50 Stanley you love? <strong class="text-accent-secondary">Keep it.</strong><br>
                    Your YETI that's climbed mountains? <strong class="text-accent-secondary">Keep it.</strong><br>
                    The Hydro Flask with memories? <strong class="text-accent-secondary">Keep it.</strong>
                </p>
                
                <div class="card-feature-grid">
                    <div class="grid-auto-fit">
                        <div>
                            <div class="feature-icon-large">🎯</div>
                            <h3 class="feature-title-primary">Universal Fit</h3>
                            <p class="feature-text-secondary">
                                Works with ANY bottle, ANY brand, ANY size
                            </p>
                        </div>
                        
                        <div>
                            <div class="feature-icon-large">♻️</div>
                            <h3 class="feature-title-primary">Sustainable</h3>
                            <p class="feature-text-secondary">
                                Upgrade what you own instead of replacing
                            </p>
                        </div>
                        
                        <div>
                            <div class="feature-icon-large">💡</div>
                            <h3 class="feature-title-primary">Your Choice</h3>
                            <p class="feature-text-secondary">
                                Your cup, your style, your memories
                            </p>
                        </div>
                    </div>
                </div>
                
                <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-medium" data-analytics="cta" data-analytics-label="CTA - See How It Works" data-analytics-location="why-damp">
                    See How It Works →
                </a>
            </div>
        </section>

        <!-- Explore DAMP Section -->
        <section class="section-gradient-primary">
            <div class="container section-container-wide">
                <h2 class="heading-center-large">
                    Explore Smart Drinkware Attachments
                </h2>
                <p class="text-center-subtitle">
                    Discover our revolutionary attachment technology, see how it works, and find the perfect DAMP device for your cup.
                </p>
                
                <div class="grid-auto-fit-narrow">
                    <!-- What is DAMP Drinking -->
                    <a href="#damp-drinking" class="card-explore">
                        <div class="card-explore-icon">💧</div>
                        <h3 class="card-explore-title">What is DAMP Drinking?</h3>
                        <p class="card-explore-text">
                            Discover the philosophy behind never leaving your drink behind and how DAMP changes your daily routine.
                        </p>
                        <div class="card-explore-link">
                            Learn More →
                        </div>
                    </a>
                    
                    <!-- How It Works -->
                    <a href="pages/how-it-works.html" class="card-explore">
                        <div class="card-explore-icon">⚙️</div>
                        <h3 class="card-explore-title">How It Works</h3>
                        <p class="card-explore-text">
                            See the simple 3-step process: Clip DAMP onto your cup, pair with your phone, and get instant alerts.
                        </p>
                        <div class="card-explore-link">
                            See the Process →
                        </div>
                    </a>
                    
                    <!-- About DAMP -->
                    <a href="pages/about.html" class="card-explore">
                        <div class="card-explore-icon">🏢</div>
                        <h3 class="card-explore-title">About DAMP</h3>
                        <p class="card-explore-text">
                            Our mission, the team behind DAMP, and why we're building the future of smart drinkware.
                        </p>
                        <div class="card-explore-link">
                            Meet the Team →
                        </div>
                    </a>
                    
                    <!-- Browse Products -->
                    <a href="pages/products.html" class="card-explore">
                        <div class="card-explore-icon">🛍️</div>
                        <h3 class="card-explore-title">Browse Products</h3>
                        <p class="card-explore-text">
                            Explore our full product lineup: Cup Sleeve, Silicone Bottom, and Handle - find your perfect fit.
                        </p>
                        <div class="card-explore-link">
                            View All Products →
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- Strategic Ad Placement: After Hero -->
        <div id="ad-after-hero"></div>

        <!-- Pain Points Section - Real Stories -->
        <section class="section pain-points-section">
            <div class="container">
                <h2 class="section-title">Sound Familiar?</h2>
                <p class="section-subtitle section-subtitle-custom">
                    We've all been there. These aren't just frustrations—they're daily struggles that add up to wasted money, time, and beverages.
                </p>
                
                <!-- Real-life stories callout -->
                <div class="callout-box">
                    <p class="callout-text">
                        <strong class="callout-text-accent">"My kids always left their water bottles at school."</strong><br>
                        <strong class="callout-text-accent">"I tend to leave my hot latte on the counter before leaving for work."</strong>
                    </p>
                    <p class="callout-attribution">
                        — Real DAMP users sharing why they needed a solution
                    </p>
                </div>

                <div class="pain-points-grid">
                    <div class="pain-point-card">
                        <span class="pain-icon">☕</span>
                        <h3 class="pain-title">The Morning Rush</h3>
                        <p>"I make my perfect latte, rush out the door for work, and realize it's still sitting on the kitchen counter getting cold. Every. Single. Morning."</p>
                    </div>

                    <div class="pain-point-card">
                        <span class="pain-icon">🎒</span>
                        <h3 class="pain-title">Kids & School Bottles</h3>
                        <p>"My kids constantly leave their water bottles at school. I've bought 10 bottles this year because they keep forgetting them in classrooms or on the playground."</p>
                    </div>

                    <div class="pain-point-card">
                        <span class="pain-icon">💸</span>
                        <h3 class="pain-title">Wasted Specialty Drinks</h3>
                        <p>"That $6 specialty coffee I treat myself to? Left it in the conference room. Found it hours later, ice melted, and ruined. My wallet cries every time."</p>
                    </div>

                    <div class="pain-point-card">
                        <span class="pain-icon">🏃</span>
                        <h3 class="pain-title">The Panic Sprint</h3>
                        <p>"Running back to the gym locker room, hoping my protein shake is still there and hasn't been thrown away by the cleaning crew."</p>
                    </div>

                    <div class="pain-point-card">
                        <span class="pain-icon">🤦</span>
                        <h3 class="pain-title">Meeting Marathons</h3>
                        <p>"In back-to-back meetings all day. My coffee is in conference room A, but I'm now in room D. Which meeting was it from?"</p>
                    </div>

                    <div class="pain-point-card">
                        <span class="pain-icon">🚗</span>
                        <h3 class="pain-title">Car Cup Graveyard</h3>
                        <p>"Left my tumbler in the cupholder when I ran into the store. Came back two hours later to find it baking in the sun."</p>
                    </div>
                </div>
                
                <!-- CTA after pain points -->
                <div class="cta-box-red">
                    <h3 class="cta-box-heading">
                        Stop the Cycle. Make Your Cup Smart.
                    </h3>
                    <p class="cta-box-text">
                        DAMP attachments give you instant alerts when you're about to leave your drink behind. Never experience these frustrations again.
                    </p>
                    <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-medium">
                        Get DAMP Alerts →
                    </a>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="section">
            <div class="container">
                <div class="badge-container">
                    <div class="badge-upgraded">
                        <span class="badge-upgraded-text">YOUR CUP, UPGRADED</span>
                    </div>
                </div>
                
                <h2 class="section-title">Smart Technology, Simple Attachment</h2>
                <p class="section-subtitle">
                    Advanced BLE technology that clips onto any cup in seconds. No tools, no permanent modifications, no replacement needed. Just instant intelligence for the drinkware you already love.
                </p>

                <div class="features-grid">
                    <div class="feature-card">
                        <span class="feature-icon">📱</span>
                        <h3 class="feature-title">Instant Phone Alerts</h3>
                        <p>Get immediate notifications when you move too far from your drink. Customizable distance settings.</p>
                    </div>

                    <div class="feature-card">
                        <span class="feature-icon">🔋</span>
                        <h3 class="feature-title">6-Month Battery Life</h3>
                        <p>Long-lasting battery with low-power BLE technology. Charge once, forget for months.</p>
                    </div>

                    <div class="feature-card">
                        <span class="feature-icon">💧</span>
                        <h3 class="feature-title">Waterproof Design</h3>
                        <p>IP67 rated protection. Works perfectly with hot drinks, cold beverages, and dishwasher safe.</p>
                    </div>

                    <div class="feature-card">
                        <span class="feature-icon">🌍</span>
                        <h3 class="feature-title">Universal Compatibility</h3>
                        <p>Works with any cup, mug, or bottle. Universal design that attaches to most drinkware.</p>
                    </div>

                    <div class="feature-card">
                        <span class="feature-icon">🎯</span>
                        <h3 class="feature-title">Smart Detection</h3>
                        <p>Advanced sensors know when you're intentionally leaving vs. accidentally forgetting your drink.</p>
                    </div>

                    <div class="feature-card">
                        <span class="feature-icon">📊</span>
                        <h3 class="feature-title">Hydration Tracking</h3>
                        <p>Monitor your daily fluid intake and build healthy drinking habits with detailed analytics.</p>
                    </div>
                </div>
                
                <!-- CTA after features -->
                <div class="cta-box-simple">
                    <p class="cta-box-text-simple">
                        Ready to upgrade your cup?
                    </p>
                    <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-medium-wide">
                        Reserve Your Attachment Now →
                    </a>
                    <p class="cta-box-footer">
                        Starting at $29.99 • Universal compatibility • Pre-sale pricing
                    </p>
                </div>
            </div>
        </section>

        <!-- What is DAMP Drinking Section -->
        <section id="damp-drinking" class="section-gradient-orange">
            <div class="container section-container-standard">
                <div class="section-header-center">
                    <div class="section-icon-large">💧</div>
                    <h2 class="heading-gradient-orange text-gradient-orange">
                        What is DAMP Drinking?
                    </h2>
                    <p class="text-center-large">
                        DAMP Drinking is more than just a product—it's a lifestyle shift. It's the conscious decision to <strong class="text-accent-orange">never leave your drink behind again</strong>.
                    </p>
                </div>
                
                <div class="card-dark">
                    <h3 class="heading-center-medium">
                        The DAMP Philosophy
                    </h3>
                    
                    <div class="grid-auto-fit-medium">
                        <div>
                            <div class="feature-icon-medium">🎯</div>
                            <h4 class="feature-title-orange">Mindful Consumption</h4>
                            <p class="feature-text-light">
                                Be present with every sip. DAMP helps you stay aware of your beverages, reducing waste and saving money.
                            </p>
                        </div>
                        
                        <div>
                            <div class="feature-icon-medium">♻️</div>
                            <h4 class="feature-title-orange">Sustainability</h4>
                            <p class="feature-text-light">
                                Fewer forgotten drinks means less waste. Every beverage finished is a step toward a more sustainable future.
                            </p>
                        </div>
                        
                        <div>
                            <div class="feature-icon-medium">💰</div>
                            <h4 class="feature-title-orange">Value Your Drinks</h4>
                            <p class="feature-text-light">
                                That $6 latte deserves respect. Stop wasting money on drinks you forget about—DAMP ensures you enjoy every drop.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="card-quote">
                    <p class="text-quote">
                        <strong class="quote-text-strong">"DAMP Drinking means caring about what you consume."</strong><br><br>
                        It's about respecting your time, money, and the beverages you choose. Whether it's your morning coffee, afternoon energy drink, or evening herbal tea—DAMP ensures you never have to wonder where you left it. 
                        <br><br>
                        <span class="quote-text-accent">Join thousands who've embraced the DAMP lifestyle and never looked back.</span>
                    </p>
                </div>

                <!-- Note about popular DAMP drinking meaning -->
                <div class="card-info-gradient">
                    <div class="card-info-icon">🌱</div>
                    <h4 class="card-info-heading">
                        Looking for DAMP Drinking Meaning?
                    </h4>
                    <p class="card-info-text">
                        "DAMP drinking" is also a popular lifestyle term meaning <strong class="card-info-text-accent">Drinking in Moderation</strong> or mindfully abstaining from alcohol. Learn about this growing wellness movement.
                    </p>
                    <a href="pages/damp-drinking-meaning.html" class="btn-gradient-primary">
                        Read About DAMP Drinking Lifestyle →
                    </a>
                </div>
                
                <div class="cta-center">
                    <a href="pages/about.html" class="btn-gradient-orange">
                        Learn More About Our Mission →
                    </a>
                </div>
            </div>
        </section>

        <!-- Strategic Ad Placement: Between Features and Products -->
        <div id="ad-between-features"></div>

        <!-- Your Bottle Has Stories Section -->
        <section class="section-stories">
            <div class="container section-container-stories">
                <div class="section-icon-stories">💚</div>
                
                <h2 class="section-title heading-stories">
                    Your Bottle Has Stories
                </h2>
                
                <div class="card-quote-primary">
                    <p class="card-quote-text-primary">
                        That cup hiked the Pacific Crest Trail with you. It survived your thesis defense. It's been to 30 states and five countries.
                    </p>
                    <p class="card-quote-text-large">
                        <span class="text-accent-secondary">It deserves an upgrade, not a replacement.</span>
                    </p>
                </div>
                
                <div class="grid-stories">
                    <div class="card-story">
                        <div class="card-story-icon">♻️</div>
                        <h3 class="card-story-title">Sustainability</h3>
                        <p class="card-story-text">
                            Stop buying new bottles. Upgrade what you already own and love.
                        </p>
                    </div>
                    
                    <div class="card-story">
                        <div class="card-story-icon">💰</div>
                        <h3 class="card-story-title">Save Money</h3>
                        <p class="card-story-text">
                            Keep your premium bottle investment. Just add intelligence.
                        </p>
                    </div>
                    
                    <div class="card-story">
                        <div class="card-story-icon">🎯</div>
                        <h3 class="card-story-title">Your Memories</h3>
                        <p class="card-story-text">
                            That cup has history. Don't throw it away—enhance it.
                        </p>
                    </div>
                </div>
                
                <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-stories">
                    Reserve Your DAMP Attachment →
                </a>
                
                <p class="text-muted-footer">
                    Starting at $29.99 • Pre-sale pricing • Universal compatibility
                </p>
            </div>
        </section>

        <!-- Products Section -->
        <section class="section">
            <div class="container">
                <div class="badge-container">
                    <div class="badge-green">
                        <span class="badge-green-text">SMART ATTACHMENTS, UNIVERSAL FIT</span>
                    </div>
                </div>
                
                <h2 class="section-title">Pick Your Perfect Attachment</h2>
                <p class="section-subtitle">
                    Three intelligent attachments designed to work with any cup. Clip on, connect, and never lose your drink again. No permanent modifications, no compatibility issues—just instant intelligence.
                </p>
                
                <div class="card-compatibility">
                    <p class="card-compatibility-text">
                        <strong class="text-accent-primary">Compatible with 50+ brands:</strong> Stanley, YETI, Hydro Flask, Starbucks, Contigo, Ember, Simple Modern, RTIC, Ozark Trail, S'well, Klean Kanteen, Takeya, Thermos, and more. 
                        <span class="text-accent-green">If it holds a drink, DAMP makes it smart.</span>
                    </p>
                </div>

                <div class="products-grid">
                    <div class="product-card">
                        <div class="product-image">
                            <picture>
                                <source 
                                    type="image/avif" 
                                    srcset="assets/images/optimized/products/damp-handle/damp-handle-small.avif 200w, assets/images/optimized/products/damp-handle/damp-handle-medium.avif 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <source 
                                    type="image/webp" 
                                    srcset="assets/images/optimized/products/damp-handle/damp-handle-small.webp 200w, assets/images/optimized/products/damp-handle/damp-handle-medium.webp 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <img src="assets/images/optimized/products/damp-handle/damp-handle-small.png" alt="DAMP Handle" width="120" height="120" loading="lazy" decoding="async">
                            </picture>
                        </div>
                        <h3 class="product-name">DAMP Handle</h3>
                        <div class="product-price">$49.99</div>
                        <p><strong>Universal handle attachment.</strong> Clips onto any cup—turns handleless bottles into smart travel mugs. Perfect for commuters and travelers.</p>
                        <a href="pages/damp-handle-v1.0.html" class="btn btn-primary btn-small">Upgrade Your Cup</a>
                    </div>

                    <div class="product-card">
                        <div class="product-image">
                            <picture>
                                <source 
                                    type="image/avif" 
                                    srcset="assets/images/optimized/products/silicone-bottom/silicone-bottom-small.avif 200w, assets/images/optimized/products/silicone-bottom/silicone-bottom-medium.avif 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <source 
                                    type="image/webp" 
                                    srcset="assets/images/optimized/products/silicone-bottom/silicone-bottom-small.webp 200w, assets/images/optimized/products/silicone-bottom/silicone-bottom-medium.webp 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <img src="assets/images/optimized/products/silicone-bottom/silicone-bottom-small.png" alt="Silicone Bottom" width="120" height="120" loading="lazy" decoding="async">
                            </picture>
                        </div>
                        <h3 class="product-name">Silicone Bottom</h3>
                        <div class="product-price">$29.99</div>
                        <p><strong>Smart base attachment.</strong> Non-slip silicone bottom that makes any cup intelligent. Dishwasher safe. Most affordable way to upgrade.</p>
                        <a href="pages/silicone-bottom-v1.0.html" class="btn btn-primary btn-small">Upgrade Your Cup</a>
                    </div>

                    <div class="product-card">
                        <div class="product-image">
                            <picture>
                                <source 
                                    type="image/avif" 
                                    srcset="assets/images/optimized/products/cup-sleeve/cup-sleeve-small.avif 200w, assets/images/optimized/products/cup-sleeve/cup-sleeve-medium.avif 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <source 
                                    type="image/webp" 
                                    srcset="assets/images/optimized/products/cup-sleeve/cup-sleeve-small.webp 200w, assets/images/optimized/products/cup-sleeve/cup-sleeve-medium.webp 400w"
                                    sizes="(max-width: 600px) 120px, 200px">
                                <img src="assets/images/optimized/products/cup-sleeve/cup-sleeve-small.png" alt="Cup Sleeve" width="120" height="120" loading="lazy" decoding="async">
                            </picture>
                        </div>
                        <h3 class="product-name">Cup Sleeve</h3>
                        <div class="product-price">$39.99</div>
                        <p><strong>Smart sleeve attachment.</strong> Adjustable fit with thermal insulation. Makes any coffee cup or mug intelligent. Popular choice for office workers.</p>
                        <a href="pages/cup-sleeve-v1.0.html" class="btn btn-primary btn-small">Upgrade Your Cup</a>
                    </div>

                    <!-- TEMPORARILY DISABLED: FDA Regulation Compliance Review
                    <div class="product-card">
                        <div class="product-image">
                            <img src="assets/images/products/baby-bottle/baby-bottle.png" alt="Baby Bottle" loading="lazy">
                        </div>
                        <h3 class="product-name">Baby Bottle</h3>
                        <div class="product-price">$79.99</div>
                        <p>Smart baby bottle with feeding tracking and temperature monitoring for parents.</p>
                        <a href="pages/baby-bottle-v1.0.html" class="btn btn-primary btn-small">Learn More</a>
                    </div>
                    -->
                </div>

                <div class="cta-box-primary">
                    <h3 class="cta-box-heading-medium">
                        Ready to Upgrade Your Cup?
                    </h3>
                    <p class="cta-box-text-medium">
                        Choose your attachment style and reserve your spot. Early bird pricing available now during pre-sale.
                    </p>
                    <div class="cta-buttons-container">
                        <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-cta-medium">
                            Reserve Now - Starting $29.99
                        </a>
                        <a href="pages/products.html" class="btn btn-secondary btn-cta-medium">
                            Compare Attachments
                        </a>
                    </div>
                    <p class="text-muted-small-link">
                        <a href="pages/product-voting.html" class="link-primary">
                            Vote on future products →
                        </a>
                    </p>
                </div>
            </div>
        </section>

        <!-- Strategic Ad Placement: Before Testimonials -->
        <div id="ad-before-testimonials"></div>

        <!-- Testimonials Section -->
        <section class="section">
            <div class="container">
                <h2 class="section-title">Help Us Build the Future of Smart Drinkware</h2>
                <p class="section-subtitle">
                    We're in active development and need your support to bring DAMP to life. Your pre-order helps fund manufacturing and ensures you get the best possible product.
                </p>

                <div class="testimonials-grid">
                    <div class="testimonial-card">
                        <p class="testimonial-text">
                            "The concept is brilliant! As someone who constantly forgets my coffee, I can't wait for this to become reality. Happy to support the development."
                        </p>
                        <div class="testimonial-author">- Early Supporter Feedback</div>
                    </div>

                    <div class="testimonial-card">
                        <p class="testimonial-text">
                            "Finally, someone is solving the drink abandonment problem! The technology sounds promising and I'm excited to be part of making this happen."
                        </p>
                        <div class="testimonial-author">- Development Community</div>
                    </div>

                    <div class="testimonial-card">
                        <p class="testimonial-text">
                            "Love the vision of universal compatibility. Pre-ordering because I believe in the mission and want to help fund this innovation."
                        </p>
                        <div class="testimonial-author">- Pre-Order Supporter</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Newsletter Section -->
        <section class="section newsletter-section" id="newsletter">
            <div class="container">
                <h2 class="section-title">Stay in the Loop</h2>
                <p class="section-subtitle">
                    Get exclusive updates on DAMP development, early access to new products, and insider tips to never lose your drink again.
                </p>

                <div class="newsletter-container">
                    <div class="newsletter-benefits">
                        <div class="benefit-item">
                            <span class="benefit-icon">⚡</span>
                            <h4>Early Access</h4>
                            <p>Be first to know about new products and pre-order opportunities</p>
                        </div>
                        <div class="benefit-item">
                            <span class="benefit-icon">💡</span>
                            <h4>Insider Tips</h4>
                            <p>Expert advice on smart drinkware and hydration habits</p>
                        </div>
                        <div class="benefit-item">
                            <span class="benefit-icon">🎁</span>
                            <h4>Exclusive Deals</h4>
                            <p>Subscriber-only discounts and limited-time offers</p>
                        </div>
                    </div>

                    <div class="newsletter-form-container">
                        <div class="newsletter-badge">
                            <span class="badge-icon">📧</span>
                            <span class="badge-text">Join 12,000+ DAMP enthusiasts</span>
                        </div>

                        <form class="newsletter-form" id="newsletterForm">
                            <div class="form-group newsletter-input-group">
                                <div class="input-wrapper">
                                    <input type="email"
                                           class="newsletter-input"
                                           id="newsletterEmail"
                                           name="email"
                                           placeholder="Enter your email address"
                                           required
                                           aria-label="Email address for newsletter subscription">
                                    <span class="input-icon">📧</span>
                                </div>
                                <button type="submit" class="newsletter-button">
                                    <span class="button-text">Subscribe</span>
                                    <span class="button-icon">→</span>
                                </button>
                            </div>

                            <div class="newsletter-options">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="productUpdates" checked>
                                    <span class="checkmark">✓</span>
                                    Product development updates
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="launchAlerts" checked>
                                    <span class="checkmark">✓</span>
                                    New product launch alerts
                                </label>
                            </div>

                            <p class="newsletter-privacy">
                                We respect your privacy. Unsubscribe at any time.
                                <a href="pages/privacy-policy.html">Privacy Policy</a>
                            </p>
                        </form>

                        <!-- Success Message -->
                        <div class="newsletter-success hidden" id="newsletterSuccess">
                            <div class="success-icon">🎉</div>
                            <h3>Welcome to the DAMP Community!</h3>
                            <p>Thank you for subscribing! Check your email for a confirmation message and your exclusive welcome gift.</p>
                        </div>

                        <!-- Error Message -->
                        <div class="newsletter-error hidden" id="newsletterError">
                            <div class="error-icon">⚠️</div>
                            <h3>Subscription Failed</h3>
                            <p id="newsletterErrorText">Please try again or contact support if the problem persists.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Final CTA Section -->
        <section class="section cta-section section-cta-gradient">
            <div class="container section-container-cta">
                <div class="cta-icon-large">🚀</div>
                
                <h2 class="section-title heading-title-custom">
                    Ready to Make Your Cup Smart?
                </h2>
                
                <p class="section-subtitle section-subtitle-cta">
                    Reserve your DAMP attachment now. Secure early bird pricing and be among the first to upgrade your favorite cup.
                </p>
                
                <div class="cta-card">
                    <div class="cta-stats-container">
                        <div class="cta-stat">
                            <div class="cta-stat-value-primary">$29.99+</div>
                            <p class="cta-stat-label">
                                Starting price
                            </p>
                        </div>
                        <div class="cta-stat-separator">•</div>
                        <div class="cta-stat">
                            <div class="cta-stat-value-secondary">3 Styles</div>
                            <p class="cta-stat-label">
                                Universal attachments
                            </p>
                        </div>
                        <div class="cta-stat-separator">•</div>
                        <div class="cta-stat">
                            <div class="cta-stat-value-primary">Any Cup</div>
                            <p class="cta-stat-label">
                                Works with all brands
                            </p>
                        </div>
                    </div>
                </div>

                <div class="text-center" role="group" aria-label="Pre-order and cart actions">
                    <a href="pages/pre-sale-funnel.html" class="btn btn-primary btn-large btn-large-final" role="button" aria-label="Make Your Cup Smart - Reserve Now" id="preOrderCta" data-analytics="cta" data-analytics-label="Final CTA - Make Your Cup Smart Reserve Now" data-analytics-location="final-cta">
                        <span aria-hidden="true">🚀</span> <span>Make Your Cup Smart - Reserve Now</span>
                    </a>
                    
                    <p class="text-muted-inline">
                        or <a href="pages/cart.html" class="link-primary-bold">view your cart</a>
                    </p>
                    
                    <div id="liveActivityError" class="mt-20 text-danger" aria-live="assertive"></div>
                </div>
                
                <div class="cta-footer">
                    <p class="text-muted-small">
                        Join early backers choosing to upgrade instead of replace
                    </p>
                    <p class="text-secondary-bold">
                        Don't replace it. Upgrade it. 💚
                    </p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <damp-footer></damp-footer>

    <!-- Load Lighthouse Performance Optimizer First -->
    <script src="assets/js/performance/lighthouse-optimizer.js"></script>

    <!-- Load Critical Scripts -->
    <script defer src="assets/js/components/header.js?v=2.1.3"></script>
    <script defer src="assets/js/components/footer.js"></script>
    <script defer src="assets/js/components/hero-animation.js"></script>

    <!-- Load Newsletter System (Non-Critical) -->
    <script defer src="assets/js/newsletter.js"></script>

    <!-- Authentication Styles -->
    <link rel="stylesheet" href="assets/css/auth-styles.css">

    <!-- Founder's Note Styles -->
    <link rel="stylesheet" href="assets/css/founders-note.css">

    <!-- Firebase Fallback Loader (handles module resolution issues) -->
    <script src="assets/js/firebase-fallback-loader.js"></script>

    <!-- Modern Firebase Setup (ES6 Modules) -->
    <script type="module" src="assets/js/firebase-modern-setup.js"></script>

    <!-- Firebase Configuration Validator -->
    <script type="module" src="assets/js/firebase-config-validator.js"></script>

    <!-- Authentication Modal -->
    <script src="assets/js/auth-modal.js"></script>

    <!-- Founder's Note Component -->
    <script defer src="assets/js/components/founders-note.js"></script>
    
    <!-- CRITICAL FIX: JavaScript fallback to force gradient styles and ensure background (optimized to prevent flickering) -->
    <script>
        // Force apply gradient styles and ensure background is visible - optimized to prevent flickering
        (function() {
            // Ensure body background is always visible
            function ensureBackground() {
                const body = document.body;
                if (body) {
                    const computedStyle = window.getComputedStyle(body);
                    const bg = computedStyle.background || computedStyle.backgroundColor;
                    if (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
                        body.style.setProperty('background', 'linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) fixed', 'important');
                        body.style.setProperty('background-color', '#0f0f23', 'important');
                    }
                }
            }
            
            let applied = false;
            
            function applyGradientFix() {
                // Ensure background first
                ensureBackground();
                
                // Only apply once to prevent flickering from multiple applications
                if (applied) return;
                
                // Use requestAnimationFrame for smooth application
                requestAnimationFrame(function() {
                    const heroTitles = document.querySelectorAll('.hero-title, h1.hero-title, .hero-section h1, .hero-content h1');
                    heroTitles.forEach(function(el) {
                        if (el && !el.dataset.gradientApplied) {
                            el.style.setProperty('background-image', 'linear-gradient(45deg, #ffffff 0%, #00d4ff 100%)', 'important');
                            el.style.setProperty('-webkit-background-clip', 'text', 'important');
                            el.style.setProperty('background-clip', 'text', 'important');
                            el.style.setProperty('-webkit-text-fill-color', 'transparent', 'important');
                            el.style.setProperty('color', 'transparent', 'important');
                            el.style.setProperty('background-color', 'transparent', 'important');
                            el.style.setProperty('text-shadow', 'none', 'important');
                            el.dataset.gradientApplied = 'true';
                        }
                    });
                    
                    const sectionTitles = document.querySelectorAll('.section-title, h2.section-title, section h2');
                    sectionTitles.forEach(function(el) {
                        if (el && !el.dataset.gradientApplied && (el.classList.contains('section-title') || el.closest('section'))) {
                            el.style.setProperty('background-image', 'linear-gradient(45deg, #ffffff 0%, #00d4ff 100%)', 'important');
                            el.style.setProperty('-webkit-background-clip', 'text', 'important');
                            el.style.setProperty('background-clip', 'text', 'important');
                            el.style.setProperty('-webkit-text-fill-color', 'transparent', 'important');
                            el.style.setProperty('color', 'transparent', 'important');
                            el.style.setProperty('background-color', 'transparent', 'important');
                            el.style.setProperty('text-shadow', 'none', 'important');
                            el.dataset.gradientApplied = 'true';
                        }
                    });
                    
                    applied = true;
                });
            }
            
            // Ensure background immediately
            ensureBackground();
            
            // Apply once when DOM is ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', applyGradientFix, { once: true });
            } else {
                applyGradientFix();
            }
            
            // Also check after a short delay to catch any late-loading styles
            setTimeout(function() {
                ensureBackground();
                if (!applied) applyGradientFix();
            }, 100);
        })();
    </script>

    <!-- Performance Optimized Loading -->
    <script>
        // Global function for hero animation completion - optimized to prevent flickering
        window.showMainContent = function() {
            console.log('✅ DAMP: Showing main content after animation');
            
            // Use requestAnimationFrame for smooth transition
            requestAnimationFrame(function() {
                // Add animation complete class to body
                document.body.classList.add('animation-complete');
                document.body.style.overflow = 'auto';
                document.body.style.height = 'auto';

                // Ensure navigation header is visible with smooth transition
                const header = document.querySelector('damp-header');
                if (header) {
                    header.style.opacity = '1';
                    header.style.visibility = 'visible';
                    header.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
                }

                // Ensure main content is visible with smooth transition
                const mainContent = document.querySelector('main');
                if (mainContent) {
                    mainContent.style.opacity = '1';
                    mainContent.style.visibility = 'visible';
                    mainContent.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
                }

                // Show all body children except animation overlay with smooth transition
                const allContent = document.querySelectorAll('body > *:not(.hero-animation-overlay)');
                allContent.forEach(element => {
                    element.style.opacity = '1';
                    element.style.visibility = 'visible';
                    element.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
                });

                // Ensure navigation is properly positioned and visible
                const nav = document.querySelector('.damp-nav');
                if (nav) {
                    nav.style.opacity = '1';
                    nav.style.visibility = 'visible';
                    nav.style.zIndex = '1000';
                    nav.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
                }

                console.log('✅ DAMP: All content made visible after animation');
            });
        };

        // Ensure page loads immediately
        document.addEventListener('DOMContentLoaded', function() {
            console.log('✅ DAMP website loaded successfully');

            // If no animation is playing, show content immediately
            setTimeout(() => {
                if (!document.querySelector('.hero-animation-overlay')) {
                    window.showMainContent();
                }
            }, 500);

            // Load additional scripts after page is ready
            setTimeout(() => {
                loadAdditionalScripts();
            }, 1000);

            // Failsafe: Ensure content shows after 12 seconds maximum
            setTimeout(() => {
                if (!document.body.classList.contains('animation-complete')) {
                    console.log('✅ DAMP: Failsafe - showing content after timeout');
                    window.showMainContent();
                }
            }, 12000);
        });

        function loadAdditionalScripts() {
            const additionalScripts = [
                'assets/js/navigation.js',
                'assets/js/cookie-policy.js',
                'assets/js/lazy-loading.js',
                'assets/js/performance-monitor.js',
                'assets/js/performance/advanced-optimization.js',
                'assets/js/performance/image-optimization.js'
            ];

            additionalScripts.forEach((src, index) => {
                setTimeout(() => {
                    const script = document.createElement('script');
                    script.src = src;
                    script.async = true;
                    script.onload = () => console.log(`✅ Loaded: ${src}`);
                    script.onerror = () => console.warn(`⚠️ Optional script failed: ${src}`);
                    document.head.appendChild(script);
                }, index * 200);
            });
        }
    </script>

    <!-- Service Worker Registration Manager -->
    <script src="assets/js/service-worker-registration.js"></script>

    <!-- Authentication Module (loaded above as regular script) -->

    <!-- AdSense Configuration -->
    <script src="assets/js/adsense-config.js"></script>

    <!-- AdSense Manager -->
    <script src="assets/js/adsense-manager.js"></script>

    <!-- Initialize Homepage Ads -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Wait for AdSense manager to initialize
            setTimeout(function() {
                if (window.dampAdsense && window.dampAdsense.initialized) {
                    // Place strategic ads on homepage
                    const afterHero = document.getElementById('ad-after-hero');
                    const betweenFeatures = document.getElementById('ad-between-features');
                    const beforeTestimonials = document.getElementById('ad-before-testimonials');

                    if (afterHero) {
                        const heroAd = window.dampAdsense.createAdUnit({
                            format: 'banner',
                            placement: 'homepage',
                            className: 'damp-ad-after-hero'
                        });
                        afterHero.appendChild(heroAd);
                    }

                    if (betweenFeatures) {
                        const featuresAd = window.dampAdsense.createAdUnit({
                            format: 'rectangle',
                            placement: 'homepage',
                            className: 'damp-ad-between-features'
                        });
                        betweenFeatures.appendChild(featuresAd);
                    }

                    if (beforeTestimonials) {
                        const testimonialsAd = window.dampAdsense.createAdUnit({
                            format: 'banner',
                            placement: 'homepage',
                            className: 'damp-ad-before-testimonials'
                        });
                        beforeTestimonials.appendChild(testimonialsAd);
                    }

                    console.log('✅ DAMP Homepage ads initialized');
                }
            }, 1000);
        });
    </script>

        <!-- Global Error Logging for Clicks and Routing -->
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Helper to log errors
            function logError(context, error, extra) {
                console.error(`❌ DAMP Error [${context}]:`, error, extra || '');
            }

            // Listen for all clicks on buttons and links
            document.body.addEventListener('click', function(e) {
                let target = e.target;
                // Traverse up to find a clickable element
                while (target && !target.matches('a,button')) {
                    target = target.parentElement;
                }
                if (target && (target.matches('a') || target.matches('button'))) {
                    try {
                        // Log click details
                        console.log('🔎 DAMP Click:', {
                            type: target.tagName,
                            text: target.textContent.trim(),
                            href: target.getAttribute('href') || null,
                            class: target.className
                        });
                        // If it's a link, attempt navigation and catch errors
                        if (target.matches('a') && target.href) {
                            // Only handle internal links
                            if (target.href.startsWith(window.location.origin)) {
                                // Listen for navigation errors
                                window.addEventListener('error', function navErrorHandler(event) {
                                    logError('Navigation', event.error || event.message, event);
                                    window.removeEventListener('error', navErrorHandler);
                                });
                            }
                        }
                    } catch (err) {
                        logError('Click', err, target);
                    }
                }
            }, true);

            // Listen for popstate and hashchange (routing events)
            window.addEventListener('popstate', function(e) {
                try {
                    console.log('🔄 DAMP Route Change:', window.location.pathname + window.location.hash);
                } catch (err) {
                    logError('Route Change', err);
                }
            });
            window.addEventListener('hashchange', function(e) {
                try {
                    console.log('🔄 DAMP Hash Change:', window.location.pathname + window.location.hash);
                } catch (err) {
                    logError('Hash Change', err);
                }
            });

            // Global error handler for uncaught errors
            window.addEventListener('error', function(e) {
                logError('Global', e.error || e.message, e);
            });
            window.addEventListener('unhandledrejection', function(e) {
                logError('Promise', e.reason, e);
            });
        });
        </script>

    <!-- Debug Logger (Load early for all modules) -->
    <script src="assets/js/debug-logger.js"></script>

    <!-- Firebase Services & Analytics -->
    <script type="module" src="assets/js/firebase-services.js"></script>
    <script type="module" src="assets/js/damp-analytics-events.js"></script>
    
    <!-- Universal Cart Integration (for product cards on homepage) -->
    <script src="assets/js/universal-cart-integration.js"></script>
    
    <!-- Enhanced GA4 Tracking - UTM, Key Events, Click Tracking -->
    <script src="assets/js/analytics/enhanced-ga4-tracking.js"></script>

    <!-- Service Worker Registration handled by service-worker-registration.js above -->

    <!-- Analytics and AdSense (Deferred for Performance) -->
    <script>
        // Defer analytics and ads loading for better performance
        function loadAnalyticsAndAds() {
            // Load Google Analytics
            const gtag = document.createElement('script');
            gtag.async = true;
            gtag.src = 'https://www.googletagmanager.com/gtag/js?id=G-YW2BN4SVPQ';
            document.head.appendChild(gtag);

            gtag.onload = function() {
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'G-YW2BN4SVPQ', {
                    debug_mode: window.location.hostname === 'localhost',
                    send_page_view: false // Disable auto page_view to prevent duplicates - handled by enhanced tracking
                });

                // Note: page_view is now tracked by enhanced-ga4-tracking.js to prevent duplicates
                console.log('✅ Firebase Analytics loaded deferred');
            };

            // Load AdSense
            const adsense = document.createElement('script');
            adsense.async = true;
            adsense.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3639153716376265';
            adsense.crossOrigin = 'anonymous';
            document.head.appendChild(adsense);

            adsense.onload = function() {
                console.log('✅ AdSense loaded deferred');
            };
        }

        // Load analytics and ads after page interaction or timeout
        let analyticsLoaded = false;
        function triggerAnalyticsLoad() {
            if (analyticsLoaded) return;
            analyticsLoaded = true;
            loadAnalyticsAndAds();
        }

        // Load on first user interaction
        ['mousedown', 'touchstart', 'keydown', 'scroll'].forEach(event => {
            document.addEventListener(event, triggerAnalyticsLoad, { once: true, passive: true });
        });

        // Fallback: Load after 3 seconds
        setTimeout(triggerAnalyticsLoad, 3000);
    </script>
</body>
</html>