refactor: align landing page and 404 with Calculate blueprint

- Hero: remove framer-motion, CSS stagger animations, glass pill CTA button, refined typography and scroll indicator
- Stats: remove framer-motion, Lucide icons, tighter glass cards with mono labels
- ToolsGrid: remove framer-motion, editorial section heading, 4-col xl grid
- ToolCard: replace framer-motion motion.Link with plain Link + CSS hover, compact layout (icon→title→desc→badges+arrow), ElementType icon prop
- Footer: remove framer-motion, matches sidebar footer style
- BackToTop: remove framer-motion, JS scroll progress bar (1px primary line), compact glass button
- not-found: remove framer-motion and shadcn Button, glass pill CTA, 120px mono 404, CSS stagger
- page.tsx: remove unnecessary 'use client' directive

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

components/Stats.tsx

@@ -1,68 +1,35 @@
-'use client';
-
 import { tools } from '@/lib/tools';
-import { motion } from 'framer-motion';
+import { Box, Code2, Shield } from 'lucide-react';
 
 const stats = [
-  {
-    number: tools.length,
-    label: 'Tools',
-    icon: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-      </svg>
-    ),
-  },
-  {
-    number: '100%',
-    label: 'Open Source',
-    icon: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-      </svg>
-    ),
-  },
-  {
-    number: '∞',
-    label: 'Privacy First',
-    icon: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-      </svg>
-    ),
-  },
+  { value: tools.length, label: 'Tools', icon: Box },
+  { value: '100%', label: 'Open Source', icon: Code2 },
+  { value: '∞', label: 'Privacy First', icon: Shield },
 ];
 
 export default function Stats() {
   return (
-    <section className="relative py-16 px-4">
-      <div className="max-w-6xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {stats.map((stat, index) => (
-            <motion.div
-              key={stat.label}
-              className="glass rounded-2xl p-8 text-center"
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              whileHover={{ y: -5 }}
-            >
-              <motion.div
-                className="inline-flex items-center justify-center w-12 h-12 mb-4 rounded-xl bg-primary/10 text-primary"
-                whileHover={{ scale: 1.1, rotate: 5 }}
-                transition={{ type: 'spring', stiffness: 300 }}
+    <section className="relative py-8 px-6">
+      <div className="max-w-xl mx-auto">
+        <div className="grid grid-cols-3 gap-3">
+          {stats.map((stat, i) => {
+            const Icon = stat.icon;
+            return (
+              <div
+                key={stat.label}
+                className="glass rounded-xl p-5 flex flex-col items-center text-center"
+                style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
               >
-                {stat.icon}
-              </motion.div>
-              <div className="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
-                {stat.number}
+                <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center mb-3">
+                  <Icon className="w-3.5 h-3.5 text-primary" />
+                </div>
+                <span className="text-2xl font-bold tabular-nums text-foreground">{stat.value}</span>
+                <span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1">
+                  {stat.label}
+                </span>
               </div>
-              <div className="text-muted-foreground text-base font-medium">
-                {stat.label}
-              </div>
-            </motion.div>
-          ))}
+            );
+          })}
         </div>
       </div>
     </section>