diff --git a/.github/workflows/copilot-test.yml b/.github/workflows/copilot-test.yml
index 15e8e56..28e6320 100644
--- a/.github/workflows/copilot-test.yml
+++ b/.github/workflows/copilot-test.yml
@@ -29,7 +29,7 @@ jobs:
     
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
       
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/next.config.ts b/next.config.ts
index 197703b..fc1e915 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -32,7 +32,11 @@ const nextConfig: NextConfig = {
     const contentSecurityPolicy = [
       "default-src 'self'",
       "script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com",
-      "style-src 'self' https://fonts.googleapis.com",
+      // 'unsafe-inline' for style-src: server-rendered style attributes (safe-area
+      // insets, next/image sizing, animation stagger delays) and Next.js-injected
+      // <style> tags are otherwise blocked by a static policy. Same trade-off as
+      // script-src above; the site renders no user-supplied HTML.
+      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
       "img-src 'self' data: https://placehold.co",
       "connect-src 'self' https://www.google-analytics.com https://www.googletagmanager.com",
       "font-src 'self' data: https://fonts.gstatic.com",
diff --git a/package-lock.json b/package-lock.json
index e2dd6b0..0c096aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/space-grotesk": "^5.2.10",
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -1228,6 +1229,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource-variable/space-grotesk": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/space-grotesk/-/space-grotesk-5.2.10.tgz",
+      "integrity": "sha512-yJQO/o35/hAP3CFnpdFTwQku2yzJOae2HIpBmqkOVoxhhXJaQP3g+b6Jrz7u+eI7A5ZdCIf88uMWpBJdFiGr5w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.16",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.16.tgz",
diff --git a/package.json b/package.json
index 1aa7d73..4a4e1e2 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
diff --git a/src/app/fonts/SpaceGroteskVariable.woff2 b/src/app/fonts/SpaceGroteskVariable.woff2
new file mode 100644
index 0000000..0f3474e
Binary files /dev/null and b/src/app/fonts/SpaceGroteskVariable.woff2 differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 5e3e402..1f6b0b4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -995,19 +995,25 @@
 
 /* Typography Enhancement Classes */
 .heading-hero {
-  @apply text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-foreground;
+  @apply font-display text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-foreground;
 }
 
 .heading-section {
-  @apply text-3xl font-bold sm:text-4xl text-foreground;
+  @apply font-display text-3xl font-bold sm:text-4xl text-foreground;
 }
 
 .heading-card {
-  @apply text-2xl font-bold text-foreground;
+  @apply font-display text-2xl font-bold text-foreground;
 }
 
 .heading-subsection {
-  @apply text-xl font-bold text-foreground;
+  @apply font-display text-xl font-bold text-foreground;
+}
+
+/* Display font for all landing headings */
+h1,
+h2 {
+  @apply font-display;
 }
 
 .text-body-lg {
@@ -1104,3 +1110,112 @@
 .grid-hero {
   @apply grid lg:grid-cols-2 gap-12 lg:gap-20 items-center;
 }
+
+/* ==========================================================================
+   VISUAL REVAMP UTILITIES - Patterns, glows and premium accents
+   ========================================================================== */
+
+/* Dotted backdrop, fades out toward the edges */
+.bg-dot-pattern {
+  background-image: radial-gradient(hsl(var(--foreground) / 0.09) 1px, transparent 1px);
+  background-size: 24px 24px;
+  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
+  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
+}
+
+/* Fine grid backdrop for section accents */
+.bg-grid-pattern {
+  background-image:
+    linear-gradient(hsl(var(--border) / 0.6) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(var(--border) / 0.6) 1px, transparent 1px);
+  background-size: 44px 44px;
+  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%);
+  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%);
+}
+
+/* Gradient border that lights up on hover (works on cards with overflow-hidden removed) */
+.card-glow-border {
+  position: relative;
+  border: 1px solid hsl(var(--border) / 0.6);
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.card-glow-border:hover {
+  border-color: hsl(var(--primary) / 0.45);
+  box-shadow:
+    0 0 0 1px hsl(var(--primary) / 0.25),
+    0 18px 40px -16px hsl(var(--primary) / 0.35);
+}
+
+/* Sweeping sheen used by the premium CTA button */
+.btn-shine-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  background: linear-gradient(
+    100deg,
+    transparent 20%,
+    hsl(0 0% 100% / 0.35) 50%,
+    transparent 80%
+  );
+  transform: translateX(-150%) skewX(-15deg);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .btn-shine-overlay::after {
+    animation: shine-sweep 2.75s ease-in-out infinite;
+  }
+}
+
+@keyframes shine-sweep {
+  0% {
+    transform: translateX(-150%) skewX(-15deg);
+  }
+
+  60%,
+  100% {
+    transform: translateX(350%) skewX(-15deg);
+  }
+}
+
+/* Underline slide-in for nav links */
+.nav-link-underline {
+  position: relative;
+}
+
+.nav-link-underline::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 100%;
+  bottom: -4px;
+  height: 2px;
+  border-radius: 9999px;
+  background: hsl(var(--primary));
+  transition: right 0.25s ease-out;
+}
+
+.nav-link-underline:hover::after,
+.nav-link-underline:focus-visible::after {
+  right: 0;
+}
+
+/* Soft ambient orb for hero backgrounds */
+.hero-orb {
+  position: absolute;
+  border-radius: 9999px;
+  background: radial-gradient(circle, hsl(var(--primary) / 0.28) 0%, transparent 70%);
+  filter: blur(60px);
+  pointer-events: none;
+}
+
+/* Disable decorative motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-float,
+  .animate-pulse-glow,
+  .animate-gradient-x {
+    animation: none !important;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 478a486..9659d3c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,6 +23,13 @@ const inter = localFont({
   display: "swap",
 });
 
+const spaceGrotesk = localFont({
+  src: "./fonts/SpaceGroteskVariable.woff2",
+  variable: "--font-display",
+  weight: "300 700",
+  display: "swap",
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -123,7 +130,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className={`${inter.variable} font-body antialiased`}>
+      <body className={`${inter.variable} ${spaceGrotesk.variable} font-body antialiased`}>
         <Providers gaMeasurementId={GA_MEASUREMENT_ID}>
           {children}
         </Providers>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 154dd96..2288b78 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import { EnhancedHomeHeroSection } from '@/components/landing/EnhancedHomeHeroSe
 import { EducationalSection } from '@/components/landing/EducationalSection';
 import { AboutSection } from '@/components/landing/AboutSection';
 import { TestimonialsSection } from '@/components/landing/TestimonialsSection';
+import { FinalCtaSection } from '@/components/landing/FinalCtaSection';
 import { Footer } from '@/components/landing/Footer';
 import { PrivacyPolicyModal } from '@/components/landing/PrivacyPolicyModal';
 import { TermsOfServiceModal } from '@/components/landing/TermsOfServiceModal';
@@ -26,6 +27,7 @@ export default function Home() {
         <EducationalSection />
         <TestimonialsSection />
         <AboutSection />
+        <FinalCtaSection />
       </main>
       <Footer onPrivacyClick={openPrivacyModal} onTermsClick={openTermsModal} />
       <PrivacyPolicyModal isOpen={activeModal === 'privacy'} onOpenChange={handlePrivacyChange} />
diff --git a/src/components/landing/AboutSection.tsx b/src/components/landing/AboutSection.tsx
index 4e6caa2..debc2bb 100644
--- a/src/components/landing/AboutSection.tsx
+++ b/src/components/landing/AboutSection.tsx
@@ -1,6 +1,7 @@
 import { BackgroundBeams } from "@/components/ui/background-beams";
 import Image from "next/image";
 import { ValueBadge } from "@/components/ui/value-badge";
+import { Reveal } from "@/components/ui/reveal";
 import { Eye, Shield, Bitcoin, Users } from "lucide-react";
 
 export function AboutSection() {
@@ -10,7 +11,7 @@ export function AboutSection() {
       <div className="container max-w-7xl mx-auto px-4 md:px-6 relative z-10">
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
           {/* Image Side */}
-          <div className="relative order-2 lg:order-1">
+          <Reveal from="left" className="relative order-2 lg:order-1">
             <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-primary/5 aspect-4/3">
               <div className="absolute inset-0 bg-linear-to-tr from-primary/10 to-transparent mix-blend-overlay z-10" />
               <Image
@@ -21,18 +22,18 @@ export function AboutSection() {
               />
             </div>
             {/* Decorative elements */}
-            <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-primary/10 rounded-full blur-2xl" />
+            <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-primary/15 rounded-full blur-2xl motion-safe:animate-pulse-glow" />
             <div className="absolute -top-6 -left-6 w-32 h-32 bg-primary/10 rounded-full blur-3xl" />
-          </div>
+          </Reveal>
 
           {/* Content Side */}
-          <div className="space-y-8 order-1 lg:order-2 text-center lg:text-left">
+          <Reveal from="right" className="space-y-8 order-1 lg:order-2 text-center lg:text-left">
             <div className="inline-flex items-center px-4 py-2 rounded-full bg-background border border-border shadow-xs mb-2">
               <Users className="mr-2 h-4 w-4 text-primary" />
               <span className="text-sm font-medium">Our Mission</span>
             </div>
 
-            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
+            <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
               Built for Bitcoiners, <br />
               <span className="text-primary">By Bitcoiners.</span>
             </h2>
@@ -53,7 +54,7 @@ export function AboutSection() {
               <ValueBadge icon={Shield} text="Privacy Focused" variant="primary" />
               <ValueBadge icon={Bitcoin} text="Bitcoin Native" variant="primary" />
             </div>
-          </div>
+          </Reveal>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/AnalyzerAboutSection.tsx b/src/components/landing/AnalyzerAboutSection.tsx
index d5ee033..b3f9c81 100644
--- a/src/components/landing/AnalyzerAboutSection.tsx
+++ b/src/components/landing/AnalyzerAboutSection.tsx
@@ -2,6 +2,7 @@
 import { BackgroundBeams } from "@/components/ui/background-beams";
 import Image from "next/image";
 import { ValueBadge } from "@/components/ui/value-badge";
+import { Reveal } from "@/components/ui/reveal";
 import { Bitcoin, Shield, Blocks } from "lucide-react";
 
 export function AnalyzerAboutSection() {
@@ -11,7 +12,7 @@ export function AnalyzerAboutSection() {
       <div className="container max-w-7xl mx-auto px-4 md:px-6 relative z-10">
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
           {/* Image Side */}
-          <div className="relative order-2 lg:order-1">
+          <Reveal from="left" className="relative order-2 lg:order-1">
             <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-primary/5 aspect-4/3">
               <div className="absolute inset-0 bg-linear-to-tr from-primary/10 to-transparent mix-blend-overlay z-10" />
               <Image
@@ -24,11 +25,11 @@ export function AnalyzerAboutSection() {
             {/* Decorative elements */}
             <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-primary/10 rounded-full blur-2xl" />
             <div className="absolute -top-6 -left-6 w-32 h-32 bg-primary/10 rounded-full blur-3xl" />
-          </div>
+          </Reveal>
 
           {/* Content Side */}
-          <div className="space-y-8 order-1 lg:order-2 text-center lg:text-left">
-            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-foreground">
+          <Reveal from="right" className="space-y-8 order-1 lg:order-2 text-center lg:text-left">
+            <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-foreground">
               About <span className="text-primary">BitSleuth Analyzer</span>
             </h2>
             <p className="text-lg text-muted-foreground leading-relaxed">
@@ -51,7 +52,7 @@ export function AnalyzerAboutSection() {
               <ValueBadge icon={Blocks} text="On-Chain Transparency" variant="primary" />
               <ValueBadge icon={Shield} text="Privacy Tools" variant="primary" />
             </div>
-          </div>
+          </Reveal>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/DemoPreviewSection.tsx b/src/components/landing/DemoPreviewSection.tsx
index 8add804..f2c0046 100644
--- a/src/components/landing/DemoPreviewSection.tsx
+++ b/src/components/landing/DemoPreviewSection.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import Image from "next/image";
 
 export function DemoPreviewSection() {
@@ -8,9 +9,9 @@ export function DemoPreviewSection() {
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto relative z-10">
         <div className="grid md:grid-cols-2 gap-12 items-center">
-          <div className="text-left space-y-6">
+          <Reveal from="left" className="text-left space-y-6">
             <div>
-              <h2 className="text-3xl font-bold mb-4 text-foreground">
+              <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">
                 Try It <span className="text-primary">Yourself</span>
               </h2>
               <p className="text-lg text-muted-foreground font-normal">
@@ -19,26 +20,17 @@ export function DemoPreviewSection() {
               </p>
             </div>
             <div className="flex flex-wrap gap-4">
-              <Button
-                asChild
-                size="lg"
-                className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-none"
-              >
+              <Button asChild variant="shine" size="xl">
                 <a href="https://app.bitsleuth.ai/">Try Live App</a>
               </Button>
-              <Button
-                asChild
-                variant="outline"
-                size="lg"
-                className="hover:border-primary hover:text-primary"
-              >
+              <Button asChild variant="outline" size="xl">
                 <a href="https://app.bitsleuth.ai/transactions/7247020e42abe2cc3730f277f7f14579db63f0b3c68dfbaf4626d4d4c11704e8">
                   See Example Wallet
                 </a>
               </Button>
             </div>
-          </div>
-          <div className="rounded-lg border shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500 shadow-primary/10 hover:border-primary/50">
+          </Reveal>
+          <Reveal from="right" className="rounded-lg card-glow-border shadow-2xl overflow-hidden transform hover:scale-[1.03] transition-transform duration-500 shadow-primary/10">
             <Image
               src="/images/interactive-preview.png"
               width={1200}
@@ -48,7 +40,7 @@ export function DemoPreviewSection() {
               data-ai-hint="bitcoin transaction"
               className="w-full"
             />
-          </div>
+          </Reveal>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/EducationalSection.tsx b/src/components/landing/EducationalSection.tsx
index 55089b3..a96e7b3 100644
--- a/src/components/landing/EducationalSection.tsx
+++ b/src/components/landing/EducationalSection.tsx
@@ -2,6 +2,7 @@
 
 import { Card, CardContent } from "@/components/ui/card";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,148 +18,156 @@ export function EducationalSection() {
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-7xl mx-auto px-4 md:px-6 relative z-10">
         {/* Section Header */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-6">
-            <BookOpen className="mr-2 h-4 w-4 text-primary" />
-            <span className="text-sm font-medium text-primary">Educational Resources</span>
+        <Reveal>
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-6">
+              <BookOpen className="mr-2 h-4 w-4 text-primary" />
+              <span className="text-sm font-medium text-primary">Educational Resources</span>
+            </div>
+            <h2 className="font-display text-3xl font-bold tracking-tight sm:text-4xl xl:text-5xl mb-6">
+              Learn About <span className="text-primary">Bitcoin</span>
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+              Explore comprehensive guides, historical insights, and educational content to deepen your understanding of Bitcoin and blockchain technology.
+            </p>
           </div>
-          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl xl:text-5xl mb-6">
-            Learn About <span className="text-primary">Bitcoin</span>
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Explore comprehensive guides, historical insights, and educational content to deepen your understanding of Bitcoin and blockchain technology.
-          </p>
-        </div>
+        </Reveal>
 
         {/* Main Cards Grid */}
         <div className="grid lg:grid-cols-2 gap-8 mb-12">
           {/* Learning Hub Card - Featured with Image */}
-          <Card className="group relative bg-card border-none shadow-xl overflow-hidden flex flex-col h-96">
-            <div className="absolute inset-0 z-0">
-              <Image
-                src="/images/educational.png"
-                alt="Bitcoin Education"
-                fill
-                className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-                priority
-              />
-              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/50 to-transparent" />
-            </div>
-            
-            <CardContent className="h-full flex flex-col justify-end p-8 relative z-10 text-white">
-              <div className="mb-4">
-                <div className="flex items-center gap-3 mb-2">
-                  <div className="p-2 rounded-lg bg-orange-500/20 backdrop-blur-xs">
-                    <BookOpen className="h-6 w-6 text-orange-400" />
-                  </div>
-                  <h3 className="text-3xl font-bold">Learning Hub</h3>
-                </div>
-                <p className="text-gray-200 font-medium">Master Bitcoin fundamentals</p>
+          <Reveal delay={0}>
+            <Card className="group relative bg-card card-glow-border shadow-xl overflow-hidden flex flex-col h-96">
+              <div className="absolute inset-0 z-0">
+                <Image
+                  src="/images/educational.png"
+                  alt="Bitcoin Education"
+                  fill
+                  className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                  priority
+                />
+                <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/50 to-transparent" />
               </div>
 
-               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 pt-4 border-t border-white/10">
-                <div>
-                   <div className="font-semibold text-sm text-orange-200">Fundamentals</div>
-                   <div className="text-xs text-gray-300">How it works</div>
-                </div>
-                 <div>
-                   <div className="font-semibold text-sm text-orange-200">Security</div>
-                   <div className="text-xs text-gray-300">Best practices</div>
+              <CardContent className="h-full flex flex-col justify-end p-8 relative z-10 text-white">
+                <div className="mb-4">
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="p-2 rounded-lg bg-primary/25 backdrop-blur-xs ring-1 ring-primary/30">
+                      <BookOpen className="h-6 w-6 text-primary" />
+                    </div>
+                    <h3 className="font-display text-3xl font-bold">Learning Hub</h3>
+                  </div>
+                  <p className="text-gray-200 font-medium">Master Bitcoin fundamentals</p>
                 </div>
-                 <div>
-                   <div className="font-semibold text-sm text-orange-200">Usage</div>
-                   <div className="text-xs text-gray-300">Getting started</div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 pt-4 border-t border-white/10">
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Fundamentals</div>
+                    <div className="text-xs text-gray-300">How it works</div>
+                  </div>
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Security</div>
+                    <div className="text-xs text-gray-300">Best practices</div>
+                  </div>
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Usage</div>
+                    <div className="text-xs text-gray-300">Getting started</div>
+                  </div>
                 </div>
-              </div>
 
-              <Button asChild className="w-fit bg-orange-500 hover:bg-orange-600 text-white border-none">
-                <Link href="/learn">
-                  Start Learning
-                  <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
-                </Link>
-              </Button>
-            </CardContent>
-          </Card>
+                <Button asChild className="w-fit group/cta">
+                  <Link href="/learn">
+                    Start Learning
+                    <ArrowRight className="ml-2 h-4 w-4 group-hover/cta:translate-x-1 transition-transform" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </Card>
+          </Reveal>
 
           {/* Bitcoin History Card */}
-          <Card className="group relative bg-card border-none shadow-xl overflow-hidden flex flex-col h-96">
-            <div className="absolute inset-0 z-0">
-               <Image
-                src="/images/history.png"
-                alt="Bitcoin History"
-                fill
-                className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-                priority
-              />
-              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/50 to-transparent" />
-            </div>
+          <Reveal delay={120}>
+            <Card className="group relative bg-card card-glow-border shadow-xl overflow-hidden flex flex-col h-96">
+              <div className="absolute inset-0 z-0">
+                <Image
+                  src="/images/history.png"
+                  alt="Bitcoin History"
+                  fill
+                  className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                  priority
+                />
+                <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/50 to-transparent" />
+              </div>
 
-            <CardContent className="h-full flex flex-col justify-end p-8 relative z-10 text-white">
-               <div className="mb-4">
-                <div className="flex items-center gap-3 mb-2">
-                  <div className="p-2 rounded-lg bg-orange-500/20 backdrop-blur-xs">
-                    <Clock className="h-6 w-6 text-orange-400" />
+              <CardContent className="h-full flex flex-col justify-end p-8 relative z-10 text-white">
+                <div className="mb-4">
+                  <div className="flex items-center gap-3 mb-2">
+                    <div className="p-2 rounded-lg bg-primary/25 backdrop-blur-xs ring-1 ring-primary/30">
+                      <Clock className="h-6 w-6 text-primary" />
+                    </div>
+                    <h3 className="font-display text-3xl font-bold">Bitcoin History</h3>
                   </div>
-                  <h3 className="text-3xl font-bold">Bitcoin History</h3>
+                  <p className="text-gray-200 font-medium">From whitepaper to phenomenon</p>
                 </div>
-                <p className="text-gray-200 font-medium">From whitepaper to phenomenon</p>
-              </div>
 
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 pt-4 border-t border-white/10">
-                <div>
-                   <div className="font-semibold text-sm text-orange-200">Origins</div>
-                   <div className="text-xs text-gray-300">The Whitepaper</div>
-                </div>
-                 <div>
-                   <div className="font-semibold text-sm text-orange-200">Genesis</div>
-                   <div className="text-xs text-gray-300">First Block</div>
-                </div>
-                 <div>
-                   <div className="font-semibold text-sm text-orange-200">Impact</div>
-                   <div className="text-xs text-gray-300">Global change</div>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 pt-4 border-t border-white/10">
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Origins</div>
+                    <div className="text-xs text-gray-300">The Whitepaper</div>
+                  </div>
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Genesis</div>
+                    <div className="text-xs text-gray-300">First Block</div>
+                  </div>
+                  <div>
+                    <div className="font-semibold text-sm text-primary">Impact</div>
+                    <div className="text-xs text-gray-300">Global change</div>
+                  </div>
                 </div>
-              </div>
 
-              <Button asChild className="w-fit bg-orange-500 hover:bg-orange-600 text-white border-none">
-                <Link href="/history">
-                  Explore History
-                  <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
-                </Link>
-              </Button>
-            </CardContent>
-          </Card>
+                <Button asChild className="w-fit group/cta">
+                  <Link href="/history">
+                    Explore History
+                    <ArrowRight className="ml-2 h-4 w-4 group-hover/cta:translate-x-1 transition-transform" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </Card>
+          </Reveal>
         </div>
 
         {/* Glossary Callout */}
-        <Card className="bg-primary/5 border-primary/20 overflow-hidden">
-          <div className="absolute top-0 right-0 p-32 bg-primary/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none" />
-          <CardContent className="p-8 md:p-10 relative z-10">
-            <div className="flex flex-col md:flex-row items-center gap-8">
-              <div className="p-5 rounded-2xl bg-primary/10 shrink-0">
-                <BookOpen className="h-12 w-12 text-primary" />
-              </div>
-              <div className="flex-1 text-center md:text-left">
-                <h3 className="text-2xl font-bold mb-3">Bitcoin Terminology Glossary</h3>
-                <p className="text-muted-foreground mb-6 text-lg">
-                  Explore our comprehensive glossary of Bitcoin terms, from basic concepts to advanced technical terminology. Perfect for beginners and experts alike.
-                </p>
-                <div className="flex flex-wrap gap-2 justify-center md:justify-start">
-                  <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Blockchain</span>
-                  <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Mining</span>
-                  <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Wallet</span>
-                  <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">UTXO</span>
-                  <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-primary">+ 15 more</span>
+        <Reveal delay={80}>
+          <Card className="relative bg-primary/5 card-glow-border overflow-hidden">
+            <div className="absolute top-0 right-0 p-32 bg-primary/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none" />
+            <CardContent className="p-8 md:p-10 relative z-10">
+              <div className="flex flex-col md:flex-row items-center gap-8">
+                <div className="p-5 rounded-2xl bg-primary/10 ring-1 ring-primary/20 shrink-0">
+                  <BookOpen className="h-12 w-12 text-primary" />
+                </div>
+                <div className="flex-1 text-center md:text-left">
+                  <h3 className="font-display text-2xl font-bold mb-3">Bitcoin Terminology Glossary</h3>
+                  <p className="text-muted-foreground mb-6 text-lg">
+                    Explore our comprehensive glossary of Bitcoin terms, from basic concepts to advanced technical terminology. Perfect for beginners and experts alike.
+                  </p>
+                  <div className="flex flex-wrap gap-2 justify-center md:justify-start">
+                    <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Blockchain</span>
+                    <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Mining</span>
+                    <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">Wallet</span>
+                    <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-border font-medium text-muted-foreground">UTXO</span>
+                    <span className="text-sm px-4 py-1.5 rounded-full bg-background border border-primary/30 font-medium text-primary">+ 15 more</span>
+                  </div>
                 </div>
+                <Button asChild size="xl" className="shrink-0 group/cta">
+                  <Link href="/glossary">
+                    Browse Glossary
+                    <ArrowRight className="ml-2 h-4 w-4 group-hover/cta:translate-x-1 transition-transform" />
+                  </Link>
+                </Button>
               </div>
-              <Button asChild size="lg" className="shrink-0 bg-primary hover:bg-primary/90 text-primary-foreground shadow-md hover:shadow-lg hover:shadow-primary/20 active:scale-[0.98] transition-all duration-200">
-                <Link href="/glossary">
-                  Browse Glossary
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </Reveal>
       </div>
     </section>
   );
diff --git a/src/components/landing/EnhancedHomeHeroSection.tsx b/src/components/landing/EnhancedHomeHeroSection.tsx
index a36fc71..b4c2771 100644
--- a/src/components/landing/EnhancedHomeHeroSection.tsx
+++ b/src/components/landing/EnhancedHomeHeroSection.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { BackgroundBeams } from "@/components/ui/background-beams";
 import { ValueBadge } from "@/components/ui/value-badge";
+import { Reveal } from "@/components/ui/reveal";
 import {
   BarChart,
   ShieldCheck,
@@ -12,13 +13,20 @@ import {
   Users,
   BookOpen,
   Clock,
-  ArrowRight
+  ArrowRight,
+  KeyRound,
+  UserX,
+  Sparkles
 } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 
-const ctaButtonClassName =
-  "w-full bg-primary hover:bg-primary/90 text-foreground font-semibold shadow-md hover:shadow-lg hover:shadow-primary/20 rounded-xl h-12 transition-all duration-200 active:scale-[0.98]";
+const trustItems = [
+  { icon: KeyRound, text: "Non-custodial by design" },
+  { icon: UserX, text: "No registration required" },
+  { icon: Sparkles, text: "Free during beta" },
+  { icon: BookOpen, text: "Open educational content" },
+];
 
 export function EnhancedHomeHeroSection() {
   return (
@@ -27,6 +35,8 @@ export function EnhancedHomeHeroSection() {
       <section className="edge-to-edge-section relative overflow-hidden pt-10 pb-20 md:pt-16 md:pb-36">
         {/* Background Gradient - Orange from top */}
         <div className="absolute inset-0 bg-linear-to-b from-primary/10 via-background/50 to-background z-0" />
+        <div className="absolute inset-0 bg-dot-pattern z-0" aria-hidden="true" />
+        <div className="hero-orb w-[32rem] h-[32rem] -top-40 -right-40 motion-safe:animate-pulse-glow" aria-hidden="true" />
         <BackgroundBeams intensity="subtle" className="opacity-30" />
 
         <div className="container max-w-7xl mx-auto relative z-10">
@@ -34,9 +44,9 @@ export function EnhancedHomeHeroSection() {
             {/* Left side - Text Content */}
             <div className="space-y-8 text-center lg:text-left">
               <div className="space-y-6 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-700 motion-safe:slide-in-from-bottom-4">
-                <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl/none text-foreground drop-shadow-xs">
+                <h1 className="font-display text-4xl font-bold tracking-tight sm:text-5xl xl:text-6xl/none text-foreground drop-shadow-xs">
                   One Brand. <br />
-                  <span className="bg-clip-text text-transparent bg-linear-to-r from-primary to-primary/80">
+                  <span className="bg-clip-text text-transparent bg-linear-to-r from-primary via-[hsl(20_90%_55%)] to-primary bg-[length:200%_auto] motion-safe:animate-gradient-x">
                     Two Powerful Tools.
                   </span>
                 </h1>
@@ -52,14 +62,14 @@ export function EnhancedHomeHeroSection() {
 
               {/* Quick Links to Learning Resources */}
               <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-                <Button size="lg" variant="outline" asChild className="group border-primary/20 hover:border-primary hover:text-primary hover:bg-primary/5 transition-all duration-300">
+                <Button size="lg" variant="outline" asChild className="group">
                   <Link href="/learn">
                     <BookOpen className="mr-2 h-5 w-5 group-hover:rotate-12 transition-transform" />
                     Learning Hub
                     <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                   </Link>
                 </Button>
-                <Button size="lg" variant="outline" asChild className="group border-primary/20 hover:border-primary hover:text-primary hover:bg-primary/5 transition-all duration-300">
+                <Button size="lg" variant="outline" asChild className="group">
                   <Link href="/history">
                     <Clock className="mr-2 h-5 w-5 group-hover:rotate-12 transition-transform" />
                     Bitcoin History
@@ -70,7 +80,7 @@ export function EnhancedHomeHeroSection() {
             </div>
 
             {/* Right side - Cinematic Image */}
-            <div className="relative aspect-square w-full max-w-lg mx-auto lg:max-w-none rounded-2xl overflow-hidden shadow-2xl shadow-primary/10 animate-in fade-in duration-1000 slide-in-from-right-8 bg-background">
+            <div className="relative aspect-square w-full max-w-lg mx-auto lg:max-w-none rounded-2xl overflow-hidden shadow-2xl shadow-primary/10 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-1000 motion-safe:slide-in-from-right-8 bg-background">
               <div className="absolute inset-0 bg-linear-to-tr from-primary/20 to-transparent mix-blend-overlay z-10" />
               <Image
                 src="/images/hero.png"
@@ -90,40 +100,64 @@ export function EnhancedHomeHeroSection() {
       <section className="py-0 relative z-20 -mt-24 md:-mt-48">
         <div className="container max-w-6xl mx-auto px-4 md:px-6">
           <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
-            <Card className="group text-left bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 h-full overflow-hidden">
-              <CardHeader className="flex flex-row items-center gap-4 pb-4">
-                <div className="p-3 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  <BarChart className="h-8 w-8 text-primary" />
-                </div>
-                <CardTitle className="text-2xl font-bold text-foreground">Wallet Analyzer</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription className="mb-8 font-normal text-base leading-relaxed text-muted-foreground">
-                  For analysts & investigators. Visualize transactions, trace fund flows, and detect OPSEC risks with AI-powered insights.
-                </CardDescription>
-                <Button asChild className={ctaButtonClassName}>
-                  <Link href="/analyzer">Explore Analyzer</Link>
-                </Button>
-              </CardContent>
-            </Card>
+            <Reveal delay={0}>
+              <Card className="group text-left bg-card/95 backdrop-blur-sm card-glow-border shadow-xl hover:-translate-y-2 h-full overflow-hidden">
+                <CardHeader className="flex flex-row items-center gap-4 pb-4">
+                  <div className="p-3 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                    <BarChart className="h-8 w-8 text-primary" />
+                  </div>
+                  <CardTitle className="font-display text-2xl font-bold text-foreground">Wallet Analyzer</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="mb-8 font-normal text-base leading-relaxed text-muted-foreground">
+                    For analysts & investigators. Visualize transactions, trace fund flows, and detect OPSEC risks with AI-powered insights.
+                  </CardDescription>
+                  <Button asChild size="xl" className="w-full group/cta">
+                    <Link href="/analyzer">
+                      Explore Analyzer
+                      <ArrowRight className="ml-2 h-5 w-5 group-hover/cta:translate-x-1 transition-transform" />
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </Reveal>
 
-            <Card className="group text-left bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 h-full overflow-hidden">
-              <CardHeader className="flex flex-row items-center gap-4 pb-4">
-                <div className="p-3 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  <ShieldCheck className="h-8 w-8 text-primary" />
-                </div>
-                <CardTitle className="text-2xl font-bold text-foreground">Privacy Wallet</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription className="mb-8 font-normal text-base leading-relaxed text-muted-foreground">
-                  For privacy-conscious holders. A secure, non-custodial wallet built to minimize address reuse and on-chain exposure.
-                </CardDescription>
-                <Button asChild className={ctaButtonClassName}>
-                  <Link href="/wallet">Explore Wallet</Link>
-                </Button>
-              </CardContent>
-            </Card>
+            <Reveal delay={120}>
+              <Card className="group text-left bg-card/95 backdrop-blur-sm card-glow-border shadow-xl hover:-translate-y-2 h-full overflow-hidden">
+                <CardHeader className="flex flex-row items-center gap-4 pb-4">
+                  <div className="p-3 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                    <ShieldCheck className="h-8 w-8 text-primary" />
+                  </div>
+                  <CardTitle className="font-display text-2xl font-bold text-foreground">Privacy Wallet</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="mb-8 font-normal text-base leading-relaxed text-muted-foreground">
+                    For privacy-conscious holders. A secure, non-custodial wallet built to minimize address reuse and on-chain exposure.
+                  </CardDescription>
+                  <Button asChild size="xl" className="w-full group/cta">
+                    <Link href="/wallet">
+                      Explore Wallet
+                      <ArrowRight className="ml-2 h-5 w-5 group-hover/cta:translate-x-1 transition-transform" />
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </Reveal>
           </div>
+
+          {/* Trust strip */}
+          <Reveal delay={200}>
+            <div className="mt-10 md:mt-14 border-y border-border/60 py-5">
+              <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-3">
+                {trustItems.map(({ icon: Icon, text }) => (
+                  <li key={text} className="flex items-center gap-2.5 text-sm font-medium text-muted-foreground">
+                    <Icon className="h-4 w-4 text-primary" aria-hidden="true" />
+                    {text}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </Reveal>
         </div>
       </section>
     </>
diff --git a/src/components/landing/FaqSection.tsx b/src/components/landing/FaqSection.tsx
index 69ed85a..77469af 100644
--- a/src/components/landing/FaqSection.tsx
+++ b/src/components/landing/FaqSection.tsx
@@ -30,7 +30,7 @@ export function FaqSection() {
     <section id="faq" className="edge-to-edge-section py-12 md:py-16 lg:py-20 relative overflow-hidden bg-background">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-4xl mx-auto relative z-10">
-        <h2 className="text-3xl font-bold mb-10 text-center text-foreground">
+        <h2 className="font-display text-3xl font-bold sm:text-4xl mb-10 text-center text-foreground">
           Frequently Asked <span className="text-primary">Questions</span>
         </h2>
         <Accordion type="single" collapsible className="w-full" suppressHydrationWarning>
diff --git a/src/components/landing/FeaturesSection.tsx b/src/components/landing/FeaturesSection.tsx
index 5030815..c66f27a 100644
--- a/src/components/landing/FeaturesSection.tsx
+++ b/src/components/landing/FeaturesSection.tsx
@@ -1,45 +1,45 @@
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card";
 import { ValueBadge } from "@/components/ui/value-badge";
 import { BackgroundBeams } from "@/components/ui/background-beams";
-import { BarChart3, Search, Bot, LineChart, ShieldAlert, BookUser, Zap, Bitcoin } from "lucide-react";
+import { Reveal } from "@/components/ui/reveal";
+import { BarChart3, Search, Bot, LineChart, ShieldAlert, BookUser, Zap, Bitcoin, type LucideIcon } from "lucide-react";
+
+interface Feature {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
 
-const features = [
+const features: Feature[] = [
   {
-    icon: <BarChart3 />,
+    icon: BarChart3,
     title: 'Wallet Visualization',
     description: 'See a clear, interactive graph of all transactions and fund flows.',
-    colorScheme: 'primary',
   },
   {
-    icon: <Search />,
+    icon: Search,
     title: 'OPSEC Threat Detection',
     description: 'Automatically identify risks like address reuse and peel chains.',
-    colorScheme: 'primary',
   },
   {
-    icon: <Bot />,
+    icon: Bot,
     title: 'AI Wallet Analysis',
     description: 'Ask our AI to summarize wallet activity or explain complex transactions.',
-    colorScheme: 'primary',
   },
   {
-    icon: <LineChart />,
+    icon: LineChart,
     title: 'Transaction History Graphs',
     description: 'Track wallet balance and activity over time with detailed charts.',
-    colorScheme: 'primary',
   },
   {
-    icon: <ShieldAlert />,
+    icon: ShieldAlert,
     title: 'Privacy Risk Insights',
     description: 'Get actionable reports on potential privacy vulnerabilities in a wallet.',
-    colorScheme: 'primary',
   },
   {
-    icon: <BookUser />,
+    icon: BookUser,
     title: 'Ask AI About Any Address',
     description: 'Use natural language to query any Bitcoin address and get instant answers.',
-    colorScheme: 'primary',
   },
 ];
 
@@ -48,39 +48,34 @@ export function FeaturesSection() {
     <section id="features" className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto relative z-10">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Your Bitcoin <span className="text-primary">Investigation Toolkit</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Professional-grade tools for analyzing Bitcoin transactions, detecting privacy risks, and uncovering wallet patterns with AI-powered insights.</p>
-          <div className="flex flex-wrap justify-center gap-3 pt-6">
-            <ValueBadge icon={Bitcoin} text="On-Chain Analysis" variant="primary" />
-            <ValueBadge icon={Zap} text="Real-Time Data" variant="primary" />
-            <ValueBadge icon={Bot} text="AI-Powered" variant="primary" />
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Your Bitcoin <span className="text-primary">Investigation Toolkit</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Professional-grade tools for analyzing Bitcoin transactions, detecting privacy risks, and uncovering wallet patterns with AI-powered insights.</p>
+            <div className="flex flex-wrap justify-center gap-3 pt-6">
+              <ValueBadge icon={Bitcoin} text="On-Chain Analysis" variant="primary" />
+              <ValueBadge icon={Zap} text="Real-Time Data" variant="primary" />
+              <ValueBadge icon={Bot} text="AI-Powered" variant="primary" />
+            </div>
           </div>
-        </div>
+        </Reveal>
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 text-center">
-          {features.map((feature, idx) => (
-            <Card
-              key={idx}
-              className="bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center overflow-hidden group"
-            >
-              <CardHeader className="p-6 pb-2">
-                <div className="p-3 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  {/* We need to clone the element to add the className if it's a React element, or just render it if we update the array */}
-                  {/* For simplicity, let's assume we update the array above or just style the icon here if possible. 
-                       Actually, the array has the icon as a component. Let's update the array definition instead to be cleaner, 
-                       but for now let's just wrap it or style the container. 
-                       The icon in the array has text-complementary. We should update the array too. */}
-                  <div className="text-primary [&>svg]:h-8 [&>svg]:w-8">
-                    {feature.icon}
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="p-6 pt-2 grow">
-                <CardTitle className="font-bold text-xl mb-2 text-foreground">{feature.title}</CardTitle>
-                <CardDescription className="font-normal text-muted-foreground">{feature.description}</CardDescription>
-              </CardContent>
-            </Card>
-          ))}
+          {features.map((feature, idx) => {
+            const Icon = feature.icon;
+            return (
+              <Reveal key={feature.title} delay={(idx % 3) * 100}>
+                <Card className="h-full bg-card card-glow-border shadow-xl hover:-translate-y-1 flex flex-col items-center overflow-hidden group">
+                  <CardContent className="p-6 grow flex flex-col items-center">
+                    <div className="p-3 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 group-hover:shadow-lg group-hover:shadow-primary/20 transition-all duration-300 mb-4">
+                      <Icon className="h-8 w-8 text-primary group-hover:scale-110 transition-transform duration-300" />
+                    </div>
+                    <CardTitle className="font-display font-bold text-xl mb-2 text-foreground">{feature.title}</CardTitle>
+                    <CardDescription className="font-normal text-muted-foreground">{feature.description}</CardDescription>
+                  </CardContent>
+                </Card>
+              </Reveal>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/src/components/landing/FinalCtaSection.tsx b/src/components/landing/FinalCtaSection.tsx
new file mode 100644
index 0000000..fdddbf1
--- /dev/null
+++ b/src/components/landing/FinalCtaSection.tsx
@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button";
+import { Reveal } from "@/components/ui/reveal";
+import { ArrowRight, BarChart, ShieldCheck } from "lucide-react";
+import Link from "next/link";
+
+export function FinalCtaSection() {
+  return (
+    <section className="py-12 md:py-16 lg:py-20 bg-background relative">
+      <div className="container max-w-6xl mx-auto px-4 md:px-6">
+        <Reveal>
+          <div className="relative overflow-hidden rounded-3xl bg-linear-to-br from-primary via-[hsl(24_94%_55%)] to-[hsl(18_88%_48%)] px-6 py-14 md:px-16 md:py-20 text-center shadow-2xl shadow-primary/25">
+            {/* Decorative pattern & orbs */}
+            <div
+              className="absolute inset-0 opacity-25"
+              style={{
+                backgroundImage: "radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px)",
+                backgroundSize: "22px 22px",
+              }}
+              aria-hidden="true"
+            />
+            <div className="absolute -top-24 -right-24 w-72 h-72 rounded-full bg-white/10 blur-3xl pointer-events-none" aria-hidden="true" />
+            <div className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full bg-black/10 blur-3xl pointer-events-none" aria-hidden="true" />
+
+            <div className="relative z-10 space-y-6">
+              <h2 className="font-display text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl text-white drop-shadow-sm">
+                Ready to explore the chain?
+              </h2>
+              <p className="text-lg md:text-xl text-white/90 max-w-2xl mx-auto leading-relaxed">
+                Start analyzing any Bitcoin address in seconds, or take control of your keys with our privacy-first wallet. Free during beta — no registration required.
+              </p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
+                <Button
+                  asChild
+                  size="xl"
+                  className="group bg-white text-[hsl(20_90%_35%)] hover:bg-white/90 shadow-lg hover:shadow-xl hover:shadow-black/20 font-bold"
+                >
+                  <Link href="/analyzer">
+                    <BarChart className="mr-2 h-5 w-5" />
+                    Launch Analyzer
+                    <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+                  </Link>
+                </Button>
+                <Button
+                  asChild
+                  size="xl"
+                  variant="outline"
+                  className="group border-white/50 bg-transparent text-white hover:bg-white/10 hover:border-white hover:text-white"
+                >
+                  <Link href="/wallet">
+                    <ShieldCheck className="mr-2 h-5 w-5" />
+                    Get the Wallet
+                  </Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
index 52de989..a33f657 100644
--- a/src/components/landing/Footer.tsx
+++ b/src/components/landing/Footer.tsx
@@ -8,77 +8,125 @@ interface FooterProps {
   onPrivacyClick: () => void;
 }
 
+const footerLinkClassName =
+  "text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4";
+
+const productLinks = [
+  { href: '/analyzer', label: 'Wallet Analyzer' },
+  { href: '/wallet', label: 'Privacy Wallet' },
+  { href: '/wallet/download', label: 'Download Wallet' },
+];
+
+const learnLinks = [
+  { href: '/learn', label: 'Learning Hub' },
+  { href: '/history', label: 'Bitcoin History' },
+  { href: '/glossary', label: 'Glossary' },
+];
+
 export function Footer({ onTermsClick, onPrivacyClick }: FooterProps) {
   return (
-    <footer className="edge-to-edge-section flex flex-col gap-3 py-4 shrink-0 border-t border-border/40 bg-muted/40 text-foreground relative z-10 mt-auto w-full" style={{
+    <footer className="edge-to-edge-section flex flex-col gap-3 pt-12 pb-4 shrink-0 border-t border-border/40 bg-muted/40 text-foreground relative z-10 mt-auto w-full" style={{
       paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
       paddingLeft: 'max(1rem, env(safe-area-inset-left))',
       paddingRight: 'max(1rem, env(safe-area-inset-right))'
     }}>
       <div className="container mx-auto">
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-4">
-          <Link href="/" className="group flex items-center gap-2 transition-all duration-200">
-            <Image src="/images/logo-icon.jpg" alt="BitSleuth Logo" width={32} height={32} className="rounded-lg grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 group-hover:shadow-md group-hover:shadow-primary/20 transition-all duration-300" />
-            <span className="font-bold text-base sm:text-lg text-muted-foreground group-hover:text-primary transition-colors duration-200">BitSleuth</span>
-          </Link>
-
-          <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
-            <ValueBadge icon={Bitcoin} text="Built for Bitcoin" variant="primary" />
-            <ValueBadge icon={Heart} text="Made with ♥ by Bitcoiners" variant="primary" />
+        {/* Main footer grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8 mb-10">
+          {/* Brand column */}
+          <div className="space-y-4 sm:col-span-2 lg:col-span-1">
+            <Link href="/" className="group inline-flex items-center gap-2 transition-all duration-200">
+              <Image src="/images/logo-icon.jpg" alt="BitSleuth Logo" width={36} height={36} className="rounded-lg group-hover:shadow-md group-hover:shadow-primary/20 transition-all duration-300" />
+              <span className="font-display font-bold text-lg text-foreground group-hover:text-primary transition-colors duration-200">BitSleuth</span>
+            </Link>
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-xs">
+              Bitcoin transparency and sovereignty tools — an AI-powered wallet analyzer and a privacy-first, non-custodial wallet.
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <ValueBadge icon={Bitcoin} text="Built for Bitcoin" variant="primary" className="px-3 py-1.5" />
+              <ValueBadge icon={Heart} text="Made by Bitcoiners" variant="primary" className="px-3 py-1.5" />
+            </div>
           </div>
-        </div>
 
-        <div className="border-t border-border/40 pt-4 pb-4 flex flex-col sm:flex-row gap-4 items-center justify-between">
-          <p className="text-xs sm:text-sm text-muted-foreground font-normal text-center sm:text-left">&copy; {new Date().getFullYear()} BitSleuth. All rights reserved.</p>
+          {/* Products column */}
+          <nav aria-label="Products" className="space-y-3">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-foreground">Products</h3>
+            <ul className="space-y-2.5">
+              {productLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className={footerLinkClassName} prefetch={false}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
 
-          <nav className="flex flex-wrap gap-4 sm:gap-6 justify-center sm:justify-end text-center relative z-50">
-            <Link
-              href="/glossary"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4"
-              prefetch={false}
-            >
-              Glossary
-            </Link>
-            <a
-              href="https://primal.net/p/nprofile1qqs9lrs07tqjg4vkvdh0sn4dkv8v38xddmz87tm2c2rkx7s8jsr426gdz006n"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4"
-            >
-              Nostr
-            </a>
-            <button 
-              onClick={onTermsClick} 
-              type="button"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4 cursor-pointer active:scale-[0.98]"
-            >
-              Terms of Service
-            </button>
-            <button 
-              onClick={onPrivacyClick} 
-              type="button"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4 cursor-pointer active:scale-[0.98]"
-            >
-              Privacy Policy
-            </button>
-            <Link
-              href="/company-information"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4"
-              prefetch={false}
-            >
-              Company Information
-            </Link>
-            <a
-              href="https://www.pingara.io/status/bitsleuth"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Status (opens in new tab)"
-              className="text-xs sm:text-sm text-muted-foreground hover:text-primary font-medium transition-colors duration-200 hover:underline underline-offset-4"
-            >
-              Status
-            </a>
+          {/* Learn column */}
+          <nav aria-label="Learn" className="space-y-3">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-foreground">Learn</h3>
+            <ul className="space-y-2.5">
+              {learnLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className={footerLinkClassName} prefetch={false}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          {/* Company column */}
+          <nav aria-label="Company" className="space-y-3">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-foreground">Company</h3>
+            <ul className="space-y-2.5">
+              <li>
+                <Link href="/company-information" className={footerLinkClassName} prefetch={false}>
+                  Company Information
+                </Link>
+              </li>
+              <li>
+                <button onClick={onTermsClick} type="button" className={`${footerLinkClassName} cursor-pointer active:scale-[0.98] text-left`}>
+                  Terms of Service
+                </button>
+              </li>
+              <li>
+                <button onClick={onPrivacyClick} type="button" className={`${footerLinkClassName} cursor-pointer active:scale-[0.98] text-left`}>
+                  Privacy Policy
+                </button>
+              </li>
+              <li>
+                <a
+                  href="https://primal.net/p/nprofile1qqs9lrs07tqjg4vkvdh0sn4dkv8v38xddmz87tm2c2rkx7s8jsr426gdz006n"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={footerLinkClassName}
+                >
+                  Nostr
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.pingara.io/status/bitsleuth"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Status (opens in new tab)"
+                  className={footerLinkClassName}
+                >
+                  Status
+                </a>
+              </li>
+            </ul>
           </nav>
         </div>
+
+        {/* Bottom bar */}
+        <div className="border-t border-border/40 pt-4 pb-2 flex flex-col sm:flex-row gap-2 items-center justify-between">
+          <p className="text-xs sm:text-sm text-muted-foreground font-normal text-center sm:text-left">&copy; {new Date().getFullYear()} BitSleuth. All rights reserved.</p>
+          <p className="text-xs text-muted-foreground/70 text-center sm:text-right">
+            Non-custodial. Your keys, your Bitcoin.
+          </p>
+        </div>
       </div>
     </footer>
   );
diff --git a/src/components/landing/Header.tsx b/src/components/landing/Header.tsx
index 9792744..cb99601 100644
--- a/src/components/landing/Header.tsx
+++ b/src/components/landing/Header.tsx
@@ -41,10 +41,10 @@ function getValidatedAppUrl(): string {
 const APP_URL = getValidatedAppUrl();
 
 const launchButtonDesktopClassName =
-  "bg-primary hover:bg-primary/90 text-primary-foreground font-semibold shadow-md hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98] header-dropdown-trigger px-4 py-2.5 transition-all duration-200 group";
+  "font-semibold header-dropdown-trigger px-4 py-2.5 group";
 
 const launchButtonMobileClassName =
-  "bg-primary hover:bg-primary/90 text-primary-foreground w-full justify-start touch-manipulation select-none";
+  "w-full justify-start touch-manipulation select-none";
 
 const logoLinkClassName = cn(
   "group flex items-center justify-center gap-3 px-3 sm:px-3.5 py-2 rounded-full",
@@ -150,7 +150,7 @@ export function Header({ basePath = '' }: HeaderProps) {
           <Link
             key={link.href}
             href={link.href}
-            className="text-[15px] md:text-base font-semibold text-muted-foreground hover:text-foreground transition-colors"
+            className="nav-link-underline text-[15px] md:text-base font-semibold text-muted-foreground hover:text-foreground transition-colors"
             prefetch={false}
           >
             {link.label}
@@ -159,7 +159,7 @@ export function Header({ basePath = '' }: HeaderProps) {
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button className={launchButtonDesktopClassName}>
+            <Button variant="shine" className={launchButtonDesktopClassName}>
               <Rocket className="mr-2 h-4 w-4 shrink-0 group-hover:rotate-12 transition-transform duration-300" />
               Launch App
               <ChevronDown className="h-4 w-4 ml-1 shrink-0 transition-transform duration-300 data-[state=open]:rotate-180" />
diff --git a/src/components/landing/HeroSection.tsx b/src/components/landing/HeroSection.tsx
index 52004da..f399d61 100644
--- a/src/components/landing/HeroSection.tsx
+++ b/src/components/landing/HeroSection.tsx
@@ -52,11 +52,13 @@ export function HeroSection() {
     <section className="edge-to-edge-section relative overflow-hidden py-12 md:py-16 lg:py-20">
       {/* Background Gradient - Orange from top */}
       <div className="absolute inset-0 bg-linear-to-b from-primary/10 via-background/50 to-background z-0" />
+      <div className="absolute inset-0 bg-dot-pattern z-0" aria-hidden="true" />
+      <div className="hero-orb w-[28rem] h-[28rem] -top-32 -left-32 motion-safe:animate-pulse-glow" aria-hidden="true" />
       <BackgroundBeams intensity="subtle" className="opacity-30" />
       <div className="container max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center relative z-10">
-        <div className="space-y-6">
-          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-foreground">
-            BitSleuth Analyzer: Analyze <span className="text-primary">Bitcoin Wallets</span> Like a Pro
+        <div className="space-y-6 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-700 motion-safe:slide-in-from-bottom-4">
+          <h1 className="font-display text-4xl font-bold tracking-tight sm:text-5xl xl:text-6xl/none text-foreground">
+            BitSleuth Analyzer: Analyze <span className="bg-clip-text text-transparent bg-linear-to-r from-primary via-[hsl(20_90%_55%)] to-primary bg-[length:200%_auto] motion-safe:animate-gradient-x">Bitcoin Wallets</span> Like a Pro
           </h1>
           <p className="text-lg text-muted-foreground md:text-xl font-normal">
             Visualize transactions, trace flows, and spot OPSEC risks with AI-powered insights. Advanced analytics, visualized insights, and total transparency.
@@ -67,13 +69,13 @@ export function HeroSection() {
               <Input
                 type="text"
                 placeholder="Paste any BTC Address"
-                className="p-3 pl-10 rounded-md w-full max-w-md bg-background/50 border-border/50 focus:border-primary/50"
+                className="h-12 p-3 pl-10 rounded-xl w-full max-w-md bg-background/70 border-border/60 shadow-sm focus:border-primary/60 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow focus:shadow-lg focus:shadow-primary/10"
                 value={address}
                 onChange={(e) => setAddress(e.target.value)}
                 onKeyDown={handleKeyDown}
               />
             </div>
-            <Button size="lg" className="w-full sm:w-auto shadow-none bg-primary hover:bg-primary/90 text-primary-foreground" onClick={handleAnalyze}>
+            <Button variant="shine" size="xl" className="w-full sm:w-auto" onClick={handleAnalyze}>
               <Search className="mr-2 h-5 w-5" />
               Analyze Wallet
             </Button>
@@ -84,9 +86,9 @@ export function HeroSection() {
             <ValueBadge icon={Zap} text="Instant Analysis" variant="primary" />
           </div>
         </div>
-        <div className="relative">
-          <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full -z-10"></div>
-          <Card className="shadow-2xl bg-card/80 backdrop-blur-xs border-border/50 overflow-hidden transform hover:scale-105 transition-transform duration-500 shadow-primary/10 hover:border-primary/50">
+        <div className="relative motion-safe:animate-in motion-safe:fade-in motion-safe:duration-1000 motion-safe:slide-in-from-right-8">
+          <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full -z-10 motion-safe:animate-pulse-glow"></div>
+          <Card className="shadow-2xl bg-card/80 backdrop-blur-xs card-glow-border overflow-hidden transform hover:scale-[1.03] transition-transform duration-500 shadow-primary/10">
             <CardContent className="p-0">
               <Image
                 src="/images/dashboard-preview.png"
diff --git a/src/components/landing/HowItWorksSection.tsx b/src/components/landing/HowItWorksSection.tsx
index 50b440c..7f380f2 100644
--- a/src/components/landing/HowItWorksSection.tsx
+++ b/src/components/landing/HowItWorksSection.tsx
@@ -1,22 +1,19 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 
 const steps = [
   {
-    title: "Step 1",
+    title: "Paste an Address",
     description: "Paste a Bitcoin wallet address into the analysis bar.",
-    colorScheme: "primary",
   },
   {
-    title: "Step 2",
+    title: "We Analyze the Chain",
     description: "BitSleuth analyzes the transaction history and OPSEC risks.",
-    colorScheme: "primary",
   },
   {
-    title: "Step 3",
+    title: "Explore the Insights",
     description: "View visual insights and chat with our AI to understand the data.",
-    colorScheme: "primary",
   },
 ];
 
@@ -25,21 +22,32 @@ export function HowItWorksSection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 relative overflow-hidden bg-background">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-5xl mx-auto text-center relative z-10">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">How It <span className="text-primary">Works</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Get started with Bitcoin analysis in three simple steps. No technical knowledge required.</p>
-        </div>
-        <div className="grid md:grid-cols-3 gap-6">
-          {steps.map((step, idx) => (
-            <Card key={idx} className="bg-card border-none shadow-xl text-left hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-              <CardHeader>
-                <CardTitle className="text-lg font-bold mb-2 text-primary">{step.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="font-normal text-muted-foreground">{step.description}</p>
-              </CardContent>
-            </Card>
-          ))}
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">How It <span className="text-primary">Works</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Get started with Bitcoin analysis in three simple steps. No technical knowledge required.</p>
+          </div>
+        </Reveal>
+        <div className="relative">
+          {/* Connecting line between steps on desktop */}
+          <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-px bg-linear-to-r from-primary/10 via-primary/40 to-primary/10" aria-hidden="true" />
+          <div className="grid md:grid-cols-3 gap-6">
+            {steps.map((step, idx) => (
+              <Reveal key={step.title} delay={idx * 130}>
+                <Card className="relative h-full bg-card card-glow-border shadow-xl text-left hover:-translate-y-2">
+                  <CardContent className="p-6 pt-8">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 ring-1 ring-primary/25 mb-5 relative z-10">
+                      <span className="font-display text-2xl font-bold bg-clip-text text-transparent bg-linear-to-br from-primary to-[hsl(18_88%_48%)]">
+                        {idx + 1}
+                      </span>
+                    </div>
+                    <h3 className="font-display text-lg font-bold mb-2 text-foreground">{step.title}</h3>
+                    <p className="font-normal text-muted-foreground">{step.description}</p>
+                  </CardContent>
+                </Card>
+              </Reveal>
+            ))}
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/PricingSection.tsx b/src/components/landing/PricingSection.tsx
index 4bc0736..440a2d6 100644
--- a/src/components/landing/PricingSection.tsx
+++ b/src/components/landing/PricingSection.tsx
@@ -1,17 +1,31 @@
-
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+
+interface Plan {
+  title: string;
+  price: string;
+  desc: ReactNode;
+  features: string[];
+  cta: string;
+  href?: string;
+  featured?: boolean;
+  comingSoon?: boolean;
+}
 
-const plans = [
+const plans: Plan[] = [
   {
-    title: 'Free (Full Access During Beta)',
+    title: 'Free',
     price: '$0/mo',
     desc: <>Basic insights <span className="line-through">& 1 address lookup per day.</span></>,
     features: ['Wallet Analysis', 'Transaction History'],
     cta: 'Get Started',
-    href: 'https://app.bitsleuth.ai/'
+    href: 'https://app.bitsleuth.ai/',
+    featured: true,
   },
   {
     title: 'Pro',
@@ -36,34 +50,60 @@ export function PricingSection() {
     <section id="pricing" className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto text-center relative z-10">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Pricing <span className="text-primary">Plans</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Choose the plan that fits your Bitcoin analysis needs. Start free during our beta period.</p>
-        </div>
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Pricing <span className="text-primary">Plans</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Choose the plan that fits your Bitcoin analysis needs. Start free during our beta period.</p>
+          </div>
+        </Reveal>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
           {plans.map((plan, idx) => (
-            <Card
-              key={idx}
-              className={`relative flex flex-col text-left overflow-hidden shadow-xl bg-card border-none hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 ${plan.comingSoon ? 'blur-xs pointer-events-none opacity-70' : ''
-                }`}
-            >
-              {plan.comingSoon && (
-                <Badge variant="secondary" className="absolute top-4 right-4 text-xs font-bold py-1 px-3 z-10 blur-none bg-primary/20 text-primary border-primary/20">COMING SOON</Badge>
-              )}
-              <CardHeader>
-                <CardTitle className="text-2xl font-bold text-foreground">{plan.title}</CardTitle>
-                <p className="text-3xl text-primary font-bold">{plan.price}</p>
-                <CardDescription className="font-normal text-gray-400">{plan.desc}</CardDescription>
-              </CardHeader>
-              <CardContent className="grow flex flex-col">
-                <ul className="space-y-2 mb-8 grow font-medium text-muted-foreground">
-                  {plan.features.map(feature => <li key={feature} className="flex items-center gap-2"><span className="text-primary">✅</span><span>{feature}</span></li>)}
-                </ul>
-                <Button asChild className="w-full bg-primary hover:bg-primary/90 text-primary-foreground shadow-none">
-                  {plan.href ? <a href={plan.href}>{plan.cta}</a> : <span>{plan.cta}</span>}
-                </Button>
-              </CardContent>
-            </Card>
+            <Reveal key={plan.title} delay={idx * 120} className="h-full">
+              <Card
+                className={`relative flex flex-col h-full text-left overflow-hidden shadow-xl bg-card transition-all duration-300 hover:-translate-y-2 ${
+                  plan.featured
+                    ? 'border-2 border-primary/60 shadow-2xl shadow-primary/15'
+                    : 'card-glow-border'
+                } ${plan.comingSoon ? 'opacity-80' : ''}`}
+              >
+                {plan.featured && (
+                  <Badge className="absolute top-4 right-4 text-xs font-bold py-1 px-3 z-10 bg-primary text-primary-foreground border-none shadow-md shadow-primary/25">
+                    FULL ACCESS DURING BETA
+                  </Badge>
+                )}
+                {plan.comingSoon && (
+                  <Badge variant="secondary" className="absolute top-4 right-4 text-xs font-bold py-1 px-3 z-10 bg-primary/15 text-primary border border-primary/25">
+                    COMING SOON
+                  </Badge>
+                )}
+                <CardHeader>
+                  <CardTitle className="font-display text-2xl font-bold text-foreground">{plan.title}</CardTitle>
+                  <p className="font-display text-3xl text-primary font-bold">{plan.price}</p>
+                  <CardDescription className="font-normal text-muted-foreground">{plan.desc}</CardDescription>
+                </CardHeader>
+                <CardContent className="grow flex flex-col">
+                  <ul className="space-y-2.5 mb-8 grow font-medium text-muted-foreground">
+                    {plan.features.map(feature => (
+                      <li key={feature} className="flex items-center gap-2.5">
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/15 shrink-0">
+                          <Check className="h-3.5 w-3.5 text-primary" strokeWidth={3} />
+                        </span>
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  {plan.href ? (
+                    <Button asChild variant={plan.featured ? "shine" : "default"} size="xl" className="w-full">
+                      <a href={plan.href}>{plan.cta}</a>
+                    </Button>
+                  ) : (
+                    <Button variant="outline" size="xl" className="w-full" disabled>
+                      {plan.cta}
+                    </Button>
+                  )}
+                </CardContent>
+              </Card>
+            </Reveal>
           ))}
         </div>
       </div>
diff --git a/src/components/landing/TestimonialsSection.tsx b/src/components/landing/TestimonialsSection.tsx
index e65b321..762e964 100644
--- a/src/components/landing/TestimonialsSection.tsx
+++ b/src/components/landing/TestimonialsSection.tsx
@@ -3,8 +3,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import { Quote } from "lucide-react";
-import { useEffect, useState } from "react";
 
 const testimonials = [
   {
@@ -13,7 +13,7 @@ const testimonials = [
     author: "Alex M.",
     role: "Privacy Advocate",
     initials: "AM",
-    avatarBg: "bg-orange-100 text-orange-700"
+    avatarBg: "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300"
   },
   {
     id: 2,
@@ -21,7 +21,7 @@ const testimonials = [
     author: "Sarah K.",
     role: "Blockchain Analyst",
     initials: "SK",
-    avatarBg: "bg-sky-100 text-sky-700"
+    avatarBg: "bg-sky-100 text-sky-700 dark:bg-sky-950 dark:text-sky-300"
   },
   {
     id: 3,
@@ -29,61 +29,51 @@ const testimonials = [
     author: "David R.",
     role: "Bitcoin Educator",
     initials: "DR",
-    avatarBg: "bg-emerald-100 text-emerald-700"
+    avatarBg: "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300"
   }
 ];
 
 export function TestimonialsSection() {
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  // Auto-rotate testimonials
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setActiveIndex((prev) => (prev + 1) % testimonials.length);
-    }, 5000);
-    return () => clearInterval(interval);
-  }, []);
-
   return (
     <section className="py-10 md:py-14 lg:py-16 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto px-4 md:px-6 relative z-10">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
-            Trusted by the <span className="text-primary">Community</span>
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            See how BitSleuth is helping Bitcoiners regain control of their financial privacy and data.
-          </p>
-        </div>
+        <Reveal>
+          <div className="text-center mb-16">
+            <h2 className="font-display text-3xl font-bold tracking-tight sm:text-4xl mb-4">
+              Trusted by the <span className="text-primary">Community</span>
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              See how BitSleuth is helping Bitcoiners regain control of their financial privacy and data.
+            </p>
+          </div>
+        </Reveal>
 
         <div className="grid md:grid-cols-3 gap-8">
           {testimonials.map((testimonial, index) => (
-            <Card
-              key={testimonial.id}
-              className={`bg-white border-none shadow-xl shadow-black/5 transition-all duration-500 hover:-translate-y-2 ${index === activeIndex ? 'ring-2 ring-primary/20 scale-105 md:scale-100' : 'opacity-90 hover:opacity-100'
-                }`}
-            >
-              <CardContent className="p-8 flex flex-col h-full">
-                <div className="h-12 w-12 bg-primary rounded-lg flex items-center justify-center mb-6 shadow-none">
-                  <Quote className="h-6 w-6 text-foreground fill-white" />
-                </div>
-                <p className="text-lg text-gray-700 leading-relaxed mb-8 flex-1 font-medium">
-                  "{testimonial.content}"
-                </p>
-                <div className="flex items-center gap-4 mt-auto pt-6 border-t border-gray-100">
-                  <Avatar className="h-12 w-12 border-2 border-white shadow-none">
-                    <AvatarFallback className={`${testimonial.avatarBg} font-bold`}>
-                      {testimonial.initials}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <p className="font-bold text-gray-900">{testimonial.author}</p>
-                    <p className="text-xs text-primary font-semibold uppercase tracking-wide">{testimonial.role}</p>
+            <Reveal key={testimonial.id} delay={index * 120}>
+              <Card className="h-full bg-card card-glow-border shadow-xl shadow-black/5 hover:-translate-y-2">
+                <CardContent className="p-8 flex flex-col h-full">
+                  <div className="h-12 w-12 bg-primary rounded-xl flex items-center justify-center mb-6 shadow-md shadow-primary/25">
+                    <Quote className="h-6 w-6 text-primary-foreground fill-primary-foreground" />
+                  </div>
+                  <p className="text-lg text-foreground/90 leading-relaxed mb-8 flex-1 font-medium">
+                    "{testimonial.content}"
+                  </p>
+                  <div className="flex items-center gap-4 mt-auto pt-6 border-t border-border">
+                    <Avatar className="h-12 w-12 border-2 border-background shadow-none">
+                      <AvatarFallback className={`${testimonial.avatarBg} font-bold`}>
+                        {testimonial.initials}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-bold text-foreground">{testimonial.author}</p>
+                      <p className="text-xs text-primary font-semibold uppercase tracking-wide">{testimonial.role}</p>
+                    </div>
                   </div>
-                </div>
-              </CardContent>
-            </Card>
+                </CardContent>
+              </Card>
+            </Reveal>
           ))}
         </div>
       </div>
diff --git a/src/components/landing/WalletAboutSection.tsx b/src/components/landing/WalletAboutSection.tsx
index c57d88e..5bf143d 100644
--- a/src/components/landing/WalletAboutSection.tsx
+++ b/src/components/landing/WalletAboutSection.tsx
@@ -8,7 +8,7 @@ export function WalletAboutSection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-3xl mx-auto text-center relative z-10">
-        <h2 className="text-3xl font-bold mb-6 text-foreground">About <span className="text-primary">BitSleuth Wallet</span></h2>
+        <h2 className="font-display text-3xl font-bold sm:text-4xl mb-6 text-foreground">About <span className="text-primary">BitSleuth Wallet</span></h2>
         <p className="text-lg text-muted-foreground font-normal">
           The BitSleuth Wallet is built for privacy-conscious Bitcoiners. We believe in self-custody and minimizing your on-chain footprint. Our wallet is non-custodial, requires no personal information, and is designed to help you transact with greater privacy. Built by developers who believe in financial sovereignty. The Privacy Wallet is fully open source — review or contribute to the code on{" "}
           <a
diff --git a/src/components/landing/WalletBuiltForBitcoinersSection.tsx b/src/components/landing/WalletBuiltForBitcoinersSection.tsx
index ee59c40..de41f51 100644
--- a/src/components/landing/WalletBuiltForBitcoinersSection.tsx
+++ b/src/components/landing/WalletBuiltForBitcoinersSection.tsx
@@ -2,6 +2,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ValueBadge } from "@/components/ui/value-badge";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import { Settings, Bitcoin, Users, Coins } from "lucide-react";
 
 const bitcoinerFeatures = [
@@ -27,28 +28,32 @@ export function WalletBuiltForBitcoinersSection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto relative z-10">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Built for <span className="text-primary">Bitcoiners</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Designed by the Bitcoin community, for the Bitcoin community. Every feature serves the goal of financial sovereignty.</p>
-          <div className="flex flex-wrap justify-center gap-3 pt-6">
-            <ValueBadge icon={Coins} text="UTXO Management" variant="primary" />
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Built for <span className="text-primary">Bitcoiners</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Designed by the Bitcoin community, for the Bitcoin community. Every feature serves the goal of financial sovereignty.</p>
+            <div className="flex flex-wrap justify-center gap-3 pt-6">
+              <ValueBadge icon={Coins} text="UTXO Management" variant="primary" />
+            </div>
           </div>
-        </div>
+        </Reveal>
         <div className="grid md:grid-cols-3 gap-6">
           {bitcoinerFeatures.map((feature, idx) => (
-            <Card key={idx} className="bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 group overflow-hidden">
-              <CardHeader className="flex flex-col items-center text-center p-6">
-                <div className="p-3 mb-4 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
-                    {feature.icon}
+            <Reveal key={feature.title} delay={idx * 120}>
+              <Card className="h-full bg-card card-glow-border shadow-xl hover:-translate-y-2 group overflow-hidden">
+                <CardHeader className="flex flex-col items-center text-center p-6">
+                  <div className="p-3 mb-4 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                    <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
+                      {feature.icon}
+                    </div>
                   </div>
-                </div>
-                <CardTitle className="font-bold text-lg text-foreground">{feature.title}</CardTitle>
-              </CardHeader>
-              <CardContent className="p-6 pt-0">
-                <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
-              </CardContent>
-            </Card>
+                  <CardTitle className="font-display font-bold text-lg text-foreground">{feature.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="p-6 pt-0">
+                  <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
+                </CardContent>
+              </Card>
+            </Reveal>
           ))}
         </div>
       </div>
diff --git a/src/components/landing/WalletFaqSection.tsx b/src/components/landing/WalletFaqSection.tsx
index 4f5b8d6..983f371 100644
--- a/src/components/landing/WalletFaqSection.tsx
+++ b/src/components/landing/WalletFaqSection.tsx
@@ -36,7 +36,7 @@ export function WalletFaqSection() {
     <section id="faq" className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-4xl mx-auto relative z-10">
-        <h2 className="text-3xl font-bold mb-10 text-center text-foreground">
+        <h2 className="font-display text-3xl font-bold sm:text-4xl mb-10 text-center text-foreground">
           Frequently Asked <span className="text-primary">Questions</span>
         </h2>
         <Accordion type="single" collapsible className="w-full">
diff --git a/src/components/landing/WalletFeaturesSection.tsx b/src/components/landing/WalletFeaturesSection.tsx
index 9b06e09..6a9461b 100644
--- a/src/components/landing/WalletFeaturesSection.tsx
+++ b/src/components/landing/WalletFeaturesSection.tsx
@@ -3,6 +3,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ValueBadge } from "@/components/ui/value-badge";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import { Fingerprint, KeyRound, ShieldOff } from "lucide-react";
 
 const features = [
@@ -31,33 +32,34 @@ export function WalletFeaturesSection() {
     <section id="features" className="edge-to-edge-section py-12 md:py-16 lg:py-20 bg-background relative overflow-hidden">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto relative z-10">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Your Wallet, <span className="text-primary">Your Privacy</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Keep control of your Bitcoin from the moment you start.</p>
-          <div className="flex flex-wrap justify-center gap-3 pt-6">
-            <ValueBadge icon={KeyRound} text="Self-Custody" variant="primary" />
-            <ValueBadge icon={Fingerprint} text="Biometric" variant="primary" />
-            <ValueBadge icon={ShieldOff} text="Private" variant="primary" />
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Your Wallet, <span className="text-primary">Your Privacy</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Keep control of your Bitcoin from the moment you start.</p>
+            <div className="flex flex-wrap justify-center gap-3 pt-6">
+              <ValueBadge icon={KeyRound} text="Self-Custody" variant="primary" />
+              <ValueBadge icon={Fingerprint} text="Biometric" variant="primary" />
+              <ValueBadge icon={ShieldOff} text="Private" variant="primary" />
+            </div>
           </div>
-        </div>
+        </Reveal>
         <div className="grid md:grid-cols-3 gap-8 text-left">
           {features.map((feature, idx) => (
-            <Card
-              key={idx}
-              className="bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 group overflow-hidden"
-            >
-              <CardHeader className="flex flex-row items-start gap-4 p-6 pb-2">
-                <div className="p-3 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
-                    {feature.icon}
+            <Reveal key={feature.title} delay={idx * 120}>
+              <Card className="h-full bg-card card-glow-border shadow-xl hover:-translate-y-2 group overflow-hidden">
+                <CardHeader className="flex flex-row items-start gap-4 p-6 pb-2">
+                  <div className="p-3 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                    <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
+                      {feature.icon}
+                    </div>
                   </div>
-                </div>
-                <CardTitle className="font-bold text-xl pt-1 text-foreground">{feature.title}</CardTitle>
-              </CardHeader>
-              <CardContent className="p-6 pt-2">
-                <CardDescription className="font-normal text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
-              </CardContent>
-            </Card>
+                  <CardTitle className="font-display font-bold text-xl pt-1 text-foreground">{feature.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="p-6 pt-2">
+                  <CardDescription className="font-normal text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
+                </CardContent>
+              </Card>
+            </Reveal>
           ))}
         </div>
       </div>
diff --git a/src/components/landing/WalletHeroSection.tsx b/src/components/landing/WalletHeroSection.tsx
index 73950bd..d729b57 100644
--- a/src/components/landing/WalletHeroSection.tsx
+++ b/src/components/landing/WalletHeroSection.tsx
@@ -4,45 +4,60 @@ import { BackgroundBeams } from "@/components/ui/background-beams";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { ArrowRight, Zap } from "lucide-react";
+import { ArrowRight, Zap, Check } from "lucide-react";
+
+const heroPoints = [
+  "No accounts. No tracking. Just you and your keys.",
+  "Minimize address reuse and on-chain exposure.",
+  "Security and privacy without compromising ease of use.",
+];
 
 export function WalletHeroSection() {
   return (
     <section className="edge-to-edge-section relative overflow-hidden py-12 md:py-16 lg:py-20">
       {/* Background Gradient - Orange from top */}
       <div className="absolute inset-0 bg-linear-to-b from-primary/10 via-background/50 to-background z-0" />
+      <div className="absolute inset-0 bg-dot-pattern z-0" aria-hidden="true" />
+      <div className="hero-orb w-[28rem] h-[28rem] -top-32 -right-32 motion-safe:animate-pulse-glow" aria-hidden="true" />
       <BackgroundBeams intensity="subtle" className="opacity-30" />
 
       <div className="container max-w-7xl mx-auto relative z-10">
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
           {/* Left side - Text Content */}
-          <div className="space-y-8 text-center lg:text-left">
-            <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl/none text-foreground drop-shadow-xs">
+          <div className="space-y-8 text-center lg:text-left motion-safe:animate-in motion-safe:fade-in motion-safe:duration-700 motion-safe:slide-in-from-bottom-4">
+            <h1 className="font-display text-4xl font-bold tracking-tight sm:text-5xl xl:text-6xl/none text-foreground drop-shadow-xs">
               BitSleuth Wallet: <br />
-              <span className="bg-clip-text text-transparent bg-linear-to-r from-primary to-primary/80">
+              <span className="bg-clip-text text-transparent bg-linear-to-r from-primary via-[hsl(20_90%_55%)] to-primary bg-[length:200%_auto] motion-safe:animate-gradient-x">
                 Your Bitcoin. Your Keys.
               </span>
             </h1>
             <p className="max-w-2xl text-lg text-muted-foreground md:text-xl font-normal leading-relaxed mx-auto lg:mx-0">
-              Take full control of your Bitcoin with BitSleuth Wallet - a privacy-first, non-custodial wallet designed for security, privacy, and ease of use.
-              <br /><br />
-              Minimize address reuse and on-chain exposure without compromising features or safety.
-              <br />
-              No accounts. No tracking. Just you and your keys!
-              <br /><br />
-              <span className="font-medium text-foreground/80">
-                Available in iOS App Store and Android Google Play Store.
-              </span>
+              Take full control of your Bitcoin with BitSleuth Wallet — a privacy-first, non-custodial wallet designed for security, privacy, and ease of use.
+            </p>
+
+            <ul className="space-y-3 max-w-2xl mx-auto lg:mx-0 text-left inline-block lg:block">
+              {heroPoints.map((point) => (
+                <li key={point} className="flex items-start gap-3 text-base md:text-lg text-muted-foreground">
+                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/15 shrink-0 mt-0.5">
+                    <Check className="h-4 w-4 text-primary" strokeWidth={3} />
+                  </span>
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+
+            <p className="text-sm font-medium text-foreground/70">
+              Available on the iOS App Store and Android Google Play Store.
             </p>
 
             <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
-              <Button size="lg" asChild className="bg-primary hover:bg-primary/90 text-primary-foreground">
+              <Button size="xl" variant="shine" asChild className="group">
                 <Link href="/wallet/download">
                   Download Privacy Wallet
-                  <ArrowRight className="ml-2 h-5 w-5" />
+                  <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
               </Button>
-              <Button size="lg" variant="outline" asChild className="border-primary/20 hover:bg-primary/10 hover:text-primary">
+              <Button size="xl" variant="outline" asChild>
                 <a href="#features">
                   <Zap className="mr-2 h-5 w-5" />
                   Explore Features
@@ -52,9 +67,9 @@ export function WalletHeroSection() {
           </div>
 
           {/* Right side - Mockup Image */}
-          <div className="relative mx-auto lg:mx-0 w-full max-w-md lg:max-w-full perspective-1000">
+          <div className="relative mx-auto lg:mx-0 w-full max-w-md lg:max-w-full perspective-1000 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-1000 motion-safe:slide-in-from-right-8">
             {/* Glow effect */}
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-primary/20 rounded-full blur-3xl -z-10" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-primary/20 rounded-full blur-3xl -z-10 motion-safe:animate-pulse-glow" />
 
             <div className="relative rounded-3xl overflow-hidden shadow-2xl shadow-primary/10 border border-white/10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700">
               <Image
diff --git a/src/components/landing/WalletHowItWorksSection.tsx b/src/components/landing/WalletHowItWorksSection.tsx
index b33d39c..9355598 100644
--- a/src/components/landing/WalletHowItWorksSection.tsx
+++ b/src/components/landing/WalletHowItWorksSection.tsx
@@ -1,23 +1,21 @@
 
 // src/components/landing/WalletHowItWorksSection.tsx
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 
 const steps = [
   {
-    title: "Step 1",
+    title: "Create Your Wallet",
     description: "Generate or import your secure BIP39 passphrase. Write it down and store it safely offline.",
-    colorScheme: "complementary",
   },
   {
-    title: "Step 2",
+    title: "Receive Privately",
     description: "Receive Bitcoin to your wallet. Each transaction can use a new address to protect your privacy.",
-    colorScheme: "complementary",
   },
   {
-    title: "Step 3",
+    title: "Send with Confidence",
     description: "Send Bitcoin with peace of mind. You are always in full control of your private keys.",
-    colorScheme: "complementary",
   },
 ];
 
@@ -26,21 +24,32 @@ export function WalletHowItWorksSection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 relative overflow-hidden bg-background">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-5xl mx-auto text-center relative z-10">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Advanced Technology, <span className="text-primary">Simplified.</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Visualize how BitSleuth obscures transaction trails, ensuring your financial history remains confidential.</p>
-        </div>
-        <div className="grid md:grid-cols-3 gap-6">
-          {steps.map((step, idx) => (
-            <Card key={idx} className="bg-card border-none shadow-xl text-left hover:shadow-2xl overflow-hidden group">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg font-bold mb-2 text-primary">{step.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="font-normal text-muted-foreground">{step.description}</p>
-              </CardContent>
-            </Card>
-          ))}
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Advanced Technology, <span className="text-primary">Simplified.</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Visualize how BitSleuth obscures transaction trails, ensuring your financial history remains confidential.</p>
+          </div>
+        </Reveal>
+        <div className="relative">
+          {/* Connecting line between steps on desktop */}
+          <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-px bg-linear-to-r from-primary/10 via-primary/40 to-primary/10" aria-hidden="true" />
+          <div className="grid md:grid-cols-3 gap-6">
+            {steps.map((step, idx) => (
+              <Reveal key={step.title} delay={idx * 130}>
+                <Card className="relative h-full bg-card card-glow-border shadow-xl text-left hover:-translate-y-2 overflow-hidden group">
+                  <CardContent className="p-6 pt-8">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 ring-1 ring-primary/25 mb-5 relative z-10">
+                      <span className="font-display text-2xl font-bold bg-clip-text text-transparent bg-linear-to-br from-primary to-[hsl(18_88%_48%)]">
+                        {idx + 1}
+                      </span>
+                    </div>
+                    <h3 className="font-display text-lg font-bold mb-2 text-foreground">{step.title}</h3>
+                    <p className="font-normal text-muted-foreground">{step.description}</p>
+                  </CardContent>
+                </Card>
+              </Reveal>
+            ))}
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/WalletSeamlessExperienceSection.tsx b/src/components/landing/WalletSeamlessExperienceSection.tsx
index dde0ec0..60a7604 100644
--- a/src/components/landing/WalletSeamlessExperienceSection.tsx
+++ b/src/components/landing/WalletSeamlessExperienceSection.tsx
@@ -1,6 +1,7 @@
 // src/components/landing/WalletSeamlessExperienceSection.tsx
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import Image from "next/image";
 import { Smartphone, QrCode, Palette, BarChart3 } from "lucide-react";
 
@@ -32,35 +33,39 @@ export function WalletSeamlessExperienceSection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 relative overflow-hidden bg-background">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-7xl mx-auto relative z-10">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Seamless <span className="text-primary">Experience</span></h2>
-          <p className="text-lg text-muted-foreground font-normal max-w-2xl mx-auto">Experience Bitcoin management that's intuitive, efficient, and tailored to you.</p>
-        </div>
+        <Reveal>
+          <div className="text-center mb-16">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Seamless <span className="text-primary">Experience</span></h2>
+            <p className="text-lg text-muted-foreground font-normal max-w-2xl mx-auto">Experience Bitcoin management that's intuitive, efficient, and tailored to you.</p>
+          </div>
+        </Reveal>
 
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
           {/* Left Side - Features Grid */}
           <div className="grid sm:grid-cols-2 gap-6 order-2 lg:order-1">
             {experienceFeatures.map((feature, idx) => (
-              <Card key={idx} className="bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 group overflow-hidden">
-                <CardHeader className="flex flex-col items-center text-center p-6">
-                  <div className="p-3 mb-4 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                    <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
-                      {feature.icon}
+              <Reveal key={feature.title} delay={idx * 100}>
+                <Card className="h-full bg-card card-glow-border shadow-xl hover:-translate-y-2 group overflow-hidden">
+                  <CardHeader className="flex flex-col items-center text-center p-6">
+                    <div className="p-3 mb-4 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                      <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
+                        {feature.icon}
+                      </div>
                     </div>
-                  </div>
-                  <CardTitle className="font-bold text-lg text-foreground">{feature.title}</CardTitle>
-                </CardHeader>
-                <CardContent className="p-6 pt-0">
-                  <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
-                </CardContent>
-              </Card>
+                    <CardTitle className="font-display font-bold text-lg text-foreground">{feature.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-6 pt-0">
+                    <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
+                  </CardContent>
+                </Card>
+              </Reveal>
             ))}
           </div>
 
           {/* Right Side - Image */}
-          <div className="relative order-1 lg:order-2">
+          <Reveal from="right" className="relative order-1 lg:order-2">
             {/* Glow effect */}
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-primary/20 rounded-full blur-3xl -z-10" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-primary/20 rounded-full blur-3xl -z-10 motion-safe:animate-pulse-glow" />
 
             <div className="relative rounded-3xl overflow-hidden shadow-2xl shadow-primary/10 border border-white/10 transform hover:scale-[1.02] transition-transform duration-500">
               <Image
@@ -71,7 +76,7 @@ export function WalletSeamlessExperienceSection() {
                 className="w-full h-auto object-cover"
               />
             </div>
-          </div>
+          </Reveal>
         </div>
       </div>
     </section>
diff --git a/src/components/landing/WalletSecuritySection.tsx b/src/components/landing/WalletSecuritySection.tsx
index 2aba50b..76b9468 100644
--- a/src/components/landing/WalletSecuritySection.tsx
+++ b/src/components/landing/WalletSecuritySection.tsx
@@ -2,6 +2,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ValueBadge } from "@/components/ui/value-badge";
 import { BackgroundBeams } from "@/components/ui/background-beams";
+import { Reveal } from "@/components/ui/reveal";
 import { Key, Lock, Fingerprint, ShieldCheck } from "lucide-react";
 
 const securityFeatures = [
@@ -27,31 +28,32 @@ export function WalletSecuritySection() {
     <section className="edge-to-edge-section py-12 md:py-16 lg:py-20 relative overflow-hidden bg-background">
       <BackgroundBeams intensity="subtle" className="opacity-20" />
       <div className="container max-w-6xl mx-auto relative z-10">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4 text-foreground">Uncompromising <span className="text-primary">Security & Self-Custody</span></h2>
-          <p className="text-lg text-muted-foreground font-normal">Your Bitcoin deserves the highest level of protection. We provide enterprise-grade security without compromising on privacy.</p>
-          <div className="flex flex-wrap justify-center gap-3 pt-6">
-            <ValueBadge icon={ShieldCheck} text="Non-Custodial" variant="primary" />
+        <Reveal>
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl font-bold sm:text-4xl mb-4 text-foreground">Uncompromising <span className="text-primary">Security & Self-Custody</span></h2>
+            <p className="text-lg text-muted-foreground font-normal">Your Bitcoin deserves the highest level of protection. We provide enterprise-grade security without compromising on privacy.</p>
+            <div className="flex flex-wrap justify-center gap-3 pt-6">
+              <ValueBadge icon={ShieldCheck} text="Non-Custodial" variant="primary" />
+            </div>
           </div>
-        </div>
+        </Reveal>
         <div className="grid md:grid-cols-3 gap-6">
-          {securityFeatures.map((feature) => (
-            <Card
-              key={feature.title}
-              className="bg-card border-none shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 group overflow-hidden motion-reduce:transform-none motion-reduce:transition-none"
-            >
-              <CardHeader className="flex flex-col items-center text-center p-6">
-                <div className="p-3 mb-4 rounded-2xl bg-primary/20 group-hover:bg-primary/30 transition-colors">
-                  <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
-                    {feature.icon}
+          {securityFeatures.map((feature, idx) => (
+            <Reveal key={feature.title} delay={idx * 120}>
+              <Card className="h-full bg-card card-glow-border shadow-xl hover:-translate-y-2 group overflow-hidden motion-reduce:transform-none motion-reduce:transition-none">
+                <CardHeader className="flex flex-col items-center text-center p-6">
+                  <div className="p-3 mb-4 rounded-2xl bg-primary/15 ring-1 ring-primary/20 group-hover:bg-primary/25 group-hover:ring-primary/40 transition-all duration-300">
+                    <div className="text-primary [&>svg]:h-6 [&>svg]:w-6">
+                      {feature.icon}
+                    </div>
                   </div>
-                </div>
-                <CardTitle className="font-bold text-lg text-foreground">{feature.title}</CardTitle>
-              </CardHeader>
-              <CardContent className="p-6 pt-0">
-                <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
-              </CardContent>
-            </Card>
+                  <CardTitle className="font-display font-bold text-lg text-foreground">{feature.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="p-6 pt-0">
+                  <CardDescription className="font-normal text-center text-muted-foreground leading-relaxed">{feature.description}</CardDescription>
+                </CardContent>
+              </Card>
+            </Reveal>
           ))}
         </div>
       </div>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index a27792f..05ccabf 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -6,24 +6,28 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]",
+        shine:
+          "relative overflow-hidden btn-shine-overlay bg-linear-to-r from-primary via-primary to-[hsl(20_90%_55%)] text-primary-foreground shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/35 hover:brightness-105 active:scale-[0.98]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-md active:scale-[0.98]",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-primary/25 bg-background hover:border-primary hover:bg-primary/5 hover:text-primary active:scale-[0.98]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:scale-[0.98]",
+        ghost: "hover:bg-primary/10 hover:text-primary active:scale-[0.98]",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
+        xl: "h-13 rounded-xl px-8 text-base",
         icon: "h-10 w-10",
       },
     },
diff --git a/src/components/ui/reveal.tsx b/src/components/ui/reveal.tsx
new file mode 100644
index 0000000..526c32e
--- /dev/null
+++ b/src/components/ui/reveal.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface RevealProps {
+  children: ReactNode;
+  className?: string;
+  /** Stagger delay in milliseconds applied once the element enters the viewport. */
+  delay?: number;
+  /** Direction the content slides in from. */
+  from?: "bottom" | "left" | "right" | "none";
+}
+
+const slideClasses: Record<NonNullable<RevealProps["from"]>, string> = {
+  bottom: "motion-safe:translate-y-8",
+  left: "motion-safe:-translate-x-8",
+  right: "motion-safe:translate-x-8",
+  none: "",
+};
+
+/**
+ * Fades (and optionally slides) content in when it scrolls into view.
+ * Renders content immediately when IntersectionObserver is unavailable
+ * and skips movement for users who prefer reduced motion.
+ */
+export function Reveal({ children, className, delay = 0, from = "bottom" }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { threshold: 0.05, rootMargin: "0px 0px -24px 0px" }
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "transition-all duration-700 ease-out",
+        visible ? "opacity-100 translate-x-0 translate-y-0" : cn("opacity-0", slideClasses[from]),
+        className
+      )}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ccae46c..bbe5cca 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -23,6 +23,7 @@ export default {
       fontFamily: {
         body: ['var(--font-inter)', 'sans-serif'],
         sans: ['var(--font-inter)', 'sans-serif'],
+        display: ['var(--font-display)', 'var(--font-inter)', 'sans-serif'],
         mono: ['monospace'],
       },
       colors: {
@@ -87,6 +88,18 @@ export default {
         sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-12px)' },
+        },
+        'pulse-glow': {
+          '0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
+          '50%': { opacity: '0.9', transform: 'scale(1.05)' },
+        },
+        'gradient-x': {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
         'accordion-down': {
           from: {
             height: '0',
@@ -281,6 +294,9 @@ export default {
         },
       },
       animation: {
+        float: 'float 6s ease-in-out infinite',
+        'pulse-glow': 'pulse-glow 5s ease-in-out infinite',
+        'gradient-x': 'gradient-x 6s ease-in-out infinite',
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         'beam-1': 'beam-1 4s ease-in-out infinite',