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

app/[locale]/[slug]/page.tsx

@@ -132,52 +132,57 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
   }
   */
 
-  // Full-bleed pages render blocks edge-to-edge without the generic article wrapper
-  if (pageData.frontmatter.layout === 'fullBleed') {
-    return (
-      <div className="flex flex-col min-h-screen">
-        <MDXRemote source={pageData.content} components={mdxComponents} />
-      </div>
-    );
-  }
+  // Determine layout type
+  const isFullBleed = pageData.frontmatter.layout === 'fullBleed';
 
-  // Default article layout with hero, content, and support CTA
   return (
-    <div className="flex flex-col min-h-screen bg-white">
-      {/* Hero Section */}
-      <section className="bg-primary-dark text-white pt-40 pb-16 md:pt-48 md:pb-20 min-h-[35vh] flex flex-col justify-end relative overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-4xl">
-            <Badge variant="accent" className="mb-4 md:mb-6">
-              {t('badge')}
-            </Badge>
-            <Heading level={1} variant="white" className="mb-0">
-              {pageData.frontmatter.title}
-            </Heading>
+    <div className={`flex flex-col min-h-screen ${isFullBleed ? '' : 'bg-white'}`}>
+      {/* Generic Hero Section (only for standard pages) */}
+      {!isFullBleed && (
+        <section className="bg-primary-dark text-white pt-40 pb-12 md:pt-56 md:pb-16 min-h-[40vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
+          <div className="absolute inset-0 opacity-20 pointer-events-none">
+            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/50 via-transparent to-transparent" />
           </div>
-        </Container>
-      </section>
+          <Container className="relative z-10">
+            <div className="max-w-4xl">
+              <Badge variant="accent" className="mb-4 md:mb-6 shadow-sm">
+                {t('badge')}
+              </Badge>
+              <Heading level={1} variant="white" className="mb-0 drop-shadow-sm">
+                {pageData.frontmatter.title}
+              </Heading>
+            </div>
+          </Container>
+        </section>
+      )}
 
       {/* Main Content Area */}
-      <Container className="py-16 md:py-24">
-        {/* Excerpt/Lead paragraph if available */}
-        {pageData.frontmatter.excerpt && (
-          <div className="mb-16">
-            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
-              {pageData.frontmatter.excerpt}
-            </p>
-          </div>
-        )}
-
-        {/* Main content */}
+      {isFullBleed ? (
         <div className="w-full">
           <MDXRemote source={pageData.content} components={mdxComponents} />
         </div>
+      ) : (
+        <Container className="py-16 md:py-24">
+          {/* Excerpt/Lead paragraph if available */}
+          {pageData.frontmatter.excerpt && (
+            <div className="mb-16 max-w-4xl mx-auto">
+              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
+                {pageData.frontmatter.excerpt}
+              </p>
+            </div>
+          )}
 
-        {/* Support Section */}
+          {/* Main content */}
+          <div className="max-w-4xl mx-auto">
+            <div className="prose prose-lg md:prose-xl prose-neutral max-w-none prose-headings:font-heading prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:border-b prose-h2:border-neutral-200 prose-h2:pb-4 prose-h3:text-2xl prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:font-medium prose-a:underline prose-a:underline-offset-4 prose-a:decoration-primary/30 hover:prose-a:decoration-primary prose-strong:text-text-primary prose-strong:font-semibold prose-li:text-text-secondary prose-ul:list-disc prose-ol:list-decimal">
+              <MDXRemote source={pageData.content} components={mdxComponents} />
+            </div>
+          </div>
+        </Container>
+      )}
+
+      {/* Support Section */}
+      <Container>
         <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" />
           <div className="relative z-10 max-w-2xl">