diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 5aa051e1a..877b98d65 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
 
 @import 'tailwindcss';
 
@@ -54,18 +54,23 @@
   --color-sidebar-border: hsl(var(--sidebar-border));
   --color-sidebar-ring: hsl(var(--sidebar-ring));
 
-  /* Discord blurple accent palette */
+  /* Neon Lucky brand palette (neon pink/orange) */
+  --color-lucky-neon-pink: #ec4899;
+  --color-lucky-neon-orange: #fb923c;
+  --color-lucky-neon-purple: #8b5cf6;
+
+  /* Discord blurple accent palette (legacy) */
   --color-lucky-blurple-700: #4752c4;
   --color-lucky-blurple-600: #5865f2;
   --color-lucky-blurple-500: #6d7af4;
   --color-lucky-blurple-400: #8891f6;
   --color-lucky-blurple-200: #c0c5fb;
 
-  /* Semantic brand tokens (for bg-lucky-brand, text-lucky-brand, etc.) */
-  --color-lucky-brand: #5865f2;
-  --color-lucky-brand-strong: #4752c4;
-  --color-lucky-accent: #5865f2;
-  --color-lucky-accent-soft: #6d7af4;
+  /* Semantic brand tokens (now using neon pink) */
+  --color-lucky-brand: #ec4899;
+  --color-lucky-brand-strong: #db2777;
+  --color-lucky-accent: #fb923c;
+  --color-lucky-accent-soft: #fdba74;
 
   /* Status colors */
   --color-lucky-success: #23a55a;
@@ -118,8 +123,8 @@
   --color-lucky-blue: #5865f2;
   --color-lucky-purple: #5865f2;
 
-  --font-lucky-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
-  --font-lucky-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-lucky-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
+  --font-lucky-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
   --font-lucky-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
   --font-sans: var(--font-lucky-body);
@@ -372,8 +377,8 @@
     --lucky-warning: var(--color-lucky-warning);
     --lucky-info: var(--color-lucky-info);
 
-    --lucky-gradient-brand: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
-    --lucky-gradient-brand-soft: linear-gradient(135deg, rgb(88 101 242 / 0.15) 0%, rgb(71 82 196 / 0.05) 100%);
+    --lucky-gradient-brand: linear-gradient(135deg, #ec4899 0%, #fb923c 100%);
+    --lucky-gradient-brand-soft: linear-gradient(135deg, rgb(236 72 153 / 0.15) 0%, rgb(251 146 60 / 0.05) 100%);
 
     --lucky-red: var(--lucky-brand);
     --lucky-bg-primary: var(--lucky-surface-canvas);
diff --git a/packages/frontend/src/pages/Landing.test.tsx b/packages/frontend/src/pages/Landing.test.tsx
index b0299409c..a525f043b 100644
--- a/packages/frontend/src/pages/Landing.test.tsx
+++ b/packages/frontend/src/pages/Landing.test.tsx
@@ -1,5 +1,5 @@
 import { describe, test, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Landing from './Landing'
 import { useAuthStore } from '@/stores/authStore'
@@ -9,7 +9,21 @@ import { api } from '@/services/api'
 
 vi.mock('@/stores/authStore')
 vi.mock('@/hooks/usePageMetadata')
-vi.mock('framer-motion')
+vi.mock('framer-motion', async () => {
+    const React = await import('react')
+    const passthrough = (tag: string) =>
+        React.forwardRef(({ children, ...props }: any, ref: any) =>
+            React.createElement(tag, { ...props, ref }, children),
+        )
+    return {
+        motion: new Proxy(
+            {},
+            { get: (_t, prop: string) => passthrough(prop) },
+        ),
+        AnimatePresence: ({ children }: any) => children,
+        useReducedMotion: vi.fn(() => false),
+    }
+})
 vi.mock('@/services/api')
 
 const mockLogin = vi.fn()
@@ -49,20 +63,27 @@ describe('Landing', () => {
 
         render(<Landing />)
 
-        const container = screen.getByText(/The all-in-one Discord bot for your community/i)
+        const container = screen.getByText(/All-in-one Discord bot/i)
             .closest('.lucky-shell')
 
         expect(container).toBeInTheDocument()
     })
 
-    test('renders hero section with headline and CTA buttons', () => {
+    test('renders hero section with logo, headline and CTA buttons', () => {
         render(<Landing />)
 
-        const headline = screen.getByRole('heading', {
-            name: /The all-in-one Discord bot for your community/i,
-        })
+        // Check for logo
+        const logo = screen.getByAltText('Lucky Bot')
+        expect(logo).toBeInTheDocument()
+
+        // Check for headline
+        const headline = screen.getByText(/All-in-one Discord bot/i)
         expect(headline).toBeInTheDocument()
 
+        const subheadline = screen.getByText(/for your community/i)
+        expect(subheadline).toBeInTheDocument()
+
+        // Check for CTA buttons
         const addToDiscordBtn = screen.getByRole('button', { name: /Add to Discord/i })
         const openDashboardBtn = screen.getByRole('button', { name: /Open Dashboard/i })
 
@@ -70,12 +91,12 @@ describe('Landing', () => {
         expect(openDashboardBtn).toBeInTheDocument()
     })
 
-    test('displays hero subtitle', () => {
+    test('displays hero subtitle with "Built for vibes" tagline', () => {
         render(<Landing />)
 
         expect(
             screen.getByText(
-                /Music, moderation, custom commands, auto-mod, and a full web dashboard./i
+                /Music, moderation, custom commands, auto-mod, and a full web dashboard\. Built for vibes\./i
             )
         ).toBeInTheDocument()
     })
@@ -97,7 +118,7 @@ describe('Landing', () => {
         })
     })
 
-    test('renders stats strip with live data', async () => {
+    test('renders stats strip with live data and icons', async () => {
         render(<Landing />)
 
         // Wait for the stats labels to be rendered
@@ -129,26 +150,32 @@ describe('Landing', () => {
         })
     })
 
-    test('FAQ accordion contains expandable details elements', () => {
+    test('FAQ items are expandable via button clicks', async () => {
         render(<Landing />)
 
-        const faqSection = screen.getByText(/Frequently Asked Questions/)
-        expect(faqSection).toBeInTheDocument()
+        const user = userEvent.setup()
 
+        // Get the first FAQ button
         const firstQuestion = screen.getByText('Is Lucky free?')
-        const detailsElement = firstQuestion.closest('details')
+        const firstButton = firstQuestion.closest('button')
 
-        expect(detailsElement).toBeInTheDocument()
-        expect(detailsElement).toHaveClass('rounded-lg', 'border', 'border-lucky-border')
+        expect(firstButton).toBeInTheDocument()
 
+        // Click to expand
+        await user.click(firstButton!)
+
+        // Answer should be visible
         const answer = screen.getByText('Yes, Lucky is completely free with no premium tier.')
         expect(answer).toBeInTheDocument()
     })
 
-    test('renders footer with all link sections', () => {
+    test('renders footer with logo and all link sections', () => {
         render(<Landing />)
 
-        expect(screen.getByText('Lucky')).toBeInTheDocument()
+        // Check for footer logo
+        const footerLogo = screen.getAllByAltText('Lucky').find(el => el.closest('footer'))
+        expect(footerLogo).toBeInTheDocument()
+
         expect(screen.getByText('Links')).toBeInTheDocument()
         expect(screen.getByText('Support')).toBeInTheDocument()
     })
@@ -177,18 +204,16 @@ describe('Landing', () => {
     })
 
     test('renders Add to Discord button with correct href when clicked', async () => {
+        const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
         render(<Landing />)
 
         const addToDiscordBtn = screen.getByRole('button', { name: /Add to Discord/i })
         expect(addToDiscordBtn).toBeInTheDocument()
 
-        vi.spyOn(window, 'open').mockReturnValue(null)
-
-        const user = userEvent.setup()
-        await user.click(addToDiscordBtn)
+        fireEvent.click(addToDiscordBtn)
 
         await waitFor(() => {
-            expect(window.open).toHaveBeenCalledWith(
+            expect(openSpy).toHaveBeenCalledWith(
                 expect.stringContaining('discord.com/oauth2/authorize'),
                 '_blank'
             )
@@ -199,9 +224,7 @@ describe('Landing', () => {
         render(<Landing />)
 
         const openDashboardBtn = screen.getByRole('button', { name: /Open Dashboard/i })
-
-        const user = userEvent.setup()
-        await user.click(openDashboardBtn)
+        fireEvent.click(openDashboardBtn)
 
         await waitFor(() => {
             expect(mockLogin).toHaveBeenCalled()
@@ -242,10 +265,24 @@ describe('Landing', () => {
     test('renders all footer columns with proper hierarchy', () => {
         render(<Landing />)
 
-        const footerText = screen.getByText('Discord bot with music, moderation, and more.')
+        const footerText = screen.getByText('Discord bot with music, moderation, and more. Built for vibes.')
         expect(footerText).toBeInTheDocument()
 
         const needHelpText = screen.getByText(/Need help\? Join our Discord community\./)
         expect(needHelpText).toBeInTheDocument()
     })
+
+    test('renders Powerful Features heading', () => {
+        render(<Landing />)
+
+        const featuresHeading = screen.getByRole('heading', { name: /Powerful Features/i })
+        expect(featuresHeading).toBeInTheDocument()
+    })
+
+    test('renders Frequently Asked Questions heading', () => {
+        render(<Landing />)
+
+        const faqHeading = screen.getByRole('heading', { name: /Frequently Asked Questions/i })
+        expect(faqHeading).toBeInTheDocument()
+    })
 })
diff --git a/packages/frontend/src/pages/Landing.tsx b/packages/frontend/src/pages/Landing.tsx
index 0455f2df1..573d8e86c 100644
--- a/packages/frontend/src/pages/Landing.tsx
+++ b/packages/frontend/src/pages/Landing.tsx
@@ -3,14 +3,15 @@ import { useAuthStore } from '@/stores/authStore'
 import { usePageMetadata } from '@/hooks/usePageMetadata'
 import { useCountUp } from '@/hooks/useCountUp'
 import Button from '@/components/ui/Button'
-import { useReducedMotion } from 'framer-motion'
+import { useReducedMotion, motion } from 'framer-motion'
 import { api } from '@/services/api'
+import { Music, Shield, Zap, BarChart3, Palette, Sparkles, ChevronDown, Server, Users, Radio } from 'lucide-react'
 
 const CLIENT_ID = '962198089161134131'
 const BOT_INVITE_URL = `https://discord.com/oauth2/authorize?client_id=${CLIENT_ID}&scope=bot%20applications.commands&permissions=8`
 
-const HERO_GRADIENT = 'bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-950'
-const HERO_GRADIENT_ANIMATED = `${HERO_GRADIENT} bg-[length:200%_200%] animate-[gradient_15s_ease_infinite]`
+// Neon glow backdrop gradients
+const NEON_BACKDROP = 'bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950'
 
 export default function Landing() {
     const login = useAuthStore((state) => state.login)
@@ -52,193 +53,368 @@ export default function Landing() {
         description: 'The all-in-one Discord bot for your community. Music, moderation, custom commands, auto-mod, and a full web dashboard. Free forever.',
     })
 
-    const containerClass = prefersReducedMotion ? HERO_GRADIENT : HERO_GRADIENT_ANIMATED
+    const logoAnimation = prefersReducedMotion
+        ? {}
+        : {
+              animate: { scale: [1, 1.03, 1] },
+              transition: { duration: 3, repeat: Infinity, ease: 'easeInOut' },
+          }
 
     return (
         <div className='lucky-shell min-h-screen dark text-white'>
-            {/* Hero */}
-            <section className={`min-h-screen flex items-center justify-center px-4 py-16 md:px-8 ${containerClass}`}>
-                <div className='mx-auto max-w-4xl text-center space-y-8'>
-                    <div>
-                        <h1 className='type-display text-5xl md:text-6xl font-bold mb-4 text-white'>
-                            The all-in-one Discord bot for your community
-                        </h1>
-                        <p className='type-body text-xl text-gray-300 max-w-2xl mx-auto'>
-                            Music, moderation, custom commands, auto-mod, and a full web dashboard. Free forever.
-                        </p>
-                    </div>
-
-                    <div className='flex flex-col sm:flex-row gap-4 justify-center'>
-                        <Button
-                            onClick={() => window.open(BOT_INVITE_URL, '_blank')}
-                            variant='primary'
-                            className='px-8 py-3 h-12 rounded-lg'
-                        >
-                            Add to Discord
-                        </Button>
-                        <Button
-                            onClick={login}
-                            variant='secondary'
-                            className='px-8 py-3 h-12 rounded-lg'
-                        >
-                            Open Dashboard
-                        </Button>
-                    </div>
+            {/* Hero Section with Neon Logo */}
+            <HeroSection logoAnimation={logoAnimation} onLogin={login} />
+
+            {/* Feature Grid */}
+            <FeatureSection />
+
+            {/* Stats Strip */}
+            <StatsSection statsLoading={statsLoading} guildCount={guildCount} userCount={userCount} serversOnline={stats?.serversOnline} />
+
+            {/* FAQ */}
+            <FAQSection />
+
+            {/* Footer */}
+            <FooterSection />
+        </div>
+    )
+}
+
+// Hero Section with Animated Logo
+function HeroSection({ logoAnimation, onLogin }: { logoAnimation: any; onLogin: () => void }) {
+    const prefersReducedMotion = useReducedMotion()
+
+    return (
+        <section className={`min-h-screen flex items-center justify-center relative px-4 py-16 md:px-8 ${NEON_BACKDROP}`}>
+            {/* Animated neon glow blobs */}
+            {!prefersReducedMotion && (
+                <>
+                    <div
+                        className='absolute top-20 left-10 w-96 h-96 rounded-full bg-pink-500/20 blur-3xl animate-pulse'
+                        style={{ animation: 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite' }}
+                    />
+                    <div
+                        className='absolute bottom-32 right-20 w-80 h-80 rounded-full bg-orange-500/15 blur-3xl animate-pulse'
+                        style={{ animation: 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite 1s' }}
+                    />
+                </>
+            )}
+
+            <motion.div className='relative mx-auto max-w-4xl text-center space-y-8 z-10' initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
+                {/* Logo */}
+                <motion.div {...logoAnimation} className='inline-block'>
+                    <img
+                        src='/lucky-logo.png'
+                        alt='Lucky Bot'
+                        className='h-32 w-32 mx-auto drop-shadow-2xl filter saturate-150'
+                        loading='lazy'
+                    />
+                </motion.div>
+
+                {/* Headline with gradient text */}
+                <div className='space-y-4'>
+                    <h1 className='text-5xl md:text-7xl font-bold leading-tight'>
+                        <span className='block text-white'>All-in-one Discord bot</span>
+                        <span className='block bg-gradient-to-r from-pink-500 to-orange-400 bg-clip-text text-transparent'>for your community</span>
+                    </h1>
+                    <p className='text-lg md:text-xl text-gray-300 max-w-2xl mx-auto font-light'>
+                        Music, moderation, custom commands, auto-mod, and a full web dashboard. Built for vibes.
+                    </p>
                 </div>
-            </section>
-
-            {/* Feature Grid (Phase 3) */}
-            <section className='bg-slate-900 px-4 py-20 md:px-8'>
-                <div className='mx-auto max-w-6xl space-y-12'>
-                    <div className='text-center'>
-                        <h2 className='type-h1 text-4xl font-bold mb-4'>Powerful Features</h2>
-                        <p className='type-body text-gray-300 text-lg'>Everything you need to manage your Discord server</p>
-                    </div>
-
-                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
-                        {/* Music */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>🎵</div>
-                            <h3 className='type-h3 font-semibold'>Music</h3>
-                            <p className='type-body-sm text-gray-300'>Spotify-powered autoplay with genre matching</p>
-                        </div>
 
-                        {/* Auto-mod */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>🛡️</div>
-                            <h3 className='type-h3 font-semibold'>Auto-mod</h3>
-                            <p className='type-body-sm text-gray-300'>Spam/caps/link filters with per-guild rules</p>
-                        </div>
+                {/* CTA Buttons */}
+                <motion.div
+                    className='flex flex-col sm:flex-row gap-4 justify-center pt-4'
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 0.4, duration: 0.6 }}
+                >
+                    <Button
+                        onClick={() => window.open(BOT_INVITE_URL, '_blank')}
+                        variant='primary'
+                        className='px-8 py-3 h-12 rounded-lg bg-gradient-to-r from-pink-500 to-orange-400 text-white font-semibold hover:shadow-lg hover:shadow-pink-500/50 transition-all duration-300 border-0'
+                    >
+                        Add to Discord
+                    </Button>
+                    <Button
+                        onClick={onLogin}
+                        variant='secondary'
+                        className='px-8 py-3 h-12 rounded-lg border-2 border-pink-500/50 text-white hover:bg-pink-500/10 hover:border-pink-500 transition-all duration-300'
+                    >
+                        Open Dashboard
+                    </Button>
+                </motion.div>
+            </motion.div>
+        </section>
+    )
+}
 
-                        {/* Custom Commands */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>⚙️</div>
-                            <h3 className='type-h3 font-semibold'>Custom Commands</h3>
-                            <p className='type-body-sm text-gray-300'>User-defined responses with variable interpolation</p>
-                        </div>
+// Feature Grid with Neon Icon Orbs
+function FeatureSection() {
+    const prefersReducedMotion = useReducedMotion()
 
-                        {/* Web Dashboard */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>📊</div>
-                            <h3 className='type-h3 font-semibold'>Web Dashboard</h3>
-                            <p className='type-body-sm text-gray-300'>Full control from your browser</p>
-                        </div>
+    const features = [
+        {
+            icon: Music,
+            title: 'Music',
+            desc: 'Spotify-powered autoplay with genre matching',
+            color: 'from-pink-500/20 to-pink-600/10',
+            iconColor: 'text-pink-400',
+        },
+        {
+            icon: Shield,
+            title: 'Auto-mod',
+            desc: 'Spam/caps/link filters with per-guild rules',
+            color: 'from-orange-500/20 to-orange-600/10',
+            iconColor: 'text-orange-400',
+        },
+        {
+            icon: Zap,
+            title: 'Custom Commands',
+            desc: 'User-defined responses with variable interpolation',
+            color: 'from-purple-500/20 to-purple-600/10',
+            iconColor: 'text-purple-400',
+        },
+        {
+            icon: BarChart3,
+            title: 'Web Dashboard',
+            desc: 'Full control from your browser',
+            color: 'from-blue-500/20 to-blue-600/10',
+            iconColor: 'text-blue-400',
+        },
+        {
+            icon: Palette,
+            title: 'Embed Builder',
+            desc: 'Rich embeds without JSON',
+            color: 'from-cyan-500/20 to-cyan-600/10',
+            iconColor: 'text-cyan-400',
+        },
+        {
+            icon: Sparkles,
+            title: 'Artist Preferences',
+            desc: 'Tailor autoplay to your taste',
+            color: 'from-amber-500/20 to-amber-600/10',
+            iconColor: 'text-amber-400',
+        },
+    ]
 
-                        {/* Embed Builder */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>🎨</div>
-                            <h3 className='type-h3 font-semibold'>Embed Builder</h3>
-                            <p className='type-body-sm text-gray-300'>Rich embeds without JSON</p>
-                        </div>
+    return (
+        <section className='bg-gradient-to-b from-slate-900 to-slate-950 px-4 py-20 md:px-8 relative overflow-hidden'>
+            {/* Subtle grid pattern background */}
+            <div className='absolute inset-0 opacity-5 pointer-events-none' style={{
+                backgroundImage: 'linear-gradient(0deg, transparent 24%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 26%, transparent 27%, transparent 74%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 26%, transparent 27%, transparent 74%, rgba(255,255,255,.1) 75%, rgba(255,255,255,.1) 76%, transparent 77%, transparent)',
+                backgroundSize: '50px 50px'
+            }} />
 
-                        {/* Artist Preferences */}
-                        <div className='rounded-lg border border-lucky-border bg-slate-800/50 p-6 space-y-3 hover:bg-slate-800 transition-colors'>
-                            <div className='text-4xl'>⭐</div>
-                            <h3 className='type-h3 font-semibold'>Artist Preferences</h3>
-                            <p className='type-body-sm text-gray-300'>Tailor autoplay to your taste</p>
-                        </div>
-                    </div>
+            <div className='relative mx-auto max-w-6xl space-y-12'>
+                <motion.div className='text-center' initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} viewport={{ once: true }}>
+                    <h2 className='text-4xl md:text-5xl font-bold mb-4'>Powerful Features</h2>
+                    <p className='text-gray-300 text-lg'>Everything you need to manage your Discord server</p>
+                </motion.div>
+
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
+                    {features.map((feature, idx) => {
+                        const Icon = feature.icon
+                        return (
+                            <motion.div
+                                key={idx}
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                transition={{ duration: 0.5, delay: idx * 0.1 }}
+                                viewport={{ once: true }}
+                                whileHover={prefersReducedMotion ? {} : { y: -4 }}
+                                className={`rounded-xl border border-white/10 bg-gradient-to-br ${feature.color} backdrop-blur-sm p-6 space-y-4 hover:border-white/20 transition-all duration-300 group cursor-pointer`}
+                            >
+                                <div className={`inline-flex p-3 rounded-lg bg-white/5 group-hover:bg-white/10 transition-colors ${feature.iconColor}`}>
+                                    <Icon size={24} />
+                                </div>
+                                <div>
+                                    <h3 className='text-xl font-semibold text-white mb-2'>{feature.title}</h3>
+                                    <p className='text-gray-300 text-sm'>{feature.desc}</p>
+                                </div>
+                            </motion.div>
+                        )
+                    })}
                 </div>
-            </section>
-
-            {/* Stats Strip (Phase 4 - Live Data) */}
-            <section className='bg-indigo-950 px-4 py-16 md:px-8'>
-                <div className='mx-auto max-w-6xl'>
-                    <div className='grid grid-cols-1 md:grid-cols-3 gap-8 text-center'>
-                        <div>
-                            <p className='text-4xl font-bold text-indigo-300 mb-2'>
-                                {statsLoading ? '---' : `${guildCount.toLocaleString()}${stats?.totalGuilds ? '+' : ''}`}
-                            </p>
-                            <p className='text-gray-300'>Servers</p>
-                        </div>
-                        <div>
-                            <p className='text-4xl font-bold text-indigo-300 mb-2'>
-                                {statsLoading ? '---' : `${userCount.toLocaleString()}+`}
-                            </p>
-                            <p className='text-gray-300'>Users</p>
-                        </div>
-                        <div>
-                            <p className='text-4xl font-bold text-indigo-300 mb-2'>
-                                {stats?.serversOnline ? '✓ Online' : statsLoading ? '---' : '✗ Offline'}
-                            </p>
-                            <p className='text-gray-300'>Status</p>
-                        </div>
-                    </div>
+            </div>
+        </section>
+    )
+}
+
+// Stats Strip with Neon Numbers
+function StatsSection({ statsLoading, guildCount, userCount, serversOnline }: any) {
+    const stats = [
+        {
+            label: 'Servers',
+            value: statsLoading ? '---' : `${guildCount.toLocaleString()}${guildCount > 0 ? '+' : ''}`,
+            icon: Server,
+        },
+        {
+            label: 'Users',
+            value: statsLoading ? '---' : `${userCount.toLocaleString()}+`,
+            icon: Users,
+        },
+        {
+            label: 'Status',
+            value: serversOnline ? '✓ Online' : statsLoading ? '---' : '✗ Offline',
+            icon: Radio,
+            isStatus: true,
+        },
+    ]
+
+    return (
+        <section className='bg-gradient-to-r from-slate-950 via-purple-950/30 to-slate-950 px-4 py-16 md:px-8 border-y border-white/10 relative'>
+            <div className='mx-auto max-w-6xl'>
+                <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
+                    {stats.map((stat, idx) => {
+                        const Icon = stat.icon
+                        return (
+                            <motion.div
+                                key={idx}
+                                initial={{ opacity: 0, scale: 0.9 }}
+                                whileInView={{ opacity: 1, scale: 1 }}
+                                transition={{ duration: 0.5, delay: idx * 0.15 }}
+                                viewport={{ once: true }}
+                                className='text-center group'
+                            >
+                                <div className='inline-flex p-3 rounded-lg bg-white/5 group-hover:bg-white/10 mb-4 text-pink-400 transition-colors'>
+                                    <Icon size={20} />
+                                </div>
+                                <motion.p
+                                    className='font-mono text-3xl md:text-4xl font-bold bg-gradient-to-r from-pink-400 to-orange-400 bg-clip-text text-transparent mb-2'
+                                    initial={{ opacity: 0 }}
+                                    whileInView={{ opacity: 1 }}
+                                    transition={{ delay: idx * 0.15 + 0.2 }}
+                                    viewport={{ once: true }}
+                                >
+                                    {stat.value}
+                                </motion.p>
+                                <p className='text-gray-300 text-sm uppercase tracking-wider'>{stat.label}</p>
+                            </motion.div>
+                        )
+                    })}
                 </div>
-            </section>
-
-            {/* FAQ (Phase 5) */}
-            <section className='bg-slate-900 px-4 py-20 md:px-8'>
-                <div className='mx-auto max-w-3xl space-y-8'>
-                    <div className='text-center mb-12'>
-                        <h2 className='type-h1 text-4xl font-bold mb-2'>Frequently Asked Questions</h2>
-                    </div>
-
-                    <div className='space-y-4'>
-                        {[
-                            {
-                                q: 'Is Lucky free?',
-                                a: 'Yes, Lucky is completely free with no premium tier.',
-                            },
-                            {
-                                q: 'What commands does Lucky support?',
-                                a: 'Lucky supports 100+ commands across music, moderation, custom commands, and more.',
-                            },
-                            {
-                                q: 'How does autoplay work?',
-                                a: 'Autoplay uses Spotify to match similar songs based on artist preferences you set.',
-                            },
-                            {
-                                q: 'Can I self-host Lucky?',
-                                a: 'Lucky is hosted and managed by us. You cannot self-host the bot, but you can use the dashboard to configure it.',
-                            },
-                            {
-                                q: 'How do I moderate spam?',
-                                a: 'Configure auto-mod rules for spam, caps, links, and more in the dashboard.',
-                            },
-                            {
-                                q: 'Where do I get support?',
-                                a: 'Join our Discord support server or open an issue on GitHub.',
-                            },
-                        ].map(({ q, a }, idx) => (
-                            <details key={idx} className='rounded-lg border border-lucky-border bg-slate-800/50 p-4 cursor-pointer group'>
-                                <summary className='font-semibold flex items-center justify-between text-white'>
-                                    {q}
-                                    <span className='ml-2 text-indigo-400 group-open:rotate-180 transition-transform'>▼</span>
-                                </summary>
-                                <p className='mt-3 text-gray-300 text-sm'>{a}</p>
-                            </details>
-                        ))}
-                    </div>
+            </div>
+        </section>
+    )
+}
+
+// FAQ Section with Smooth Accordions
+function FAQSection() {
+    const [openIdx, setOpenIdx] = useState<number | null>(null)
+
+    const faqs = [
+        {
+            q: 'Is Lucky free?',
+            a: 'Yes, Lucky is completely free with no premium tier.',
+        },
+        {
+            q: 'What commands does Lucky support?',
+            a: 'Lucky supports 100+ commands across music, moderation, custom commands, and more.',
+        },
+        {
+            q: 'How does autoplay work?',
+            a: 'Autoplay uses Spotify to match similar songs based on artist preferences you set.',
+        },
+        {
+            q: 'Can I self-host Lucky?',
+            a: 'Lucky is hosted and managed by us. You cannot self-host the bot, but you can use the dashboard to configure it.',
+        },
+        {
+            q: 'How do I moderate spam?',
+            a: 'Configure auto-mod rules for spam, caps, links, and more in the dashboard.',
+        },
+        {
+            q: 'Where do I get support?',
+            a: 'Join our Discord support server or open an issue on GitHub.',
+        },
+    ]
+
+    return (
+        <section className='bg-gradient-to-b from-slate-950 to-slate-900 px-4 py-20 md:px-8'>
+            <div className='mx-auto max-w-3xl space-y-8'>
+                <motion.div className='text-center mb-12' initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} viewport={{ once: true }}>
+                    <h2 className='text-4xl md:text-5xl font-bold mb-2'>Frequently Asked Questions</h2>
+                </motion.div>
+
+                <div className='space-y-3'>
+                    {faqs.map(({ q, a }, idx) => (
+                        <motion.div
+                            key={idx}
+                            initial={{ opacity: 0, y: 10 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.4, delay: idx * 0.05 }}
+                            viewport={{ once: true }}
+                            className='rounded-lg border border-white/10 bg-white/5 backdrop-blur-sm overflow-hidden hover:border-pink-500/30 transition-all duration-300'
+                        >
+                            <button
+                                onClick={() => setOpenIdx(openIdx === idx ? null : idx)}
+                                className='w-full px-6 py-4 flex items-center justify-between text-left hover:bg-white/5 transition-colors duration-200'
+                            >
+                                <span className='font-semibold text-white'>{q}</span>
+                                <motion.div
+                                    animate={{ rotate: openIdx === idx ? 180 : 0 }}
+                                    transition={{ duration: 0.3 }}
+                                    className='text-pink-400 flex-shrink-0'
+                                >
+                                    <ChevronDown size={20} />
+                                </motion.div>
+                            </button>
+                            <motion.div
+                                initial={false}
+                                animate={{
+                                    height: openIdx === idx ? 'auto' : 0,
+                                    opacity: openIdx === idx ? 1 : 0,
+                                }}
+                                transition={{ duration: 0.3 }}
+                                className='overflow-hidden'
+                            >
+                                <p className='px-6 py-4 text-gray-300 text-sm border-t border-white/10'>{a}</p>
+                            </motion.div>
+                        </motion.div>
+                    ))}
                 </div>
-            </section>
-
-            {/* Footer (Phase 5) */}
-            <footer className='bg-slate-950 border-t border-lucky-border px-4 py-12 md:px-8'>
-                <div className='mx-auto max-w-6xl'>
-                    <div className='grid grid-cols-1 md:grid-cols-3 gap-8 mb-8'>
-                        <div>
-                            <h4 className='font-semibold mb-4'>Lucky</h4>
-                            <p className='text-sm text-gray-400'>Discord bot with music, moderation, and more.</p>
-                        </div>
-                        <div>
-                            <h4 className='font-semibold mb-4'>Links</h4>
-                            <nav className='space-y-2'>
-                                <a href='/terms' className='text-sm text-gray-400 hover:text-gray-200 block'>Terms of Service</a>
-                                <a href='/privacy' className='text-sm text-gray-400 hover:text-gray-200 block'>Privacy Policy</a>
-                                <a href='https://github.com/LucasSantana-Dev/Lucky' target='_blank' rel='noreferrer' className='text-sm text-gray-400 hover:text-gray-200 block'>GitHub</a>
-                            </nav>
-                        </div>
-                        <div>
-                            <h4 className='font-semibold mb-4'>Support</h4>
-                            <p className='text-sm text-gray-400'>Need help? Join our Discord community.</p>
+            </div>
+        </section>
+    )
+}
+
+// Footer with Logo Tile
+function FooterSection() {
+    return (
+        <footer className='bg-slate-950 border-t border-white/10 px-4 py-12 md:px-8'>
+            <div className='mx-auto max-w-6xl'>
+                <div className='grid grid-cols-1 md:grid-cols-3 gap-8 mb-8'>
+                    <motion.div initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} viewport={{ once: true }} className='space-y-3'>
+                        <div className='flex items-center gap-3'>
+                            <img src='/lucky-logo.png' alt='Lucky' className='h-8 w-8' loading='lazy' />
+                            <h4 className='font-semibold text-lg'>Lucky</h4>
                         </div>
-                    </div>
-                    <div className='text-center pt-8 border-t border-lucky-border'>
-                        <p className='text-xs text-gray-500'>© 2026 Lucky. All rights reserved.</p>
-                    </div>
+                        <p className='text-sm text-gray-400'>Discord bot with music, moderation, and more. Built for vibes.</p>
+                    </motion.div>
+                    <motion.div initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.1 }} viewport={{ once: true }}>
+                        <h4 className='font-semibold mb-4'>Links</h4>
+                        <nav className='space-y-2'>
+                            <a href='/terms' className='text-sm text-gray-400 hover:text-pink-400 transition-colors block'>
+                                Terms of Service
+                            </a>
+                            <a href='/privacy' className='text-sm text-gray-400 hover:text-pink-400 transition-colors block'>
+                                Privacy Policy
+                            </a>
+                            <a href='https://github.com/LucasSantana-Dev/Lucky' target='_blank' rel='noreferrer' className='text-sm text-gray-400 hover:text-pink-400 transition-colors block'>
+                                GitHub
+                            </a>
+                        </nav>
+                    </motion.div>
+                    <motion.div initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
+                        <h4 className='font-semibold mb-4'>Support</h4>
+                        <p className='text-sm text-gray-400'>Need help? Join our Discord community.</p>
+                    </motion.div>
                 </div>
-            </footer>
-        </div>
+                <motion.div className='text-center pt-8 border-t border-white/10' initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 0.5, delay: 0.3 }} viewport={{ once: true }}>
+                    <p className='text-xs text-gray-500'>© 2026 Lucky. All rights reserved.</p>
+                </motion.div>
+            </div>
+        </footer>
     )
 }