feat: new design

components/agents.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import { CheckCircle2 } from 'lucide-react'
 
 const agents = [
   { name: 'Claude Code', icon: '/agents/anthropics.png', url: 'https://docs.anthropic.com/en/docs/claude-code' },
@@ -19,18 +18,14 @@ export function Agents() {
     <section className="py-24 px-6 border-t border-border/30">
       <div className="mx-auto max-w-5xl">
         <div className="max-w-2xl mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <CheckCircle2 className="h-4 w-4 text-primary" />
-            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
-              Compatibility
-            </span>
-          </div>
-          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
+          <span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
+            Compatibility
+          </span>
+          <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
             Works with every agent.
           </h2>
-          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
-            All agents work perfectly inside their sandbox but can&apos;t impact anything outside
-            it. No agent-specific configuration needed.
+          <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
+            Greywall sits under the agent process. If the tool runs locally, it can run inside the same filesystem and network boundaries without agent-specific setup.
           </p>
         </div>