Brain Bear IQ Test

Unlock Your Cognitive Potential

Take the scientifically validated Brain Bear IQ 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>

Unlock Your Cognitive Potential

Your cart -