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

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import "./logo.css";
 
 interface LogoProps {
   theme?: "dark" | "light";
@@ -6,20 +7,56 @@ interface LogoProps {
   loading?: "eager" | "lazy";
 }
 
+/*
+ * O logo em duas partes sobre a caixa do wordmark-<tema>.webp (1600x330): o símbolo em SVG em linha, para os blocos
+ * lima poderem se mexer (logo.css), e o texto, que é o mesmo .webp com o símbolo apagado (wordmark-text-<tema>.webp,
+ * do mesmo tamanho, para passar pelo mesmo redimensionamento e dar a mesma altura de antes). As coordenadas do SVG
+ * são pixels do .webp original, medidas nas bordas das formas; cor e opacidade também vêm dele.
+ */
+const SHAPE_FILL = { dark: "#f4f3ee", light: "#00090b" } as const;
+
+// em ordem de encaixe, de baixo para cima
+const BLOCKS = [
+  { x: 130.66, y: 110.25, width: 76.47, height: 86.05 },
+  { x: 204.39, y: 43.9, width: 67.72, height: 69.39 },
+  { x: 287.27, y: 3.28, width: 39.58, height: 40.82 },
+  { x: 312.91, y: 79.72, width: 39.39, height: 39.76 },
+];
+
 export function Logo({
   theme = "dark",
   className = "w-48",
   loading = "lazy",
 }: Readonly<LogoProps>) {
   return (
-    <Image
-      src={`/brand/wordmark-${theme}.webp`}
-      alt="Evandro.dev.br"
-      width={1600}
-      height={330}
-      sizes="240px"
-      loading={loading}
-      className={`block h-auto max-w-full ${className}`}
-    />
+    <span className={`relative block max-w-full ${className}`}>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        viewBox="0 0 360 330"
+        preserveAspectRatio="none"
+        className="absolute top-0 left-0 h-full w-[22.5%] overflow-visible"
+      >
+        <path
+          fill={SHAPE_FILL[theme]}
+          fillOpacity={0.933}
+          d="M10.17 223.44H40.23V188.63H74.87V153.98H111.2V222.33H74.93V277.73H139.93V217.4H200.14V291.36H171.59V325.32H10.17Z"
+        />
+        <g fill="#ccfa00" opacity={0.98}>
+          {BLOCKS.map((block) => (
+            <rect key={block.x} className="logo-bloco" {...block} />
+          ))}
+        </g>
+      </svg>
+      <Image
+        src={`/brand/wordmark-text-${theme}.webp`}
+        alt="Evandro.dev.br"
+        width={1600}
+        height={330}
+        sizes="240px"
+        loading={loading}
+        className="block h-auto w-full"
+      />
+    </span>
   );
 }