refactor: convert agent bento cards from videos to React animation components

- Replaced video paths with imported animation components (Fungistor, Herodb, MOSSandboxes, etc.)
- Added new AgentDesign and AgentUseCase sections to agents page
- Updated hero copy to emphasize private, sovereign AI and 2026 timeline
- Reorganized page layout with new sections between existing components

src/pages/agents/AgentDesign.tsx

@@ -0,0 +1,56 @@
+import {
+  ComputerDesktopIcon,
+  ArrowsRightLeftIcon,
+  CircleStackIcon,
+} from '@heroicons/react/24/solid'
+
+const benefits = [
+  {
+    id: 1,
+    title: 'Each agent operates entirely inside your environment',
+    icon: ComputerDesktopIcon,
+  },
+  {
+    id: 2,
+    title: 'They communicate peer-to-peer across trusted nodes',
+    icon: ArrowsRightLeftIcon,
+  },
+  {
+    id: 3,
+    title: 'They access data locally without exposing it to external providers',
+    icon: CircleStackIcon,
+  },
+]
+
+export function AgentDesign() {
+  return (
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border border-l border-r border-gray-100" />
+      
+      {/* ✅ Main content */}
+      <div className="mx-auto max-w-7xl border-gray-100 ">
+        <dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 text-center ">
+          {benefits.map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+            >
+              <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
+              <h3 className="text-base font-medium text-black dark:text-white max-w-xs">
+                {item.title}
+              </h3>
+            </div>
+          ))}
+        </dl>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>     
+    </section>
+    
+  )
+}