polish: responsive grid, radial gradient background, better bento card scaling

- Dashboard grid is now responsive: 1 col mobile, 2 cols tablet, 4 cols desktop
- BentoCard span classes converted to responsive variants
- Subtle radial gradient on main background for depth (as per design system §7.7)
- All production builds passing

src/components/BentoCard.tsx

@@ -9,6 +9,18 @@ interface BentoCardProps {
   className?: string;
 }
 
+// Convert desktop spans like "col-span-2 row-span-1" into responsive spans
+// On mobile (1 col): everything is col-span-1
+// On tablet (2 cols): col-span-2 stays, col-span-1 stays
+// On desktop (4 cols): original spans
+function responsiveSpan(span: string): string {
+  return span
+    .replace("col-span-2", "sm:col-span-2 lg:col-span-2 col-span-1")
+    .replace("row-span-2", "sm:row-span-2 lg:row-span-2 row-span-1")
+    .replace("col-span-1", "col-span-1")
+    .replace("row-span-1", "row-span-1");
+}
+
 export function BentoCard({
   title,
   icon,
@@ -16,9 +28,11 @@ export function BentoCard({
   children,
   className = "",
 }: BentoCardProps) {
+  const responsive = responsiveSpan(span);
+
   return (
     <motion.div
-      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
+      className={`glass-card flex flex-col overflow-hidden p-4 ${responsive} ${className}`}
       whileHover={{ scale: 1.005 }}
       whileTap={{ scale: 0.985 }}
       transition={{ type: "spring", stiffness: 400, damping: 25 }}