Add CoFi to finance evolution progression

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/layout.tsx

@@ -18,7 +18,11 @@ export const metadata: Metadata = {
     "A reboot of the Commons Stack, merging technology with mycelial principles for regenerative systems. Growing from beneath the surface.",
   metadataBase: new URL("https://mycostack.xyz"),
   icons: {
-    icon: "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍄</text></svg>",
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
   },
   openGraph: {
     title: "MycoStack — Technology-Augmented Commons",

components/hero-section.tsx

@@ -3,6 +3,7 @@
 import { useSectionReveal } from "@/hooks/use-section-reveal"
 import { ChevronDown } from "lucide-react"
 import { useState, useEffect } from "react"
+import Image from "next/image"
 
 const TITLE = "MycoStack"
 
@@ -70,6 +71,18 @@ export function HeroSection() {
       className="relative min-h-[110vh] flex flex-col items-center justify-center px-6 noise-overlay"
     >
       <div className="section-reveal max-w-4xl mx-auto text-center space-y-8">
+        {/* Logo */}
+        <div className="emerge-letter flex justify-center" style={{ animationDelay: "0.1s" }}>
+          <Image
+            src="/mycostack-logo.png"
+            alt="MycoStack logo"
+            width={418}
+            height={649}
+            className="w-32 sm:w-40 md:w-48 lg:w-56 h-auto drop-shadow-[0_0_30px_rgba(45,140,100,0.3)]"
+            priority
+          />
+        </div>
+
         {/* Title with staggered emergence */}
         <h1 className="font-serif text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-bold tracking-tight">
           {TITLE.split("").map((letter, i) => (

components/nofi-section.tsx

@@ -129,7 +129,7 @@ export function NoFiSection() {
           </div>
 
           <div className="glass-card p-3 space-y-1 font-mono text-xs text-center max-w-sm mx-auto">
-            <div className="opacity-50">TradFi &rarr; DeFi &rarr; ReFi &rarr; MycoFi &rarr;</div>
+            <div className="opacity-50">TradFi &rarr; DeFi &rarr; ReFi &rarr; CoFi &rarr; MycoFi &rarr;</div>
             <div style={{ color: "var(--scroll-accent)" }}>NoFi</div>
             <div className="opacity-50">Transcend the need for it.</div>
           </div>