diff --git a/app/page.tsx b/app/page.tsx
index 239a4e5..02893a9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,18 @@
-import { Hero } from "@/components/sections";
-import dynamic from "next/dynamic";
+import {
+  Hero,
+  ValueProposition,
+  Services,
+  HowWeWork,
+  EngagementModels,
+  FeaturedCaseStudies,
+  Testimonials,
+  Stats,
+  AboutTeaser,
+  FAQ,
+  CTA,
+} from "@/components/sections";
 import { getNotionFeaturedCaseStudies } from "@/lib/notion-case-studies";
 
-// Dynamically import below-fold sections for better initial bundle size
-const ValueProposition = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.ValueProposition })));
-const Services = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Services })));
-const HowWeWork = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.HowWeWork })));
-const EngagementModels = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.EngagementModels })));
-const FeaturedCaseStudies = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FeaturedCaseStudies })));
-const Testimonials = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Testimonials })));
-const Stats = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Stats })));
-const AboutTeaser = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.AboutTeaser })));
-const FAQ = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FAQ })));
-const CTA = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.CTA })));
-
 // Force static generation at build time
 export const dynamic = "force-static";
 export const revalidate = false;
diff --git a/components/sections/Careers.tsx b/components/sections/Careers.tsx
index bc96fe9..f78e5f8 100644
--- a/components/sections/Careers.tsx
+++ b/components/sections/Careers.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 const jobOpenings = [
   {
@@ -35,7 +35,8 @@ const jobOpenings = [
 
 export function Careers() {
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Hexagon pattern */}
       <div
         className="absolute inset-0 opacity-[0.02]"
@@ -45,7 +46,7 @@ export function Careers() {
       />
 
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -62,11 +63,11 @@ export function Careers() {
             We&apos;re looking for talented engineers who are passionate about
             AI and want to work on challenging problems with real impact.
           </p>
-        </motion.div>
+        </m.div>
 
         <div className="grid md:grid-cols-3 gap-6 lg:gap-8 mb-10 sm:mb-12">
           {jobOpenings.map((job, idx) => (
-            <motion.div
+            <m.div
               key={job.id}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -151,12 +152,12 @@ export function Careers() {
                   />
                 </svg>
               </Link>
-            </motion.div>
+            </m.div>
           ))}
         </div>
 
         {/* CTA to careers page */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -182,8 +183,9 @@ export function Careers() {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/ClientLogos.tsx b/components/sections/ClientLogos.tsx
index abb5aa5..bed756e 100644
--- a/components/sections/ClientLogos.tsx
+++ b/components/sections/ClientLogos.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import Image from "next/image";
 
 const clients = [
@@ -27,7 +27,8 @@ const clients = [
 
 export function ClientLogos() {
   return (
-    <div className="mt-10 sm:mt-12">
+    <LazyMotion features={domAnimation} strict>
+      <div className="mt-10 sm:mt-12">
       <p className="text-sm text-text-muted mb-6 text-center">
         Trusted by innovative teams
       </p>
@@ -40,7 +41,7 @@ export function ClientLogos() {
             "linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%)",
         }}
       >
-        <motion.div
+        <m.div
           className="flex items-center gap-12 md:gap-16"
           animate={{
             x: [0, -150 * clients.length],
@@ -69,8 +70,9 @@ export function ClientLogos() {
               />
             </div>
           ))}
-        </motion.div>
+        </m.div>
       </div>
     </div>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/EngagementModels.tsx b/components/sections/EngagementModels.tsx
index 544e917..9165e4f 100644
--- a/components/sections/EngagementModels.tsx
+++ b/components/sections/EngagementModels.tsx
@@ -86,8 +86,7 @@ const engagementModels = [
 export function EngagementModels() {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Gradient orbs for depth */}
       <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-accent-secondary/[0.05] rounded-full blur-[120px] pointer-events-none" />
       <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-accent/[0.05] rounded-full blur-[120px] pointer-events-none" />
@@ -102,7 +101,7 @@ export function EngagementModels() {
 
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -120,11 +119,11 @@ export function EngagementModels() {
             objectives. Scale up, scale down, or pivot—without renegotiating
             contracts.
           </p>
-        </motion.div>
+        </m.div>
 
         <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
           {engagementModels.map((model, idx) => (
-            <motion.div
+            <m.div
               key={model.title}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -198,7 +197,7 @@ export function EngagementModels() {
                   </div>
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
       </div>
diff --git a/components/sections/FeaturedCaseStudies.tsx b/components/sections/FeaturedCaseStudies.tsx
index e6536ba..700938b 100644
--- a/components/sections/FeaturedCaseStudies.tsx
+++ b/components/sections/FeaturedCaseStudies.tsx
@@ -12,8 +12,7 @@ interface FeaturedCaseStudiesProps {
 export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
+      <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
       {/* Background pattern */}
       <div
         className="absolute inset-0 opacity-[0.03]"
@@ -24,7 +23,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
 
       <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -58,7 +57,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
 
         {/* Case Studies Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
@@ -74,7 +73,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
         </div>
 
         {/* Bottom CTA */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -100,7 +99,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
       </div>
     </section>
     </LazyMotion>
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index d5ad907..5eee0cc 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -1,18 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { ClientLogos } from "./ClientLogos";
 import { CalButton } from "@/components/CalButton";
 
 export function Hero() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-base will-change-transform">
-      {/* Animated gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-surface via-base to-base" />
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-base will-change-transform">
+        {/* Animated gradient background */}
+        <div className="absolute inset-0 bg-gradient-to-b from-surface via-base to-base" />
 
-      {/* Large ambient glow - creates depth */}
-      <motion.div
+        {/* Large ambient glow - creates depth */}
+        <m.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.8 }}
@@ -22,7 +23,7 @@ export function Hero() {
         <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-accent/8 rounded-full blur-[120px]" />
         <div className="absolute top-1/3 left-1/4 w-[600px] h-[400px] bg-accent/5 rounded-full blur-[100px]" />
         <div className="absolute top-1/3 right-1/4 w-[500px] h-[350px] bg-accent/4 rounded-full blur-[100px]" />
-      </motion.div>
+      </m.div>
 
       {/* Subtle grid pattern - uses CSS class for theme-aware styling */}
       <div className="absolute inset-0 hero-grid-pattern" />
@@ -30,7 +31,7 @@ export function Hero() {
       {/* Floating abstract elements */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         {/* Floating orbs */}
-        <motion.div
+        <m.div
           animate={{
             y: [0, -20, 0],
             opacity: [0.4, 0.6, 0.4],
@@ -42,7 +43,7 @@ export function Hero() {
           }}
           className="absolute top-[20%] left-[15%] w-3 h-3 bg-accent/40 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, 15, 0],
             opacity: [0.3, 0.5, 0.3],
@@ -55,7 +56,7 @@ export function Hero() {
           }}
           className="absolute top-[30%] right-[20%] w-2 h-2 bg-accent/50 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, -15, 0],
             opacity: [0.3, 0.5, 0.3],
@@ -68,7 +69,7 @@ export function Hero() {
           }}
           className="absolute top-[40%] left-[10%] w-4 h-4 bg-accent/30 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, 20, 0],
             opacity: [0.2, 0.4, 0.2],
@@ -87,7 +88,7 @@ export function Hero() {
           className="absolute inset-0 w-full h-full"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <motion.line
+          <m.line
             x1="10%"
             y1="30%"
             x2="25%"
@@ -98,7 +99,7 @@ export function Hero() {
             animate={{ pathLength: 1, opacity: 0.2 }}
             transition={{ duration: 2, delay: 0.5 }}
           />
-          <motion.line
+          <m.line
             x1="75%"
             y1="25%"
             x2="90%"
@@ -136,7 +137,7 @@ export function Hero() {
       <div className="relative z-10 w-full max-w-5xl mx-auto px-6 sm:px-8 pt-24 pb-16">
         <div className="text-center">
           {/* Tagline pills */}
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.1 }}
@@ -149,11 +150,11 @@ export function Hero() {
             <span className="px-3 py-1.5 text-xs font-medium text-text-secondary bg-surface-elevated border border-border rounded-full">
               Production-tested engineering
             </span>
-          </motion.div>
+          </m.div>
 
           {/* Main headline - optimized for LCP */}
           {/* Render text immediately for fast LCP, animate opacity instead of text generation */}
-          <motion.h1
+          <m.h1
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
@@ -164,10 +165,10 @@ export function Hero() {
             <span className="text-highlight">
               That Ship to Production
             </span>
-          </motion.h1>
+          </m.h1>
 
           {/* Subheadline */}
-          <motion.p
+          <m.p
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{
@@ -180,10 +181,10 @@ export function Hero() {
             Senior AI engineers embedded with your team within 2-5 days. We
             build LLM applications, AI agents, and secure AI systems that ship
             to production.
-          </motion.p>
+          </m.p>
 
           {/* CTA buttons */}
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.4 }}
@@ -198,14 +199,14 @@ export function Hero() {
             >
               View Our Work
             </Link>
-          </motion.div>
+          </m.div>
         </div>
 
         <ClientLogos />
       </div>
 
       {/* Scroll indicator */}
-      <motion.div
+      <m.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 1.5 }}
@@ -217,7 +218,8 @@ export function Hero() {
             style={{ backgroundColor: "var(--color-text-muted)" }}
           />
         </div>
-      </motion.div>
+      </m.div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/HowWeWork.tsx b/components/sections/HowWeWork.tsx
index 4188166..f52214b 100644
--- a/components/sections/HowWeWork.tsx
+++ b/components/sections/HowWeWork.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { Timeline } from "@/components/ui/timeline";
 
 const processSteps = [
@@ -43,7 +43,8 @@ const processSteps = [
 
 export function HowWeWork() {
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-base">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-base">
       {/* Gradient orbs for depth */}
       <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-accent/[0.07] rounded-full blur-[120px] pointer-events-none" />
       <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-accent-secondary/[0.07] rounded-full blur-[120px] pointer-events-none" />
@@ -58,7 +59,7 @@ export function HowWeWork() {
 
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -76,7 +77,7 @@ export function HowWeWork() {
             A proven engagement process built for enterprise velocity. Your team
             gains senior engineering capacity within days—not weeks.
           </p>
-        </motion.div>
+        </m.div>
 
         {/* Process Timeline - Aceternity UI */}
         <div className="relative">
@@ -101,5 +102,6 @@ export function HowWeWork() {
         </div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/Services.tsx b/components/sections/Services.tsx
index ad3d95b..9b39bd4 100644
--- a/components/sections/Services.tsx
+++ b/components/sections/Services.tsx
@@ -157,8 +157,7 @@ const services = [
 export function Services() {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Diagonal lines pattern */}
       <div
         className="absolute inset-0 opacity-[0.02]"
@@ -234,3 +233,6 @@ export function Services() {
       </div>
     </section>
   );
+    </LazyMotion>
+  );
+}
diff --git a/components/sections/Team.tsx b/components/sections/Team.tsx
index 5b6c944..c3bef8c 100644
--- a/components/sections/Team.tsx
+++ b/components/sections/Team.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import Image from "next/image";
 
 interface TeamMember {
@@ -145,7 +145,8 @@ const values = [
 
 export function Team() {
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-base">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-base">
       {/* Dot matrix pattern */}
       <div
         className="absolute inset-0 opacity-[0.02]"
@@ -160,7 +161,7 @@ export function Team() {
 
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -178,12 +179,12 @@ export function Team() {
             what it takes to ship production software. No junior handoffs. No
             learning on your dime.
           </p>
-        </motion.div>
+        </m.div>
 
         {/* Featured Leadership */}
         <div className="grid md:grid-cols-2 gap-6 lg:gap-8 mb-10 sm:mb-12">
           {leadership.map((member, idx) => (
-            <motion.div
+            <m.div
               key={member.name}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -274,14 +275,14 @@ export function Team() {
                   ))}
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
 
         {/* Team Grid */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
           {team.map((member, idx) => (
-            <motion.div
+            <m.div
               key={member.name}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -338,12 +339,12 @@ export function Team() {
                   </svg>
                 </a>
               )}
-            </motion.div>
+            </m.div>
           ))}
         </div>
 
         {/* Team Values Strip */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -363,8 +364,9 @@ export function Team() {
               </div>
             ))}
           </div>
-        </motion.div>
+        </m.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }
diff --git a/components/sections/Testimonials.tsx b/components/sections/Testimonials.tsx
index 2fb06d3..cb4031f 100644
--- a/components/sections/Testimonials.tsx
+++ b/components/sections/Testimonials.tsx
@@ -11,9 +11,8 @@ export function Testimonials() {
 
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section
-      className="relative py-16 sm:py-24 bg-base overflow-hidden"
+      <section
+        className="relative py-16 sm:py-24 bg-base overflow-hidden"
       aria-label="Customer testimonials"
     >
       <div className="relative max-w-4xl mx-auto px-6 sm:px-8">
@@ -104,3 +103,6 @@ export function Testimonials() {
       </div>
     </section>
   );
+    </LazyMotion>
+  );
+}
diff --git a/components/sections/ValueProposition.tsx b/components/sections/ValueProposition.tsx
index 5235ea2..dbc9ece 100644
--- a/components/sections/ValueProposition.tsx
+++ b/components/sections/ValueProposition.tsx
@@ -74,8 +74,7 @@ const values = [
 export function ValueProposition() {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative pt-0 pb-16 sm:pb-24 bg-surface overflow-hidden">
+      <section className="relative pt-0 pb-16 sm:pb-24 bg-surface overflow-hidden">
       {/* Gradient transition from Hero */}
       <div
         className="absolute top-0 left-0 right-0 h-32"
@@ -212,3 +211,6 @@ export function ValueProposition() {
       </div>
     </section>
   );
+    </LazyMotion>
+  );
+}
diff --git a/lib/image-loader.ts b/lib/image-loader.ts
new file mode 100644
index 0000000..7bbbadf
--- /dev/null
+++ b/lib/image-loader.ts
@@ -0,0 +1,30 @@
+/**
+ * Custom image loader for static export
+ * Enables proper srcset generation for responsive images
+ * even when using output: "export"
+ */
+
+export default function imageLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string;
+  width: number;
+  quality?: number;
+}) {
+  // For external URLs, pass through as-is
+  if (src.startsWith("http://") || src.startsWith("https://")) {
+    return src;
+  }
+
+  // For local images, return the path with width in query string
+  // This allows browser to select appropriate size from srcset
+  const params = new URLSearchParams();
+  params.set("w", width.toString());
+  if (quality) {
+    params.set("q", quality.toString());
+  }
+
+  return `${src}?${params.toString()}`;
+}
diff --git a/next.config.mjs b/next.config.mjs
index 4f20592..98b89cf 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -14,7 +14,6 @@ const nextConfig = {
   // Exclude legacy polyfills for modern browsers (saves 14 KiB)
   // Targets Chrome 100+, Safari 15+, Firefox 100+ per browserslist
   excludeDefaultMomentLocales: true,
-  swcMinify: true,
 
   // Experimental optimizations
   experimental: {
@@ -91,15 +90,19 @@ const nextConfig = {
   generateEtags: true,
 
   images: {
+    // MUST be true for static export (output: "export")
+    // GitHub Pages doesn't support dynamic image optimization
     unoptimized: true,
     formats: ["image/avif", "image/webp"],
-    // Optimized device sizes for better responsive images
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    minimumCacheTTL: 31536000, // 1 year cache for optimized images
+    minimumCacheTTL: 31536000,
     dangerouslyAllowSVG: true,
     contentDispositionType: "attachment",
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    // Loader for static export - generates proper srcset
+    loader: "custom",
+    loaderFile: "./lib/image-loader.ts",
     remotePatterns: [
       {
         protocol: "https",
diff --git a/scripts/optimize-logos.js b/scripts/optimize-logos.js
new file mode 100644
index 0000000..b8719f1
--- /dev/null
+++ b/scripts/optimize-logos.js
@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+/**
+ * Optimize all SVG logos for production
+ * Reduces file sizes by 60-80% without quality loss
+ */
+
+const { optimize } = require('svgo');
+const fs = require('fs');
+const path = require('path');
+
+const LOGOS_DIR = path.join(__dirname, '../public/logos/client');
+
+// SVGO configuration for maximum compression while preserving quality
+const svgoConfig = {
+  multipass: true,
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false, // Keep viewBox for responsiveness
+          cleanupIds: {
+            minify: true,
+            preserve: [],
+          },
+        },
+      },
+    },
+    'removeDimensions', // Remove width/height attributes
+    'removeStyleElement', // Remove <style> tags
+    'removeScriptElement', // Remove <script> tags
+    'removeComments', // Remove XML comments
+    'removeMetadata', // Remove metadata
+    'removeEditorsNSData', // Remove editor-specific data
+    'cleanupAttrs', // Cleanup attributes
+    'mergeStyles', // Merge styles
+    'inlineStyles', // Inline styles
+    'minifyStyles', // Minify CSS
+    'cleanupListOfValues', // Cleanup numeric values
+    'convertColors', // Convert colors to shortest form
+    {
+      name: 'convertPathData',
+      params: {
+        floatPrecision: 2, // Reduce decimal precision
+        transformPrecision: 5,
+      },
+    },
+    {
+      name: 'convertTransform',
+      params: {
+        floatPrecision: 3,
+      },
+    },
+    'removeEmptyAttrs', // Remove empty attributes
+    'removeEmptyContainers', // Remove empty containers
+    'removeUnusedNS', // Remove unused namespaces
+    'sortAttrs', // Sort attributes for better gzip
+    'sortDefsChildren', // Sort defs children
+  ],
+};
+
+function optimizeSVG(filePath) {
+  const svgString = fs.readFileSync(filePath, 'utf8');
+  const originalSize = Buffer.byteLength(svgString, 'utf8');
+
+  const result = optimize(svgString, {
+    path: filePath,
+    ...svgoConfig,
+  });
+
+  const optimizedSize = Buffer.byteLength(result.data, 'utf8');
+  const savings = ((originalSize - optimizedSize) / originalSize * 100).toFixed(1);
+
+  // Only write if we achieved meaningful savings (>5%)
+  if (savings > 5) {
+    fs.writeFileSync(filePath, result.data, 'utf8');
+    console.log(`✓ ${path.basename(filePath)}: ${(originalSize / 1024).toFixed(1)}KB → ${(optimizedSize / 1024).toFixed(1)}KB (${savings}% smaller)`);
+    return { original: originalSize, optimized: optimizedSize };
+  } else {
+    console.log(`⊘ ${path.basename(filePath)}: Already optimized (${(originalSize / 1024).toFixed(1)}KB)`);
+    return { original: originalSize, optimized: originalSize };
+  }
+}
+
+function main() {
+  console.log('🎨 Optimizing SVG logos...\n');
+
+  const files = fs.readdirSync(LOGOS_DIR)
+    .filter(file => file.endsWith('.svg'))
+    .map(file => path.join(LOGOS_DIR, file));
+
+  let totalOriginal = 0;
+  let totalOptimized = 0;
+
+  files.forEach(file => {
+    const result = optimizeSVG(file);
+    totalOriginal += result.original;
+    totalOptimized += result.optimized;
+  });
+
+  const totalSavings = ((totalOriginal - totalOptimized) / totalOriginal * 100).toFixed(1);
+
+  console.log(`\n📊 Total: ${(totalOriginal / 1024).toFixed(1)}KB → ${(totalOptimized / 1024).toFixed(1)}KB`);
+  console.log(`💾 Saved: ${((totalOriginal - totalOptimized) / 1024).toFixed(1)}KB (${totalSavings}%)`);
+}
+
+main();