feat: enhance landing page with architecture diagram and OS support grid

Author: sinsniwal

docs/index.html

@@ -57,6 +57,43 @@ <h3><i data-lucide="lock"></i> Secure Governance</h3>
             </div>
         </section>
 
+        <!-- OS Support -->
+        <section class="os-support">
+            <h3>Native knowledge across all ecosystems</h3>
+            <div class="os-grid">
+                <div class="os-item"><i data-lucide="apple"></i> macOS</div>
+                <div class="os-item"><i data-lucide="cpu"></i> Linux (Ubuntu, Arch, Fedora)</div>
+                <div class="os-item"><i data-lucide="laptop"></i> Windows PowerShell</div>
+                <div class="os-item"><i data-lucide="server"></i> FreeBSD</div>
+            </div>
+        </section>
+
+        <!-- Architecture Section -->
+        <section class="architecture">
+            <h2>Under the Hood</h2>
+            <div class="flow-container">
+                <div class="flow-step">
+                    <div class="step-icon"><i data-lucide="message-square"></i></div>
+                    <span>Plain English</span>
+                </div>
+                <div class="arrow"><i data-lucide="chevron-right"></i></div>
+                <div class="flow-step highlight">
+                    <div class="step-icon"><i data-lucide="shield-alert"></i></div>
+                    <span>Governance Engine</span>
+                </div>
+                <div class="arrow"><i data-lucide="chevron-right"></i></div>
+                <div class="flow-step">
+                    <div class="step-icon"><i data-lucide="database"></i></div>
+                    <span>Ollama (Local LLM)</span>
+                </div>
+                <div class="arrow"><i data-lucide="chevron-right"></i></div>
+                <div class="flow-step">
+                    <div class="step-icon"><i data-lucide="play"></i></div>
+                    <span>Command Runner</span>
+                </div>
+            </div>
+        </section>
+
         <!-- Install Section -->
         <section class="install-section">
             <div class="install-container">

docs/style.css

@@ -80,6 +80,7 @@ h1 {
   line-height: 1.1;
   margin-bottom: 1.5rem;
   background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -132,7 +133,7 @@ h1 {
 
 /* Features */
 .features {
-  padding: 6rem 0;
+  padding: 6rem 0 3rem;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
@@ -154,12 +155,109 @@ h1 {
 .feature-card h3 {
   font-size: 1.5rem;
   margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.feature-card h3 i {
+  color: var(--primary);
 }
 
 .feature-card p {
   color: var(--text-muted);
 }
 
+/* OS Support */
+.os-support {
+  padding: 2rem 0 6rem;
+  text-align: center;
+}
+
+.os-support h3 {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 2rem;
+}
+
+.os-grid {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2.5rem;
+}
+
+.os-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-muted);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.os-item i {
+  width: 20px;
+  height: 20px;
+}
+
+/* Architecture */
+.architecture {
+  padding: 6rem 0;
+  text-align: center;
+  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
+}
+
+.architecture h2 {
+  font-size: 2.5rem;
+  margin-bottom: 4rem;
+}
+
+.flow-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.flow-step {
+  padding: 1.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 160px;
+}
+
+.flow-step span {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.flow-step.highlight {
+  border-color: var(--primary);
+  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
+}
+
+.flow-step.highlight span {
+  color: var(--text-main);
+}
+
+.step-icon {
+  color: var(--primary);
+}
+
+.arrow {
+  color: var(--border);
+}
+
 /* Install Section */
 .install-section {
   padding: 6rem 0;