feat(site): blocos 3D da marca, novas ofertas e hero mais abrangente

Hero e movimento
- cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py):
  marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao
  cursor e, parada no topo, passa sozinha pelos estados com legenda
- três níveis de aparelho (full, lite, static); sem WebGL fica o pôster
- título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha."
- faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções
- rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa
  compartilhada entre a lista de cases e o case

Ofertas
- atendimento no WhatsApp com IA e nota fiscal para a reforma tributária
  (páginas de serviço, cartões da home, formulário e aviso com data de validade)
- página /ia atualizada, com fontes
- peças 3D em loop nos cartões e topos de página (3d/pecas.py)

Design
- hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta
- um destino por rótulo: "Falar sobre meu projeto" leva ao formulário,
  "Chamar no WhatsApp" abre o WhatsApp
- logo montado em blocos, 404 redesenhado, grades sem célula vazia
- ícones do PWA e manifesto novos

Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.

app/not-found.tsx

@@ -1,5 +1,8 @@
-import { ArrowLeft, Code2, Home } from "lucide-react";
 import type { Metadata } from "next";
+import {
+  primaryButton,
+  secondaryButtonDark,
+} from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
 import { twitterHandle } from "@/lib/seo";
 import { siteName } from "@/lib/site-content";
@@ -33,36 +36,53 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <main className="min-h-screen bg-[#030712] flex items-center justify-center px-6">
-      <div className="max-w-2xl mx-auto text-center">
-        <div className="mb-8">
-          <Code2 className="w-24 h-24 text-slate-500 mx-auto mb-4 opacity-60" />
-          <h1 className="font-[family-name:var(--font-display)] text-6xl md:text-8xl font-extrabold text-white mb-4">
+    <main className="flex min-h-screen items-center bg-[var(--ink)] px-sp-6 py-sp-16 font-display text-[#f4f2ed] lg:px-sp-12">
+      <div className="ds-section-shell grid items-center gap-sp-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,520px)]">
+        <div>
+          <h1 className="text-[clamp(64px,12vw,96px)] font-semibold leading-none tracking-[-0.04em]">
             404
           </h1>
-          <h2 className="font-[family-name:var(--font-display)] text-2xl md:text-3xl font-bold text-slate-300 mb-4">
+          <h2 className="mt-sp-4 text-[clamp(22px,3vw,30px)] font-semibold leading-[1.15] tracking-[-0.02em]">
             Página não encontrada
           </h2>
-          <p className="font-[family-name:var(--font-body)] text-slate-400 mb-8">
+          <p className="mt-sp-4 max-w-[34em] text-[17px] leading-[1.55] text-[rgba(244,242,237,.72)]">
             A página que você está procurando não existe ou foi movida.
           </p>
+          <div className="mt-sp-8 flex flex-col gap-sp-3 sm:flex-row">
+            <HoverPrefetchLink href="/" className={primaryButton}>
+              Voltar ao início
+            </HoverPrefetchLink>
+            <HoverPrefetchLink href="/cases" className={secondaryButtonDark}>
+              Ver os cases
+            </HoverPrefetchLink>
+          </div>
         </div>
 
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <HoverPrefetchLink
-            href="/"
-            className="px-6 py-3 border border-slate-600 hover:border-slate-400 bg-transparent text-white rounded-lg font-[family-name:var(--font-body)] text-base font-semibold transition-all flex items-center justify-center gap-2"
+        <div
+          aria-hidden="true"
+          className="order-first mx-auto aspect-[16/10] w-full max-w-[280px] overflow-hidden lg:order-none lg:max-w-none"
+        >
+          <video
+            className="block h-full w-full object-cover motion-reduce:hidden"
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            poster="/3d/peca-404.webp"
           >
-            <Home className="w-5 h-5" />
-            Voltar ao início
-          </HoverPrefetchLink>
-          <HoverPrefetchLink
-            href="/cases"
-            className="px-6 py-3 font-[family-name:var(--font-body)] text-base text-slate-300 hover:text-white underline underline-offset-4 rounded-lg font-medium transition-all flex items-center justify-center gap-2"
-          >
-            <ArrowLeft className="w-5 h-5" />
-            Ver os cases
-          </HoverPrefetchLink>
+            <source src="/3d/peca-404.webm" type="video/webm" />
+            <source src="/3d/peca-404.mp4" type="video/mp4" />
+          </video>
+          {/* biome-ignore lint/performance/noImgElement: imagem decorativa e pequena, só para movimento reduzido */}
+          <img
+            src="/3d/peca-404.webp"
+            alt=""
+            width={640}
+            height={400}
+            loading="lazy"
+            className="hidden h-full w-full object-cover motion-reduce:block"
+          />
         </div>
       </div>
     </main>