polish: Priority 2 improvements - smooth scroll, badges, back to top

🎯 Smooth Scroll Behavior:
- Added smooth scroll CSS for seamless navigation
- Scroll indicator now links to #tools section
- Added hover states for scroll indicator
- Accessibility: respects prefers-reduced-motion

🏷️ Tool Badges:
- Added feature badges to each tool card
- Vert: Privacy, Open Source, Free
- Paint: Browser-Based, Free
- Pastel: Open Source, WCAG, Free
- Subtle glassmorphic badge design

⬆️ Back to Top Button:
- Animated button appears after scrolling 300px
- Smooth scroll to top on click
- Hover tooltip with "Back to top" label
- Scale animations on hover/tap
- Progress bar at top showing scroll position
- Gradient progress indicator

♿ Accessibility:
- Added prefers-reduced-motion support
- Proper ARIA labels
- Keyboard accessible
- Smooth animations respect user preferences

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

components/Hero.tsx

@@ -49,21 +49,22 @@ export default function Hero() {
         </motion.p>
 
         {/* Scroll indicator */}
-        <motion.div
-          className="flex flex-col items-center gap-2"
+        <motion.a
+          href="#tools"
+          className="flex flex-col items-center gap-2 cursor-pointer group"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.8, delay: 1 }}
         >
-          <span className="text-sm text-gray-500">Explore Tools</span>
+          <span className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">Explore Tools</span>
           <motion.div
-            className="w-6 h-10 border-2 border-gray-600 rounded-full p-1"
+            className="w-6 h-10 border-2 border-gray-600 group-hover:border-purple-400 rounded-full p-1 transition-colors"
             animate={{ y: [0, 10, 0] }}
             transition={{ duration: 1.5, repeat: Infinity }}
           >
             <div className="w-1 h-2 bg-gradient-to-b from-purple-400 to-cyan-400 rounded-full mx-auto" />
           </motion.div>
-        </motion.div>
+        </motion.a>
       </div>
     </section>
   );