Restyle hero with gradient background, remove old tagline

Replace plain hero with rich forest-green gradient, radial glow
effects, and subtle grid pattern. Remove "Bridging cosmic
perspective with local action" tagline. Hero heading is now
just "Cosmolocal Foundation" with white-on-dark treatment.

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

src/app/globals.css

@@ -35,3 +35,35 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+/* Hero section */
+.hero-section {
+  background: linear-gradient(
+    145deg,
+    #1a2e1a 0%,
+    #2d4a2d 25%,
+    #1c3a2a 50%,
+    #1a2835 75%,
+    #0f1f2e 100%
+  );
+}
+
+.hero-glow {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(107, 159, 91, 0.2) 0%, transparent 70%),
+    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(79, 121, 66, 0.12) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 40% at 80% 60%, rgba(30, 80, 100, 0.1) 0%, transparent 60%);
+}
+
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
+}

src/app/page.tsx

@@ -34,33 +34,35 @@ export default function Home() {
       </header>
 
       {/* Hero */}
-      <section className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center">
+      <section className="hero-section relative flex flex-1 flex-col items-center justify-center overflow-hidden px-6 py-28 text-center sm:py-36">
-        <blockquote className="text-lg italic text-muted sm:text-xl">
+        <div className="hero-glow" aria-hidden="true" />
-          &ldquo;What is heavy should be local, and what is light should be global and shared.&rdquo;
+        <div className="hero-grid" aria-hidden="true" />
-        </blockquote>
+        <div className="relative z-10">
-        <h1 className="mt-8 max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
+          <blockquote className="text-lg italic text-white/70 sm:text-xl">
-          Bridging cosmic perspective
+            &ldquo;What is heavy should be local, and what is light should be global and shared.&rdquo;
-          <br />
+          </blockquote>
-          with local action
+          <h1 className="mt-8 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-white sm:text-5xl">
-        </h1>
+            Cosmolocal Foundation
-        <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted">
+          </h1>
-          The Cosmolocal Foundation envisions a world where local communities
+          <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-white/75">
-          thrive within regenerative economies, connected through global
+            Empowering communities to build localized, regenerative economies
-          knowledge-sharing and commons-based collaboration.
+            connected through global knowledge-sharing and commons-based
-        </p>
+            collaboration.
-        <div className="mt-10 flex gap-4">
+          </p>
-          <a
+          <div className="mt-10 flex justify-center gap-4">
-            href="#vision"
+            <a
-            className="rounded-full bg-accent px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-light"
+              href="#vision"
-          >
+              className="rounded-full bg-white px-6 py-2.5 text-sm font-medium text-stone-900 transition-colors hover:bg-white/90"
-            Learn More
+            >
-          </a>
+              Learn More
-          <a
+            </a>
-            href="https://docs.cosmolocal.world"
+            <a
-            className="rounded-full border border-border px-6 py-2.5 text-sm font-medium transition-colors hover:bg-foreground/5"
+              href="https://docs.cosmolocal.world"
-          >
+              className="rounded-full border border-white/25 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/10"
-            Documentation
+            >
-          </a>
+              Documentation
+            </a>
+          </div>
         </div>
       </section>