<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PodMod - AI-Powered Podcast Assistant | Real-Time Media and Information Retrieval</title>
    <meta name="description" content="PodMod provides AI-powered podcast assistance with real-time media and information retrieval, redefining the personal AI assistant experience for podcast creators.">
    <meta name="keywords" content="AI-Powered Podcast Assistant, real-time media retrieval, podcast AI assistant, information retrieval, podcast production tool, podcast content research">
    <meta name="author" content="PodMod">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.podmod.ai/">
    
    <!-- Prevent Flash of Unstyled Content -->
    <style>
        /* Ensure we scroll to top */
        html, body { scroll-behavior: auto !important; }
        body { overflow-anchor: none; }
    </style>
    
    <!-- Preloaded Critical CSS -->
    <style>
        /* Basic styling to prevent FOUC */
        body {
            font-family: 'DM Sans', 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            color: #333333;
            scroll-behavior: smooth;
            min-height: 100vh;
            scroll-padding-top: 0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.1rem 0; /* Updated to match optimized CSS */
            position: relative;
            z-index: 100;
        }
        
        header .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            max-width: 280px;
            height: auto;
        }
        
        .social-banner {
            background-color: #5B3AFF;
            color: white;
            padding: 0.1rem 0; /* Updated to match optimized CSS */
        }
        
        .social-banner .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            color: white;
            font-size: 1.1rem;
        }
    </style>
    
    <!-- Search Engine Optimization -->
    <meta property="og:title" content="PodMod - AI-Powered Podcast Assistant | Real-Time Media and Information Retrieval">
    <meta property="og:description" content="Never miss a moment with PodMod's real-time media and information retrieval. Discover how we're redefining the personal AI assistant for podcasters.">
    <meta property="og:image" content="static/images/podmod-blue.png">
    <meta property="og:url" content="https://podmod.app">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- Favicon - Enhanced for Google Search Display -->
    <link rel="icon" href="favicon.ico" sizes="any">
    <link rel="icon" type="image/png" href="static/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="static/favicon/favicon-16x16.png" sizes="16x16">
    <link rel="apple-touch-icon" href="static/favicon/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="static/site.webmanifest">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" type="text/css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="static/css/style.css" type="text/css">
    <link rel="stylesheet" href="static/css/blog.css" type="text/css">
    <link rel="stylesheet" href="static/css/custom/essential-fixes.css" type="text/css">
    <link rel="stylesheet" href="static/css/custom/targeted-changes.css" type="text/css">
    
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="header-top">
                    <a href="./">
                        <img src="static/images/podmod-blue.png" alt="PODMOD Logo" class="logo">
                    </a>
                    <button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <nav>
                    <ul>
                        <li><a href="./" class="active">Home</a></li>
                        <li><a href="about.html" >About</a></li>
                        <li><a href="blog/" >Blog</a></li>
                    </ul>
                    <!-- Mobile-only social links that appear in the dropdown menu -->
                    <div class="mobile-social-links">
                        <a href="https://www.linkedin.com/company/podmodai/about/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://x.com/podmodapp" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://www.instagram.com/podmodapp/" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="https://www.facebook.com/profile.php?id=61573913282436" target="_blank"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </nav>
                <div class="social-links header-social">
                    <a href="https://www.linkedin.com/company/podmodai/about/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                    <a href="https://x.com/podmodapp" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                    <a href="https://www.instagram.com/podmodapp/" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.facebook.com/profile.php?id=61573913282436" target="_blank"><i class="fab fa-facebook-f"></i></a>
                </div>
            </div>
        </div>
    </header>
    
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Your New AI-Powered Podcast Assistant</h1>
            <p>Never miss a moment with real-time media and information retrieval. Discover how PodMod is redefining the personal AI assistant.</p>
            <div class="hero-buttons">
                <a href="about.html" class="learn-more-button">Learn More</a>
                <a href="javascript:void(0)" target="_blank" class="hero-waitlist-button">Join the Waitlist</a>
            </div>
        </div>
    </div>
</section>

<!-- 
PRODUCT SHOWCASE SECTION
This section displays the PodMod application interface to give users a preview 
of what they can expect from the product. It features the main screenshot
positioned prominently to showcase the real-time AI assistance capabilities.
-->
<section class="product-showcase">
    <div class="container">
        <div class="showcase-content">
            <div class="showcase-image">
                <img src="static/images/image.png" alt="PodMod Application Interface - Real-time AI Assistant Dashboard" class="app-screenshot">
            </div>
        </div>
    </div>
</section>

<section class="features">
    <div class="container">
        <div class="features-intro">
            <h2>How PodMod Works</h2>
            <p>PodMod intelligently enhances your podcast as you record, elevating production quality and content engagement.</p>
            <div style="display: flex; align-items: center; justify-content: center; margin: 1.5rem 0;">
                <span style="background-color: rgba(91, 58, 255, 0.1); color: #5B3AFF; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 500;">
                    All processing happens in real-time during your podcast
                </span>
            </div>
        </div>
        <div class="features-container">
            <!-- 
            HOW PODMOD WORKS SECTION 
            This section displays three process cards (Record, Detect, Deliver) that show
            how PodMod works in sequence. The cards are designed to have equal heights
            and maintain responsiveness across all devices.
            -->
            <div class="features-grid">
                <!-- Record Card - First step in the PodMod process -->
                <div class="podmod-process-card">
                    <h3>
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                        Record
                    </h3>
                    <p><strong>Record:</strong> In real time, PodMod transcribes and understands your conversation.</p>
                </div>
                
                <!-- Arrow 1 - Connector between Record and Detect -->
                <div class="process-arrow">
                    <!-- Desktop horizontal arrow -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 24 24" fill="none" stroke="#5B3AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="desktop-arrow">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                    <!-- Mobile vertical arrow -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="40" viewBox="0 0 24 24" fill="none" stroke="#5B3AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mobile-arrow">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <polyline points="5 12 12 19 19 12"></polyline>
                    </svg>
                </div>
                
                <!-- Detect Card - Second step in the PodMod process -->
                <div class="podmod-process-card">
                    <h3>
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Detect
                    </h3>
                    <p><strong>Detect:</strong> AI pinpoints keywords, questions, and trending moments worth amplifying.</p>
                </div>
                
                <!-- Arrow 2 - Connector between Detect and Deliver -->
                <div class="process-arrow">
                    <!-- Desktop horizontal arrow -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 24 24" fill="none" stroke="#5B3AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="desktop-arrow">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                    <!-- Mobile vertical arrow -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="40" viewBox="0 0 24 24" fill="none" stroke="#5B3AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mobile-arrow">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <polyline points="5 12 12 19 19 12"></polyline>
                    </svg>
                </div>
                
                <!-- Deliver Card - Final step in the PodMod process -->
                <div class="podmod-process-card">
                    <h3>
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        Deliver
                    </h3>
                    <p><strong>Deliver:</strong> Instant cards—images, articles, videos, and answers—arrive in your dashboard ready to reference on‑screen.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 
VALUE PROPOSITION SECTION
This section emphasizes the key benefits of using PodMod, highlighting how it eliminates
common pain points in podcast production and improves the overall podcasting experience.
-->
<section class="value-prop" style="background-color: #f9f9ff; padding: 5rem 0;">
    <div class="container">
        <h2 style="line-height: 1.1; text-align: center; margin-bottom: 3rem;">Stop scrambling for references—PodMod brings them to you.</h2>
        <div class="value-points" style="max-width: 900px; margin: 0 auto;">
            <div class="value-point" style="display: flex; align-items: flex-start; margin-bottom: 1.8rem;">
                <div class="value-icon" style="margin-right: 1rem; min-width: 2rem; color: #5B3AFF;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                </div>
                <div class="value-content">
                    <p style="font-size: 1.1rem; line-height: 1.5; margin: 0;"><strong>Uninterrupted flow:</strong> No more awkward pauses or manual searches.</p>
                </div>
            </div>
            <div class="value-point" style="display: flex; align-items: flex-start; margin-bottom: 1.8rem;">
                <div class="value-icon" style="margin-right: 1rem; min-width: 2rem; color: #5B3AFF;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <div class="value-content">
                    <p style="font-size: 1.1rem; line-height: 1.5; margin: 0;"><strong>Audience engagement:</strong> Richer context keeps listeners hooked and sharing.</p>
                </div>
            </div>
            <div class="value-point" style="display: flex; align-items: flex-start; margin-bottom: 1.8rem;">
                <div class="value-icon" style="margin-right: 1rem; min-width: 2rem; color: #5B3AFF;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                        <line x1="8" y1="21" x2="16" y2="21"></line>
                        <line x1="12" y1="17" x2="12" y2="21"></line>
                    </svg>
                </div>
                <div class="value-content">
                    <p style="font-size: 1.1rem; line-height: 1.5; margin: 0;"><strong>Production polish:</strong> Real‑time content means fewer post‑edit fixes.</p>
                </div>
            </div>
            <div class="value-point" style="display: flex; align-items: flex-start; margin-bottom: 1.8rem;">
                <div class="value-icon" style="margin-right: 1rem; min-width: 2rem; color: #5B3AFF;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <div class="value-content">
                    <p style="font-size: 1.1rem; line-height: 1.5; margin: 0;"><strong>Validate claims:</strong> Back-up your statements to increase accuracy and build audience trust.</p>
                </div>
            </div>
            <div class="value-point" style="display: flex; align-items: flex-start; margin-bottom: 1.8rem;">
                <div class="value-icon" style="margin-right: 1rem; min-width: 2rem; color: #5B3AFF;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
                    </svg>
                </div>
                <div class="value-content">
                    <p style="font-size: 1.1rem; line-height: 1.5; margin: 0;"><strong>Thought Leadership:</strong> Ensure 360 degree coverage of any topic.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 
PODMOD CONTENT SHOWCASE SECTION - THIS IS THE SECTION FROM YOUR SCREENSHOT
This section demonstrates the four types of content that PodMod provides in real-time:
Images, Articles, Videos, and AI Answers. Each content type is represented with 
a mockup image showing how it appears in the PodMod interface during recording.
-->
<section class="podmod-showcase" style="background-color: #ffffff; padding: 5rem 0;">
    <div class="container">
        <!-- Section Title -->
        <div class="showcase-intro" style="text-align: center; margin-bottom: 4rem;">
            <h2 style="line-height: 1.1; margin-bottom: 1rem;">PodMod pulls up...</h2>
        </div>
        
        <!-- Content Grid -->
        <div class="showcase-grid">
            <!-- Images Card -->
            <div class="showcase-card">
                <div class="showcase-card-header">
                    Images
                </div>
                <div class="showcase-card-image">
                    <img src="static/images/images.png" alt="PodMod Images Interface - Visual content suggestions">
                </div>
            </div>
            
            <!-- Articles Card -->
            <div class="showcase-card">
                <div class="showcase-card-header">
                    Articles
                </div>
                <div class="showcase-card-image">
                    <img src="static/images/web_articles.png" alt="PodMod Articles Interface - Research articles and sources">
                </div>
            </div>
            
            <!-- Videos Card -->
            <div class="showcase-card">
                <div class="showcase-card-header">
                    Videos
                </div>
                <div class="showcase-card-image">
                    <img src="static/images/videos.png" alt="PodMod Videos Interface - Relevant video content">
                </div>
            </div>
            
            <!-- AI Answers Card -->
            <div class="showcase-card">
                <div class="showcase-card-header">
                    AI Answers
                </div>
                <div class="showcase-card-image">
                    <img src="static/images/answers.png" alt="PodMod AI Answers Interface - Intelligent responses and facts">
                </div>
            </div>
        </div>
        
        <!-- Closing Statement -->
        <div class="showcase-closing" style="text-align: center; margin-top: 3rem;">
            <h2 style="font-size: 1.3rem; color: #333; font-weight: 500; line-height: 1.4; max-width: 600px; margin: 0 auto;">...as you record, like a self updating search engine</h2>
        </div>
    </div>
</section>

<!-- 
CALL TO ACTION SECTION
This section provides three pathways for users to engage with PodMod:
1. Early Access - Join the waitlist for priority access
2. Learn More - Discover detailed information about the product
3. Stay Updated - Follow social media for updates and news
-->
<section class="vision">
    <div class="container">
        <h2 style="line-height: 1.1;">Ready to Transform Your Podcast?</h2>
        <p style="max-width: 800px; margin: 0 auto 2rem auto;">Join creators who are elevating their podcast production with PodMod's AI-powered assistance.</p>
        <div class="vision-grid">
            <div class="vision-card">
                <h3>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    Early Access
                </h3>
                <p>Join our waitlist today to be among the first to access PodMod when we launch.</p>
                <div style="margin-top: auto; padding-top: 1rem; display: flex; justify-content: center;">
                    <a href="javascript:void(0)" class="waitlist-button" style="display: inline-block; padding: 0.7rem 1.5rem; font-size: 1rem;">Get Started</a>
                </div>
            </div>
            <div class="vision-card">
                <h3>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Learn More
                </h3>
                <p>Discover how PodMod's production assistance can help your specific podcasting needs.</p>
                <div style="margin-top: auto; padding-top: 1rem; display: flex; justify-content: center;">
                    <a href="about.html" class="learn-more-button" style="display: inline-block; border-color: #5B3AFF; color: #5B3AFF; padding: 0.7rem 1.5rem; font-size: 1rem; background-color: transparent;">About PodMod</a>
                </div>
            </div>
            <div class="vision-card">
                <h3>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    Stay Updated
                </h3>
                <p>Follow us on social media for the latest news, features, and launch information.</p>
                <div style="margin-top: auto; padding-top: 1rem; display: flex; justify-content: center;">
                    <div class="social-links" style="display: flex; justify-content: center; gap: 15px;">
                        <a href="https://www.linkedin.com/company/podmodai/about/" target="_blank" style="font-size: 1.5rem; color: #0077b5;"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://x.com/podmodapp" target="_blank" style="font-size: 1.5rem; color: #000000;"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://www.instagram.com/podmodapp/" target="_blank" style="font-size: 1.5rem; color: #e1306c;"><i class="fab fa-instagram"></i></a>
                        <a href="https://www.facebook.com/profile.php?id=61573913282436" target="_blank" style="font-size: 1.5rem; color: #3b5998;"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 
WAITLIST SECTION - Centralized waitlist section for consistent updates
This component includes the complete waitlist section with social sharing
-->
<section class="waitlist" style="padding: 5rem 0; background-color: #f8f9fa; background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecff 100%); text-align: center;">
    <div class="waitlist-container" style="max-width: 800px; margin: 0 auto; padding: 3rem; background-color: white; border-radius: 20px; box-shadow: 0 15px 40px rgba(91, 58, 255, 0.12); border: 1px solid rgba(91, 58, 255, 0.08);">
        <h2 style="color: #333; margin-bottom: 1.5rem; font-size: 2.5rem;">Join Our Waitlist</h2>
        <p style="color: #555; font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.5rem;">We're currently in beta testing with a limited number of creators. Sign up to be among the first to experience the future of podcasting.</p>
        <p style="color: #333; font-size: 1.15rem; font-weight: 500; margin-bottom: 1rem;">Early access members will receive:</p>
        <div style="max-width: 450px; margin: 0 auto;">
            <ul style="list-style: none; margin: 1.5rem 0 2rem 0; padding: 0; text-align: left;">
                <li style="margin-bottom: 0.8rem; font-size: 1.1rem; display: flex; align-items: center;"><span style="color: #5B3AFF; margin-right: 10px; font-weight: bold; font-size: 1.2rem;">✓</span> Beta Program Priority Access</li>
                <li style="margin-bottom: 0.8rem; font-size: 1.1rem; display: flex; align-items: center;"><span style="color: #5B3AFF; margin-right: 10px; font-weight: bold; font-size: 1.2rem;">✓</span> Founders Pricing Access</li>
                <li style="margin-bottom: 0.8rem; font-size: 1.1rem; display: flex; align-items: center;"><span style="color: #5B3AFF; margin-right: 10px; font-weight: bold; font-size: 1.2rem;">✓</span> Feature Request Priority</li>
            </ul>
            <a href="javascript:void(0)" class="waitlist-button" target="_blank" style="display: block; width: 80%; margin: 0 auto; background-color: #5B3AFF; color: white; font-family: 'DM Sans', sans-serif; font-weight: 700; padding: 1.2rem 2rem; border-radius: 40px; text-decoration: none; font-size: 1.3rem; transition: all 0.3s; box-shadow: 0 8px 20px rgba(91, 58, 255, 0.3);">Join the Waitlist</a>
        </div>
        
        <div class="share-section" style="margin-top: 3rem; border-top: 1px solid #eee; padding-top: 2rem;">
            <h3 style="font-size: 1.4rem; color: #333; margin-bottom: 1rem;">Share PodMod with Friends</h3>
            <div class="share-buttons" style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
                <button class="share-btn linkedin" onclick="shareOnSocial('linkedin')" aria-label="Share on LinkedIn" style="background-color: #0077b5; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; transition: transform 0.3s ease; font-size: 1.1rem;">
                    <i class="fab fa-linkedin-in"></i>
                </button>
                <button class="share-btn twitter" onclick="shareOnSocial('twitter')" aria-label="Share on X (Twitter)" style="background-color: #000000; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; transition: transform 0.3s ease; font-size: 1.1rem;">
                    <i class="fa-brands fa-x-twitter"></i>
                </button>
                <button class="share-btn facebook" onclick="shareOnSocial('facebook')" aria-label="Share on Facebook" style="background-color: #3b5998; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; transition: transform 0.3s ease; font-size: 1.1rem;">
                    <i class="fab fa-facebook-f"></i>
                </button>
                <button class="share-btn instagram" onclick="shareOnSocial('instagram')" aria-label="Share on Instagram" style="background-color: #E4405F; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; transition: transform 0.3s ease; font-size: 1.1rem;">
                    <i class="fab fa-instagram"></i>
                </button>
                <button class="share-btn copy-link" onclick="shareOnSocial('copy')" aria-label="Copy Link" style="background-color: #7b68ee; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; transition: transform 0.3s ease; font-size: 1.1rem;">
                    <i class="fas fa-link"></i>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Social Sharing Script -->
<script type="text/javascript">
function shareOnSocial(platform) {
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent(document.title);
    const text = encodeURIComponent("Check out PodMod - AI-Powered Podcast Assistant with real-time media and information retrieval!");
    
    let shareUrl = "";
    
    switch(platform) {
        case "facebook":
            shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
            break;
        case "twitter":
            shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${text}`;
            break;
        case "linkedin":
            shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}`;
            break;
        case "instagram":
            // Instagram doesn't have a direct sharing URL like other platforms
            // We'll redirect to their profile and copy the link to clipboard
            navigator.clipboard.writeText(window.location.href)
                .then(() => {
                    alert("Link copied to clipboard! Opening Instagram - you can paste this link in your story or post.");
                    window.open("https://www.instagram.com/podmodapp/", "_blank");
                })
                .catch(err => {
                    console.error("Could not copy text: ", err);
                    window.open("https://www.instagram.com/podmodapp/", "_blank");
                });
            return;
        case "whatsapp":
            shareUrl = `https://wa.me/?text=${text} ${url}`;
            break;
        case "email":
            // Email sharing disabled
            return;
        case "copy":
            navigator.clipboard.writeText(window.location.href)
                .then(() => alert("Link copied to clipboard!"))
                .catch(err => console.error("Could not copy text: ", err));
            return;
    }
    
    if (shareUrl) {
        window.open(shareUrl, "_blank", "width=600,height=400");
    }
}
</script>

<!-- 
===================================================
PODMOD STANDARD FOOTER - Three-column layout
This is the standardized footer that should appear 
identically on all pages. All styling is inline to 
ensure consistency when deployed to Cloudflare.
===================================================
-->
<footer style="background-color: #000000 !important; padding: 25px 0 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; margin-top: 0 !important;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 15px;">
        <!-- Three-column layout for wider screens, collapsible on mobile -->
        <div class="footer-columns" style="display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;">
            <!-- Left Column - Logo and Social Links -->
            <div class="footer-column" style="flex: 1; min-width: 200px; padding: 0 10px; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center;">
                <!-- PodMod Logo -->
                <div style="margin-bottom: 15px !important;">
                    <img src="static/images/podmod-blue.png" alt="PODMOD Logo" style="height: 70px !important; max-width: 100% !important; display: inline-block !important;">
                </div>
                
                <!-- Social Media Icons -->
                <div style="display: flex !important; justify-content: center !important; gap: 12px !important; margin-bottom: 15px !important;">
                    <a href="https://www.linkedin.com/company/podmodai/about/" target="_blank" aria-label="Follow us on LinkedIn" style="color: #5B3AFF !important; font-size: 0.8rem !important; background-color: rgba(255, 255, 255, 0.1) !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="https://x.com/podmodapp" target="_blank" aria-label="Follow us on X" style="color: #5B3AFF !important; font-size: 0.8rem !important; background-color: rgba(255, 255, 255, 0.1) !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;">
                        <i class="fa-brands fa-x-twitter"></i>
                    </a>
                    <a href="https://www.instagram.com/podmodapp/" target="_blank" aria-label="Follow us on Instagram" style="color: #5B3AFF !important; font-size: 0.8rem !important; background-color: rgba(255, 255, 255, 0.1) !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.facebook.com/profile.php?id=61573913282436" target="_blank" aria-label="Follow us on Facebook" style="color: #5B3AFF !important; font-size: 0.8rem !important; background-color: rgba(255, 255, 255, 0.1) !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </div>
                
                <!-- Copyright Text -->
                <div style="text-align: center !important;">
                    <p style="color: #999999 !important; font-size: 0.7rem !important; margin: 0 !important;">&copy; 2025 PODMOD. All rights reserved.</p>
                </div>
            </div>
            
            <!-- Middle Column - Recent Posts -->
            <div class="footer-column" style="flex: 1; min-width: 200px; padding: 0 10px; margin-bottom: 20px;">
                <h3 style="color: white !important; font-size: 1rem !important; margin-bottom: 15px !important;">Recent Posts</h3>
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <a href="blog/how-to-start-a-podcast-with-no-experience/" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">Get Started with Podcasting</a>
                    <a href="blog/how-to-monetize-your-podcast/" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">How to Monetize Your Podcast</a>
                    <a href="blog/how-to-improve-your-podcast-audio-quality/" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">Improve Your Audio Quality</a>
                </div>
            </div>
            
            <!-- Right Column - Quick Links -->
            <div class="footer-column" style="flex: 1; min-width: 200px; padding: 0 10px; margin-bottom: 20px;">
                <h3 style="color: white !important; font-size: 1rem !important; margin-bottom: 15px !important;">Quick Links</h3>
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <a href="index.html" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">Home</a>
                    <a href="about.html" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">About</a>
                    <a href="blog/index.html" style="color: #a480ff !important; text-decoration: none !important; font-size: 0.75rem !important; margin-bottom: 8px !important; display: block;">Blog</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript for responsive arrows and interactions -->
<script>
    /**
     * RESPONSIVE ARROW HANDLER FOR "HOW PODMOD WORKS" SECTION
     * 
     * This script handles the display of directional arrows between the process cards.
     * - On desktop: Shows horizontal arrows (Record → Detect → Deliver)
     * - On mobile: Shows vertical arrows (Record ↓ Detect ↓ Deliver)
     * 
     * The responsive behavior is now primarily handled by CSS media queries,
     * but this JavaScript provides additional support for dynamic resizing.
     */
    document.addEventListener('DOMContentLoaded', function() {
        function adjustArrows() {
            // Get references to all arrow elements
            const desktopArrows = document.querySelectorAll('.desktop-arrow');
            const mobileArrows = document.querySelectorAll('.mobile-arrow');
            
            // Check if we're in mobile view (below 768px width)
            if (window.innerWidth < 768) {
                // Mobile layout: vertical arrows, column layout
                desktopArrows.forEach(arrow => arrow.style.display = 'none');
                mobileArrows.forEach(arrow => arrow.style.display = 'block');
                
                // Ensure the features grid uses column layout on mobile
                const featuresGrid = document.querySelector('.features-grid');
                if (featuresGrid) {
                    featuresGrid.style.flexDirection = 'column';
                    featuresGrid.style.alignItems = 'center';
                }
            } else {
                // Desktop layout: horizontal arrows, row layout
                desktopArrows.forEach(arrow => arrow.style.display = 'block');
                mobileArrows.forEach(arrow => arrow.style.display = 'none');
                
                // Ensure the features grid uses row layout on desktop
                const featuresGrid = document.querySelector('.features-grid');
                if (featuresGrid) {
                    featuresGrid.style.flexDirection = 'row';
                    featuresGrid.style.alignItems = 'stretch'; // This ensures equal height cards
                }
            }
        }
        
        // Run the adjustment function when the page loads
        adjustArrows();
        
        // Re-run the adjustment function whenever the window is resized
        // This ensures the arrows display correctly if the user rotates their device
        // or manually resizes their browser window
        window.addEventListener('resize', adjustArrows);
        
        // Additional check after a short delay to ensure everything is properly loaded
        setTimeout(adjustArrows, 100);
    });
</script>

    <!-- Mobile Menu Toggle -->
    <script type="text/javascript">
        // Mobile Menu Toggle
        document.addEventListener("DOMContentLoaded", function() {
            const mobileMenuToggle = document.querySelector(".mobile-menu-toggle");
            const nav = document.querySelector("nav");
            
            if (mobileMenuToggle) {
                mobileMenuToggle.addEventListener("click", function() {
                    nav.classList.toggle("open");
                    mobileMenuToggle.classList.toggle("active");
                });
            }
        });
    </script>

    <!-- Custom JS -->
    <script src="static/js/main.js" type="text/javascript"></script>
    <script src="static/js/particles.js" type="text/javascript"></script>
    
    <!-- Waitlist Form Script - Essential for waitlist button functionality -->
    <script src="static/js/waitlist-form.js" type="text/javascript"></script>
    
</body>
</html> 