feat: control room hero, SEO/AEO optimization and design system fixes

Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).

app/cases/page.tsx

@@ -2,19 +2,20 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import HeroBackground from "@/app/components/cinematic/HeroBackground";
 import MagneticButton from "@/app/components/cinematic/MagneticButton";
+import { safeJsonLd } from "@/lib/jsonld";
 import { caseStudies, siteName, siteUrl } from "@/lib/site-content";
 
 export const metadata: Metadata = {
-  title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
+  title: "Cases de Engenharia de Software, Next.js e IoT",
   description:
-    "Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos. Portfolio tecnico com foco em clareza, performance e execucao.",
+    "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos. Portfolio técnico com foco em clareza, performance e execução.",
   alternates: {
     canonical: `${siteUrl}/cases`,
   },
   openGraph: {
-    title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
+    title: "Cases de Engenharia de Software, Next.js e IoT",
     description:
-      "Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos.",
+      "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos.",
     url: `${siteUrl}/cases`,
     siteName,
     type: "website",
@@ -31,7 +32,7 @@ export default function CasesPage() {
         name: "Cases de engenharia de software",
         url: `${siteUrl}/cases`,
         description:
-          "Colecao de cases em Next.js, IoT, integracoes e software para operacoes criticas.",
+          "Coleção de cases em Next.js, IoT, integrações e software para operações críticas.",
       },
       {
         "@type": "ItemList",
@@ -45,7 +46,7 @@ export default function CasesPage() {
       {
         "@type": "BreadcrumbList",
         itemListElement: [
-          { "@type": "ListItem", position: 1, name: "Inicio", item: siteUrl },
+          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
           {
             "@type": "ListItem",
             position: 2,
@@ -59,10 +60,7 @@ export default function CasesPage() {
 
   return (
     <main>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
       <section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
         <HeroBackground />
@@ -70,11 +68,11 @@ export default function CasesPage() {
           <div className="max-w-[860px]">
             <p className="ds-eyebrow">Selected work</p>
             <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
-              Cases em software, Next.js, integracoes e produtos conectados.
+              Cases em software, Next.js, integrações e produtos conectados.
             </h1>
             <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
-              Esta pagina organiza projetos com leitura mais indexavel e
-              comercial, conectando stack, contexto tecnico e tipo de problema
+              Esta página organiza projetos com leitura mais indexável e
+              comercial, conectando stack, contexto técnico e tipo de problema
               resolvido.
             </p>
           </div>
@@ -83,9 +81,9 @@ export default function CasesPage() {
 
       <section className="ds-section">
         <div className="ds-section-shell">
-          <div className="ds-grid-2">
+          <div className="ds-grid-2 items-start">
             {caseStudies.map((caseStudy) => (
-              <article key={caseStudy.id} className="ds-card">
+              <article key={caseStudy.id} className="ds-card !h-auto">
                 <div className="ds-kicker">{caseStudy.title}</div>
                 <h2 className="ds-card-title">{caseStudy.subtitle}</h2>
                 <p className="ds-copy">{caseStudy.summary}</p>
@@ -130,7 +128,7 @@ export default function CasesPage() {
               className="ds-link ds-link-accent"
               strength={0.25}
             >
-              Ver servicos
+              Ver serviços
             </MagneticButton>
             <MagneticButton
               as="a"