new dropdown content from Mik

src/pages/cloud/CloudArchitecture.tsx

@@ -0,0 +1,92 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Decentralized Infrastructure',
+    description:
+      'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
+    bullets: [
+      'Unique Mycelium IP addresses assigned to every node.',
+      'Peer-to-peer mesh networking links services across nodes.',
+      'End-to-end encryption keeps traffic sealed inside the fabric.',
+      'No public IP exposure—everything is addressable via Mycelium IPs.',
+    ],
+  },
+  {
+    title: 'Network Flow',
+    description:
+      'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
+    bullets: [
+      'User requests enter through the encrypted Mycelium network.',
+      'Traffic routes directly to cluster nodes without intermediate hops.',
+      'Services answer over the same mesh—no ingress controller required.',
+      'Operational visibility without exposing public attack surface.',
+    ],
+  },
+  {
+    title: 'Kubernetes Management',
+    description:
+      'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
+    bullets: [
+      'Full K3s deployment and lifecycle management built-in.',
+      'IPv6-native networking ensures deterministic service discovery.',
+      'Multi-master topologies with automatic failover for resilience.',
+      'Drift-free upgrades orchestrated through smart contracts.',
+    ],
+  },
+]
+
+export function CloudArchitecture() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Built on a sovereign, encrypted delivery mesh.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
+            networking with deterministic K3s orchestration. Every layer is
+            designed to keep workloads sovereign, observable, and effortless to
+            operate.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center gap-3">
+                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
+                  •
+                </span>
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {section.title}
+                </h3>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudCTA.tsx

@@ -7,13 +7,16 @@ export function CloudCTA() {
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
           <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-            Ready Today
+            Launch Today
           </p>
           <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+            Put sovereign Kubernetes into production on the ThreeFold Grid.
           </h2>
           <p className="mt-6 text-lg text-gray-600">
-            Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
+            Provision multi-master clusters, integrate quantum-safe storage, and
+            expose services worldwide without leaving the Mycelium mesh. Our
+            team will help you launch deterministic workloads that stay private,
+            compliant, and always-on.
           </p>
           <div className="mt-10 flex justify-center">
             <Button

src/pages/cloud/CloudFeatures.tsx

@@ -0,0 +1,125 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureSections = [
+  {
+    title: 'Mycelium Networking',
+    description:
+      'Ultra-fast, decentralized networking inspired by nature to keep services reachable without exposing surfaces.',
+    bullets: [
+      'End-to-end encrypted mesh connectivity between every node.',
+      'Direct node communication without centralized intermediaries.',
+      'Self-optimizing routes that heal around failures automatically.',
+      'Secure peer-to-peer communication across the entire grid.',
+    ],
+  },
+  {
+    title: 'Zero-Image Technology',
+    description:
+      'Metadata-first zero-images shrink artifacts up to 100x, reducing deployment time and bandwidth.',
+    bullets: [
+      'Deterministic deployments verified cryptographically.',
+      'Run containers, VMs, and Linux workloads with secure boot.',
+      'Smart contract orchestration manages every workload lifecycle.',
+      'Minimal artifact footprint accelerates delivery everywhere.',
+    ],
+  },
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer for complete ownership.',
+    bullets: [
+      'Self-healing storage recovers instantly from corruption or failure.',
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native FS.',
+      'Geo-aware placement enforces residency and redundancy policies.',
+      'Autonomous replication keeps data resilient across the globe.',
+    ],
+  },
+  {
+    title: 'Multi-Master Clusters',
+    description:
+      'High-availability Kubernetes with automatic failover and leadership orchestration.',
+    bullets: [
+      'Multi-master topologies orchestrated with zero downtime.',
+      'Automatic failover keeps control planes healthy and responsive.',
+      'HA operations managed without manual intervention or scripts.',
+      'Upgrades roll out seamlessly with continuous verification.',
+    ],
+  },
+  {
+    title: 'Effortless Load Balancing & Scaling',
+    description:
+      'Adaptive automation balances traffic and scales workloads based on demand.',
+    bullets: [
+      'Built-in autoscaling that responds to real-time usage.',
+      'Native load balancing distributes traffic globally.',
+      'High availability delivered without custom controllers.',
+      'Elastic scaling keeps costs aligned with workload demand.',
+    ],
+  },
+  {
+    title: 'Simple Web Gateway Access',
+    description:
+      'Expose services to the public web with declarative Kubernetes resources.',
+    bullets: [
+      'One resource publishes services without complex ingress rules.',
+      'Domain and prefix-based routing built into the platform.',
+      'No need to manage dedicated ingress controllers.',
+      'Consistent configuration across every cluster and region.',
+    ],
+  },
+]
+
+export function CloudFeatures() {
+  return (
+    <section className="bg-gray-50 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Infrastructure that verifies, heals, and scales itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            From mesh networking to quantum-safe storage, every capability in
+            Mycelium Cloud is designed for sovereign control and autonomous
+            operations—so your teams focus on shipping workloads instead of
+            wiring infrastructure.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
+          {featureSections.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Capability
+                </Small>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {feature.description}
+                </p>
+              </div>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {feature.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudGettingStarted.tsx

@@ -0,0 +1,138 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+type Step = {
+  number: string
+  title: string
+  description: string
+  bullets: string[]
+  codes?: string[]
+}
+
+const steps: Step[] = [
+  {
+    number: '01',
+    title: 'Account Setup',
+    description: 'Create and prepare your Mycelium Cloud account.',
+    bullets: [
+      'Sign up through the Mycelium Cloud portal and verify your email.',
+      'Add credits in the dashboard so resources can be provisioned.',
+      'Upload your SSH public key to enable secure node access.',
+    ],
+  },
+  {
+    number: '02',
+    title: 'Deploy Your First Cluster',
+    description:
+      'Use the dashboard to define topology, resources, and deployment targets.',
+    bullets: [
+      'Open the Deploy Cluster workflow from your dashboard.',
+      'Choose CPU, memory, and storage for master and worker nodes.',
+      'Select ThreeFold Grid nodes that match your residency policies.',
+      'Review the configuration and launch the cluster.',
+    ],
+  },
+  {
+    number: '03',
+    title: 'Access Your Cluster',
+    description:
+      'Connect through kubeconfig and the Mycelium mesh to manage workloads.',
+    bullets: [
+      'Download the kubeconfig from the Clusters view and export `KUBECONFIG`.',
+      'Validate connectivity with `kubectl get nodes`.',
+      'Install the Mycelium client and join the provided peer list.',
+      'SSH directly to each node over its assigned Mycelium IP address.',
+    ],
+    codes: [
+      `export KUBECONFIG=/path/to/config
+kubectl get nodes`,
+      `wget https://github.com/threefoldtech/mycelium/releases/latest/download/mycelium-private-x86_64-unknown-linux-musl.tar.gz
+tar -xzf mycelium-private-x86_64-unknown-linux-musl.tar.gz
+sudo chmod +x mycelium-private
+sudo mv mycelium-private /usr/local/bin/mycelium`,
+      `sudo mycelium --peers \\
+  tcp://188.40.132.242:9651 \\
+  tcp://136.243.47.186:9651 \\
+  tcp://185.69.166.7:9651 \\
+  tcp://185.69.166.8:9651 \\
+  tcp://65.21.231.58:9651 \\
+  tcp://65.109.18.113:9651 \\
+  tcp://209.159.146.190:9651 \\
+  tcp://5.78.122.16:9651 \\
+  tcp://5.223.43.251:9651 \\
+  tcp://142.93.217.194:9651`,
+    ],
+  },
+]
+
+export function CloudGettingStarted() {
+  return (
+    <section
+      id="getting-started"
+      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Getting Started
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Launch, connect, and operate in three steps.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Follow the workflow from account creation to mesh connectivity.
+            You&rsquo;ll have a production-ready K3s cluster running on the
+            ThreeFold Grid in minutes.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-3">
+          {steps.map((step) => (
+            <div
+              key={step.title}
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+            >
+              <div className="flex items-center justify-between">
+                <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
+                  {step.number}
+                </Small>
+                <span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
+                  Go
+                </span>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold text-white">
+                {step.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {step.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-300">
+                {step.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+              {step.codes && (
+                <div className="mt-6 space-y-4">
+                  {step.codes.map((code) => (
+                    <pre
+                      key={code}
+                      className="overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100"
+                    >
+                      <code>{code}</code>
+                    </pre>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudHero.tsx

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()
@@ -78,20 +79,36 @@ export function CloudHero() {
       <Container>
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
+            <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
               Mycelium Cloud
-            </h1>
-            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Own every workload with certainty.
-            </h2>
-            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
-              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
-            </p>
-            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
-                Start Deployment
+            </Eyebrow>
+            <SectionHeader as="h1" className="mt-6 text-gray-900">
+              Deploy sovereign Kubernetes clusters on decentralized
+              infrastructure.
+            </SectionHeader>
+            <P className="mt-6 text-gray-600">
+              Mycelium Cloud turns the ThreeFold Grid into a programmable
+              substrate for K3s. Launch verifiable clusters with nature-inspired
+              networking, quantum-safe storage, and zero-image delivery that
+              keeps every workload deterministic.
+            </P>
+            <P className="mt-6 italic text-gray-500">
+              Developer guide to decentralized cloud computing.
+            </P>
+            <div className="mt-10 flex flex-wrap gap-4">
+              <Button
+                to="https://myceliumcloud.tf"
+                as="a"
+                variant="solid"
+                color="cyan"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Launch a Cluster
+              </Button>
+              <Button to="#getting-started" as="a" variant="outline" color="cyan">
+                View Getting Started
               </Button>
-              
             </div>
           </div>
           <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

src/pages/cloud/CloudOverview.tsx

@@ -1,61 +1,78 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const focusAreas = [
   {
-    title: 'Sovereign by Design',
+    label: 'Overview',
+    title: 'Decentralized Kubernetes on the ThreeFold Grid',
     description:
-      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+      'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
   },
   {
-    title: 'Secure by Default',
+    label: 'Core Concept',
+    title: 'Sovereign, self-managing operations',
     description:
-      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+      'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
   },
   {
-    title: 'Ready to Scale',
+    label: 'Developer Experience',
+    title: 'K3s-native workflows with full control',
     description:
-      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+      'Provision multi-master clusters, govern residency, and observe node health from a single programmable control plane.',
   },
 ]
 
 export function CloudOverview() {
   return (
-    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <CircleBackground
           color="#06b6d4"
-          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+          className="absolute left-1/2 top-full h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 opacity-30 blur-3xl"
         />
         <CircleBackground
           color="#22d3ee"
-          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
         />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.18),_transparent_55%)]" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
-            Mycelium Cloud
-          </p>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
-            A sovereign, self-healing cloud built for trusted automation.
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
-          </p>
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-400">
+            Platform Overview
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+            A decentralized cloud that operates itself.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold
+            Grid with cryptographic certainty. Networking, storage, and
+            orchestration are all built-in so developers can deploy critical
+            workloads without wrestling infrastructure.
+          </P>
+          <P color="lightSecondary" className="mt-6 italic">
+            Declarative, sovereign, and ready for production workloads anywhere.
+          </P>
         </div>
         <div className="mt-16 grid gap-8 lg:grid-cols-3">
           {focusAreas.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
             >
-              <div className="text-lg font-semibold text-white">
-                {item.title}
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/15 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-300">
+                  {item.label}
+                </Small>
+                <div className="mt-4 text-lg font-semibold text-white">
+                  {item.title}
+                </div>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {item.description}
+                </p>
               </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-300">
-                {item.description}
-              </p>
             </div>
           ))}
         </div>

src/pages/cloud/CloudPage.tsx

@@ -1,22 +1,33 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
 import { CloudOverview } from './CloudOverview'
-import { ComputeStorageSplit } from './ComputeStorageSplit'
+import { CloudArchitecture } from './CloudArchitecture'
+import { CloudFeatures } from './CloudFeatures'
+import { CloudGettingStarted } from './CloudGettingStarted'
+import { CloudUseCases } from './CloudUseCases'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
-import { CloudHeroAlt } from './CloudHeroAlt'
 
 export default function CloudPage() {
   return (
     <>
       <AnimatedSection>
-        <CloudHeroAlt />
+        <CloudHero />
       </AnimatedSection>
       <AnimatedSection>
         <CloudOverview />
       </AnimatedSection>
       <AnimatedSection>
-        <ComputeStorageSplit />
+        <CloudArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudGettingStarted />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudUseCases />
       </AnimatedSection>
       <AnimatedSection>
         <SecurityPillars />

src/pages/cloud/CloudUseCases.tsx

@@ -0,0 +1,90 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const useCases = [
+  {
+    title: 'AI / ML Training',
+    description:
+      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+  },
+  {
+    title: 'Enterprise Kubernetes',
+    description:
+      'Operate production-grade clusters with complete control and no vendor lock-in.',
+    bullets: ['High availability', 'Security', 'Compliance'],
+  },
+  {
+    title: 'Edge & IoT',
+    description:
+      'Leverage global nodes for low-latency workloads and connected device deployments.',
+    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
+  },
+  {
+    title: 'DigitalMe Blueprint',
+    description:
+      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
+    bullets: [
+      'Cryptpad • Encrypted collaboration',
+      'Elements • Matrix chat',
+      'Stallwart • Mail, calendar, contacts',
+      'Gitea • Git hosting',
+      'Nextcloud • File storage and sync',
+      'LiveKit / Jitsi • Real-time video',
+      'Single Sign-On backed by Gitea',
+    ],
+  },
+]
+
+export function CloudUseCases() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Built for intelligent workloads across every edge.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Cloud unifies compute, storage, and networking so teams can
+            launch anything from GPU inference farms to global collaboration
+            suites with deterministic outcomes.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {useCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center justify-between">
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {useCase.title}
+                </h3>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Scenario
+                </Small>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {useCase.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/SecurityPillars.tsx

@@ -1,7 +1,26 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
-const pillars = [
+const differentiators = [
+  {
+    title: 'Sovereign by Design',
+    description:
+      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+  },
+  {
+    title: 'Ready to Scale',
+    description:
+      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+  },
+]
+
+const securityPillars = [
   {
     title: 'Provable Sovereignty',
     description:
@@ -21,31 +40,51 @@ const pillars = [
 
 export function SecurityPillars() {
   return (
-    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <CircleBackground
           color="#22d3ee"
-          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
+          className="absolute -top-24 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl"
         />
-        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom,_rgba(8,145,178,0.14),_transparent_60%)]" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
-            Sovereign Architecture
-          </p>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
-            Built for security, trust, and unstoppable continuity.
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
-          </p>
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Security Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Provable trust from substrate to service.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Cloud enforces sovereignty, security, and resilience at the
+            protocol level. The platform continuously verifies state, heals
+            itself, and keeps workloads operating even when regions go dark.
+          </P>
         </div>
         <div className="mt-16 grid gap-8 lg:grid-cols-3">
-          {pillars.map((pillar) => (
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                Key Differentiator
+              </Small>
+              <div className="mt-4 text-lg font-semibold text-white">
+                {item.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {securityPillars.map((pillar) => (
             <div
               key={pillar.title}
-              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+              className="rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
             >
               <div className="text-lg font-semibold text-white">
                 {pillar.title}