refactor: redesign pods page with bento grid layout and improved benefits sections

- Increased CloudHeroNew vertical padding on large screens (lg:py-16 to lg:py-24)
- Reduced spacing between description paragraphs in CloudHeroNew (mt-4 to mt-2)
- Created PodsBento component with animated bento grid showcasing pod benefits
- Added animations for data control, connectivity, security, and resilience features
- Refactored PodsDesign from accordion layout to centered intro with 4-column grid
- Create

src/pages/cloud/CloudHeroNew.tsx

@@ -10,7 +10,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
         style={{ backgroundImage: "url('/images/cloudhero4.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-16">
+        <div className="px-6 py-16 lg:py-24">
           <div className="max-w-2xl lg:pl-6">
             <Eyebrow>
               MYCELIUM CLOUD
@@ -21,7 +21,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
             <p className="mt-6 text-lg text-gray-600">
               Run compute, storage, and AI resources on infrastructure you control.
             </p>
-            <p className="mt-4 text-lg text-gray-600">
+            <p className="mt-2 text-lg text-gray-600">
               The Mycelium Cloud runs on a distributed grid of independent nodes, 
               delivering secure, scalable performance wherever your users or data live.
             </p>