From 068243a49ef7dad14646da5568432846dd9c3953 Mon Sep 17 00:00:00 2001
From: Anastasia <142572092+LuminaEnvision@users.noreply.github.com>
Date: Sun, 8 Mar 2026 21:23:45 +0700
Subject: [PATCH] Litepaper redesign, footer updates, token cards alignment,
 ecosystem icon visibility, contract line fit

Made-with: Cursor
---
 app/litepaper/page.tsx                        | 881 +++++++++---------
 app/page.tsx                                  |   2 -
 components/HeroSection/Hero.tsx               |  12 +-
 .../TokenizeImpactSection.tsx                 |   4 +-
 components/LitepaperNav/LitepaperNav.tsx      |  40 +
 .../LitepaperWhyPillarCards.tsx               |  69 ++
 components/NavLink/NavLink.tsx                |  29 +-
 .../StartCleaningChoice.tsx                   | 121 +++
 components/TheoryOfChange/TheoryOfChange.tsx  |   7 +-
 .../UseDeCleanupToday/UseDeCleanupToday.tsx   |   4 +-
 components/WhoIsThisFor/WhoIsThisForCards.tsx |  36 +-
 11 files changed, 706 insertions(+), 499 deletions(-)
 create mode 100644 components/LitepaperNav/LitepaperNav.tsx
 create mode 100644 components/LitepaperWhyPillarCards/LitepaperWhyPillarCards.tsx
 create mode 100644 components/StartCleaningChoice/StartCleaningChoice.tsx

diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
index 1020e95..008ea0e 100644
--- a/app/litepaper/page.tsx
+++ b/app/litepaper/page.tsx
@@ -2,400 +2,278 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import Image from "next/image";
 import {
-  Leaf,
-  Info,
+  Camera,
+  Scan,
+  UserCheck,
+  Link as LinkIcon,
   Building2,
   RefreshCw,
   CloudSun,
   Droplets,
+  Leaf,
+  ArrowRight,
+  CheckCircle,
+  Clock,
+  ArrowUpRight,
   Smartphone,
-  Camera,
+  LayoutDashboard,
   Wand2,
   Wallet,
-  ArrowLeftRight,
-  Layers,
   MapPin,
   FileText,
   MessageCircle,
-  Scan,
-  UserCheck,
-  Link as LinkIcon,
+  Layers,
   Star,
   ShieldCheck,
-  CheckCircle,
-  Clock,
-  ArrowUpRight,
-  Menu
 } from "lucide-react";
+import LitepaperNav from "@/components/LitepaperNav/LitepaperNav";
+import StartCleaningChoice from "@/components/StartCleaningChoice/StartCleaningChoice";
 import TheoryOfChange from "@/components/TheoryOfChange/TheoryOfChange";
-import LitepaperOverviewCards from "@/components/LitepaperOverviewCards/LitepaperOverviewCards";
-
+import LitepaperWhyPillarCards from "@/components/LitepaperWhyPillarCards/LitepaperWhyPillarCards";
 
 export const metadata: Metadata = {
   title: "DeCleanup Network - Litepaper",
   description: "Infrastructure for verifiable, governable, and fundable environmental impact. February 2026 Edition.",
 };
 
+const scrollSection = "scroll-mt-24";
+
 export default function LitepaperPage() {
   return (
     <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-[#58B12F] selection:text-white pb-0">
 
-      {/* Navigation (Litepaper specific) */}
-      <nav className="fixed top-0 w-full z-50 bg-[#0A0A0A]/80 backdrop-blur-md border-b border-white/5">
+      {/* Top bar */}
+      <nav className="fixed top-0 w-full z-50 bg-[#0A0A0A]/90 backdrop-blur-md border-b border-white/5">
         <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
-              <Image
-                src="/images/decleanup_logo_full.png"
-                alt="DeCleanup"
-                width={32}
-                height={32}
-                className="h-8 w-auto object-contain"
-              />
-            </Link>
-            <span className="text-xs text-gray-300 border-l border-gray-700 pl-3 font-medium">LITEPAPER</span>
-          </div>
-          <div className="hidden md:flex items-center gap-6 text-sm text-gray-200 font-medium">
-            <Link href="#overview" className="hover:text-white transition-colors">Overview</Link>
-            <Link href="#ecosystem" className="hover:text-white transition-colors">Ecosystem</Link>
-            <Link href="#tokens" className="hover:text-white transition-colors">Tokens</Link>
-            <Link href="#roadmap" className="hover:text-white transition-colors">Roadmap</Link>
-            <Link href="#appendices" className="hover:text-white transition-colors">Appendices</Link>
-            <a href="https://dapp.decleanup.net" target="_blank" className="border border-[#FAFF00]/50 text-[#FAFF00] px-4 py-1.5 rounded-full text-xs font-bold hover:bg-[#FAFF00] hover:text-black transition-all">
-              LAUNCH APP
-            </a>
-          </div>
-          {/* Mobile Menu Icon (Placeholder) */}
-          <div className="md:hidden text-gray-200">
-            <Menu className="w-6 h-6" />
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+            <Image src="/images/decleanup_logo_full.png" alt="DeCleanup" width={32} height={32} className="h-8 w-auto object-contain" />
+          </Link>
+          <div className="flex items-center gap-4 text-sm text-gray-200 font-medium">
+            <StartCleaningChoice variant="litepaper" />
           </div>
         </div>
       </nav>
 
-      {/* Header / Title */}
-      <header className="relative pt-32 pb-20 px-6 border-b border-white/5 overflow-hidden">
+      {/* Hero */}
+      <header id="top" className="relative pt-28 pb-14 px-6 border-b border-white/5 overflow-hidden">
         <div className="absolute inset-0 opacity-30 pointer-events-none" style={{
           backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)`,
-          backgroundSize: '50px 50px'
-        }}></div>
-        <div className="absolute top-0 right-0 w-96 h-96 bg-[#58B12F] rounded-full blur-[120px] opacity-10 pointer-events-none"></div>
-
-        <div className="max-w-7xl mx-auto relative z-10">
-          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
-            <div>
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs font-medium mb-4">
-                <span className="w-1.5 h-1.5 rounded-full bg-[#FAFF00] animate-pulse"></span>
-                FEBRUARY 2026 EDITION
-              </div>
-              <h1>
-                DECLEANUP <br />
-                <span className="text-[#58B12F]">NETWORK</span>
-              </h1>
-              <p className="text-xl text-gray-200 max-w-xl font-light leading-relaxed font-sans">
-                Infrastructure for verifiable, governable, and fundable environmental impact.
-              </p>
-            </div>
-
-            <div className="flex gap-8 border-l border-white/10 pl-6 md:border-l-0 md:pl-0">
-              <div className="text-left md:text-right">
-                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-medium">Status</div>
-                <div className="text-white text-sm font-bold">PHASE 1: LIVE</div>
-              </div>
-              <div className="w-px h-10 bg-white/10 hidden md:block"></div>
-              <div className="text-left md:text-right">
-                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-medium">Chain</div>
-                <div className="flex items-center gap-2 justify-start md:justify-end mt-1">
-                  <Image src="/base-logo-white.svg" alt="Base" width={20} height={20} className="h-5 w-5 object-contain" />
-                  <Image src="/celo-logo-white.svg" alt="Celo" width={20} height={20} className="h-5 w-5 object-contain" />
-                </div>
-              </div>
-            </div>
+          backgroundSize: "50px 50px",
+        }} />
+        <div className="max-w-7xl mx-auto relative z-10 text-center">
+          <h1 className="text-4xl md:text-5xl font-bebas text-white tracking-wide mb-3">
+            DECLEANUP NETWORK LITEPAPER
+          </h1>
+          <p className="text-lg text-gray-200 max-w-xl mx-auto mb-6">
+            Infrastructure for verifiable, governable, and fundable environmental impact.
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-4 mb-6">
+            <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-[#FAFF00]/30 bg-[#FAFF00]/10 text-[#FAFF00] text-xs font-bold">
+              <span className="w-1.5 h-1.5 rounded-full bg-[#FAFF00] animate-pulse" />
+              PHASE 1 LIVE
+            </span>
+            <span className="text-gray-400 text-sm">Base | Celo</span>
           </div>
+          <p className="text-[#58B12F] font-medium text-lg">
+            Turn cleanups into proof. Turn proof into funding.
+          </p>
         </div>
       </header>
 
-      {/* Why DeCleanup – pillars (from landing) */}
-      <section id="why-decleanup" className="py-20 border-b border-white/5">
-        <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-5xl font-bebas text-white mb-12 text-center">Why DeCleanup Network Exists</h2>
+      <LitepaperNav />
 
-          {/* Problem → Solution (same design as main page) */}
-          <div className="max-w-4xl mx-auto mb-16">
+      {/* #why-decleanup - Why DeCleanup Network Exists */}
+      <section id="why-decleanup" className={`py-20 border-b border-white/5 ${scrollSection}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-12 text-center">Why DeCleanup Network Exists</h2>
+          <div className="max-w-4xl mx-auto mb-12">
             <div className="grid md:grid-cols-3 gap-4 items-center">
-              {/* Problem */}
-              <div className="group relative p-6 rounded-2xl bg-white/[0.04] border border-white/10 transition-all duration-300 hover:border-white/20">
-                <div className="text-gray-300 mb-3 flex justify-center">
-                  <svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                  </svg>
-                </div>
+              <div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
                 <h3 className="text-gray-300 font-semibold text-lg mb-2">The Problem</h3>
-                <p className="text-gray-300 text-sm">Cleanups happen, but there&apos;s no credible proof or transparent coordination</p>
+                <p className="text-gray-300 text-sm">Cleanups happen, but there&apos;s no credible proof or transparent coordination.</p>
               </div>
-
-              {/* Arrow */}
               <div className="hidden md:flex justify-center">
-                <svg className="w-16 h-8 text-[#58B12F]/70" viewBox="0 0 64 32" fill="none">
-                  <path d="M2 16h56m0 0l-12-12m12 12l-12 12" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
+                <ArrowRight className="w-12 h-8 text-[#58B12F]/70 shrink-0" />
               </div>
-
-              {/* Solution */}
-              <div className="group relative p-6 rounded-2xl bg-[#58B12F]/[0.08] border border-[#58B12F]/20 transition-all duration-300 hover:border-[#58B12F]/30">
-                <div className="text-[#58B12F] mb-3 flex justify-center">
-                  <svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
+              <div className="p-6 rounded-2xl bg-[#58B12F]/[0.08] border border-[#58B12F]/20">
                 <h3 className="text-gray-200 font-semibold text-lg mb-2">The Solution</h3>
-                <p className="text-gray-300 text-sm">Verifiable, incentivized, and transparently funded environmental action</p>
+                <p className="text-gray-300 text-sm">Verifiable, incentivized, and transparently funded environmental action.</p>
               </div>
             </div>
           </div>
+          <LitepaperWhyPillarCards />
+        </div>
+      </section>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
-            <div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
-              <FileText className="text-[#58B12F] w-8 h-8 mb-4" />
-              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">DMRV</h3>
-              <p className="text-[#58B12F] text-sm font-medium mb-2">Data, Measurement, Reporting, Verification</p>
-              <p className="text-gray-400 text-sm">Credible proof of environmental impact</p>
-            </div>
-            <div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
-              <Layers className="text-[#58B12F] w-8 h-8 mb-4" />
-              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">Onchain Immutability</h3>
-              <p className="text-[#58B12F] text-sm font-medium mb-2">Permanent Records</p>
-              <p className="text-gray-400 text-sm">Blockchain-verified cleanup history</p>
+      {/* #mission - The Mission */}
+      <section id="mission" className={`py-20 border-b border-white/5 bg-neutral-900/20 ${scrollSection}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-12 text-center">The Mission</h2>
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+            <div className="p-6 rounded-2xl border border-white/10 bg-white/[0.04]">
+              <h3 className="text-white font-bebas text-xl tracking-wide mb-3">Verifiable Data</h3>
+              <p className="text-gray-300 text-sm mb-2">We turn invisible cleanup efforts into standardized, onchain evidence. No more &quot;trust me&quot; - only &quot;verify me.&quot;</p>
+              <p className="text-gray-500 text-xs">Geotagged photos, timestamps, and DMRV create immutable records on Base and Celo chains.</p>
             </div>
-            <div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
-              <Star className="text-[#58B12F] w-8 h-8 mb-4" />
-              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">Incentives & Reputation</h3>
-              <p className="text-[#58B12F] text-sm font-medium mb-2">Reward Real Work</p>
-              <p className="text-gray-400 text-sm">Earn recognition for environmental action</p>
+            <div className="p-6 rounded-2xl border border-white/10 bg-white/[0.04]">
+              <h3 className="text-white font-bebas text-xl tracking-wide mb-3">Auditable Impact</h3>
+              <p className="text-gray-300 text-sm mb-2">Traceable impact records compatible with Hypercerts. Funders see where capital goes and what outcomes it produced.</p>
+              <p className="text-gray-500 text-xs">AI + human verification reduces fraud; impact is attributed to real actors.</p>
             </div>
-            <div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
-              <UserCheck className="text-[#FAFF00] w-8 h-8 mb-4" />
-              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">Open Coordination</h3>
-              <p className="text-[#FAFF00] text-sm font-medium mb-2">Transparent Funding</p>
-              <p className="text-gray-400 text-sm">Community-driven cleanup initiatives</p>
+            <div className="p-6 rounded-2xl border border-white/10 bg-white/[0.04]">
+              <h3 className="text-white font-bebas text-xl tracking-wide mb-3">Governable Funding</h3>
+              <p className="text-gray-300 text-sm mb-2">DAO-based allocation using linked tokens. Communities and funders decide how capital flows.</p>
+              <p className="text-gray-500 text-xs">Governance is tied to $cDCU and reputation.</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* 1. Overview Cards (flip on click) */}
-      <section id="overview" className="py-20 bg-[#0A0A0A]">
+      {/* #dmrv - How Cleanups Become Proof */}
+      <section id="dmrv" className={`py-20 border-b border-white/5 ${scrollSection}`}>
         <div className="max-w-7xl mx-auto px-6">
-          <h2 className="mb-10 flex items-center gap-3">
-            <Info className="text-[#58B12F] w-8 h-8" />
-            The Mission
-          </h2>
-          <LitepaperOverviewCards />
-        </div>
-      </section>
-
-      {/* 2. SDG Alignment */}
-      <section className="py-20 border-t border-white/5 relative overflow-hidden">
-        <div className="absolute inset-0 bg-[#58B12F]/5 -skew-y-3 transform origin-top-left scale-110 pointer-events-none"></div>
-        <div className="max-w-7xl mx-auto px-6 relative z-10">
-          <div className="flex justify-between items-end mb-10">
-            <h2 className="text-5xl text-white font-bebas">SDG <span className="text-[#FAFF00]">ALIGNMENT</span></h2>
-            <span className="text-sm text-gray-300 font-mono hidden md:block tracking-widest">United Nations Sustainable Development Goals</span>
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-2 text-center">How Cleanups Become Proof</h2>
+          <p className="text-gray-400 text-center text-sm mb-12 max-w-2xl mx-auto">Digital Monitoring, Reporting, and Verification. Every cleanup is accounted for.</p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-14">
+            <div className="bg-[#0A0A0A] border border-neutral-700 p-6 rounded-xl flex flex-col items-center text-center group">
+              <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-4 text-sm tabular-nums">01</div>
+              <Camera className="text-white w-8 h-8 mb-3" />
+              <h3 className="text-white text-lg font-bebas tracking-wide mb-1">Capture</h3>
+              <p className="text-xs text-gray-400">Before/after photos + GPS location + waste estimate</p>
+            </div>
+            <div className="bg-[#0A0A0A] border border-neutral-700 p-6 rounded-xl flex flex-col items-center text-center group">
+              <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-4 text-sm tabular-nums">02</div>
+              <Scan className="text-white w-8 h-8 mb-3" />
+              <h3 className="text-white text-lg font-bebas tracking-wide mb-1">AI Scan</h3>
+              <p className="text-xs text-gray-400">Automated waste detection and category scoring</p>
+            </div>
+            <div className="bg-[#0A0A0A] border border-neutral-700 p-6 rounded-xl flex flex-col items-center text-center group">
+              <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-4 text-sm tabular-nums">03</div>
+              <UserCheck className="text-white w-8 h-8 mb-3" />
+              <h3 className="text-white text-lg font-bebas tracking-wide mb-1">Verify</h3>
+              <p className="text-xs text-gray-400">Community review catches edge cases and fraud</p>
+            </div>
+            <div className="bg-[#0A0A0A] border border-neutral-700 p-6 rounded-xl flex flex-col items-center text-center group">
+              <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-4 text-sm tabular-nums">04</div>
+              <LinkIcon className="text-[#58B12F] w-8 h-8 mb-3" />
+              <h3 className="text-white text-lg font-bebas tracking-wide mb-1">Onchain</h3>
+              <p className="text-xs text-gray-400">Minted as permanent Impact Record (Hypercert-compatible)</p>
+            </div>
           </div>
 
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            {/* SDG 11 */}
-            <a href="https://www.un.org/sustainabledevelopment/cities/" target="_blank" rel="noopener noreferrer nofollow" className="bg-amber-600/20 border border-amber-600/30 p-6 rounded-xl hover:bg-amber-600/30 transition-colors group block focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]" title="SDG 11: Sustainable Cities and Communities">
-              <div className="text-amber-500 text-xs font-bold mb-2 font-mono">SDG 11</div>
-              <Building2 className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Sustainable<br />Cities</h3>
-            </a>
-
-            {/* SDG 12 */}
-            <a href="https://www.un.org/sustainabledevelopment/sustainable-consumption-production/" target="_blank" rel="noopener noreferrer nofollow" className="bg-orange-600/20 border border-orange-600/30 p-6 rounded-xl hover:bg-orange-600/30 transition-colors group block focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]" title="SDG 12: Responsible Consumption and Production">
-              <div className="text-orange-500 text-xs font-bold mb-2 font-mono">SDG 12</div>
-              <RefreshCw className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Responsible<br />Consumption</h3>
-            </a>
-
-            {/* SDG 13 */}
-            <a href="https://www.un.org/sustainabledevelopment/climate-change/" target="_blank" rel="noopener noreferrer nofollow" className="bg-emerald-800/20 border border-emerald-700/30 p-6 rounded-xl hover:bg-emerald-800/30 transition-colors group block focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]" title="SDG 13: Climate Action">
-              <div className="text-emerald-500 text-xs font-bold mb-2 font-mono">SDG 13</div>
-              <CloudSun className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Climate<br />Action</h3>
-            </a>
-
-            {/* SDG 14 */}
-            <a href="https://www.un.org/sustainabledevelopment/oceans/" target="_blank" rel="noopener noreferrer nofollow" className="bg-blue-600/20 border border-blue-600/30 p-6 rounded-xl hover:bg-blue-600/30 transition-colors group block focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]" title="SDG 14: Life Below Water">
-              <div className="text-blue-500 text-xs font-bold mb-2 font-mono">SDG 14</div>
-              <Droplets className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Life Below<br />Water</h3>
-            </a>
-
-            {/* SDG 15 */}
-            <a href="https://www.un.org/sustainabledevelopment/biodiversity/" target="_blank" rel="noopener noreferrer nofollow" className="bg-green-600/20 border border-green-600/30 p-6 rounded-xl hover:bg-green-600/30 transition-colors group block focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]" title="SDG 15: Life on Land">
-              <div className="text-green-500 text-xs font-bold mb-2 font-mono">SDG 15</div>
-              <Leaf className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity fill-current" />
-              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Life On<br />Land</h3>
-            </a>
+          <h3 className="text-xl font-bebas text-white mb-4 text-center">What makes this different</h3>
+          <ul className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 max-w-4xl mx-auto text-sm text-gray-300">
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span> Evidence-based, not claim-based</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span> Machine-readable data for ESG and SDG reporting</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span> Portable across impact ecosystems</li>
+            <li className="flex items-start gap-2"><span className="text-[#58B12F] shrink-0">•</span> Tamper-resistant verification trail</li>
+          </ul>
+
+          <div className="mt-12 p-6 rounded-2xl bg-neutral-900/50 border border-white/10 max-w-3xl mx-auto">
+            <p className="text-xs text-gray-400 uppercase tracking-wider mb-4 text-center">Data flow</p>
+            <div className="flex flex-wrap items-center justify-center gap-3 md:gap-6">
+              <div className="flex items-center gap-2"><Smartphone className="w-6 h-6 text-gray-500" /><span className="text-xs text-gray-400">Phone</span></div>
+              <ArrowRight className="w-5 h-5 text-[#58B12F]/60 shrink-0" />
+              <div className="flex items-center gap-2"><Scan className="w-6 h-6 text-gray-500" /><span className="text-xs text-gray-400">AI + Verify</span></div>
+              <ArrowRight className="w-5 h-5 text-[#58B12F]/60 shrink-0" />
+              <div className="flex items-center gap-2"><LinkIcon className="w-6 h-6 text-[#58B12F]" /><span className="text-xs text-gray-400">Blockchain</span></div>
+              <ArrowRight className="w-5 h-5 text-[#58B12F]/60 shrink-0" />
+              <div className="flex items-center gap-2"><LayoutDashboard className="w-6 h-6 text-gray-500" /><span className="text-xs text-gray-400">Funder dashboard</span></div>
+            </div>
           </div>
-        </div>
-      </section>
-
-      {/* 3. The Ecosystem (Twin Engine) */}
-      <section id="ecosystem" className="py-24 bg-[#0A0A0A]">
-        <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-5xl text-center mb-16 font-bebas">THE <span className="text-[#58B12F]">ECOSYSTEM</span></h2>
-
-          <div className="flex flex-col lg:flex-row gap-8 items-stretch">
-            {/* Left: Base App */}
-            <Link
-              href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards"
-              target="_blank"
-              className="flex-1 relative group block"
-            >
-              <div className="absolute inset-0 bg-blue-900/10 rounded-3xl blur-xl group-hover:bg-blue-900/20 transition-all duration-500"></div>
-              <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-blue-500/50 transition-all duration-300">
-                <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
-                  <Smartphone className="text-blue-500 w-32 h-32 -rotate-12 translate-x-4 translate-y-4 opacity-10" />
-                </div>
-
-                <div className="flex items-center gap-3 mb-6">
-                  <span className="bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded tracking-wider">BASE</span>
-                  <h3 className="text-3xl text-white font-bebas tracking-wide">Mini App</h3>
-                </div>
-
-                <p className="text-gray-200 mb-8 min-h-[4rem] text-sm leading-relaxed">Lightweight entry for individuals via Farcaster or Base app.</p>
 
-                <div className="space-y-4 min-h-[10rem]">
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <Camera className="text-blue-400 w-5 h-5" />
-                    <span className="text-sm text-gray-200">Photo-based logging</span>
+          {/* Ecosystem - two ways to use DeCleanup */}
+          <div id="ecosystem" className={`mt-20 ${scrollSection}`}>
+            <h2 className="text-4xl md:text-5xl font-bebas text-white mb-2 text-center">The Ecosystem</h2>
+            <p className="text-gray-400 text-center text-sm mb-10">Two ways to use DeCleanup - lightweight mini app or full platform.</p>
+            <div className="flex flex-col lg:flex-row gap-8 items-stretch">
+              <div className="flex-1 relative group">
+                <div className="absolute inset-0 bg-blue-900/10 rounded-3xl blur-xl group-hover:bg-blue-900/20 transition-all duration-500" />
+                <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-blue-500/50 transition-all duration-300">
+                  <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
+                    <Smartphone className="text-blue-500 w-32 h-32 -rotate-12 translate-x-4 translate-y-4 opacity-30" />
                   </div>
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <Wand2 className="text-blue-400 w-5 h-5" />
-                    <span className="text-sm text-gray-200">Quick verification</span>
+                  <div className="flex items-center gap-3 mb-6">
+                    <span className="bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded tracking-wider">BASE</span>
+                    <h4 className="text-3xl text-white font-bebas tracking-wide">Mini App</h4>
                   </div>
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <Wallet className="text-blue-400 w-5 h-5" />
-                    <span className="text-sm text-gray-200">$bDCU rewards</span>
+                  <p className="text-gray-200 mb-8 min-h-[3.5rem] text-sm leading-relaxed">Lightweight entry for individuals via Farcaster or Base app.</p>
+                  <div className="space-y-4 min-h-[10rem]">
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <Camera className="text-blue-400 w-5 h-5" />
+                      <span className="text-sm text-gray-200">Photo-based logging</span>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <Wand2 className="text-blue-400 w-5 h-5" />
+                      <span className="text-sm text-gray-200">Quick verification</span>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <Wallet className="text-blue-400 w-5 h-5" />
+                      <span className="text-sm text-gray-200">$bDCU rewards</span>
+                    </div>
+                  </div>
+                  <div className="mt-auto pt-8 flex flex-wrap items-center gap-4 text-xs font-bold uppercase tracking-widest">
+                    <a href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-white transition-colors flex items-center gap-1">
+                      Open on Farcaster <ArrowUpRight className="w-4 h-4" />
+                    </a>
+                    <a href="https://base.app/app/miniapp.decleanup.net" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-white transition-colors flex items-center gap-1">
+                      Open on Base app <ArrowUpRight className="w-4 h-4" />
+                    </a>
                   </div>
-                </div>
-
-                <div className="mt-auto pt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-blue-400 group-hover:text-white transition-colors">
-                  Open on Farcaster <ArrowUpRight className="w-4 h-4" />
                 </div>
               </div>
-            </Link>
-
-            {/* Center Connector */}
-            <div className="hidden lg:flex flex-col items-center justify-center gap-2 text-gray-200">
-              <div className="w-px h-full bg-gradient-to-b from-transparent via-[#58B12F] to-transparent"></div>
-              <ArrowLeftRight className="text-[#58B12F] w-6 h-6 animate-pulse" />
-              <div className="w-px h-full bg-gradient-to-b from-transparent via-[#58B12F] to-transparent"></div>
-            </div>
-
-            {/* Right: Celo dApp */}
-            <Link
-              href="https://dapp.decleanup.net"
-              target="_blank"
-              className="flex-1 relative group block"
-            >
-              <div className="absolute inset-0 bg-[#FAFF00]/5 rounded-3xl blur-xl group-hover:bg-[#FAFF00]/10 transition-all duration-500"></div>
-              <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-[#FAFF00]/50 transition-all duration-300">
-                <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
-                  <Layers className="text-[#FAFF00] w-32 h-32 rotate-12 translate-x-4 translate-y-4 opacity-10" />
-                </div>
-
-                <div className="flex items-center gap-3 mb-6">
-                  <span className="bg-[#FAFF00] text-black text-[10px] font-bold px-2 py-1 rounded tracking-wider">CELO</span>
-                  <h3 className="text-3xl text-white font-bebas tracking-wide">Full Platform</h3>
-                </div>
-
-                <p className="text-gray-200 mb-8 min-h-[4rem] text-sm leading-relaxed">Full platform for individuals, NGOs and organizers. Governance and coordination.</p>
-
-                <div className="space-y-4 min-h-[10rem]">
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <MapPin className="text-[#FAFF00] w-5 h-5" />
-                    <span className="text-sm text-gray-200">Geolocation and maps</span>
+              <a
+                href="https://dapp.decleanup.net"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-1 relative group block"
+              >
+                <div className="absolute inset-0 bg-[#FAFF00]/5 rounded-3xl blur-xl group-hover:bg-[#FAFF00]/10 transition-all duration-500" />
+                <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-[#FAFF00]/50 transition-all duration-300">
+                  <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
+                    <Layers className="text-[#FAFF00] w-32 h-32 rotate-12 translate-x-4 translate-y-4 opacity-30" />
                   </div>
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <FileText className="text-[#FAFF00] w-5 h-5" />
-                    <span className="text-sm text-gray-200">Impact reports (Hypercerts)</span>
+                  <div className="flex items-center gap-3 mb-6">
+                    <span className="bg-[#FAFF00] text-black text-[10px] font-bold px-2 py-1 rounded tracking-wider">CELO</span>
+                    <h4 className="text-3xl text-white font-bebas tracking-wide">Full Platform</h4>
                   </div>
-                  <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
-                    <MessageCircle className="text-[#FAFF00] w-5 h-5" />
-                    <span className="text-sm text-gray-200">Funding governance</span>
+                  <p className="text-gray-200 mb-8 min-h-[3.5rem] text-sm leading-relaxed">Full platform for individuals, NGOs and organizers. Governance and coordination.</p>
+                  <div className="space-y-4 min-h-[10rem]">
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <MapPin className="text-[#FAFF00] w-5 h-5" />
+                      <span className="text-sm text-gray-200">Geolocation and maps</span>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <FileText className="text-[#FAFF00] w-5 h-5" />
+                      <span className="text-sm text-gray-200">Impact reports (Hypercerts)</span>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                      <MessageCircle className="text-[#FAFF00] w-5 h-5" />
+                      <span className="text-sm text-gray-200">Funding governance</span>
+                    </div>
+                  </div>
+                  <div className="mt-auto pt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-[#FAFF00] group-hover:text-white transition-colors">
+                    Explore Celo dApp <ArrowUpRight className="w-4 h-4" />
                   </div>
                 </div>
-
-                <div className="mt-auto pt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-[#FAFF00] group-hover:text-white transition-colors">
-                  Explore Celo dApp <ArrowUpRight className="w-4 h-4" />
-                </div>
-              </div>
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* 4. DMRV Flow (Infrastructure) */}
-      <section className="py-24 border-y border-white/5 bg-neutral-900/30">
-        <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-4xl text-white mb-2 font-bebas">CORE INFRASTRUCTURE: <span className="text-[#58B12F]">DMRV</span></h2>
-          <p className="text-gray-200 text-sm mb-12 max-w-2xl">Digital Monitoring, Reporting, and Verification Process. Ensuring every cleanup is accounted for.</p>
-
-          <div className="relative">
-            {/* Connection Line */}
-            <div className="absolute top-1/2 left-0 w-full h-0.5 bg-neutral-800 -translate-y-1/2 hidden md:block z-0"></div>
-
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
-              {/* Step 1 */}
-              <div className="bg-[#0A0A0A] border border-neutral-700 p-8 rounded-xl flex flex-col items-center text-center hover:border-[#58B12F] transition-colors group">
-                <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-6 text-sm tabular-nums group-hover:bg-[#58B12F]/20 group-hover:text-[#58B12F] transition-colors">01</div>
-                <Camera className="text-white w-8 h-8 mb-4 group-hover:scale-110 transition-transform" />
-                <h4 className="text-white text-xl mb-2 font-bebas tracking-wide">Capture</h4>
-                <p className="text-xs text-gray-300">Before/After photos & GPS estimates</p>
-              </div>
-
-              {/* Step 2 */}
-              <div className="bg-[#0A0A0A] border border-neutral-700 p-8 rounded-xl flex flex-col items-center text-center hover:border-[#58B12F] transition-colors group">
-                <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-6 text-sm tabular-nums group-hover:bg-[#58B12F]/20 group-hover:text-[#58B12F] transition-colors">02</div>
-                <Scan className="text-white w-8 h-8 mb-4 group-hover:scale-110 transition-transform" />
-                <h4 className="text-white text-xl mb-2 font-bebas tracking-wide">AI Scan</h4>
-                <p className="text-xs text-gray-300">Waste detection & auto-scoring</p>
-              </div>
-
-              {/* Step 3 */}
-              <div className="bg-[#0A0A0A] border border-neutral-700 p-8 rounded-xl flex flex-col items-center text-center hover:border-[#58B12F] transition-colors group">
-                <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-6 text-sm tabular-nums group-hover:bg-[#58B12F]/20 group-hover:text-[#58B12F] transition-colors">03</div>
-                <UserCheck className="text-white w-8 h-8 mb-4 group-hover:scale-110 transition-transform" />
-                <h4 className="text-white text-xl mb-2 font-bebas tracking-wide">Verify</h4>
-                <p className="text-xs text-gray-300">Community review & edge-case handling</p>
-              </div>
-
-              {/* Step 4 */}
-              <div className="bg-[#0A0A0A] border border-neutral-700 p-8 rounded-xl flex flex-col items-center text-center hover:border-[#58B12F] transition-colors shadow-[0_0_20px_rgba(88,177,47,0.1)] group">
-                <div className="w-10 h-10 rounded-full bg-neutral-800 text-gray-200 font-bold flex items-center justify-center mb-6 text-sm tabular-nums group-hover:bg-[#58B12F]/20 group-hover:text-[#58B12F] transition-colors">04</div>
-                <LinkIcon className="text-[#58B12F] w-8 h-8 mb-4 group-hover:scale-110 transition-transform" />
-                <h4 className="text-white text-xl mb-2 font-bebas tracking-wide">Onchain</h4>
-                <p className="text-xs text-gray-300">Minted as Impact Record (Hypercert)</p>
-              </div>
+              </a>
             </div>
           </div>
         </div>
       </section>
 
-      {/* 5. Tokens (same shape as tokenomics TWO TOKENS) */}
-      <section id="tokens" className="py-24 bg-[#0A0A0A]">
+      {/* #tokenomics - Two Tokens (after Ecosystem) */}
+      <section id="tokenomics" className={`py-20 border-b border-white/5 bg-neutral-900/20 ${scrollSection}`}>
         <div className="max-w-7xl mx-auto px-6">
           <h2 className="text-4xl md:text-5xl text-center mb-12 font-bebas text-gray-200">TWO TOKENS</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {/* $bDCU */}
-            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-8 flex flex-col md:flex-row items-center gap-8 relative overflow-hidden group hover:border-blue-500/30 transition-colors">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
+            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-8 flex flex-col md:flex-row items-stretch gap-8 relative overflow-hidden group hover:border-blue-500/30 transition-colors">
               <div className="absolute top-0 right-0 w-32 h-32 bg-blue-600/10 rounded-full blur-2xl group-hover:bg-blue-600/20 transition-all" />
-              <div className="w-24 h-24 rounded-full border-2 border-blue-500 flex items-center justify-center bg-black z-10 shrink-0 overflow-hidden shadow-[0_0_15px_rgba(59,130,246,0.5)]">
+              <div className="w-24 h-24 rounded-full border-2 border-blue-500 flex items-center justify-center bg-black z-10 shrink-0 overflow-hidden shadow-[0_0_15px_rgba(59,130,246,0.5)] md:self-center">
                 <Image src="/images/dcu-token-logo.png" alt="$bDCU" width={96} height={96} className="w-full h-full object-contain" unoptimized />
               </div>
-              <div className="z-10 text-center md:text-left flex-1">
+              <div className="z-10 text-center md:text-left flex-1 flex flex-col min-w-0">
                 <div className="flex items-center justify-center md:justify-start gap-2 mb-2">
                   <h3 className="text-3xl text-white font-bebas tracking-wide">Utility token</h3>
                   <span className="text-[10px] bg-neutral-800 text-gray-200 px-2 py-0.5 rounded border border-neutral-700 tracking-wider">BASE</span>
@@ -408,45 +286,23 @@ export default function LitepaperPage() {
                   <li className="flex items-center gap-2"><Star className="text-blue-500 w-4 h-4 shrink-0" /> Verifier staking</li>
                   <li className="flex items-center gap-2"><Star className="text-blue-500 w-4 h-4 shrink-0" /> Liquid & tradable</li>
                 </ul>
-                <div className="flex flex-col gap-3">
+                <div className="mt-auto flex flex-col gap-3">
                   <div className="flex flex-wrap gap-2 mb-2">
-                    <a
-                      href="https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex-1 text-center px-4 py-2 bg-[#58B12F] hover:bg-[#58B12F]/80 text-black font-bold rounded-lg transition-all text-xs uppercase tracking-wider"
-                    >
-                      Swap ETH / $bDCU
-                    </a>
-                    <a
-                      href="https://app.uniswap.org/swap?chain=base&inputCurrency=0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex-1 text-center px-4 py-2 border border-[#58B12F] text-[#58B12F] hover:bg-[#58B12F]/10 font-bold rounded-lg transition-all text-xs uppercase tracking-wider"
-                    >
-                      Swap USDT / $bDCU
-                    </a>
+                    <a href="https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="flex-1 text-center px-4 py-2 bg-[#58B12F] hover:bg-[#58B12F]/80 text-black font-bold rounded-lg transition-all text-xs uppercase tracking-wider">Swap ETH / $bDCU</a>
+                    <a href="https://app.uniswap.org/swap?chain=base&inputCurrency=0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="flex-1 text-center px-4 py-2 border border-[#58B12F] text-[#58B12F] hover:bg-[#58B12F]/10 font-bold rounded-lg transition-all text-xs uppercase tracking-wider">Swap USDT / $bDCU</a>
                   </div>
-                  <a
-                    href="https://basescan.org/token/0x30171b7014c02229497CdE6745DD3aD821F12b07"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1 font-mono break-all"
-                  >
-                    <LinkIcon className="w-3 h-3 shrink-0" />
-                    0x30171b7014c02229497CdE6745DD3aD821F12b07
+                  <a href="https://basescan.org/token/0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="text-[10px] text-gray-400 hover:text-white transition-colors flex items-center gap-1 font-mono whitespace-nowrap overflow-x-auto min-w-0">
+                    <LinkIcon className="w-3 h-3 shrink-0 flex-shrink-0" /> $bDCU contract: 0x30171b7014c02229497CdE6745DD3aD821F12b07
                   </a>
                 </div>
               </div>
             </div>
-
-            {/* $cDCU */}
-            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-8 flex flex-col md:flex-row items-center gap-8 relative overflow-hidden group hover:border-[#FAFF00]/30 transition-colors">
+            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-8 flex flex-col md:flex-row items-stretch gap-8 relative overflow-hidden group hover:border-[#FAFF00]/30 transition-colors">
               <div className="absolute top-0 right-0 w-32 h-32 bg-[#58B12F]/10 rounded-full blur-2xl group-hover:bg-[#58B12F]/20 transition-all" />
-              <div className="w-24 h-24 rounded-full border-2 border-[#58B12F] flex items-center justify-center bg-black z-10 shrink-0 overflow-hidden shadow-[0_0_15px_rgba(88,177,47,0.5)]">
+              <div className="w-24 h-24 rounded-full border-2 border-[#58B12F] flex items-center justify-center bg-black z-10 shrink-0 overflow-hidden shadow-[0_0_15px_rgba(88,177,47,0.5)] md:self-center">
                 <Image src="/images/dcu-token-logo.png" alt="$cDCU" width={96} height={96} className="w-full h-full object-contain" unoptimized />
               </div>
-              <div className="z-10 text-center md:text-left flex-1">
+              <div className="z-10 text-center md:text-left flex-1 flex flex-col min-w-0">
                 <div className="flex items-center justify-center md:justify-start gap-2 mb-2">
                   <h3 className="text-3xl text-white font-bebas tracking-wide">Governance</h3>
                   <span className="text-[10px] bg-neutral-800 text-gray-200 px-2 py-0.5 rounded border border-neutral-700 tracking-wider">CELO</span>
@@ -458,153 +314,282 @@ export default function LitepaperPage() {
                   <li className="flex items-center gap-2"><ShieldCheck className="text-[#58B12F] w-4 h-4 shrink-0" /> Governance via Gardens.fund</li>
                   <li className="flex items-center gap-2"><ShieldCheck className="text-[#58B12F] w-4 h-4 shrink-0" /> Verifier roles, streaks, analytics</li>
                 </ul>
-                <button disabled className="inline-block text-center px-6 py-3 bg-neutral-800 text-gray-400 font-semibold rounded-xl cursor-not-allowed opacity-60">
-                  View Celo dApp (inactive)
-                </button>
+                <div className="mt-auto">
+                  <button disabled className="w-full text-center px-6 py-3 bg-neutral-800 text-gray-400 font-semibold rounded-xl cursor-not-allowed opacity-60">View Celo dApp (inactive)</button>
+                </div>
               </div>
             </div>
           </div>
+          <p className="text-center mt-8">
+            <Link href="/tokenomics" className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-semibold text-sm transition-colors">
+              Read full tokenomics
+            </Link>
+          </p>
         </div>
       </section>
 
-      {/* 6. Roadmap */}
-      <section id="roadmap" className="py-24 border-t border-white/5 relative">
+      {/* #theoryofchange - From Action to Infrastructure */}
+      <section id="theoryofchange" className={`py-20 border-b border-white/5 bg-neutral-900/20 ${scrollSection}`}>
         <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-5xl mb-12 font-bebas">ROADMAP</h2>
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-12 text-center">From Action to Infrastructure</h2>
+
+          <h3 className="text-xl font-bebas text-white mb-6 text-center">The Gap We Close</h3>
+          <div className="grid md:grid-cols-2 gap-6 mb-14 max-w-4xl mx-auto">
+            <div className="p-6 rounded-xl border border-red-500/20 bg-red-950/20">
+              <h4 className="text-red-400 font-bebas text-lg mb-4">Without DeCleanup</h4>
+              <ul className="space-y-2 text-sm text-gray-300">
+                <li>• Cleanups happen but stay invisible</li>
+                <li>• Funders rely on trust and reports</li>
+                <li>• Data sits in spreadsheets</li>
+                <li>• Volunteers get nothing</li>
+              </ul>
+            </div>
+            <div className="p-6 rounded-xl border border-[#58B12F]/30 bg-[#58B12F]/5">
+              <h4 className="text-[#58B12F] font-bebas text-lg mb-4">With DeCleanup</h4>
+              <ul className="space-y-2 text-sm text-gray-300">
+                <li>• Every cleanup becomes a verified record</li>
+                <li>• Funders verify outcomes before funding</li>
+                <li>• Data travels across ecosystems</li>
+                <li>• Contributors build reputation and earn rewards</li>
+              </ul>
+            </div>
+          </div>
 
-          <div className="space-y-8 relative pl-8 md:pl-0">
-            {/* Vertical Line for mobile */}
-            <div className="absolute left-[31px] top-0 bottom-0 w-px bg-neutral-800 md:hidden"></div>
+          <h3 className="text-xl font-bebas text-white mb-6 mt-14 text-center">SDG Alignment</h3>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 max-w-4xl mx-auto">
+            <a href="https://www.un.org/sustainabledevelopment/cities/" target="_blank" rel="noopener noreferrer nofollow" className="bg-amber-600/20 border border-amber-600/30 p-4 rounded-xl hover:bg-amber-600/30 transition-colors block text-center">
+              <div className="text-amber-500 text-xs font-bold mb-1 font-mono">SDG 11</div>
+              <Building2 className="text-white w-6 h-6 mx-auto mb-2 opacity-80" />
+              <p className="text-white text-xs font-bebas uppercase">Sustainable Cities</p>
+              <p className="text-amber-200/80 text-[10px] mt-1">Community-led urban cleanup</p>
+            </a>
+            <a href="https://www.un.org/sustainabledevelopment/sustainable-consumption-production/" target="_blank" rel="noopener noreferrer nofollow" className="bg-orange-600/20 border border-orange-600/30 p-4 rounded-xl hover:bg-orange-600/30 transition-colors block text-center">
+              <div className="text-orange-500 text-xs font-bold mb-1 font-mono">SDG 12</div>
+              <RefreshCw className="text-white w-6 h-6 mx-auto mb-2 opacity-80" />
+              <p className="text-white text-xs font-bebas uppercase">Responsible Consumption</p>
+              <p className="text-orange-200/80 text-[10px] mt-1">Waste diversion and sorting</p>
+            </a>
+            <a href="https://www.un.org/sustainabledevelopment/climate-change/" target="_blank" rel="noopener noreferrer nofollow" className="bg-emerald-800/20 border border-emerald-700/30 p-4 rounded-xl hover:bg-emerald-800/30 transition-colors block text-center">
+              <div className="text-emerald-500 text-xs font-bold mb-1 font-mono">SDG 13</div>
+              <CloudSun className="text-white w-6 h-6 mx-auto mb-2 opacity-80" />
+              <p className="text-white text-xs font-bebas uppercase">Climate Action</p>
+              <p className="text-emerald-200/80 text-[10px] mt-1">Emissions reduction from waste</p>
+            </a>
+            <a href="https://www.un.org/sustainabledevelopment/oceans/" target="_blank" rel="noopener noreferrer nofollow" className="bg-blue-600/20 border border-blue-600/30 p-4 rounded-xl hover:bg-blue-600/30 transition-colors block text-center">
+              <div className="text-blue-500 text-xs font-bold mb-1 font-mono">SDG 14</div>
+              <Droplets className="text-white w-6 h-6 mx-auto mb-2 opacity-80" />
+              <p className="text-white text-xs font-bebas uppercase">Life Below Water</p>
+              <p className="text-blue-200/80 text-[10px] mt-1">Waterway and coastal cleanup</p>
+            </a>
+            <a href="https://www.un.org/sustainabledevelopment/biodiversity/" target="_blank" rel="noopener noreferrer nofollow" className="bg-green-600/20 border border-green-600/30 p-4 rounded-xl hover:bg-green-600/30 transition-colors block text-center">
+              <div className="text-green-500 text-xs font-bold mb-1 font-mono">SDG 15</div>
+              <Leaf className="text-white w-6 h-6 mx-auto mb-2 opacity-80 fill-current" />
+              <p className="text-white text-xs font-bebas uppercase">Life on Land</p>
+              <p className="text-green-200/80 text-[10px] mt-1">Land and ecosystem restoration</p>
+            </a>
+          </div>
+        </div>
+      </section>
 
-            {/* Phase 1 - Base blue */}
-            <div className="flex flex-col md:flex-row gap-6 relative">
-              <div className="hidden md:flex w-32 flex-col items-end pt-2">
-                <span className="text-blue-500 font-bold text-lg font-bebas tracking-wide">PHASE 1</span>
-                <span className="text-xs text-gray-300 uppercase tracking-widest">Live</span>
-              </div>
-              {/* Node */}
-              <div className="absolute left-[-11px] md:static w-6 h-6 rounded-full bg-blue-500 border-4 border-black z-10 shrink-0"></div>
+      {/* #toc - Theory of Change */}
+      <section id="toc" className={`py-20 border-b border-white/5 bg-[#0A0A0A] ${scrollSection}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-4 text-center">Theory of Change</h2>
+          <p className="text-gray-400 text-center text-sm mb-12 max-w-2xl mx-auto">
+            Our theory of change describes how DeCleanup turns invisible cleanup action into visible, verified impact: from the problem of unverified efforts, through the engine of DMRV and onchain records, to outcomes that funders and communities can trust and scale.
+          </p>
+          <div className="overflow-x-auto pb-4">
+            <TheoryOfChange hideAppendix />
+          </div>
+        </div>
+      </section>
 
-              <div className="flex-1 bg-neutral-900/50 border border-blue-500/30 p-6 rounded-xl hover:bg-neutral-900/80 transition-colors">
-                <h3 className="text-xl text-white mb-2 md:hidden font-bebas tracking-wide text-blue-500">PHASE 1 - LIVE</h3>
-                <h4 className="text-white text-lg font-medium mb-3">Foundation</h4>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm text-gray-200">
-                  <div className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4" /> Base Mini App</div>
-                  <div className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4" /> $bDCU Rewards</div>
-                  <div className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4" /> Basic Verification</div>
-                </div>
-              </div>
+      {/* #roadmap - Where We Are and Where We're Going */}
+      <section id="roadmap" className={`py-20 border-b border-white/5 ${scrollSection}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-12 text-center">Where We Are and Where We&apos;re Going</h2>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-12">
+            <div className="bg-[#0A0A0A] border border-blue-500/30 rounded-xl p-6">
+              <div className="text-blue-500 font-bebas text-lg mb-1">PHASE 1 - LIVE</div>
+              <ul className="space-y-2 text-sm text-gray-300 mt-4">
+                <li className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4 shrink-0" /> Base Mini App</li>
+                <li className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4 shrink-0" /> $bDCU rewards</li>
+                <li className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4 shrink-0" /> Basic verification</li>
+                <li className="flex items-center gap-2"><CheckCircle className="text-blue-500 w-4 h-4 shrink-0" /> Farcaster integration</li>
+              </ul>
             </div>
-
-            {/* Phase 2 - Celo yellow */}
-            <div className="flex flex-col md:flex-row gap-6 relative">
-              <div className="hidden md:flex w-32 flex-col items-end pt-2">
-                <span className="text-[#FAFF00] font-bold text-lg font-bebas tracking-wide">PHASE 2</span>
-                <span className="text-xs text-gray-300 uppercase tracking-widest">In Dev</span>
-              </div>
-              {/* Node */}
-              <div className="absolute left-[-11px] md:static w-6 h-6 rounded-full bg-[#FAFF00] border-4 border-black z-10 shrink-0 animate-pulse"></div>
-
-              <div className="flex-1 bg-neutral-900/30 border border-dashed border-[#FAFF00]/30 p-6 rounded-xl hover:bg-neutral-900/50 transition-colors">
-                <h3 className="text-xl text-white mb-2 md:hidden font-bebas tracking-wide text-[#FAFF00]">PHASE 2 - IN DEV</h3>
-                <h4 className="text-white text-lg font-medium mb-3">Governance & Celo</h4>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm text-gray-200">
-                  <div className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4" /> Celo Full dApp</div>
-                  <div className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4" /> Impact Products v2</div>
-                  <div className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4" /> Hypercert Records</div>
-                </div>
-              </div>
+            <div className="bg-[#0A0A0A] border border-dashed border-[#FAFF00]/40 rounded-xl p-6">
+              <div className="text-[#FAFF00] font-bebas text-lg mb-1">PHASE 2 - IN DEV</div>
+              <ul className="space-y-2 text-sm text-gray-300 mt-4">
+                <li className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4 shrink-0" /> Celo Full dApp</li>
+                <li className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4 shrink-0" /> Impact Products v2</li>
+                <li className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4 shrink-0" /> Hypercert records</li>
+                <li className="flex items-center gap-2"><Clock className="text-[#FAFF00] w-4 h-4 shrink-0" /> Gardens governance</li>
+              </ul>
+            </div>
+            <div className="bg-[#0A0A0A] border border-neutral-700 rounded-xl p-6 opacity-90">
+              <div className="text-gray-400 font-bebas text-lg mb-1">PHASE 3 - FUTURE</div>
+              <ul className="space-y-2 text-sm text-gray-400 mt-4">
+                <li>• AI-powered verification</li>
+                <li>• RWI Rank (reputation)</li>
+                <li>• Impact staking</li>
+                <li>• Cross-campaign analytics</li>
+              </ul>
             </div>
+          </div>
 
-            {/* Phase 3 */}
-            <div className="flex flex-col md:flex-row gap-6 relative">
-              <div className="hidden md:flex w-32 flex-col items-end pt-2">
-                <span className="text-gray-300 font-bold text-lg font-bebas tracking-wide">PHASE 3</span>
-                <span className="text-xs text-gray-200 uppercase tracking-widest">Future</span>
-              </div>
-              {/* Node */}
-              <div className="absolute left-[-11px] md:static w-6 h-6 rounded-full bg-gray-700 border-4 border-black z-10 shrink-0"></div>
+          <div className="max-w-3xl mx-auto p-6 rounded-xl bg-[#58B12F]/10 border border-[#58B12F]/20">
+            <h3 className="text-lg font-bebas text-white mb-3">Current Focus (Q1-Q2 2026)</h3>
+            <ul className="space-y-2 text-sm text-gray-300">
+              <li>• Onboarding first 50 verified cleanups</li>
+              <li>• Celo governance testing</li>
+              <li>• AI trash detection integration (YOLOv8 on TACO dataset)</li>
+              <li>• Coordinator tools for campaign management</li>
+            </ul>
+          </div>
+        </div>
+      </section>
 
-              <div className="flex-1 bg-neutral-900/10 border border-neutral-800 p-6 rounded-xl opacity-60 hover:opacity-100 transition-opacity">
-                <h3 className="text-xl text-white mb-2 md:hidden font-bebas tracking-wide text-gray-300">PHASE 3</h3>
-                <h4 className="text-white text-lg font-medium mb-3">AI verification</h4>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-200">
-                  <div>• RWI Rank</div>
-                  <div>• Impact Staking</div>
-                </div>
-              </div>
+      {/* #coordinate - For Coordinators */}
+      <section id="coordinate" className={`py-20 border-b border-white/5 bg-neutral-900/20 ${scrollSection}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-2 text-center">For Coordinators</h2>
+          <p className="text-lg text-gray-200 text-center mb-6">Build campaigns that prove themselves.</p>
+          <div className="max-w-2xl mx-auto mb-12 p-6 rounded-xl border border-white/10 bg-white/[0.03]">
+            <h3 className="text-white font-bebas text-lg mb-2">Why coordinate in real life?</h3>
+            <p className="text-gray-300 text-sm">In-person cleanups create real impact and stronger communities. Coordinating them with DeCleanup means every event produces verified, onchain records - so participants get recognition and funders can support what’s actually happening on the ground.</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-10">
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Create Campaigns</h3>
+              <p className="text-sm text-gray-400 mb-3">Set location, goals, and participant criteria.</p>
+              <p className="text-xs text-gray-500">Participants join via app. Build auditable impact records.</p>
+            </div>
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Submit Proposals</h3>
+              <p className="text-sm text-gray-400 mb-3">Shape network rules and priorities.</p>
+              <p className="text-xs text-gray-500">Community reviews and votes. Decisions happen onchain.</p>
+            </div>
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Apply for Funding</h3>
+              <p className="text-sm text-gray-400 mb-3">Access equipment, logistics, and organizer support.</p>
+              <p className="text-xs text-gray-500">Transparent criteria, open evaluation. Pools governed by $cDCU holders.</p>
             </div>
           </div>
+
+          <h3 className="text-lg font-bebas text-white mb-3 text-center">What&apos;s Coming</h3>
+          <ul className="text-sm text-gray-400 text-center mb-8 max-w-2xl mx-auto space-y-1">
+            <li>• Full governance on Celo (vote with $cDCU)</li>
+            <li>• Shared DMRV data access across campaigns</li>
+            <li>• Cross-campaign benchmarking and best practices</li>
+          </ul>
+
+          <p className="text-center mb-6">
+            <a href="https://t.me/decleanup" target="_blank" rel="noopener noreferrer" className="inline-block px-6 py-3 rounded-xl bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-semibold text-sm transition-colors">
+              Start coordinating now - no permission required
+            </a>
+          </p>
+          <p className="text-center text-sm text-gray-400">
+            <a href="mailto:decentralizedcleanup@gmail.com" className="text-[#58B12F] hover:underline">Email us</a>
+          </p>
         </div>
       </section>
 
-      {/* Visual Theory of Change (Appendix Included) */}
-      <section id="appendices" className="py-24 bg-neutral-900/20 border-t border-white/5">
+      {/* #forfunders - For Funders */}
+      <section id="forfunders" className={`py-20 border-b border-white/5 ${scrollSection}`}>
         <div className="max-w-7xl mx-auto px-6">
-          <div className="overflow-x-auto pb-4">
-            <TheoryOfChange />
+          <h2 className="text-4xl md:text-5xl font-bebas text-white mb-2 text-center">For Funders</h2>
+          <p className="text-lg text-gray-200 text-center mb-6">Fund action, not promises.</p>
+          <div className="max-w-2xl mx-auto mb-12 p-6 rounded-xl border border-white/10 bg-white/[0.03]">
+            <h3 className="text-white font-bebas text-lg mb-2">Why fund us?</h3>
+            <p className="text-gray-300 text-sm">DeCleanup turns cleanup action into verifiable, onchain evidence. Funders get tamper-resistant records instead of self-reported claims, reusable data for ESG and SDG reporting, and a say in how pools and priorities are set through governance.</p>
           </div>
-          <div className="mt-8 flex justify-center">
-            <Link
-              href="/toc"
-              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-semibold text-sm uppercase tracking-wide transition-colors"
-            >
-              Full theory of change
-            </Link>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-10">
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Donate</h3>
+              <p className="text-sm text-gray-400 mb-3">Direct support via Giveth. Transparent, traceable.</p>
+              <a href="https://giveth.io/project/decentralized-cleanup-network" target="_blank" rel="noopener noreferrer" className="text-xs text-[#58B12F] hover:underline">giveth.io</a>
+            </div>
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Fund Pools</h3>
+              <p className="text-sm text-gray-400 mb-3">Targeted funding via Gardens platform and CrowdWalrus on Sui. Choose: equipment, logistics, research, organizers, cleanup campaigns.</p>
+              <p className="text-xs text-gray-500 mt-2">
+                <a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] hover:underline">gardens.fund</a> fund pools · <a href="https://www.crowdwalrus.xyz/campaigns/decleanupnet" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] hover:underline">crowdwalrus.io</a> crowdfund
+              </p>
+            </div>
+            <div className="p-6 rounded-xl border border-white/10 bg-[#0A0A0A]">
+              <h3 className="text-[#58B12F] font-bebas text-xl mb-3">Hold $DCU</h3>
+              <p className="text-sm text-gray-400 mb-3">Governance participation and liquidity signal. Connect to network activity.</p>
+              <a href="https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="text-xs text-[#58B12F] hover:underline">swap link</a>
+            </div>
           </div>
 
-          <div className="mt-12">
-            <h3 className="text-xl text-[#58B12F] font-bebas tracking-wide mb-4 uppercase">Additional Details</h3>
-            <div className="grid md:grid-cols-2 gap-8 text-sm text-gray-200 leading-relaxed">
-              <div>
-                <h4 className="text-white font-bold mb-2">Governance Principles</h4>
-                <p>Impact first, speculation minimized. Stable capital remains primary for funding decisions to ensure outcomes are not correlated with market volatility.</p>
-              </div>
-              <div>
-                <h4 className="text-white font-bold mb-2">Interoperability</h4>
-                <p>DeCleanup is designed to align with existing SDG/ESG frameworks. Verified data is meant to travel, not stay siloed, ensuring composability across the Regen ecosystem.</p>
-              </div>
+          <h3 className="text-lg font-bebas text-white mb-4 text-center">What Funders Get</h3>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
+            <div className="p-4 rounded-xl border border-[#58B12F]/20 bg-[#58B12F]/5">
+              <h4 className="text-white font-semibold text-sm mb-1">Auditable Outcomes</h4>
+              <p className="text-xs text-gray-400">Tamper-resistant records, not self-reported claims.</p>
+            </div>
+            <div className="p-4 rounded-xl border border-[#58B12F]/20 bg-[#58B12F]/5">
+              <h4 className="text-white font-semibold text-sm mb-1">Reusable Data</h4>
+              <p className="text-xs text-gray-400">Structured for ESG, SDG, and impact accounting.</p>
+            </div>
+            <div className="p-4 rounded-xl border border-[#58B12F]/20 bg-[#58B12F]/5">
+              <h4 className="text-white font-semibold text-sm mb-1">Lower Overhead</h4>
+              <p className="text-xs text-gray-400">Verification at protocol level, no custom audits.</p>
+            </div>
+            <div className="p-4 rounded-xl border border-[#58B12F]/20 bg-[#58B12F]/5">
+              <h4 className="text-white font-semibold text-sm mb-1">Governance Voice</h4>
+              <p className="text-xs text-gray-400">$cDCU holders shape pool criteria and priorities.</p>
             </div>
           </div>
+
+          <h3 className="text-lg font-bebas text-white mb-3 text-center">What&apos;s Coming</h3>
+          <ul className="text-sm text-gray-400 text-center mb-8 max-w-2xl mx-auto space-y-1">
+            <li>• Funder dashboard with aggregated metrics</li>
+            <li>• Onchain voting for pool priorities</li>
+            <li>• Structured partnership workflows for NGOs and ESG teams</li>
+          </ul>
+
+          <p className="text-center mb-6">
+            <a href="https://t.me/decleanup" target="_blank" rel="noopener noreferrer" className="inline-block px-6 py-3 rounded-xl bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-semibold text-sm transition-colors">
+              Get in touch before committing funding
+            </a>
+          </p>
+          <p className="text-center text-sm text-gray-400">
+            <a href="mailto:decentralizedcleanup@gmail.com" className="text-[#58B12F] hover:underline">Email us</a>
+          </p>
         </div>
       </section>
 
-      {/* Footer / CTA */}
+      {/* Footer */}
       <footer className="bg-black border-t border-neutral-900 pt-16 pb-8">
         <div className="max-w-7xl mx-auto px-6 text-center">
-
-          <div className="bg-gradient-to-b from-[#58B12F]/10 to-transparent p-12 rounded-3xl border border-[#58B12F]/20 mb-16 relative overflow-hidden">
-            <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#58B12F] to-transparent opacity-50"></div>
-
-            <h2 className="text-4xl md:text-6xl text-white mb-6 font-bebas tracking-tight">NOT HYPE. <span className="text-[#58B12F]">INFRASTRUCTURE.</span></h2>
-            <p className="text-gray-200 max-w-2xl mx-auto mb-8 text-lg font-light">
+          <div className="bg-gradient-to-b from-[#58B12F]/10 to-transparent p-12 rounded-3xl border border-[#58B12F]/20 mb-12 relative overflow-hidden">
+            <h2 className="text-3xl md:text-5xl text-white mb-4 font-bebas tracking-tight">NOT HYPE. <span className="text-[#58B12F]">INFRASTRUCTURE.</span></h2>
+            <p className="text-gray-200 max-w-xl mx-auto mb-8 text-sm">
               DeCleanup Network is open, SDG-aligned infrastructure for turning real environmental work into verifiable, fundable outcomes.
             </p>
             <div className="flex flex-col sm:flex-row justify-center gap-4">
-              <a href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards" target="_blank" className="px-8 py-4 bg-white text-black font-bold rounded-xl hover:bg-gray-200 transition-colors flex items-center justify-center gap-2">
+              <a href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards" target="_blank" rel="noopener noreferrer" className="px-6 py-3 bg-white text-black font-bold rounded-xl hover:bg-gray-200 transition-colors flex items-center justify-center gap-2 text-sm">
                 Start on Base <ArrowUpRight className="w-4 h-4" />
               </a>
-              <a href="https://dapp.decleanup.net" target="_blank" className="px-8 py-4 bg-transparent border border-white/20 text-white font-bold rounded-xl hover:bg-white/5 transition-colors flex items-center justify-center gap-2">
+              <a href="https://dapp.decleanup.net" target="_blank" rel="noopener noreferrer" className="px-6 py-3 bg-transparent border border-white/20 text-white font-bold rounded-xl hover:bg-white/5 transition-colors flex items-center justify-center gap-2 text-sm">
                 Test on Celo <ArrowUpRight className="w-4 h-4" />
               </a>
             </div>
           </div>
-
           <div className="border-t border-neutral-900 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
             <div className="flex items-center gap-2">
-              <Image
-                src="/images/decleanup_logo_full.png"
-                alt="DeCleanup Network"
-                width={32}
-                height={32}
-                className="h-8 w-auto object-contain"
-              />
+              <Image src="/images/decleanup_logo_full.png" alt="DeCleanup Network" width={32} height={32} className="h-8 w-auto object-contain" />
             </div>
             <p className="text-xs text-gray-200">2026 © DeCleanup Network. Open Infrastructure.</p>
           </div>
         </div>
       </footer>
-
     </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index fcfde14..296edb6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,6 @@ import TokenizeImpactSection from "@/components/HowToTokonizeImpact/TokenizeImpa
 import UseDeCleanupToday from "@/components/UseDeCleanupToday/UseDeCleanupToday";
 import CommunityImpactSection from "@/components/CommunityImpactSection/CommunityImpactSection";
 import TotalImpactSection from "@/components/TotalImpactSection/TotalImpactSection";
-import AppendixSection from "@/components/AppendixSection/AppendixSection";
 import JoinTheMovementSection from "@/components/JoinTheMovementSection/JoinTheMovementSection";
 import NavLink from "@/components/NavLink/NavLink";
 
@@ -17,7 +16,6 @@ const Page = () => {
       <UseDeCleanupToday />
       <CommunityImpactSection />
       <TotalImpactSection />
-      <AppendixSection />
       <JoinTheMovementSection />
       <NavLink variant="full" />
     </main>
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
index 3cf9a63..8efb302 100644
--- a/components/HeroSection/Hero.tsx
+++ b/components/HeroSection/Hero.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import StartCleaningChoice from "@/components/StartCleaningChoice/StartCleaningChoice";
 
 const Hero = () => {
   return (
@@ -46,19 +47,14 @@ const Hero = () => {
           Join volunteers worldwide turning trash pickup into verified, rewarded impact.
         </p>
 
-        {/* CTAs - primary: Get Started, secondary: How It Works */}
+        {/* CTAs - primary: Start Cleaning (modal), secondary: How it works */}
         <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <Link
-            href="/get-started"
-            className="rounded-xl bg-white px-6 py-3.5 font-semibold text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)] min-h-[44px] flex items-center justify-center"
-          >
-            Start Cleaning
-          </Link>
+          <StartCleaningChoice />
           <Link
             href="/userguide"
             className="rounded-xl border border-white/20 px-6 py-3.5 font-medium text-white transition-all duration-300 hover:border-white/40 hover:bg-white/5 min-h-[44px] flex items-center justify-center"
           >
-            See How It Works
+            How it works
           </Link>
         </div>
       </div>
diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
index fc889ee..3dd3fe7 100644
--- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
+++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import Image from "next/image";
 
 const steps = [
-  { number: "1.", title: "Find your spot" },
-  { number: "2.", title: "Do the work" },
+  { number: "1.", title: "Find your spot and take photo" },
+  { number: "2.", title: "Do the cleanup work" },
   { number: "3.", title: "Photograph the result" },
   { number: "4.", title: "Earn your reward" },
 ];
diff --git a/components/LitepaperNav/LitepaperNav.tsx b/components/LitepaperNav/LitepaperNav.tsx
new file mode 100644
index 0000000..b90f43e
--- /dev/null
+++ b/components/LitepaperNav/LitepaperNav.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+
+const sections = [
+  { href: "#why-decleanup", label: "Why DeCleanup Network Exists" },
+  { href: "#mission", label: "The Mission" },
+  { href: "#dmrv", label: "How Cleanups Become Proof" },
+  { href: "#ecosystem", label: "The Ecosystem" },
+  { href: "#tokenomics", label: "Two Tokens" },
+  { href: "#theoryofchange", label: "From Action to Infrastructure" },
+  { href: "#toc", label: "Theory of Change" },
+  { href: "#roadmap", label: "Where We Are and Where We're Going" },
+  { href: "#coordinate", label: "For Coordinators" },
+  { href: "#forfunders", label: "For Funders" },
+];
+
+export default function LitepaperNav() {
+  return (
+    <nav
+      className="sticky top-16 z-40 bg-[#0A0A0A]/95 backdrop-blur-md border-b border-white/5 py-3"
+      aria-label="Litepaper sections"
+    >
+      <div className="max-w-7xl mx-auto px-6 flex flex-wrap items-center justify-center gap-3 md:gap-4 text-xs md:text-sm">
+        <Link href="#top" className="text-gray-400 hover:text-white transition-colors whitespace-nowrap">
+          Top
+        </Link>
+        {sections.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            className="text-gray-300 hover:text-white transition-colors"
+          >
+            {label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}
diff --git a/components/LitepaperWhyPillarCards/LitepaperWhyPillarCards.tsx b/components/LitepaperWhyPillarCards/LitepaperWhyPillarCards.tsx
new file mode 100644
index 0000000..b305db6
--- /dev/null
+++ b/components/LitepaperWhyPillarCards/LitepaperWhyPillarCards.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from "react";
+
+const cards = [
+  {
+    title: "DMRV",
+    subtitle: "Data, Measurement, Reporting, Verification",
+    frontLine: "Credible proof of environmental impact.",
+    backContent: "Every cleanup is captured with photos, location, and waste estimates; scored by AI and verified by the community; then minted as a permanent impact record. This creates a shared, machine-readable evidence base for funders, ESG reporting, and impact accounting.",
+  },
+  {
+    title: "Onchain Immutability",
+    subtitle: "Permanent Records",
+    frontLine: "Blockchain-verified cleanup history.",
+    backContent: "Records live on Base and Celo. They cannot be altered after verification, so funders and partners can trust that impact data is real and attributable. This forms the backbone for rewards, Hypercerts, and future certification layers.",
+  },
+  {
+    title: "Incentives & Reputation",
+    subtitle: "Reward Real Work",
+    frontLine: "Earn recognition for environmental action.",
+    backContent: "Participants earn $bDCU for verified cleanups and build reputation through streaks and verification activity. $cDCU on Celo ties reputation to governance, so long-term contributors have a voice in how the network and funding evolve.",
+  },
+  {
+    title: "Open Coordination",
+    subtitle: "Transparent Funding",
+    frontLine: "Community-driven cleanup initiatives.",
+    backContent: "Campaigns, proposals, and funding pools are governed transparently. Communities decide priorities; funders can trace capital to verified outcomes. No single gatekeeper - coordination and funding are open and auditable.",
+  },
+];
+
+export default function LitepaperWhyPillarCards() {
+  const [flipped, setFlipped] = useState<number | null>(null);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+      {cards.map((card, index) => {
+        const isFlipped = flipped === index;
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => setFlipped(isFlipped ? null : index)}
+            className="relative min-h-[200px] w-full cursor-pointer text-left overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F] transition-colors"
+            aria-label={isFlipped ? `Hide ${card.title} description` : `Show ${card.title} description`}
+          >
+            <div
+              className={`absolute inset-0 p-6 rounded-2xl flex flex-col transition-opacity duration-300 ${!isFlipped ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"}`}
+            >
+              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">{card.title}</h3>
+              <p className="text-[#58B12F] text-sm font-medium mb-2">{card.subtitle}</p>
+              <p className="text-gray-400 text-sm">{card.frontLine}</p>
+              <p className="text-xs text-gray-500 mt-4">Click to read more</p>
+            </div>
+            <div
+              className={`absolute inset-0 p-5 rounded-2xl flex flex-col justify-between bg-neutral-900/95 border border-white/10 transition-opacity duration-300 ${isFlipped ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"}`}
+            >
+              <div className="flex-1 min-h-0 overflow-y-auto">
+                <h3 className="text-white font-bebas text-lg tracking-wide mb-2">{card.title}</h3>
+                <p className="text-gray-300 text-sm leading-relaxed">{card.backContent}</p>
+              </div>
+              <p className="text-xs text-gray-500 mt-3 shrink-0">Click to flip back</p>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/NavLink/NavLink.tsx b/components/NavLink/NavLink.tsx
index 66b4184..d4c126c 100644
--- a/components/NavLink/NavLink.tsx
+++ b/components/NavLink/NavLink.tsx
@@ -16,39 +16,34 @@ const NavLink = ({ variant = "full" }: { variant?: NavLinkVariant }) => {
         <>
           <Divider className="mt-6 bg-gray-800" />
 
-          {/* Footer - 4 columns per brief */}
+          {/* Footer - Resources, Technical, Support */}
           <footer className="mt-6 pt-8 border-t border-gray-800">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-              <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Product</h4>
-                <ul className="space-y-2">
-                  <li><Link href="/get-started" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Get Started</Link></li>
-                  <li><a href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Open App</a></li>
-                </ul>
-              </div>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-8 mb-8">
               <div>
                 <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Resources</h4>
                 <ul className="space-y-2">
                   <li><Link href="/litepaper" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Litepaper</Link></li>
                   <li><Link href="/tokenomics" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Tokenomics</Link></li>
-                  <li><Link href="/docs" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Dev docs</Link></li>
-                  <li><Link href="/get-started" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">User guide</Link></li>
+                  <li><Link href="/toc" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Theory of change</Link></li>
+                  <li><a href="https://paragraph.com/@decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Publications</a></li>
                 </ul>
               </div>
               <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Community</h4>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Technical</h4>
                 <ul className="space-y-2">
-                  <li><a href="https://x.com/DeCleanupNet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Twitter</a></li>
-                  <li><a href="https://farcaster.xyz/decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Farcaster</a></li>
-                  <li><a href="https://t.me/EcoSynthesisX/443" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Telegram</a></li>
                   <li><a href="https://github.com/DeCleanup-Network" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">GitHub</a></li>
+                  <li><Link href="/docs" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Dev docs</Link></li>
+                  <li><Link href="/userguide" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">User guide</Link></li>
+                  <li><span className="text-gray-500 text-sm">Terms of service (coming soon)</span></li>
                 </ul>
               </div>
               <div>
                 <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Support</h4>
                 <ul className="space-y-2">
-                  <li><a href="#" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Gardens.fund</a></li>
-                  <li><a href="#" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Donate on Giveth</a></li>
+                  <li><a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Gardens.fund (coming soon)</a></li>
+                  <li><a href="https://giveth.io/project/decentralized-cleanup-network" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Donate on Giveth</a></li>
+                  <li><a href="https://www.crowdwalrus.xyz/campaigns/decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Fund on CrowdWalrus</a></li>
+                  <li><a href="https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Invest in token</a></li>
                 </ul>
               </div>
             </div>
diff --git a/components/StartCleaningChoice/StartCleaningChoice.tsx b/components/StartCleaningChoice/StartCleaningChoice.tsx
new file mode 100644
index 0000000..13dfee5
--- /dev/null
+++ b/components/StartCleaningChoice/StartCleaningChoice.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+
+const LINKS = {
+  farcaster: "https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards",
+  base: "https://base.app/app/miniapp.decleanup.net",
+  full: "https://dapp.decleanup.net",
+};
+
+type Variant = "default" | "litepaper";
+
+export default function StartCleaningChoice({ variant = "default" }: { variant?: Variant }) {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, right: 0 });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const isLitepaper = variant === "litepaper";
+
+  useEffect(() => {
+    if (!open || !isLitepaper || !buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const gap = 8;
+    setPosition({
+      top: rect.bottom + gap,
+      right: Math.max(16, window.innerWidth - rect.right),
+    });
+  }, [open, isLitepaper]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen(true)}
+        className={
+          isLitepaper
+            ? "border border-[#FAFF00]/50 text-[#FAFF00] px-4 py-1.5 rounded-full text-xs font-bold hover:bg-[#FAFF00] hover:text-black transition-all min-h-[36px] flex items-center justify-center"
+            : "rounded-xl bg-white px-6 py-3.5 font-semibold text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)] min-h-[44px] flex items-center justify-center"
+        }
+      >
+        {isLitepaper ? "LAUNCH APP" : "Start Cleaning"}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 p-4 bg-black/70 backdrop-blur-sm"
+          onClick={() => setOpen(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="start-cleaning-title"
+          style={
+            isLitepaper
+              ? { display: "block" }
+              : { display: "flex", alignItems: "center", justifyContent: "center" }
+          }
+        >
+          <div
+            className={
+              isLitepaper
+                ? "absolute w-full max-w-[320px] rounded-2xl border border-[#58B12F]/30 bg-gray-900 p-6 shadow-xl"
+                : "relative w-full max-w-md rounded-2xl border border-[#58B12F]/30 bg-gray-900 p-6 shadow-xl"
+            }
+            style={
+              isLitepaper
+                ? { top: position.top, right: position.right, left: "auto" }
+                : undefined
+            }
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h2 id="start-cleaning-title" className="text-xl font-bold text-white">
+                {isLitepaper ? "Launch app" : "Where do you want to start?"}
+              </h2>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded-lg p-1.5 text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+                aria-label="Close"
+              >
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <a
+                href={LINKS.farcaster}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                Mini app on Farcaster
+              </a>
+              <a
+                href={LINKS.base}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                Mini app on Base app
+              </a>
+              <a
+                href={LINKS.full}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                {isLitepaper ? "Full platform on Celo (testing phase)" : "Full platform"}
+              </a>
+            </div>
+
+            <p className="mt-4 text-xs text-gray-400 text-center">
+              Opens in a new tab
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/components/TheoryOfChange/TheoryOfChange.tsx b/components/TheoryOfChange/TheoryOfChange.tsx
index f6101bd..354564e 100644
--- a/components/TheoryOfChange/TheoryOfChange.tsx
+++ b/components/TheoryOfChange/TheoryOfChange.tsx
@@ -9,7 +9,9 @@ import {
     ArrowRight
 } from "lucide-react";
 
-export default function TheoryOfChange() {
+type TheoryOfChangeProps = { hideAppendix?: boolean };
+
+export default function TheoryOfChange({ hideAppendix }: TheoryOfChangeProps) {
     return (
         <div className="w-full relative py-8">
             {/* Background Grid */}
@@ -22,10 +24,13 @@ export default function TheoryOfChange() {
             ></div>
 
             <div className="max-w-7xl mx-auto px-4 relative z-10">
+                {!hideAppendix && (
                 <div className="flex items-center gap-3 mb-12">
                     <span className="text-xs font-mono text-gray-300 border border-gray-800 px-2 py-1 rounded">APPENDIX A</span>
                     <h2 className="text-3xl text-white font-bebas tracking-wide">THEORY OF <span className="text-[#58B12F]">CHANGE</span></h2>
                 </div>
+                )}
+                {hideAppendix && <div className="mb-8" />}
 
                 {/* Flow Container */}
                 <div className="flex flex-col lg:flex-row items-stretch justify-between gap-0 relative">
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index 10bce7f..c0a7b76 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -41,7 +41,7 @@ const UseDeCleanupToday = () => {
             <div className="absolute inset-0 bg-blue-900/10 rounded-3xl blur-xl group-hover:bg-blue-900/20 transition-all duration-500"></div>
             <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-blue-500/50 transition-all duration-300">
               <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
-                <Smartphone className="text-blue-500 w-32 h-32 -rotate-12 translate-x-4 translate-y-4 opacity-10" />
+                <Smartphone className="text-blue-500 w-32 h-32 -rotate-12 translate-x-4 translate-y-4 opacity-30" />
               </div>
 
               <div className="flex items-center gap-3 mb-6">
@@ -82,7 +82,7 @@ const UseDeCleanupToday = () => {
             <div className="absolute inset-0 bg-[#FAFF00]/5 rounded-3xl blur-xl group-hover:bg-[#FAFF00]/10 transition-all duration-500"></div>
             <div className="relative flex h-full flex-col bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-[#FAFF00]/50 transition-all duration-300">
               <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
-                <Layers className="text-[#FAFF00] w-32 h-32 rotate-12 translate-x-4 translate-y-4 opacity-10" />
+                <Layers className="text-[#FAFF00] w-32 h-32 rotate-12 translate-x-4 translate-y-4 opacity-30" />
               </div>
 
               <div className="flex items-center gap-3 mb-6">
diff --git a/components/WhoIsThisFor/WhoIsThisForCards.tsx b/components/WhoIsThisFor/WhoIsThisForCards.tsx
index 091fce7..de81981 100644
--- a/components/WhoIsThisFor/WhoIsThisForCards.tsx
+++ b/components/WhoIsThisFor/WhoIsThisForCards.tsx
@@ -8,26 +8,22 @@ const cards = [
   {
     smallTitle: "Individuals and communities who clean, care and act",
     title: "For those who care about the planet",
-    body: "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.",
-    bullets: [
-      "Join or organize cleanup actions",
-      "Take photos of the result",
-      "Get recognition and rewards for real impact",
-    ],
+    body: "Choose how you want to use the app: minimum features or full experience. And then steps are simple — Join or organize cleanup — Take photos before and after — Get recognition and rewards for real impact.",
+    bullets: [],
     cta: "Learn more and begin →",
     href: "/get-started",
   },
   {
     smallTitle: "Web3-native, but impact first",
     title: "For those who build and coordinate impact",
-    body: "Use onchain tools to coordinate cleanups, rewards, and community governance.",
+    body: "Use our tools to coordinate cleanups, rewards and community governance in your location.",
     bullets: [
       "Participate in governance and proposals",
       "Help shape how impact is verified and rewarded",
       "Build on open, impact-focused infrastructure",
     ],
     cta: "Dive deeper to the network →",
-    href: "/coordinate",
+    href: "/litepaper#coordinate",
   },
   {
     smallTitle: "Capital with intention",
@@ -36,10 +32,10 @@ const cards = [
     bullets: [
       "Fund cleanup actions at scale",
       "Support open verification infrastructure",
-      "Hold tokens connected to real-world impact",
+      "Hold tokens connected to real world",
     ],
     cta: "See how funding works →",
-    href: "/funders",
+    href: "/litepaper#forfunders",
   },
 ];
 
@@ -54,17 +50,19 @@ export default function WhoIsThisForCards() {
           <h2 className="mb-3 text-xl font-bebas font-medium text-white uppercase tracking-wide">
             {card.title}
           </h2>
-          <p className="mb-5 min-h-[6.5rem] text-gray-200 text-sm leading-relaxed">
+          <p className="mb-5 text-gray-200 text-sm leading-relaxed">
             {card.body}
           </p>
-          <ul className="mb-6 min-h-[7.5rem] list-none space-y-2 text-sm text-gray-300">
-            {card.bullets.map((item) => (
-              <li key={item} className="flex items-start gap-2">
-                <span className="text-[#58B12F] shrink-0">•</span>
-                {item}
-              </li>
-            ))}
-          </ul>
+          {card.bullets.length > 0 && (
+            <ul className="mb-6 min-h-[7.5rem] list-none space-y-2 text-sm text-gray-300">
+              {card.bullets.map((item) => (
+                <li key={item} className="flex items-start gap-2">
+                  <span className="text-[#58B12F] shrink-0">•</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          )}
           <span className="mt-auto inline-flex items-center gap-2 text-[#58B12F] hover:text-[#FAFF00] font-medium transition-colors">
             {card.cta}
           </span>