feat: redesign hero backgrounds and unify page headers

src/app/[locale]/about/page.tsx

@@ -73,8 +73,17 @@ export default async function AboutPage({ params }: Props) {
     <>
       <SiteNav locale={locale as Locale} pathname="/about" />
 
-      <header className="page-hero">
-        <div className="wrap">
+      <header className="page-hero relative overflow-hidden">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
+          style={{ backgroundImage: "url('/brandkit/heroidea.png')" }}
+          aria-hidden="true"
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-[var(--bg)] via-transparent to-[var(--bg)]"
+          aria-hidden="true"
+        />
+        <div className="wrap relative z-10">
           <span className="page-kicker">
             <span className="diamond" />
             {t("kicker")}
@@ -94,29 +103,19 @@ export default async function AboutPage({ params }: Props) {
         <div className="wrap">
           {/* mascot lives outside Reveal: its transform would trap the
               screen-blend that sinks the art's black matte into the page */}
-          <div className="about-grid">
-            <Reveal>
-              <div className="sec-label">
-                <span className="idx">01</span>
-                <span>{t("sec1")}</span>
-              </div>
-              <ReadMore moreLabel={t("moreLabel")} lessLabel={t("lessLabel")}>
-                <Statement className="mission-statement mt-[52px]" text={t("lede")} />
-                <Statement
-                  className="mission-note mt-10 max-w-[60ch] text-[15.5px] leading-[1.68] text-(--muted-fg)"
-                  text={t("note")}
-                />
-              </ReadMore>
-            </Reveal>
-            <div className="about-mascot" aria-hidden="true">
-              <Image
-                src="/brandkit/Gárgula Mecânica Dourada em Pose Dominante.png"
-                alt=""
-                width={1024}
-                height={1536}
-              />
+          <Reveal>
+            <div className="sec-label">
+              <span className="idx">01</span>
+              <span>{t("sec1")}</span>
             </div>
-          </div>
+            <ReadMore moreLabel={t("moreLabel")} lessLabel={t("lessLabel")}>
+              <Statement className="mission-statement mt-[52px]" text={t("lede")} />
+              <Statement
+                className="mission-note mt-10 max-w-[60ch] text-[15.5px] leading-[1.68] text-(--muted-fg)"
+                text={t("note")}
+              />
+            </ReadMore>
+          </Reveal>
         </div>
       </section>
 

src/app/[locale]/careers/page.tsx

@@ -5,7 +5,7 @@ import { SiteNav } from "@/components/SiteNav";
 import { SiteFooter } from "@/components/SiteFooter";
 import { Statement } from "@/components/Statement";
 import { CareersBoard } from "@/components/CareersBoard";
-import { CtaBand } from "@/components/CtaBand";
+import { Reveal } from "@/components/Reveal";
 import { VAGAS } from "@/data/vagas";
 import type { Locale } from "@/i18n/routing";
 
@@ -31,31 +31,30 @@ export default async function CareersPage({ params }: Props) {
     <>
       <SiteNav locale={locale as Locale} pathname="/careers" />
 
-      <header className="page-hero page-hero--split">
-        <div className="wrap page-hero-grid">
-          <div>
-            <span className="page-kicker">
-              <span className="diamond" />
-              {t("kicker")}
-            </span>
-            <h1
-              dangerouslySetInnerHTML={{
-                __html: t
-                  .raw("h1")
-                  .replaceAll("<gold>", '<span class="gold">')
-                  .replaceAll("</gold>", "</span>"),
-              }}
-            />
-            <Statement className="page-lede" text={t("lede")} />
-          </div>
-          <div className="page-hero-art" aria-hidden="true">
-            <Image
-              src="/brandkit/Gárgula Cibernética de Asas Neon.png"
-              alt=""
-              width={1024}
-              height={1536}
-            />
-          </div>
+      <header className="page-hero relative overflow-hidden">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
+          style={{ backgroundImage: "url('/brandkit/heroidea.png')" }}
+          aria-hidden="true"
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-[var(--bg)] via-transparent to-[var(--bg)]"
+          aria-hidden="true"
+        />
+        <div className="wrap relative z-10">
+          <span className="page-kicker">
+            <span className="diamond" />
+            {t("kicker")}
+          </span>
+          <h1
+            dangerouslySetInnerHTML={{
+              __html: t
+                .raw("h1")
+                .replaceAll("<gold>", '<span class="gold">')
+                .replaceAll("</gold>", "</span>"),
+            }}
+          />
+          <Statement className="page-lede" text={t("lede")} />
         </div>
       </header>
 
@@ -77,9 +76,29 @@ export default async function CareersPage({ params }: Props) {
         </div>
       </section>
 
-      <section className="section-dark">
-        <div className="wrap">
-          <CtaBand heading={t("ctaH2")} href="mailto:[email protected]" cta="[email protected]" />
+      <section id="contato" className="contact-banner">
+        <Image
+          src="/brandkit/Gárgula Cibernética e Matriz BináriaCOntact.png"
+          alt=""
+          width={1916}
+          height={821}
+          className="contact-banner-bg"
+          aria-hidden="true"
+        />
+        <div className="contact-banner-overlay">
+          <Reveal>
+            <h2>{t("ctaH2")}</h2>
+            <div className="btn-row">
+              <a
+                href="mailto:[email protected]"
+                className="btn-tactical"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                [email protected]
+              </a>
+            </div>
+          </Reveal>
         </div>
       </section>
 

src/app/[locale]/layout.tsx

@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 import { routing } from "@/i18n/routing";
 import { inter, bricolage } from "@/fonts";
 import { RightClickGuard } from "@/components/RightClickGuard";
+import { ScrambleFx } from "@/components/ScrambleFx";
 import "../globals.css";
 
 export function generateStaticParams() {
@@ -45,6 +46,7 @@ export default async function LocaleLayout({
       <body className="antialiased">
         <NextIntlClientProvider locale={locale}>{children}</NextIntlClientProvider>
         <RightClickGuard />
+        <ScrambleFx />
       </body>
     </html>
   );

src/app/[locale]/page.tsx

@@ -106,8 +106,14 @@ export default async function LandingPage({ params }: Props) {
 
       <header className="hero">
         <HeroFx />
-        <div className="wrap hero-grid">
-          <div className="hero-copy">
+        <div
+          className="absolute inset-0 bg-cover bg-[center_right] bg-no-repeat opacity-50"
+          style={{ backgroundImage: "url('/brandkit/Fortaleza Cibernética em Rede Gráfica.png')" }}
+          aria-hidden="true"
+        />
+        <div className="hero-scrim" aria-hidden="true" />
+        <div className="wrap relative z-10">
+          <div className="hero-copy flex flex-col items-center text-center md:items-start md:text-left">
             <h1>
               <span className="lead">{tHero("lead")}</span>{" "}
               <span className="gold glitch">
@@ -134,17 +140,6 @@ export default async function LandingPage({ params }: Props) {
               dangerouslySetInnerHTML={{ __html: withSentenceBreaks(tHero.raw("note")) }}
             />
           </div>
-          {/* swap to /brandkit/effront_gargoyle_hero.svg (official hero mascot)
-              once the file is restored — it vanished from public/brandkit */}
-          <div className="hero-art" aria-hidden="true">
-            <Image
-              src="/brandkit/Gárgula Mecânica com Hologramas Cibernéticos.png"
-              alt=""
-              width={1374}
-              height={1145}
-              priority
-            />
-          </div>
         </div>
       </header>
 
@@ -170,11 +165,20 @@ export default async function LandingPage({ params }: Props) {
         </div>
       </section>
 
-      <section id="servicos" className="has-ghost">
+      <section id="servicos" className="has-ghost relative overflow-hidden">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+          style={{ backgroundImage: "url('/brandkit/heroidea.png')" }}
+          aria-hidden="true"
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-[var(--bg)] via-transparent to-[var(--bg)]"
+          aria-hidden="true"
+        />
         <span className="ghost-word" aria-hidden="true">
           {tServ("sectionLabel")}
         </span>
-        <div className="wrap">
+        <div className="wrap relative z-10">
           <Reveal>
             <div className="sec-label">
               <span className="idx">02</span>

src/app/[locale]/services/page.tsx

@@ -40,12 +40,19 @@ export default async function ServicesPage({ params }: Props) {
 
       <header className="page-hero">
         <div className="wrap">
-          <span className="page-kicker">
-            <span className="diamond" />
-            {tServ("sectionLabel")}
-          </span>
-          <h1>{tServ("heading")}</h1>
-          <Statement className="page-lede" text={tServ("pageIntro")} />
+          <div className="page-hero-grid">
+            <div>
+              <span className="page-kicker">
+                <span className="diamond" />
+                {tServ("sectionLabel")}
+              </span>
+              <h1>{tServ("heading")}</h1>
+              <Statement className="page-lede" text={tServ("pageIntro")} />
+            </div>
+            <div className="page-hero-art" aria-hidden="true">
+              <Image src="/illustrations/sophistication.svg" alt="" width={800} height={600} />
+            </div>
+          </div>
         </div>
       </header>
 

src/app/globals.css

@@ -232,7 +232,10 @@ button:focus-visible {
   background: var(--bg);
 }
 .mobile-nav-link {
-  padding: 12px 0;
+  padding: 14px 8px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
   font-family: var(--font-mono);
   font-size: 15px;
   font-weight: 600;
@@ -362,12 +365,56 @@ button:focus-visible {
     display: none;
   }
 }
+.hero-illustration {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 55%;
+  max-width: 700px;
+  opacity: 0.15;
+  pointer-events: none;
+}
+.hero-illustration img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+@media (max-width: 860px) {
+  .hero-illustration {
+    width: 90%;
+    opacity: 0.1;
+  }
+}
+.hero-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(
+    to left,
+    transparent 10%,
+    rgba(3, 7, 18, 0.55) 35%,
+    rgba(3, 7, 18, 0.92) 55%,
+    #030712 80%
+  );
+}
+@media (max-width: 860px) {
+  .hero-scrim {
+    background: linear-gradient(
+      to bottom,
+      rgba(3, 7, 18, 0.3) 0%,
+      rgba(3, 7, 18, 0.75) 50%,
+      #030712 90%
+    );
+  }
+}
 .hero .wrap {
   position: relative;
 }
 .hero-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
+  grid-template-columns: 1fr;
   align-items: start;
   gap: 30px;
 }
@@ -1317,7 +1364,7 @@ footer .wrap {
 /* ── secondary page hero (careers / news / privacy / media-kit) ── */
 .page-hero {
   position: relative;
-  padding: 88px 0 56px;
+  padding: 180px 0 100px;
   border-bottom: 1px solid var(--border);
   overflow: hidden;
 }

src/components/ScrambleFx.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect } from "react";
+
+const CHARS = "!@#$%&*<>{}[]=/\\|?~^";
+const DURATION = 500;
+
+function scramble(el: HTMLElement) {
+  const original = el.textContent ?? "";
+  if (!original.trim()) return;
+
+  const start = performance.now();
+  let raf: number;
+
+  const tick = (now: number) => {
+    const progress = Math.min((now - start) / DURATION, 1);
+    const resolved = Math.floor(progress * original.length);
+
+    el.textContent = original
+      .split("")
+      .map((ch, i) => {
+        if (ch === " ") return " ";
+        if (i < resolved) return original[i];
+        return CHARS[Math.floor(Math.random() * CHARS.length)];
+      })
+      .join("");
+
+    if (progress < 1) {
+      raf = requestAnimationFrame(tick);
+    } else {
+      el.textContent = original;
+    }
+  };
+
+  raf = requestAnimationFrame(tick);
+
+  const cleanup = () => {
+    cancelAnimationFrame(raf);
+    el.textContent = original;
+    el.removeEventListener("mouseleave", cleanup);
+  };
+  el.addEventListener("mouseleave", cleanup);
+}
+
+export function ScrambleFx() {
+  useEffect(() => {
+    const onEnter = (e: Event) => {
+      const target = (e.target as HTMLElement).closest(".btn-tactical");
+      if (target instanceof HTMLElement) scramble(target);
+    };
+
+    document.addEventListener("mouseenter", onEnter, true);
+    return () => document.removeEventListener("mouseenter", onEnter, true);
+  }, []);
+
+  return null;
+}