feat(marketing): redesign landing as "trusted infrastructure"

Re-skins the playful/consumer feel into disciplined agent-infrastructure,
keeping the animated hero canvas (re-themed) and adding the hierarchy story.

- Palette: re-point coral→ember (#E0584A); add ink/surface/mist/slate-light/
  azure/teal tokens. One accent per viewport; retire the black/coral split-
  headline pattern across all 8 headings (single ink color).
- Typography: hero/section weights 800→~650-675, tighter tracking, smaller
  hero size; uppercase eyebrow label.
- Hero: dark ink base with glowing azure/indigo + faint ember canvas blooms;
  light copy; new positioning ("Build safe, scalable agentic systems" + the
  single-agent-to-company subhead); ember primary CTA + ghost "Read the docs".
- Imagery overhaul (code-built, no mascots): AgentToken chips (CrewStrip,
  OneClick card, footer), AlwaysOn rebuilt as a terminal/log with an approval
  line, SkillsShowcase as duotone lucide cards on Mist, Security as a shield/
  lock motif.
- New HierarchyDiagram section ("One agent, or a whole org chart"): SVG org
  chart with an azure active path and teal human-approval checkpoints on
  sandbox-leaving actions.
- Tests: dark-hero/terminal/eyebrow contrast fixed to AA; refreshed the
  marketing @visual baseline (hero masked).

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

frontend/src/components/marketing/Sections.tsx

@@ -1,24 +1,24 @@
+import { Lock, Package, Share2, ShieldCheck, Wand2 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
+import { AgentToken } from "./AgentToken";
 import { HeroAmbient } from "./HeroAmbient";
 
 /* Marketing landing — WorkClaw's full section layout/styling reproduced 1:1,
    Clawmates-branded with honest claims (no borrowed customer logos, no
    unverified SOC 2). Measurements/colours lifted from the live source.
-   Coral text on light fills uses the AA-safe `coral-strong`; #e95656 stays on
+   Coral text on light fills uses the AA-safe `coral-strong`; #e0584a stays on
    dark fills and solid buttons. */
 
 const ctaCoral =
-  "inline-flex items-center justify-center rounded-full bg-marketing-coral-strong font-semibold text-white transition-colors hover:bg-[#bd2d2d]";
-const ctaGhost =
-  "inline-flex items-center justify-center rounded-full bg-white font-semibold text-[#0f172a] transition-colors hover:bg-[#f1f3f7]";
+  "inline-flex items-center justify-center rounded-full bg-marketing-coral-strong font-semibold text-white transition-colors hover:bg-[#a63a2f]";
 
 /* ---------- Hero ---------- */
 export function Hero() {
   return (
     <section
-      className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#ebf4fd] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
+      className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#0b1220] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
       style={{ zIndex: 2 }}
     >
       {/* Animated ambient backdrop (replaces the hero illustration). */}
@@ -27,44 +27,56 @@ export function Hero() {
         className="absolute left-1/2 flex w-full max-w-[720px] -translate-x-1/2 flex-col items-center px-6 text-center"
         style={{ top: "clamp(160px, 12.0139vw, 173px)", gap: 48, zIndex: 2 }}
       >
-        <div className="flex flex-col items-center" style={{ gap: 13 }}>
+        <div className="flex flex-col items-center" style={{ gap: 16 }}>
+          <span
+            className="font-[500] uppercase"
+            style={{ color: "#94a3b8", fontSize: 13, letterSpacing: "0.16em" }}
+          >
+            Agentic infrastructure
+          </span>
           <h1
-            className="m-0 font-extrabold"
+            className="m-0 font-[675]"
             style={{
-              color: "#161d27",
-              fontSize: "clamp(49px, 6.667vw, 96px)",
-              lineHeight: 0.9,
-              letterSpacing: "-0.04em",
+              color: "#f5f8fc",
+              fontSize: "clamp(40px, 5vw, 64px)",
+              lineHeight: 1.02,
+              letterSpacing: "-0.02em",
             }}
           >
-            Scale your
-            <br />
-            <span className="text-marketing-coral-strong">Large World</span>
+            Build safe, scalable
+            <br className="hidden sm:inline" /> agentic systems
           </h1>
           <p
             className="m-0 font-medium"
             style={{
-              color: "#475569",
-              fontSize: "clamp(16px, 1.944vw, 28px)",
-              lineHeight: 1.3,
-              letterSpacing: "-0.04em",
-              maxWidth: 659,
+              color: "#cbd5e1",
+              fontSize: "clamp(16px, 1.6vw, 22px)",
+              lineHeight: 1.45,
+              letterSpacing: "-0.01em",
+              maxWidth: 620,
             }}
           >
-            Building safe and scalable systems of claws for any domain of work.
+            From a single agent to an entire company of them — with the
+            hierarchy, controls, and human approvals to run them safely in
+            production.
           </p>
         </div>
         <div
-          className="flex w-full flex-col items-stretch justify-center px-4 sm:flex-row sm:items-start sm:px-0"
-          style={{ gap: 16, maxWidth: 538 }}
+          className="flex w-full flex-col items-stretch justify-center px-4 sm:flex-row sm:items-center sm:px-0"
+          style={{ gap: 16, maxWidth: 460 }}
         >
           <a
             href="mailto:[email protected]"
-            className={`${ctaGhost} h-14 border border-[#e2e8f0] px-10 text-base sm:h-16`}
-            style={{ filter: "drop-shadow(0 4px 12px rgba(22,29,39,0.08))" }}
+            className={`${ctaCoral} h-14 px-10 text-base sm:h-16`}
           >
             Book a demo
           </a>
+          <a
+            href="https://git.redclaw.dev/osobh/clawmates"
+            className="inline-flex h-14 items-center justify-center rounded-full border border-white/25 px-10 text-base font-semibold text-white transition-colors hover:bg-white/10 sm:h-16"
+          >
+            Read the docs
+          </a>
         </div>
       </div>
       {/* Soft fade into the white section below. */}
@@ -77,25 +89,38 @@ export function Hero() {
   );
 }
 
-/* ---------- Crew strip (honest replacement for the company-logo marquee) ---------- */
+/* ---------- Crew strip (agent-token roster on the open Claw runtime) ---------- */
+const CREW = [
+  "Marketing Claw",
+  "Support Claw",
+  "Research Claw",
+  "Engineering Claw",
+  "Ops Claw",
+  "Growth Claw",
+  "Analytics Claw",
+  "Design Claw",
+];
+
 export function CrewStrip() {
   return (
-    <div className="relative w-full" style={{ zIndex: 1 }}>
-      <div className="relative z-[1] flex flex-col items-center gap-6 pt-8 pb-14 lg:gap-8">
+    <div className="relative w-full bg-white" style={{ zIndex: 1 }}>
+      <div className="relative z-[1] mx-auto flex max-w-[1120px] flex-col items-center gap-7 px-6 pt-10 pb-14">
         <p className="text-center text-[16px] font-semibold text-[#647289]">
           A whole crew, built on the open{" "}
           <span className="text-marketing-coral-strong">Claw</span> runtime
         </p>
-        <div className="w-full overflow-hidden opacity-75">
-          <Image
-            src="/images/marketing/claw-carousel-strip.png"
-            alt="The clawmate crew"
-            width={4096}
-            height={123}
-            unoptimized
-            sizes="100vw"
-            className="block h-auto w-full max-w-none"
-          />
+        <div className="flex w-full flex-wrap items-center justify-center gap-2.5">
+          {CREW.map((name) => (
+            <div
+              key={name}
+              className="flex items-center gap-2.5 rounded-2xl border border-marketing-border bg-white px-3 py-2"
+            >
+              <AgentToken name={name} size={30} />
+              <span className="text-[13px] font-medium whitespace-nowrap text-marketing-ink">
+                {name}
+              </span>
+            </div>
+          ))}
         </div>
       </div>
     </div>
@@ -118,14 +143,14 @@ export function Pitch() {
     >
       <div className="flex w-full max-w-[874px] flex-col items-center gap-[40px]">
         <h2
-          className="w-[348px] text-center text-[40px] leading-none font-extrabold tracking-[-1.6px] sm:w-[600px] sm:text-[50px] lg:w-[874px] lg:text-[64px] lg:tracking-[-2.56px]"
+          className="w-[348px] text-center text-[40px] leading-none font-[650] tracking-[-1.6px] sm:w-[600px] sm:text-[50px] lg:w-[874px] lg:text-[64px] lg:tracking-[-2.56px]"
           style={{ color: "#161d27" }}
         >
           Multiply your brainpower
           <br className="hidden lg:block" /> with a team of custom,
           <br className="hidden lg:block" /> collaborative{" "}
           <br className="inline sm:hidden" />
-          <span className="text-marketing-coral">AI coworkers</span>
+          AI coworkers
         </h2>
         <div className="grid grid-cols-2 justify-items-center gap-x-4 gap-y-8 sm:grid-cols-4 lg:gap-x-0 lg:gap-y-0">
           {BADGES.map((b) => (
@@ -165,10 +190,10 @@ export function OneClick() {
           <div className="relative" style={{ width: 137, height: 64 }}>
             <div
               className="absolute top-0 left-0 flex items-center justify-center bg-white"
-              style={{ width: 64, height: 64, borderRadius: 16, border: "2px dashed #e95656" }}
+              style={{ width: 64, height: 64, borderRadius: 16, border: "2px dashed #e0584a" }}
             >
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
-                <path d="M12 5v14M5 12h14" stroke="#e95656" strokeWidth="2.5" strokeLinecap="round" />
+                <path d="M12 5v14M5 12h14" stroke="#e0584a" strokeWidth="2.5" strokeLinecap="round" />
               </svg>
             </div>
             <svg
@@ -183,10 +208,10 @@ export function OneClick() {
           </div>
           <div className="flex max-w-[623px] flex-col gap-4">
             <h2
-              className="m-0 font-extrabold"
+              className="m-0 font-[650]"
               style={{ color: "#161d27", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}
             >
-              <span className="text-marketing-coral">One-click </span>setup
+              One-click setup
             </h2>
             <p
               className="m-0 max-w-[448px] font-medium"
@@ -203,19 +228,10 @@ export function OneClick() {
             style={{ width: 375, maxWidth: "100%", backgroundColor: "white", border: "1px solid #e2e8f0", borderRadius: 32, boxShadow: "0px 17px 40px 0px rgba(0,0,0,0.1)" }}
           >
             <div
-              className="relative flex w-full items-end justify-center overflow-hidden"
-              style={{ height: 208, backgroundColor: "#bfd2ff" }}
+              className="relative flex w-full items-center justify-center overflow-hidden"
+              style={{ height: 168, background: "linear-gradient(160deg, #1e293b, #0b1220)" }}
             >
-              <Image
-                src="/images/marketing/support-claw.png"
-                alt="A clawmate"
-                width={1530}
-                height={1830}
-                unoptimized
-                sizes="156px"
-                className="object-contain object-bottom"
-                style={{ width: 156, height: 187 }}
-              />
+              <AgentToken name="Sandy Clawson" size={76} />
             </div>
             <div className="flex w-full flex-col gap-6 px-6">
               <div className="flex flex-col gap-4">
@@ -232,7 +248,7 @@ export function OneClick() {
                 {["Shared with your team", "Talks with other Claws"].map((row) => (
                   <div key={row} className="flex items-center justify-between">
                     <span className="font-medium" style={{ color: "#475569", fontSize: 14, letterSpacing: "-0.02em" }}>{row}</span>
-                    <span aria-hidden className="inline-flex items-center justify-end" style={{ width: 36, height: 20, padding: 2, borderRadius: 9999, backgroundColor: "#e95656" }}>
+                    <span aria-hidden className="inline-flex items-center justify-end" style={{ width: 36, height: 20, padding: 2, borderRadius: 9999, backgroundColor: "#e0584a" }}>
                       <span className="block" style={{ width: 16, height: 16, borderRadius: 9999, backgroundColor: "white", boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.4), 0px 1px 3px 0px rgba(0,0,0,0.1)" }} />
                     </span>
                   </div>
@@ -272,8 +288,8 @@ export function Works() {
               <img src="/images/marketing/icon-slack.svg" alt="" style={{ width: 46, height: 46 }} />
             </div>
             <div className="flex max-w-[623px] flex-col gap-4">
-              <h2 className="m-0 font-extrabold" style={{ color: "#0f172a", fontSize: "clamp(32px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
-                Works <span className="text-marketing-coral">where you do</span>
+              <h2 className="m-0 font-[650]" style={{ color: "#0f172a", fontSize: "clamp(32px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
+                Works where you do
               </h2>
               <p className="m-0 max-w-[524px] font-medium" style={{ color: "rgba(10,15,30,0.75)", fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.6 }}>
                 Each clawmate has their own computer and can collaborate over
@@ -321,8 +337,8 @@ export function AlwaysOn() {
         <div className="relative z-10 flex min-w-0 flex-1 flex-col items-start justify-center gap-8 lg:justify-start lg:pt-[88px]">
           <img src="/images/moon.svg" alt="" width={61} height={64} className="block" />
           <div className="flex max-w-[623px] flex-col gap-4">
-            <h2 className="m-0 font-extrabold" style={{ color: "#f8fafc", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
-              Always <span className="text-marketing-coral">on</span>
+            <h2 className="m-0 font-[650]" style={{ color: "#f8fafc", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
+              Always on
             </h2>
             <p className="m-0 max-w-[496px] font-medium" style={{ color: "#cbd5e1", fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.6 }}>
               Your team of clawmates get real work done
@@ -331,12 +347,46 @@ export function AlwaysOn() {
             </p>
           </div>
         </div>
-        <div className="relative flex min-w-0 flex-1 items-center justify-center lg:items-stretch lg:justify-stretch">
-          <div className="relative w-full lg:hidden" style={{ maxWidth: 543, aspectRatio: "449 / 496" }}>
-            <Image src="/images/marketing/always-composite.png" alt="A clawmate working through the night" fill unoptimized sizes="543px" className="object-contain" />
-          </div>
-          <div className="relative hidden w-full lg:block lg:self-stretch">
-            <Image src="/images/marketing/always-composite-desktop.png" alt="A clawmate working through the night" fill unoptimized sizes="50vw" className="object-cover object-center" />
+        <div className="relative z-10 flex min-w-0 flex-1 items-center justify-center lg:py-[64px] lg:pr-[64px]">
+          <div className="w-full max-w-[520px] overflow-hidden rounded-2xl border border-white/10 bg-[#0b1220] font-mono text-[12.5px] leading-relaxed shadow-2xl">
+            <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3">
+              <span className="size-2.5 rounded-full bg-white/20" />
+              <span className="size-2.5 rounded-full bg-white/20" />
+              <span className="size-2.5 rounded-full bg-white/20" />
+              <span className="ml-2 text-[11px] text-marketing-slate-light">
+                marketing-claw · activity
+              </span>
+            </div>
+            <div className="flex flex-col gap-1.5 px-4 py-4 text-marketing-slate-light">
+              <p>
+                <span className="text-marketing-slate-light">02:14</span>{" "}
+                <span className="text-marketing-azure">→</span> drafting the weekly
+                report…
+              </p>
+              <p>
+                <span className="text-marketing-slate-light">02:15</span>{" "}
+                <span className="text-marketing-azure">→</span> querying the
+                analytics warehouse
+              </p>
+              <p>
+                <span className="text-marketing-slate-light">02:17</span>{" "}
+                <span className="text-marketing-teal">✓</span> 3 tool calls
+                completed
+              </p>
+              <p className="rounded-md bg-white/[0.04] px-2 py-1.5">
+                <span className="text-marketing-teal">●</span> awaiting human
+                approval — <span className="text-white">send email → team@</span>
+              </p>
+              <p>
+                <span className="text-marketing-slate-light">02:19</span>{" "}
+                <span className="text-marketing-teal">✓</span> approved by you ·
+                sent
+              </p>
+              <p className="flex items-center gap-2 text-marketing-slate-light">
+                <span className="inline-block size-2 rounded-full bg-marketing-teal" />
+                running while you sleep
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -350,64 +400,54 @@ export function SkillsShowcase() {
     <div className="relative w-screen" style={{ left: "50%", marginLeft: "-50vw" }}>
       <section
         id="deck"
-        className="flex w-full scroll-mt-24 flex-col items-center overflow-x-hidden bg-[#ebf4fd] px-6 pt-[104px] pb-[104px] sm:pt-[176px] sm:pb-[200px]"
+        className="flex w-full scroll-mt-24 flex-col items-center overflow-x-hidden bg-marketing-mist px-6 pt-[104px] pb-[104px] sm:pt-[176px] sm:pb-[200px]"
       >
         <div className="flex w-full flex-col items-center gap-[56px]" style={{ maxWidth: 1014 }}>
           <div className="flex max-w-[544px] flex-col items-center gap-4">
-            <h2 className="text-center text-[32px] leading-none font-extrabold tracking-[-1.28px] text-[#161d27] sm:text-[48px] sm:tracking-[-2.24px] lg:text-[56px]">
-              Your work, <span className="text-marketing-coral-strong">your way</span>
+            <h2 className="text-center text-[32px] leading-none font-[650] tracking-[-1.28px] text-[#161d27] sm:text-[48px] sm:tracking-[-2.24px] lg:text-[56px]">
+              Your work, your way
             </h2>
             <p className="max-w-[468px] text-center text-[18px] leading-[1.6] font-medium text-[#0a0f1e]/75 sm:text-[20px]">
               Teach your clawmates to work the way your company does. Share skills
               with your whole team.
             </p>
           </div>
-          {/* Desktop */}
-          <div className="hidden w-full sm:block">
-            <div className="relative w-full" style={{ aspectRatio: "1014 / 165" }}>
-              <div className="absolute top-0 left-1/2 -translate-x-1/2 rounded-[16px] bg-[#56b1e9]" style={{ width: "24.46%", aspectRatio: "248 / 163" }} />
-              <img src="/images/marketing/skills-left.gif" alt="Create skill illustration" className="absolute" style={{ left: "3%", top: "10%", width: "19.7%" }} />
-              <img src="/images/marketing/skills-center-desktop.svg" alt="" className="absolute left-1/2 z-10 -translate-x-1/2" style={{ top: "6%", width: "60.65%" }} />
-              <img src="/images/marketing/skills-right.gif" alt="Share skills illustration" className="absolute" style={{ right: "3%", top: "10%", width: "19.7%" }} />
-            </div>
-            <div className="mt-4 flex w-full items-start">
-              <div className="flex w-[23%] flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Create any new skill</h3>
-                <p className="max-w-[241px] text-[14px] leading-[1.4] text-[#161d27]">Turn your team&apos;s workflows into custom skills simply by chatting.</p>
+          <div className="grid w-full gap-6 sm:grid-cols-3">
+            {[
+              {
+                Icon: Wand2,
+                title: "Create any new skill",
+                body: "Turn your team's workflows into custom skills simply by chatting.",
+              },
+              {
+                Icon: Package,
+                title: "Install our skill packs",
+                body: "Get started with our library of battle-tested skills. Tweak as you need.",
+              },
+              {
+                Icon: Share2,
+                title: "Share skills easily",
+                body: "Your team builds once and gets the benefits of AI together.",
+              },
+            ].map(({ Icon, title, body }) => (
+              <div
+                key={title}
+                className="flex flex-col items-center gap-4 rounded-3xl border border-marketing-border bg-white px-6 py-10 text-center"
+              >
+                <span
+                  className="flex size-14 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: "rgba(59,130,246,0.1)" }}
+                >
+                  <Icon aria-hidden size={26} strokeWidth={1.75} className="text-marketing-azure" />
+                </span>
+                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-marketing-ink">
+                  {title}
+                </h3>
+                <p className="max-w-[260px] text-[14px] leading-[1.5] text-marketing-slate">
+                  {body}
+                </p>
               </div>
-              <div className="flex flex-1 flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Install our skill packs</h3>
-                <p className="max-w-[272px] text-[14px] leading-[1.4] text-[#161d27]">Get started with our library of battle-tested skills. Tweak as you need.</p>
-              </div>
-              <div className="flex w-[27%] flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Share skills easily</h3>
-                <p className="max-w-[247px] text-[14px] leading-[1.4] text-[#161d27]">Your team builds once and gets the benefits of AI together.</p>
-              </div>
-            </div>
-          </div>
-          {/* Mobile */}
-          <div className="flex w-full flex-col items-center gap-[80px] sm:hidden">
-            <div className="flex flex-col items-center gap-4">
-              <img src="/images/marketing/skills-left.gif" alt="Create skill illustration" className="h-auto w-[160px]" />
-              <div className="flex flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Create any new skill</h3>
-                <p className="max-w-[241px] text-[14px] leading-[1.4] text-[#161d27]">Turn your team&apos;s workflows into custom skills simply by chatting.</p>
-              </div>
-            </div>
-            <div className="flex flex-col items-center gap-4">
-              <img src="/images/marketing/skills-center-desktop.svg" alt="" className="h-auto w-[300px]" />
-              <div className="flex flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Install our skill packs</h3>
-                <p className="max-w-[272px] text-[14px] leading-[1.4] text-[#161d27]">Get started with our library of battle-tested skills. Tweak as you need.</p>
-              </div>
-            </div>
-            <div className="flex flex-col items-center gap-4">
-              <img src="/images/marketing/skills-right.gif" alt="Share skills illustration" className="h-auto w-[160px]" />
-              <div className="flex flex-col items-center gap-2 text-center">
-                <h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Share skills easily</h3>
-                <p className="max-w-[247px] text-[14px] leading-[1.4] text-[#161d27]">Your team builds once and gets the benefits of AI together.</p>
-              </div>
-            </div>
+            ))}
           </div>
         </div>
       </section>
@@ -428,21 +468,27 @@ export function Security() {
     <section id="security" className="flex w-full flex-col items-center px-6 py-[104px] sm:py-[128px]">
       <div className="flex w-full max-w-[1100px] flex-col items-center gap-10">
         <div className="flex flex-col items-center gap-4 text-center">
-          <h2 className="text-[36px] leading-none font-extrabold tracking-[-2.24px] text-[#161d27] sm:text-[48px] lg:text-[56px]">
-            Enhanced <span className="text-marketing-coral">security</span>
+          <h2 className="text-[36px] leading-none font-[650] tracking-[-2.24px] text-[#161d27] sm:text-[48px] lg:text-[56px]">
+            Enhanced security
           </h2>
           <p className="max-w-[484px] text-[18px] leading-[1.6] text-[#0a0f1e]/75 sm:text-[20px]">
             Clawmates is built for security-minded teams, adding a layer of
             control and safety on top of the open Claw runtime.
           </p>
         </div>
-        <div className="flex items-center justify-center gap-[14px]">
-          <div className="h-[140px] sm:h-[170px] lg:h-[198px]">
-            <img src="/images/marketing/security-hand-key.png" alt="Hand inserting a key into a vault" className="h-full w-auto" />
-          </div>
-          <div className="-my-[10px] h-[154px] sm:-my-[12px] sm:h-[186px] lg:-my-[14px] lg:h-[217px]">
-            <img src="/images/marketing/key-snap.gif" alt="A clawmate securing a vault" className="h-full w-auto" />
-          </div>
+        <div className="flex items-center justify-center py-2">
+          <span
+            className="relative flex items-center justify-center rounded-[28px] border border-marketing-border bg-marketing-mist"
+            style={{ width: 132, height: 132 }}
+          >
+            <ShieldCheck aria-hidden size={64} strokeWidth={1.5} className="text-marketing-azure" />
+            <span
+              className="absolute -right-2 -bottom-2 flex size-9 items-center justify-center rounded-full bg-marketing-teal text-white"
+              style={{ boxShadow: "0 6px 16px rgba(20,184,166,0.4)" }}
+            >
+              <Lock aria-hidden size={16} strokeWidth={2} />
+            </span>
+          </span>
         </div>
         <div className="grid w-full grid-cols-1 gap-10 pt-8 sm:grid-cols-2 lg:grid-cols-4">
           {SECURITY.map((s) => (
@@ -474,8 +520,18 @@ export function Footer() {
       <div className="relative flex w-full flex-col items-center overflow-hidden bg-[#f9fbff] px-6 pt-[127px] pb-[160px] sm:pb-[120px]">
         <div className="absolute inset-0 h-full w-full opacity-[0.07]" style={{ backgroundImage: "url('/images/marketing/dot-pattern.svg')", backgroundSize: "cover", backgroundPosition: "center" }} />
         <div className="relative flex w-full max-w-[561px] flex-col items-center gap-[40px] sm:gap-[56px]">
-          <img src="/images/marketing/footer-team.svg" alt="A team working together" className="h-auto w-[140px] sm:w-[190px]" />
-          <h2 className="text-center text-[40px] leading-none font-extrabold tracking-[-2.56px] text-[#161d27] sm:text-[56px] lg:text-[64px]">
+          <div className="flex items-center justify-center gap-2.5">
+            {[
+              { n: "Marketing Claw", a: "#3b82f6" },
+              { n: "Support Claw", a: "#14b8a6" },
+              { n: "Research Claw", a: "#3b82f6" },
+              { n: "Ops Claw", a: "#3b82f6" },
+              { n: "Growth Claw", a: "#14b8a6" },
+            ].map(({ n, a }) => (
+              <AgentToken key={n} name={n} size={44} accent={a} />
+            ))}
+          </div>
+          <h2 className="text-center text-[40px] leading-none font-[650] tracking-[-2.56px] text-[#161d27] sm:text-[56px] lg:text-[64px]">
             Build your AI crew
           </h2>
           <div className="flex w-full max-w-[454px] flex-col gap-4 sm:flex-row">