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/globals.css

@@ -1,20 +1,20 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../tailwind.config.js";
 
 @theme {
-  --spacing-sp-1: var(--sp-1);
-  --spacing-sp-2: var(--sp-2);
-  --spacing-sp-3: var(--sp-3);
-  --spacing-sp-4: var(--sp-4);
-  --spacing-sp-5: var(--sp-5);
-  --spacing-sp-6: var(--sp-6);
-  --spacing-sp-8: var(--sp-8);
-  --spacing-sp-10: var(--sp-10);
-  --spacing-sp-12: var(--sp-12);
-  --spacing-sp-16: var(--sp-16);
-  --spacing-sp-20: var(--sp-20);
-  --spacing-sp-24: var(--sp-24);
+  /* Literal values only: var() indirection here stops Tailwind v4 from generating *-sp-* utilities. */
+  --spacing-sp-1: 4px;
+  --spacing-sp-2: 8px;
+  --spacing-sp-3: 12px;
+  --spacing-sp-4: 16px;
+  --spacing-sp-5: 20px;
+  --spacing-sp-6: 24px;
+  --spacing-sp-8: 32px;
+  --spacing-sp-10: 40px;
+  --spacing-sp-12: 48px;
+  --spacing-sp-16: 64px;
+  --spacing-sp-20: 80px;
+  --spacing-sp-24: 96px;
 }
 
 :root {
@@ -47,19 +47,22 @@
   --r-md: 8px;
   --r-lg: 16px;
   --r-full: 999px;
-  --font-display: var(--font-syne), sans-serif;
+  --font-display: var(--font-space-grotesk), sans-serif;
   --font-hero: var(--font-monument-extended), sans-serif;
   --font-mono: var(--font-geist-mono), monospace;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+/* Layered so Tailwind utilities (later layer) can override the zero-reset. */
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 html,
@@ -72,6 +75,79 @@ body {
 
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 68px;
+}
+
+html [id] {
+  scroll-margin-top: 68px;
+}
+
+.site-header-nav,
+.site-header-cv,
+.site-header-version {
+  display: none;
+}
+
+.site-header-menu-toggle,
+.site-header-mobile-panel {
+  display: flex;
+}
+
+.site-header-menu-toggle {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+}
+
+@media (min-width: 1025px) {
+  .site-header-nav {
+    display: flex;
+  }
+
+  .site-header-cv,
+  .site-header-version {
+    display: inline-flex;
+  }
+
+  .site-header-menu-toggle,
+  .site-header-mobile-panel {
+    display: none;
+  }
+}
+
+.skip-link {
+  position: fixed;
+  top: 8px;
+  left: 16px;
+  z-index: 10000;
+  transform: translateY(-160%);
+  border: 1px solid var(--slash);
+  background: var(--ink);
+  color: var(--white);
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: transform 0.2s var(--ease-out);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--slash);
+  outline-offset: 3px;
+}
+
+:where(a, button, input, select, textarea):focus-visible {
+  outline: 2px solid var(--slash);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce), (pointer: coarse) {
+  .film-grain {
+    display: none;
+  }
 }
 
 body {
@@ -181,7 +257,7 @@ textarea {
 
 .ds-section-title {
   font-family: var(--font-display);
-  font-size: clamp(28px, 4vw, 44px);
+  font-size: clamp(24px, 4vw, 44px);
   line-height: 1.02;
   font-weight: 800;
   letter-spacing: -0.035em;
@@ -212,7 +288,6 @@ textarea {
 .ds-panel {
   border: 1px solid var(--border);
   min-width: 0;
-  height: 100%;
 }
 
 .ds-card {
@@ -231,7 +306,7 @@ textarea {
 
 .ds-card-title {
   font-family: var(--font-display);
-  font-size: clamp(20px, 2.4vw, 30px);
+  font-size: clamp(16px, 2.4vw, 30px);
   line-height: 1.08;
   letter-spacing: -0.025em;
   margin-top: var(--sp-4);
@@ -502,14 +577,29 @@ textarea {
   *,
   *::before,
   *::after {
+    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must override component animation styles. */
     animation-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must override component animation styles. */
     animation-iteration-count: 1 !important;
+    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must override component transition styles. */
     transition-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must override smooth scrolling. */
     scroll-behavior: auto !important;
   }
 }
 
 @media (max-width: 1024px) {
+  .site-header-nav,
+  .site-header-cv,
+  .site-header-version {
+    display: none;
+  }
+
+  .site-header-menu-toggle,
+  .site-header-mobile-panel {
+    display: flex;
+  }
+
   .ds-section-header {
     flex-direction: column;
     gap: var(--sp-4);
@@ -527,7 +617,11 @@ textarea {
   }
 
   .ds-section-title {
-    font-size: clamp(26px, 8vw, 34px);
+    font-size: clamp(24px, 8vw, 34px);
+  }
+
+  .ds-card-title {
+    font-size: clamp(16px, 5vw, 24px);
   }
 
   .ds-section-description,
@@ -727,11 +821,6 @@ textarea {
     0 0 1px rgba(204, 255, 0, 0.1);
 }
 
-/* Smooth scroll overrides for cinematic feel */
-html {
-  scroll-behavior: auto;
-}
-
 /* Cinematic section reveal transforms */
 .cinematic-reveal {
   will-change: transform, opacity;