diff --git a/src/app/globals.css b/src/app/globals.css
index 6cf72ed..c21e930 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,71 +48,71 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.98 0.01 195);
+  --foreground: oklch(0.145 0.02 195);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.145 0.02 195);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.145 0.02 195);
+  --primary: oklch(0.65 0.18 195);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.85 0.08 280);
+  --secondary-foreground: oklch(0.2 0.02 280);
+  --muted: oklch(0.95 0.02 195);
+  --muted-foreground: oklch(0.45 0.05 195);
+  --accent: oklch(0.75 0.15 145);
+  --accent-foreground: oklch(0.15 0.02 145);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --border: oklch(0.88 0.04 195);
+  --input: oklch(0.92 0.02 195);
+  --ring: oklch(0.65 0.18 195);
+  --chart-1: oklch(0.65 0.18 195);
+  --chart-2: oklch(0.7 0.15 145);
+  --chart-3: oklch(0.65 0.12 280);
+  --chart-4: oklch(0.75 0.18 85);
+  --chart-5: oklch(0.7 0.2 30);
+  --sidebar: oklch(0.98 0.01 195);
+  --sidebar-foreground: oklch(0.145 0.02 195);
+  --sidebar-primary: oklch(0.65 0.18 195);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.92 0.04 195);
+  --sidebar-accent-foreground: oklch(0.2 0.02 195);
+  --sidebar-border: oklch(0.88 0.04 195);
+  --sidebar-ring: oklch(0.65 0.18 195);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --background: oklch(0.12 0.02 195);
+  --foreground: oklch(0.95 0.01 195);
+  --card: oklch(0.18 0.02 195);
+  --card-foreground: oklch(0.95 0.01 195);
+  --popover: oklch(0.18 0.02 195);
+  --popover-foreground: oklch(0.95 0.01 195);
+  --primary: oklch(0.75 0.18 195);
+  --primary-foreground: oklch(0.12 0.02 195);
+  --secondary: oklch(0.35 0.08 280);
+  --secondary-foreground: oklch(0.95 0.01 280);
+  --muted: oklch(0.25 0.02 195);
+  --muted-foreground: oklch(0.65 0.05 195);
+  --accent: oklch(0.6 0.15 145);
+  --accent-foreground: oklch(0.95 0.01 145);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --border: oklch(0.3 0.04 195);
+  --input: oklch(0.25 0.02 195);
+  --ring: oklch(0.75 0.18 195);
+  --chart-1: oklch(0.75 0.18 195);
+  --chart-2: oklch(0.7 0.15 145);
+  --chart-3: oklch(0.65 0.12 280);
+  --chart-4: oklch(0.75 0.18 85);
+  --chart-5: oklch(0.7 0.2 30);
+  --sidebar: oklch(0.15 0.02 195);
+  --sidebar-foreground: oklch(0.95 0.01 195);
+  --sidebar-primary: oklch(0.75 0.18 195);
+  --sidebar-primary-foreground: oklch(0.12 0.02 195);
+  --sidebar-accent: oklch(0.25 0.04 195);
+  --sidebar-accent-foreground: oklch(0.95 0.01 195);
+  --sidebar-border: oklch(0.3 0.04 195);
+  --sidebar-ring: oklch(0.75 0.18 195);
 }
 
 @layer base {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f4f94f3..a1a5979 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,6 +19,9 @@ import {
   CheckCircle,
   Shield,
   Play,
+  ListOrdered,
+  Target,
+  Layers,
 } from "lucide-react";
 
 export default async function HomePage() {
@@ -76,85 +79,92 @@ export default async function HomePage() {
   return (
     <div className="space-y-16">
       {/* Hero section */}
-      <section className="text-center py-16 space-y-6">
-        <Badge variant="secondary" className="text-sm px-4 py-1">
-          Quadratic Voting for Communities
+      <section className="relative text-center py-16 space-y-6 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10 -z-10" />
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl -z-10" />
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-accent/5 rounded-full blur-3xl -z-10" />
+
+        <Badge variant="secondary" className="text-sm px-4 py-1 bg-primary/10 text-primary border-primary/20">
+          Part of the rSpace Ecosystem
         </Badge>
         <h1 className="text-5xl md:text-6xl font-bold tracking-tight max-w-4xl mx-auto leading-tight">
-          Democratic Governance,{" "}
-          <span className="text-primary">Reimagined</span>
+          Democratic Backlog{" "}
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Prioritization</span>
         </h1>
         <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-          rVote uses quadratic voting to give every voice weight while preventing
-          any single actor from dominating. Proposals are ranked by the community,
-          and the best ideas rise to the top.
+          rVote uses <strong className="text-foreground">quadratic ranking</strong> to let your community democratically
+          prioritize proposals. The best ideas rise to the top through collective intelligence,
+          then advance to final voting.
         </p>
         <div className="flex flex-col sm:flex-row justify-center gap-4 pt-4">
-          <Button asChild size="lg" className="text-lg px-8">
+          <Button asChild size="lg" className="text-lg px-8 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70">
             <Link href="/demo">
               <Play className="mr-2 h-5 w-5" />
               Try the Demo
             </Link>
           </Button>
           {!session?.user ? (
-            <Button asChild variant="outline" size="lg" className="text-lg px-8">
+            <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
               <Link href="/auth/signup">Create Account</Link>
             </Button>
           ) : (
-            <Button asChild variant="outline" size="lg" className="text-lg px-8">
+            <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
               <Link href="/proposals">Browse Proposals</Link>
             </Button>
           )}
         </div>
       </section>
 
-      {/* What is Quadratic Voting */}
+      {/* What is Quadratic Ranking */}
       <section className="py-8">
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4">What is Quadratic Voting?</h2>
+          <Badge variant="outline" className="mb-4 border-primary/30">The Core Concept</Badge>
+          <h2 className="text-3xl font-bold mb-4">What is Quadratic Ranking?</h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            A voting system where the cost of each additional vote increases
-            quadratically, making it expensive to dominate but cheap to participate.
+            A system where expressing <em>strong</em> preference costs progressively more,
+            creating a fair and balanced priority list that reflects true community consensus.
           </p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-          <Card className="border-2">
+          <Card className="border-2 border-destructive/20 bg-destructive/5">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <Scale className="h-5 w-5 text-primary" />
-                The Problem with Traditional Voting
+                <Scale className="h-5 w-5 text-destructive" />
+                The Problem
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3 text-muted-foreground">
               <p>
-                In traditional systems, those with more resources (time, money,
-                influence) can easily dominate outcomes.
+                Traditional priority systems let those with more time, resources, or influence
+                dominate what gets attention.
               </p>
               <ul className="list-disc list-inside space-y-1">
-                <li>One vote per person ignores intensity of preference</li>
-                <li>Unlimited voting lets whales control results</li>
-                <li>Small voices get drowned out</li>
+                <li>Loudest voices set the agenda</li>
+                <li>Important but less flashy ideas get buried</li>
+                <li>No way to express intensity of preference</li>
+                <li>Backlogs become political battlegrounds</li>
               </ul>
             </CardContent>
           </Card>
 
-          <Card className="border-2 border-primary/50 bg-primary/5">
+          <Card className="border-2 border-primary/30 bg-gradient-to-br from-primary/5 to-accent/5">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <CheckCircle className="h-5 w-5 text-primary" />
-                The Quadratic Solution
+                The Solution: Quadratic Ranking
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3 text-muted-foreground">
               <p>
-                Quadratic voting balances participation and conviction by making
+                Quadratic ranking balances participation and conviction by making
                 additional votes progressively more expensive.
               </p>
               <ul className="list-disc list-inside space-y-1">
-                <li>1 vote = 1 credit, 2 votes = 4 credits, 3 = 9</li>
+                <li>1 vote = 1 credit, 2 votes = 4, 3 = 9</li>
+                <li>Everyone can participate meaningfully</li>
                 <li>Express strong opinions, but at a cost</li>
-                <li>More voices, more balanced outcomes</li>
+                <li>Naturally surfaces community consensus</li>
               </ul>
             </CardContent>
           </Card>
@@ -169,73 +179,77 @@ export default async function HomePage() {
             {[1, 2, 3, 4, 5].map((votes) => (
               <div
                 key={votes}
-                className="p-4 rounded-lg border-2 bg-card hover:border-primary/50 transition-colors"
+                className="p-4 rounded-lg border-2 bg-card hover:border-primary/50 hover:bg-primary/5 transition-all duration-200"
               >
                 <div className="text-2xl font-bold text-primary">{votes}</div>
                 <div className="text-sm text-muted-foreground">
                   vote{votes > 1 ? "s" : ""}
                 </div>
-                <div className="text-lg font-mono mt-2">{votes * votes}</div>
+                <div className="text-lg font-mono mt-2 text-accent">{votes * votes}</div>
                 <div className="text-xs text-muted-foreground">credits</div>
               </div>
             ))}
           </div>
           <p className="text-center text-sm text-muted-foreground mt-4">
-            It&apos;s more efficient to spread votes across proposals you support
-            than to concentrate them on one.
+            Spreading votes across proposals you support is more efficient than concentrating on one.
           </p>
         </div>
       </section>
 
-      {/* How it works - 2 stages */}
-      <section className="py-8 bg-muted/30 -mx-4 px-4 rounded-xl">
+      {/* How it creates a democratic backlog */}
+      <section className="py-8 bg-gradient-to-r from-primary/5 via-transparent to-accent/5 -mx-4 px-4 rounded-xl">
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4">Two-Stage Voting Process</h2>
+          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">How It Works</Badge>
+          <h2 className="text-3xl font-bold mb-4">From Chaos to Consensus</h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Proposals go through ranking before reaching a final vote, ensuring
-            only well-supported ideas get full consideration.
+            Transform your community&apos;s ideas into a democratically prioritized backlog
+            through two simple stages.
           </p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
-          <Card>
+          <Card className="border-primary/20 bg-card/80 backdrop-blur">
             <CardHeader>
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-                  <span className="font-bold text-primary">1</span>
+                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center">
+                  <ListOrdered className="h-5 w-5 text-primary-foreground" />
                 </div>
                 <div>
-                  <Badge className="mb-1">Stage 1</Badge>
-                  <CardTitle>Ranking</CardTitle>
+                  <Badge className="mb-1 bg-primary/10 text-primary">Stage 1</Badge>
+                  <CardTitle>Quadratic Ranking</CardTitle>
                 </div>
               </div>
             </CardHeader>
             <CardContent className="text-muted-foreground">
               <ul className="space-y-2">
                 <li className="flex items-start gap-2">
-                  <TrendingUp className="h-4 w-4 mt-1 shrink-0" />
-                  <span>Proposals start here</span>
+                  <TrendingUp className="h-4 w-4 mt-1 shrink-0 text-primary" />
+                  <span>All proposals enter the ranking pool</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Coins className="h-4 w-4 mt-1 shrink-0" />
+                  <Coins className="h-4 w-4 mt-1 shrink-0 text-primary" />
                   <span>Upvote/downvote with quadratic cost</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Clock className="h-4 w-4 mt-1 shrink-0" />
+                  <Clock className="h-4 w-4 mt-1 shrink-0 text-primary" />
                   <span>Votes decay over 30-60 days</span>
                 </li>
+                <li className="flex items-start gap-2">
+                  <Target className="h-4 w-4 mt-1 shrink-0 text-primary" />
+                  <span>Creates a living priority queue</span>
+                </li>
               </ul>
             </CardContent>
           </Card>
 
-          <Card className="border-primary/50">
+          <Card className="border-accent/30 bg-gradient-to-br from-accent/10 to-primary/10">
             <CardHeader>
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
-                  <ArrowRight className="h-5 w-5 text-primary-foreground" />
+                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-accent to-primary flex items-center justify-center">
+                  <ArrowRight className="h-5 w-5 text-white" />
                 </div>
                 <div>
-                  <Badge variant="secondary" className="mb-1">
+                  <Badge variant="secondary" className="mb-1 bg-accent/20 text-accent-foreground">
                     Threshold
                   </Badge>
                   <CardTitle>Score +100</CardTitle>
@@ -244,44 +258,48 @@ export default async function HomePage() {
             </CardHeader>
             <CardContent className="text-muted-foreground">
               <p>
-                When a proposal reaches a score of <strong>+100</strong>, it
+                When a proposal reaches a score of <strong className="text-foreground">+100</strong>, it
                 automatically advances to the final voting stage.
               </p>
               <p className="mt-2 text-sm">
                 This ensures only proposals with genuine community support move
-                forward.
+                forward for implementation decisions.
               </p>
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="border-secondary/30 bg-card/80 backdrop-blur">
             <CardHeader>
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-                  <span className="font-bold text-primary">2</span>
+                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-secondary to-secondary/60 flex items-center justify-center">
+                  <Vote className="h-5 w-5 text-secondary-foreground" />
                 </div>
                 <div>
-                  <Badge variant="outline" className="mb-1">
+                  <Badge variant="outline" className="mb-1 border-secondary/30">
                     Stage 2
                   </Badge>
-                  <CardTitle>Pass/Fail</CardTitle>
+                  <CardTitle>Pass/Fail Vote</CardTitle>
                 </div>
               </div>
             </CardHeader>
             <CardContent className="text-muted-foreground">
               <ul className="space-y-2">
                 <li className="flex items-start gap-2">
-                  <Vote className="h-4 w-4 mt-1 shrink-0" />
+                  <Vote className="h-4 w-4 mt-1 shrink-0 text-secondary" />
                   <span>Yes / No / Abstain voting</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Users className="h-4 w-4 mt-1 shrink-0" />
+                  <Users className="h-4 w-4 mt-1 shrink-0 text-secondary" />
                   <span>One member = one vote</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Clock className="h-4 w-4 mt-1 shrink-0" />
+                  <Clock className="h-4 w-4 mt-1 shrink-0 text-secondary" />
                   <span>7-day voting period</span>
                 </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 mt-1 shrink-0 text-secondary" />
+                  <span>Majority decides implementation</span>
+                </li>
               </ul>
             </CardContent>
           </Card>
@@ -291,14 +309,15 @@ export default async function HomePage() {
       {/* Features */}
       <section className="py-8">
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4">Built for Fair Governance</h2>
+          <h2 className="text-3xl font-bold mb-4">Built for Fair Prioritization</h2>
+          <p className="text-muted-foreground">Everything you need for democratic backlog management</p>
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <Card>
+          <Card className="border-primary/20 hover:border-primary/40 transition-colors">
             <CardContent className="pt-6 text-center">
-              <div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-3">
-                <Coins className="h-6 w-6 text-green-500" />
+              <div className="h-12 w-12 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center mx-auto mb-3">
+                <Coins className="h-6 w-6 text-white" />
               </div>
               <h3 className="font-semibold mb-1">Earn Credits Daily</h3>
               <p className="text-sm text-muted-foreground">
@@ -307,10 +326,10 @@ export default async function HomePage() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="border-primary/20 hover:border-primary/40 transition-colors">
             <CardContent className="pt-6 text-center">
-              <div className="h-12 w-12 rounded-full bg-blue-500/10 flex items-center justify-center mx-auto mb-3">
-                <Clock className="h-6 w-6 text-blue-500" />
+              <div className="h-12 w-12 rounded-full bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center mx-auto mb-3">
+                <Clock className="h-6 w-6 text-white" />
               </div>
               <h3 className="font-semibold mb-1">Vote Decay</h3>
               <p className="text-sm text-muted-foreground">
@@ -319,10 +338,10 @@ export default async function HomePage() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="border-primary/20 hover:border-primary/40 transition-colors">
             <CardContent className="pt-6 text-center">
-              <div className="h-12 w-12 rounded-full bg-purple-500/10 flex items-center justify-center mx-auto mb-3">
-                <Shield className="h-6 w-6 text-purple-500" />
+              <div className="h-12 w-12 rounded-full bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center mx-auto mb-3">
+                <Shield className="h-6 w-6 text-white" />
               </div>
               <h3 className="font-semibold mb-1">Sybil Resistant</h3>
               <p className="text-sm text-muted-foreground">
@@ -331,10 +350,10 @@ export default async function HomePage() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="border-primary/20 hover:border-primary/40 transition-colors">
             <CardContent className="pt-6 text-center">
-              <div className="h-12 w-12 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-3">
-                <Zap className="h-6 w-6 text-orange-500" />
+              <div className="h-12 w-12 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center mx-auto mb-3">
+                <Zap className="h-6 w-6 text-white" />
               </div>
               <h3 className="font-semibold mb-1">Auto Promotion</h3>
               <p className="text-sm text-muted-foreground">
@@ -349,27 +368,27 @@ export default async function HomePage() {
       {(rankingCount > 0 || userCount > 1) && (
         <section className="py-8">
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <Card>
+            <Card className="bg-gradient-to-br from-primary/10 to-transparent border-primary/20">
               <CardContent className="pt-6 text-center">
-                <div className="text-3xl font-bold">{userCount}</div>
+                <div className="text-3xl font-bold text-primary">{userCount}</div>
                 <p className="text-sm text-muted-foreground">Members</p>
               </CardContent>
             </Card>
-            <Card>
+            <Card className="bg-gradient-to-br from-accent/10 to-transparent border-accent/20">
               <CardContent className="pt-6 text-center">
-                <div className="text-3xl font-bold">{rankingCount}</div>
+                <div className="text-3xl font-bold text-accent">{rankingCount}</div>
                 <p className="text-sm text-muted-foreground">Being Ranked</p>
               </CardContent>
             </Card>
-            <Card>
+            <Card className="bg-gradient-to-br from-secondary/10 to-transparent border-secondary/20">
               <CardContent className="pt-6 text-center">
-                <div className="text-3xl font-bold">{votingCount}</div>
+                <div className="text-3xl font-bold text-secondary">{votingCount}</div>
                 <p className="text-sm text-muted-foreground">In Voting</p>
               </CardContent>
             </Card>
-            <Card>
+            <Card className="bg-gradient-to-br from-green-500/10 to-transparent border-green-500/20">
               <CardContent className="pt-6 text-center">
-                <div className="text-3xl font-bold">{passedCount}</div>
+                <div className="text-3xl font-bold text-green-600">{passedCount}</div>
                 <p className="text-sm text-muted-foreground">Passed</p>
               </CardContent>
             </Card>
@@ -382,7 +401,7 @@ export default async function HomePage() {
         <section className="py-8">
           <div className="flex items-center justify-between mb-6">
             <h2 className="text-2xl font-bold">Active Proposals</h2>
-            <Button asChild variant="ghost">
+            <Button asChild variant="ghost" className="text-primary hover:text-primary/80">
               <Link href="/proposals">
                 View All <ArrowRight className="ml-2 h-4 w-4" />
               </Link>
@@ -398,22 +417,25 @@ export default async function HomePage() {
 
       {/* CTA */}
       <section className="py-12">
-        <Card className="border-2 border-primary/50 bg-gradient-to-br from-primary/5 to-primary/10">
-          <CardContent className="py-12 text-center space-y-6">
-            <h2 className="text-3xl font-bold">Ready to give it a try?</h2>
+        <Card className="border-2 border-primary/30 bg-gradient-to-br from-primary/10 via-accent/5 to-secondary/10 overflow-hidden relative">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
+          <div className="absolute bottom-0 left-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl" />
+          <CardContent className="py-12 text-center space-y-6 relative">
+            <Badge className="bg-primary/10 text-primary border-primary/20">Join the rSpace Ecosystem</Badge>
+            <h2 className="text-3xl font-bold">Ready to prioritize democratically?</h2>
             <p className="text-lg text-muted-foreground max-w-xl mx-auto">
-              Experience quadratic voting firsthand. Try the interactive demo or
-              create an account to start participating in community governance.
+              Experience quadratic ranking firsthand. Try the interactive demo or
+              create an account to start building your community&apos;s backlog together.
             </p>
             <div className="flex flex-col sm:flex-row justify-center gap-4">
-              <Button asChild size="lg" className="text-lg px-8">
+              <Button asChild size="lg" className="text-lg px-8 bg-gradient-to-r from-primary to-accent hover:opacity-90">
                 <Link href="/demo">
                   <Play className="mr-2 h-5 w-5" />
                   Interactive Demo
                 </Link>
               </Button>
               {!session?.user && (
-                <Button asChild variant="outline" size="lg" className="text-lg px-8">
+                <Button asChild variant="outline" size="lg" className="text-lg px-8 border-primary/30 hover:bg-primary/5">
                   <Link href="/auth/signup">
                     Create Free Account
                     <ArrowRight className="ml-2 h-5 w-5" />