BrainBear – Nootropic Gummies for Focus, Clarity & Energy

Smart as F★CK Gummies

Clinically backed brain fuel for clarity, calm, and all-day focus.

GET BRAIN BEAR

Vegan
Gluten Free
Non GMO
No Artificial Colors
Bullshit Free
Sugar Free

WHAT THE F★CK IS IN BRAIN BEAR?

No fairy dust. No filler. Just premium ingredients at clinical doses — sugar-free, science-backed, and built for focus.

← Swipe to explore ingredients →

Lion's Mane Mushroom

Neuroplasticity on tap. Builds memory, fuels focus, and drives lasting brain growth.

BRAIN GROWTH MEMORY LOCK FOCUS MODE NEUROPLASTICITY COGNITIVE LONGEVITY

Citicoline (Cognizin®)

Brain's rocket fuel. Enhances recall, speeds focus, and sharpens mental processing.

RECALL BOOST MENTAL SPEED NEURO FUEL DOPAMINE FLOW LASER FOCUS

L-Theanine (Green Tea)

Calm clarity unlocked. Smooths brainwaves, balances focus, and helps ease anxiety.

CALM FOCUS STRESS ARMOR MOOD BALANCE ANXIETY RELIEF ALPHA BRAINWAVES

Guarana

Plant-powered caffeine. Clean energy, sharper focus, and zero crash or jitters.

CLEAN ENERGY CRASH-FREE FAST ACTIVATION JITTER-FREE MENTAL ALERTNESS

Magnesium Glycinate

The mineral of calm. Restores dopamine, reduces stress, and sustains mental clarity.

DOPAMINE RESET CALM STRENGTH STRESS SHIELD SLEEP RECOVERY MENTAL CLARITY

Vitamin B6 (as P-5-P)

Activates dopamine, fuels attention, and boosts daily motivation and drive.

DOPAMINE SWITCH ATTENTION BOOST MOOD LIFT DAILY DRIVE ENERGY METABOLISM

F★CKS GIVEN ABOUT BRAIN HEALTH

Clinically Dosed. No Sprinkles
Sugar-Free. Bullsh*t-Free
ADHD & Burnout? Handled
No Crash. Just Calm Focus
Real Neuroplasticity Gains
Tastes Insanely Good
Built for Dopamine
3rd-Party Tested. Human-Proven

Clinically Dosed. No Sprinkles
ADHD & Burnout? Handled
Real Neuroplasticity Gains
Built for Dopamine

Sugar-Free. Bullsh*t-Free
No Crash. Just Calm Focus
Tastes Insanely Good
3rd-Party Tested. Human-Proven

HOLY F★CK. THIS WORKS.

Upgrade My Brain

NO FAIRY DUST ALLOWED

Every mg is clinically dosed — no filler, no fluff, no placebo blends.

CRAVEABLE AND FUNCTIONAL

Gummies that work and taste dangerously good — fuel for clarity, focus, calm.

BUILT FOR MINDS ON OVERDRIVE

From chaos to calm, BrainBear powers clarity and balance for busy brains.

ZERO SUGAR. ZERO CRASH.

Sweetened clean. No sugar spikes, no jitters, just steady focus and calm.

BACKED BY SCIENCE, NOT VIBES

Published studies, real results, no manifesting. Only proven, tested brain fuel.

365-DAY BRAIN-BACK GUARANTEE

If BrainBear doesn’t hit, you don’t pay. We back results, not hype.

NO FAIRY DUST ALLOWED

Every mg is clinically dosed — no filler, no fluff, no placebo blends.
ZERO SUGAR. ZERO CRASH.

Sweetened clean. No sugar spikes, no jitters, just steady focus and calm.
CRAVEABLE AND FUNCTIONAL

Gummies that work and taste dangerously good — fuel for clarity, focus, calm.
BACKED BY SCIENCE, NOT VIBES

Published studies, real results, no manifesting. Only proven, tested brain fuel.
BUILT FOR MINDS ON OVERDRIVE

From chaos to calm, BrainBear powers clarity and balance for busy brains.
365-DAY BRAIN-BACK GUARANTEE

If BrainBear doesn’t hit, you don’t pay. We back results, not hype.

365-Day Brain-Back Guarantee

If your brain doesn’t feel sharper, calmer, or more ‘on it’ — send us an empty bottle and we’ll refund you. No questions. No gaslighting. Just results or your dopamine back.

★★★★★
"I took one gummy and cleaned my entire inbox, booked a dentist appointment, and made eye contact with a human.”

Possibly real customer, definitely productive
★★★★★
I’ve tried everything — Neuro Gum, Magic Mind, gummies that taste like soap. BrainBear is the only one that actually works and tastes amazing.

Actual customer, probably neurodivergent
★★★★★
“I didn’t want another sugar crash disguised as self-improvement. BrainBear™ is about better inputs — so your brain has the fuel to do the work.”

Marcus, Founder & Chief Headcase

💡

⚡

🎯

WHY WE SH*T ON THE REST!

The rest sell fairy dust + fake vibes. Brain Bear delivers real ingredients that f★cking hit - sugar-free, science-backed, and made for anyone who wants more clarity, calm, and focus.

← Swipe to see more →

Features		Wellness Gummies	Focus Drinks	Focus Gum & Mints
Clinically Dosed. No Fairy Dust.	✓	✗	✗	✗
No Artificial Bullsh*t	✓	✗	✗	✗
Zero Sugar. Zero Crash.	✓	✗	✓	✓
Built for Brains on Overdrive	✓	✗	✗	✗
Backed by Real Science	✓	✗	✗	✗
Premium Bioavailable Ingredients	✓	✗	✗	✗
Third-Party Lab Tested	✓	✗	✗	✗
Actually Tastes Good	✓	✓	✓	✗
Smooth Focus. No Jitters.	✓	✗	✗	✗

Unlock Your Cognitive Potential

Take the scientifically validated BrainIQ Test to discover your intellectual strengths and cognitive abilities

Professional-grade assessment

10-30 minute assessment options

Detailed cognitive analysis report

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brain Bear™ IQ Assessment - Professional Cognitive Testing</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #FAFAF8; min-height: 100vh; }
    .app { min-height: 100vh; display: flex; flex-direction: column; }

/* Brain Bear Welcome Screen */
    .welcome { 
      min-height: 100vh; display: flex; align-items: center; justify-content: center; 
      padding: clamp(24px, 5vw, 48px); 
      background: linear-gradient(180deg, #FAFAF8 0%, #F8FAFC 100%);
    }
    .welcome-content { 
      max-width: 1200px; width: 100%; margin: 0 auto; text-align: center; 
      animation: fadeInUp 0.6s ease-out forwards;
    }
    .logo-container { 
      display: flex; justify-content: center; align-items: center; 
      height: clamp(120px, 20vw, 160px); margin-bottom: clamp(24px, 5vw, 48px); 
    }
    .brain-bear-logo { 
      width: clamp(100px, 20vw, 140px); height: clamp(100px, 20vw, 140px); 
      object-fit: contain;
      filter: drop-shadow(0 4px 12px rgba(122, 0, 255, 0.2));
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(32px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .title { 
      font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: #111827; 
      margin-bottom: clamp(16px, 3vw, 32px); letter-spacing: 0.02em; line-height: 1.1; 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; font-family: 'Inter', sans-serif;
    }
    .subtitle { 
      font-size: clamp(1rem, 2.5vw, 1.375rem); color: #64748b; 
      max-width: 600px; margin: 0 auto clamp(48px, 8vw, 80px); 
      font-weight: 400; line-height: 1.6; opacity: 0.9; font-family: 'Inter', sans-serif;
    }

/* Premium Mode Cards with Brain Bear Theme */
    .mode-cards { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(clamp(350px, 45vw, 420px), 1fr)); 
      gap: clamp(24px, 5vw, 48px); 
      margin-bottom: clamp(40px, 8vw, 64px); 
      padding: 0 clamp(0px, 2vw, 24px);
    }
    .mode-card { 
      position: relative; 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(20px) saturate(180%);
      border-radius: clamp(20px, 4vw, 32px); 
      padding: clamp(24px, 5vw, 40px); 
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 32px 64px rgba(0, 0, 0, 0.04);
      cursor: pointer; 
      display: flex; 
      flex-direction: column; 
      height: 100%; 
      border: 1px solid rgba(255, 255, 255, 0.8);
      overflow: hidden;
    }
    .mode-card.comprehensive { 
      border: 1px solid rgba(122, 0, 255, 0.2); 
      background: linear-gradient(135deg, 
        rgba(239, 238, 255, 0.8) 0%, 
        rgba(224, 218, 255, 0.6) 100%); 
    }
    .card-header { margin-bottom: clamp(20px, 4vw, 32px); }
    .badge-row { 
      display: flex; align-items: center; justify-content: space-between; 
      margin-bottom: clamp(12px, 3vw, 20px); position: relative; 
    }
    .badge { 
      padding: clamp(6px, 1.5vw, 10px) clamp(12px, 3vw, 16px); 
      border-radius: 50px; font-weight: 500; 
      font-size: clamp(0.75rem, 2vw, 0.875rem); 
      border: 1px solid; backdrop-filter: blur(8px);
    }
    .badge.quick { 
      background: linear-gradient(135deg, rgba(122, 0, 255, 0.1), rgba(122, 0, 255, 0.05)); 
      color: #7A00FF; border-color: rgba(122, 0, 255, 0.2); 
    }
    .badge.comprehensive { 
      background: linear-gradient(135deg, rgba(122, 0, 255, 0.1), rgba(122, 0, 255, 0.05)); 
      color: #7A00FF; border-color: rgba(122, 0, 255, 0.2); 
    }
    .recommended { 
      background: linear-gradient(135deg, #7A00FF, #9D4EDD); 
      color: white; padding: clamp(3px, 1vw, 6px) clamp(8px, 2vw, 12px); 
      border-radius: 50px; font-weight: 600; 
      font-size: clamp(0.65rem, 1.5vw, 0.75rem); 
      margin-left: clamp(6px, 1.5vw, 10px);
      box-shadow: 0 2px 8px rgba(122, 0, 255, 0.3);
    }
    .card-title { 
      font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: #111827; 
      letter-spacing: -0.03em; line-height: 1.2; text-align: left;
      font-family: 'Inter', sans-serif;
    }
    .card-content { flex: 1; display: flex; flex-direction: column; }

.time-row { display: flex; align-items: center; justify-content: flex-start; color: #374151; margin-bottom: 24px; }
    .time-icon { width: 20px; height: 20px; margin-right: 12px; }
    .time-text { font-weight: 400; font-size: 1.125rem; font-family: 'Inter', sans-serif; }

.content-section { flex: 1; margin-bottom: 24px; }
    .section-group { margin-bottom: 24px; text-align: left; }
    .section-title { font-weight: 700; color: #111827; font-size: 1.125rem; margin-bottom: 12px; text-align: left; font-family: 'Inter', sans-serif; }
    .list { color: #6b7280; line-height: 1.6; list-style: none; padding: 0; font-family: 'Inter', sans-serif; font-weight: 400; }
    .list li { margin-bottom: 8px; }

/* Brain Bear Button System */
    .btn { 
      width: 100%; height: clamp(48px, 12vw, 60px); 
      border-radius: 50px; font-weight: 600; 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      border: none; cursor: pointer; 
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 16px 32px rgba(0, 0, 0, 0.04);
      margin-top: clamp(20px, 5vw, 32px); 
      display: flex; align-items: center; justify-content: center; 
      gap: clamp(8px, 2vw, 12px);
      padding: 0 clamp(24px, 6vw, 40px); letter-spacing: -0.01em;
      position: relative; overflow: hidden; isolation: isolate;
      font-family: 'Inter', sans-serif;
    }
    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      border-radius: inherit;
      z-index: -1;
    }
    .btn:hover { 
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.08);
      transform: translateY(-3px) scale(1.02); 
    }
    .btn:hover::before { opacity: 1; }
    .btn:active { 
      transform: translateY(-1px) scale(1.01); 
      box-shadow: 
        0 1px 4px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .btn.quick { 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%); 
      color: white; 
    }
    .btn.comprehensive { 
      background: linear-gradient(135deg, #7A00FF 0%, #6B46C1 100%); 
      color: white; 
    }
    .btn.email { 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%); 
      color: white; 
      max-width: clamp(280px, 60vw, 360px); 
      margin: clamp(20px, 5vw, 32px) auto 0; 
      height: clamp(48px, 12vw, 60px); 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      font-weight: 500;
    }

/* Brain Bear Question Interface */
    .question-screen { 
      min-height: 100vh; display: flex; flex-direction: column; 
      padding: clamp(20px, 5vw, 40px); 
      background: linear-gradient(180deg, #FAFAF8 0%, #F8FAFC 100%);
    }
    .question-header { 
      text-align: center; padding: clamp(16px, 4vw, 32px) 0; 
      border-bottom: 1px solid rgba(0,0,0,0.06); 
      margin-bottom: clamp(32px, 6vw, 48px); 
    }
    .progress-bar { 
      width: 100%; max-width: 700px; height: clamp(6px, 2vw, 10px); 
      background: rgba(229, 231, 235, 0.8); border-radius: 50px; 
      margin: clamp(16px, 4vw, 24px) auto; overflow: hidden; 
      backdrop-filter: blur(8px);
    }
    .progress-fill { 
      height: 100%; 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%); 
      border-radius: 50px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
      box-shadow: 0 0 20px rgba(122, 0, 255, 0.3);
    }
    .question-container { 
      flex: 1; max-width: 900px; margin: 0 auto; width: 100%; 
    }
    .question-title { 
      font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 500; 
      color: #111827; margin-bottom: clamp(24px, 5vw, 40px); 
      text-align: center; line-height: 1.4; letter-spacing: -0.01em;
    }
    .question-content { 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(20px) saturate(180%);
      border-radius: clamp(20px, 5vw, 32px); 
      padding: clamp(24px, 6vw, 48px); 
      margin-bottom: clamp(24px, 5vw, 40px); 
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 32px 64px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.8);
    }

/* Premium Answer Options with Brain Bear Theme */
    .options { 
      display: grid; 
      grid-template-columns: repeat(2, 1fr); 
      gap: clamp(12px, 3vw, 20px); 
      margin-top: clamp(24px, 5vw, 40px); 
      max-width: 600px; 
      margin-left: auto; 
      margin-right: auto;
    }
    .option { 
      background: rgba(249, 250, 251, 0.8); 
      backdrop-filter: blur(8px);
      border: 1.5px solid #e5e7eb; 
      border-radius: clamp(16px, 4vw, 24px); 
      padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 28px); 
      cursor: pointer; 
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
      text-align: center; font-weight: 500; 
      min-height: clamp(50px, 12vw, 70px); 
      display: flex; align-items: center; justify-content: center; 
      font-size: clamp(0.85rem, 2.2vw, 1rem);
      color: #374151; letter-spacing: -0.01em;
      position: relative; overflow: hidden; isolation: isolate;
    }
    .option::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, 
        rgba(122, 0, 255, 0.1) 0%, 
        rgba(157, 78, 221, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      border-radius: inherit;
      z-index: -1;
    }
    .option:hover { 
      border-color: #7A00FF; 
      background: rgba(239, 238, 255, 0.9); 
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        0 4px 16px rgba(122, 0, 255, 0.15),
        0 8px 24px rgba(122, 0, 255, 0.08);
    }
    .option:hover::before { opacity: 1; }
    .option.selected { 
      border-color: #7A00FF; 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%); 
      color: white; 
      transform: translateY(-3px) scale(1.03);
      box-shadow: 
        0 6px 20px rgba(122, 0, 255, 0.3),
        0 12px 32px rgba(122, 0, 255, 0.15);
    }

.question-nav { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
    .nav-btn { 
      padding: 0 32px; min-width: 140px; height: 56px; border-radius: 50px; border: none; 
      font-weight: 500; font-size: 16px; cursor: pointer; 
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
      display: flex; align-items: center; justify-content: center; gap: 8px;
      letter-spacing: 0.01em; touch-action: manipulation;
    }
    .nav-btn.primary { 
      background: linear-gradient(135deg, #7A00FF, #9D4EDD); color: white; 
      box-shadow: 0 4px 14px rgba(122, 0, 255, 0.3);
    }
    .nav-btn.secondary { 
      background: white; color: #6b7280; border: 2px solid #e5e7eb; 
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .nav-btn:hover { transform: translateY(-2px); }
    .nav-btn.primary:hover { box-shadow: 0 8px 25px rgba(122, 0, 255, 0.4); }
    .nav-btn.secondary:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #d1d5db; }
    .nav-btn:active { transform: translateY(0px); }
    .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Brain Bear Results Screen */
    .results-screen { 
      min-height: 100vh; padding: clamp(20px, 5vw, 40px); 
      display: flex; align-items: center; justify-content: center; 
      background: linear-gradient(180deg, #FAFAF8 0%, #F8FAFC 100%);
    }
    .results-content { 
      max-width: 900px; width: 100%; text-align: center; 
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .score-circle { 
      position: relative; 
      width: clamp(160px, 35vw, 220px); 
      height: clamp(160px, 35vw, 220px); 
      margin: 0 auto clamp(32px, 6vw, 48px); 
      filter: drop-shadow(0 8px 32px rgba(122, 0, 255, 0.15));
    }
    .score-text { 
      position: absolute; top: 50%; left: 50%; 
      transform: translate(-50%, -50%); 
      font-size: clamp(2.5rem, 8vw, 3.5rem); 
      font-weight: 300; color: #111827; 
      letter-spacing: -0.03em;
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 100%;
      margin-top: -8px;
    }
    .score-label { 
      position: absolute; top: 70%; left: 50%; 
      transform: translate(-50%, -50%); 
      color: #64748b; 
      font-size: clamp(0.9rem, 2.5vw, 1.1rem); 
      font-weight: 500; letter-spacing: 0.01em;
    }
    .interpretation { 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(20px) saturate(180%);
      border-radius: clamp(20px, 5vw, 32px); 
      padding: clamp(24px, 6vw, 48px); 
      margin: clamp(24px, 5vw, 40px) 0; 
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 32px 64px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.8);
    }

/* Scientific Scoring Methodology */
    .scoring-methodology { background: white; border-radius: 28px; padding: 32px; margin: 32px 0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); text-align: left; }
    .scoring-methodology h4 { color: #111827; font-weight: 600; margin-bottom: 20px; font-size: 1.125rem; }
    .scoring-methodology ul { color: #6b7280; line-height: 1.6; margin: 0; padding-left: 20px; }
    .scoring-methodology li { margin-bottom: 8px; }
    .scoring-methodology p { color: #9ca3af; font-size: 0.875rem; margin-top: 15px; font-style: italic; }

/* Enhanced Population Distribution */
    .population-graph { 
      background: rgba(255, 255, 255, 0.95); 
      backdrop-filter: blur(20px) saturate(180%);
      border-radius: clamp(16px, 4vw, 32px); 
      padding: clamp(20px, 5vw, 48px); 
      margin: clamp(20px, 4vw, 40px) 0; 
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 40px 80px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.8);
      text-align: center; 
      min-height: 280px;
    }
    .graph-title { 
      font-weight: 600; color: #111827; 
      margin-bottom: clamp(20px, 4vw, 32px); 
      font-size: clamp(1rem, 2.5vw, 1.25rem); 
      letter-spacing: -0.02em;
    }
    .graph-container { 
      position: relative; 
      height: clamp(180px, 40vw, 240px); 
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); 
      border-radius: clamp(12px, 3vw, 20px); 
      padding: clamp(70px, 15vw, 90px) clamp(12px, 3vw, 20px) clamp(20px, 4vw, 32px); 
      margin-bottom: clamp(16px, 3vw, 24px); 
      overflow: visible; 
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .graph-bar { 
      position: absolute; bottom: clamp(16px, 4vw, 24px); 
      background: linear-gradient(to top, rgba(226, 232, 240, 0.8), rgba(156, 163, 175, 0.6)); 
      border-radius: clamp(4px, 1vw, 8px) clamp(4px, 1vw, 8px) 0 0; 
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
      border: 1px solid rgba(226, 232, 240, 0.5);
    }
    .graph-bar.user-score { 
      background: linear-gradient(to top, #7A00FF 0%, #9D4EDD 80%, #C084FC 100%); 
      box-shadow: 
        0 0 24px rgba(122, 0, 255, 0.3),
        0 8px 32px rgba(122, 0, 255, 0.2); 
      position: relative; 
      border: 1px solid rgba(122, 0, 255, 0.3);
      transform: scale(1.05);
    }
    .graph-labels { 
      display: flex; justify-content: space-between; 
      font-size: clamp(0.75rem, 2vw, 0.875rem); 
      color: #64748b; 
      margin-top: clamp(8px, 2vw, 16px); 
      font-weight: 500;
    }
    .graph-percentages { 
      display: flex; justify-content: space-between; 
      font-size: clamp(0.65rem, 1.8vw, 0.75rem); 
      color: #94a3b8; 
      margin-top: clamp(4px, 1vw, 8px); 
      font-weight: 500; 
    }
    .user-marker { 
      position: absolute; 
      top: clamp(-65px, -12vw, -75px); 
      left: 50%; 
      transform: translateX(-50%); 
      background: linear-gradient(135deg, #7A00FF 0%, #9D4EDD 100%); 
      color: white; 
      padding: clamp(10px, 2.5vw, 14px) clamp(18px, 4vw, 24px); 
      border-radius: clamp(20px, 5vw, 28px); 
      font-size: clamp(0.75rem, 2.2vw, 0.9rem); 
      font-weight: 700; 
      white-space: nowrap; 
      box-shadow: 
        0 4px 12px rgba(122, 0, 255, 0.25),
        0 8px 20px rgba(122, 0, 255, 0.15); 
      z-index: 15; 
      border: 2px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
    }

/* Enhanced Email Modal with Brain Bear Theme */
    .email-modal { 
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
      background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; 
      justify-content: center; z-index: 1000; backdrop-filter: blur(8px); 
      padding: clamp(16px, 4vw, 24px);
    }
    .email-modal-content { 
      background: white; border-radius: clamp(20px, 5vw, 32px); 
      padding: clamp(32px, 7vw, 48px); max-width: 500px; width: 100%; 
      max-height: 90vh; overflow-y: auto; text-align: center; 
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); position: relative; 
    }
    .modal-header { margin-bottom: clamp(24px, 5vw, 32px); }
    .modal-icon { 
      width: clamp(80px, 15vw, 120px); height: clamp(80px, 15vw, 120px); 
      margin: 0 auto clamp(20px, 4vw, 24px); 
      display: flex; align-items: center; justify-content: center; 
    }
    .modal-icon img { 
      width: 100%; height: 100%; object-fit: contain; 
      filter: drop-shadow(0 4px 12px rgba(122, 0, 255, 0.2));
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
    .modal-icon svg { width: clamp(28px, 6vw, 32px); height: clamp(28px, 6vw, 32px); color: white; }
    .modal-title { 
      font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; color: #111827; 
      margin-bottom: clamp(12px, 3vw, 16px); line-height: 1.2;
    }
    .modal-subtitle { 
      color: #6b7280; font-size: clamp(1rem, 2.5vw, 1.125rem); 
      margin-bottom: clamp(20px, 4vw, 24px); line-height: 1.4;
    }
    .feature-list { 
      text-align: left; background: #f8fafc; border-radius: clamp(12px, 3vw, 16px); 
      padding: clamp(20px, 4vw, 24px); margin: clamp(20px, 4vw, 24px) 0; 
    }
    .feature-item { 
      display: flex; align-items: center; margin-bottom: clamp(10px, 2vw, 12px); 
      color: #374151; font-size: clamp(0.9rem, 2vw, 1rem);
    }
    .feature-item:last-child { margin-bottom: 0; }
    .feature-check { 
      width: clamp(18px, 4vw, 20px); height: clamp(18px, 4vw, 20px); 
      background: #7A00FF; border-radius: 50%; display: flex; align-items: center; 
      justify-content: center; margin-right: clamp(10px, 2vw, 12px); 
      color: white; font-size: clamp(0.65rem, 1.5vw, 0.75rem); font-weight: bold; 
      flex-shrink: 0;
    }
    .email-input { 
      width: 100%; padding: clamp(16px, 3vw, 18px) clamp(20px, 4vw, 24px); 
      border: 2px solid #e5e7eb; border-radius: clamp(25px, 6vw, 50px); 
      font-size: 16px; 
      margin: clamp(16px, 3vw, 20px) 0 clamp(12px, 2vw, 16px) 0; 
      text-align: center; transition: all 0.3s ease; box-sizing: border-box;
    }
    .email-input:focus { 
      outline: none; border-color: #7A00FF; 
      box-shadow: 0 0 0 clamp(3px, 1vw, 4px) rgba(122, 0, 255, 0.1); 
    }
    .modal-buttons { 
      display: flex; flex-direction: column; gap: clamp(12px, 2vw, 16px); 
      justify-content: center; margin-top: clamp(20px, 4vw, 24px); 
    }
    .modal-btn { 
      padding: 0 clamp(24px, 5vw, 32px); width: 100%; height: clamp(48px, 10vw, 56px); 
      border-radius: clamp(24px, 6vw, 50px); border: none; 
      font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
      font-size: clamp(0.9rem, 2vw, 1rem); display: flex; align-items: center; 
      justify-content: center; gap: clamp(6px, 1.5vw, 8px);
      letter-spacing: 0.01em; box-sizing: border-box;
    }
    .modal-btn.primary { 
      background: linear-gradient(135deg, #7A00FF, #9D4EDD); color: white; 
      box-shadow: 0 4px 12px rgba(122, 0, 255, 0.3);
    }
    .modal-btn.secondary { 
      background: #f3f4f6; color: #6b7280; 
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .modal-btn:hover { transform: translateY(-2px); }
    .modal-btn.primary:hover { box-shadow: 0 8px 20px rgba(122, 0, 255, 0.4); }
    .modal-btn.secondary:hover { background: #e5e7eb; }

/* Responsive Design */
    @media (max-width: 768px) {
      .options { grid-template-columns: 1fr; }
      .mode-cards { grid-template-columns: 1fr; gap: 20px; }
      .nav-btn { min-width: 120px; padding: 0 24px; }
      .modal-buttons { flex-direction: column; }
    }

/* Category Styling */
    .breakdown { 
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
      gap: 20px; margin: 32px 0; 
    }
    .category { 
      background: white; border-radius: 16px; padding: 24px; 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
      border-left: 4px solid #7A00FF;
    }
    .category-title { 
      font-weight: 600; color: #111827; margin-bottom: 12px; 
      font-size: 1.1rem; text-transform: capitalize;
    }
    .category-score { 
      font-size: 2rem; font-weight: 700; color: #7A00FF; 
      margin-bottom: 8px; line-height: 1;
    }
  </style>
</head>
<body>
  <div id="app-iq-test" class="app">
    <div class="welcome">
      <div class="welcome-content">
        <div class="logo-container">
          
            <img src="https://www.brainbear.co/cdn/shop/files/brain-bear-Favicon_300x_bc784ca5-810c-41f1-93e1-f76a50ad0645_280x280.png?v=1757239322" alt="Brain Bear" class="brain-bear-logo" style="width: 80px; height: 80px; object-fit: contain;">
          
        </div>
        <h1 class="title">Brain Bear™ IQ Assessment</h1>
        <p class="subtitle">Scientifically validated cognitive assessment designed to measure your intellectual capabilities across multiple cognitive domains.</p>
        
        <div class="mode-cards">
          <div class="mode-card" onclick="BrainBearIQTest.startTest('quick')">
            <div class="card-header">
              <div class="badge-row">
                <span class="badge quick">Quick Assessment</span>
              </div>
              <h3 class="card-title">Express Test</h3>
            </div>
            <div class="card-content">
              <div class="time-row">
                <svg class="time-icon" fill="#7A00FF" viewBox="0 0 24 24">
                  <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"/>
                </svg>
                <span class="time-text">10-15 minutes</span>
              </div>
              <div class="content-section">
                <div class="section-group">
                  <h4 class="section-title">What's Included:</h4>
                  <ul class="list">
                    <li>• 18 carefully selected questions</li>
                    <li>• Core cognitive abilities assessment</li>
                    <li>• Instant IQ score and percentile</li>
                    <li>• Basic performance breakdown</li>
                  </ul>
                </div>
              </div>
              <button class="btn quick">Start Express Test</button>
            </div>
          </div>

<div class="mode-card comprehensive" onclick="BrainBearIQTest.startTest('comprehensive')">
            <div class="card-header">
              <div class="badge-row">
                <span class="badge comprehensive">Comprehensive</span>
                <span class="recommended">Recommended</span>
              </div>
              <h3 class="card-title">Full Assessment</h3>
            </div>
            <div class="card-content">
              <div class="time-row">
                <svg class="time-icon" fill="#7A00FF" viewBox="0 0 24 24">
                  <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"/>
                </svg>
                <span class="time-text">25-30 minutes</span>
              </div>
              <div class="content-section">
                <div class="section-group">
                  <h4 class="section-title">Complete Analysis:</h4>
                  <ul class="list">
                    <li>• 40+ scientifically designed questions</li>
                    <li>• Full cognitive profile across 6 domains</li>
                    <li>• Detailed percentile rankings</li>
                    <li>• Professional interpretation</li>
                    <li>• Comprehensive cognitive strengths report</li>
                  </ul>
                </div>
              </div>
              <button class="btn comprehensive">Start Full Assessment</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

var BrainBearIQTest = {
      selectedMode: null,
      currentQuestion: 0,
      userAnswers: [],
      selectedAnswer: null,
      startTime: null,
      isUpdating: false,

// Enhanced IQ Test Questions - Scientifically Validated
      questions: [
        // Pattern Recognition (Fluid Intelligence - 25% weight)
        {id: 1, category: 'pattern_recognition', difficulty: 2, text: 'Which shape completes the pattern?', options: ['Circle', 'Square', 'Triangle', 'Pentagon'], correct: 2},
        {id: 2, category: 'pattern_recognition', difficulty: 3, text: 'What comes next in this sequence: 2, 6, 18, 54, ?', options: ['108', '162', '216', '270'], correct: 1},
        {id: 3, category: 'pattern_recognition', difficulty: 4, text: 'Complete the pattern: AZ, BY, CX, ?', options: ['DW', 'EV', 'FU', 'GT'], correct: 0},
        {id: 4, category: 'pattern_recognition', difficulty: 3, text: 'Which number should replace the question mark: 3, 8, 15, 24, ?', options: ['33', '35', '37', '39'], correct: 1},
        {id: 5, category: 'pattern_recognition', difficulty: 4, text: 'What is the next term: 1, 4, 9, 16, 25, ?', options: ['30', '36', '42', '49'], correct: 1},
        {id: 6, category: 'pattern_recognition', difficulty: 5, text: 'Complete: 2, 3, 5, 8, 13, ?', options: ['18', '21', '24', '27'], correct: 1},

// Logical Reasoning (Abstract reasoning - 20% weight)
        {id: 7, category: 'logical_reasoning', difficulty: 2, text: 'All roses are flowers. Some flowers are red. Therefore:', options: ['All roses are red', 'Some roses are red', 'No roses are red', 'Cannot be determined'], correct: 3},
        {id: 8, category: 'logical_reasoning', difficulty: 3, text: 'If all cats are mammals and some mammals fly, then:', options: ['All cats fly', 'Some cats fly', 'No cats fly', 'Cannot be determined'], correct: 3},
        {id: 9, category: 'logical_reasoning', difficulty: 4, text: 'Mary is taller than John. John is taller than Peter. Who is shortest?', options: ['Mary', 'John', 'Peter', 'Cannot tell'], correct: 2},
        {id: 10, category: 'logical_reasoning', difficulty: 3, text: 'If A=1, B=2, C=3... what does BRAIN equal?', options: ['33', '36', '39', '42'], correct: 2},
        {id: 11, category: 'logical_reasoning', difficulty: 4, text: 'Which statement must be true: If it rains, the ground gets wet.', options: ['If ground is wet, it rained', 'If ground is dry, it did not rain', 'Rain causes wetness', 'All of the above'], correct: 1},

// Spatial Reasoning (Visual-spatial processing - 15% weight)
        {id: 12, category: 'spatial_reasoning', difficulty: 3, text: 'How many cubes are in a 3×3×3 cube structure?', options: ['9', '18', '27', '36'], correct: 2},
        {id: 13, category: 'spatial_reasoning', difficulty: 4, text: 'If you fold a piece of paper in half twice and punch a hole, how many holes when unfolded?', options: ['2', '4', '6', '8'], correct: 1},
        {id: 14, category: 'spatial_reasoning', difficulty: 3, text: 'Which 3D shape has 6 faces, 8 vertices, and 12 edges?', options: ['Pyramid', 'Prism', 'Cube', 'Sphere'], correct: 2},
        {id: 15, category: 'spatial_reasoning', difficulty: 4, text: 'Rotating a square 45 degrees creates which shape outline?', options: ['Square', 'Diamond', 'Circle', 'Octagon'], correct: 1},

// Numerical Reasoning (Quantitative reasoning - 15% weight)
        {id: 16, category: 'numerical_reasoning', difficulty: 2, text: 'What is 15% of 200?', options: ['25', '30', '35', '40'], correct: 1},
        {id: 17, category: 'numerical_reasoning', difficulty: 3, text: 'If a car travels 60 mph for 2.5 hours, how far does it go?', options: ['120 miles', '150 miles', '180 miles', '200 miles'], correct: 1},
        {id: 18, category: 'numerical_reasoning', difficulty: 4, text: 'What is the square root of 144?', options: ['11', '12', '13', '14'], correct: 1},
        {id: 19, category: 'numerical_reasoning', difficulty: 3, text: 'If x + 5 = 12, what is x?', options: ['5', '6', '7', '8'], correct: 2},
        {id: 20, category: 'numerical_reasoning', difficulty: 4, text: 'What is 2³ × 3²?', options: ['54', '62', '72', '84'], correct: 2},

// Verbal Reasoning (Crystallized intelligence - 15% weight)
        {id: 21, category: 'verbal_reasoning', difficulty: 2, text: 'What is the opposite of "expand"?', options: ['Contract', 'Extend', 'Increase', 'Magnify'], correct: 0},
        {id: 22, category: 'verbal_reasoning', difficulty: 3, text: 'Book is to Reading as Fork is to:', options: ['Kitchen', 'Eating', 'Metal', 'Utensil'], correct: 1},
        {id: 23, category: 'verbal_reasoning', difficulty: 4, text: 'Which word does NOT belong: Apple, Orange, Carrot, Banana', options: ['Apple', 'Orange', 'Carrot', 'Banana'], correct: 2},
        {id: 24, category: 'verbal_reasoning', difficulty: 3, text: 'Complete the analogy: Hot is to Cold as Fast is to:', options: ['Quick', 'Slow', 'Speed', 'Motion'], correct: 1},

// Working Memory (Memory component - 10% weight)
        {id: 25, category: 'working_memory', difficulty: 2, text: 'Remember: 7, 3, 9, 1. What was the second number?', options: ['7', '3', '9', '1'], correct: 1},
        {id: 26, category: 'working_memory', difficulty: 3, text: 'Remember: CAT, DOG, FISH. Which came first?', options: ['CAT', 'DOG', 'FISH', 'None'], correct: 0},
        {id: 27, category: 'working_memory', difficulty: 4, text: 'Count backwards from 100 by 7s. What is the 4th number?', options: ['79', '72', '86', '93'], correct: 0},

// Additional comprehensive questions for full test
        {id: 28, category: 'pattern_recognition', difficulty: 3, text: 'What replaces ?: 2, 6, 12, 20, 30, ?', options: ['40', '42', '44', '46'], correct: 1},
        {id: 29, category: 'logical_reasoning', difficulty: 4, text: 'If some doctors are teachers and all teachers are smart, then:', options: ['All doctors are smart', 'Some doctors are smart', 'No doctors are smart', 'Cannot determine'], correct: 3},
        {id: 30, category: 'spatial_reasoning', difficulty: 3, text: 'How many triangles can you count in a Star of David?', options: ['2', '6', '8', '12'], correct: 2},
        {id: 31, category: 'numerical_reasoning', difficulty: 4, text: 'What is 25% of 25% of 400?', options: ['25', '50', '75', '100'], correct: 0},
        {id: 32, category: 'verbal_reasoning', difficulty: 3, text: 'Synonym for "ubiquitous":', options: ['Rare', 'Everywhere', 'Hidden', 'Obvious'], correct: 1},
        {id: 33, category: 'working_memory', difficulty: 3, text: 'Remember sequence: RED, BLUE, GREEN, YELLOW. What was third?', options: ['RED', 'BLUE', 'GREEN', 'YELLOW'], correct: 2},
        {id: 34, category: 'pattern_recognition', difficulty: 5, text: 'Complete: 1, 1, 2, 3, 5, 8, ?', options: ['11', '13', '15', '17'], correct: 1},
        {id: 35, category: 'logical_reasoning', difficulty: 5, text: 'If it takes 5 machines 5 minutes to make 5 widgets, how long for 100 machines to make 100 widgets?', options: ['5 minutes', '20 minutes', '100 minutes', '500 minutes'], correct: 0},
        {id: 36, category: 'spatial_reasoning', difficulty: 4, text: 'A cube is painted red on all sides, then cut into 27 smaller cubes. How many have exactly 2 red faces?', options: ['8', '12', '6', '4'], correct: 1},
        {id: 37, category: 'numerical_reasoning', difficulty: 5, text: 'If 2x + 3y = 12 and x = 3, what is y?', options: ['1', '2', '3', '4'], correct: 1},
        {id: 38, category: 'verbal_reasoning', difficulty: 4, text: 'Which word means "before" in time?', options: ['Posterior', 'Prior', 'Subsequent', 'Later'], correct: 1},
        {id: 39, category: 'working_memory', difficulty: 4, text: 'Spell "COGNITIVE" backwards. What is the 5th letter?', options: ['T', 'I', 'N', 'G'], correct: 1},
        {id: 40, category: 'pattern_recognition', difficulty: 4, text: 'In base 8: What is 15 + 26?', options: ['43', '35', '41', '33'], correct: 0}
      ],

init: function() {
        this.currentQuestion = 0;
        this.userAnswers = [];
        this.selectedAnswer = null;
        this.selectedMode = null;
        this.showWelcome();
      },

showWelcome: function() {
        var container = document.getElementById("app-iq-test");
        container.innerHTML = `
          <div class="welcome">
            <div class="welcome-content">
              <div class="logo-container">
                ${getLogoHTML()}
              </div>
              <h1 class="title">Brain Bear™ IQ Assessment</h1>
              <p class="subtitle">Scientifically validated cognitive assessment designed to measure your intellectual capabilities across multiple cognitive domains.</p>
              
              <div class="mode-cards">
                <div class="mode-card" onclick="BrainBearIQTest.startTest('quick')">
                  <div class="card-header">
                    <div class="badge-row">
                      <span class="badge quick">Quick Assessment</span>
                    </div>
                    <h3 class="card-title">Express Test</h3>
                  </div>
                  <div class="card-content">
                    <div class="time-row">
                      <svg class="time-icon" fill="#7A00FF" viewBox="0 0 24 24">
                        <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"/>
                      </svg>
                      <span class="time-text">10-15 minutes</span>
                    </div>
                    <div class="content-section">
                      <div class="section-group">
                        <h4 class="section-title">What's Included:</h4>
                        <ul class="list">
                          <li>• 18 carefully selected questions</li>
                          <li>• Core cognitive abilities assessment</li>
                          <li>• Instant IQ score and percentile</li>
                          <li>• Basic performance breakdown</li>
                        </ul>
                      </div>
                    </div>
                    <button class="btn quick">Start Express Test</button>
                  </div>
                </div>

<div class="mode-card comprehensive" onclick="BrainBearIQTest.startTest('comprehensive')">
                  <div class="card-header">
                    <div class="badge-row">
                      <span class="badge comprehensive">Comprehensive</span>
                      <span class="recommended">Recommended</span>
                    </div>
                    <h3 class="card-title">Full Assessment</h3>
                  </div>
                  <div class="card-content">
                    <div class="time-row">
                      <svg class="time-icon" fill="#7A00FF" viewBox="0 0 24 24">
                        <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"/>
                      </svg>
                      <span class="time-text">25-30 minutes</span>
                    </div>
                    <div class="content-section">
                      <div class="section-group">
                        <h4 class="section-title">Complete Analysis:</h4>
                        <ul class="list">
                          <li>• 40+ scientifically designed questions</li>
                          <li>• Full cognitive profile across 6 domains</li>
                          <li>• Detailed percentile rankings</li>
                          <li>• Professional interpretation</li>
                          <li>• Comprehensive cognitive strengths report</li>
                        </ul>
                      </div>
                    </div>
                    <button class="btn comprehensive">Start Full Assessment</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;
      },

startTest: function(mode) {
        this.selectedMode = mode;
        this.currentQuestion = 0;
        this.userAnswers = [];
        this.startTime = Date.now();
        this.renderQuestion();
      },

renderQuestion: function() {
        var questionSet = this.getQuestionSet();
        var question = questionSet[this.currentQuestion];
        var progress = ((this.currentQuestion + 1) / questionSet.length) * 100;

selectAnswer: function(answerIndex) {
        // Clear previous selection
        document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
        
        // Mark new selection
        document.querySelector(`[data-index="${answerIndex}"]`).classList.add('selected');
        
        this.selectedAnswer = answerIndex;
        document.getElementById('next-btn').disabled = false;
      },

nextQuestion: function() {
        this.recordAnswer(this.selectedAnswer);
        this.selectedAnswer = null;
        this.currentQuestion++;

var questionSet = this.getQuestionSet();
        if (this.currentQuestion < questionSet.length) {
          this.renderQuestion();
        } else {
          this.showResults();
        }
      },

skipQuestion: function() {
        this.recordAnswer(null);
        this.selectedAnswer = null;
        this.currentQuestion++;

var questionSet = this.getQuestionSet();
        if (this.currentQuestion < questionSet.length) {
          this.renderQuestion();
        } else {
          this.showResults();
        }
      },

recordAnswer: function(answer) {
        var questionSet = this.getQuestionSet();
        var question = questionSet[this.currentQuestion];
        var isCorrect = answer !== null && answer === question.correct;

this.userAnswers.push({
          questionId: question.id,
          selectedAnswer: answer,
          correctAnswer: question.correct,
          isCorrect: isCorrect,
          category: question.category,
          difficulty: question.difficulty || 1,
          timeSpent: Date.now() - this.startTime
        });
      },

getQuestionSet: function() {
        if (this.selectedMode === 'quick') {
          return this.questions.slice(0, 18);
        } else {
          return this.questions;
        }
      },

// Enhanced Scientific IQ Calculation with Brain Bear Standards
      calculateIQ: function() {
        var totalQuestions = this.userAnswers.length;
        var correctAnswers = 0;
        var totalTime = 0;

// Scientific category weights based on WAIS-IV and Stanford-Binet
        var categoryWeights = {
          'pattern_recognition': 0.25,  // Fluid Intelligence - highest weight
          'logical_reasoning': 0.20,    // Abstract reasoning
          'spatial_reasoning': 0.15,    // Visual-spatial processing  
          'numerical_reasoning': 0.15,  // Quantitative reasoning
          'verbal_reasoning': 0.15,     // Crystallized intelligence
          'working_memory': 0.10        // Memory component
        };

var weightedScore = 0;
        var totalWeight = 0;
        var speedBonus = 0;

// Process answers with scientific rigor
        for (var i = 0; i < this.userAnswers.length; i++) {
          var answer = this.userAnswers[i];
          totalTime += answer.timeSpent;

var category = answer.category || 'logical_reasoning';
          var difficulty = answer.difficulty || 1;
          var weight = categoryWeights[category] || 0.15;

var questionValue = weight * difficulty;
          totalWeight += questionValue;

if (answer.isCorrect) {
            correctAnswers++;
            weightedScore += questionValue;

// Speed bonus for quick correct answers
            var expectedTime = 45000; // 45 seconds per question
            if (answer.timeSpent < expectedTime * 0.75) {
              speedBonus += questionValue * 0.08; // 8% speed bonus
            }
          }
        }

var accuracy = (correctAnswers / totalQuestions) * 100;
        var weightedAccuracy = totalWeight > 0 ? (weightedScore / totalWeight) * 100 : accuracy;

// Apply speed bonus
        var finalScore = weightedAccuracy + (speedBonus / totalWeight * 100);

// Transform to IQ scale using psychometric standards
        var zScore = (finalScore - 60) / 20; // Normalize around 60% = average performance
        var iqScore = 100 + (zScore * 15);

// Apply realistic bounds (3 standard deviations)
        var finalIQ = Math.max(55, Math.min(145, iqScore));
        var percentile = this.calculatePercentile(finalIQ);

return {
          iqScore: Math.round(finalIQ),
          percentile: percentile,
          accuracy: Math.round(accuracy),
          totalTime: totalTime,
          breakdown: this.calculateBreakdown(),
          interpretation: this.getInterpretation(Math.round(finalIQ))
        };
      },

calculatePercentile: function(iqScore) {
        var z = (iqScore - 100) / 15;
        var percentile = Math.round(this.normalCDF(z) * 100);
        return Math.min(99, Math.max(1, percentile));
      },

normalCDF: function(z) {
        return (1 + this.erf(z / Math.sqrt(2))) / 2;
      },

erf: function(x) {
        var a1 =  0.254829592;
        var a2 = -0.284496736;
        var a3 =  1.421413741;
        var a4 = -1.453152027;
        var a5 =  1.061405429;
        var p  =  0.3275911;

var sign = x < 0 ? -1 : 1;
        x = Math.abs(x);

var t = 1.0 / (1.0 + p * x);
        var y = 1.0 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x);

return sign * y;
      },

calculateBreakdown: function() {
        var categories = {};

for (var i = 0; i < this.userAnswers.length; i++) {
          var answer = this.userAnswers[i];
          var category = answer.category;

if (!categories[category]) {
            categories[category] = { correct: 0, total: 0 };
          }

categories[category].total++;
          if (answer.isCorrect) {
            categories[category].correct++;
          }
        }

Object.keys(categories).forEach(function(category) {
          var cat = categories[category];
          cat.percentage = Math.round((cat.correct / cat.total) * 100);

if (cat.percentage >= 85) cat.level = 'Superior';
          else if (cat.percentage >= 70) cat.level = 'High';
          else if (cat.percentage >= 50) cat.level = 'Average';
          else cat.level = 'Below Average';
        });

return categories;
      },

getInterpretation: function(iqScore) {
        if (iqScore >= 130) return { level: "Exceptional", description: "Outstanding cognitive abilities with superior problem-solving skills across multiple domains.", color: "#7A00FF" };
        if (iqScore >= 120) return { level: "Superior", description: "Well above average intelligence with excellent analytical and reasoning capabilities.", color: "#7A00FF" };
        if (iqScore >= 110) return { level: "High Average", description: "Above average cognitive functioning with strong problem-solving abilities.", color: "#9D4EDD" };
        if (iqScore >= 90) return { level: "Average", description: "Normal cognitive functioning with typical problem-solving abilities.", color: "#9D4EDD" };
        if (iqScore >= 80) return { level: "Low Average", description: "Slightly below average but within normal range of cognitive functioning.", color: "#C084FC" };
        return { level: "Below Average", description: "Below average cognitive functioning that may benefit from additional support.", color: "#DDD6FE" };
      },

generatePopulationGraph: function(userIQ) {
        try {
          var ranges = [
            {min: 70, max: 80, height: 30, percent: 7, label: '70-80'},
            {min: 80, max: 90, height: 60, percent: 16, label: '80-90'},
            {min: 90, max: 100, height: 80, percent: 34, label: '90-100'},
            {min: 100, max: 110, height: 80, percent: 34, label: '100-110'},
            {min: 110, max: 120, height: 60, percent: 16, label: '110-120'},
            {min: 120, max: 130, height: 30, percent: 7, label: '120-130'},
            {min: 130, max: 200, height: 20, percent: 2, label: '130+'}
          ];

var bars = '';
          for (var i = 0; i < ranges.length; i++) {
            var range = ranges[i];
            var isUserRange = userIQ >= range.min && (userIQ < range.max || (range.max === 200 && userIQ >= range.min));
            var leftPosition = 8 + (i * 12);
            
            var barStyle = [
              'position: absolute',
              'left: ' + leftPosition + '%',
              'width: 10%',
              'height: ' + range.height + 'px',
              'bottom: 20px',
              'border-radius: 4px 4px 0 0',
              'display: block',
              'visibility: visible'
            ].join('; ');

if (isUserRange) {
              barStyle += '; background: linear-gradient(to top, #7A00FF, #9D4EDD); box-shadow: 0 2px 8px rgba(122, 0, 255, 0.2)';
              bars += '<div style="' + barStyle + '">';
              bars += '<div style="position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: #7A00FF; color: white; padding: 6px 12px; border-radius: 16px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(122, 0, 255, 0.2); z-index: 10;">You (' + userIQ + ')</div>';
              bars += '</div>';
            } else {
              barStyle += '; background: linear-gradient(to top, #e5e7eb, #d1d5db)';
              bars += '<div style="' + barStyle + '"></div>';
            }
          }

return bars;
        } catch (error) {
          console.error('Graph generation error:', error);
          return '<div style="text-align: center; color: #666; padding: 20px;">Population distribution will load shortly...</div>';
        }
      },

showResults: function() {
        var results = this.calculateIQ();

var breakdownHTML = Object.keys(results.breakdown).map(function(category) {
          var data = results.breakdown[category];
          return [
            '<div class="category">',
            '  <div class="category-title">' + category.replace(/_/g, ' ').replace(/\b\w/g, function(l) { return l.toUpperCase(); }) + '</div>',
            '  <div class="category-score">' + data.percentage + '%</div>',
            '  <div>' + data.level + ' (' + data.correct + '/' + data.total + ')</div>',
            '</div>'
          ].join('');
        }).join('');

var container = document.getElementById("app-iq-test");
        container.innerHTML = [
          '<div class="results-screen">',
          '  <div class="results-content">',
          '    <h1 style="font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 300; color: #111827; margin-bottom: 32px; text-align: center;">Your Brain Bear™ IQ Results</h1>',
          '    <div class="score-circle" style="position: relative; width: 160px; height: 160px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center;">',
          '      <svg width="160" height="160" viewBox="0 0 160 160" style="transform: rotate(-90deg); position: absolute; top: 0; left: 0; display: block;">',
          '        <circle cx="80" cy="80" r="70" fill="none" stroke="#e5e7eb" stroke-width="10"/>',
          '        <circle cx="80" cy="80" r="70" fill="none" stroke="url(#gradient-brainbear)" stroke-width="10" stroke-dasharray="' + (440 * Math.min(results.iqScore / 200, 1)) + ' 440" stroke-linecap="round"/>',
          '        <defs>',
          '          <linearGradient id="gradient-brainbear" x1="0%" y1="0%" x2="100%" y2="100%">',
          '            <stop offset="0%" style="stop-color:#7A00FF;stop-opacity:1" />',
          '            <stop offset="100%" style="stop-color:#9D4EDD;stop-opacity:1" />',
          '          </linearGradient>',
          '        </defs>',
          '      </svg>',
          '      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center;">',
          '        <div class="score-text" style="font-size: 2.4rem; font-weight: 700; color: #111827; line-height: 1;">' + results.iqScore + '</div>',
          '      </div>',
          '    </div>',
          '    <div class="interpretation">',
          '      <h3 style="color: ' + results.interpretation.color + '; font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 16px; text-align: center;">' + results.interpretation.level + '</h3>',
          '      <p style="color: #6b7280; line-height: 1.6; margin-bottom: 16px; text-align: center; max-width: 500px; margin-left: auto; margin-right: auto;">' + results.interpretation.description + '</p>',
          '      <p style="font-weight: 600; color: #111827; text-align: center;">You scored higher than ' + results.percentile + '% of the population</p>',
          '      <p style="color: #6b7280; margin-top: 16px; text-align: center;">Test completed with ' + results.accuracy + '% accuracy in ' + Math.round((results.totalTime / 1000) / 60) + ' minutes</p>',
          '    </div>',
          '    <div class="population-graph" style="display: block; visibility: visible; margin: 24px 0;">',
          '      <h3 class="graph-title" style="text-align: center; margin-bottom: 20px; font-size: 1.2rem; color: #111;">Population Distribution</h3>',
          '      <div class="graph-container" style="position: relative; display: block; min-height: 160px; background: #f8fafc; border-radius: 16px; padding: 50px 16px 30px; margin-bottom: 16px;">',
          this.generatePopulationGraph(results.iqScore),
          '      </div>',
          '      <div class="graph-labels" style="display: flex; justify-content: space-between; margin-top: 12px;">',
          '        <span style="font-size: 0.7rem; color: #666;">70-80</span>',
          '        <span style="font-size: 0.7rem; color: #666;">80-90</span>',
          '        <span style="font-size: 0.7rem; color: #666;">90-100</span>',
          '        <span style="font-size: 0.7rem; color: #666;">100-110</span>',
          '        <span style="font-size: 0.7rem; color: #666;">110-120</span>',
          '        <span style="font-size: 0.7rem; color: #666;">120-130</span>',
          '        <span style="font-size: 0.7rem; color: #666;">130+</span>',
          '      </div>',
          '      <div class="graph-percentages" style="display: flex; justify-content: space-between; margin-top: 4px;">',
          '        <span style="font-size: 0.65rem; color: #999;">7%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">16%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">34%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">34%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">16%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">7%</span>',
          '        <span style="font-size: 0.65rem; color: #999;">2%</span>',
          '      </div>',
          '    </div>',
          '    <div class="scoring-methodology">',
          '      <h3 style="margin: 0 0 24px 0; font-size: clamp(1.1rem, 2.5vw, 1.3rem); font-weight: 600; color: #1e293b;">Scientific Scoring Methodology</h3>',
          '      <div style="display: grid; gap: 20px;">',
          '        <div style="display: flex; align-items: flex-start;">',
          '          <div style="width: 8px; height: 8px; background: #7A00FF; border-radius: 50%; margin-right: 12px; margin-top: 8px; flex-shrink: 0;"></div>',
          '          <div>',
          '            <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #1e293b;">Weighted Categories</h4>',
          '            <p style="margin: 0; color: #64748b; font-size: 13px; line-height: 1.5;">Fluid Intelligence (25%), Logic (20%), Spatial (15%), Math (15%), Verbal (15%), Memory (10%)</p>',
          '          </div>',
          '        </div>',
          '        <div style="display: flex; align-items: flex-start;">',
          '          <div style="width: 8px; height: 8px; background: #7A00FF; border-radius: 50%; margin-right: 12px; margin-top: 8px; flex-shrink: 0;"></div>',
          '          <div>',
          '            <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #1e293b;">Difficulty Scaling</h4>',
          '            <p style="margin: 0; color: #64748b; font-size: 13px; line-height: 1.5;">Harder questions worth more points, mirroring WAIS-IV standards</p>',
          '          </div>',
          '        </div>',
          '        <div style="display: flex; align-items: flex-start;">',
          '          <div style="width: 8px; height: 8px; background: #7A00FF; border-radius: 50%; margin-right: 12px; margin-top: 8px; flex-shrink: 0;"></div>',
          '          <div>',
          '            <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #1e293b;">Speed Factor</h4>',
          '            <p style="margin: 0; color: #64748b; font-size: 13px; line-height: 1.5;">Quick correct answers receive bonus points (up to 8%)</p>',
          '          </div>',
          '        </div>',
          '        <div style="display: flex; align-items: flex-start;">',
          '          <div style="width: 8px; height: 8px; background: #7A00FF; border-radius: 50%; margin-right: 12px; margin-top: 8px; flex-shrink: 0;"></div>',
          '          <div>',
          '            <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #1e293b;">Psychometric Scale</h4>',
          '            <p style="margin: 0; color: #64748b; font-size: 13px; line-height: 1.5;">Standard IQ distribution (Mean=100, SD=15)</p>',
          '          </div>',
          '        </div>',
          '      </div>',
          '      <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0;">',
          '        <p style="margin: 0; color: #64748b; font-size: 12px; font-style: italic; text-align: center;">Based on WAIS-IV, Stanford-Binet, and Raven Progressive Matrices standards used by professional psychologists.</p>',
          '      </div>',
          '    </div>',
          '    <div class="breakdown">',
          breakdownHTML,
          '    </div>',
          '    <div style="display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 48px; max-width: 320px; margin-left: auto; margin-right: auto;">',
          (emailCollectionEnabled ? 
            '      <button onclick="BrainBearIQTest.showEmailModal()" style="width:100%;height:48px;border-radius:24px;border:none;background:linear-gradient(135deg,#7A00FF,#9D4EDD);color:white;font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;">' +
            '        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="margin-right: 8px;"><path d="M3 8L10.89 13.26C11.2187 13.4793 11.6049 13.5963 12 13.5963C12.3951 13.5963 12.7813 13.4793 13.11 13.26L21 8M5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' +
            '        Get Complete Analysis' +
            '      </button>'
          : 
            '      <div style="background: linear-gradient(135deg, rgba(122, 0, 255, 0.1), rgba(122, 0, 255, 0.05)); border: 2px solid #7A00FF; border-radius: 16px; padding: 24px; text-align: center; margin: 20px 0;">' +
            '        <h3 style="color: #7A00FF; margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">🧠 Congratulations!</h3>' +
            '        <p style="color: #6B7280; margin: 0; font-size: 14px; line-height: 1.5;">You have completed the Brain Bear™ IQ Assessment. Your cognitive abilities have been successfully evaluated across multiple domains.</p>' +
            '      </div>'
          ) +
          '      <button onclick="BrainBearIQTest.init()" style="width:100%;height:48px;border-radius:24px;border:1px solid #E5E5E5;background:#FFFFFF;color:#6B7280;font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;">Retake Test</button>',
          '      <button onclick="window.close();" style="width:100%;height:48px;border-radius:24px;border:1px solid #E5E5E5;background:#E5E5E5;color:#374151;font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;">Close Test</button>',
          '    </div>',
          '  </div>',
          '</div>'
        ].join('');
      },

showEmailModal: function() {
        var modal = document.createElement('div');
        modal.className = 'email-modal';
        modal.innerHTML = [
          '<div class="email-modal-content">',
          '  <div class="modal-header">',
          '    <div class="modal-icon">',
          '      ' + getEmailLogoHTML(),
          '    </div>',
          '    <h3 class="modal-title">Get Your Complete Brain Bear™ IQ Analysis</h3>',
          '    <p class="modal-subtitle">Unlock your detailed cognitive breakdown and professional recommendations</p>',
          '  </div>',
          '  <div class="feature-list">',
          '    <div class="feature-item">',
          '      <div class="feature-check">✓</div>',
          '      <span>Detailed breakdown of all 6 cognitive domains</span>',
          '    </div>',
          '    <div class="feature-item">',
          '      <div class="feature-check">✓</div>',
          '      <span>Professional interpretation and recommendations</span>',
          '    </div>',
          '    <div class="feature-item">',
          '      <div class="feature-check">✓</div>',
          '      <span>Comparative analysis with population data</span>',
          '    </div>',
          '    <div class="feature-item">',
          '      <div class="feature-check">✓</div>',
          '      <span>Cognitive enhancement insights and supplement recommendations</span>',
          '    </div>',
          '  </div>',
          '  <div style="display: flex; flex-direction: column; gap: 16px; margin: 24px 0;">',
          '    <input type="text" placeholder="Your Name" id="name-input" style="width:100%;padding:16px 20px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;background:#fafafa;">',
          '    <input type="email" placeholder="Email Address" id="email-input" style="width:100%;padding:16px 20px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;background:#fafafa;">',
          '    <input type="tel" placeholder="Phone Number (Optional)" id="phone-input" style="width:100%;padding:16px 20px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;background:#fafafa;">',
          '  </div>',
          '  <div class="modal-buttons">',
          '    <button class="modal-btn primary" onclick="BrainBearIQTest.sendResults()">Get My Complete Analysis</button>',
          '    <button class="modal-btn secondary" onclick="BrainBearIQTest.closeEmailModal()">Maybe Later</button>',
          '  </div>',
          '</div>'
        ].join('');

document.body.appendChild(modal);

// Close modal when clicking outside
        modal.addEventListener('click', function(e) {
          if (e.target === modal) {
            BrainBearIQTest.closeEmailModal();
          }
        });

// Focus name input
        setTimeout(function() {
          document.getElementById('name-input').focus();
        }, 100);
      },

closeEmailModal: function() {
        var modal = document.querySelector('.email-modal');
        if (modal) {
          modal.remove();
        }
      },

sendResults: function() {
        var name = document.getElementById('name-input').value.trim();
        var email = document.getElementById('email-input').value.trim();
        var phone = document.getElementById('phone-input').value.trim();
        
        // Validation
        if (!name) {
          alert('Please enter your name');
          return;
        }
        if (!email || !email.includes('@')) {
          alert('Please enter a valid email address');
          return;
        }

// Disable button and show loading state
        var button = document.querySelector('.modal-btn.primary');
        var originalText = button.textContent;
        button.textContent = 'Processing...';
        button.disabled = true;

// Prepare IQ lead data
        var iqResults = this.calculateIQ();
        var leadData = {
          name: name,
          email: email,
          phone: phone,
          testMode: this.selectedMode,
          score: iqResults.iqScore,
          percentile: iqResults.percentile,
          interpretation: iqResults.interpretation.level,
          completedAt: new Date().toISOString(),
          breakdown: this.calculateBreakdown()
        };

// Send lead data to backend (use configurable API URL for popup context)
        fetch(apiBaseUrl + '/api/iq/leads', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(leadData)
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // Show success state
            button.textContent = '✓ Analysis Unlocked!';
            button.style.background = 'linear-gradient(135deg, #10b981, #059669)';
            
            setTimeout(() => {
              // Show detailed results
              this.showDetailedResults(leadData);
              this.closeEmailModal();
            }, 1500);
          } else {
            throw new Error(data.error || 'Failed to save lead data');
          }
        })
        .catch(error => {
          console.error('Error saving lead data:', error);
          alert('Sorry, there was an error processing your request. Please try again.');
          button.textContent = originalText;
          button.disabled = false;
          button.style.background = '';
        });
      },
      
      showDetailedResults: function(leadData) {
        // Create comprehensive analysis popup
        var modal = document.createElement('div');
        modal.className = 'email-modal';
        modal.style.background = 'rgba(0, 0, 0, 0.8)';
        modal.innerHTML = [
          '<div class="email-modal-content" style="max-width: 700px; max-height: 85vh; overflow-y: auto;">',
          '  <div class="modal-header">',
          '    <h2 style="color: #7A00FF; font-size: 1.8rem; margin-bottom: 16px; font-family: Inter; font-weight: 700;">🧠 Complete Brain Bear™ IQ Analysis</h2>',
          '    <p style="color: #6b7280; font-size: 1.1rem; margin-bottom: 24px;">Congratulations ' + leadData.name + '! Here is your comprehensive cognitive assessment.</p>',
          '  </div>',
          '  <div style="text-align: left; background: #f8fafc; border-radius: 16px; padding: 24px; margin: 20px 0;">',
          '    <h3 style="color: #111827; margin-bottom: 16px; font-size: 1.3rem;">🎯 Your Cognitive Profile</h3>',
          '    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px;">',
          '      <div style="background: white; padding: 16px; border-radius: 12px; border: 2px solid #7A00FF;">',
          '        <div style="font-size: 2rem; font-weight: 700; color: #7A00FF; text-align: center;">' + leadData.score + '</div>',
          '        <div style="color: #6b7280; text-align: center; font-size: 0.9rem;">IQ Score</div>',
          '      </div>',
          '      <div style="background: white; padding: 16px; border-radius: 12px;">',
          '        <div style="font-size: 1.5rem; font-weight: 600; color: #111827; text-align: center;">' + leadData.percentile + '%</div>',
          '        <div style="color: #6b7280; text-align: center; font-size: 0.9rem;">Above Population</div>',
          '      </div>',
          '      <div style="background: white; padding: 16px; border-radius: 12px;">',
          '        <div style="font-size: 1.2rem; font-weight: 600; color: #7A00FF; text-align: center;">' + leadData.interpretation + '</div>',
          '        <div style="color: #6b7280; text-align: center; font-size: 0.9rem;">Classification</div>',
          '      </div>',
          '    </div>',
          '  </div>',
          '  <div style="background: linear-gradient(135deg, rgba(122, 0, 255, 0.1), rgba(122, 0, 255, 0.05)); border-radius: 16px; padding: 24px; margin: 20px 0; border: 1px solid rgba(122, 0, 255, 0.2);">',
          '    <h3 style="color: #7A00FF; margin-bottom: 16px; font-size: 1.3rem; display: flex; align-items: center;">',
          '      <span style="margin-right: 8px;">🧬</span> Cognitive Enhancement Recommendations',
          '    </h3>',
          '    <p style="color: #374151; line-height: 1.6; margin-bottom: 16px;">Based on your ' + leadData.interpretation + ' performance, we recommend Brain Bear scientifically formulated nootropic supplements to optimize your cognitive potential:</p>',
          '    <ul style="color: #374151; line-height: 1.8; margin-left: 20px;">',
          '      <li><strong>Focus Enhancement:</strong> Lions Mane + Alpha-GPC for memory consolidation</li>',
          '      <li><strong>Processing Speed:</strong> Rhodiola + Bacopa for faster cognitive processing</li>',
          '      <li><strong>Mental Clarity:</strong> Phosphatidylserine + Ginkgo for sharper thinking</li>',
          '      <li><strong>Stress Resilience:</strong> Ashwagandha + L-Theanine for calm focus</li>',
          '    </ul>',
          '  </div>',
          '  <div style="text-align: center; margin-top: 24px;">',
          '    <button onclick="window.open(\\\"https://brainbear.co\\\", \\\"_blank\\\")" style="background:linear-gradient(135deg,#7A00FF,#9D4EDD);color:white;border:none;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;margin-right:12px;">Shop Brain Bear Supplements</button>',
          '    <button onclick="BrainBearIQTest.closeDetailedResults()" style="background:white;color:#6b7280;border:2px solid #e5e7eb;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;">Close</button>',
          '  </div>',
          '</div>'
        ].join('');

// Debug identifier - UPDATED VERSION 2.1 FORCE UPDATE with Lead Capture API  
    console.log('🧠 Brain Bear IQ Test v2.1 FORCE UPDATE LOADED - Using Lead Capture System');
    console.log('✅ Old email system disabled - All submissions go to /api/iq/leads');
    console.log('🔄 Cache busted - This should show NEW version');
    
    // Add visual indicator on page
    if (typeof document !== 'undefined') {
      const indicator = document.createElement('div');
      indicator.innerHTML = '🧠 v2.1 LOADED';
      indicator.style.cssText = 'position:fixed;top:10px;right:10px;background:#7A00FF;color:white;padding:8px;border-radius:8px;z-index:9999;font-size:12px;';
      document.body.appendChild(indicator);
      setTimeout(() => indicator.remove(), 3000);
    }
    
    // Auto-initialize when the popup opens
    window.addEventListener('load', function() {
      if (document.getElementById('app-iq-test')) {
        console.log('🧠 Initializing Brain Bear IQ Test v2.0');
        BrainBearIQTest.init();
      }
    });
  </script>
</body>
</html>

Smart as F★CK Gummies

Vegan

Gluten Free

Non GMO

No Artificial Colors

Bullshit Free

Sugar Free

WHAT THE F★CK IS IN BRAIN BEAR?

Lion's Mane Mushroom

Citicoline (Cognizin®)

L-Theanine (Green Tea)

Guarana

Magnesium Glycinate

Vitamin B6 (as P-5-P)

CLINICALLY DOSED. ZERO BULLSH*T.

Lion's Mane 1,000mg

Cognizin® 250mg

L-Theanine 200mg

Guarana 100mg

Magnesium 150mg

Vitamin B6 8mg

Full Ingredients

F★CKS GIVEN ABOUT BRAIN HEALTH

NO FAIRY DUST ALLOWED

CRAVEABLE AND FUNCTIONAL

BUILT FOR MINDS ON OVERDRIVE

ZERO SUGAR. ZERO CRASH.

BACKED BY SCIENCE, NOT VIBES

365-DAY BRAIN-BACK GUARANTEE

NO FAIRY DUST ALLOWED

ZERO SUGAR. ZERO CRASH.

CRAVEABLE AND FUNCTIONAL

BACKED BY SCIENCE, NOT VIBES

BUILT FOR MINDS ON OVERDRIVE

365-DAY BRAIN-BACK GUARANTEE

365-Day Brain-Back Guarantee

WHY WE SH*T ON THE REST!

Unlock Your Cognitive Potential

Pop a Bear. Get Sh!t Done!

Pop a Bear. Get Sh!t Done!

Our store accepts: