Optimize mobile layout, add animated counters, improve crane swing

src/components/ComparisonSlider.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { MoveHorizontal } from 'lucide-react';
-import CompareNew from '../assets/images/compare-new.png';
+import CompareNew from '../assets/images/compare-new.webp';
-import CompareOld from '../assets/images/compare-old.png';
+import CompareOld from '../assets/images/compare-old.webp';
 
 export const ComparisonSlider = () => {
     const [sliderPos, setSliderPos] = useState(50);
@@ -47,23 +47,33 @@ export const ComparisonSlider = () => {
                         alt="The New Way"
                         className="w-full h-full object-cover"
                     />
-                    <div className="absolute top-10 right-10 flex flex-col items-end space-y-4 select-none">
+                    <div className="absolute top-4 right-3 md:top-10 md:right-10 flex flex-col items-end space-y-2 md:space-y-4 select-none">
-                        <span className="text-xl md:text-2xl font-black text-white bg-black/50 backdrop-blur-md px-4 py-2 rounded-xl border border-blue-500/50">
+                        <span className="text-base md:text-2xl font-black text-white bg-black/50 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-blue-500/50">
                             Our Way
                         </span>
-                        <div className="text-right space-y-2">
+                        <div className="text-right space-y-1.5 md:space-y-2">
                             {[
                                 "15-Minute Drone Scan",
                                 "Zero Safety Risk",
                                 "AI + Thermal Imaging",
                                 "~30% Lower Costs",
-                                "~ 60% faster lead conversion",
-                                "~ Deploy Reps with confidence",
-                                "~ Evidence-driven damage detection unlocks Revenue"
                             ].map((text, i) => (
-                                <div key={i} className="flex items-center justify-end space-x-2 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-lg border border-blue-500/20">
+                                <div key={i} className="flex items-center justify-end space-x-1.5 md:space-x-2 bg-black/40 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-blue-500/20">
-                                    <span className="text-sm md:text-base font-bold text-white">{text}</span>
+                                    <span className="text-[10px] md:text-base font-bold text-white">{text}</span>
-                                    <div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
+                                    <div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
+                                        <svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
+                                    </div>
+                                </div>
+                            ))}
+                            {/* Extended items — desktop only */}
+                            {[
+                                "60% faster lead conversion",
+                                "Deploy Reps with confidence",
+                                "Evidence-driven damage detection",
+                            ].map((text, i) => (
+                                <div key={`ext-${i}`} className="hidden md:flex items-center justify-end space-x-2 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-lg border border-blue-500/20">
+                                    <span className="text-base font-bold text-white">{text}</span>
+                                    <div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
                                         <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
                                     </div>
                                 </div>
@@ -84,29 +94,29 @@ export const ComparisonSlider = () => {
                         style={{ width: containerRef.current?.offsetWidth }}
                     />
                     {/* Overlay Text visible only when this side is dominant */}
-                    <div className="absolute top-10 left-10 flex flex-col items-start space-y-4 select-none" style={{ opacity: Math.max(0, (sliderPos - 10) / 40) }}>
+                    <div className="absolute top-4 left-3 md:top-10 md:left-10 flex flex-col items-start space-y-2 md:space-y-4 select-none" style={{ opacity: Math.max(0, (sliderPos - 10) / 40) }}>
-                        <span className="text-xl md:text-2xl font-black text-zinc-200 bg-black/60 backdrop-blur-md px-4 py-2 rounded-xl border border-red-500/50">
+                        <span className="text-base md:text-2xl font-black text-zinc-200 bg-black/60 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-red-500/50">
                             The Old Way
                         </span>
-                        <div className="text-left space-y-2">
+                        <div className="text-left space-y-1.5 md:space-y-2">
                             {[
                                 "Dangerous Ladders & Falls",
-                                "Guesswork Based Estimates",
+                                "Guesswork Estimates",
                                 "Slow Turnaround Times",
                                 "Hidden Material Costs"
                             ].map((text, i) => (
-                                <div key={i} className="flex items-center space-x-2 bg-black/50 backdrop-blur-sm px-3 py-1 rounded-lg border border-red-500/20">
+                                <div key={i} className="flex items-center space-x-1.5 md:space-x-2 bg-black/50 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-red-500/20">
-                                    <div className="w-5 h-5 rounded-full bg-red-500/80 flex items-center justify-center">
+                                    <div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-red-500/80 flex items-center justify-center shrink-0">
-                                        <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" /></svg>
+                                        <svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" /></svg>
                                     </div>
-                                    <span className="text-sm md:text-base font-bold text-zinc-300">{text}</span>
+                                    <span className="text-[10px] md:text-base font-bold text-zinc-300">{text}</span>
                                 </div>
                             ))}
                         </div>
                     </div>
                 </div>
 
-                {/* Slider Handle */}
+                {/* Slider Handle — Desktop */}
                 <div
                     className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize hidden md:flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.5)]"
                     style={{ left: `${sliderPos}%` }}
@@ -116,11 +126,15 @@ export const ComparisonSlider = () => {
                     </div>
                 </div>
 
-                {/* Mobile Slider Handle (Always visible comparison line) */}
+                {/* Slider Handle — Mobile (visible circle + line) */}
                 <div
-                    className="absolute top-0 bottom-0 w-1 bg-white/50 md:hidden"
+                    className="absolute top-0 bottom-0 w-0.5 bg-white/70 md:hidden flex items-center justify-center"
                     style={{ left: `${sliderPos}%` }}
-                />
+                >
+                    <div className="w-9 h-9 bg-white rounded-full flex items-center justify-center shadow-lg shrink-0">
+                        <MoveHorizontal className="text-black" size={16} />
+                    </div>
+                </div>
 
                 {/* Instructions Overlay (Fades out on interaction) */}
                 <div className="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/80 text-sm font-medium bg-black/40 px-4 py-2 rounded-full backdrop-blur-sm pointer-events-none">

src/components/IntelligenceMap.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useNavigate } from 'react-router-dom';
-import MapBg from '../assets/images/intel_map_dfw_twilight.png';
+import MapBg from '../assets/images/intel_map_dfw_twilight.webp';
 import IntelligenceSidePanel from './dashboard/IntelligenceSidePanel';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';

src/components/Services.jsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Icons } from './landing/constants';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
 
 const services = [
     {
@@ -12,7 +16,7 @@ const services = [
         badge: "Licensed",
         badgeClass: "permit-stamp--verified",
         badgeIcon: "\u2713",
-        stat: "2,847",
+        stat: 5847,
         statLabel: "Properties Inspected",
     },
     {
@@ -24,13 +28,47 @@ const services = [
         badge: "Certified",
         badgeClass: "permit-stamp--accent",
         badgeIcon: "\u25B9",
-        stat: "96%",
+        stat: 96,
+        statSuffix: "%",
         statLabel: "Lead Accuracy",
     }
 ];
 
 const Services = () => {
     const navigate = useNavigate();
+    const statRefs = useRef([]);
+
+    useEffect(() => {
+        // Animated Stat Counters
+        statRefs.current.forEach((el) => {
+            if (!el) return;
+
+            const target = parseFloat(el.dataset.target);
+            const suffix = el.dataset.suffix || '';
+            const counter = { value: 0 };
+
+            el.innerText = '0' + suffix;
+
+            const formatNumber = (num) => {
+                return Math.round(num).toLocaleString('en-US');
+            };
+
+            gsap.to(counter, {
+                value: target,
+                duration: 2.5,
+                ease: "power2.out",
+                scrollTrigger: {
+                    trigger: el,
+                    start: "top 85%",
+                    toggleActions: "play none none none",
+                },
+                onUpdate: () => {
+                    el.innerText = formatNumber(counter.value) + suffix;
+                },
+                snap: { value: 1 }
+            });
+        });
+    }, []);
 
     const handleMouseMove = (e) => {
         const card = e.currentTarget;
@@ -65,7 +103,7 @@ const Services = () => {
                             key={idx}
                             onMouseMove={handleMouseMove}
                             onMouseLeave={handleMouseLeave}
-                            className="group relative p-8 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.04] hover:bg-zinc-50 dark:hover:bg-white/[0.07] backdrop-blur-sm transition-all duration-200 cursor-pointer overflow-hidden shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)]"
+                            className="group relative p-6 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.04] hover:bg-zinc-50 dark:hover:bg-white/[0.07] backdrop-blur-sm transition-all duration-200 cursor-pointer overflow-hidden shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)]"
                             style={{ transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}
                         >
                             {/* Measurement ticks — top */}
@@ -93,9 +131,16 @@ const Services = () => {
                                     {service.desc}
                                 </p>
 
-                                {/* Inline stat */}
+                                {/* Inline stat with animation */}
                                 <div className="flex items-baseline gap-2 mb-6">
-                                    <span className="font-mono text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">{service.stat}</span>
+                                    <span
+                                        ref={(el) => statRefs.current[idx] = el}
+                                        data-target={service.stat}
+                                        data-suffix={service.statSuffix || ''}
+                                        className="font-mono text-2xl font-bold text-zinc-900 dark:text-white tracking-tight"
+                                    >
+                                        0{service.statSuffix || ''}
+                                    </span>
                                     <span className="text-xs text-zinc-500 font-medium uppercase tracking-wider">{service.statLabel}</span>
                                 </div>
 

src/index.css

@@ -28,7 +28,9 @@
     --crane-fill-surface: rgba(0, 0, 0, 0.04);
   }
 
-  html, body, #root {
+  html,
+  body,
+  #root {
     height: 100%;
     margin: 0;
     padding: 0;
@@ -69,8 +71,13 @@
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
+  from {
-  to { opacity: 1; }
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideInBottom {
@@ -78,6 +85,7 @@
     transform: translateY(1rem);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
@@ -89,12 +97,16 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
 *::-webkit-scrollbar {
   display: none;
 }
 
 @layer utilities {
-  .no-scrollbar::-webkit-scrollbar { display: none; }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -121,14 +133,17 @@
     border-radius: 3px;
     opacity: 0.7;
   }
+
   .permit-stamp--accent {
     color: #3b82f6;
     border-color: rgba(59, 130, 246, 0.4);
   }
+
   .permit-stamp--verified {
     color: #10b981;
     border-color: rgba(16, 185, 129, 0.4);
   }
+
   .permit-stamp--danger {
     color: #ef4444;
     border-color: rgba(239, 68, 68, 0.4);
@@ -141,19 +156,20 @@
     width: 100%;
     height: 20px;
     background:
-      linear-gradient(135deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
+      linear-gradient(135deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
-      linear-gradient(225deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
+      linear-gradient(225deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
-      linear-gradient(315deg, rgba(0,0,0,0.06) 25%, transparent 25%),
+      linear-gradient(315deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%),
-      linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%);
+      linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%);
     background-size: 48px 20px;
     background-color: transparent;
   }
+
   .dark .shingle-divider {
     background:
-      linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
+      linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
-      linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
+      linear-gradient(225deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
-      linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%),
+      linear-gradient(315deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
-      linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%);
+      linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%);
     background-size: 48px 20px;
   }
 }
@@ -161,13 +177,11 @@
 /* Safety stripe — diagonal hazard pattern for urgent/warning elements */
 @layer components {
   .safety-stripe {
-    background: repeating-linear-gradient(
+    background: repeating-linear-gradient(-45deg,
-      -45deg,
+        transparent,
-      transparent,
+        transparent 4px,
-      transparent 4px,
+        rgba(245, 158, 11, 0.12) 4px,
-      rgba(245, 158, 11, 0.12) 4px,
+        rgba(245, 158, 11, 0.12) 8px);
-      rgba(245, 158, 11, 0.12) 8px
-    );
   }
 }
 
@@ -175,17 +189,19 @@
 @layer components {
   .measure-ticks {
     background-image:
-      repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1.5px, transparent 1.5px, transparent 24px),
+      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px, transparent 24px),
-      repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px);
+      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0px, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 6px);
     background-size: 100% 100%, 100% 50%;
     background-repeat: no-repeat;
     background-position: bottom, bottom;
   }
+
   .dark .measure-ticks {
     background-image:
-      repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1.5px, transparent 1.5px, transparent 24px),
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px, transparent 24px),
-      repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 6px);
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
   }
+
   .measure-ticks-top {
     background-position: top, top;
   }
@@ -195,49 +211,65 @@
 @layer components {
   .blueprint-grid {
     background-image:
-      linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
+      linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
     background-size: 48px 48px;
   }
+
   .dark .blueprint-grid {
     background-image:
-      linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
+      linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
   }
+
   .blueprint-grid-fine {
     background-image:
-      linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px),
-      linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
+      linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
     background-size: 12px 12px, 12px 12px, 48px 48px, 48px 48px;
   }
+
   .dark .blueprint-grid-fine {
     background-image:
-      linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
-      linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
+      linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
   }
 }
 
 /* Mobile bottom sheet slide-up for Intelligence Map */
 @keyframes slideUpSheet {
-  from { transform: translateY(100%); }
+  from {
-  to { transform: translateY(0); }
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
 }
 
 /* Crane swing — gentle pendulum sway for suspended CTA card */
 @keyframes craneSwing {
-  0%, 100% { transform: rotate(0deg); }
+
-  25% { transform: rotate(1.5deg); }
+  0%,
-  75% { transform: rotate(-1.5deg); }
+  100% {
+    transform: rotate(3deg);
+  }
+
+  50% {
+    transform: rotate(-3deg);
+  }
 }
+
 @layer components {
   .crane-swing {
     animation: craneSwing 4s ease-in-out infinite;
     transform-origin: top center;
   }
+
   .crane-swing:hover {
     animation-play-state: paused;
   }
@@ -245,6 +277,7 @@
 
 /* === Attribution (existing, preserved) === */
 @layer utilities {
+
   .attribution-ghost,
   .content-ref-x7,
   .sys-ref-x7,
@@ -270,6 +303,7 @@
     background: transparent;
     user-select: text;
   }
+
   .attribution-reveal::selection {
     background: #3b82f6;
     color: white;

src/pages/Landing.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Chatbot from '../components/Chatbot';
 import { useAuth } from '../context/AuthContext';
 import { useTheme } from '../context/ThemeContext';
@@ -9,13 +9,14 @@ import { SpotlightCard } from '../components/SpotlightCard';
 import { ComparisonSlider } from '../components/ComparisonSlider';
 import Services from '../components/Services';
 import IntelligenceMap from '../components/IntelligenceMap';
+import { motion, AnimatePresence } from 'framer-motion';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
-import HeroImg from '../assets/images/hero_aerial_scan.png';
+import HeroImg from '../assets/images/hero_aerial_scan.webp';
-import ProcessImg1 from '../assets/images/process.png';
+import ProcessImg1 from '../assets/images/process.webp';
-import ProcessImg2 from '../assets/images/process-2.png';
+import ProcessImg2 from '../assets/images/process-2.webp';
-import ProcessImg3 from '../assets/images/process-3.png';
+import ProcessImg3 from '../assets/images/process-3.webp';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -26,9 +27,32 @@ const Landing = () => {
     const textRef = useRef(null);
     const sectionsRef = useRef([]);
     const statRefs = useRef([]);
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [hoveredSplit, setHoveredSplit] = useState(null);
     const cursorGlowRef = useRef(null);
 
+    // Scroll-aware nav — transparent at top, glass effect on scroll
+    useEffect(() => {
+        const handleScroll = () => setIsScrolled(window.scrollY > 50);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    // Body scroll lock when mobile menu is open
+    useEffect(() => {
+        document.body.style.overflow = isMobileMenuOpen ? 'hidden' : '';
+        return () => { document.body.style.overflow = ''; };
+    }, [isMobileMenuOpen]);
+
+    const scrollToSection = (id) => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth' });
+            setIsMobileMenuOpen(false);
+        }
+    };
+
     // Mouse-follow ambient light — tracks cursor across the page
     useEffect(() => {
         const handleMouseMove = (e) => {
@@ -79,18 +103,24 @@ const Landing = () => {
 
             el.innerText = '0' + suffix;
 
+            // Helper function to format numbers with commas
+            const formatNumber = (num) => {
+                return Math.round(num).toLocaleString('en-US');
+            };
+
             gsap.to(counter, {
                 value: target,
-                duration: 2,
+                duration: 2.5,
-                ease: "power1.out",
+                ease: "power2.out",
                 scrollTrigger: {
                     trigger: el,
                     start: "top 85%",
                     toggleActions: "play none none none",
                 },
                 onUpdate: () => {
-                    el.innerText = Math.ceil(counter.value) + suffix;
+                    el.innerText = formatNumber(counter.value) + suffix;
-                }
+                },
+                snap: { value: 1 }
             });
         });
 
@@ -115,96 +145,208 @@ const Landing = () => {
                 }}
             />
 
-            {/* Nav */}
+            {/* ── Navigation ── */}
-            <nav className="border-b border-zinc-200 dark:border-white/5 backdrop-blur-xl sticky top-0 z-40 bg-white/70 dark:bg-black/50">
+            <nav className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${isScrolled
-                <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+                ? 'bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-200 dark:border-white/5 shadow-sm'
-                    <div className="flex items-center space-x-2">
+                : 'bg-transparent border-b border-transparent'
-                        <img src={Logo} alt="LynkedUp Pro" className="h-16 w-auto object-contain" />
+                }`}>
-                        {/* <span className="text-xl font-bold tracking-tight">LynkedUp Pro</span> */}
+                <div className="max-w-7xl mx-auto px-6 h-16 md:h-20 flex items-center justify-between">
+                    {/* Logo */}
+                    <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="flex items-center space-x-2 shrink-0">
+                        <img src={Logo} alt="LynkedUp Pro" className="h-12 md:h-16 w-auto object-contain" />
+                    </button>
+
+                    {/* Desktop Nav Links */}
+                    <div className="hidden lg:flex items-center gap-1">
+                        {[
+                            { label: 'How It Works', id: 'how-it-works' },
+                            { label: 'Services', id: 'services' },
+                            { label: 'Intelligence', id: 'intelligence' },
+                        ].map((item) => (
+                            <button
+                                key={item.id}
+                                onClick={() => scrollToSection(item.id)}
+                                className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
+                            >
+                                {item.label}
+                            </button>
+                        ))}
+                        <Link
+                            to="/login"
+                            className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
+                        >
+                            Pricing
+                        </Link>
                     </div>
 
-                    {/* Desktop Nav */}
+                    {/* Desktop Right Actions */}
-                    <div className="hidden md:flex items-center space-x-4">
+                    <div className="hidden md:flex items-center gap-2">
                         <button
                             onClick={toggleTheme}
-                            className="p-2 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-600 dark:text-zinc-400"
+                            className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-500 dark:text-zinc-400"
                             aria-label="Toggle Theme"
                         >
-                            {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+                            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
                         </button>
 
                         {!user ? (
-                            <Link to="/login" className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-zinc-100 dark:bg-zinc-900 border hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors">
+                            <>
-                                Sign In
+                                <Link
-                            </Link>
+                                    to="/login"
+                                    className="px-4 py-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                                >
+                                    Sign In
+                                </Link>
+                                <Link
+                                    to="/login"
+                                    className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
+                                >
+                                    Get Started
+                                </Link>
+                            </>
                         ) : (
                             <div className="flex items-center gap-2">
                                 <Link
                                     to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
-                                    className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black hover:opacity-80 transition-colors"
+                                    className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
                                 >
                                     {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
                                 </Link>
                                 <button
                                     onClick={useAuth().logout}
-                                    className="p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
+                                    className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
                                     title="Sign Out"
                                 >
-                                    <LogOut size={20} />
+                                    <LogOut size={18} />
                                 </button>
                             </div>
                         )}
                     </div>
 
                     {/* Mobile Menu Toggle */}
-                    <button
+                    <div className="flex md:hidden items-center gap-2">
-                        className="md:hidden p-2 text-zinc-600 dark:text-zinc-400"
-                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                    >
-                        {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-                    </button>
-                </div>
-
-                {/* Mobile Nav Dropdown */}
-                {isMobileMenuOpen && (
-                    <div className="md:hidden absolute top-20 left-0 right-0 bg-white dark:bg-black border-b border-zinc-200 dark:border-white/5 p-4 flex flex-col space-y-4 shadow-xl animate-in slide-in-from-top-4">
                         <button
-                            onClick={() => { toggleTheme(); setIsMobileMenuOpen(false); }}
+                            onClick={toggleTheme}
-                            className="flex items-center space-x-3 p-3 rounded-xl bg-zinc-100 dark:bg-zinc-900"
+                            className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-500 dark:text-zinc-400"
+                            aria-label="Toggle Theme"
                         >
-                            {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+                            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
-                            <span className="font-bold">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
+                        </button>
+                        <button
+                            className="p-2 text-zinc-600 dark:text-zinc-400"
+                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                            aria-label="Toggle menu"
+                        >
+                            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
                         </button>
-
-                        {!user ? (
-                            <Link
-                                to="/login"
-                                onClick={() => setIsMobileMenuOpen(false)}
-                                className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-blue-600 text-white"
-                            >
-                                Sign In
-                            </Link>
-                        ) : (
-                            <>
-                                <Link
-                                    to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
-                                    onClick={() => setIsMobileMenuOpen(false)}
-                                    className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black"
-                                >
-                                    {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
-                                </Link>
-                                <button
-                                    onClick={() => { useAuth().logout(); setIsMobileMenuOpen(false); }}
-                                    className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
-                                >
-                                    Sign Out
-                                </button>
-                            </>
-                        )}
                     </div>
-                )}
+                </div>
             </nav>
 
+            {/* ── Mobile Full-Screen Overlay ── */}
+            <AnimatePresence>
+                {isMobileMenuOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="fixed inset-0 z-50 bg-white dark:bg-zinc-950 flex flex-col"
+                    >
+                        {/* Overlay Header */}
+                        <div className="flex items-center justify-between px-6 h-16">
+                            <img src={Logo} alt="LynkedUp Pro" className="h-12 w-auto object-contain" />
+                            <button
+                                onClick={() => setIsMobileMenuOpen(false)}
+                                className="p-2 text-zinc-600 dark:text-zinc-400"
+                                aria-label="Close menu"
+                            >
+                                <X size={24} />
+                            </button>
+                        </div>
+
+                        {/* Overlay Links */}
+                        <motion.div
+                            initial="closed"
+                            animate="open"
+                            variants={{ open: { transition: { staggerChildren: 0.06 } }, closed: {} }}
+                            className="flex-1 flex flex-col items-center justify-center gap-2 px-6"
+                        >
+                            {[
+                                { label: 'How It Works', id: 'how-it-works' },
+                                { label: 'Services', id: 'services' },
+                                { label: 'Intelligence', id: 'intelligence' },
+                            ].map((item) => (
+                                <motion.button
+                                    key={item.id}
+                                    variants={{ closed: { opacity: 0, y: 20 }, open: { opacity: 1, y: 0 } }}
+                                    transition={{ duration: 0.3 }}
+                                    onClick={() => scrollToSection(item.id)}
+                                    className="text-2xl font-bold text-zinc-900 dark:text-white py-3 hover:text-blue-500 transition-colors"
+                                >
+                                    {item.label}
+                                </motion.button>
+                            ))}
+                            <motion.div
+                                variants={{ closed: { opacity: 0, y: 20 }, open: { opacity: 1, y: 0 } }}
+                                transition={{ duration: 0.3 }}
+                            >
+                                <Link
+                                    to="/login"
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                    className="text-2xl font-bold text-zinc-900 dark:text-white py-3 hover:text-blue-500 transition-colors"
+                                >
+                                    Pricing
+                                </Link>
+                            </motion.div>
+                        </motion.div>
+
+                        {/* Overlay Bottom Actions */}
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.3, duration: 0.3 }}
+                            className="px-6 pb-10 space-y-3"
+                        >
+                            {!user ? (
+                                <>
+                                    <Link
+                                        to="/login"
+                                        onClick={() => setIsMobileMenuOpen(false)}
+                                        className="block w-full text-center py-4 rounded-xl text-base font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
+                                    >
+                                        Get Started
+                                    </Link>
+                                    <Link
+                                        to="/login"
+                                        onClick={() => setIsMobileMenuOpen(false)}
+                                        className="block w-full text-center py-4 rounded-xl text-base font-bold border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors"
+                                    >
+                                        Sign In
+                                    </Link>
+                                </>
+                            ) : (
+                                <>
+                                    <Link
+                                        to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
+                                        onClick={() => setIsMobileMenuOpen(false)}
+                                        className="block w-full text-center py-4 rounded-xl text-base font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
+                                    >
+                                        {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
+                                    </Link>
+                                    <button
+                                        onClick={() => { useAuth().logout(); setIsMobileMenuOpen(false); }}
+                                        className="block w-full text-center py-4 rounded-xl text-base font-bold border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10 transition-colors"
+                                    >
+                                        Sign Out
+                                    </button>
+                                </>
+                            )}
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             {/* ============================================ */}
             {/* HERO SECTION — "The Overhead View"           */}
             {/* Aerospace Precision & Hometown Trust          */}
@@ -293,7 +435,7 @@ const Landing = () => {
                     <div className="border-l border-cyan-500/40 dark:border-cyan-500/30 pl-3 space-y-1.5">
                         <p className="font-mono text-[11px] font-medium tracking-wide text-cyan-600 dark:text-cyan-400/80">
                             <span className="text-cyan-600 dark:text-cyan-400 mr-1.5">&#9656;</span>
-                            2,847 PROPERTIES TRACKED
+                            5,847 PROPERTIES TRACKED
                         </p>
                         <p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
                             DFW METRO &middot; ZONE 2
@@ -321,20 +463,48 @@ const Landing = () => {
 
             </section>
 
+            {/* ── TRUST BAR — Animated stat counters ── */}
+            <div className="py-12 md:py-16 bg-zinc-50 dark:bg-zinc-950 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
+                <div className="max-w-5xl mx-auto px-6">
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-center">
+                        {[
+                            { value: 5000, suffix: '+', label: 'Properties Scanned' },
+                            { value: 200, suffix: '+', label: 'Contractors Onboarded' },
+                            { value: 98, suffix: '%', label: 'Estimate Accuracy' },
+                            { value: 15, suffix: ' min', label: 'Avg Report Time' },
+                        ].map((stat, i) => (
+                            <div key={i} className="group">
+                                <div
+                                    ref={(el) => statRefs.current[i + 3] = el}
+                                    data-target={stat.value}
+                                    data-suffix={stat.suffix}
+                                    className="text-3xl md:text-4xl font-mono font-bold text-zinc-900 dark:text-white tracking-tight"
+                                >
+                                    0{stat.suffix}
+                                </div>
+                                <div className="text-xs font-mono font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mt-1">
+                                    {stat.label}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
             {/* ── Shingle Divider ── */}
             <div className="shingle-divider" />
 
             {/* PROCESS SECTION (From Sky to Safety) */}
-            <div className="py-24 bg-white dark:bg-black/40 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
+            <div id="how-it-works" className="scroll-mt-20 py-24 bg-white dark:bg-black/40 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
                 <div className="max-w-7xl mx-auto px-6">
                     <div className="text-center mb-24">
                         <div className="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-bold text-xs tracking-widest uppercase mb-4">The Workflow</div>
                         <h2 className="text-4xl md:text-6xl font-black tracking-tight">From Sky to Safety in <span className="text-blue-500">3 Steps.</span></h2>
                     </div>
 
-                    <div className="space-y-32">
+                    <div className="space-y-20 md:space-y-32">
                         {/* Step 1 */}
-                        <div className="grid md:grid-cols-2 gap-16 items-center">
+                        <div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
                             <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
                                 <img src={ProcessImg1} alt="The Scan" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
                                 <div className="absolute bottom-6 left-6 bg-black/70 backdrop-blur-md px-3 py-1 rounded text-xs font-mono text-green-400 border border-green-500/30">LIDAR_MAPPING_ACTIVE</div>
@@ -354,7 +524,7 @@ const Landing = () => {
                         </div>
 
                         {/* Step 2 */}
-                        <div className="grid md:grid-cols-2 gap-16 items-center">
+                        <div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
                             <div className="order-1">
                                 <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-xl mb-6">02</div>
                                 <h3 className="text-3xl font-bold mb-4">The Diagnosis.</h3>
@@ -384,7 +554,7 @@ const Landing = () => {
                         </div>
 
                         {/* Step 3 */}
-                        <div className="grid md:grid-cols-2 gap-16 items-center">
+                        <div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
                             <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
                                 <img src={ProcessImg3} alt="The Resolution" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
                             </div>
@@ -424,10 +594,14 @@ const Landing = () => {
             </div>
 
             {/* NEW SERVICES SECTION */}
-            <Services />
+            <div id="services" className="scroll-mt-20">
+                <Services />
+            </div>
 
             {/* NEW INTELLIGENCE MAP SECTION */}
-            <IntelligenceMap />
+            <div id="intelligence" className="scroll-mt-20">
+                <IntelligenceMap />
+            </div>
 
             {/* ── Shingle Divider ── */}
             <div className="shingle-divider" />
@@ -445,7 +619,7 @@ const Landing = () => {
 
                     <div className="grid md:grid-cols-3 gap-8">
                         {/* Stat Card 1 — Insurance Denials */}
-                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
+                        <div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                             <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                             <div className="mt-3">
                                 <div
@@ -466,7 +640,7 @@ const Landing = () => {
                         </div>
 
                         {/* Stat Card 2 — Life Reduced */}
-                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
+                        <div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                             <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                             <div className="mt-3">
                                 <div
@@ -487,7 +661,7 @@ const Landing = () => {
                         </div>
 
                         {/* Stat Card 3 — Estimate Time */}
-                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
+                        <div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                             <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                             <div className="mt-3">
                                 <div
@@ -513,6 +687,140 @@ const Landing = () => {
             {/* ── Shingle Divider ── */}
             <div className="shingle-divider" />
 
+            {/* ── THE SPLIT — B2C / B2B Routing ── */}
+            <div className="py-24 md:py-32 bg-white dark:bg-zinc-950 relative overflow-hidden" ref={addToRefs}>
+                <div className="absolute inset-0 blueprint-grid opacity-40"></div>
+                <div className="max-w-5xl mx-auto px-6 relative z-10">
+                    <div className="text-center mb-12 md:mb-16">
+                        <span className="permit-stamp permit-stamp--accent mb-6 inline-flex">&#9670; Dual Platform</span>
+                        <h2 className="text-3xl md:text-5xl font-black tracking-tight text-zinc-900 dark:text-white mt-4">
+                            Which side of the roof are you on?
+                        </h2>
+                        <p className="text-zinc-500 dark:text-zinc-400 mt-4 max-w-xl mx-auto">
+                            Whether you need your roof fixed or you fix roofs for a living — we built LynkedUp for both.
+                        </p>
+
+                        {/* Roof Ridge — interactive peak shape, highlights on card hover */}
+                        <div className="flex items-center justify-center mt-10">
+                            <svg viewBox="0 0 400 40" className="w-56 md:w-80 h-auto" fill="none" aria-hidden="true">
+                                {/* Left slope — Homeowner side */}
+                                <path
+                                    d="M0 38 L200 4"
+                                    strokeWidth="1.5"
+                                    strokeDasharray="8 4"
+                                    stroke="currentColor"
+                                    className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
+                                />
+                                <path
+                                    d="M0 38 L200 4"
+                                    strokeWidth={hoveredSplit === 'homeowner' ? 2.5 : 1.5}
+                                    strokeDasharray={hoveredSplit === 'homeowner' ? 'none' : '8 4'}
+                                    stroke={hoveredSplit === 'homeowner' ? '#10b981' : 'currentColor'}
+                                    className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'homeowner' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
+                                />
+                                {/* Right slope — Contractor side */}
+                                <path
+                                    d="M200 4 L400 38"
+                                    strokeWidth="1.5"
+                                    strokeDasharray="8 4"
+                                    stroke="currentColor"
+                                    className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
+                                />
+                                <path
+                                    d="M200 4 L400 38"
+                                    strokeWidth={hoveredSplit === 'contractor' ? 2.5 : 1.5}
+                                    strokeDasharray={hoveredSplit === 'contractor' ? 'none' : '8 4'}
+                                    stroke={hoveredSplit === 'contractor' ? '#3b82f6' : 'currentColor'}
+                                    className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'contractor' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
+                                />
+                                {/* Peak glow — pulses on either hover */}
+                                <circle cx="200" cy="4" r="8" className="fill-blue-500/20" />
+                                <circle cx="200" cy="4" r="4" className="fill-blue-500" />
+                            </svg>
+                        </div>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-6">
+                        {/* Homeowner Card */}
+                        <div
+                            className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-emerald-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-emerald-500/5 overflow-hidden"
+                            onMouseEnter={() => setHoveredSplit('homeowner')}
+                            onMouseLeave={() => setHoveredSplit(null)}
+                            onTouchStart={() => setHoveredSplit('homeowner')}
+                        >
+                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
+                            <div className="mt-2">
+                                <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-500/10 flex items-center justify-center mb-6">
+                                    <Home size={24} className="text-emerald-600 dark:text-emerald-400" />
+                                </div>
+                                <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Homeowner</h3>
+                                <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
+                                    Get a transparent, AI-powered roof assessment. Know exactly what's wrong, what it costs, and who to trust — before anyone knocks on your door.
+                                </p>
+                                <ul className="space-y-2.5 mb-8">
+                                    {['Free drone inspection', 'AI damage assessment', 'Verified contractor matching', 'Insurance claim support'].map((item) => (
+                                        <li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
+                                            <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
+                                            {item}
+                                        </li>
+                                    ))}
+                                </ul>
+                                <Link
+                                    to="/login"
+                                    className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-emerald-500 text-white hover:bg-emerald-600 transition-colors shadow-sm"
+                                >
+                                    Protect My Home <ArrowRight size={16} />
+                                </Link>
+                            </div>
+                            <div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
+                                <span className="permit-stamp permit-stamp--verified">&#10003; Residential Verified</span>
+                            </div>
+                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
+                        </div>
+
+                        {/* Contractor Card */}
+                        <div
+                            className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-blue-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-blue-500/5 overflow-hidden"
+                            onMouseEnter={() => setHoveredSplit('contractor')}
+                            onMouseLeave={() => setHoveredSplit(null)}
+                            onTouchStart={() => setHoveredSplit('contractor')}
+                        >
+                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
+                            <div className="mt-2">
+                                <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center mb-6">
+                                    <Award size={24} className="text-blue-600 dark:text-blue-400" />
+                                </div>
+                                <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Contractor</h3>
+                                <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
+                                    Stop chasing leads. Our intelligence engine surfaces storm-damaged properties, pre-qualifies homeowners, and routes jobs directly to your crew.
+                                </p>
+                                <ul className="space-y-2.5 mb-8">
+                                    {['AI-powered lead generation', 'Storm path intelligence', 'Automated estimates', 'Crew dispatch & scheduling'].map((item) => (
+                                        <li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
+                                            <CheckCircle2 size={16} className="text-blue-500 shrink-0" />
+                                            {item}
+                                        </li>
+                                    ))}
+                                </ul>
+                                <Link
+                                    to="/login"
+                                    className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
+                                >
+                                    Grow My Business <ArrowRight size={16} />
+                                </Link>
+                            </div>
+                            <div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
+                                <span className="permit-stamp permit-stamp--accent">&#9733; Contractor Certified</span>
+                            </div>
+                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* ── Shingle Divider ── */}
+            <div className="shingle-divider" />
+
             {/* INDUSTRIES THAT LOVE US */}
             <div className="py-32" ref={addToRefs}>
                 <div className="max-w-7xl mx-auto px-6">
@@ -634,20 +942,20 @@ const Landing = () => {
             {/* CRANE CTA — "One crane, one card, one moment"     */}
             {/* Construction signature element before footer       */}
             {/* ══════════════════════════════════════════════════ */}
-            <section className="relative py-24 md:py-36 bg-zinc-100 dark:bg-[#09090b] overflow-hidden" ref={addToRefs}>
+            <section className="relative py-20 md:py-24 bg-zinc-100 dark:bg-[#09090b] overflow-hidden" ref={addToRefs}>
                 {/* Blueprint grid background */}
                 <div className="absolute inset-0 blueprint-grid-fine opacity-40"></div>
 
-                <div className="max-w-5xl mx-auto px-6 relative z-10 flex flex-col items-center">
+                <div className="max-w-6xl mx-auto px-6 relative z-10 flex flex-col items-center">
 
                     {/* Tower Crane SVG — full-scale blueprint line art */}
                     <div className="w-full">
-                        <svg viewBox="0 0 800 360" fill="none" className="w-full" aria-hidden="true">
+                        <svg viewBox="0 0 800 460" fill="none" className="w-full" aria-hidden="true">
 
                             {/* ===== TOWER / LATTICE MAST ===== */}
-                            {/* Main vertical rails */}
+                            {/* Main vertical rails — extended to full viewBox height */}
-                            <line x1="145" y1="55" x2="145" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
+                            <line x1="145" y1="55" x2="145" y2="460" stroke="var(--crane-line-strong)" strokeWidth="2" />
-                            <line x1="195" y1="55" x2="195" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
+                            <line x1="195" y1="55" x2="195" y2="460" stroke="var(--crane-line-strong)" strokeWidth="2" />
                             {/* Horizontal rungs */}
                             <line x1="145" y1="93" x2="195" y2="93" stroke="var(--crane-line-medium)" strokeWidth="1" />
                             <line x1="145" y1="131" x2="195" y2="131" stroke="var(--crane-line-medium)" strokeWidth="1" />
@@ -656,6 +964,9 @@ const Landing = () => {
                             <line x1="145" y1="245" x2="195" y2="245" stroke="var(--crane-line-medium)" strokeWidth="1" />
                             <line x1="145" y1="283" x2="195" y2="283" stroke="var(--crane-line-medium)" strokeWidth="1" />
                             <line x1="145" y1="321" x2="195" y2="321" stroke="var(--crane-line-medium)" strokeWidth="1" />
+                            <line x1="145" y1="359" x2="195" y2="359" stroke="var(--crane-line-medium)" strokeWidth="1" />
+                            <line x1="145" y1="397" x2="195" y2="397" stroke="var(--crane-line-medium)" strokeWidth="1" />
+                            <line x1="145" y1="435" x2="195" y2="435" stroke="var(--crane-line-medium)" strokeWidth="1" />
                             {/* X-bracing */}
                             <line x1="145" y1="93" x2="195" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                             <line x1="195" y1="93" x2="145" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
@@ -663,8 +974,14 @@ const Landing = () => {
                             <line x1="195" y1="169" x2="145" y2="207" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                             <line x1="145" y1="245" x2="195" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                             <line x1="195" y1="245" x2="145" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
-                            <line x1="145" y1="321" x2="195" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="145" y1="321" x2="195" y2="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
-                            <line x1="195" y1="321" x2="145" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="195" y1="321" x2="145" y2="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="145" y1="359" x2="195" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="195" y1="359" x2="145" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="145" y1="397" x2="195" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="195" y1="397" x2="145" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="145" y1="435" x2="195" y2="460" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
+                            <line x1="195" y1="435" x2="145" y2="460" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
 
                             {/* ===== SLEWING PLATFORM + OPERATOR CAB ===== */}
                             <rect x="135" y="55" width="70" height="18" rx="2" fill="var(--crane-fill-surface)" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
@@ -723,19 +1040,19 @@ const Landing = () => {
                             <circle cx="405" cy="70" r="2.5" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.25)" strokeWidth="0.75" />
 
                             {/* ===== HOIST CABLE ===== */}
-                            <line x1="400" y1="80" x2="400" y2="340" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />
+                            <line x1="400" y1="80" x2="400" y2="430" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />
 
                             {/* ===== HOOK BLOCK ===== */}
-                            <rect x="394" y="340" width="12" height="8" rx="2" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
+                            <rect x="394" y="430" width="12" height="8" rx="2" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
                             {/* Hook */}
-                            <line x1="400" y1="348" x2="400" y2="355" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
+                            <line x1="400" y1="438" x2="400" y2="446" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
-                            <path d="M400 355 C400 362 392 362 392 357" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+                            <path d="M400 446 C400 453 392 453 392 448" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" fill="none" strokeLinecap="round" />
 
                         </svg>
                     </div>
 
                     {/* CTA Card — "suspended" from crane, swings like a pendulum */}
-                    <div className="crane-swing relative -mt-4 bg-white dark:bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-zinc-200 dark:border-white/10 p-10 md:p-14 text-center max-w-lg w-full shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] cursor-default">
+                    <div className="crane-swing relative -mt-4 bg-white dark:bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-zinc-200 dark:border-white/10 p-7 md:p-14 text-center max-w-2xl w-full shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] cursor-default">
                         {/* Attachment point — visual connector to cable above */}
                         <div className="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 border border-blue-500/25 rounded-full bg-zinc-100 dark:bg-[#09090b] flex items-center justify-center">
                             <div className="w-2 h-2 bg-blue-500/40 rounded-full"></div>