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/layout.tsx

@@ -1,26 +1,27 @@
 import type { Metadata, Viewport } from "next";
-import { Geist_Mono, Syne } from "next/font/google";
+import { Geist_Mono, Space_Grotesk } from "next/font/google";
 import localFont from "next/font/local";
 import type { ReactNode } from "react";
+import { safeJsonLd } from "@/lib/jsonld";
 import { regionCities, siteUrl } from "@/lib/site-content";
 import { getWhatsAppNumber } from "@/lib/whatsapp";
 import CinematicOverlays from "./components/cinematic/CinematicOverlays";
 import GoogleAnalytics from "./components/GoogleAnalytics";
+import { Header } from "./components/Header";
 import { RouteTransition } from "./components/RouteTransition";
 import { AnimationProvider } from "./providers/AnimationProvider";
 import { SmoothScrollProvider } from "./providers/SmoothScrollProvider";
 import "./globals.css";
 
-const seoTitle =
-  "Engenheiro da Computação e Desenvolvedor de Software em Garuva, Joinville e Curitiba | Evandro Fonseca Junior";
+const defaultTitle = "Evandro Fonseca Junior — Engenharia de Software";
 const seoDescription =
   "Evandro Fonseca Junior é engenheiro da computação, desenvolvedor de software e criação de sites para empresas em Garuva, Joinville, São Francisco do Sul, Itapoá, Jaraguá do Sul, Norte de Santa Catarina e Curitiba. Atua com Next.js, TypeScript, Rust, IoT, integração de sistemas e produtos críticos.";
 
-const syne = Syne({
+const spaceGrotesk = Space_Grotesk({
   subsets: ["latin"],
-  weight: ["400", "500", "600", "700", "800"],
+  weight: ["400", "500", "600", "700"],
   display: "swap",
-  variable: "--font-syne",
+  variable: "--font-space-grotesk",
 });
 
 const geistMono = Geist_Mono({
@@ -48,7 +49,10 @@ const monumentExtended = localFont({
 });
 
 export const metadata: Metadata = {
-  title: seoTitle,
+  title: {
+    default: defaultTitle,
+    template: "%s | Evandro Fonseca Junior",
+  },
   description: seoDescription,
   keywords: [
     "desenvolvedor de software em Garuva",
@@ -92,7 +96,7 @@ export const metadata: Metadata = {
     telephone: false,
   },
   openGraph: {
-    title: seoTitle,
+    title: defaultTitle,
     description: seoDescription,
     url: siteUrl,
     siteName: "Evandro.dev.br",
@@ -109,7 +113,7 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary_large_image",
-    title: seoTitle,
+    title: defaultTitle,
     description: seoDescription,
     creator: "@evandrodevbr",
     images: ["/opengraph-image"],
@@ -209,7 +213,7 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
       {
         "@type": "ProfessionalService",
         "@id": `${siteUrl}/#services`,
-        name: "Evandro Fonseca Junior | Engenharia de Software, Criação de Sites e Consultoria Tecnica",
+        name: "Evandro Fonseca Junior | Engenharia de Software, Criação de Sites e Consultoria Técnica",
         url: siteUrl,
         image: `${siteUrl}/opengraph-image`,
         telephone: `+${getWhatsAppNumber()}`,
@@ -226,7 +230,7 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
           longitude: -48.8467,
         },
         description:
-          "Servico de engenharia de software, criacao de sites, arquitetura de software, integracoes criticas e consultoria tecnica para Next.js, Tauri, Rust, IoT e produtos conectados.",
+          "Serviço de engenharia de software, criação de sites, arquitetura de software, integrações críticas e consultoria técnica para Next.js, Tauri, Rust, IoT e produtos conectados.",
         areaServed: [
           ...regionCities.map((name) => ({ "@type": "City", name })),
           { "@type": "AdministrativeArea", name: "Norte de Santa Catarina" },
@@ -249,18 +253,18 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
         serviceType: [
           "Engenharia de Software",
           "Criação de Sites",
-          "Consultoria Tecnica",
+          "Consultoria Técnica",
           "Arquitetura de Software",
-          "Integracao hardware + software",
+          "Integração hardware + software",
           "Desenvolvimento Next.js",
           "Desenvolvimento Tauri",
           "Desenvolvimento Rust",
           "IoT",
-          "Sistemas Criticos",
+          "Sistemas Críticos",
         ],
         hasOfferCatalog: {
           "@type": "OfferCatalog",
-          name: "Modelos de contratacao",
+          name: "Modelos de contratação",
           itemListElement: [
             {
               "@type": "Offer",
@@ -273,7 +277,7 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
               "@type": "Offer",
               itemOffered: {
                 "@type": "Service",
-                name: "Auditoria e diagnostico tecnico",
+                name: "Auditoria e diagnóstico técnico",
               },
             },
             {
@@ -299,17 +303,22 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
     <html
       lang="pt-BR"
-      className={`${syne.variable} ${geistMono.variable} ${monumentExtended.variable}`}
+      className={`${spaceGrotesk.variable} ${geistMono.variable} ${monumentExtended.variable}`}
     >
       <body>
         <SmoothScrollProvider>
           <AnimationProvider>
-            <script
-              type="application/ld+json"
-              dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-            />
+            <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
+            <a className="skip-link" href="#main-content">
+              Pular para o conteúdo
+            </a>
+            <Header />
             <CinematicOverlays />
-            <RouteTransition>{children}</RouteTransition>
+            <RouteTransition>
+              <div id="main-content" tabIndex={-1}>
+                {children}
+              </div>
+            </RouteTransition>
             <GoogleAnalytics />
           </AnimationProvider>
         </SmoothScrollProvider>