feat: refine portfolio showcase, services and quality lab

Align the notebook browser with the physical LCD, refresh real project captures and navigation, simplify service content, and stabilize hero hydration.

app/components/WorkModalities.tsx

@@ -199,22 +199,23 @@ export function WorkModalities() {
   return (
     <Section
       id="modalities"
-      eyebrow="Working models"
-      title="Serviços de engenharia de software e consultoria técnica."
-      description="Formatos de contratação para arquitetura de software, integrações críticas, produtos conectados e evolução de sistemas em produção."
+      eyebrow="Serviços e contratação"
+      title="Sites, sistemas e aplicativos para o seu negócio."
+      description="Desenvolvimento para web, mobile e desktop Windows e Linux. Da primeira ideia à melhoria de um sistema existente, o trabalho começa pelo que você precisa resolver."
       disableChildrenAnimation
     >
       <div className="mb-sp-8 ds-card bg-[rgba(10,10,10,0.02)]">
         <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-[760px]">
-            <div className="ds-kicker">Páginas de serviço</div>
+            <div className="ds-kicker">O que você pode contratar</div>
             <h3 className="ds-card-title !mt-sp-3" data-reel="left">
-              Especialidades organizadas por intenção de busca
+              Uma solução para a sua rotina, não uma lista de tecnologias.
             </h3>
             <p className="ds-copy !mt-sp-3 max-w-[62ch]" data-reel="right">
-              Se você chegou buscando uma stack, um tipo de consultoria ou um
-              contexto técnico específico, aqui está o caminho mais direto para
-              a página certa.
+              Apresentar sua empresa na internet, organizar a operação, criar um
+              aplicativo ou conectar ferramentas. Veja exemplos, etapas e
+              limites de cada serviço; os detalhes técnicos estão disponíveis
+              nas páginas para quem quiser aprofundar.
             </p>
           </div>
           <MagneticButton
@@ -223,7 +224,7 @@ export function WorkModalities() {
             className="ds-link ds-link-accent"
             strength={0.2}
           >
-            Ver hub de serviços
+            Conhecer todos os serviços
           </MagneticButton>
         </div>
 
@@ -235,12 +236,12 @@ export function WorkModalities() {
             <Link
               key={service.href}
               href={service.href}
-              className="rounded-[8px] border border-[var(--border)] bg-white/70 px-sp-4 py-sp-4 transition-colors duration-200 hover:border-[var(--slash)] hover:bg-white"
+              className="min-w-0 rounded-[8px] border border-[var(--border)] bg-white/70 px-sp-4 py-sp-4 transition-colors duration-200 hover:border-[var(--slash)] hover:bg-white"
             >
-              <div className="text-[12px] font-semibold tracking-[0.02em] text-[var(--ink)]">
+              <div className="text-base font-semibold leading-snug text-[var(--ink)]">
                 {service.label}
               </div>
-              <div className="mt-sp-2 text-[12px] leading-6 text-[var(--meta)]">
+              <div className="mt-sp-2 text-sm leading-6 text-[var(--ink-80)]">
                 {service.description}
               </div>
             </Link>