feat(CRIT-012): redesign home, state, and county pages for 55+ audience

Complete visual overhaul of the three core public pages, establishing a
consistent design system with reusable CSS classes and theme tokens.

Phase 1 — Home Page:
- Hero section with flame badge, bold headline, bouncing arrow CTA
- SVG map wrapped in warm-glow container with hover indicator
- State navigation cards with per-state colors and hover lift
- Value propositions grid (Compare, Find, Save, Free)
- Subtle dealer login CTA

Phase 2 — State Page:
- Themed breadcrumb with ChevronLeft back-nav
- Per-state accent colors on header
- County map in .map-container with hover indicator
- County navigation card grid with bidirectional map cross-highlighting
- Skeleton loading and DaisyUI error states

Phase 3 — County/Tables Page:
- Price-hero styling makes pricing the dominant visual element
- Sortable desktop table with chevron icons and active column highlight
- Completely redesigned mobile cards: company + price top row, cash
  callout, icon-labeled details grid, tappable phone CTA
- Market prices section with info note
- Relative date formatting (Today, Yesterday, 3 days ago)
- Full skeleton loading states

Design System (shared across all pages):
- 19 reusable CSS classes in app.postcss (.accent-badge, .map-container,
  .price-hero, .listing-card, .county-card, .skeleton-box, etc.)
- oil-orange and oil-blue color scales in Tailwind config
- fade-in-up, fade-in, float animations
- Staggered section reveals with Svelte transitions
- Zero hardcoded colors — all theme tokens and DaisyUI semantics
- Full dark mode support throughout

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

tailwind.config.js

@@ -51,21 +51,58 @@ const config = {
   theme: {
     screens: {
       'sm': '640px',
-      // => @media (min-width: 640px) { ... }
-
       'md': '768px',
-      // => @media (min-width: 768px) { ... }
-
       'lg': '1024px',
-      // => @media (min-width: 1024px) { ... }
-
       'xl': '1280px',
-      // => @media (min-width: 1280px) { ... }
-
       '2xl': '1536px',
-      // => @media (min-width: 1536px) { ... }
     },
-  
+    extend: {
+      colors: {
+        'oil-orange': {
+          50: '#fff7ed',
+          100: '#ffedd5',
+          200: '#fed7aa',
+          300: '#fdba74',
+          400: '#fb923c',
+          500: '#ff6600',
+          600: '#e55a00',
+          700: '#c2410c',
+          800: '#9a3412',
+          900: '#7c2d12',
+        },
+        'oil-blue': {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#0256bf',
+          600: '#0248a3',
+          700: '#1d4ed8',
+          800: '#14368f',
+          900: '#1e3a5f',
+        },
+      },
+      animation: {
+        'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
+        'fade-in': 'fadeIn 0.5s ease-out forwards',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(24px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-8px)' },
+        },
+      },
+    },
   },
 
 };