UX refinements: Color strategy + Hero Section 2 implementation

## Color Strategy: "Dark Elegance with Innovation Sparks"

Reduced teal usage from ~30% to ~5% as strategic AI/innovation accent.
Introduced amber for speed/performance metrics. Slate foundation for
professional, calm aesthetic suitable for healthcare EPD application.

### Login Page (app/login/page.tsx)
- Bento grid: Color variety (teal=AI, amber=speed, blue/indigo=general)
- Stats footer: Amber for time metrics (90%+, <5 sec), slate for build time
- Focus rings: teal-500 → slate-400 (subtle, professional)
- Clock icon for time savings feature

### Homepage (app/(marketing)/page.tsx)
- CTA background: teal-50 → slate-50 (calm, elegant)
- Teal CTA button remains (strategic conversion accent)
- NEW: Hero Section 2 implementation with:
  - Split-screen layout (60% content, 40% background image)
  - Framer Motion animations (staggered reveal + clip-path)
  - Logo, slogan, title with teal accent, CTA, contact footer
  - Tech-themed Unsplash background image

### EPD Sidebar (app/epd/components/epd-sidebar.tsx)
- Kept LIGHT theme (white/slate-50) - suitable for long EPD sessions
- Active states: teal-50 → slate-100 (professional, not distracting)
- Navigation: Subtle slate colors, not teal
- Teal AI logo only (innovation marker)
- Slate avatar (neutral, professional)

### New Files
- app/(marketing)/components/hero-section-client.tsx
  Client wrapper for HeroSection (framer-motion compatibility)

## Result
- Teal is now meaningful AI/innovation signal (not decorative)
- Amber signals speed ("aispeedrun.nl" brand alignment)
- Slate provides professional foundation for EPD context
- Build succeeds ✅

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

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

app/login/page.tsx

@@ -22,7 +22,7 @@ const bentoFeatures = [
   {
     name: '90%+ Tijdsbesparing',
     description: 'Gemiddeld bespaar je 2+ uur per dag op documentatie',
-    icon: TrendingDown,
+    icon: Clock,
     className: 'col-span-3 lg:col-span-1',
     background: (
       <div className="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-amber-600/20" />
@@ -36,7 +36,7 @@ const bentoFeatures = [
     icon: Zap,
     className: 'col-span-3 lg:col-span-1',
     background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-purple-600/20" />
+      <div className="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-orange-500/20" />
     ),
     href: '#',
     cta: 'Ontdekken'
@@ -47,7 +47,7 @@ const bentoFeatures = [
     icon: Target,
     className: 'col-span-3 lg:col-span-2',
     background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/20 to-blue-600/20" />
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-indigo-600/20" />
     ),
     href: '#',
     cta: 'Bekijk voorbeeld'
@@ -172,7 +172,7 @@ export default function LoginPage() {
           {/* Stats Footer */}
           <div className="grid grid-cols-3 gap-4 mt-8">
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
-              <div className="text-2xl md:text-3xl font-bold text-teal-400">90%+</div>
+              <div className="text-2xl md:text-3xl font-bold text-amber-400">90%+</div>
               <div className="text-xs md:text-sm text-slate-400 mt-1">Tijdsbesparing</div>
             </div>
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
@@ -180,7 +180,7 @@ export default function LoginPage() {
               <div className="text-xs md:text-sm text-slate-400 mt-1">Gemiddelde respons</div>
             </div>
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
-              <div className="text-2xl md:text-3xl font-bold text-purple-400">4 weken</div>
+              <div className="text-2xl md:text-3xl font-bold text-slate-300">4 weken</div>
               <div className="text-xs md:text-sm text-slate-400 mt-1">Build tijd</div>
             </div>
           </div>
@@ -235,7 +235,7 @@ export default function LoginPage() {
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="jouw@email.nl"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                   <p className="mt-1 text-xs text-slate-500">
                     Nieuw? Account wordt automatisch aangemaakt!
@@ -324,7 +324,7 @@ export default function LoginPage() {
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="demo@mini-ecd.demo"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                 </div>
 
@@ -342,7 +342,7 @@ export default function LoginPage() {
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder="••••••••"
                     required
-                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                    className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
                   />
                 </div>