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/components/WorkModalities.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, type Variants } from "framer-motion";
+import { motion, type Variants } from "motion/react";
 import Link from "next/link";
 import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import { serviceHubLinks } from "@/lib/site-content";
@@ -28,20 +28,20 @@ const TIERS: Tier[] = [
     id: "discovery",
     badge: "Entrada / Baixo Risco",
     level: "01",
-    title: "Auditoria & Diagnostico Tecnico",
+    title: "Auditoria & Diagnóstico Técnico",
     tagline: "Fotografia clara do problema antes de qualquer comprometimento.",
     description:
-      "Analise profunda de arquitetura, performance ou seguranca com entrega de um plano de acao executavel. Ideal para quem precisa de direcao antes de contratar execucao.",
+      "Análise profunda de arquitetura, performance ou segurança com entrega de um plano de ação executável. Ideal para quem precisa de direção antes de contratar execução.",
     deliverables: [
-      "Relatorio de gargalos e divida tecnica",
-      "Mapeamento de riscos e dependencias",
-      "Sugestao de stack e cronograma de mitigacao",
-      "Plano de acao priorizado",
+      "Relatório de gargalos e dívida técnica",
+      "Mapeamento de riscos e dependências",
+      "Sugestão de stack e cronograma de mitigação",
+      "Plano de ação priorizado",
     ],
     pricing: "Valor Fixo",
-    pricingNote: "Contrato unico. Entrega em ate 5 dias uteis.",
+    pricingNote: "Contrato único. Entrega em até 5 dias úteis.",
     featured: false,
-    ctaLabel: "Solicitar diagnostico",
+    ctaLabel: "Solicitar diagnóstico",
     ctaHref: "#contact",
   },
   {
@@ -51,12 +51,12 @@ const TIERS: Tier[] = [
     title: "Ciclos de Engenharia",
     tagline: "Capacidade produtiva garantida. Entrega a cada 2 semanas.",
     description:
-      "Desenvolvimento continuo com a previsibilidade de orcamento do escopo fechado e a agilidade de sprints. Milestones claros, sem amarras de contrato longo.",
+      "Desenvolvimento contínuo com a previsibilidade de orçamento do escopo fechado e a agilidade de sprints. Milestones claros, sem amarras de contrato longo.",
     deliverables: [
-      "Features em producao a cada ciclo",
-      "Refatoracao iterativa com rastreabilidade",
-      "Documentacao tecnica atualizada",
-      "Capacidade de pivotar prioridades no inicio de cada sprint",
+      "Features em produção a cada ciclo",
+      "Refatoração iterativa com rastreabilidade",
+      "Documentação técnica atualizada",
+      "Capacidade de pivotar prioridades no início de cada sprint",
     ],
     pricing: "Fixo por Ciclo",
     pricingNote: "Assinatura quinzenal ou mensal. Cancele a qualquer ciclo.",
@@ -69,19 +69,19 @@ const TIERS: Tier[] = [
     badge: "Premium / High-Ticket",
     level: "03",
     title: "Fractional Tech Lead",
-    tagline: "Lideranca tecnica senior. Sem o custo de um CTO full-time.",
+    tagline: "Liderança técnica sênior. Sem o custo de um CTO full-time.",
     description:
-      "Direcao arquitetural, gestao de risco e sustentacao de operacoes criticas. Para empresas que precisam de decisoes de alto impacto com responsabilidade continua.",
+      "Direção arquitetural, gestão de risco e sustentação de operações críticas. Para empresas que precisam de decisões de alto impacto com responsabilidade contínua.",
     deliverables: [
-      "SLA prioritario Zero-Risk",
+      "SLA prioritário Zero-Risk",
       "Code review e lideranca do time interno",
       "Decisoes de infra: Cloud, VPS, CI/CD",
       "Consultoria estrategica recorrente",
     ],
     pricing: "Retainer Mensal",
-    pricingNote: "Renovacao mensal. Vagas limitadas.",
+    pricingNote: "Renovação mensal. Vagas limitadas.",
     featured: false,
-    ctaLabel: "Agendar conversa estrategica",
+    ctaLabel: "Agendar conversa estratégica",
     ctaHref: "#contact",
   },
 ];
@@ -120,7 +120,7 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
       <DrawLine delay={0.04} />
 
       <div className="mt-sp-4 min-w-0">
-        <h3 className="ds-card-title !mt-0 text-balance !text-[clamp(22px,5vw,28px)] !leading-[1.02] !tracking-[-0.035em] [overflow-wrap:break-word] [word-break:normal]">
+        <h3 className="ds-card-title !mt-0 text-balance !text-[clamp(19px,5vw,28px)] !leading-[1.02] !tracking-[-0.035em] [overflow-wrap:break-word] [word-break:normal]">
           {tier.title}
         </h3>
         <p className="mt-sp-2 text-[12px] leading-[1.7] text-[var(--meta)] md:text-[11px]">
@@ -194,22 +194,30 @@ export function WorkModalities() {
     <Section
       id="modalities"
       eyebrow="Working models"
-      title="Servicos de engenharia de software e consultoria tecnica."
-      description="Formatos de contratacao para arquitetura de software, integracoes criticas, produtos conectados e evolucao de sistemas em producao."
+      title="Serviços de engenharia de software e consultoria técnica."
+      description="Formatos de contratação para arquitetura de software, integrações críticas, produtos conectados e evolução de sistemas em produção."
       disableChildrenAnimation
     >
       <div className="mb-sp-8 ds-card bg-[rgba(10,10,10,0.02)]">
         <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-[760px]">
-            <div className="ds-kicker">Paginas de servico</div>
-            <h3 className="ds-card-title !mt-sp-3">Especialidades organizadas por intencao de busca</h3>
+            <div className="ds-kicker">Páginas de serviço</div>
+            <h3 className="ds-card-title !mt-sp-3">
+              Especialidades organizadas por intenção de busca
+            </h3>
             <p className="ds-copy !mt-sp-3 max-w-[62ch]">
-              Se voce chegou buscando uma stack, um tipo de consultoria ou um contexto tecnico especifico,
-              aqui esta o caminho mais direto para a pagina certa.
+              Se você chegou buscando uma stack, um tipo de consultoria ou um
+              contexto técnico específico, aqui está o caminho mais direto para
+              a página certa.
             </p>
           </div>
-          <MagneticButton as="a" href="/servicos" className="ds-link ds-link-accent" strength={0.2}>
-            Ver hub de servicos
+          <MagneticButton
+            as="a"
+            href="/servicos"
+            className="ds-link ds-link-accent"
+            strength={0.2}
+          >
+            Ver hub de serviços
           </MagneticButton>
         </div>