diff --git a/README.md b/README.md
index 6d90bcd..9f6b493 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # DeCleanup Network Landing Page
 
-Welcome to the open-source landing page project for [DeCleanup Network](https://decleanup.net) — a decentralized impact movement focused on tokenizing real-world environmental cleanups.
+**DeCleanup is an SDG-aligned regenerative impact application.**
+
+Welcome to the open-source landing page project for [DeCleanup Network](https://decleanup.net) - a decentralized impact movement focused on tokenizing real-world environmental cleanups.
 
 ## 🧩 Project Purpose
 
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 4595fe9..8853a71 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -100,6 +100,75 @@ export default function DocsPage() {
           </p>
         </div>
 
+        {/* For those who build and coordinate impact - intro before technical docs */}
+        <div className="mb-16 rounded-2xl border border-[#58B12F]/30 bg-gray-900/90 p-6 md:p-8 max-w-3xl mx-auto text-left">
+          <h2 className="text-lg font-medium text-[#58B12F] mb-6">For those who build and coordinate impact</h2>
+
+          <h3 className="text-xl font-medium text-white mb-3">The problem</h3>
+          <p className="text-gray-400 text-sm mb-3">Impact coordinators struggle with:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Fragmented data</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Manual reporting</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Trust bottlenecks</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>No shared infrastructure for verification</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Hard-to-govern funding decisions</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">What DeCleanup provides</h3>
+          <p className="text-gray-400 text-sm mb-3">DeCleanup is open DMRV infrastructure, not a closed platform. You can:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Use standardized cleanup data</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Participate in governance</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Help define verification rules</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Coordinate funding transparently</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">DMRV (Data-Measurement-Reporting-Verification) as infrastructure</h3>
+          <p className="text-gray-400 text-sm mb-3">We treat DMRV as a public good layer:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Cleanup records are immutable</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Data structures are open and interoperable</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>No dependency on proprietary standards</li>
+          </ul>
+          <p className="text-gray-400 text-sm mb-2">Compatible with:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>SDG reporting</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Regen ecosystems</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Future certification layers</li>
+          </ul>
+          <p className="text-gray-400 text-sm mb-2">This aligns with:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Regen community tooling</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Open impact accounting systems</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Governance &amp; coordination</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">Governance tools live on Celo</h3>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>$cDCU is used for proposals and voting</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Governance is coordinated via <a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] hover:text-[#FAFF00] underline">Gardens.fund</a></li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Community decides: verification rules, funding priorities, new pools and experiments</li>
+          </ul>
+
+          <h4 className="text-base font-medium text-white mb-2">Example funding pools</h4>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Equipment Pool (first pool, sponsored by Ethereum for the World)</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Local Organizer Support Pool</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Logistics &amp; Transport Pool</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Data &amp; Research Pool</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Experimental / Pilot Pool</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">Outcome</h3>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Coordinators spend less time proving impact</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Communities self-govern funding</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Impact data becomes reusable infrastructure</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Cleanups scale without centralized control</li>
+          </ul>
+          <p className="text-sm text-gray-500 italic">Coordination layer first.</p>
+        </div>
+
         {/* Mobile Overlay */}
         {sidebarOpen && (
           <div
diff --git a/app/get-started/page.tsx b/app/get-started/page.tsx
new file mode 100644
index 0000000..e02e9b0
--- /dev/null
+++ b/app/get-started/page.tsx
@@ -0,0 +1,58 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import GetStartedFlow from "@/components/GetStartedFlow/GetStartedFlow";
+
+export const metadata: Metadata = {
+  title: "Get Started | DeCleanup Rewards",
+  description:
+    "Choose how you want to use the app: within other platforms with minimum features or full experience in browser.",
+};
+
+export default function GetStartedPage() {
+  return (
+    <main className="min-h-screen bg-black text-white overflow-x-hidden">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+        <div className="mb-10">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-[#58B12F] hover:text-[#FAFF00] font-medium text-sm md:text-base transition-colors group"
+          >
+            <svg
+              className="w-5 h-5 group-hover:-translate-x-1 transition-transform"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            Back to Home
+          </Link>
+        </div>
+
+        <div className="mb-12 text-center">
+          <h1
+            className="text-3xl md:text-4xl font-medium text-white mb-3"
+            style={{
+              fontFamily:
+                "var(--font-bebas-neue), sans-serif",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+            }}
+          >
+            Get started with DeCleanup Rewards
+          </h1>
+          <p className="text-gray-400 max-w-xl mx-auto">
+            Choose how you want to use the app: you can have an experience within other platforms and with minimum features or full experience separately in browser. We’ll show you what you need and where to go.
+          </p>
+        </div>
+
+        <GetStartedFlow />
+      </div>
+    </main>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index 3aa8526..7b46631 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -158,6 +158,22 @@ body {
   transform: translateY(-4px);
 }
 
+/* Who is this for - subtle border glow */
+@keyframes border-glow {
+  0%, 100% {
+    border-color: rgba(88, 177, 47, 0.35);
+    box-shadow: 0 0 0 1px rgba(88, 177, 47, 0.2);
+  }
+  50% {
+    border-color: rgba(88, 177, 47, 0.6);
+    box-shadow: 0 0 20px rgba(88, 177, 47, 0.15);
+  }
+}
+
+.card-border-glow {
+  animation: border-glow 3s ease-in-out infinite;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
index 499fcee..101bcf4 100644
--- a/app/litepaper/page.tsx
+++ b/app/litepaper/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 
 export const metadata: Metadata = {
-  title: "DeCleanup Network — Litepaper",
+  title: "DeCleanup Network - Litepaper",
   description: "What DeCleanup is, how to try it (Base & Farcaster), DMRV, AI verification, tokens, and how to get involved. February 2026.",
 };
 
@@ -45,7 +45,7 @@ export default function LitepaperPage() {
             </svg>
           </div>
           <h1 className="text-4xl md:text-5xl lg:text-6xl font-normal uppercase text-white mb-4">
-            DeCleanup Network — Litepaper
+            DeCleanup Network - Litepaper
           </h1>
           <p className="text-lg md:text-xl text-gray-400">
             February 2026
@@ -58,33 +58,108 @@ export default function LitepaperPage() {
             1. What is DeCleanup?
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
-            <strong className="text-white">DeCleanup is a platform that helps people and organizations prove real-world environmental cleanups — transparently and at scale.</strong>
+            <strong className="text-white">DeCleanup Network is an SDG-aligned regenerative impact application.</strong>
+          </p>
+          <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
+            It provides open infrastructure to <strong className="text-white">measure, verify, and fund real-world environmental action</strong>, starting with waste cleanup and expanding into regenerative and biodiversity-aligned activities.
           </p>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
             People all over the world clean beaches, forests, rivers, and cities. The problem is simple: <strong className="text-white">there is no trusted, shared way to prove this work happened and measure its impact.</strong>
           </p>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
-            DeCleanup solves this by:
+            DeCleanup transforms on-the-ground environmental work into:
           </p>
           <ul className="list-disc list-inside space-y-2 md:text-lg leading-relaxed text-gray-300 ml-4 mb-4">
-            <li>verifying cleanup results using photos and AI</li>
-            <li>creating trusted impact records</li>
-            <li>enabling rewards, funding, and governance around real environmental action</li>
+            <li>verifiable impact data</li>
+            <li>auditable impact claims</li>
+            <li>governable funding flows</li>
           </ul>
+          <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
+            so that capital can reliably support outcomes aligned with the <strong className="text-white">UN Sustainable Development Goals (SDGs)</strong>.
+          </p>
           <p className="md:text-lg leading-relaxed text-gray-300">
-            This is not just an app — it&apos;s <strong className="text-white">open infrastructure for environmental impact verification.</strong>
+            DeCleanup is designed to interoperate with the broader <strong className="text-white">Regen ecosystem</strong>, enabling impact data to be reused across applications, funding programs, and reporting frameworks. This is not just an app - it&apos;s <strong className="text-white">open infrastructure for environmental impact verification.</strong>
           </p>
         </section>
 
         <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
 
+        {/* 1b. SDG Mapping (Theory of Change) */}
+        <section className="mb-12 md:mb-16">
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
+            SDG Alignment
+          </h2>
+          <p className="md:text-lg leading-relaxed text-gray-300 mb-8">
+            DeCleanup directly contributes to the following UN Sustainable Development Goals:
+          </p>
+
+          <h3 className="text-xl font-semibold text-white mb-4">Primary SDGs</h3>
+          <div className="space-y-4 mb-8">
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 11 – Sustainable Cities &amp; Communities</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Reduces unmanaged waste in public spaces</li>
+                <li>Supports community-led environmental stewardship</li>
+              </ul>
+            </div>
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 12 – Responsible Consumption &amp; Production</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Enables waste tracking, categorization, and accountability</li>
+                <li>Supports circular economy insights through cleanup data</li>
+              </ul>
+            </div>
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 13 – Climate Action</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Prevents emissions from unmanaged waste and open burning</li>
+                <li>Enables climate-aligned impact reporting</li>
+              </ul>
+            </div>
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 14 – Life Below Water</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Removes plastic and waste before entering waterways</li>
+                <li>Produces verifiable marine pollution prevention data</li>
+              </ul>
+            </div>
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 15 – Life on Land</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Restores degraded land areas</li>
+                <li>Enables land-based environmental monitoring</li>
+              </ul>
+            </div>
+          </div>
+
+          <h3 className="text-xl font-semibold text-white mb-4">Secondary / Enabling SDGs</h3>
+          <div className="space-y-4">
+            <div className="bg-gray-900 border-l-4 border-[#FAFF00]/50 p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 16 – Peace, Justice &amp; Strong Institutions</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Transparent governance of public goods funding</li>
+                <li>Auditable decision-making and capital allocation</li>
+              </ul>
+            </div>
+            <div className="bg-gray-900 border-l-4 border-[#FAFF00]/50 p-4 rounded-lg">
+              <h4 className="font-semibold text-white mb-2">SDG 17 – Partnerships for the Goals</h4>
+              <ul className="list-disc list-inside space-y-1 text-gray-300 text-sm md:text-base ml-2">
+                <li>Interoperability with Regen apps (e.g. Green Goods)</li>
+                <li>Open standards for shared impact reporting</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
+
         {/* 2. Try DeCleanup in minutes */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
             2. Try DeCleanup in minutes (no setup needed)
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-8">
-            If you already have an account on <strong className="text-white">Base</strong> or <strong className="text-white">Farcaster</strong>, you can use DeCleanup here — no extra sign-up. Pick where you&apos;re active:
+            If you already have an account on <strong className="text-white">Base</strong> or <strong className="text-white">Farcaster</strong>, you can use DeCleanup here - no extra sign-up. Pick where you&apos;re active:
           </p>
 
           <div className="space-y-8">
@@ -107,7 +182,7 @@ export default function LitepaperPage() {
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-3">🟣 I have a Farcaster account</h3>
               <p className="text-gray-300 mb-4">
-                Use DeCleanup inside Farcaster as a Mini App. Open it from the Farcaster app — same rewards and verification, in your feed.
+                Use DeCleanup inside Farcaster as a Mini App. Open it from the Farcaster app - same rewards and verification, in your feed.
               </p>
               <ul className="list-disc list-inside space-y-1 text-gray-300 mb-4 ml-4">
                 <li>Open the DeCleanup Mini App from Farcaster</li>
@@ -162,7 +237,7 @@ export default function LitepaperPage() {
             </div>
             <div>
               <h4 className="text-lg font-medium text-white mb-2">🏛 Governance &amp; Funding (Gardens)</h4>
-              <p className="text-gray-300 mb-2">DeCleanup integrates governance and funding flows.</p>
+              <p className="text-gray-300 mb-2">DeCleanup integrates governance and funding flows with <strong className="text-white">outcome-based funding</strong> aligned with the SDGs.</p>
               <ul className="list-disc list-inside space-y-1 text-gray-300 ml-4">
                 <li>Proposals for cleanup equipment reimbursement</li>
                 <li>Community voting on funding priorities</li>
@@ -178,7 +253,7 @@ export default function LitepaperPage() {
         {/* 4. DMRV */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
-            4. DMRV — Digital Monitoring, Reporting &amp; Verification
+            4. DMRV - Digital Monitoring, Reporting &amp; Verification
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
             At the core of DeCleanup is <strong className="text-white">DMRV</strong>.
@@ -196,16 +271,16 @@ export default function LitepaperPage() {
             <li>on-chain records for transparency</li>
           </ul>
           <p className="md:text-lg leading-relaxed text-gray-300">
-            This makes DeCleanup useful not only for individuals, but also for: NGOs, corporates, large cleanup sponsors, and public funding programs.
+            This makes DeCleanup useful not only for individuals, but also for: NGOs, corporates, large cleanup sponsors, and public funding programs - with impact data aligned to <strong className="text-white">SDG reporting</strong> needs.
           </p>
         </section>
 
         <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
 
-        {/* 5. AI Verification — Coming Soon */}
+        {/* 5. AI Verification - Coming Soon */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
-            5. AI Verification (DMRV) — Coming Soon
+            5. AI Verification (DMRV) - Coming Soon
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-6">
             AI-assisted verification is being rolled out in phases.
@@ -213,9 +288,9 @@ export default function LitepaperPage() {
 
           <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg mb-6">
             <h3 className="text-lg font-semibold text-white mb-3">🤖 ML Verification (DMRV)</h3>
-            <p className="text-gray-300 mb-2"><strong className="text-white">Status:</strong> Phase 1 &amp; 2 complete — AI-assisted verification pipeline ready.</p>
+            <p className="text-gray-300 mb-2"><strong className="text-white">Status:</strong> Phase 1 &amp; 2 complete - AI-assisted verification pipeline ready.</p>
             <p className="text-gray-300 mb-4">
-              The system detects waste in before/after photos, scores cleanup impact, and can auto-verify or flag for human review. It uses object-detection models trained on real-world litter data (e.g. TACO: Trash Annotations in Context — 60+ waste categories).
+              The system detects waste in before/after photos, scores cleanup impact, and can auto-verify or flag for human review. It uses object-detection models trained on real-world litter data (e.g. TACO: Trash Annotations in Context - 60+ waste categories).
             </p>
             <p className="text-gray-300 text-sm">
               <strong className="text-white">Reference:</strong>{" "}
@@ -237,17 +312,19 @@ export default function LitepaperPage() {
             6. Tokens &amp; Network Economy
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-6">
-            DeCleanup uses tokens to coordinate incentives — <strong className="text-white">not to replace real impact.</strong>
+            DeCleanup uses tokens to coordinate incentives - <strong className="text-white">not to replace real impact.</strong>
+            Governance and funding use stable capital (e.g. cUSD) and <strong className="text-white">Gardens.fund</strong> for outcome-based funding pools aligned with the SDGs.
           </p>
           <p className="text-gray-300 mb-4"><strong className="text-white">Live tokens:</strong></p>
           <ul className="list-disc list-inside space-y-1 text-gray-300 ml-4 mb-6">
-            <li><strong className="text-white">$bDCU</strong> — live on Base</li>
-            <li><strong className="text-white">$cDCU</strong> — coming soon (Celo)</li>
+            <li><strong className="text-white">$bDCU</strong> - live on Base</li>
+            <li><strong className="text-white">$cDCU</strong> - coming soon (Celo)</li>
           </ul>
           <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
             <h3 className="text-lg font-semibold text-white mb-3">$cDCU Airdrop</h3>
             <p className="text-gray-300 mb-2">$cDCU will be airdropped to:</p>
             <ul className="list-disc list-inside space-y-1 text-gray-300 ml-4">
+              <li>Holders of $bDCU (to get the full Base + Celo experience)</li>
               <li>Early DeCleanup V1 users</li>
               <li>Community donors &amp; supporters</li>
               <li>Contributors (2024–2025)</li>
@@ -264,13 +341,13 @@ export default function LitepaperPage() {
             7. What DeCleanup enables long-term
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-4">
-            DeCleanup is building infrastructure for:
+            DeCleanup is building <strong className="text-white">SDG-aligned</strong> infrastructure for:
           </p>
           <ul className="list-disc list-inside space-y-1 text-gray-300 ml-4 mb-6">
             <li>verified environmental impact</li>
-            <li>transparent funding flows</li>
+            <li>transparent, outcome-based funding flows</li>
             <li>scalable cleanup programs</li>
-            <li>interoperable impact data</li>
+            <li>interoperable impact data across the Regen ecosystem</li>
           </ul>
           <p className="text-gray-300 mb-2">Possible future integrations:</p>
           <ul className="list-disc list-inside space-y-1 text-gray-300 ml-4">
@@ -304,13 +381,13 @@ export default function LitepaperPage() {
         {/* Final note */}
         <section className="mb-12 md:mb-16 rounded-2xl border border-[#58B12F]/20 bg-[#58B12F]/5 p-6 md:p-8">
           <p className="md:text-lg leading-relaxed text-gray-300 italic">
-            DeCleanup is not hype — it&apos;s infrastructure. We welcome non-crypto readers, let people try the product in minutes, and layer in technical depth only when it helps. Real cleanups, real proof, real impact.
+            DeCleanup is not hype - it&apos;s <strong className="text-white">SDG-aligned impact infrastructure</strong>. We welcome non-crypto readers, let people try the product in minutes, and layer in technical depth only when it helps. Real cleanups, real proof, real impact.
           </p>
         </section>
 
         <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
 
-        {/* Roadmap Section — kept */}
+        {/* Roadmap Section - kept */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
             Roadmap (Updated)
@@ -324,7 +401,7 @@ export default function LitepaperPage() {
           <div className="space-y-6">
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
-                Phase 1 — Base Mini App (Live)
+                Phase 1 - Base Mini App (Live)
               </h3>
               <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
                 <li>Farcaster app</li>
@@ -335,7 +412,7 @@ export default function LitepaperPage() {
 
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
-                Phase 2 — Celo Full dApp (In Development)
+                Phase 2 - Celo Full dApp (In Development)
               </h3>
               <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
                 <li>dashboards + leaderboards</li>
@@ -350,7 +427,7 @@ export default function LitepaperPage() {
 
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
-                Phase 3 — Reputation + Marketplace Layer
+                Phase 3 - Reputation + Marketplace Layer
               </h3>
               <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
                 <li>RWI Rank</li>
@@ -362,7 +439,7 @@ export default function LitepaperPage() {
 
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
-                Phase 4 — Multichain Expansion
+                Phase 4 - Multichain Expansion
               </h3>
               <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
                 <li>unified identity</li>
@@ -374,7 +451,7 @@ export default function LitepaperPage() {
 
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
-                Phase 5 — DeCleanup V3
+                Phase 5 - DeCleanup V3
               </h3>
               <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
                 <li>ESG partnerships</li>
@@ -399,44 +476,6 @@ export default function LitepaperPage() {
           </p>
         </section>
 
-        <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
-
-        {/* Backed by — Giveth, Octant, Gitcoin, Ethereum for the World (logo placeholders) */}
-        <section className="mb-12 md:mb-16">
-          <h2 className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6">
-            Backed by
-          </h2>
-          <p className="mb-8 md:text-lg leading-relaxed text-gray-300">
-            DeCleanup has been supported by Giveth, Octant, Gitcoin, and Ethereum for the World.
-          </p>
-          {/* Logo placeholders — replace with <Image> or <img> when logos are ready */}
-          <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
-            <div className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6">
-              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
-                <span className="text-xs">Giveth logo</span>
-              </div>
-              <span className="text-sm font-medium text-white">Giveth</span>
-            </div>
-            <div className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6">
-              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
-                <span className="text-xs">Octant logo</span>
-              </div>
-              <span className="text-sm font-medium text-white">Octant</span>
-            </div>
-            <div className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6">
-              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
-                <span className="text-xs">Gitcoin logo</span>
-              </div>
-              <span className="text-sm font-medium text-white">Gitcoin</span>
-            </div>
-            <div className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6">
-              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
-                <span className="text-xs">E4W logo</span>
-              </div>
-              <span className="text-sm font-medium text-white">Ethereum for the World</span>
-            </div>
-          </div>
-        </section>
       </div>
     </main>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 8492f13..85249ba 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,12 +4,15 @@ import TokenizeImpactSection from "@/components/HowToTokonizeImpact/TokenizeImpa
 import NetworkRoadmapSection from "@/components/NetworkRoadmapSection/NetworkRoadmapSection";
 import UseDeCleanupToday from "@/components/UseDeCleanupToday/UseDeCleanupToday";
 import WhoIsThisFor from "@/components/WhoIsThisFor/WhoIsThisFor";
+import WhyDeCleanup from "@/components/WhyDeCleanup/WhyDeCleanup";
 
 const Page = () => {
   return (
     <main className="flex min-w-0 flex-col overflow-x-hidden text-center">
       {/* Aura-style hero: gradient orbs + badge + CTAs */}
       <Hero />
+      {/* Why DeCleanup Exists - SDG positioning */}
+      <WhyDeCleanup />
       {/* Who is this for? – Aura glow cards */}
       <WhoIsThisFor />
       {/* Earn DeCleanup Rewards – Base/Celo CTA cards with hover glow */}
@@ -17,7 +20,7 @@ const Page = () => {
       {/* Transparent, Verifiable Digital Impact / DMRV – two-column + progress bar */}
       <WhatIsDeCleanupNetwork />
       <NetworkRoadmapSection />
-      {/* How to Tokenize Impact – 3-step + photo verified card */}
+      {/* How to Tokenize Impact – 3-step + photo verified card, Backed by + SDGs just above footer */}
       <TokenizeImpactSection />
     </main>
   );
diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx
index 4c2a880..4b97f74 100644
--- a/app/tokenomics/page.tsx
+++ b/app/tokenomics/page.tsx
@@ -43,10 +43,89 @@ export default function TokenomicsPage() {
           </p>
         </div>
 
-        {/* SECTION 1 — TWO-TOKEN OVERVIEW */}
+        {/* For those who fund real-world impact - intro before token details */}
+        <div className="mb-16 rounded-2xl border border-[#58B12F]/30 bg-gray-900/90 p-6 md:p-8 max-w-3xl mx-auto text-left">
+          <h2 className="text-lg font-medium text-[#58B12F] mb-6">For those who fund real-world impact</h2>
+
+          <h3 className="text-xl font-medium text-white mb-3">The problem</h3>
+          <p className="text-gray-400 text-sm mb-3">Funders want:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Proof that money led to real action</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Transparency without heavy overhead</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Repeatable, scalable funding models</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Less trust, more verification</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">What DeCleanup enables</h3>
+          <p className="text-gray-400 text-sm mb-3">We don&apos;t promise financial returns first. We offer verifiable impact infrastructure. Funders can:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Fund cleanup pools</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>See immutable proof of execution</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Support open verification infrastructure</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Hold tokens connected to real-world activity</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">DMRV (Data, Measurement, Reporting, Verification) from a funder&apos;s perspective</h3>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Funds flow → cleanups happen → proof is published</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Records are tamper-resistant</li>
+          </ul>
+          <p className="text-gray-400 text-sm mb-2">Data can be:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Audited</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Aggregated</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Reused across reports and ecosystems</li>
+          </ul>
+          <p className="text-gray-400 text-sm mb-2">This reduces:</p>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Greenwashing risk</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Reporting costs</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Dependence on trust-based claims</li>
+          </ul>
+
+          <h3 className="text-xl font-medium text-white mb-3">Tokens</h3>
+          <h4 className="text-base font-medium text-white mb-2">
+            <a href="https://basescan.org/address/0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] hover:text-[#FAFF00] underline">
+              $bDCU (Base)
+            </a>
+          </h4>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Incentive &amp; utility token</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Rewards cleanup activity</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Reflects ecosystem usage and demand</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Holders will be airdropped $cDCU to get the full experience (Base + Celo)</li>
+          </ul>
+          <h4 className="text-base font-medium text-white mb-2">Governance on Celo ($cUSD)</h4>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Stable, accessible voting</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Proposals via <a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] hover:text-[#FAFF00] underline">Gardens.fund</a></li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Decisions tied to funding and rules</li>
+          </ul>
+          <p className="text-gray-400 text-sm mb-6">Value grows through usage, legitimacy, and adoption, not speculation.</p>
+
+          <h3 className="text-xl font-medium text-white mb-3">Outcome</h3>
+          <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Funding tied to verifiable action</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Better accountability</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Open infrastructure worth supporting</li>
+          </ul>
+          <p className="text-sm text-gray-500 italic mb-2">A base layer for future impact finance</p>
+          <p className="text-sm font-medium text-[#58B12F]">Fund what you can verify.</p>
+        </div>
+
+        {/* Expandable: Dive into tokenomics */}
+        <details className="group mb-12 max-w-3xl mx-auto">
+          <summary className="list-none cursor-pointer rounded-xl border border-[#58B12F]/40 bg-[#58B12F]/10 px-6 py-4 text-center font-medium text-white hover:bg-[#58B12F]/20 hover:border-[#58B12F]/60 transition-colors flex items-center justify-center gap-2 [&::-webkit-details-marker]:hidden">
+            <span>Dive into tokenomics</span>
+            <svg className="w-5 h-5 text-[#58B12F] transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </summary>
+          <div className="mt-6 pt-6 border-t border-white/10">
+        {/* SECTION 1 - TWO-TOKEN OVERVIEW */}
         <section className="mb-12 md:mb-16">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* Card 1 — $bDCU — Base */}
+            {/* Card 1 - $bDCU - Base */}
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg flex flex-col h-full">
               <h2 
                 className="text-2xl md:text-3xl font-medium text-white mb-2 normal-case"
@@ -89,7 +168,7 @@ export default function TokenomicsPage() {
               </a>
             </div>
 
-            {/* Card 2 — $cDCU — Celo */}
+            {/* Card 2 - $cDCU - Celo */}
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg flex flex-col h-full">
               <h2 
                 className="text-2xl md:text-3xl font-medium text-white mb-2 normal-case"
@@ -136,7 +215,7 @@ export default function TokenomicsPage() {
           </div>
         </section>
 
-        {/* SECTION 2 — TOKEN COMPARISON TABLE */}
+        {/* SECTION 2 - TOKEN COMPARISON TABLE */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Token Comparison
@@ -216,13 +295,13 @@ export default function TokenomicsPage() {
           </div>
         </section>
 
-        {/* SECTION 3 — IMPACT SYSTEM CARDS */}
+        {/* SECTION 3 - IMPACT SYSTEM CARDS */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Impact System
           </h2>
           <div className="flex md:grid md:grid-cols-3 gap-6 overflow-x-auto md:overflow-visible scrollbar-hide pb-4 md:pb-0 snap-x snap-mandatory md:snap-none">
-            {/* Card A — Impact Products */}
+            {/* Card A - Impact Products */}
             <div className="bg-gray-900 border-t-4 border-[#58B12F] p-6 rounded-lg min-w-[280px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
                 Impact Products
@@ -243,7 +322,7 @@ export default function TokenomicsPage() {
               </ul>
             </div>
 
-            {/* Card B — Verifier System */}
+            {/* Card B - Verifier System */}
             <div className="bg-gray-900 border-t-4 border-[#FAFF00] p-6 rounded-lg min-w-[280px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
                 Verifier System
@@ -268,7 +347,7 @@ export default function TokenomicsPage() {
               </ul>
             </div>
 
-            {/* Card C — Hypercerts */}
+            {/* Card C - Hypercerts */}
             <div className="bg-gray-900 border-t-4 border-[#58B12F] p-6 rounded-lg min-w-[280px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink">
               <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
                 Hypercerts
@@ -291,7 +370,7 @@ export default function TokenomicsPage() {
           </div>
         </section>
 
-        {/* SECTION 4 — TOKEN LIFECYCLE */}
+        {/* SECTION 4 - TOKEN LIFECYCLE */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Token Lifecycle
@@ -314,28 +393,28 @@ export default function TokenomicsPage() {
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#58B12F] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">1 — Earn through the Base mini app</div>
+                      <div className="text-lg font-semibold text-white mb-1">1 - Earn through the Base mini app</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#58B12F] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">2 — Stake to become a Verifier</div>
+                      <div className="text-lg font-semibold text-white mb-1">2 - Stake to become a Verifier</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#58B12F] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">3 — Trade freely on Base DEXes</div>
+                      <div className="text-lg font-semibold text-white mb-1">3 - Trade freely on Base DEXes</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#58B12F] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">4 — Participate in Base-side campaigns</div>
+                      <div className="text-lg font-semibold text-white mb-1">4 - Participate in Base-side campaigns</div>
                     </div>
                   </div>
                 </div>
@@ -358,28 +437,28 @@ export default function TokenomicsPage() {
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#FAFF00] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">1 — Earn through verified cleanups</div>
+                      <div className="text-lg font-semibold text-white mb-1">1 - Earn through verified cleanups</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#FAFF00] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">2 — Stake for governance and Verifier role</div>
+                      <div className="text-lg font-semibold text-white mb-1">2 - Stake for governance and Verifier role</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#FAFF00] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">3 — Grow Impact Product reputation</div>
+                      <div className="text-lg font-semibold text-white mb-1">3 - Grow Impact Product reputation</div>
                     </div>
                   </div>
                   
                   <div className="relative">
                     <div className="absolute left-[-2rem] top-2 w-6 h-6 rounded-full bg-[#FAFF00] border-2 border-black"></div>
                     <div className="pl-4">
-                      <div className="text-lg font-semibold text-white mb-1">4 — Vote on proposals through Gardens.fund</div>
+                      <div className="text-lg font-semibold text-white mb-1">4 - Vote on proposals through Gardens.fund</div>
                     </div>
                   </div>
                 </div>
@@ -388,7 +467,7 @@ export default function TokenomicsPage() {
           </div>
         </section>
 
-        {/* SECTION 5 — $bDCU SUPPLY & ALLOCATION */}
+        {/* SECTION 5 - $bDCU SUPPLY & ALLOCATION */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-4 text-center">
             supply and allocation.
@@ -400,7 +479,7 @@ export default function TokenomicsPage() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Circulating Supply — 85%
+                Circulating Supply - 85%
               </h3>
               <p className="text-base text-gray-300">
                 85% of the total supply circulates immediately
@@ -409,7 +488,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Clanker Vault — 15%
+                Clanker Vault - 15%
               </h3>
               <p className="text-base text-gray-300">
                 15% of supply is held in the Clanker Vault for burns, ecosystem rewards, and liquidity stabilization
@@ -422,12 +501,12 @@ export default function TokenomicsPage() {
           </p>
         </section>
 
-        {/* SECTION 6 — $cDCU SUPPLY & ALLOCATION */}
+        {/* SECTION 6 - $cDCU SUPPLY & ALLOCATION */}
         <section className="mb-12 md:mb-16">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Staking & Verifier Rewards — 35%
+                Staking & Verifier Rewards - 35%
               </h3>
               <p className="text-base text-gray-300">
                 Supports long-term staking and review system
@@ -436,7 +515,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Cleanup Campaign Incentives — 25%
+                Cleanup Campaign Incentives - 25%
               </h3>
               <p className="text-base text-gray-300">
                 Fuels Impact Circles, leaderboards and global events
@@ -445,7 +524,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Public Distribution — 20%
+                Public Distribution - 20%
               </h3>
               <p className="text-base text-gray-300">
                 Onboarding users through controlled vesting
@@ -454,7 +533,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Team & Development — 10%
+                Team & Development - 10%
               </h3>
               <p className="text-base text-gray-300">
                 Multi-year vesting for stability and alignment
@@ -463,7 +542,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Verification Treasury — 5%
+                Verification Treasury - 5%
               </h3>
               <p className="text-base text-gray-300">
                 Funds Proof-of-Impact validation rewards
@@ -472,7 +551,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Community Incentives — 4%
+                Community Incentives - 4%
               </h3>
               <p className="text-base text-gray-300">
                 Supports ambassadors, referrals, content, contributors
@@ -481,7 +560,7 @@ export default function TokenomicsPage() {
             
             <div className="bg-gray-900 border-l-4 border-[#58B12F] p-6 rounded-lg">
               <h3 className="text-xl font-semibold text-white mb-2">
-                Liquidity — 1%
+                Liquidity - 1%
               </h3>
               <p className="text-base text-gray-300">
                 Seeds Celo-side DEX access
@@ -490,7 +569,7 @@ export default function TokenomicsPage() {
           </div>
         </section>
 
-        {/* SECTION 7 — CLOSING STATEMENT */}
+        {/* SECTION 7 - CLOSING STATEMENT */}
         <section className="mb-12 md:mb-16">
           <div className="text-center">
             <p className="text-xl md:text-2xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
@@ -498,6 +577,8 @@ export default function TokenomicsPage() {
             </p>
           </div>
         </section>
+          </div>
+        </details>
       </div>
     </main>
   );
diff --git a/components/BackedBy/BackedBy.tsx b/components/BackedBy/BackedBy.tsx
new file mode 100644
index 0000000..738c7b4
--- /dev/null
+++ b/components/BackedBy/BackedBy.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const backers = [
+  { name: "Giveth", logoLabel: "Giveth logo" },
+  { name: "Octant", logoLabel: "Octant logo" },
+  { name: "Gitcoin", logoLabel: "Gitcoin logo" },
+  { name: "Ethereum for the World", logoLabel: "E4W logo" },
+];
+
+export default function BackedBy() {
+  return (
+    <section className="w-full py-16 md:py-24 bg-black border-t border-gray-800">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <h2
+          className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6 text-center"
+          style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
+        >
+          Backed by
+        </h2>
+        <p className="mb-10 md:mb-12 md:text-lg leading-relaxed text-gray-300 text-center max-w-2xl mx-auto">
+          DeCleanup has been supported by Giveth, Octant, Gitcoin, and Ethereum for the World.
+        </p>
+        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
+          {backers.map((backer) => (
+            <div
+              key={backer.name}
+              className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6"
+            >
+              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
+                <span className="text-xs">{backer.logoLabel}</span>
+              </div>
+              <span className="text-sm font-medium text-white">{backer.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/GetStartedFlow/GetStartedFlow.tsx b/components/GetStartedFlow/GetStartedFlow.tsx
new file mode 100644
index 0000000..03bc4db
--- /dev/null
+++ b/components/GetStartedFlow/GetStartedFlow.tsx
@@ -0,0 +1,447 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+
+type Step =
+  | "intro"
+  | "start"
+  | "choose"
+  | "celo"
+  | "farcaster"
+  | "base"
+  | "base_only"
+  | "end";
+
+const GUIDE_LINKS = {
+  metamask: "https://metamask.io/download/",
+  baseNetwork: "https://docs.base.org/network-information",
+  celoNetwork: "https://docs.celo.org/network",
+  celoSepoliaNetwork: "https://docs.celo.org/tooling/wallets/metamask/add-celo-testnet-to-metamask",
+  celoFaucet: "https://faucet.celo.org/celo-sepolia",
+  ethForGas: "https://www.coinbase.com/learn/tips-and-tutorials/how-to-get-eth",
+  farcasterDocs: "https://docs.farcaster.xyz",
+  farcasterRegister: "https://farcaster.xyz/",
+  baseAppRegister: "https://join.base.app/",
+  baseApp: "https://base.org",
+  baseAppGetStarted: "https://help.coinbase.com/en/base/getting-started/get-started",
+  decleanupFarcaster: "https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards",
+  decleanupBase: "https://base.app/app/miniapp.decleanup.net",
+  decleanupCelo: "https://dapp.decleanup.net",
+  warpcast: "https://warpcast.com",
+};
+
+function Card({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={
+        "rounded-2xl border border-[#58B12F]/30 bg-gray-900/90 p-6 md:p-8 " +
+        className
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
+function GuideLinks({ variant }: { variant: "base" | "celo" | "wallet" }) {
+  const links =
+    variant === "base"
+      ? [
+          { label: "Get started with Base app", href: GUIDE_LINKS.baseAppGetStarted },
+          { label: "Tips and tutorials", href: GUIDE_LINKS.ethForGas },
+        ]
+      : variant === "celo"
+        ? [
+            { label: "Download MetaMask", href: GUIDE_LINKS.metamask },
+            { label: "Add Celo Sepolia network", href: GUIDE_LINKS.celoSepoliaNetwork },
+            { label: "Get CELO for transactions", href: GUIDE_LINKS.celoFaucet },
+          ]
+        : [
+            { label: "MetaMask guide", href: GUIDE_LINKS.metamask },
+            { label: "Farcaster setup", href: GUIDE_LINKS.farcasterDocs },
+          ];
+  return (
+    <div className="mt-4 pt-4 border-t border-white/10">
+      <p className="text-xs text-gray-500 mb-2 uppercase tracking-wide">Guides</p>
+      <ul className="space-y-1 text-sm">
+        {links.map((l) => (
+          <li key={l.href}>
+            <a
+              href={l.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[#58B12F] hover:text-[#FAFF00] underline"
+            >
+              {l.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function GetStartedFlow() {
+  const [step, setStep] = useState<Step>("intro");
+
+  return (
+    <div className="space-y-6 max-w-2xl mx-auto">
+      {/* Step: Intro - For those who care about the planet (before flowchart) */}
+      {step === "intro" && (
+        <div className="space-y-6">
+          <Card>
+            <h2 className="text-lg font-medium text-[#58B12F] mb-4">For those who care about the planet</h2>
+
+            <h3 className="text-xl font-medium text-white mb-3">The problem</h3>
+            <p className="text-gray-400 text-sm mb-3">People clean beaches, rivers, forests - but:</p>
+            <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Their work is invisible beyond social media</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>There&apos;s no durable proof they can reuse</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Recognition and support are inconsistent</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Motivation drops without feedback or continuity</li>
+            </ul>
+
+            <h3 className="text-xl font-medium text-white mb-3">What DeCleanup changes</h3>
+            <p className="text-gray-400 text-sm mb-3">We give everyday people a simple flow:</p>
+            <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Join or organize a cleanup</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Document the result (photos, location, basic data)</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Publish (immutable proof onchain)</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Earn recognition, reputation, and rewards</li>
+            </ul>
+
+            <h3 className="text-xl font-medium text-white mb-3">DMRV</h3>
+            <ul className="list-none space-y-2 text-sm text-gray-300 mb-4 ml-0">
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span><strong className="text-white">Data:</strong> photos, location, cleanup type, waste categories</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span><strong className="text-white">Measurement:</strong> amount collected, frequency, participation</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span><strong className="text-white">Reporting:</strong> standardized, readable cleanup records</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span><strong className="text-white">Verification:</strong> records anchored onchain so they can&apos;t be altered</li>
+            </ul>
+            <p className="text-gray-400 text-sm mb-6">This means: Your cleanup can&apos;t be erased. Your contribution adds up over time. Your impact becomes provable.</p>
+
+            <h3 className="text-xl font-medium text-white mb-3">Outcome</h3>
+            <ul className="list-none space-y-2 text-sm text-gray-300 mb-6 ml-0">
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>More people clean up, more often</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Contributors build an onchain impact reputation</li>
+              <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span>Cleanups become visible, countable, and supportable</li>
+            </ul>
+            <p className="text-sm text-gray-500 italic mb-6">Impact first. Web3 only where it helps.</p>
+
+            <button
+              onClick={() => setStep("start")}
+              className="w-full px-5 py-3 rounded-xl bg-[#FAFF00] text-black font-medium hover:bg-[#FAFF00]/90 transition"
+            >
+              Choose your path →
+            </button>
+          </Card>
+        </div>
+      )}
+
+      {/* Step: Start - Do you have / want Farcaster or Base App? */}
+      {step === "start" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-4">
+            Do you have a Farcaster account or the Base app?
+          </h2>
+          <p className="text-gray-400 text-sm md:text-base mb-6">
+            DeCleanup Rewards runs as a mini app inside Farcaster client or the Base app. If you prefer not to use either, you can use the full platform on Celo chain.
+          </p>
+          <div className="space-y-4 mb-6">
+            <div className="rounded-xl bg-white/5 border border-white/10 p-4">
+              <p className="text-gray-300 font-medium mb-2">
+                <a
+                  href={GUIDE_LINKS.farcasterRegister}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#58B12F] hover:text-[#FAFF00] underline"
+                >
+                  Farcaster
+                </a>
+              </p>
+              <p className="text-sm text-gray-400">
+                Farcaster is an open social protocol that lets people own their identity and social graph. Multiple apps can use the same feed, profiles, and followers, so your social presence isn’t locked into one platform.
+              </p>
+            </div>
+            <div className="rounded-xl bg-white/5 border border-white/10 p-4">
+              <p className="text-gray-300 font-medium mb-2">
+                <a
+                  href={GUIDE_LINKS.baseAppRegister}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#58B12F] hover:text-[#FAFF00] underline"
+                >
+                  Base App
+                </a>
+              </p>
+              <p className="text-sm text-gray-400">
+                Base App is an onchain consumer app built on Base that uses the Farcaster feed. It combines social posts, mini apps, payments, trading, chat, and earning into one place - so content isn’t just read, it’s actionable.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={() => setStep("celo")}
+              className="px-5 py-3 rounded-xl border border-white/30 text-white hover:bg-white/10 transition"
+            >
+              No - use full platform instead
+            </button>
+            <button
+              onClick={() => setStep("choose")}
+              className="px-5 py-3 rounded-xl bg-[#58B12F] text-black font-medium hover:bg-[#58B12F]/90 transition"
+            >
+              Yes - I’ll use mini app
+            </button>
+          </div>
+          <div className="mt-6 pt-4 border-t border-white/10">
+            <button
+              onClick={() => setStep("intro")}
+              className="text-sm text-gray-400 hover:text-white"
+            >
+              ← Back
+            </button>
+          </div>
+        </Card>
+      )}
+
+      {/* Step: Choose - Base App or Farcaster */}
+      {step === "choose" && (
+        <>
+          <Card>
+            <h2 className="text-xl md:text-2xl font-medium text-white mb-4">
+              Choose one to get started
+            </h2>
+            <p className="text-gray-400 text-sm mb-6">
+              You can add the other later. Pick the one you prefer to set up first.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <button
+                onClick={() => setStep("base_only")}
+                className="flex-1 p-5 rounded-xl border border-[#58B12F]/40 bg-[#58B12F]/10 text-white hover:bg-[#58B12F]/20 transition text-left"
+              >
+                <span className="font-medium block mb-1">Register on Base app</span>
+                <span className="text-sm text-gray-400">Use DeCleanup inside the Base mobile app</span>
+              </button>
+              <button
+                onClick={() => setStep("farcaster")}
+                className="flex-1 p-5 rounded-xl border border-[#58B12F]/40 bg-[#58B12F]/10 text-white hover:bg-[#58B12F]/20 transition text-left"
+              >
+                <span className="font-medium block mb-1">Register on Farcaster</span>
+                <span className="text-sm text-gray-400">Use DeCleanup mini app inside Farcaster / Warpcast</span>
+              </button>
+            </div>
+            <div className="mt-6 pt-4 border-t border-white/10">
+              <button
+                onClick={() => setStep("start")}
+                className="text-sm text-gray-400 hover:text-white"
+              >
+                ← Back
+              </button>
+            </div>
+          </Card>
+        </>
+      )}
+
+      {/* Step: Celo path */}
+      {step === "celo" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-2">
+            Try the full DeCleanup Rewards platform
+          </h2>
+          <p className="text-gray-400 text-sm mb-4">
+            Explore full dashboard, leaderboard, and governance. Works with a wallet (e.g. MetaMask) on Celo chain.
+          </p>
+          <div className="mb-4">
+            <Link
+              href={GUIDE_LINKS.decleanupCelo}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-[#FAFF00] text-black font-medium hover:bg-[#FAFF00]/90"
+            >
+              Open DeCleanup dApp (currently on testnet) →
+            </Link>
+          </div>
+          <GuideLinks variant="celo" />
+          <div className="mt-6 pt-4 border-t border-white/10">
+            <button
+              onClick={() => setStep("start")}
+              className="text-sm text-gray-400 hover:text-white"
+            >
+              ← Back to start
+            </button>
+          </div>
+        </Card>
+      )}
+
+      {/* Step: Farcaster path - then “Also Base?” */}
+      {step === "farcaster" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-2">
+            DeCleanup on Farcaster
+          </h2>
+          <p className="text-gray-400 text-sm mb-4">
+            Open the DeCleanup mini app inside Farcaster. Log in with your Farcaster account and start logging cleanups.
+          </p>
+          <div className="mb-4 space-y-3">
+            <a
+              href={GUIDE_LINKS.farcasterRegister}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block px-5 py-3 rounded-xl border border-[#58B12F]/50 text-[#58B12F] hover:bg-[#58B12F]/10 text-center text-sm font-medium"
+            >
+              Get Farcaster app or use in browser
+            </a>
+            <Link
+              href={GUIDE_LINKS.decleanupFarcaster}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-[#FAFF00] text-black font-medium hover:bg-[#FAFF00]/90 w-full justify-center"
+            >
+              Open DeCleanup mini app on Farcaster →
+            </Link>
+          </div>
+          <div className="mb-6 rounded-xl bg-white/5 border border-white/10 p-4">
+            <p className="text-sm text-gray-400 mb-2">
+              To fund your wallet: open the Farcaster wallet, press <strong className="text-gray-300">Deposit</strong>, then copy your wallet address. Transfer ETH from an exchange or another wallet to that address, or buy directly via a linked Coinbase account.
+            </p>
+            <a
+              href={GUIDE_LINKS.ethForGas}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-[#58B12F] hover:text-[#FAFF00] underline"
+            >
+              Tips and tutorials →
+            </a>
+          </div>
+          <p className="text-sm text-gray-400 mb-4">
+            Do you also want to use DeCleanup on the Base app?
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={() => setStep("end")}
+              className="px-5 py-3 rounded-xl border border-white/30 text-white hover:bg-white/10 transition"
+            >
+              No, I’m done
+            </button>
+            <button
+              onClick={() => setStep("base")}
+              className="px-5 py-3 rounded-xl bg-[#58B12F] text-black font-medium hover:bg-[#58B12F]/90 transition"
+            >
+              Yes - also open on Base app
+            </button>
+          </div>
+          <div className="mt-6 pt-4 border-t border-white/10">
+            <button
+              onClick={() => setStep("choose")}
+              className="text-sm text-gray-400 hover:text-white"
+            >
+              ← Back
+            </button>
+          </div>
+        </Card>
+      )}
+
+      {/* Step: Base only (user chose Base at “choose”) */}
+      {step === "base_only" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-2">
+            DeCleanup on Base app
+          </h2>
+          <p className="text-gray-400 text-sm mb-4">
+            Install the Base app, then open DeCleanup Rewards as a mini app inside it. Pin it to your apps to be able to always find it later.
+          </p>
+          <div className="space-y-3 mb-4">
+            <a
+              href={GUIDE_LINKS.baseAppRegister}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block px-5 py-3 rounded-xl border border-[#58B12F]/50 text-[#58B12F] hover:bg-[#58B12F]/10 text-center"
+            >
+              Get Base app
+            </a>
+            <Link
+              href={GUIDE_LINKS.decleanupBase}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-[#FAFF00] text-black font-medium hover:bg-[#FAFF00]/90 w-full justify-center"
+            >
+              Open DeCleanup on Base app →
+            </Link>
+          </div>
+          <GuideLinks variant="base" />
+          <div className="mt-6 pt-4 border-t border-white/10">
+            <button
+              onClick={() => setStep("choose")}
+              className="text-sm text-gray-400 hover:text-white"
+            >
+              ← Back
+            </button>
+          </div>
+        </Card>
+      )}
+
+      {/* Step: Base after Farcaster (“Also use Base?” → Yes) */}
+      {step === "base" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-2">
+            DeCleanup on Base app
+          </h2>
+          <p className="text-gray-400 text-sm mb-4">
+            Install the Base app, then open DeCleanup Rewards as a mini app inside it. Pin it to your apps to be able to always find it later.
+          </p>
+          <div className="space-y-3 mb-4">
+            <a
+              href={GUIDE_LINKS.baseAppRegister}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block px-5 py-3 rounded-xl border border-[#58B12F]/50 text-[#58B12F] hover:bg-[#58B12F]/10 text-center"
+            >
+              Get Base app
+            </a>
+            <Link
+              href={GUIDE_LINKS.decleanupBase}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-[#FAFF00] text-black font-medium hover:bg-[#FAFF00]/90 w-full justify-center"
+            >
+              Open DeCleanup on Base app →
+            </Link>
+          </div>
+          <GuideLinks variant="base" />
+          <div className="mt-6 pt-4 border-t border-white/10">
+            <button
+              onClick={() => setStep("farcaster")}
+              className="text-sm text-gray-400 hover:text-white"
+            >
+              ← Back to Farcaster step
+            </button>
+          </div>
+        </Card>
+      )}
+
+      {/* Step: End */}
+      {step === "end" && (
+        <Card>
+          <h2 className="text-xl md:text-2xl font-medium text-white mb-2">
+            You’re all set
+          </h2>
+          <p className="text-gray-400 text-sm mb-4">
+            Use DeCleanup on Farcaster to log cleanups and earn rewards. Need the full dApp or Base app later? Come back to this page or use the links on the main page.
+          </p>
+          <Link
+            href="/#apps"
+            className="inline-flex items-center gap-2 text-[#58B12F] hover:text-[#FAFF00]"
+          >
+            Back to main page →
+          </Link>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
index 846f89e..fd87670 100644
--- a/components/HeroSection/Hero.tsx
+++ b/components/HeroSection/Hero.tsx
@@ -51,7 +51,7 @@ const Hero = () => {
           CLEAN UP, SNAP, EARN
         </div>
 
-        {/* Main title — DECLEANUP NETWORK (gradient on NETWORK + pulse) */}
+        {/* Main title - DECLEANUP NETWORK (gradient on NETWORK + pulse) */}
         <h1
           className="mb-6 text-5xl font-normal leading-tight text-white sm:text-6xl md:text-7xl lg:text-8xl"
           style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
index 11c5c29..0a5ddf0 100644
--- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
+++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import NavLink from "../NavLink/NavLink";
+import BackedBy from "../BackedBy/BackedBy";
+import SDGsFooter from "../SDGsFooter/SDGsFooter";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -152,7 +154,12 @@ const TokenizeImpactSection = () => {
               </Link>
             </div>
           </div>
-          <NavLink />
+          {/* Links: Litepaper, Tokenomics, Docs, User Guide, External Links */}
+          <NavLink variant="linksOnly" />
+          {/* Backed by + SDG logos just above footer */}
+          <BackedBy />
+          <SDGsFooter />
+          <NavLink variant="footerOnly" />
         </div>
       </div>
     </div>
diff --git a/components/NavLink/NavLink.tsx b/components/NavLink/NavLink.tsx
index c499204..fa3614f 100644
--- a/components/NavLink/NavLink.tsx
+++ b/components/NavLink/NavLink.tsx
@@ -4,7 +4,9 @@ import Image from "next/image";
 import Divider from "../ui/Divider";
 // Simple Divider component since it's imported
 
-const NavLink = () => {
+type NavLinkVariant = "full" | "linksOnly" | "footerOnly";
+
+const NavLink = ({ variant = "full" }: { variant?: NavLinkVariant }) => {
   // Internal links (same domain)
   const internalLinks = [
     { name: "LITEPAPER", href: "/litepaper" },
@@ -29,10 +31,15 @@ const NavLink = () => {
     },
   ];
 
+  const showLinks = variant === "full" || variant === "linksOnly";
+  const showFooter = variant === "full" || variant === "footerOnly";
+
   return (
     <nav className="relative overflow-hidden">
-      <Divider className="" />
+      {showLinks && <Divider className="" />}
 
+      {showLinks && (
+      <>
       {/* Internal Links Section - More Prominent */}
       <div className="mb-6">
         {/* Mobile Layout - Internal Links */}
@@ -121,6 +128,11 @@ const NavLink = () => {
         </div>
       </div>
 
+      </>
+      )}
+
+      {showFooter && (
+      <>
       <Divider className="mt-6 bg-gray-800" />
 
       {/* Footer */}
@@ -134,9 +146,11 @@ const NavLink = () => {
             className="h-10 md:h-12 w-auto"
             unoptimized
           />
-          <span className="text-white text-sm md:text-base lg:text-lg font-medium text-center md:text-left">
-            2025©
-          </span>
+          <div className="flex flex-col items-center md:items-start text-center md:text-left">
+            <span className="text-white text-sm md:text-base lg:text-lg font-medium">
+              Base · Celo · DeCleanup 2026
+            </span>
+          </div>
         </div>
         <div className="flex items-center justify-center gap-3 md:gap-4 order-1 md:order-2">
           <Image
@@ -157,6 +171,8 @@ const NavLink = () => {
           <span>celo</span>
         </div>
       </div>
+      </>
+      )}
     </nav>
   );
 };
diff --git a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
index be69a36..e9c6fe4 100644
--- a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
+++ b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
@@ -204,7 +204,7 @@ const RoadmapCarousel = ({ roadmap }: { roadmap: Array<{ phase: string; bullets:
 const NetworkRoadmapSection = () => {
   const roadmap = [
     {
-      phase: "Phase 1 — Base Mini App (live)",
+      phase: "Phase 1 - Base Mini App (live)",
       bullets: [
         "Farcaster mini app for quick cleanups",
         "$bDCU rewards on Base",
@@ -212,7 +212,7 @@ const NetworkRoadmapSection = () => {
       ],
     },
     {
-      phase: "Phase 2 — Celo Full dApp (building)",
+      phase: "Phase 2 - Celo Full dApp (building)",
       bullets: [
         "Full dashboard, leaderboard, streaks",
         "Impact Products, claim & stake",
@@ -220,7 +220,7 @@ const NetworkRoadmapSection = () => {
       ],
     },
     {
-      phase: "Phase 3 — Reputation & Governance",
+      phase: "Phase 3 - Reputation & Governance",
       bullets: [
         "$cDCU as reputation + governance token on Celo",
         "Voting on Gardens.fund",
@@ -228,7 +228,7 @@ const NetworkRoadmapSection = () => {
       ],
     },
     {
-      phase: "Phase 4 — Multichain Ecosystem",
+      phase: "Phase 4 - Multichain Ecosystem",
       bullets: [
         "Base + Celo live side-by-side",
         "Integrations with Regen Bazaar and partners",
@@ -387,7 +387,7 @@ const NetworkRoadmapSection = () => {
             <div className="flex justify-end items-center">
               <div className="text-right">
                 <p className="text-base sm:text-lg font-bold text-gray-300">
-                  — Yuichi Hosomo, Hem Japan
+                  - Yuichi Hosomo, Hem Japan
                 </p>
               </div>
             </div>
diff --git a/components/SDGsFooter/SDGsFooter.tsx b/components/SDGsFooter/SDGsFooter.tsx
new file mode 100644
index 0000000..9e2d092
--- /dev/null
+++ b/components/SDGsFooter/SDGsFooter.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import Image from "next/image";
+
+const UN_SDG_BASE =
+  "https://www.un.org/sustainabledevelopment/wp-content/uploads/2019/08";
+
+// Major SDGs DeCleanup aligns with: cities & waste, consumption & waste, climate, life below water, life on land
+const MAJOR_SDG_NUMS = [11, 12, 13, 14, 15];
+
+const sdgIcons = MAJOR_SDG_NUMS.map((num) => ({
+  num,
+  src: `${UN_SDG_BASE}/E-Goal-${String(num).padStart(2, "0")}-1024x1024.png`,
+  alt: `SDG ${num}`,
+}));
+
+export default function SDGsFooter() {
+  return (
+    <section className="w-full py-12 md:py-16 bg-black border-t border-gray-800">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <p
+          className="text-center text-sm uppercase tracking-wider text-gray-500 mb-6"
+          style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
+        >
+          Aligned with the UN Sustainable Development Goals
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
+          {sdgIcons.map((goal) => (
+            <a
+              key={goal.num}
+              href="https://www.un.org/sustainabledevelopment"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex-shrink-0 rounded-lg border border-white/10 bg-white/5 p-1 transition hover:border-[#58B12F]/40 hover:bg-white/10"
+              title={`SDG ${goal.num}`}
+            >
+              <Image
+                src={goal.src}
+                alt={goal.alt}
+                width={48}
+                height={48}
+                className="h-10 w-10 sm:h-12 sm:w-12 object-contain"
+                unoptimized
+              />
+            </a>
+          ))}
+        </div>
+        <p className="mt-6 text-center text-xs text-gray-500 max-w-2xl mx-auto">
+          <a
+            href="https://www.un.org/sustainabledevelopment"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[#58B12F] hover:text-[#FAFF00] underline"
+          >
+            United Nations Sustainable Development Goals
+          </a>
+          {" · "}
+          The content of this publication has not been approved by the United Nations and does not reflect the views of the United Nations or its officials or Member States.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index a5a0d3d..eaf067e 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -38,6 +38,7 @@ const UseDeCleanupToday = () => {
       bullets: [
         "Live on Base",
         "Used for quick rewards and trading",
+        "Holders will be airdropped $cDCU for the full experience",
       ],
       buttonLabel: "Swap ETH/bDCU",
       buttonHref: "https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07",
@@ -72,7 +73,7 @@ const UseDeCleanupToday = () => {
       className="w-full overflow-x-hidden px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20"
     >
       <div className="mx-auto max-w-7xl">
-        {/* Section Header — after hero: EARN DECLEANUP REWARDS TODAY */}
+        {/* Section Header - after hero: EARN DECLEANUP REWARDS TODAY */}
         <div className="mb-16 text-center">
           <h2 className="mb-4 text-4xl font-normal tracking-tight text-white md:text-5xl">
             EARN DECLEANUP <span className="text-[#58B12F]">REWARDS</span> TODAY
diff --git a/components/UserGuide/UserGuide.tsx b/components/UserGuide/UserGuide.tsx
index f8dd6e3..d893090 100644
--- a/components/UserGuide/UserGuide.tsx
+++ b/components/UserGuide/UserGuide.tsx
@@ -329,7 +329,7 @@ const UserGuide = () => {
           </div>
         </section>
 
-        {/* SECTION 2 — HOW IT WORKS (3-STEP FLOW) */}
+        {/* SECTION 2 - HOW IT WORKS (3-STEP FLOW) */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             How It Works
@@ -376,13 +376,13 @@ const UserGuide = () => {
           </div>
         </section>
 
-        {/* SECTION 3 — REWARDS OVERVIEW (2 FEATURE CARDS) */}
+        {/* SECTION 3 - REWARDS OVERVIEW (2 FEATURE CARDS) */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Rewards Overview
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {/* Card A — Impact Product */}
+            {/* Card A - Impact Product */}
             <div className="bg-gray-900 border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300 hover:-translate-y-1">
               <div className="w-14 h-14 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center mb-4">
                 <TargetIcon className="w-7 h-7 text-white" />
@@ -395,7 +395,7 @@ const UserGuide = () => {
               </p>
             </div>
 
-            {/* Card B — $bDCU Rewards */}
+            {/* Card B - $bDCU Rewards */}
             <div className="bg-gray-900 border-l-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(250,255,0,0.2)] transition-all duration-300 hover:-translate-y-1">
               <div className="w-14 h-14 bg-gradient-to-br from-[#FAFF00] to-[#58B12F] rounded-lg flex items-center justify-center mb-4">
                 <CoinIcon className="w-7 h-7 text-black" />
@@ -411,7 +411,7 @@ const UserGuide = () => {
           </div>
         </section>
 
-        {/* SECTION 4 — REWARDS BREAKDOWN */}
+        {/* SECTION 4 - REWARDS BREAKDOWN */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Rewards Breakdown
@@ -514,13 +514,13 @@ const UserGuide = () => {
           </div>
         </section>
 
-        {/* SECTION 5 — VERIFICATION SYSTEM (SPLIT LAYOUT) */}
+        {/* SECTION 5 - VERIFICATION SYSTEM (SPLIT LAYOUT) */}
         <section className="mb-12 md:mb-16">
           <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
             Verification System
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {/* LEFT SIDE — Text block */}
+            {/* LEFT SIDE - Text block */}
             <div className="flex flex-col justify-center">
               <p className="text-gray-300 text-base md:text-lg leading-relaxed mb-4">
                 Your cleanup will be reviewed by community verifiers, who are
@@ -534,7 +534,7 @@ const UserGuide = () => {
               </p>
             </div>
 
-            {/* RIGHT SIDE — Illustration with icon */}
+            {/* RIGHT SIDE - Illustration with icon */}
             <div className="bg-[#0A0A0A] border-2 border-[#58B12F] rounded-xl p-8 flex items-center justify-center aspect-video hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
               <div className="w-full h-full bg-gradient-to-br from-[#58B12F]/20 to-[#FAFF00]/20 rounded-lg flex items-center justify-center">
                 <div className="w-24 h-24 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-full flex items-center justify-center">
@@ -545,7 +545,7 @@ const UserGuide = () => {
           </div>
         </section>
 
-        {/* SECTION 6 — CELO FULL APP COMING SOON (FINAL CARD) */}
+        {/* SECTION 6 - CELO FULL APP COMING SOON (FINAL CARD) */}
         <section className="mb-12 md:mb-16">
           <div className="max-w-3xl mx-auto">
             <div className="bg-[#0A0A0A] border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col items-center text-center hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
@@ -553,7 +553,7 @@ const UserGuide = () => {
                 <PlantIcon className="w-8 h-8 text-white" />
               </div>
               <h3 className="text-2xl md:text-3xl font-semibold text-white mb-4">
-                Full Celo dApp — Coming Soon
+                Full Celo dApp - Coming Soon
               </h3>
               <p className="text-gray-300 text-base md:text-lg leading-relaxed mb-6 max-w-2xl">
                 The complete DeCleanup experience is launching soon on Celo with
diff --git a/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx b/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx
index e1f2536..ba688ed 100644
--- a/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx
+++ b/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx
@@ -5,7 +5,7 @@ export default function WhatIsDeCleanupNetwork() {
     <section className="relative overflow-x-hidden py-16 bg-black md:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6">
         <div className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
-          {/* LEFT — Visual DMRV: gradient, concentric circles, placeholders, overlay */}
+          {/* LEFT - Visual DMRV: gradient, concentric circles, placeholders, overlay */}
           <div className="relative aspect-video w-full overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900 md:aspect-square lg:aspect-[4/3]">
             {/* Abstract gradient background */}
             <div
@@ -21,7 +21,7 @@ export default function WhatIsDeCleanupNetwork() {
               </div>
             </div>
 
-            {/* Placeholder: Community impact (nodes / growth) — top-left area */}
+            {/* Placeholder: Community impact (nodes / growth) - top-left area */}
             <div className="absolute left-4 top-4 flex h-20 w-20 items-center justify-center rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm sm:left-6 sm:top-6 sm:h-24 sm:w-24">
               <svg
                 viewBox="0 0 48 48"
@@ -44,7 +44,7 @@ export default function WhatIsDeCleanupNetwork() {
               <span className="sr-only">Community impact visualization</span>
             </div>
 
-            {/* Placeholder: Cleanup done (check + bag) — top-right area */}
+            {/* Placeholder: Cleanup done (check + bag) - top-right area */}
             <div className="absolute right-4 top-4 flex h-20 w-20 items-center justify-center rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm sm:right-6 sm:top-6 sm:h-24 sm:w-24">
               <svg
                 viewBox="0 0 48 48"
@@ -67,7 +67,7 @@ export default function WhatIsDeCleanupNetwork() {
               <span className="sr-only">Cleanup done visualization</span>
             </div>
 
-            {/* UI overlay: Total Impact — LIVE (lighter so label and border are visible) */}
+            {/* UI overlay: Total Impact - LIVE (lighter so label and border are visible) */}
             <div className="absolute bottom-4 left-4 right-4 rounded-xl border border-white/25 bg-neutral-800/95 p-3 shadow-lg backdrop-blur sm:bottom-6 sm:left-6 sm:right-6 sm:p-4">
               <div className="flex items-center justify-between">
                 <span className="text-xs font-medium uppercase tracking-wider text-gray-200">
@@ -78,7 +78,7 @@ export default function WhatIsDeCleanupNetwork() {
             </div>
           </div>
 
-          {/* RIGHT — DMRV Explanation */}
+          {/* RIGHT - DMRV Explanation */}
           <div className="min-w-0">
             <h2 className="mb-4 text-2xl font-semibold text-white sm:text-3xl md:text-4xl">
               DMRV: Digital Monitoring, Reporting & Verification
diff --git a/components/WhoIsThisFor/WhoIsThisFor.tsx b/components/WhoIsThisFor/WhoIsThisFor.tsx
index 6883cef..ff12124 100644
--- a/components/WhoIsThisFor/WhoIsThisFor.tsx
+++ b/components/WhoIsThisFor/WhoIsThisFor.tsx
@@ -1,110 +1,117 @@
 import React from "react";
 import Link from "next/link";
 
+const cardBase =
+  "relative rounded-2xl border bg-gray-900/80 p-6 text-left transition hover:bg-gray-900/90 card-border-glow";
+
 export default function WhoIsThisFor() {
   return (
     <section className="relative overflow-x-hidden py-24 bg-black">
       <div className="mx-auto max-w-7xl px-4 sm:px-6">
-        {/* Section title */}
-        <h2 className="mb-3 text-center text-3xl font-semibold text-white md:text-4xl">
+        <h2 className="mb-14 text-center text-3xl font-semibold text-white md:text-4xl">
           Who is this for?
         </h2>
-        <p className="mb-14 text-center text-gray-400">
-          Different ways to take part in DeCleanup.
-        </p>
 
         <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-          {/* Card 1 — Environmental Activists (People who clean, care, and act) */}
-          <div className="relative rounded-2xl border border-[#58B12F]/20 bg-gradient-to-b from-[#58B12F]/5 to-transparent p-6 transition hover:border-[#58B12F]/40">
+          {/* Card 1 - Individuals and communities who clean, care and act */}
+          <div className={cardBase}>
             <p className="mb-3 text-xs text-[#58B12F]">
-              People who clean, care, and act
+              Individuals and communities who clean, care and act
             </p>
             <h3 className="mb-3 text-xl font-medium text-white">
-              People who care about the planet
+              For those who care about the planet
             </h3>
             <p className="mb-5 text-gray-400">
-              You clean up nature. We help you prove it and get support for it.
+              Choose how you want to use the app: within other platforms with minimum features or full experience in browser. We’ll show you what you need and where to go.
             </p>
-            <ul className="mb-5 space-y-2 text-sm text-gray-300">
-              <li>• Join or organize cleanup actions</li>
-              <li>• Take photos of the result</li>
-              <li>• Get recognition and rewards for real impact</li>
+            <ul className="mb-6 list-none space-y-2 text-sm text-gray-300">
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Join or organize cleanup actions
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Take photos of the result
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Get recognition and rewards for real impact
+              </li>
             </ul>
-            <p className="mb-6 text-sm italic text-gray-400">
-              &ldquo;Finally, my cleanup actually counts.&rdquo;
-            </p>
             <Link
-              href="#apps"
-              className="inline-flex items-center gap-2 text-[#58B12F] hover:text-[#58B12F]/80"
+              href="/get-started"
+              className="inline-flex items-center gap-2 text-[#FAFF00] hover:text-[#FAFF00]/90"
             >
-              Start a cleanup →
+              Learn more and begin →
             </Link>
-            <p className="mt-4 text-xs text-gray-500">
-              No crypto knowledge needed
-            </p>
           </div>
 
-          {/* Card 2 — Impact Builders & Governors (Web3-native, but impact-first) */}
-          <div className="relative rounded-2xl border border-white/10 bg-white/5 p-6 transition hover:border-white/20">
-            <p className="mb-3 text-xs text-gray-400">
-              Web3-native, but impact-first
+          {/* Card 2 - Web3-native, but impact first */}
+          <div className={cardBase}>
+            <p className="mb-3 text-xs text-[#58B12F]">
+              Web3-native, but impact first
             </p>
             <h3 className="mb-3 text-xl font-medium text-white">
-              People who build and coordinate impact
+              For those who build and coordinate impact
             </h3>
             <p className="mb-5 text-gray-400">
-              Use on-chain tools to coordinate cleanups, rewards, and community
+              Use onchain tools to coordinate cleanups, rewards, and community
               governance.
             </p>
-            <ul className="mb-5 space-y-2 text-sm text-gray-300">
-              <li>• Participate in governance and proposals</li>
-              <li>• Help shape how impact is verified and rewarded</li>
-              <li>• Build on open, impact-focused infrastructure</li>
+            <ul className="mb-6 list-none space-y-2 text-sm text-gray-300">
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Participate in governance and proposals
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Help shape how impact is verified and rewarded
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Build on open, impact-focused infrastructure
+              </li>
             </ul>
-            <p className="mb-6 text-sm italic text-gray-400">
-              &ldquo;This is public-good Web3 that actually touches the real
-              world.&rdquo;
-            </p>
             <Link
               href="/docs"
-              className="inline-flex items-center gap-2 text-[#FAFF00] hover:text-[#FAFF00]/80"
+              className="inline-flex items-center gap-2 text-[#FAFF00] hover:text-[#FAFF00]/90"
             >
-              Explore how the network works →
+              Dive deeper to the network →
             </Link>
-            <p className="mt-4 text-xs text-gray-500">
-              For Web3-native users
-            </p>
           </div>
 
-          {/* Card 3 — Investors & Impact Sponsors (Capital with intention) */}
-          <div className="relative rounded-2xl border border-[#FAFF00]/20 bg-gradient-to-b from-[#FAFF00]/5 to-transparent p-6 transition hover:border-[#FAFF00]/40">
-            <p className="mb-3 text-xs text-[#FAFF00]">
+          {/* Card 3 - Capital with intention */}
+          <div className={cardBase}>
+            <p className="mb-3 text-xs text-[#58B12F]">
               Capital with intention
             </p>
             <h3 className="mb-3 text-xl font-medium text-white">
-              People who fund real-world impact
+              For those who fund real-world impact
             </h3>
             <p className="mb-5 text-gray-400">
               Support verified environmental cleanups and help scale them
               globally.
             </p>
-            <ul className="mb-5 space-y-2 text-sm text-gray-300">
-              <li>• Fund cleanup actions at scale</li>
-              <li>• Support open verification infrastructure</li>
-              <li>• Hold tokens connected to real-world impact</li>
+            <ul className="mb-6 list-none space-y-2 text-sm text-gray-300">
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Fund cleanup actions at scale
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Support open verification infrastructure
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-[#58B12F]">•</span>
+                Hold tokens connected to real-world impact
+              </li>
             </ul>
-            <p className="mb-6 text-sm italic text-gray-400">
-              &ldquo;My capital supports something real and measurable.&rdquo;
-            </p>
             <Link
               href="/tokenomics"
-              className="inline-flex items-center gap-2 text-[#FAFF00] hover:text-[#FAFF00]/80"
+              className="inline-flex items-center gap-2 text-[#FAFF00] hover:text-[#FAFF00]/90"
             >
               See how funding works →
             </Link>
-            <p className="mt-4 text-xs text-gray-500">
-              Transparent · Trackable · Verifiable
-            </p>
           </div>
         </div>
       </div>
diff --git a/components/WhyDeCleanup/WhyDeCleanup.tsx b/components/WhyDeCleanup/WhyDeCleanup.tsx
new file mode 100644
index 0000000..9af766c
--- /dev/null
+++ b/components/WhyDeCleanup/WhyDeCleanup.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+export default function WhyDeCleanup() {
+  return (
+    <section className="relative overflow-x-hidden border-t border-white/10 bg-black py-16 md:py-24">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 text-center">
+        <h2
+          className="mb-8 text-2xl font-semibold text-white sm:text-3xl md:text-4xl"
+          style={{
+            fontFamily: "var(--font-bebas-neue), sans-serif",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+          }}
+        >
+          Why DeCleanup Exists
+        </h2>
+        <p className="text-base leading-relaxed text-gray-400 md:text-lg mb-4">
+          Environmental cleanups already happen.
+          What&apos;s missing is credible, open, reusable proof that they happened - and tools to coordinate, incentivize, and fund them transparently.
+        </p>
+        <p className="text-base leading-relaxed text-gray-400 md:text-lg mb-8">
+          DeCleanup is an SDG-aligned application focused on:
+        </p>
+        <ul className="text-left max-w-xl mx-auto space-y-3 text-base text-gray-300 md:text-lg">
+          <li className="flex items-start gap-3">
+            <span className="text-[#58B12F] shrink-0">•</span>
+            <span><strong className="text-white">DMRV (Data, Measurement, Reporting, Verification)</strong> for cleanups</span>
+          </li>
+          <li className="flex items-start gap-3">
+            <span className="text-[#58B12F] shrink-0">•</span>
+            <span><strong className="text-white">Onchain immutability</strong> of cleanup records</span>
+          </li>
+          <li className="flex items-start gap-3">
+            <span className="text-[#58B12F] shrink-0">•</span>
+            <span><strong className="text-white">Incentives and reputation</strong> for people doing real work</span>
+          </li>
+          <li className="flex items-start gap-3">
+            <span className="text-[#58B12F] shrink-0">•</span>
+            <span><strong className="text-white">Open coordination and funding</strong> for future cleanups</span>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+}
diff --git a/next.config.ts b/next.config.ts
index 265460b..ae973fe 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -4,6 +4,13 @@ const nextConfig = {
   output: "export",
   images: {
     unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "www.un.org",
+        pathname: "/sustainabledevelopment/**",
+      },
+    ],
   },
   basePath: process.env.BASE_PATH || "",
   assetPrefix: process.env.BASE_PATH || "",