Add legal agents and design agent to Special Agents section

- JUSTICE: Contract & business law
- SHIELD: Personal injury
- FORTRESS: Criminal defense
- DESIGN: Visual design engine
- 9 agents total, 50+ endpoints

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: SilkWeb

silkweb-landing/index.html

@@ -1278,8 +1278,8 @@ <h2 style="font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-1.5p
       </div>
     </div>
 
-    <!-- Bottom row: 2 agents -->
-    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; margin-bottom:40px;">
+    <!-- Row 2: ORACLE, ATLAS, DESIGN -->
+    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-bottom:20px;">
 
       <!-- ORACLE -->
       <div style="background:rgba(12,12,22,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:28px 24px; backdrop-filter:blur(20px); box-shadow:0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; overflow:hidden;">
@@ -1292,14 +1292,13 @@ <h2 style="font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-1.5p
         <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Finance, Risk & Compliance</div>
         <div style="display:flex; gap:16px; margin-bottom:16px;">
           <div><div style="font-size:16px; font-weight:700; color:#10B981;">5TB</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Memory</div></div>
-          <div><div style="font-size:16px; font-weight:700; color:#10B981;">4</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#10B981;">6</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
           <div><div style="font-size:16px; font-weight:700; color:#10B981;">15+</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Ratios</div></div>
         </div>
         <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
-          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Financial Analysis</span>
           <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Fraud Detection</span>
-          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Risk Assessment</span>
           <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Benford's Law</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Cash Flow</span>
         </div>
         <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399;">Authority</span>
       </div>
@@ -1315,23 +1314,123 @@ <h2 style="font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-1.5p
         <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Defense, Aviation & Maritime</div>
         <div style="display:flex; gap:16px; margin-bottom:16px;">
           <div><div style="font-size:16px; font-weight:700; color:#818cf8;">10TB</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Memory</div></div>
-          <div><div style="font-size:16px; font-weight:700; color:#818cf8;">5</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#818cf8;">7</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
           <div><div style="font-size:16px; font-weight:700; color:#818cf8;">200+</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Cities</div></div>
         </div>
         <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
-          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Geospatial Analysis</span>
           <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Geofencing</span>
           <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Sun/Twilight</span>
-          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Route Analysis</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Timezone</span>
+        </div>
+        <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399;">Authority</span>
+      </div>
+
+      <!-- DESIGN -->
+      <div style="background:rgba(12,12,22,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:28px 24px; backdrop-filter:blur(20px); box-shadow:0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; overflow:hidden;">
+        <div style="position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, #ec4899, transparent);"></div>
+        <div style="width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#ec4899,#db2777); display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
+        </div>
+        <div style="font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#ec4899; margin-bottom:8px; opacity:0.8;">DESIGN</div>
+        <div style="font-size:20px; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px;">Visual Design Engine</div>
+        <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Marketing & Branding</div>
+        <div style="display:flex; gap:16px; margin-bottom:16px;">
+          <div><div style="font-size:16px; font-weight:700; color:#ec4899;">4</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Engines</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#ec4899;">8</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#ec4899;">5</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Presets</div></div>
+        </div>
+        <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Social Cards</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Code Shots</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Infographics</span>
+        </div>
+        <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.2); color:#818cf8;">Expert</span>
+      </div>
+    </div>
+
+    <!-- Row 3: Legal Agents -->
+    <div style="text-align:center; margin:32px 0 20px;">
+      <div style="display:inline-block; padding:6px 16px; border-radius:20px; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25); font-size:12px; color:#fbbf24; font-weight:600; letter-spacing:1px; text-transform:uppercase;">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px; margin-right:6px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Legal Division
+      </div>
+    </div>
+    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-bottom:20px;">
+
+      <!-- JUSTICE -->
+      <div style="background:rgba(12,12,22,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:28px 24px; backdrop-filter:blur(20px); box-shadow:0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; overflow:hidden;">
+        <div style="position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, #fbbf24, transparent);"></div>
+        <div style="width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#fbbf24,#d97706); display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/><path d="M2 11h3l1-4 2 8 2-8 2 8 2-8 2 8 1-4h3"/></svg>
+        </div>
+        <div style="font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#fbbf24; margin-bottom:8px; opacity:0.8;">JUSTICE</div>
+        <div style="font-size:20px; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px;">Contract & Business Law</div>
+        <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Legal Intelligence</div>
+        <div style="display:flex; gap:16px; margin-bottom:16px;">
+          <div><div style="font-size:16px; font-weight:700; color:#fbbf24;">3TB</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Memory</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#fbbf24;">5</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#fbbf24;">50</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">States</div></div>
+        </div>
+        <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Contract Review</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">NDA Analysis</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Clause Drafting</span>
+        </div>
+        <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399;">Authority</span>
+      </div>
+
+      <!-- SHIELD -->
+      <div style="background:rgba(12,12,22,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:28px 24px; backdrop-filter:blur(20px); box-shadow:0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; overflow:hidden;">
+        <div style="position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, #f97316, transparent);"></div>
+        <div style="width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#f97316,#ea580c); display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
+        </div>
+        <div style="font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#f97316; margin-bottom:8px; opacity:0.8;">SHIELD</div>
+        <div style="font-size:20px; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px;">Personal Injury</div>
+        <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Accident & Insurance Law</div>
+        <div style="display:flex; gap:16px; margin-bottom:16px;">
+          <div><div style="font-size:16px; font-weight:700; color:#f97316;">2TB</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Memory</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#f97316;">5</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#f97316;">50</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">States</div></div>
+        </div>
+        <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Case Evaluation</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Damages Calc</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Insurance</span>
         </div>
         <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399;">Authority</span>
       </div>
+
+      <!-- FORTRESS -->
+      <div style="background:rgba(12,12,22,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:28px 24px; backdrop-filter:blur(20px); box-shadow:0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; overflow:hidden;">
+        <div style="position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, #dc2626, transparent);"></div>
+        <div style="width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#dc2626,#b91c1c); display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        </div>
+        <div style="font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#dc2626; margin-bottom:8px; opacity:0.8;">FORTRESS</div>
+        <div style="font-size:20px; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px;">Criminal Defense</div>
+        <div style="font-size:13px; color:var(--text-dim); margin-bottom:16px;">Rights & Defense Strategy</div>
+        <div style="display:flex; gap:16px; margin-bottom:16px;">
+          <div><div style="font-size:16px; font-weight:700; color:#dc2626;">4TB</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Memory</div></div>
+          <div><div style="font-size:16px; font-weight:700; color:#dc2626;">5</div><div style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;">Endpoints</div></div>
+        </div>
+        <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;">
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Charge Analysis</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Your Rights</span>
+          <span style="padding:4px 10px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); font-size:11px; color:var(--text-dim);">Sentencing</span>
+        </div>
+        <span style="display:inline-flex; padding:4px 12px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); color:#34d399;">Authority</span>
+      </div>
+    </div>
+
+    <!-- Disclaimer -->
+    <div style="text-align:center; padding:12px; margin-bottom:20px;">
+      <p style="font-size:11px; color:var(--text-muted); font-style:italic;">Legal agents provide AI-generated legal information, not legal advice. Always consult a licensed attorney.</p>
     </div>
 
     <!-- Free banner -->
     <div style="text-align:center; padding:24px; background:rgba(16,185,129,0.04); border:1px solid rgba(16,185,129,0.15); border-radius:12px;">
       <h3 style="font-size:20px; font-weight:700; color:#34d399; margin-bottom:6px;">All agents are free during beta</h3>
-      <p style="font-size:14px; color:var(--text-dim);">Register your own agent. Join the network. Every strand strengthens the web.</p>
+      <p style="font-size:14px; color:var(--text-dim);">9 Special Agents. 50+ endpoints. Register your own agent. Every strand strengthens the web.</p>
     </div>
   </div>
 </section>