diff --git a/src/App.tsx b/src/App.tsx
index 8eafb448..d9ae67ea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ function App() {
 
         {!isFullscreen && <Navbar />}
 
-        <main className={`flex justify-center items-center ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
+        <main className={`${isFullscreen ? "flex flex-1 justify-center items-center" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
           <Router />
         </main>
 
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 8125cb42..5300ba97 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -1,92 +1,240 @@
+import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion';
 import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react';
+import { useRef, useState } from 'react';
 
-const Features = () => {
-  const features = [
-    {
-      icon: BarChart3,
-      title: 'Activity Analytics',
-      description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
-      bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600',
-      hoverColor: 'hover:bg-blue-400/50 dark:hover:bg-blue-900/30',
-      borderColor: 'hover:border-blue-200 dark:hover:border-blue-700'
-    },
-    {
-      icon: Users,
-      title: 'Multi-User Tracking',
-      description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
-      bgColor: 'bg-green-100',
-      iconColor: 'text-green-600',
-      hoverColor: 'hover:bg-green-400/50 dark:hover:bg-green-900/30',
-      borderColor: 'hover:border-green-200 dark:hover:border-green-700'
-    },
-    {
-      icon: Search,
-      title: 'Smart Search',
-      description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
-      bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600',
-      hoverColor: 'hover:bg-purple-400/50 dark:hover:bg-purple-900/30',
-      borderColor: 'hover:border-purple-200 dark:hover:border-purple-700'
-    },
-    {
-      icon: Zap,
-      title: 'Real-time Updates',
-      description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
-      bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600',
-      hoverColor: 'hover:bg-orange-400/50 dark:hover:bg-orange-900/30',
-      borderColor: 'hover:border-orange-200 dark:hover:border-orange-700'
-    },
-    {
-      icon: Shield,
-      title: 'Privacy First',
-      description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
-      bgColor: 'bg-red-100',
-      iconColor: 'text-red-600',
-      hoverColor: 'hover:bg-red-400/50 dark:hover:bg-red-900/30',
-      borderColor: 'hover:border-red-200 dark:hover:border-red-700'
-    },
-    {
-      icon: Globe,
-      title: 'Export & Share',
-      description: 'Export activity reports and share insights with your team through various formats and integrations.',
-      bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600',
-      hoverColor: 'hover:bg-indigo-400/50 dark:hover:bg-indigo-900/30',
-      borderColor: 'hover:border-indigo-200 dark:hover:border-indigo-700'
-    }
-  ];
+const features = [
+  {
+    icon: BarChart3,
+    title: 'Activity Analytics',
+    description: 'Comprehensive charts showing commit patterns, contribution streaks, and repository activity over time.',
+    iconBg: 'bg-blue-500/15 dark:bg-blue-500/20',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    glow: '59,130,246',
+    border: 'hover:border-blue-400/50 dark:hover:border-blue-500/50',
+  },
+  {
+    icon: Users,
+    title: 'Multi-User Tracking',
+    description: 'Monitor multiple GitHub users simultaneously and compare contribution patterns side by side.',
+    iconBg: 'bg-emerald-500/15 dark:bg-emerald-500/20',
+    iconColor: 'text-emerald-600 dark:text-emerald-400',
+    glow: '16,185,129',
+    border: 'hover:border-emerald-400/50 dark:hover:border-emerald-500/50',
+  },
+  {
+    icon: Search,
+    title: 'Smart Search',
+    description: 'Intelligent search with auto-suggestions to instantly find and add users to your dashboard.',
+    iconBg: 'bg-violet-500/15 dark:bg-violet-500/20',
+    iconColor: 'text-violet-600 dark:text-violet-400',
+    glow: '139,92,246',
+    border: 'hover:border-violet-400/50 dark:hover:border-violet-500/50',
+  },
+  {
+    icon: Zap,
+    title: 'Real-time Updates',
+    description: 'Instant notifications when tracked users push commits, open PRs, or create repositories.',
+    iconBg: 'bg-amber-500/15 dark:bg-amber-500/20',
+    iconColor: 'text-amber-600 dark:text-amber-400',
+    glow: '245,158,11',
+    border: 'hover:border-amber-400/50 dark:hover:border-amber-500/50',
+  },
+  {
+    icon: Shield,
+    title: 'Privacy First',
+    description: 'Public GitHub APIs only. Zero personal data stored, no authentication required from users.',
+    iconBg: 'bg-rose-500/15 dark:bg-rose-500/20',
+    iconColor: 'text-rose-600 dark:text-rose-400',
+    glow: '244,63,94',
+    border: 'hover:border-rose-400/50 dark:hover:border-rose-500/50',
+  },
+  {
+    icon: Globe,
+    title: 'Export & Share',
+    description: 'Export activity reports and share insights with your team through various formats and integrations.',
+    iconBg: 'bg-cyan-500/15 dark:bg-cyan-500/20',
+    iconColor: 'text-cyan-600 dark:text-cyan-400',
+    glow: '6,182,212',
+    border: 'hover:border-cyan-400/50 dark:hover:border-cyan-500/50',
+  },
+];
+
+const containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08 } },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 28, filter: 'blur(6px)' },
+  visible: {
+    opacity: 1,
+    y: 0,
+    filter: 'blur(0px)',
+    transition: { type: 'spring', stiffness: 70, damping: 18 },
+  },
+};
+
+const FeatureCard = ({ feature }: { feature: typeof features[0] }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [5, -5]), {
+    stiffness: 250,
+    damping: 28,
+  });
+  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-5, 5]), {
+    stiffness: 250,
+    damping: 28,
+  });
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    x.set((e.clientX - rect.left) / rect.width - 0.5);
+    y.set((e.clientY - rect.top) / rect.height - 0.5);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+    setHovered(false);
+  };
+
+  const Icon = feature.icon;
+
+  return (
+    <motion.div
+      variants={cardVariants}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={handleMouseLeave}
+      style={{ rotateX, rotateY, transformStyle: 'preserve-3d' }}
+      whileHover={{ y: -8, scale: 1.02 }}
+      transition={{ type: 'spring', stiffness: 280, damping: 22 }}
+      className={`group relative rounded-2xl border border-gray-200 dark:border-white/[0.08] ${feature.border}
+        bg-white dark:bg-white/[0.03] backdrop-blur-md
+        shadow-sm hover:shadow-2xl
+        transition-colors duration-300 cursor-default overflow-hidden`}
+    >
+      {/* Strong ambient glow on hover */}
+      <div
+        className="absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-400"
+        style={{
+          opacity: hovered ? 1 : 0,
+          background: `radial-gradient(ellipse at 50% 0%, rgba(${feature.glow},0.22) 0%, transparent 60%)`,
+        }}
+      />
 
+      {/* Bottom glow puddle */}
+      <div
+        className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-3/4 h-12 rounded-full pointer-events-none transition-opacity duration-400 blur-xl"
+        style={{
+          opacity: hovered ? 0.5 : 0,
+          background: `rgba(${feature.glow}, 0.35)`,
+        }}
+      />
+
+      {/* Top accent line */}
+      <div
+        className="absolute top-0 left-0 right-0 h-[2px] rounded-t-2xl pointer-events-none transition-opacity duration-300"
+        style={{
+          opacity: hovered ? 1 : 0,
+          background: `linear-gradient(90deg, transparent, rgba(${feature.glow},0.8), transparent)`,
+        }}
+      />
+
+      {/* Card content */}
+      <div className="relative z-10 p-7 min-h-[230px] flex flex-col">
+        {/* Icon */}
+        <motion.div
+          className={`${feature.iconBg} w-14 h-14 rounded-xl flex items-center justify-center mb-5`}
+          animate={
+            hovered
+              ? { rotate: 8, scale: 1.12 }
+              : { rotate: 0, scale: 1 }
+          }
+          transition={{ type: 'spring', stiffness: 350, damping: 16 }}
+        >
+          <Icon className={`h-6 w-6 ${feature.iconColor}`} />
+        </motion.div>
+
+        {/* Title */}
+        <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3 tracking-tight leading-snug">
+          {feature.title}
+        </h3>
+
+        {/* Description */}
+        <p className="text-base text-gray-500 dark:text-gray-400 leading-relaxed">
+          {feature.description}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+const Features = () => {
   return (
-    <section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
-      <div className="mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Everything you need to track, analyze, and understand GitHub activity patterns
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => {
-            const IconComponent = feature.icon;
-            return (
-              <div key={index} className={`group h-72 w-full bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl hover:shadow-blue-500/20 border dark:border-gray-800 transform hover:-translate-y-3 hover:scale-105 backdrop-blur-sm transition-all duration-300 ease-linear p-6`}>
-                <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110`}>
-                  <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
-                </div>
-                <h3 className="  text-2xl font-bold text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition-colors duration-300">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-base font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
-                  {feature.description}
-                </p>
-              </div>
-            );
-          })}
-        </div>
+    <section
+      id="features"
+      className="relative py-16 overflow-hidden transition-colors duration-300"
+    >
+      {/* Dot grid */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.03] dark:opacity-[0.07]"
+        style={{
+          backgroundImage:
+            'radial-gradient(circle, #94a3b8 1px, transparent 1px)',
+          backgroundSize: '28px 28px',
+        }}
+      />
+
+      {/* Ambient blobs */}
+      <div className="pointer-events-none absolute -top-48 -left-48 w-[500px] h-[500px] rounded-full bg-blue-400/10 dark:bg-blue-500/10 blur-[100px]" />
+      <div className="pointer-events-none absolute -bottom-48 -right-48 w-[500px] h-[500px] rounded-full bg-violet-400/10 dark:bg-violet-500/10 blur-[100px]" />
+      <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full bg-indigo-300/5 dark:bg-indigo-500/5 blur-[80px]" />
+
+      <div className="relative max-w-5xl mx-auto px-4">
+        {/* Header */}
+        <motion.div
+          className="text-center mb-14"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.55, ease: 'easeOut' }}
+        >
+          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-5 tracking-tight">
+            Powerful Features
+          </h2>
+
+          {/* Premium pill subtitle — no eyebrow badge */}
+          <div className="inline-flex items-center gap-3 px-6 py-3 rounded-full border border-blue-200 dark:border-blue-500/20 bg-blue-50 dark:bg-blue-500/10 backdrop-blur-sm shadow-md shadow-gray-100 dark:shadow-none">
+            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
+            <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
+              Everything you need to track, analyze, and understand GitHub activity patterns
+            </p>
+            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
+          </div>
+        </motion.div>
+
+        {/* Cards grid */}
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 auto-rows-fr"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-50px' }}
+        >
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} feature={feature} />
+          ))}
+        </motion.div>
       </div>
     </section>
   );
 };
 
-export default Features;
+export default Features;
\ No newline at end of file
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index 86224f9d..5d23dbc5 100644
--- a/src/components/HowItWorks.tsx
+++ b/src/components/HowItWorks.tsx
@@ -1,111 +1,298 @@
-import { useContext } from 'react';
-import { ArrowDown, ArrowRight, BarChart3, Activity, Search } from 'lucide-react';
-import { ThemeContext } from '../context/ThemeContext';
-import type { ThemeContextType } from '../context/ThemeContext';
+import { motion } from 'framer-motion';
+import { Search, Activity, BarChart3 } from 'lucide-react';
 
-const HowItWorks = () => {
-  const themeContext = useContext(ThemeContext) as ThemeContextType | null;
-  const mode = themeContext?.mode ?? 'light';
-
-  const steps = [
-    {
-      number: 1,
-      title: 'Search Users',
-      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.',
-      icon: Search,
-    },
-    {
-      number: 2,
-      title: 'Monitor Activity',
-      description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.',
-      icon: Activity,
-    },
-    {
-      number: 3,
-      title: 'Analyze Insights',
-      description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.',
-      icon: BarChart3,
-    }
-  ];
-
-  const sectionBgClass = mode === 'dark'
-    ? 'bg-[#1e2130] text-white'
-    : 'bg-gradient-to-b from-gray-50 via-white to-slate-100 text-gray-900';
-  const cardSurfaceClass = mode === 'dark' ? 'bg-white/[0.04]' : 'bg-white';
-  const cardBorderClass = mode === 'dark' ? 'border-white/10' : 'border-gray-200';
-  const titleTextClass = mode === 'dark' ? 'text-white' : 'text-gray-900';
-  const bodyTextClass = mode === 'dark' ? 'text-gray-300' : 'text-gray-600';
-  const connectorBubbleClass = mode === 'dark'
-    ? 'rounded-full border border-blue-400/25 bg-[#1e2130] p-2 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.28)]'
-    : 'rounded-full border border-blue-200 bg-white p-2 text-blue-600 shadow-[0_0_18px_rgba(59,130,246,0.14)]';
-  const connectorLineClass = mode === 'dark'
-    ? 'how-it-works-flow-line'
-    : 'how-it-works-flow-line light';
+const steps = [
+  {
+    number: '01',
+    title: 'Search Users',
+    description: 'Enter GitHub usernames or search by name. Add them instantly to your tracking dashboard.',
+    icon: Search,
+    glow: '59,130,246',
+    gradientFrom: 'rgba(59,130,246,0.12)',
+    iconBg: 'bg-blue-500/10 dark:bg-blue-500/15',
+    iconColor: 'text-blue-600 dark:text-blue-400',
+    numberColor: 'text-blue-500',
+    numberShadow: '59,130,246',
+    numberBorder: 'rgba(59,130,246,0.25)',
+    numberBg: 'rgba(59,130,246,0.06)',
+    accentLine: 'rgba(59,130,246,0.7)',
+    hoverBorder: 'rgba(59,130,246,0.3)',
+    hoverShadow: '0 12px 40px rgba(59,130,246,0.10), 0 2px 12px rgba(59,130,246,0.06)',
+    arrowColor: '99,120,230',
+  },
+  {
+    number: '02',
+    title: 'Monitor Activity',
+    description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities.',
+    icon: Activity,
+    glow: '139,92,246',
+    gradientFrom: 'rgba(139,92,246,0.12)',
+    iconBg: 'bg-violet-500/10 dark:bg-violet-500/15',
+    iconColor: 'text-violet-600 dark:text-violet-400',
+    numberColor: 'text-violet-500',
+    numberShadow: '139,92,246',
+    numberBorder: 'rgba(139,92,246,0.25)',
+    numberBg: 'rgba(139,92,246,0.06)',
+    accentLine: 'rgba(139,92,246,0.7)',
+    hoverBorder: 'rgba(139,92,246,0.3)',
+    hoverShadow: '0 12px 40px rgba(139,92,246,0.10), 0 2px 12px rgba(139,92,246,0.06)',
+    arrowColor: '100,160,140',
+  },
+  {
+    number: '03',
+    title: 'Analyze Insights',
+    description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.',
+    icon: BarChart3,
+    glow: '16,185,129',
+    gradientFrom: 'rgba(16,185,129,0.12)',
+    iconBg: 'bg-emerald-500/10 dark:bg-emerald-500/15',
+    iconColor: 'text-emerald-600 dark:text-emerald-400',
+    numberColor: 'text-emerald-500',
+    numberShadow: '16,185,129',
+    numberBorder: 'rgba(16,185,129,0.25)',
+    numberBg: 'rgba(16,185,129,0.06)',
+    accentLine: 'rgba(16,185,129,0.7)',
+    hoverBorder: 'rgba(16,185,129,0.3)',
+    hoverShadow: '0 12px 40px rgba(16,185,129,0.10), 0 2px 12px rgba(16,185,129,0.06)',
+    arrowColor: null,
+  },
+];
+
+const containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.13 } },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 28, filter: 'blur(6px)' },
+  visible: {
+    opacity: 1,
+    y: 0,
+    filter: 'blur(0px)',
+    transition: { type: 'spring', stiffness: 65, damping: 18 },
+  },
+};
+
+// Arrow bubble shown between cards (no line, just the circle+arrow)
+const ArrowBubble = ({ color }) => (
+  <motion.div
+    className="flex-shrink-0 self-center"
+    initial={{ opacity: 0, scale: 0.7 }}
+    whileInView={{ opacity: 1, scale: 1 }}
+    viewport={{ once: true }}
+    transition={{ delay: 0.4, duration: 0.35, ease: 'easeOut' }}
+  >
+    <div
+      className="w-8 h-8 rounded-full flex items-center justify-center"
+      style={{
+        border: `1px solid rgba(${color}, 0.28)`,
+        background: 'rgba(255,255,255,0.9)',
+        boxShadow: `0 0 16px rgba(${color}, 0.18)`,
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+        <path
+          d="M2 6.5h9M8 3l3.5 3.5L8 10"
+          stroke={`rgba(${color},0.85)`}
+          strokeWidth="1.7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  </motion.div>
+);
+
+// Down arrow for mobile
+const DownArrowBubble = ({ color }) => (
+  <motion.div
+    className="flex justify-center my-1"
+    initial={{ opacity: 0, scale: 0.7 }}
+    whileInView={{ opacity: 1, scale: 1 }}
+    viewport={{ once: true }}
+    transition={{ delay: 0.35, duration: 0.3 }}
+  >
+    <div
+      className="w-8 h-8 rounded-full flex items-center justify-center"
+      style={{
+        border: `1px solid rgba(${color}, 0.28)`,
+        background: 'rgba(255,255,255,0.9)',
+        boxShadow: `0 0 16px rgba(${color}, 0.18)`,
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+        <path
+          d="M6.5 2v9M3 8l3.5 3.5L10 8"
+          stroke={`rgba(${color},0.85)`}
+          strokeWidth="1.7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  </motion.div>
+);
 
+const StepCard = ({ step, className = '' }) => {
+  const Icon = step.icon;
   return (
-    <section id="how-it-works" className={`relative overflow-hidden px-6 py-20 ${sectionBgClass}`}>
-      <div className="mx-auto max-w-7xl">
-        <div className="text-center mb-16">
-          <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${titleTextClass}`}>How It Works</h2>
-          <p className={`text-lg md:text-xl max-w-2xl mx-auto ${bodyTextClass}`}>
-            Get started in minutes with our simple three-step process
-          </p>
-        </div>
+    <motion.div
+      variants={cardVariants}
+      whileHover={{ y: -5, scale: 1.018 }}
+      transition={{ type: 'spring', stiffness: 260, damping: 22 }}
+      className={`group relative rounded-2xl border border-gray-300/70 dark:border-white/[0.14]
+        bg-white/90 dark:bg-white/[0.04] backdrop-blur-md
+        shadow-sm overflow-hidden cursor-default h-full
+        transition-all duration-300 ${className}`}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = step.hoverBorder;
+        e.currentTarget.style.boxShadow = step.hoverShadow;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = '';
+        e.currentTarget.style.boxShadow = '';
+      }}
+    >
+      {/* Subtle top accent line on hover */}
+      <div
+        className="absolute top-0 left-0 right-0 h-[2px] rounded-t-2xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+        style={{
+          background: `linear-gradient(90deg, transparent, ${step.accentLine}, transparent)`,
+        }}
+      />
 
-        <div className="relative">
-          <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block">
-            <div className="relative mx-auto h-10 max-w-6xl">
-              <span className={`${connectorLineClass} absolute left-16 right-16 top-1/2 -translate-y-1/2`} />
-              <span className={`absolute left-1/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}>
-                <ArrowRight className="h-4 w-4" />
-              </span>
-              <span className={`absolute left-2/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}>
-                <ArrowRight className="h-4 w-4" />
-              </span>
-            </div>
-          </div>
+      <div className="relative z-10 p-9 min-h-[270px] flex flex-col">
+        {/* Number badge + Icon row */}
+        <div className="flex items-start justify-between mb-7">
 
-          <div className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden">
-            <span className={connectorBubbleClass}>
-              <ArrowDown className="h-4 w-4" />
-            </span>
-            <span className={connectorBubbleClass}>
-              <ArrowDown className="h-4 w-4" />
+          {/* Number inside rounded square */}
+          <div
+            className="rounded-xl px-4 py-2 select-none"
+            style={{
+              border: `1px solid ${step.numberBorder}`,
+              background: step.numberBg,
+              boxShadow: `0 0 20px rgba(${step.numberShadow},0.12), inset 0 1px 0 rgba(255,255,255,0.6)`,
+            }}
+          >
+            <span
+              className={`text-5xl font-black leading-none ${step.numberColor}`}
+              style={{
+                textShadow: `0 0 24px rgba(${step.numberShadow},0.45)`,
+                opacity: 0.75,
+              }}
+            >
+              {step.number}
             </span>
-            <span className={`${connectorLineClass} vertical absolute left-1/2 top-0 h-full -translate-x-1/2`} />
           </div>
 
-          <div className="grid gap-8 md:grid-cols-3 md:gap-6 lg:gap-8">
-            {steps.map((step, index) => {
-              const IconComponent = step.icon;
-
-              return (
-                <article
-                  key={index}
-                  className={`group relative rounded-3xl border p-8 text-center backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/30 hover:shadow-[0_24px_60px_rgba(46,89,255,0.18)] ${cardBorderClass} ${cardSurfaceClass} ${mode === 'dark' ? 'hover:bg-white/[0.06]' : 'hover:bg-white'}`}
-                >
-                  <div className="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full border border-blue-400/20 bg-blue-500/10 shadow-[0_0_38px_rgba(46,89,255,0.35)] ring-1 ring-blue-400/15 transition-transform duration-300 group-hover:scale-105">
-                    <div className="flex h-16 w-16 items-center justify-center rounded-full border border-blue-300/25 bg-blue-500 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_24px_rgba(46,89,255,0.38)]">
-                      <span className="text-2xl font-bold leading-none">{step.number}</span>
-                    </div>
-                  </div>
-
-                  <div className={`mx-auto mb-5 flex h-11 w-11 items-center justify-center rounded-full border shadow-[0_0_18px_rgba(46,89,255,0.2)] ${mode === 'dark' ? 'border-white/10 bg-white/5 text-blue-300' : 'border-blue-100 bg-blue-50 text-blue-600'}`}>
-                    <IconComponent className="h-5 w-5" />
-                  </div>
-
-                  <h3 className={`text-xl font-semibold mb-3 ${titleTextClass}`}>{step.title}</h3>
-                  <p className={`text-sm md:text-base leading-relaxed ${bodyTextClass}`}>
-                    {step.description}
-                  </p>
-                </article>
-              );
-            })}
-          </div>
+          {/* Icon */}
+          <motion.div
+            className={`${step.iconBg} w-14 h-14 rounded-xl flex items-center justify-center`}
+            whileHover={{ rotate: 7, scale: 1.1 }}
+            transition={{ type: 'spring', stiffness: 350, damping: 16 }}
+          >
+            <Icon className={`h-6 w-6 ${step.iconColor}`} />
+          </motion.div>
         </div>
+
+        {/* Text */}
+        <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-3 tracking-tight leading-snug">
+          {step.title}
+        </h3>
+        <p className="text-base text-gray-500 dark:text-gray-400 leading-relaxed">
+          {step.description}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+const HowItWorks = () => {
+  return (
+    <section
+      id="how-it-works"
+      className="relative w-full py-20 overflow-hidden bg-gradient-to-b from-slate-50 via-white to-slate-100 dark:from-[#13151f] dark:via-[#171924] dark:to-[#13151f] transition-colors duration-300"
+    >
+      {/* Dot grid */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
+        style={{
+          backgroundImage: 'radial-gradient(circle, #94a3b8 1px, transparent 1px)',
+          backgroundSize: '28px 28px',
+        }}
+      />
+
+      {/* Ambient blobs */}
+      <div className="pointer-events-none absolute -top-40 right-10 w-96 h-96 rounded-full bg-violet-300/15 dark:bg-violet-500/8 blur-[110px]" />
+      <div className="pointer-events-none absolute -bottom-40 left-10 w-96 h-96 rounded-full bg-blue-300/15 dark:bg-blue-500/8 blur-[110px]" />
+
+      <div className="relative w-full max-w-5xl mx-auto px-6">
+
+        {/* Header */}
+        <motion.div
+          className="text-center mb-14"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        >
+          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-5 tracking-tight">
+            How It Works
+          </h2>
+          <div className="inline-flex items-center gap-3 px-6 py-3 rounded-full border border-blue-200 dark:border-blue-500/20 bg-blue-50/80 dark:bg-blue-500/10 backdrop-blur-sm shadow-sm">
+            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
+            <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
+              Get started in minutes with our simple three-step process
+            </p>
+            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
+          </div>
+        </motion.div>
+
+        {/* Desktop: cards + arrow bubbles in a flex row */}
+        <motion.div
+          className="hidden md:flex items-stretch gap-3"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-50px' }}
+        >
+          {steps.map((step, i) => (
+            <>
+              <div key={step.number} className="flex-1 min-w-0 flex flex-col">
+                <StepCard step={step} className="flex-1" />
+              </div>
+              {i < steps.length - 1 && (
+                <ArrowBubble key={`arrow-${i}`} color={step.arrowColor} />
+              )}
+            </>
+          ))}
+        </motion.div>
+
+        {/* Mobile: stacked cards + down arrows */}
+        <motion.div
+          className="flex flex-col md:hidden gap-0"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-50px' }}
+        >
+          {steps.map((step, i) => (
+            <>
+              <motion.div key={step.number} variants={cardVariants}>
+                <StepCard step={step} />
+              </motion.div>
+              {i < steps.length - 1 && (
+                <DownArrowBubble key={`down-${i}`} color={step.arrowColor} />
+              )}
+            </>
+          ))}
+        </motion.div>
+
       </div>
     </section>
   );
 };
 
-export default HowItWorks;
+export default HowItWorks;
\ No newline at end of file