DeCleanup-Network · LuminaEnvision · Feb 28, 2026 · Feb 26, 2026 · Feb 28, 2026
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -19,12 +19,12 @@ const SITE_URL = "https://decleanup.net";
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
-  title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+  title: "Cleanups with action. Proof under verified. Fundable impact. | DeCleanup Network",
   description:
     "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
   alternates: { canonical: SITE_URL },
   openGraph: {
-    title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+    title: "Cleanups with action. Proof under verified. Fundable impact. | DeCleanup Network",
     description:
       "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
     url: SITE_URL,
@@ -33,7 +33,7 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary_large_image",
-    title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+    title: "Cleanups with action. Proof under verified. Fundable impact. | DeCleanup Network",
     description:
       "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
   },

diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
diff --git a/app/toc/page.tsx b/app/toc/page.tsx
@@ -31,7 +31,6 @@ import {
   BookOpen,
   Clock,
   Target,
-  ChevronRight,
 } from "lucide-react";
 
 /* ─── Tiny inline SVG checkmark for lists ─── */
@@ -231,9 +230,6 @@ export default function TocPage() {
                   </div>
                   <h3 className="text-lg font-bebas tracking-wide text-white mb-1">{step.label}</h3>
                   <p className="text-xs text-gray-400 leading-relaxed">{step.desc}</p>
-                  {i < 4 && (
-                    <ChevronRight className="hidden lg:block absolute -right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#58B12F]/40 z-20" />
-                  )}
                 </Card>
               ))}
             </div>
@@ -316,91 +312,138 @@ export default function TocPage() {
           </div>
         </section>
 
-        {/* ─── 04 Pathways ─── */}
+        {/* ─── 04 Pathways (vertical tree) ─── */}
         <section id="pathways" className="py-16 md:py-24 border-t border-white/5 scroll-mt-24">
           <SectionLabel>04 - Causal Pathways</SectionLabel>
           <SectionHeading>Four pathways to systemic change</SectionHeading>
           <p className="text-gray-300 max-w-2xl mb-12 leading-relaxed">
-            Each pathway is an independent theory of how one type of intervention produces lasting change.
+            From shared root to canopy: trust creation is the trunk; coordination and incentives branch in parallel; verification credibility is where institutional trust lives.
           </p>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {[
-              {
-                pathwayId: "P1",
-                title: "Trust Creation",
-                sub: "Simple docs - capital flows",
-                accent: "green" as const,
-                steps: [
-                  "Documentation under 60s",
-                  "Geotag + timestamp",
-                  "Verifiable onchain records",
-                  "Funders gain confidence",
-                  "Capital flows to verified cleanups",
-                ],
-              },
-              {
-                pathwayId: "P2",
-                title: "Coordination Scaling",
-                sub: "Shared infrastructure - network effects",
-                accent: "yellow" as const,
-                steps: [
-                  "Shared DMRV across regions",
-                  "Common data standards",
-                  "Organizers discover best practices",
-                  "Knowledge transfer",
-                  "Effectiveness improves network-wide",
-                ],
-              },
-              {
-                pathwayId: "P3",
-                title: "Incentive Alignment",
-                sub: "Recognition - sustained behavior",
-                accent: "green" as const,
-                steps: [
-                  "$bDCU structured recognition",
-                  "Tangible acknowledgment per action",
-                  "Episodic - sustained participation",
-                  "Documentation normalized",
-                  "Data quality improves",
-                ],
-              },
-              {
-                pathwayId: "P4",
-                title: "Verification Credibility",
-                sub: "AI + human - institutional trust",
-                accent: "yellow" as const,
-                steps: [
-                  "Open source waste detection model",
-                  "AI flags for human review",
-                  "Hybrid reduces fraud",
-                  "Quality = network reputation",
-                  "Partners trust for ESG reporting",
-                ],
-              },
-            ].map((pw) => (
-              <Card key={pw.pathwayId} accent={pw.accent} className="p-6">
-                <div className="flex items-center gap-3 mb-5">
-                  <span
-                    className={`w-9 h-9 rounded-xl flex items-center justify-center text-sm font-mono font-bold ${pw.accent === "green" ? "bg-[#58B12F]/15 text-[#58B12F]" : "bg-[#FAFF00]/10 text-[#FAFF00]"}`}
-                  >
-                    {pw.pathwayId}
-                  </span>
-                  <div>
-                    <h3 className="text-xl font-bebas text-white leading-tight">{pw.title}</h3>
-                    <p className="text-xs text-gray-500">{pw.sub}</p>
+          <div className="flex flex-col items-center max-w-2xl mx-auto">
+            {/* Root: DMRV Infrastructure */}
+            <Card accent="green" className="w-full p-6 text-center">
+              <div className="text-xs text-[#58B12F] uppercase tracking-widest font-mono font-bold mb-2">Shared root</div>
+              <h3 className="text-xl font-bebas text-white leading-tight">DMRV Infrastructure</h3>
+            </Card>
+
+            {/* Connector ↓ */}
+            <div className="flex flex-col items-center py-3">
+              <div className="w-px h-6 bg-gradient-to-b from-[#58B12F]/60 to-transparent" />
+              <span className="text-[#58B12F] text-lg">↓</span>
+            </div>
+
+            {/* P1: Trust Creation (trunk) */}
+            <Card accent="green" className="w-full p-6">
+              <div className="flex items-center gap-3 mb-3">
+                <span className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-mono font-bold bg-[#58B12F]/15 text-[#58B12F]">P1</span>
+                <div>
+                  <h3 className="text-xl font-bebas text-white leading-tight">Trust Creation</h3>
+                  <p className="text-xs text-gray-500">Trunk — what makes everything else possible</p>
+                </div>
+              </div>
+              <ul className="space-y-2.5">
+                {["Documentation under 60s", "Geotag + timestamp", "Verifiable onchain records", "Funders gain confidence", "Capital flows to verified cleanups"].map((s) => (
+                  <li key={s} className="flex items-center gap-2.5 text-sm text-gray-200">
+                    <CheckMark green />
+                    {s}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+
+            {/* Labeled connector: P1 enables scale */}
+            <div className="w-full py-4 px-4 text-center">
+              <div className="w-full border-t border-b border-white/10 py-3">
+                <p className="text-sm text-gray-400 italic">P1 Trust enables shared infrastructure to scale</p>
+              </div>
+            </div>
+
+            {/* Branches: P2 + P3 side by side */}
+            <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* P2: Coordination */}
+              <div className="flex flex-col">
+                <div className="flex justify-center mb-2 md:mb-0">
+                  <div className="w-px h-6 bg-[#FAFF00]/40 hidden md:block" />
+                </div>
+                <Card accent="yellow" className="p-6 flex-1 flex flex-col">
+                  <div className="flex items-center gap-3 mb-3">
+                    <span className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-mono font-bold bg-[#FAFF00]/10 text-[#FAFF00]">P2</span>
+                    <div>
+                      <h3 className="text-xl font-bebas text-white leading-tight">Coordination</h3>
+                      <p className="text-xs text-gray-500">Shared infrastructure — network effects</p>
+                    </div>
                   </div>
+                  <ul className="space-y-2.5 flex-1">
+                    {["Shared DMRV across regions", "Common data standards", "Organizers discover best practices", "Knowledge transfer", "Effectiveness improves network-wide"].map((s) => (
+                      <li key={s} className="flex items-center gap-2.5 text-sm text-gray-200">
+                        <CheckMark green={false} />
+                        {s}
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="mt-4 pt-3 border-t border-white/10 text-xs text-[#FAFF00]/80">
+                    → More organizers generate more submissions
+                  </div>
+                </Card>
+              </div>
+
+              {/* P3: Incentives */}
+              <div className="flex flex-col">
+                <div className="flex justify-center mb-2 md:mb-0">
+                  <div className="w-px h-6 bg-[#58B12F]/40 hidden md:block" />
                 </div>
-                <ul className="space-y-2.5">
-                  {pw.steps.map((s) => (
-                    <li key={s} className="flex items-center gap-2.5 text-sm text-gray-200">
-                      <CheckMark green={pw.accent === "green"} />
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              </Card>
-            ))}
+                <Card accent="green" className="p-6 flex-1 flex flex-col">
+                  <div className="flex items-center gap-3 mb-3">
+                    <span className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-mono font-bold bg-[#58B12F]/15 text-[#58B12F]">P3</span>
+                    <div>
+                      <h3 className="text-xl font-bebas text-white leading-tight">Incentives</h3>
+                      <p className="text-xs text-gray-500">Recognition — sustained behavior</p>
+                    </div>
+                  </div>
+                  <ul className="space-y-2.5 flex-1">
+                    {["$bDCU structured recognition", "Tangible acknowledgment per action", "Episodic → sustained participation", "Documentation normalized", "Data quality improves"].map((s) => (
+                      <li key={s} className="flex items-center gap-2.5 text-sm text-gray-200">
+                        <CheckMark green />
+                        {s}
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="mt-4 pt-3 border-t border-white/10 text-xs text-[#58B12F]/90">
+                    → Higher volume feeds verification pipeline
+                  </div>
+                </Card>
+              </div>
+            </div>
+
+            {/* Converge line */}
+            <div className="w-full py-4 px-4 text-center">
+              <div className="w-full border-t border-b border-white/10 py-3">
+                <p className="text-sm text-gray-400 italic">P2 + P3 converge: volume × quality feeds the verification layer</p>
+              </div>
+            </div>
+
+            {/* P4: Verification Credibility (canopy) */}
+            <Card accent="yellow" className="w-full p-6">
+              <div className="flex items-center gap-3 mb-3">
+                <span className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-mono font-bold bg-[#FAFF00]/10 text-[#FAFF00]">P4</span>
+                <div>
+                  <h3 className="text-xl font-bebas text-white leading-tight">Verification Credibility</h3>
+                  <p className="text-xs text-gray-500">Canopy — where institutional trust lives</p>
+                </div>
+              </div>
+              <ul className="space-y-2.5">
+                {["Open source waste detection model", "AI flags for human review", "Hybrid reduces fraud", "Quality = network reputation", "Partners trust for ESG reporting"].map((s) => (
+                  <li key={s} className="flex items-center gap-2.5 text-sm text-gray-200">
+                    <CheckMark green={false} />
+                    {s}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-4 pt-3 border-t border-white/10 text-xs text-[#FAFF00]/80 flex items-center gap-1.5">
+                <span aria-hidden>↺</span> Loops back to P1
+              </div>
+            </Card>
           </div>
         </section>
 

diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx
@@ -51,9 +51,10 @@ export default function TokenomicsPage() {
                 </div>
                 <div className="z-10 text-center md:text-left flex-1">
                   <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>
+                    <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>
                   </div>
+                  <p className="text-blue-400 text-xs font-bold mb-4 uppercase tracking-widest">$bDCU</p>
                   <p className="text-sm text-gray-400 mb-4">The &quot;action token.&quot; Used on Base for:</p>
                   <ul className="space-y-3 mb-6 text-sm text-gray-200">
                     <li className="flex items-center gap-2"><Star className="text-blue-500 w-4 h-4 shrink-0" /> Cleanup rewards</li>

diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
@@ -52,7 +52,7 @@ const Hero = () => {
 
         {/* Headline */}
         <p className="mx-auto mb-4 max-w-2xl text-xl font-medium leading-tight text-white md:text-2xl lg:text-3xl">
-          Real cleanups. Real proof. Real impact.
+          Cleanups with action. Proof under verified. Fundable impact.
         </p>
 
         {/* Subheadline */}

diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -6,9 +6,10 @@ import Link from "next/link";
 import Image from "next/image";
 
 const steps = [
-  { number: "1.", title: "Start a Cleanup" },
-  { number: "2.", title: "Capture the Impact" },
-  { number: "3.", title: "Earn Rewards" },
+  { number: "1.", title: "Capture cleanup area" },
+  { number: "2.", title: "Complete cleanup" },
+  { number: "3.", title: "Capture the Impact" },
+  { number: "4.", title: "Claim Rewards" },
 ];
 
 // Placeholder for real cleanup before/after photo

diff --git a/components/LitepaperOverviewCards/LitepaperOverviewCards.tsx b/components/LitepaperOverviewCards/LitepaperOverviewCards.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState } from "react";
+import { BadgeCheck, ClipboardCheck, Users } from "lucide-react";
+
+const cards = [
+  {
+    title: "Verifiable Data",
+    icon: BadgeCheck,
+    iconColor: "text-[#58B12F]",
+    bgColor: "bg-[#58B12F]/10",
+    borderHover: "hover:border-[#58B12F]/50",
+    backContent: (
+      <>
+        <p className="text-gray-200 text-sm leading-relaxed 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-400 text-xs leading-relaxed">
+          Geotagged photos, timestamps, and DMRV create immutable records on Base and Celo—the foundation for rewards, impact products, and ESG reporting.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Auditable Impact",
+    icon: ClipboardCheck,
+    iconColor: "text-[#FAFF00]",
+    bgColor: "bg-[#FAFF00]/10",
+    borderHover: "hover:border-[#FAFF00]/50",
+    backContent: (
+      <>
+        <p className="text-gray-200 text-sm leading-relaxed mb-2">
+          Traceable impact records compatible with Hypercerts. Funders see where capital goes and what outcomes it produced.
+        </p>
+        <p className="text-gray-400 text-xs leading-relaxed">
+          AI + human verification reduces fraud; impact is attributed to real actors, building reputation and outcome-based funding.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Governable Funding",
+    icon: Users,
+    iconColor: "text-blue-400",
+    bgColor: "bg-blue-500/10",
+    borderHover: "hover:border-blue-400/50",
+    backContent: (
+      <>
+        <p className="text-gray-200 text-sm leading-relaxed mb-2">
+          DAO-based allocation using stable assets and impact-linked tokens. Communities and funders decide how capital flows.
+        </p>
+        <p className="text-gray-400 text-xs leading-relaxed">
+          Outcome-based pools and Gardens proposals support long-term sustainability; governance is tied to $cDCU and reputation.
+        </p>
+      </>
+    ),
+  },
+];
+
+export default function LitepaperOverviewCards() {
+  const [flipped, setFlipped] = useState<number | null>(null);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {cards.map((card, index) => {
+        const isFlipped = flipped === index;
+        const Icon = card.icon;
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => setFlipped(isFlipped ? null : index)}
+            className="relative h-[320px] w-full cursor-pointer text-left overflow-hidden rounded-2xl border border-white/5 bg-white/5 backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]"
+            aria-label={isFlipped ? `Hide ${card.title} description` : `Show ${card.title} description`}
+          >
+            {/* Two panels stacked: show one, hide the other. No 3D = no mirroring. */}
+            <div
+              className={`absolute inset-0 p-8 rounded-2xl flex flex-col items-center justify-center transition-opacity duration-300 ${card.borderHover} ${!isFlipped ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"}`}
+            >
+              <div className={`w-12 h-12 rounded-full ${card.bgColor} flex items-center justify-center mb-4`}>
+                <Icon className={`${card.iconColor} w-6 h-6`} />
+              </div>
+              <h3 className="text-white font-bebas tracking-wide text-xl md:text-2xl uppercase text-center">
+                {card.title}
+              </h3>
+              <p className="text-xs text-gray-400 mt-2">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">{card.backContent}</div>
+              <p className="text-xs text-gray-500 mt-3 shrink-0">Click to flip back</p>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}