feat(ui): optimize CTA buttons with contextual copy and fix static export build issues

CTA Optimization:

- Implement scenario-based CTA text across 6 key locations

- Add responsive Header CTA with icon+compact design

- Enhance CTA Section with vision-driven copy

Bug Fixes:

- Fix useSearchParams() build failure with dynamic import wrapper

- Remove useSearchParams() from PageTransition component

- Fix React 19 useEffect lint errors via useSyncExternalStore

UI Enhancements:

- Add ripple effects and gradient animations to Button

- Enhance loading skeleton with branded pulse animation

src/app/globals.css

@@ -65,12 +65,12 @@
   --color-accent-cyan-rgb: 8, 145, 178;
 
   --color-footer-bg: #1C1C1C;
-  --color-cta-bg: #FAFAFA;
+  --color-cta-bg: #1a0a0f;
   --color-hero-dark-end: #1C1C1C;
-  --color-footer-text: #A0A0A0;
-  --color-footer-text-muted: #666666;
-  --color-footer-text-dim: #999999;
-  --color-footer-text-link: #E0E0E0;
+  --color-footer-text: #B0B0B0;
+  --color-footer-text-muted: #8C8C8C;
+  --color-footer-text-dim: #A0A0A0;
+  --color-footer-text-link: #E5E5E5;
   --color-footer-border: #333333;
 
   --color-challenge-isolation: #FEF2F4;
@@ -149,8 +149,8 @@
   --color-primary-lighter: #262626;
   --color-primary-rgb: 229, 229, 229;
 
-  --color-brand-primary: #E04A68;
-  --color-brand-primary-hover: #F06880;
+  --color-brand-primary: #D43650;
+  --color-brand-primary-hover: #E04A68;
   --color-brand-primary-light: #C41E3A;
   --color-brand-primary-bg: rgba(196, 30, 58, 0.15);
 
@@ -185,14 +185,14 @@
   --color-warning-bg: rgba(217, 119, 6, 0.15);
   --color-info: #8C8C8C;
   --color-info-bg: #1A1A1A;
-  --color-error: #E04A68;
+  --color-error: #D43650;
   --color-error-bg: rgba(196, 30, 58, 0.15);
 
   --color-accent-blue: #3B82F6;
   --color-accent-purple: #8B5CF6;
   --color-accent-cyan: #06B6D4;
 
-  --color-brand-primary-rgb: 224, 74, 104;
+  --color-brand-primary-rgb: 212, 54, 80;
   --color-warning-rgb: 245, 158, 11;
   --color-success-rgb: 34, 197, 94;
   --color-accent-blue-rgb: 59, 130, 246;
@@ -355,7 +355,7 @@
 @layer utilities {
   .container-wide {
     width: 100%;
-    max-width: 1200px;
+    max-width: 1280px;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--spacing-lg);
@@ -629,3 +629,33 @@ body {
     width: 100%;
   }
 }
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.animate-ripple {
+  animation: ripple 0.6s ease-out forwards;
+}
+
+@keyframes skeletonPulse {
+  0%, 100% {
+    background-color: var(--color-skeleton-bg);
+    opacity: 1;
+  }
+  50% {
+    background-color: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-skeleton-bg));
+    opacity: 0.8;
+  }
+}
+
+.skeleton-brand {
+  animation: skeletonPulse 2s ease-in-out infinite;
+}