perf: optimize PageSpeed Insights performance

- Suppress browser source map references to fix 404/SyntaxErrors
- Reduce legacy JS polyfills via browserslist config
- Optimize LCP by refining Hero animations and image sizes
- Implement video lazy loading and reduce SVG animation complexity
- Add preconnect hints for critical origins

components/home/Hero.tsx

@@ -137,12 +137,12 @@ const containerVariants = {
 } as const;
 
 const headingVariants = {
-  hidden: { opacity: 1, y: 30, scale: 0.95 },
+  hidden: { opacity: 1, y: 10, scale: 0.98 },
   visible: {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+    transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
   },
 } as const;
 
@@ -167,12 +167,12 @@ const scribbleVariants = {
 } as const;
 
 const subtitleVariants = {
-  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  hidden: { opacity: 0, y: 20, scale: 0.98 },
   visible: {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+    transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94], delay: 0.1 },
   },
 } as const;
 

components/home/HeroIllustration.tsx

@@ -154,15 +154,15 @@ export default function HeroIllustration() {
             <stop offset="70%" stopColor="white" stopOpacity="0.4" />
             <stop offset="100%" stopColor="white" stopOpacity="0" />
           </linearGradient>
-          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="3" result="blur" />
+          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="1.5" result="blur" />
             <feMerge>
               <feMergeNode in="blur" />
               <feMergeNode in="SourceGraphic" />
             </feMerge>
           </filter>
-          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
-            <feGaussianBlur stdDeviation="2" result="blur" />
+          <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="1" result="blur" />
             <feMerge>
               <feMergeNode in="blur" />
               <feMergeNode in="SourceGraphic" />
@@ -215,10 +215,10 @@ export default function HeroIllustration() {
           </g>
 
           {/* ANIMATED ENERGY FLOW */}
-          <g filter="url(#glow)">
+          <g>
             {POWER_LINES.map((line, i) => {
-              // Only animate a subset of lines to reduce main-thread work
-              if (i % 2 !== 0) return null;
+              // Only animate a small subset of lines to reduce main-thread work significantly
+              if (i % 5 !== 0) return null;
               const from = gridToScreen(line.from.col, line.from.row);
               const to = gridToScreen(line.to.col, line.to.row);
               const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));

components/home/ProductCategories.tsx

@@ -56,7 +56,7 @@ export default function ProductCategories() {
               alt={category.title}
               fill
               className="object-cover transition-transform duration-1000 group-hover:scale-110"
-              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 24vw"
             />
             <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
             <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">

components/home/VideoSection.tsx

@@ -6,14 +6,18 @@ export default function VideoSection() {
 
   return (
     <section className="relative h-[70vh] overflow-hidden bg-primary">
-      <video 
+      <video
         className="w-full h-full object-cover opacity-60"
-        autoPlay 
-        muted 
-        loop 
+        autoPlay
+        muted
+        loop
         playsInline
+        preload="none"
       >
-        <source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
+        <source
+          src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm"
+          type="video/webm"
+        />
       </video>
       <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center">
         <div className="max-w-5xl px-6 text-center animate-slide-up">
@@ -22,9 +26,12 @@ export default function VideoSection() {
               future: (chunks) => (
                 <span className="relative inline-block mx-2">
                   <span className="relative z-10 italic text-accent">{chunks}</span>
-                  <Scribble variant="underline" className="w-full h-4 -bottom-2 left-0 text-accent/40" />
+                  <Scribble
+                    variant="underline"
+                    className="w-full h-4 -bottom-2 left-0 text-accent/40"
+                  />
                 </span>
-              )
+              ),
             })}
           </h2>
         </div>