refactor: improve AgentUseCase layout and typography with responsive background image

- Added leading-normal to CT text component for better readability
- Changed AgentHeroAlt background image to only display on md+ screens using md:bg-[url(...)] classes
- Removed inline style attribute in favor of Tailwind classes for background image
- Updated AgentUseCase to use typography components (H3, CT, CP) instead of generic elements
- Changed Eyebrow color from text-cyan-600 to text-cyan-500
- Adjuste

src/pages/agents/AgentHeroAlt.tsx

@@ -8,8 +8,7 @@ export function AgentHeroAlt() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
-        style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-24">