docs: add Plain English Analogy / ELI5 cards for FrugalGPT and RouterBench to make academic theories intuitive

docs/index.html

@@ -684,6 +684,18 @@
                     </div>
                 </div>
 
+                <!-- Plain English Analogy / ELI5 for FrugalGPT -->
+                <div class="sub-card" style="margin-top: 1.5rem; background: rgba(109, 40, 217, 0.02); border-color: rgba(109, 40, 217, 0.15); display: flex; gap: 1rem; align-items: flex-start;">
+                    <span style="font-size: 1.5rem;">💡</span>
+                    <div>
+                        <h4 style="font-family: var(--font-outfit); font-weight: 700; color: var(--accent-violet); margin-bottom: 0.25rem;">Plain English Analogy: How FrugalGPT works</h4>
+                        <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5;">
+                            Imagine you want to fry a simple egg. Instead of hiring a Michelin-star chef (an expensive cloud model like GPT-4o), you try a fast-food joint first (a free local model like Ollama). 
+                            If the fast food doesn't taste right (fails format or quality checks), you throw it away and immediately escalate to the fine-dining chef. This sequential escalation saves you massive API costs because most queries are simple "eggs" that local models can handle perfectly!
+                        </p>
+                    </div>
+                </div>
+
                 <!-- Live Cascade Simulator Box -->
                 <div class="simulator-box">
                     <h3>🎛️ Interactive Cascade Simulator</h3>
@@ -789,6 +801,20 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Plain English Analogy / ELI5 for RouterBench -->
+            <div class="sub-card" style="margin-top: 1.5rem; background: rgba(109, 40, 217, 0.02); border-color: rgba(109, 40, 217, 0.15); display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2rem;">
+                <span style="font-size: 1.5rem;">💡</span>
+                <div>
+                    <h4 style="font-family: var(--font-outfit); font-weight: 700; color: var(--accent-violet); margin-bottom: 0.25rem;">Plain English Analogy: Utility Score & AIQ</h4>
+                    <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5;">
+                        Choosing an AI model is like shopping. You want the highest quality item, but at the lowest price. 
+                        The **Utility Score** calculates this: <code>Score = Quality - Cost</code>. If you are rich (high \(\lambda\)), you care more about premium quality; if you're on a budget (low \(\lambda\)), price becomes your primary decision factor. 
+                        **AIQ (Area Under the Curve)** is simply your "shopping efficiency score" across all possible budgets—a smart router pushes this score as high as possible compared to random buying.
+                    </p>
+                </div>
+            </div>
+
             <!-- Research Papers Reference -->
             <div class="glass-card" style="margin-top: 2rem;">
                 <h2>📚 Original Research Papers & Reference Hub</h2>