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.

scripts/build-icons.mjs

@@ -0,0 +1,115 @@
+/**
+ * Gera os ícones do PWA (public/brand/pwa-*.png) a partir de public/brand/mark-dark.svg: fundo opaco rgb(8,10,9)
+ * e a marca centrada. No ícone `any` o lado maior da marca ocupa 77% do ícone; no `maskable`, 56%, dentro da zona
+ * segura (círculo de 80%) que o Android preserva ao recortar.
+ *
+ *   node scripts/build-icons.mjs           # gera os 4 PNG
+ *   node scripts/build-icons.mjs --check   # só confere os PNG existentes; sai com 1 se algum estiver fora
+ *
+ * O sharp vem como dependência do Next (não é dependência direta do site), por isso é resolvido a partir dele.
+ */
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const require = createRequire(join(root, "package.json"));
+const sharp = createRequire(require.resolve("next/package.json"))("sharp");
+
+const brand = join(root, "public", "brand");
+const BG = { r: 8, g: 10, b: 9 };
+// Caixa do desenho dentro do viewBox de mark-dark.svg (x 245..1007, y 255..982).
+const MARK = { x: 245, y: 255, w: 762, h: 727 };
+const ICONS = [
+  { file: "pwa-192.png", size: 192, fraction: 0.77, min: 0.75, max: 0.79 },
+  { file: "pwa-512.png", size: 512, fraction: 0.77, min: 0.75, max: 0.79 },
+  {
+    file: "pwa-maskable-192.png",
+    size: 192,
+    fraction: 0.56,
+    min: 0,
+    max: 0.57,
+  },
+  {
+    file: "pwa-maskable-512.png",
+    size: 512,
+    fraction: 0.56,
+    min: 0,
+    max: 0.57,
+  },
+];
+
+function iconSvg(size, fraction) {
+  const source = readFileSync(join(brand, "mark-dark.svg"), "utf8");
+  const inner = source
+    .replace(/^[\s\S]*?<svg[^>]*>/, "")
+    .replace(/<\/svg>\s*$/, "");
+  // O viewBox é um quadrado centrado na caixa da marca, com lado tal que a largura da marca vira `fraction` dele.
+  const side = MARK.w / fraction;
+  const x = MARK.x + MARK.w / 2 - side / 2;
+  const y = MARK.y + MARK.h / 2 - side / 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${x} ${y} ${side} ${side}"><rect x="${x}" y="${y}" width="${side}" height="${side}" fill="rgb(${BG.r},${BG.g},${BG.b})"/>${inner}</svg>`;
+}
+
+async function check({ file, size, min, max }) {
+  const { data, info } = await sharp(join(brand, file))
+    .flatten({ background: BG })
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+  if (info.width !== size || info.height !== size) {
+    return `${file}: ${info.width}x${info.height}, esperado ${size}x${size}`;
+  }
+  let left = size;
+  let top = size;
+  let right = -1;
+  let bottom = -1;
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const i = (y * size + x) * info.channels;
+      if (data[i] === BG.r && data[i + 1] === BG.g && data[i + 2] === BG.b)
+        continue;
+      left = Math.min(left, x);
+      right = Math.max(right, x);
+      top = Math.min(top, y);
+      bottom = Math.max(bottom, y);
+    }
+  }
+  if (right < 0) return `${file}: só fundo, sem marca`;
+  const largest = Math.max(right - left + 1, bottom - top + 1) / size;
+  if (largest < min || largest > max) {
+    return `${file}: marca ocupa ${(largest * 100).toFixed(1)}% do lado, esperado ${Math.round(min * 100)}%-${Math.round(max * 100)}%`;
+  }
+  const offset =
+    Math.hypot(
+      (left + right + 1) / 2 - size / 2,
+      (top + bottom + 1) / 2 - size / 2,
+    ) / size;
+  if (offset > 0.02) {
+    return `${file}: centro da marca a ${(offset * 100).toFixed(1)}% do lado do centro do ícone (máximo 2%)`;
+  }
+  return null;
+}
+
+if (process.argv.includes("--check")) {
+  const errors = (
+    await Promise.all(
+      ICONS.map((icon) =>
+        check(icon).catch((e) => `${icon.file}: ${e.message}`),
+      ),
+    )
+  ).filter(Boolean);
+  if (errors.length) {
+    for (const error of errors) console.error(error);
+    process.exit(1);
+  }
+  console.log("OK");
+} else {
+  for (const { file, size, fraction } of ICONS) {
+    await sharp(Buffer.from(iconSvg(size, fraction)))
+      .flatten({ background: BG })
+      .png({ compressionLevel: 9 })
+      .toFile(join(brand, file));
+    console.log(`public/brand/${file}`);
+  }
+}