feat(hero): camadas reconheciveis (tela, integracoes, tabela de dados), etiquetas e legendas do mergulho

A cena passa de discos abstratos para formas que um leigo reconhece. A camera
enquadra cada camada enquanto a legenda em linguagem simples explica o que e,
e so entao atravessa para a proxima.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/components/Hero.tsx

@@ -37,6 +37,13 @@ function statItems(stats?: HeroStats) {
 const TITLE = "Sistemas sob medida para operações que não cabem em soluções prontas.".split(" ");
 const ACCENT = new Set([1, 2]);
 
+/** O que cada camada da cena significa, em linguagem simples. */
+const CAPTIONS = [
+  ["A tela", "O que sua equipe e seus clientes usam no dia a dia."],
+  ["As integrações", "Os programas que você já usa conversando entre si, sem retrabalho."],
+  ["Os dados", "Suas informações guardadas, organizadas e seguras."],
+] as const;
+
 export default function Hero({ stats }: { stats?: HeroStats }) {
   const items = statItems(stats);
 
@@ -49,6 +56,15 @@ export default function Hero({ stats }: { stats?: HeroStats }) {
         <div className="hero-glow" aria-hidden="true" />
         <HeroField />
         <div className="hero-scrim" aria-hidden="true" />
+        {/* Legendas do mergulho: aparecem enquanto a câmera atravessa cada camada (só no hero fixo, telas grandes). */}
+        <ol className="hero-captions">
+          {CAPTIONS.map(([title, text], index) => (
+            <li key={title} style={{ "--i": index } as CSSProperties}>
+              <span className="hero-caption-title">{title}</span>
+              {text}
+            </li>
+          ))}
+        </ol>
 
         <div className="hero-content relative mx-auto flex w-full max-w-[max(1400px,var(--shell))] flex-1 flex-col justify-center px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-8 lg:px-sp-12">
           <p className="hero-in mb-sp-5 flex items-center gap-sp-3 font-mono text-[11px] uppercase leading-[1.5] tracking-[0.14em] text-[rgba(244,242,237,.72)] sm:text-[12px]">