style: finalize industrial design system and fix typography conflicts

- Refactor app/[locale]/[slug]/page.tsx to handle fullBleed layouts cleanly
- Fix heading styling on 'About Us' and other MDX pages
- Implement staggered Framer Motion animations across all core blocks
- Resolve InteractiveGermanyMap reference error
- Standardize typography tokens for prose and custom headings
- Consolidate support CTA placement

components/blocks/SupportCTA.tsx

@@ -1,6 +1,9 @@
+'use client';
+
 import React from 'react';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
+import { motion } from 'framer-motion';
 
 export interface SupportCTAProps {
   title: string;
@@ -9,31 +12,62 @@ export interface SupportCTAProps {
   buttonHref: string;
 }
 
+const containerVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.8,
+      ease: [0.16, 1, 0.3, 1],
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
+  },
+};
+
 export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
   const { title, description, buttonLabel, buttonHref } = props;
 
   return (
-    <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
-      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+    <motion.div 
+      variants={containerVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-100px" }}
+      className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
+    >
+      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
       <div className="relative z-10 max-w-2xl">
-        <h3 className="text-2xl md:text-3xl font-bold mb-4">{title}</h3>
-        <p className="text-lg text-white/70 mb-8">{description}</p>
-        <TrackedLink
-          href={buttonHref}
-          className={getButtonClasses('accent', 'lg')}
-          eventProperties={{
-            location: 'block_support_cta',
-          }}
-        >
-          <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
-            {buttonLabel}
-            <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
-              &rarr;
+        <motion.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</motion.h3>
+        <motion.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</motion.p>
+        <motion.div variants={itemVariants}>
+          <TrackedLink
+            href={buttonHref}
+            className={getButtonClasses('accent', 'lg')}
+            eventProperties={{
+              location: 'block_support_cta',
+            }}
+          >
+            <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+              {buttonLabel}
+              <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                &rarr;
+              </span>
             </span>
-          </span>
-          <ButtonOverlay variant="accent" />
-        </TrackedLink>
+            <ButtonOverlay variant="accent" />
+          </TrackedLink>
+        </motion.div>
       </div>
-    </div>
+    </motion.div>
   );
 };