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

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useInView } from "@/app/hooks/useInView";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import { useSaveData } from "./showcase/useShowcaseMedia";
+
+/**
+ * Peça 3D em loop no cartão da oferta (`public/3d/peca-<nome>.{webm,mp4}`, 640x400, com o pôster `.webp`). É decorativa:
+ * o nome do cartão e a lista dizem o que é. Nada baixa antes de tocar (`preload="none"`); toca só enquanto está à vista e
+ * fica no pôster com movimento reduzido ou "Economizar dados".
+ */
+export function OfferVideo({ name }: Readonly<{ name: string }>) {
+  const ref = useRef<HTMLVideoElement>(null);
+  const inView = useInView(ref, { amount: 0.3, once: false });
+  const reducedMotion = useReducedMotion();
+  const saveData = useSaveData();
+  const play = inView && !reducedMotion && !saveData;
+
+  useEffect(() => {
+    const video = ref.current;
+    if (!video) return;
+    if (!play) {
+      video.pause();
+      return;
+    }
+    // o navegador pode recusar a reprodução (economia de energia, aba em segundo plano): o vídeo fica no pôster
+    video.play()?.catch(() => {});
+  }, [play]);
+
+  const src = `/3d/peca-${name}`;
+  return (
+    <video
+      ref={ref}
+      tabIndex={-1}
+      aria-hidden="true"
+      disablePictureInPicture
+      disableRemotePlayback
+      muted
+      loop
+      playsInline
+      preload="none"
+      poster={`${src}.webp`}
+      width={640}
+      height={400}
+      // contain, não cover: o fundo do vídeo é o mesmo do quadro, e a peça nunca é cortada num quadro mais largo
+      className="block h-full w-full object-contain"
+    >
+      <source src={`${src}.webm`} type="video/webm" />
+      <source src={`${src}.mp4`} type="video/mp4" />
+    </video>
+  );
+}