Update index.html

index.html

@@ -434,57 +434,59 @@
     </section>
 
     <!-- Overview -->
-    <div class="container">
-      <div class="grid lg:grid-cols-5 gap-8 items-start">
-        <!-- Left: narrative -->
-        <div class="lg:col-span-3" data-aos="fade-up">
-          <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">Overview</h2>
-          <p class="mt-4 text-slate-300 leading-relaxed">
-            MedSwin frames clinical QA as an <span class="font-semibold text-slate-100">evidence-constrained decision pipeline</span>.
-            Every answer is gated by evidence sufficiency, bounded by a strict context budget, and accompanied by a
-            replayable trace suitable for audit and safety review.
-          </p>
-    
-          <div class="mt-6 grid sm:grid-cols-3 gap-4">
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="message-square" class="icon"></i> Answer
+    <section id="overview" class="section">
+      <div class="container">
+        <div class="grid lg:grid-cols-5 gap-8 items-start">
+          <!-- Left: narrative -->
+          <div class="lg:col-span-3" data-aos="fade-up">
+            <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">Overview</h2>
+            <p class="mt-4 text-slate-300 leading-relaxed">
+              MedSwin frames clinical QA as an <span class="font-semibold text-slate-100">evidence-constrained decision pipeline</span>.
+              Every answer is gated by evidence sufficiency, bounded by a strict context budget, and accompanied by a
+              replayable trace suitable for audit and safety review.
+            </p>
+      
+            <div class="mt-6 grid sm:grid-cols-3 gap-4">
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="message-square" class="icon"></i> Answer
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Clinically phrased, uncertainty-aware output generated only when evidence gates are satisfied.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Clinically phrased, uncertainty-aware output generated only when evidence gates are satisfied.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="files" class="icon"></i> Evidence bundle
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="files" class="icon"></i> Evidence bundle
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Compact EMR + guideline passages selected under token and diversity constraints.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Compact EMR + guideline passages selected under token and diversity constraints.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="route" class="icon"></i> Trace
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="route" class="icon"></i> Trace
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Structured artifact log: retrieval, ranking, policies, safety checks.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Structured artifact log: retrieval, ranking, policies, safety checks.
-              </p>
             </div>
           </div>
+      
+          <!-- Right: compact system summary -->
+          <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
+            <div class="font-extrabold text-lg tracking-tight mb-3">Why MedSwin is different</div>
+            <ul class="space-y-3 text-sm text-slate-300">
+              <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Refuses to answer when evidence is insufficient</li>
+              <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Explicit EMR + CPG coverage requirements</li>
+              <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Deterministic retrieval policies (no silent guessing)</li>
+              <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Local-deployable, auditable by design</li>
+            </ul>
+          </aside>
         </div>
-    
-        <!-- Right: compact system summary -->
-        <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
-          <div class="font-extrabold text-lg tracking-tight mb-3">Why MedSwin is different</div>
-          <ul class="space-y-3 text-sm text-slate-300">
-            <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Refuses to answer when evidence is insufficient</li>
-            <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Explicit EMR + CPG coverage requirements</li>
-            <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Deterministic retrieval policies (no silent guessing)</li>
-            <li class="flex gap-2"><i data-lucide="check" class="icon text-emerald-300"></i> Local-deployable, auditable by design</li>
-          </ul>
-        </aside>
       </div>
-    </div>
+    </section>
 
     <!-- Contributions -->
     <section id="contributions" class="section">
@@ -863,161 +865,171 @@ sequenceDiagram
     </section>
 
     <!-- Retrieval -->
-    <div class="container">
-      <div class="grid lg:grid-cols-5 gap-8 items-start">
-        <div class="lg:col-span-3" data-aos="fade-up">
-          <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
-            Two-Stage Retrieval & Calibrated Reranking
-          </h2>
-          <p class="mt-4 text-slate-300 leading-relaxed">
-            Evidence selection is separated into recall-oriented candidate generation and precision-oriented reranking.
-            This avoids early truncation while enabling deterministic, policy-aware inclusion decisions.
-          </p>
-    
-          <div class="mt-6 space-y-4">
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="scan-search" class="icon"></i> Stage 1 — Candidate generation
+    <section id="retrieval" class="section">
+      <div class="container">
+        <div class="grid lg:grid-cols-5 gap-8 items-start">
+          <div class="lg:col-span-3" data-aos="fade-up">
+            <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
+              Two-Stage Retrieval & Calibrated Reranking
+            </h2>
+            <p class="mt-4 text-slate-300 leading-relaxed">
+              Evidence selection is separated into recall-oriented candidate generation and precision-oriented reranking.
+              This avoids early truncation while enabling deterministic, policy-aware inclusion decisions.
+            </p>
+      
+            <div class="mt-6 space-y-4">
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="scan-search" class="icon"></i> Stage 1 — Candidate generation
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Dense ANN retrieval is unioned with BM25 to preserve rare clinical terms, abbreviations, and lab-specific phrasing.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Dense ANN retrieval is unioned with BM25 to preserve rare clinical terms, abbreviations, and lab-specific phrasing.
-              </p>
-            </div>
-    
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="badge-check" class="icon"></i> Stage 2 — Long-context reranking
+      
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="badge-check" class="icon"></i> Stage 2 — Long-context reranking
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  A biomedical LLM reranker scores each passage and outputs calibrated probabilities usable as policy thresholds.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                A biomedical LLM reranker scores each passage and outputs calibrated probabilities usable as policy thresholds.
-              </p>
-            </div>
-    
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="sliders" class="icon"></i> Policy-aware selection
+      
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="sliders" class="icon"></i> Policy-aware selection
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Final selection enforces EMR + guideline sufficiency, diversity (MMR-style), and a strict token budget.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Final selection enforces EMR + guideline sufficiency, diversity (MMR-style), and a strict token budget.
-              </p>
             </div>
           </div>
+      
+          <!-- Right: sufficiency gate -->
+          <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
+            <div class="font-extrabold text-lg tracking-tight mb-3">Evidence acceptance gate</div>
+            <ul class="space-y-3 text-sm text-slate-300">
+              <li class="flex gap-2"><i data-lucide="book-open-check" class="icon"></i> Required guideline recommendations present</li>
+              <li class="flex gap-2"><i data-lucide="file-heart" class="icon"></i> Patient-specific EMR signals included</li>
+              <li class="flex gap-2"><i data-lucide="layers" class="icon"></i> Redundancy reduced under budget</li>
+              <li class="flex gap-2"><i data-lucide="shield-alert" class="icon"></i> Safety critic approves synthesis</li>
+            </ul>
+          </aside>
         </div>
-    
-        <!-- Right: sufficiency gate -->
-        <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
-          <div class="font-extrabold text-lg tracking-tight mb-3">Evidence acceptance gate</div>
-          <ul class="space-y-3 text-sm text-slate-300">
-            <li class="flex gap-2"><i data-lucide="book-open-check" class="icon"></i> Required guideline recommendations present</li>
-            <li class="flex gap-2"><i data-lucide="file-heart" class="icon"></i> Patient-specific EMR signals included</li>
-            <li class="flex gap-2"><i data-lucide="layers" class="icon"></i> Redundancy reduced under budget</li>
-            <li class="flex gap-2"><i data-lucide="shield-alert" class="icon"></i> Safety critic approves synthesis</li>
-          </ul>
-        </aside>
       </div>
-    </div>
+    </section>
+
+    <!-- Section spacer -->
+    <div class="h-20 lg:h-28"></div>
     
     <!-- Training -->
-    <div class="container">
-      <div class="grid lg:grid-cols-5 gap-8 items-start">
-        <div class="lg:col-span-3" data-aos="fade-up">
-          <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
-            Data, Training & Distillation
-          </h2>
-          <p class="mt-4 text-slate-300 leading-relaxed">
-            MedSwin’s deployable 7B model is trained for reliability rather than raw scale,
-            combining large-scale augmentation, supervised fine-tuning, and knowledge distillation.
-          </p>
-    
-          <div class="mt-6 space-y-4">
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold">A · Data augmentation</div>
-              <p class="text-sm text-slate-300 mt-2">
-                Paraphrasing, formatting variants, deduplication, and medical consistency checks expand coverage without semantic drift.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold">B · Supervised fine-tuning</div>
-              <p class="text-sm text-slate-300 mt-2">
-                Aligns the student to clinical instruction style, tone control, and structured answers.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold">C · Knowledge distillation</div>
-              <p class="text-sm text-slate-300 mt-2">
-                Hard labels expand task coverage; soft labels preserve calibration and uncertainty from a larger instructor.
-              </p>
+    <section id="training" class="section">
+      <div class="container">
+        <div class="grid lg:grid-cols-5 gap-8 items-start">
+          <div class="lg:col-span-3" data-aos="fade-up">
+            <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
+              Data, Training & Distillation
+            </h2>
+            <p class="mt-4 text-slate-300 leading-relaxed">
+              MedSwin’s deployable 7B model is trained for reliability rather than raw scale,
+              combining large-scale augmentation, supervised fine-tuning, and knowledge distillation.
+            </p>
+      
+            <div class="mt-6 space-y-4">
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold">A · Data augmentation</div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Paraphrasing, formatting variants, deduplication, and medical consistency checks expand coverage without semantic drift.
+                </p>
+              </div>
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold">B · Supervised fine-tuning</div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Aligns the student to clinical instruction style, tone control, and structured answers.
+                </p>
+              </div>
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold">C · Knowledge distillation</div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Hard labels expand task coverage; soft labels preserve calibration and uncertainty from a larger instructor.
+                </p>
+              </div>
             </div>
           </div>
+      
+          <!-- Right: why KD -->
+          <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
+            <div class="font-extrabold text-lg tracking-tight mb-3">Why distillation?</div>
+            <ul class="space-y-3 text-sm text-slate-300">
+              <li class="flex gap-2"><i data-lucide="cpu" class="icon"></i> Enables local inference on modest GPUs</li>
+              <li class="flex gap-2"><i data-lucide="shield-check" class="icon"></i> Preserves calibrated reasoning behaviour</li>
+              <li class="flex gap-2"><i data-lucide="settings" class="icon"></i> PEFT-friendly (LoRA / QLoRA)</li>
+              <li class="flex gap-2"><i data-lucide="lock" class="icon"></i> Institution-controlled deployment</li>
+            </ul>
+          </aside>
         </div>
-    
-        <!-- Right: why KD -->
-        <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
-          <div class="font-extrabold text-lg tracking-tight mb-3">Why distillation?</div>
-          <ul class="space-y-3 text-sm text-slate-300">
-            <li class="flex gap-2"><i data-lucide="cpu" class="icon"></i> Enables local inference on modest GPUs</li>
-            <li class="flex gap-2"><i data-lucide="shield-check" class="icon"></i> Preserves calibrated reasoning behaviour</li>
-            <li class="flex gap-2"><i data-lucide="settings" class="icon"></i> PEFT-friendly (LoRA / QLoRA)</li>
-            <li class="flex gap-2"><i data-lucide="lock" class="icon"></i> Institution-controlled deployment</li>
-          </ul>
-        </aside>
       </div>
-    </div>
+    </section>
+
+    <!-- Section spacer -->
+    <div class="h-20 lg:h-28"></div>
 
     <!-- Evaluation -->
-    <div class="container">
-      <div class="grid lg:grid-cols-5 gap-8 items-start">
-        <div class="lg:col-span-3" data-aos="fade-up">
-          <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
-            Evaluation & Safety
-          </h2>
-          <p class="mt-4 text-slate-300 leading-relaxed">
-            MedSwin evaluates clinical QA systems beyond answer accuracy, focusing on evidence quality,
-            guideline compliance, and runtime safety behaviour.
-          </p>
-    
-          <div class="mt-6 grid sm:grid-cols-3 gap-4">
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="search" class="icon"></i> Retrieval quality
+    <section id="evaluation" class="section">
+      <div class="container">
+        <div class="grid lg:grid-cols-5 gap-8 items-start">
+          <div class="lg:col-span-3" data-aos="fade-up">
+            <h2 class="text-3xl lg:text-4xl font-extrabold tracking-tight">
+              Evaluation & Safety
+            </h2>
+            <p class="mt-4 text-slate-300 leading-relaxed">
+              MedSwin evaluates clinical QA systems beyond answer accuracy, focusing on evidence quality,
+              guideline compliance, and runtime safety behaviour.
+            </p>
+      
+            <div class="mt-6 grid sm:grid-cols-3 gap-4">
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="search" class="icon"></i> Retrieval quality
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Evidence relevance and coverage under a fixed token budget.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Evidence relevance and coverage under a fixed token budget.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="book-open-check" class="icon"></i> Guideline coverage
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="book-open-check" class="icon"></i> Guideline coverage
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Presence of actionable recommendations and contraindications.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Presence of actionable recommendations and contraindications.
-              </p>
-            </div>
-            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
-              <div class="font-extrabold inline-flex items-center gap-2">
-                <i data-lucide="check-check" class="icon"></i> Faithfulness
+              <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+                <div class="font-extrabold inline-flex items-center gap-2">
+                  <i data-lucide="check-check" class="icon"></i> Faithfulness
+                </div>
+                <p class="text-sm text-slate-300 mt-2">
+                  Final answers remain grounded in cited evidence only.
+                </p>
               </div>
-              <p class="text-sm text-slate-300 mt-2">
-                Final answers remain grounded in cited evidence only.
-              </p>
             </div>
           </div>
+      
+          <!-- Right: safety behaviour -->
+          <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
+            <div class="font-extrabold text-lg tracking-tight mb-3">Runtime safety behaviour</div>
+            <ul class="space-y-3 text-sm text-slate-300">
+              <li class="flex gap-2"><i data-lucide="help-circle" class="icon"></i> Clarifies when evidence is missing</li>
+              <li class="flex gap-2"><i data-lucide="quote" class="icon"></i> Enforces citation-required answers</li>
+              <li class="flex gap-2"><i data-lucide="shield-alert" class="icon"></i> Safety critic checks contraindications</li>
+              <li class="flex gap-2"><i data-lucide="users" class="icon"></i> Designed for human-in-the-loop use</li>
+            </ul>
+          </aside>
         </div>
-    
-        <!-- Right: safety behaviour -->
-        <aside class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/40 p-6" data-aos="fade-up">
-          <div class="font-extrabold text-lg tracking-tight mb-3">Runtime safety behaviour</div>
-          <ul class="space-y-3 text-sm text-slate-300">
-            <li class="flex gap-2"><i data-lucide="help-circle" class="icon"></i> Clarifies when evidence is missing</li>
-            <li class="flex gap-2"><i data-lucide="quote" class="icon"></i> Enforces citation-required answers</li>
-            <li class="flex gap-2"><i data-lucide="shield-alert" class="icon"></i> Safety critic checks contraindications</li>
-            <li class="flex gap-2"><i data-lucide="users" class="icon"></i> Designed for human-in-the-loop use</li>
-          </ul>
-        </aside>
       </div>
-    </div>
-
-
+    </section>
 
     <!-- Team -->
     <section id="team" class="section">