feat: redesign CloudArchitecture section with dark theme and animated icons

- Added animated icon components (MeshNetworkIcon, SovereignComputer, DeterministicOrchestration) to architecture cards
- Updated styling to match dark theme with bordered container layout consistent with HomeHosting section
- Improved card layout with better spacing, hover effects, and visual hierarchy

src/pages/cloud/CloudArchitecture.tsx

@@ -1,65 +1,90 @@
+'use client';
+
 import { Container } from '@/components/Container'
 import { Eyebrow, H3, P } from '@/components/Texts'
 import { Button } from '@/components/Button'
+import { MeshNetworkIcon } from './animations/MeshNetworkIcon'
+import { SovereignComputer } from './animations/SovereignComputer'
+import { DeterministicOrchestration } from './animations/DeterministicOrchestration'
 
 const architecture = [
   {
     title: 'Mesh Networking Layer',
     description:
       'Every node receives a cryptographic network identity and secure routing path.',
+    icon: <MeshNetworkIcon className="mb-4" />,   // ✅ stored as const JSX
   },
   {
     title: 'Sovereign Compute Layer',
     description:
       'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
+    icon: <SovereignComputer className="mb-4" />,
   },
   {
     title: 'Deterministic Orchestration',
     description:
       'K3s clusters deploy predictably, verifiably, and remain drift-free.',
+    icon: <DeterministicOrchestration className="mb-4" />,
   },
 ]
 
 export function CloudArchitecture() {
   return (
-    <section className="bg-white py-24 lg:py-32">
-      <Container>
-        <div className="mx-auto max-w-4xl text-center">
-          <Eyebrow>ARCHITECTURE</Eyebrow>
-          <H3 className="mt-6 text-gray-900">
-            How Mycelium Cloud Works
-          </H3>
-          <P className="mt-6 text-gray-600">
-            Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
-            identity, routing, and state verified at the protocol level.
-          </P>
-        </div>
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
 
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
-          {architecture.map((layer) => (
-            <div
-              key={layer.title}
-              className="rounded-3xl border border-slate-200 bg-gray-50/40 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
-            >
-              <h3 className="text-xl font-semibold text-gray-900">
-                {layer.title}
-              </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                {layer.description}
-              </p>
-            </div>
-          ))}
-        </div>
+      {/* ✅ Top horizontal spacer like HomeHosting */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
-        <div className="mx-auto mt-16 flex justify-center gap-4">
-          <Button variant="solid" color="cyan" href="/start">
-            Get Started
-          </Button>
-          <Button variant="outline" color="gray" href="/docs">
-            Explore Docs
-          </Button>
-        </div>
-      </Container>
+      {/* ✅ Boxed container with matching spacing */}
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
+        <Container>
+          <div className="mx-auto max-w-4xl sm:text-center">
+            <Eyebrow className="text-cyan-400">ARCHITECTURE</Eyebrow>
+
+            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+              How Mycelium Cloud Works
+            </H3>
+
+            <P className="mt-6 text-lg text-gray-300">
+              Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
+              identity, routing, and state verified at the protocol level.
+            </P>
+          </div>
+
+          {/* ✅ Card layout spacing & grid match HomeHosting */}
+          <ul
+            role="list"
+            className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
+                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
+          >
+            {architecture.map((layer) => (
+              <li
+                key={layer.title}
+                className="rounded-xl border border-gray-800 bg-[#111]/60 p-6"
+              >
+                {layer.icon}   {/* ✅ this now works */}
+                <h3 className="text-lg font-semibold text-white">{layer.title}</h3>
+                <p className="mt-2 text-gray-400 leading-snug">{layer.description}</p>
+              </li>
+            ))}
+          </ul>
+
+          {/* ✅ Matching button spacing and layout */}
+          <div className="mx-auto mt-12 flex justify-center gap-6">
+            <Button variant="solid" color="cyan" href="/start">
+              Get Started
+            </Button>
+            <Button variant="outline" color="gray" href="/docs">
+              Explore Docs
+            </Button>
+          </div>
+        </Container>
+      </div>
+
+      {/* ✅ bottom border + bottom spacer to match */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   )
 }