<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="icon" type="image/png" href="/Image/main-icon.png">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cocoon - Your Productivity & Accessibility Extension</title>
  <link rel="stylesheet" href="css/styles.css">
  <meta name="google-site-verification" content="qaVed8F___NFeZxWK7puB74jLY66bKSBne8E-4FOn6o" />
  <meta name="msvalidate.01" content="C601A4A7AA71751CE3AAB74D5F1C7C6F" />

  <!-- SEO Meta Tags -->
  <meta name="description"
    content="Cocoon is a free Chrome extension with 30+ productivity and accessibility tools. Block distracting websites, use a Pomodoro timer, customize fonts and colors, reduce sensory overload, and browse with less overwhelm.">
  <meta name="keywords"
    content="chrome extension, productivity, accessibility, website blocker, pomodoro timer, focus mode, ADHD, sensory friendly, browser extension, doom scrolling, site blocker">
  <meta name="author" content="Cocoon">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://cocoon-plugin.com/">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://cocoon-plugin.com/">
  <meta property="og:title" content="Cocoon - Your Productivity & Accessibility Extension">
  <meta property="og:description"
    content="Free Chrome extension with 30+ tools for focus, productivity, and accessible browsing. Block distractions, manage time, and customize your web experience.">
  <meta property="og:site_name" content="Cocoon">
  <meta property="og:image" content="https://cocoon-plugin.com/Image/icon2.png">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Cocoon - Productivity & Accessibility Chrome Extension">
  <meta name="twitter:description"
    content="Free Chrome extension with 30+ tools for focus, productivity, and accessible browsing.">

  <!-- RSS Feed -->
  <link rel="alternate" type="application/rss+xml" title="Cocoon Blog" href="https://cocoon-plugin.com/rss.xml">

  <!-- Schema: WebApplication -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Cocoon",
    "url": "https://cocoon-plugin.com",
    "description": "Free Chrome extension with 30+ productivity and accessibility tools for focus, site blocking, ambient sounds, sensory friendly browsing, and cognitive load reduction.",
    "applicationCategory": "BrowserExtension",
    "operatingSystem": "Chrome",
    "browserRequirements": "Requires Google Chrome",
    "offers": [
      {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD",
        "name": "Free",
        "description": "Basic productivity and accessibility features"
      },
      {
        "@type": "Offer",
        "price": "4.99",
        "priceCurrency": "USD",
        "name": "Premium",
        "description": "Full access to all features, personal assistant, and custom themes",
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "billingDuration": "P1M"
        }
      }
    ],
    "creator": {
      "@type": "Organization",
      "name": "Cocoon",
      "url": "https://cocoon-plugin.com",
      "logo": "https://cocoon-plugin.com/Image/icon2.png"
    },
    "featureList": [
      "Website and Social Media Blocker",
      "Social Media Time Limiter",
      "Doom Scrolling Detection and Prevention",
      "Deep Focus Mode",
      "One Element Focus Mode",
      "Pomodoro Focus Timer with Cross-Tab Persistence",
      "Daily Agenda Planner",
      "To-Do List",
      "Focus Clicker",
      "Brain Dump and Voice Notes",
      "Capture Repository for Quick Notes",
      "Decision Wheel",
      "Color and Contrast Adjustments",
      "High Contrast Mode",
      "Motion Reduction for Animations",
      "Dim Flashing Content",
      "Reading-Friendly Fonts and Font Customization",
      "Line Guide for Reading",
      "Text Simplifier",
      "Layout Simplification",
      "Background Ambient Sounds including Rain Forest Ocean and White Noise",
      "Adaptive Volume Control",
      "Block Unexpected Sounds",
      "Literal Language Translator for Idioms and Sarcasm",
      "Comment Filtering",
      "Pre-written Responses",
      "Sentence Filter",
      "Breathing Coach Overlay",
      "Wellness Check-in",
      "Time Agnostic Mode",
      "Facilitated Keyboard Navigation",
      "Predictable Navigation",
      "Calm Click Visual Feedback",
      "Custom Color Palettes",
      "Theme Customization",
      "Personal AI Assistant with Chat",
      "Knowledge Repository"
    ]
  }
  </script>

  <!-- Schema: FAQPage -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What features are included in Cocoon Free vs Premium?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Cocoon Free includes core productivity and accessibility features like One Element Focus, Social Media Limiter, Deep Focus, Literal Language Translator, Sentence Filter, Pre-written Responses, Adaptive Volume, Block Unexpected Sounds, Keyboard Navigation, Layout Simplification, Predictable Navigation, Reduce Motion, Dim Flashing, Color Contrast Adjustments, Line Guide, and Text Simplifier. Premium ($4.99/month) unlocks full configuration for Site Blocker, Visual Timer, To-Do List, Daily Agenda, Font Customizer, and Breathing Coach, plus exclusive features like Focus Clicker, Custom Color Palettes, Calm Click Feedback, Decision Wheel, Theme Customization, and a Personal AI Assistant with chat, custom visuals, games, and custom personality."
        }
      },
      {
        "@type": "Question",
        "name": "How secure are payments for Cocoon Premium?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "All payments are processed securely through Stripe, an industry leader in payment security. Cocoon never sees or stores your payment information. Everything is handled by Stripe's encrypted, PCI-compliant systems."
        }
      },
      {
        "@type": "Question",
        "name": "Can I cancel my Cocoon subscription anytime?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes, you can cancel your Premium subscription at any time. You will continue to have access to Premium features until the end of your current billing period, then your account will automatically switch to the Free plan."
        }
      }
    ]
  }
  </script>

  <!-- Schema: Organization -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Cocoon",
    "url": "https://cocoon-plugin.com",
    "logo": "https://cocoon-plugin.com/Image/icon2.png",
    "description": "Cocoon creates browser tools for productivity and accessibility, helping people browse the internet with less overwhelm.",
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "support@cocoon-plugin.com",
      "contactType": "customer support"
    },
    "sameAs": [
      "https://www.instagram.com/cocoon.plugin",
      "https://www.tiktok.com/@cocoonplugin",
      "https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb"
    ]
  }
  </script>
</head>

<body>

  <!-- Hidden Cats -->
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🐱%3C/text%3E%3C/svg%3E"
    class="hidden-cat" id="cat1" onclick="showCatMessage('Meow! You found me! 🎉')">
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E😸%3C/text%3E%3C/svg%3E"
    class="hidden-cat" id="cat2" onclick="showCatMessage('Purrfect! Keep exploring! 🐾')">
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E😺%3C/text%3E%3C/svg%3E"
    class="hidden-cat" id="cat3" onclick="showCatMessage('You have excellent cat-finding skills! 🏆')">

  <!-- Feature Control Panel -->
  <div id="feature-control-panel">
    <div class="control-helper-text" data-i18n-cocoonwebsite="control.helper">Click to disable</div>
    <div class="active-features" id="active-features-list">
      <!-- Features will be populated here -->
    </div>
  </div>

  <!-- Focus Arrow -->
  <div class="focus-arrow" id="focus-arrow" data-i18n-cocoonwebsite="focus.scroll">Scroll down to see focus mode in
    action!</div>

  <!-- Floating UIs -->
  <div id="floating-timer">
    <div class="timer-status" data-i18n-cocoonwebsite="timer.focus">Focus Timer</div>
    <div class="timer-display" id="timer-display">25:00</div>
    <div class="timer-controls">
      <button class="timer-button" onclick="startTimer()" id="start-btn"
        data-i18n-cocoonwebsite="timer.start">Start</button>
      <button class="timer-button" onclick="pauseTimer()" id="pause-btn" style="display: none;"
        data-i18n-cocoonwebsite="timer.pause">Pause</button>
      <button class="timer-button" onclick="resetTimer()" data-i18n-cocoonwebsite="timer.reset">Reset</button>
    </div>
  </div>

  <div id="floating-notes">
    <button class="notes-button" onclick="toggleNotesPanel()">📝</button>
    <div class="notes-panel" id="notes-panel">
      <div class="notes-header" data-i18n-cocoonwebsite="notes.header">🧠 Quick Brain Dump</div>
      <div class="notes-content">
        <textarea class="notes-textarea" id="notes-textarea"
          data-i18n-cocoonwebsite-placeholder="notes.placeholder"></textarea>
        <div class="notes-controls">
          <button class="voice-note-btn" onclick="toggleVoiceNote()" id="voice-btn"
            data-i18n-cocoonwebsite="notes.voice">🎙️
            Voice</button>
          <button class="save-note-btn" onclick="saveNote()" data-i18n-cocoonwebsite="notes.save">💾 Save</button>
          <button class="undo-note-btn" onclick="undoLastNote()" id="undo-btn" style="display: none;"
            data-i18n-cocoonwebsite="notes.undo">↶ Undo</button>
        </div>
        <div class="notes-list" id="notes-list"></div>
      </div>
    </div>
  </div>

  <div id="floating-accessibility">
    <div class="accessibility-header" data-i18n-cocoonwebsite="accessibility.header">♿ Accessibility</div>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="accessibility.contrast">Contrast</label>
      <div class="slider-container">
        <input type="range" id="contrast-slider" min="50" max="200" value="100" oninput="updateAccessibility()">
        <span class="slider-value" id="contrast-value">100%</span>
      </div>
    </div>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="accessibility.saturation">Saturation</label>
      <div class="slider-container">
        <input type="range" id="saturation-slider" min="0" max="150" value="100" oninput="updateAccessibility()">
        <span class="slider-value" id="saturation-value">100%</span>
      </div>
    </div>
  </div>

  <div id="floating-background-noise">
    <div class="noise-header" data-i18n-cocoonwebsite="noise.header">🔊 Background Noise</div>
    <select class="noise-type-selector" id="noise-selector">
      <option value="" data-i18n-cocoonwebsite="noise.select">Select ambient sound...</option>
      <option value="rain" data-i18n-cocoonwebsite="noise.rain">🌧️ Rain</option>
      <option value="forest" data-i18n-cocoonwebsite="noise.forest">🌲 Forest</option>
      <option value="ocean" data-i18n-cocoonwebsite="noise.ocean">🌊 Ocean Waves</option>
      <option value="white" data-i18n-cocoonwebsite="noise.white">📻 White Noise</option>
      <option value="coffee" data-i18n-cocoonwebsite="noise.coffee">☕ Coffee Shop</option>
    </select>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="noise.volume">Volume</label>
      <div class="slider-container">
        <input type="range" id="noise-volume" min="0" max="100" value="30" oninput="updateNoiseVolume()">
        <span class="slider-value" id="noise-volume-value">30%</span>
      </div>
    </div>
    <div class="noise-controls">
      <button class="noise-btn" onclick="playNoise()" id="play-noise" data-i18n-cocoonwebsite="noise.play">▶️
        Play</button>
      <button class="noise-btn" onclick="stopNoise()" id="stop-noise" data-i18n-cocoonwebsite="noise.stop">⏹️
        Stop</button>
    </div>
  </div>

  <!-- Floating Site Blocker UI -->
  <div id="floating-site-blocker">
    <div class="blocker-header" data-i18n-cocoonwebsite="blocker.header">🚫 Site Blocker</div>
    <div class="blocked-sites-list" id="blocked-sites-list">
      <div class="site-item">
        <span>📺 youtube.com</span>
        <button onclick="removeSite('youtube.com')" class="remove-btn">×</button>
      </div>
      <div class="site-item">
        <span>📱 instagram.com</span>
        <button onclick="removeSite('instagram.com')" class="remove-btn">×</button>
      </div>
      <div class="site-item">
        <span>🐦 twitter.com</span>
        <button onclick="removeSite('twitter.com')" class="remove-btn">×</button>
      </div>
    </div>
    <div class="add-site-container">
      <input type="text" id="new-site-input" data-i18n-cocoonwebsite-placeholder="blocker.placeholder"
        class="site-input">
      <button onclick="addBlockedSite()" class="add-site-btn" data-i18n-cocoonwebsite="blocker.add">+ Block</button>
    </div>
    <div class="blocker-controls">
      <button class="blocker-btn active" onclick="toggleBlocker()" id="blocker-toggle"
        data-i18n-cocoonwebsite="blocker.active">🔒
        Blocking Active</button>
      <button class="blocker-btn" onclick="pauseBlocker()" id="blocker-pause" data-i18n-cocoonwebsite="blocker.pause">⏸️
        Pause
        5min</button>
    </div>
  </div>

  <!-- Floating Font Controls UI -->
  <div id="floating-font-controls">
    <div class="font-header" data-i18n-cocoonwebsite="font.header">🔤 Font Controls</div>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="font.family">Font Family</label>
      <select class="font-family-selector" id="font-family-selector" onchange="updateFontFamily()">
        <option value="default" data-i18n-cocoonwebsite="font.default">System Default</option>
        <option value="Arial, sans-serif">Arial</option>
        <option value="Georgia, serif">Georgia</option>
        <option value="'Times New Roman', serif">Times New Roman</option>
        <option value="'Comic Sans MS', cursive">Comic Sans MS</option>
        <option value="'Courier New', monospace">Courier New</option>
        <option value="OpenDyslexic, sans-serif" data-i18n-cocoonwebsite="font.friendly">Reading-friendly Font</option>
      </select>
    </div>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="font.size">Font Size</label>
      <div class="slider-container">
        <input type="range" id="font-size-main" min="80" max="200" value="100" oninput="updateFontSize()">
        <span class="slider-value" id="font-size-main-value">100%</span>
      </div>
    </div>
    <div class="control-group">
      <label data-i18n-cocoonwebsite="font.lineHeight">Line Height</label>
      <div class="slider-container">
        <input type="range" id="line-height-slider" min="100" max="250" value="150" oninput="updateLineHeight()">
        <span class="slider-value" id="line-height-value">150%</span>
      </div>
    </div>
    <div class="font-controls">
      <button class="font-btn" onclick="resetFontSettings()" id="font-reset" data-i18n-cocoonwebsite="font.reset">↺
        Reset</button>
      <button class="font-btn" onclick="toggleReadingMode()" id="reading-mode" data-i18n-cocoonwebsite="font.reading">📖
        Reading
        Mode</button>
    </div>
  </div>

  <div id="focus-overlay" class="focus-overlay"></div>

  <!-- Header -->
  <header>
    <nav>
      <a href="#" class="logo">
        <img src="/Image/icon2.png" alt="Cocoon">
        Cocoon
      </a>
      <div class="nav-right">
        <ul class="nav-links">
          <li><a href="#features" data-i18n-cocoonwebsite="nav.features">Features</a></li>
          <li><a href="#pricing" data-i18n-cocoonwebsite="nav.pricing">Pricing</a></li>
          <li><a href="#testimonials" data-i18n-cocoonwebsite="nav.reviews">Reviews</a></li>
          <li><a href="#founder" data-i18n-cocoonwebsite="nav.founder">Founder Message</a></li>
          <li><a href="/blog" data-i18n-cocoonwebsite="nav.blog">Blog</a></li>
        </ul>
        <a href="/dashboard" class="cta-button" data-i18n-cocoonwebsite="nav.dashboard">Dashboard</a>
        <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb?utm_source=item-share-cb"
          target="_blank" class="cta-button" data-i18n-cocoonwebsite="nav.join">Join the Journey</a>
      </div>
    </nav>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1 id="main-title" onclick="triggerTitleFall()" style="cursor: pointer; transition: all 0.3s ease;"
        data-i18n-cocoonwebsite="hero.title">Block Distractions. Stay Focused. Browse Your Way.</h1>
      <p class="subtitle" data-i18n-cocoonwebsite="hero.subtitle">30+ free productivity and accessibility tools in one
        Chrome extension</p>
      <p data-i18n-cocoonwebsite="hero.description">Site blocker, focus timer, ambient sounds, sensory controls, and
        more. Built for people who actually struggle online.</p>
      <div class="hero-actions">
        <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb?utm_source=item-share-cb"
          target="_blank" class="primary-cta" data-i18n-cocoonwebsite="hero.primary"
          onclick="trackAffiliateAction('signup')">Use Cocoon - For Free</a>
        <button onclick="enableAllDemos()" class="secondary-cta" data-i18n-cocoonwebsite="hero.demo">Try Live
          Demo</button>
      </div>
    </div>
  </section>

  <!-- Social Proof -->
  <section class="social-proof">
    <h3 data-i18n-cocoonwebsite="social.title">Trusted by Leading AI Assistants & Me</h3>
    <div class="trust-logos">
      <div class="trust-logo" data-i18n-cocoonwebsite="social.rating">I Give It ⭐⭐⭐⭐⭐</div>
      <div class="trust-logo"><strike data-i18n-cocoonwebsite="social.users">50K+ Active Users</strike> <span
          data-i18n-cocoonwebsite="social.me">just me</span></div>
      <div class="trust-logo" data-i18n-cocoonwebsite="social.friendly">User friendly</div>
    </div>
  </section>

  <!-- Problems Section -->
  <section class="problems">
    <div class="problems-container">
      <h2 data-i18n-cocoonwebsite="problems.title">Tired of Digital Chaos Ruining Your Focus?</h2>
      <p class="subtitle" data-i18n-cocoonwebsite="problems.subtitle">You're not alone. These pain points destroy
        productivity and
        peace of mind for millions every day:</p>
      <div class="pain-points">
        <div class="pain-point">
          <div class="icon">😵‍💫</div>
          <h3 data-i18n-cocoonwebsite="problems.overwhelming.title">Overwhelming Websites</h3>
          <p data-i18n-cocoonwebsite="problems.overwhelming.desc">Too many flashing ads, autoplaying videos, and
            cluttered interfaces
            that derail your concentration.</p>
        </div>

        <div class="pain-point">
          <div class="icon">⏰</div>
          <h3 data-i18n-cocoonwebsite="problems.time.title">Time Blindness & Procrastination</h3>
          <p data-i18n-cocoonwebsite="problems.time.desc">Hours disappear into social media scrolls and rabbit holes
            while important
            tasks remain undone, creating stress and guilt.</p>
        </div>

        <div class="pain-point">
          <div class="icon">🤯</div>
          <h3 data-i18n-cocoonwebsite="problems.cognitive.title">Cognitive Overload</h3>
          <p data-i18n-cocoonwebsite="problems.cognitive.desc">Your brain feels tired from processing too much
            information, making it
            impossible to think clearly or make decisions.</p>
        </div>

        <div class="pain-point">
          <div class="icon">😤</div>
          <h3 data-i18n-cocoonwebsite="problems.barriers.title">Accessibility Barriers</h3>
          <p data-i18n-cocoonwebsite="problems.barriers.desc">Websites ignore user needs with harsh colors, tiny fonts,
            and confusing
            navigation that make browsing painful.</p>
        </div>

        <!-- Mental Health card -->
        <div class="pain-point">
          <div class="icon">💔</div>
          <h3 data-i18n-cocoonwebsite="problems.mental.title">Mental Health Impact</h3>
          <p data-i18n-cocoonwebsite="problems.mental.desc">Constant digital overwhelm increases anxiety, depression,
            and burnout,
            affecting your real-world relationships and well-being.</p>
        </div>

        <!-- Separate cat therapy card that only appears on hover -->
        <div class="pain-point cat-therapy-card"
          onmouseenter="showCatMessage('🎉 Congratulations! You found the secret cat therapy! Sometimes the internet just needs more cats! 🐱✨')">
          <div class="icon cat-container"
            style="position: relative; width: 100%; height: 250px; overflow: hidden; border-radius: 16px; margin-bottom: 1rem;">
            <img src="Image/cat2.gif" alt="Hidden Cat"
              style="width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 16px; background-color: white;">
          </div>
          <h3 data-i18n-cocoonwebsite="problems.cat.title">Secret Cat Therapy</h3>
          <p data-i18n-cocoonwebsite="problems.cat.desc">Sometimes you just need a cute cat to remind you that the
            internet can still
            be a wonderful place. 🐱</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Solutions Section -->
  <section id="features" class="solutions">
    <div class="solutions-container">
      <h2 data-i18n-cocoonwebsite="solutions.title">An extension that makes your browser feel safe!</h2>
      <p class="subtitle" data-i18n-cocoonwebsite="solutions.subtitle">Cocoon transforms your browsing experience with
        gentle, intelligent features designed by someone who truly understands the struggle.</p>

      <!-- Feature 1: Focus Mode (Image Left, Content Right) -->
      <div class="feature-showcase">
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/Block-Websites.gif" alt="Focus Mode Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
        <div class="feature-content">
          <h3>🎯 <span data-i18n-cocoonwebsite="solutions.focus.title">Complete Website and Social Media Control</span>
          </h3>
          <p data-i18n-cocoonwebsite="solutions.focus.desc">Control your time on social media websites. You choose how
            long you want to use websites for and Cocoon helps you stay accountable</p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.focus.feat1">✨ Adjustable Social Media Limit</li>
            <li data-i18n-cocoonwebsite="solutions.focus.feat2">🧠 Choose which websites to block</li>
            <li data-i18n-cocoonwebsite="solutions.focus.feat3">🌐 Works on ALL websites and Social Media sites</li>
            <li data-i18n-cocoonwebsite="solutions.focus.feat4">➕ Doom Scrolling detection and prevention</li>
          </ul>
        </div>
      </div>

      <!-- Feature 2: Accessibility (Content Left, Image Right) -->
      <div class="feature-showcase reverse">
        <div class="feature-content">
          <h3>♿ <span data-i18n-cocoonwebsite="solutions.accessibility.title">Sensory-Friendly Controls</span></h3>
          <p data-i18n-cocoonwebsite="solutions.accessibility.desc">Customize colors, contrast, motion, and fonts to
            match your sensory needs. No more eye strain or visual overwhelm.</p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.accessibility.feat1">🎨 Real-time color adjustments</li>
            <li data-i18n-cocoonwebsite="solutions.accessibility.feat2">🚫 Motion reduction settings</li>
            <li data-i18n-cocoonwebsite="solutions.accessibility.feat3">📖 Reading-friendly fonts</li>
            <li data-i18n-cocoonwebsite="solutions.accessibility.feat4">🔆 High contrast modes</li>
          </ul>
          <button onclick="showFeature('accessibility')" class="try-feature-btn"
            data-i18n-cocoonwebsite="solutions.accessibility.try">Try Accessibility Controls</button>
        </div>
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/Accessibility-Tools.gif" alt="Accessibility Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
      </div>

      <!-- Feature 3: Notes (Image Left, Content Right) -->
      <div class="feature-showcase">
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/brain-dump.gif" alt="Brain Dump Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
        <div class="feature-content">
          <h3>🧠 <span data-i18n-cocoonwebsite="solutions.notes.title">Brain Dump & Memory Aid</span></h3>
          <p data-i18n-cocoonwebsite="solutions.notes.desc">Capture fleeting thoughts instantly with voice notes and
            quick text. Never lose an important idea again.</p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.notes.feat1">🎙️ Voice recording capability</li>
            <li data-i18n-cocoonwebsite="solutions.notes.feat2">📝 Auto bullet-point formatting</li>
            <li data-i18n-cocoonwebsite="solutions.notes.feat3">⚡ Instant note saving</li>
            <li data-i18n-cocoonwebsite="solutions.notes.feat4">🔍 Searchable note history</li>
          </ul>
          <button onclick="showFeature('notes')" class="try-feature-btn"
            data-i18n-cocoonwebsite="solutions.notes.try">Try Brain Dump</button>
        </div>
      </div>

      <!-- Feature 4: Communication (Content Left, Image Right) -->
      <div class="feature-showcase reverse">
        <div class="feature-content">
          <h3>💬 <span data-i18n-cocoonwebsite="solutions.communication.title">Communication Support</span></h3>
          <p><span data-i18n-cocoonwebsite="solutions.communication.desc1">Understand</span> <span
              class="literal-highlight"><span data-i18n-cocoonwebsite="solutions.communication.idiom">idioms and
                sarcasm</span><span class="literal-tool-tip"
                data-i18n-cocoonwebsite="solutions.communication.tooltip">Figures of speech explained
                clearly</span></span> <span data-i18n-cocoonwebsite="solutions.communication.desc2">with our literal
              language translator. Navigate social media safely.</span></p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.communication.feat1">💡 Idiom translation tooltips</li>
            <li data-i18n-cocoonwebsite="solutions.communication.feat3">🛡️ Comment filtering</li>
            <li data-i18n-cocoonwebsite="solutions.communication.feat4">📝 Pre-written responses</li>
          </ul>
          <button onclick="enableLiteralLanguage()" class="try-feature-btn"
            data-i18n-cocoonwebsite="solutions.communication.try">Try Communication Aid</button>
        </div>
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/communication-support.gif" alt="Communication Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
      </div>

      <!-- Feature 5: Soundscapes (Image Left, Content Right) -->
      <div class="feature-showcase">
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/audio-support.gif" alt="Sound Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
        <div class="feature-content">
          <h3>🔊 <span data-i18n-cocoonwebsite="solutions.soundscapes.title">Calming Soundscapes</span></h3>
          <p data-i18n-cocoonwebsite="solutions.soundscapes.desc">Block jarring sounds and replace them with peaceful
            background noise. Create your perfect audio environment.</p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.soundscapes.feat1">🌿 Nature sounds library</li>
            <li data-i18n-cocoonwebsite="solutions.soundscapes.feat2">📻 White/pink/brown noise</li>
            <li data-i18n-cocoonwebsite="solutions.soundscapes.feat3">🔊 Volume normalization</li>
            <li data-i18n-cocoonwebsite="solutions.soundscapes.feat4">🚫 Sound blocking filters</li>
          </ul>
          <button onclick="showFeature('noise')" class="try-feature-btn"
            data-i18n-cocoonwebsite="solutions.soundscapes.try">Try Background Sounds</button>
        </div>
      </div>

      <!-- Feature 6: Timer (Content Left, Image Right) -->
      <div class="feature-showcase reverse">
        <div class="feature-content">
          <h3>⏱️ <span data-i18n-cocoonwebsite="solutions.timer.title">Gentle Time Management</span></h3>
          <p data-i18n-cocoonwebsite="solutions.timer.desc">Draggable Pomodoro timer that follows you across tabs.
            Visual progress tracking without pressure or stress.</p>
          <ul class="solution-features">
            <li data-i18n-cocoonwebsite="solutions.timer.feat1">⚙️ Customizable work/break periods</li>
            <li data-i18n-cocoonwebsite="solutions.timer.feat2">👁️ Visual and audio cues</li>
            <li data-i18n-cocoonwebsite="solutions.timer.feat3">🔗 Cross-tab persistence</li>
          </ul>
          <button onclick="showFeature('timer')" class="try-feature-btn"
            data-i18n-cocoonwebsite="solutions.timer.try">Try Focus Timer</button>
        </div>
        <div class="feature-image">
          <div class="screenshot-3d">
            <img src="Image/time-management.gif" alt="Timer Demo"
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Focus Demo Section -->
  <div class="focus-demo-text" id="focus-demo-text">
    <h3 data-i18n-cocoonwebsite="demo.title">🎯 Experience Focus Mode Right Here</h3>
    <p data-i18n-cocoonwebsite="demo.desc1">This paragraph demonstrates how focus mode works. When you click "Try Focus
      Mode" below,
      everything else will dim while this content remains highlighted and easy to read.</p>
    <p><span data-i18n-cocoonwebsite="demo.desc2">You can also test our literal language feature.</span> <span
        class="literal-highlight"><span data-i18n-cocoonwebsite="demo.idiom1">It's raining cats and dogs</span><span
          class="literal-tool-tip" data-i18n-cocoonwebsite="demo.tooltip1">It's raining very heavily</span></span> <span
        data-i18n-cocoonwebsite="demo.desc3">outside, but don't worry -</span> <span class="literal-highlight"><span
          data-i18n-cocoonwebsite="demo.idiom2">that's just a piece of cake</span><span class="literal-tool-tip"
          data-i18n-cocoonwebsite="demo.tooltip2">that's very easy</span></span> <span
        data-i18n-cocoonwebsite="demo.desc4">to understand with our
        translator!</span></p>
    <p><strong data-i18n-cocoonwebsite="demo.try">Try it:</strong> <button onclick="toggleFocusMode()"
        class="try-feature-btn" style="width: auto; margin: 0 0.5rem;" data-i18n-cocoonwebsite="demo.toggleFocus">Toggle
        Focus Mode</button> <span data-i18n-cocoonwebsite="demo.or">or</span> <button onclick="enableLiteralLanguage()"
        class="try-feature-btn" style="width: auto; margin: 0 0.5rem;"
        data-i18n-cocoonwebsite="demo.enableLiteral">Enable Literal Language</button></p>
  </div>

  <!-- All Features Section - SEO: crawlable feature list for search engines and AI -->
  <section id="all-features"
    style="padding: 4rem 2rem; background: linear-gradient(135deg, #f0fff9 0%, #ffffff 50%, #f0fff9 100%);">
    <div style="max-width: 1200px; margin: 0 auto; text-align: center;">
      <h2 style="color: var(--primary-dark); font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.75rem;">30+ Tools.
        One Extension.</h2>
      <p
        style="color: var(--neutral-600); max-width: 650px; margin: 0 auto 3rem; font-size: 1.05rem; line-height: 1.6;">
        Every tool Cocoon offers to help you focus, stay productive, and browse accessibly: all built into a single
        lightweight Chrome extension.
      </p>

      <div
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; text-align: left;">

        <!-- Focus & Blocking -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Focus and Blocking</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Site Blocker</strong>: block distracting websites on a schedule.<br>
            <strong>Social Media Time Limiter</strong>: set daily time limits on social media.<br>
            <strong>Doom Scroll Prevention</strong>: detect and stop endless scrolling.<br>
            <strong>Deep Focus Mode</strong>: dim the entire page except what you're reading.<br>
            <strong>One Element Focus</strong>: highlight a single element to eliminate clutter.<br>
            <strong>Focus Clicker</strong>: gamified click-to-focus tool. <em>(Premium)</em>
          </p>
        </div>

        <!-- Productivity -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Productivity</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Pomodoro Focus Timer</strong>: draggable timer that follows you across tabs.<br>
            <strong>Daily Agenda</strong>: plan your day without leaving your browser.<br>
            <strong>To-Do List</strong>: simple task management built in.<br>
            <strong>Brain Dump & Voice Notes</strong>: capture ideas instantly with text or voice.<br>
            <strong>Capture Repository</strong>: save and search notes later.<br>
            <strong>Decision Wheel</strong>: spin to decide when you're stuck. <em>(Premium)</em>
          </p>
        </div>

        <!-- Communication -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Communication Support</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Literal Language Translator</strong>: explains idioms and sarcasm in plain language.<br>
            <strong>Comment Filter</strong>: hide harsh or confrontational comments.<br>
            <strong>Sentence Filter</strong>: filter confusing language patterns.<br>
            <strong>Pre-written Responses</strong>: reply templates for difficult conversations.
          </p>
        </div>

        <!-- Sound Management -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Sound Management</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Background Ambient Sounds</strong>: rain, forest, ocean waves, white noise, coffee shop.<br>
            <strong>Adaptive Volume Control</strong>: normalize loud and quiet audio automatically.<br>
            <strong>Block Unexpected Sounds</strong>: prevent jarring audio from autoplaying.
          </p>
        </div>

        <!-- Accessibility & Reading -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Accessibility and Reading</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Color & Contrast Adjustments</strong>: customize brightness, contrast, and saturation.<br>
            <strong>Reduce Motion</strong>: stop animations and auto-playing media.<br>
            <strong>Dim Flashing Content</strong>: reduce photosensitive triggers.<br>
            <strong>Font Customizer</strong>: change font family, size, and line height on any site.<br>
            <strong>Line Guide</strong>: a reading ruler to follow text line by line.<br>
            <strong>Text Simplifier</strong>: simplify complex text into plain language.<br>
            <strong>Layout Simplification</strong>: clean up cluttered website layouts.
          </p>
        </div>

        <!-- Wellness & Navigation -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Wellness and Navigation</h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Breathing Coach Overlay</strong>: guided breathing exercises in your browser.<br>
            <strong>Wellness Check-in</strong>: periodic reminders to check how you're feeling.<br>
            <strong>Time Agnostic Mode</strong>: hide clocks to reduce time anxiety.<br>
            <strong>Calm Click Feedback</strong>: gentle visual feedback on clicks. <em>(Premium)</em><br>
            <strong>Keyboard Navigation</strong>: browse any site without a mouse.<br>
            <strong>Predictable Navigation</strong>: consistent navigation across websites.
          </p>
        </div>

        <!-- Personalization -->
        <div
          style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(132,228,200,0.2);">
          <h3 style="color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 1rem;">Personalization <span
              style="font-size: 0.75rem; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 0.15rem 0.5rem; border-radius: 8px; vertical-align: middle;">Premium</span>
          </h3>
          <p style="color: var(--neutral-700); font-size: 0.9rem; line-height: 1.8; margin: 0;">
            <strong>Custom Color Palettes</strong>: personalize the look of any website.<br>
            <strong>Theme Customization</strong>: customize Cocoon's own interface.<br>
            <strong>Personal AI Assistant</strong>: an AI chat companion with 200k tokens.<br>
            <strong>Custom Assistant Personality</strong>: make the assistant match your vibe.<br>
            <strong>Knowledge Repository</strong>: save and organize information.<br>
          </p>
        </div>
      </div>

      <div style="margin-top: 2.5rem;">
        <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb?utm_source=item-share-cb"
          class="cta-button" style="text-decoration: none;">Get All 30+ Features for Free</a>
      </div>
    </div>
  </section>

  <!-- Pricing Section -->
  <section id="pricing" class="pricing-section">
    <div class="pricing-container">
      <div class="pricing-header">
        <h2 data-i18n-cocoonwebsite="pricing.title">Simple, Transparent Pricing</h2>
        <p data-i18n-cocoonwebsite="pricing.subtitle">Choose the plan that works best for you. Start for free, upgrade
          when you're ready for more advanced features.</p>
      </div>

      <div class="pricing-toggle">
        <span class="billing-label" id="monthlyLabel" data-i18n-cocoonwebsite="pricing.monthly">Monthly</span>
        <label class="billing-switch">
          <input type="checkbox" id="billingToggle" onchange="toggleBilling()">
          <span class="slider"></span>
        </label>
        <span class="billing-label" id="annualLabel" data-i18n-cocoonwebsite="pricing.annual">Annual <span
            class="pricing-badge" data-i18n-cocoonwebsite="pricing.save">Save 30%</span></span>
      </div>

      <div class="pricing-grid">
        <!-- Free Plan -->
        <div class="pricing-card">
          <h3 class="pricing-plan-name" data-i18n-cocoonwebsite="pricing.free.name">Free</h3>
          <p class="pricing-description" data-i18n-cocoonwebsite="pricing.free.desc">Perfect for getting started with
            digital wellness and basic productivity features.</p>

          <div class="pricing-amount">
            <span class="pricing-currency">$</span>
            <span class="pricing-price">0</span>
            <span class="pricing-period">/month</span>
          </div>
          <p class="pricing-note" data-i18n-cocoonwebsite="pricing.free.note">Forever free</p>

          <ul class="pricing-features">
            <li><span class="feature-check">✓</span> Limited Productivity Features Features</li>
            <li><span class="feature-check">✓</span> Basic Personal Assistant</li>
            <li><span class="feature-check">✓</span> Accessibility Features</li>
            <li><span class="feature-check feature-unavailable">✗</span> Personal Assistant Chat</li>
            <li><span class="feature-check feature-unavailable">✗</span> Personal Assistant Customization</li>
            <li><span class="feature-check feature-unavailable">✗</span> Custom Theme Colors</li>
            <li><span class="feature-check feature-unavailable">✗</span> Browser Customization</li>
          </ul>

          <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb" target="_blank"
            class="pricing-cta secondary" onclick="trackAffiliateAction('signup')">
            Get Started Free
          </a>
        </div>

        <!-- Premium Plan -->
        <div class="pricing-card featured">
          <div class="pricing-popular-badge" data-i18n-cocoonwebsite="pricing.premium.popular">Most Popular</div>
          <h3 class="pricing-plan-name" data-i18n-cocoonwebsite="pricing.premium.name">Premium</h3>
          <p class="pricing-description" data-i18n-cocoonwebsite="pricing.premium.desc">Unlock the full potential of
            Cocoon with advanced features, custom themes, and full personal assistant capabilities.</p>

          <div class="pricing-amount">
            <span class="pricing-currency">$</span>
            <span class="pricing-price" id="premiumPrice">4.99</span>
            <span class="pricing-period" id="premiumPeriod">/month</span>
          </div>
          <p class="pricing-note" id="premiumNote">Billed monthly</p>

          <ul class="pricing-features">
            <li><span class="feature-check">✓</span> Everything in Free</li>
            <li><span class="feature-check">✓</span> Full Feature Access</li>
            <li><span class="feature-check">✓</span> Personal Assistant Chat</li>
            <li><span class="feature-check">✓</span> Personal Assistant Customization</li>
            <li><span class="feature-check">✓</span> Custom Theme Colors</li>
            <li><span class="feature-check">✓</span> Browser Customization</li>
            <li><span class="feature-check">✓</span> Unlimited Usage</li>
          </ul>

          <button id="premiumCta" class="pricing-cta primary" onclick="selectPremiumPlan()">
            Get Now!!
          </button>
        </div>
      </div>

      <div class="pricing-faq">
        <h3>Frequently Asked Questions</h3>

        <!-- Feature Comparison FAQ Item -->
        <div class="faq-item">
          <button class="faq-question" onclick="toggleFaq(this)">
            <span>What features are included in Free vs Premium?</span>
            <span class="faq-arrow">▼</span>
          </button>
          <div class="faq-answer">
            <div class="feature-comparison-wrapper">
              <table class="feature-comparison-table">
                <thead>
                  <tr>
                    <th>Feature</th>
                    <th>Free</th>
                    <th>Premium</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Tools for Focus Category -->
                  <tr class="feature-category">
                    <td colspan="3">Tools for Focus</td>
                  </tr>
                  <tr>
                    <td>One Element Focus</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Social Media Limiter</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Site Blocker</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>
                  <tr>
                    <td>Deep Focus</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Tools for Productivity Category -->
                  <tr class="feature-category">
                    <td colspan="3">Tools for Productivity</td>
                  </tr>
                  <tr>
                    <td>Visual Timer</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>
                  <tr>
                    <td>To-Do List</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>
                  <tr>
                    <td>Focus Clicker</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Daily Agenda</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>

                  <!-- Personalized Workspace Category -->
                  <tr class="feature-category">
                    <td colspan="3">Personalized Workspace</td>
                  </tr>
                  <tr>
                    <td>Font Customizer</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>
                  <tr>
                    <td>Custom Color Palettes</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Calm Click Visual Feedback</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Breathing Coach Overlay</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="unlimited-badge">Full Access</span></td>
                  </tr>

                  <!-- Cognitive Load Reduction Category -->
                  <tr class="feature-category">
                    <td colspan="3">Cognitive Load Reduction</td>
                  </tr>
                  <tr>
                    <td>Capture Repository</td>
                    <td><span class="limited-badge">10 notes limit</span></td>
                    <td><span class="unlimited-badge">Unlimited</span></td>
                  </tr>
                  <tr>
                    <td>Time Agnostic</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Wellness Check-in</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Decision Wheel</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Communication Tools Category -->
                  <tr class="feature-category">
                    <td colspan="3">Communication Tools</td>
                  </tr>
                  <tr>
                    <td>Literal Language</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Sentence Filter</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Pre-written Responses</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Sound Management Category -->
                  <tr class="feature-category">
                    <td colspan="3">Sound Management</td>
                  </tr>
                  <tr>
                    <td>Adaptive Volume</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Block Unexpected Sounds</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Background Noise</td>
                    <td><span class="limited-badge">Limited Config</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Navigation & Interaction Category -->
                  <tr class="feature-category">
                    <td colspan="3">Navigation & Interaction</td>
                  </tr>
                  <tr>
                    <td>Facilitated Keyboard Navigation</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Layout Simplification</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Predictable Navigation</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Animation & Video Control Category -->
                  <tr class="feature-category">
                    <td colspan="3">Animation & Video Control</td>
                  </tr>
                  <tr>
                    <td>Reduce Motion</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Dim Flashing</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Color & Contrast Category -->
                  <tr class="feature-category">
                    <td colspan="3">Color & Contrast Adjustments</td>
                  </tr>
                  <tr>
                    <td>Color Contrast Adjustments</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Reading Tools Category -->
                  <tr class="feature-category">
                    <td colspan="3">Reading Tools</td>
                  </tr>
                  <tr>
                    <td>Line Guide</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Text Simplifier</td>
                    <td><span class="check-mark">✓</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Extension Settings Category -->
                  <tr class="feature-category">
                    <td colspan="3">Extension Settings</td>
                  </tr>
                  <tr>
                    <td>Theme Customization</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>

                  <!-- Personal Assistant Category -->
                  <tr class="feature-category">
                    <td colspan="3">Personal Assistant</td>
                  </tr>
                  <tr>
                    <td>Chat Capability</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="unlimited-badge">200k tokens</span></td>
                  </tr>
                  <tr>
                    <td>Custom Assistant Visual</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Games</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                  <tr>
                    <td>Custom Personality</td>
                    <td><span class="x-mark">✗</span></td>
                    <td><span class="check-mark">✓</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p style="margin-top: 1rem; font-style: italic; color: var(--neutral-600); text-align: center;">
              Upgrade to Premium to unlock all features and maximize your productivity potential.
            </p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question" onclick="toggleFaq(this)">
            <span>How secure are my payments?</span>
            <span class="faq-arrow">▼</span>
          </button>
          <div class="faq-answer">
            All payments are processed securely through Stripe, industry leader in payment security. We never see or
            store your payment information - everything is handled by Stripe's encrypted, PCI-compliant systems.
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question" onclick="toggleFaq(this)">
            <span>Can I cancel my subscription anytime?</span>
            <span class="faq-arrow">▼</span>
          </button>
          <div class="faq-answer">
            Yes, you can cancel your Premium subscription at any time. You'll continue to have access to Premium
            features until the end of your current billing period, then your account will automatically switch to the
            Free plan.
          </div>
        </div>
      </div>
  </section>

  <!-- Testimonials Section -->
  <section id="testimonials" class="testimonials">
    <div class="testimonials-container">
      <h2 data-i18n-cocoonwebsite="testimonials.title">What Real Users Are Saying</h2>

      <div class="testimonials-grid">
        <div class="testimonial">
          <div class="testimonial-text">
            "Cocoon is a fun and unique plugin that's ideal for students to help stay focused + motivated with built in
            games and to do lists, it's helped me so far to get work done and stay on task!"
          </div>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="/Image/testimonials/benji.jpeg" alt="Benji">
            </div>
            <div class="testimonial-info">
              <h4>Benji</h4>
              <p>Content Creator and Student</p>
              <div class="testimonial-rating">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
            </div>
          </div>
        </div>

        <div class="testimonial">
          <div class="testimonial-text">
            "This app has allowed me to read and study much quicker than usual! The accessibility features are great,
            and perfect for people with ADHD. A must have, especially for uni students."
          </div>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="/Image/testimonials/laluna.jpeg" alt="Laluna">
            </div>
            <div class="testimonial-info">
              <h4>Laluna</h4>
              <p>Content Creator and Student</p>
              <div class="testimonial-rating">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
            </div>
          </div>
        </div>

        <div class="testimonial">
          <div class="testimonial-text">
            "Have you tried Cocoon yet? We'll be honest, we're a little biased. But the focus tools, accessibility
            features, and the fact that it's free? That's not bias, that's just a good deal."
          </div>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="/Image/icon2.png" alt="Cocoon">
            </div>
            <div class="testimonial-info">
              <h4>The Cocoon Team</h4>
              <p>Yes, we reviewed ourselves <em>(at least we're honest about it)</em></p>
              <div class="testimonial-rating">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Use Cases Section -->
  <section class="use-cases">
    <div class="use-cases-container">
      <h2 data-i18n-cocoonwebsite="usecases.title">Perfect for Every Situation</h2>
      <div class="use-cases-tabs">
        <button class="use-case-tab active" onclick="showUseCase('work')" data-i18n-cocoonwebsite="usecases.work.tab">🏢
          At
          Work</button>
        <button class="use-case-tab" onclick="showUseCase('study')" data-i18n-cocoonwebsite="usecases.study.tab">📚
          Studying</button>
        <button class="use-case-tab" onclick="showUseCase('social')" data-i18n-cocoonwebsite="usecases.social.tab">💬
          Social
          Media</button>
      </div>

      <div class="use-case-content active" id="work-content">
        <h3 data-i18n-cocoonwebsite="usecases.work.title">Maximize Workplace Productivity</h3>
        <p data-i18n-cocoonwebsite="usecases.work.desc">Turn your browser into a professional powerhouse. Block
          distractions,
          customize your reading experience, and maintain laser focus during work hours with enterprise-grade
          productivity tools.</p>
        <div class="use-case-features">
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.work.feat1.bold">Smart Website
              Blocking</strong>
            <span data-i18n-cocoonwebsite="usecases.work.feat1.desc">- automatically blocks social media during work
              hours</span>
          </div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.work.feat2.bold">Professional
              Timer</strong> <span data-i18n-cocoonwebsite="usecases.work.feat2.desc">- Pomodoro technique for maximum
              productivity</span></div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.work.feat3.bold">Meeting
              Notes</strong> <span data-i18n-cocoonwebsite="usecases.work.feat3.desc">- quick capture without leaving
              your browser</span></div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.work.feat4.bold">Professional
              Typography</strong>
            <span data-i18n-cocoonwebsite="usecases.work.feat4.desc">- optimize fonts for long document reading</span>
          </div>
        </div>
        <button onclick="showWorkFeaturesFixed()" class="primary-cta" data-i18n-cocoonwebsite="usecases.work.try">Try
          Professional
          Setup</button>
      </div>

      <div class="use-case-content" id="study-content">
        <h3 data-i18n-cocoonwebsite="usecases.study.title">Deep Focus Learning Environment</h3>
        <p data-i18n-cocoonwebsite="usecases.study.desc">Create the perfect study bubble. Whether you're researching,
          writing papers,
          or taking online courses, Cocoon eliminates distractions and enhances concentration with
          scientifically-designed focus tools.</p>
        <div class="use-case-features">
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.study.feat1.bold">One Element
              Focus</strong> <span data-i18n-cocoonwebsite="usecases.study.feat1.desc">- dim everything except what
              you're reading</span></div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.study.feat2.bold">Study
              Timer</strong> <span data-i18n-cocoonwebsite="usecases.study.feat2.desc">- scientifically optimized focus
              sessions</span></div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.study.feat3.bold">Research
              Notes</strong> <span data-i18n-cocoonwebsite="usecases.study.feat3.desc">- capture insights and citations
              instantly</span></div>
          <div class="use-case-feature">✅ <strong data-i18n-cocoonwebsite="usecases.study.feat4.bold">Calm Background
              Sounds</strong>
            <span data-i18n-cocoonwebsite="usecases.study.feat4.desc">- white noise and nature sounds for
              concentration</span>
          </div>
        </div>
        <button onclick="showStudyFeaturesFixed()" class="primary-cta" data-i18n-cocoonwebsite="usecases.study.try">Try
          Study
          Environment</button>
      </div>

      <div class="use-case-content" id="social-content">
        <h3 data-i18n-cocoonwebsite="usecases.social.title">Safer Social Media</h3>
        <p style="font-size: 1.1em; margin-bottom: 20px;">Take back control of your social media habits. Cocoon helps
          you set boundaries, filter negativity, and avoid getting sucked into infinite scrolling.</p>
        <div class="use-case-features">
          <div class="use-case-feature">✅ <strong>Social Media Time Limiter</strong>: set daily usage limits per site
            and get nudged when time's up</div>
          <div class="use-case-feature">✅ <strong>Doom Scroll Prevention</strong>: Cocoon detects endless scrolling
            patterns and gently interrupts them</div>
          <div class="use-case-feature">✅ <strong>Comment Filter</strong>: hide confrontational, toxic, or triggering
            comments automatically</div>
          <div class="use-case-feature">✅ <strong>Literal Language Translator</strong>: hover over sarcasm and idioms to
            see what people actually mean</div>
          <div class="use-case-feature">✅ <strong>Pre-written Responses</strong>: reply templates for when you're not
            sure what to say in tricky situations</div>
        </div>
        <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb?utm_source=item-share-cb"
          target="_blank" class="primary-cta">Try Social Media Tools for Free</a>
      </div>
    </div>
  </section>

  <!-- Final CTA Section -->
  <section id="cta" class="final-cta">
    <div class="final-cta-content">
      <h2 data-i18n-cocoonwebsite="cta.title">Ready to Experience Cocoon for Free?</h2>
      <p data-i18n-cocoonwebsite="cta.desc">Join Cocoon and help shape the future of a more productive and accesible
        browsing. The
        Extension where your voice matters in creating something extraordinary!</p>
      <a href="https://chromewebstore.google.com/detail/hhajiefngbekkhfcodcfdoepmoklgakb?utm_source=item-share-cb"
        target="_blank" class="primary-cta" data-i18n-cocoonwebsite="cta.button"
        onclick="trackAffiliateAction('purchase')">Get Free Access</a>
      <p class="urgency-text" data-i18n-cocoonwebsite="cta.urgency">🌟 Help me make Cocoon perfect for you!</p>
    </div>
  </section>

  <!-- Founder Section -->
  <section id="founder" class="founder-section">
    <div class="founder-container">
      <div class="founder-message">
        <h4 data-i18n-cocoonwebsite="founder.label">Founder Message</h4>
        <h2 data-i18n-cocoonwebsite="founder.title">Built by Someone Who Gets It</h2>
        <p data-i18n-cocoonwebsite="founder.greeting">Hiyayaya!</p>
        <p data-i18n-cocoonwebsite="founder.intro">I'm the person who made this tool! 😄</p>
        <p data-i18n-cocoonwebsite="founder.honesty">Okay, I know some parts of this don't exactly scream
          professionalism, but I
          wanted to have as much fun as possible making it—otherwise it would've felt like a chore.</p>
        <p data-i18n-cocoonwebsite="founder.why">I created this because I was seriously struggling online. I read so
          many productivity
          tips that I ended up juggling three different devices, tweaking system settings nonstop, and still not getting
          anywhere. It got ridiculous.</p>
        <p data-i18n-cocoonwebsite="founder.solution">So I figured—why not build a tool that actually solves the
          problems I was
          facing? Fast forward through months of learning how to (yes, the learning curve was horrendous), and… well,
          this is what came out of it! 🎉</p>
        <p data-i18n-cocoonwebsite="founder.hope">Anyway, I hope you enjoy using it as much as I enjoyed making it.
          There's a feedback
          form in the footer—I'd love to hear your thoughts and keep improving it!</p>
        <div class="founder-signature">
          <img
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Ctext x='10' y='35' font-family='cursive' font-size='24' fill='%23065f46'%3EA.D%3C/text%3E%3C/svg%3E"
            alt="Signature" />
          <p style="text-align: left;"><strong>A.D</strong><br><span data-i18n-cocoonwebsite="founder.role">Cocoon
              Creator</span></p>
        </div>
      </div>

      <div class="founder-photo" style="position: relative;">
        <img src="Image/founder.png" alt="Founder Photo">
        <!-- Peeking Cat Icon -->
        <img src="Image/cat-peeking.png" id="founder-cat"
          style="position: absolute; bottom: 30%; left: 48%; transform: translateX(-50%); width: 90px; cursor: pointer; z-index: 5; transition: all 0.3s ease;"
          onclick="replaceWithCat4()" />
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>Cocoon</h4>
        <p data-i18n-cocoonwebsite="footer.tagline">Your digital sanctuary for mindful browsing.</p>
        <p data-i18n-cocoonwebsite="footer.made">Made with 💚</p>
        <div style="display: flex; gap: 1rem; margin-top: 0.75rem; align-items: center;">
          <a href="https://www.instagram.com/cocoon.plugin" target="_blank" rel="noopener"
            aria-label="Cocoon on Instagram" title="Follow us on Instagram" style="display: inline-flex;">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="2" y="2" width="20" height="20" rx="5" stroke="var(--primary-light)" stroke-width="1.8" />
              <circle cx="12" cy="12" r="5" stroke="var(--primary-light)" stroke-width="1.8" />
              <circle cx="17.5" cy="6.5" r="1.2" fill="var(--primary-light)" />
            </svg>
          </a>
          <a href="https://www.tiktok.com/@cocoonplugin" target="_blank" rel="noopener" aria-label="Cocoon on TikTok"
            title="Follow us on TikTok" style="display: inline-flex;">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M14 1V14C14 16.7614 11.7614 19 9 19C6.23858 19 4 16.7614 4 14C4 11.2386 6.23858 9 9 9V12C7.89543 12 7 12.8954 7 14C7 15.1046 7.89543 16 9 16C10.1046 16 11 15.1046 11 14V1H14Z"
                stroke="var(--primary-light)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M14 1C14 3.20914 15.7909 5 18 5" stroke="var(--primary-light)" stroke-width="1.8"
                stroke-linecap="round" />
            </svg>
          </a>
        </div>
      </div>
      <div class="footer-section">
        <h4 data-i18n-cocoonwebsite="footer.support">Support</h4>
        <a href="https://docs.google.com/forms/d/e/1FAIpQLSfk7RbYNvB9yABCTI_uGABR5sGV_fBtC717afHtbiKIzAGcRA/viewform"
          target="_blank" data-i18n-cocoonwebsite="footer.share">Share Your Experience</a><br>
        <a href="mailto:support@cocoon-plugin.com">support@cocoon-plugin.com</a>
      </div>
      <div class="footer-section">
        <h4 data-i18n-cocoonwebsite="footer.legal">Legal</h4>
        <a href="/privacy-policy" data-i18n-cocoonwebsite="footer.privacy">Privacy Policy</a><br>
        <a href="/affiliate-program" data-i18n-cocoonwebsite="footer.affiliate">Become an Affiliate</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p data-i18n-cocoonwebsite="footer.copyright">&copy; 2025-2026 Cocoon. All rights reserved</p>
    </div>
  </footer>
  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
  <script src="script.js"></script>
  <script>
    // Consolidated JavaScript with fixed variable declarations
    (function () {
      // Global variables - declared once at the top
      var affiliateCode = null;

      // Affiliate tracking
      function checkAffiliateCode() {
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('ref');

        if (code) {
          affiliateCode = code;
          try {
            localStorage.setItem('cocoon_affiliate', code);
          } catch (e) {
            console.log('Cannot access localStorage:', e);
          }

          // Track the click
          fetch('/api/affiliate/track', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              code: code,
              action_type: 'click'
            })
          }).catch(err => console.log('Affiliate tracking error:', err));
        } else {
          // Check if we have a stored affiliate code
          try {
            const storedCode = localStorage.getItem('cocoon_affiliate');
            if (storedCode) {
              affiliateCode = storedCode;
            }
          } catch (e) {
            console.log('Cannot access localStorage:', e);
          }
        }
      }

      // Track affiliate actions
      window.trackAffiliateAction = function (actionType, conversionValue) {
        conversionValue = conversionValue || 0;
        if (affiliateCode) {
          fetch('/api/affiliate/track', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              code: affiliateCode,
              action_type: actionType,
              conversion_value: conversionValue
            })
          }).catch(err => console.log('Affiliate tracking error:', err));
        }
      };

      // Initialize on page load
      window.addEventListener('DOMContentLoaded', function () {
        checkAffiliateCode();
      });
    })();

  </script>
</body>

</html>