diff --git a/next.config.ts b/next.config.ts
index 13a2dc6..025ca0d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  images: {
+    qualities: [75, 90, 95],
+  },
   async redirects() {
     return [
       {
diff --git a/public/images/about_bg.png b/public/images/about_bg.png
new file mode 100644
index 0000000..5cdfe3d
Binary files /dev/null and b/public/images/about_bg.png differ
diff --git a/public/images/meet_the_agents_bg.png b/public/images/meet_the_agents_bg.png
new file mode 100644
index 0000000..0fb540d
Binary files /dev/null and b/public/images/meet_the_agents_bg.png differ
diff --git a/public/team/4.jpg b/public/team/4.jpg
deleted file mode 100644
index 21b88b8..0000000
Binary files a/public/team/4.jpg and /dev/null differ
diff --git a/public/team/4.png b/public/team/4.png
new file mode 100644
index 0000000..3ffd5b0
Binary files /dev/null and b/public/team/4.png differ
diff --git a/src/app/about_us/page.tsx b/src/app/about_us/page.tsx
index 40ba68c..d3e6bba 100644
--- a/src/app/about_us/page.tsx
+++ b/src/app/about_us/page.tsx
@@ -32,23 +32,12 @@ export default function AboutUsPage() {
         position: 'relative', overflow: 'hidden',
       }}>
         {/* Background photo */}
-        <Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <Image src="/images/about_bg.png" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
         <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,0.55) 85%)' }} />
         <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
         {/* Accent blobs */}
         <div style={{ position: 'absolute', top: '-12%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
         <div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
-        {/* Big ghost text */}
-        <div style={{
-          position: 'absolute', top: '50%', left: '50%',
-          transform: 'translate(-50%,-50%)',
-          fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
-          fontFamily: 'Sora, sans-serif', color: 'transparent',
-          WebkitTextStroke: '1px rgba(244,190,40,0.08)',
-          letterSpacing: '-0.06em', lineHeight: 1,
-          whiteSpace: 'nowrap', userSelect: 'none',
-          pointerEvents: 'none', zIndex: 0,
-        }}>LOYALY</div>
 
         <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
           <div style={{ maxWidth: 760 }}>
@@ -102,53 +91,117 @@ export default function AboutUsPage() {
         <div className="au-mv-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
           {[
             {
-              label: 'Mission', emoji: '🎯', bg: 'linear-gradient(160deg, #ffffff 0%, #fdf4e2 100%)', textColor: '#171512',
-              border: 'rgba(244,190,40,0.45)',
-              pillBg: 'rgba(244,190,40,0.14)', pillText: '#8a5a14', pillBorder: 'rgba(244,190,40,0.5)',
-              orb1: 'rgba(244,190,40,0.20)', orb2: 'rgba(255,152,0,0.14)',
-              gfx: 'rgba(244,190,40,0.38)',
+              label: 'Mission', bg: 'linear-gradient(135deg, #111116 0%, #161622 100%)', textColor: 'rgba(255,255,255,0.6)',
+              border: 'rgba(244,190,40,0.18)',
+              titleColor: '#ffffff',
+              pillBg: '#f4be28', pillText: '#111116', pillBorder: 'none',
+              iconBorder: 'rgba(244,190,40,0.45)', iconGlow: 'rgba(244,190,40,0.25)', lineColor: '#f4be28',
+              heading: <span>Our <span style={{ color: '#f4be28' }}>mission</span> is simple.</span>,
+              orb1: 'rgba(244,190,40,0.08)', orb2: 'rgba(255,152,0,0.06)',
+              icon: (
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
+                  <circle cx="10" cy="14" r="8" />
+                  <circle cx="10" cy="14" r="5" />
+                  <circle cx="10" cy="14" r="2" fill="#f4be28" stroke="none" />
+                  <path d="M10 14 L21 3" />
+                  <path d="M16 3h5v5" />
+                </svg>
+              ),
               body: 'Loyaly exists to close the gap between digital discovery and physical purchase. We give local stores the tools to compete, and give shoppers a reason to keep coming back.',
             },
             {
-              label: 'Vision', emoji: '🔮', bg: 'linear-gradient(160deg, #fff7e2 0%, #ffe6a8 100%)', textColor: '#171512',
-              border: 'rgba(244,190,40,0.55)',
-              pillBg: '#f4be28', pillText: '#171512', pillBorder: 'rgba(201,150,15,0.6)',
-              orb1: 'rgba(255,255,255,0.7)', orb2: 'rgba(244,190,40,0.3)',
-              gfx: 'rgba(201,150,15,0.32)',
+              label: 'Vision', bg: 'linear-gradient(135deg, #ffd95a 0%, #f4be28 100%)', textColor: 'rgba(23,21,18,0.72)',
+              border: 'rgba(244,190,40,0.3)',
+              titleColor: '#171512',
+              pillBg: '#171512', pillText: '#ffd95a', pillBorder: 'none',
+              iconBorder: 'rgba(23,21,18,0.35)', iconGlow: 'rgba(23,21,18,0.06)', lineColor: '#171512',
+              heading: <span>Our <span style={{ opacity: 0.85 }}>vision</span> is bigger.</span>,
+              orb1: 'rgba(255,255,255,0.4)', orb2: 'rgba(244,190,40,0.18)',
+              icon: (
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
+                  <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8-10-8-10-8Z" />
+                  <circle cx="12" cy="12" r="3.5" />
+                  <circle cx="12" cy="12" r="1.2" fill="#f4be28" stroke="none" />
+                </svg>
+              ),
               body: 'Empowering every neighbourhood, making exceptional in-store experiences and real Lyts accessible to all.',
             },
           ].map((mv, i) => (
             <Reveal key={i} delay={i * 0.15}>
               <div className="au-mv-card" style={{
                 position: 'relative',
-                padding: 'clamp(40px, 4vw, 60px)', borderRadius: 28, background: mv.bg,
+                padding: 'clamp(32px, 3.5vw, 52px)', borderRadius: 28, background: mv.bg,
                 border: `1px solid ${mv.border}`,
                 boxShadow: '0 24px 60px -30px rgba(23,21,18,0.22)',
                 height: '100%', minHeight: 360,
-                display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 24,
+                display: 'flex', flexDirection: 'column', justifyContent: 'center',
                 margin: 0, boxSizing: 'border-box',
               }}>
+                {/* SVG border drawing animation */}
+                <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 10 }}>
+                  {/* Sharp core path */}
+                  <rect
+                    className="border-rect"
+                    x="1" y="1"
+                    width="calc(100% - 2px)"
+                    height="calc(100% - 2px)"
+                    rx="28"
+                    fill="none"
+                    stroke={i === 0 ? '#f4be28' : '#171512'}
+                    strokeWidth="2.2"
+                    pathLength="100"
+                    style={{
+                      animationDelay: i === 0 ? '0.4s' : '0.55s',
+                    }}
+                  />
+                </svg>
                 {/* Animated background orbs (clipped to the card) */}
                 <div className="au-mv-bg" aria-hidden style={{ position: 'absolute', inset: 0, borderRadius: 28, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
                   <span className="au-mv-orb au-mv-orb-1" style={{ position: 'absolute', top: '-18%', left: '-12%', width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb1} 0%, transparent 70%)` }} />
                   <span className="au-mv-orb au-mv-orb-2" style={{ position: 'absolute', bottom: '-20%', right: '-10%', width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb2} 0%, transparent 70%)` }} />
                 </div>
 
-                {/* Pop-out corner sticker */}
-                <span aria-hidden style={{ position: 'absolute', top: -22, right: -14, fontSize: 46, transform: 'rotate(12deg)', zIndex: 2 }}>{mv.emoji}</span>
+                <div className="au-mv-card-layout" style={{ display: 'flex', gap: 'clamp(20px, 3vw, 32px)', alignItems: 'flex-start', position: 'relative', zIndex: 1 }}>
+                  {/* Left side: circular icon container */}
+                  <div style={{
+                    flexShrink: 0,
+                    width: 76, height: 76, borderRadius: '50%',
+                    background: 'radial-gradient(circle at 35% 30%, #1f1f26 0%, #0b0b0e 100%)',
+                    border: i === 0 ? '2.5px solid rgba(244, 190, 40, 0.65)' : '2.5px solid rgba(23, 21, 18, 0.45)',
+                    boxShadow: i === 0 ? '0 0 28px rgba(244, 190, 40, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.08)' : '0 0 28px rgba(23, 21, 18, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.08)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  }}>
+                    {mv.icon}
+                  </div>
 
-                {/* Tilted sticker-pill label */}
-                <span style={{
-                  position: 'relative', zIndex: 1,
-                  display: 'inline-flex', alignItems: 'center', gap: 7, alignSelf: 'flex-start',
-                  transform: 'rotate(-2deg)', padding: '8px 16px', borderRadius: 100,
-                  background: mv.pillBg, color: mv.pillText, border: `1.5px solid ${mv.pillBorder}`,
-                  fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif',
-                }}>{mv.emoji} {mv.label}</span>
+                  {/* Right side: content stack */}
+                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
+                    {/* Badge */}
+                    <span style={{
+                      display: 'inline-flex', alignItems: 'center', alignSelf: 'flex-start',
+                      padding: '5px 12px', borderRadius: 8,
+                      background: mv.pillBg, color: mv.pillText,
+                      fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif',
+                    }}>{mv.label}</span>
 
-                <p style={{ position: 'relative', zIndex: 1, fontSize: 'clamp(21px, 2.4vw, 34px)', fontWeight: 500, lineHeight: 1.3, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.015em' }}>
-                  {mv.body}
-                </p>
+                    {/* Heading */}
+                    <h3 style={{
+                      margin: 0,
+                      fontSize: 'clamp(22px, 2.3vw, 36px)',
+                      fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.035em',
+                      color: mv.titleColor, fontFamily: 'Sora, sans-serif',
+                    }}>{mv.heading}</h3>
+
+                    {/* Line separator */}
+                    <div style={{ width: 34, height: 2.5, background: mv.lineColor, borderRadius: 2, margin: '2px 0 6px' }} />
+
+                    {/* Description */}
+                    <p style={{
+                      margin: 0, fontSize: 'clamp(14px, 1.05vw, 16px)', lineHeight: 1.65,
+                      color: mv.textColor, fontFamily: 'Sora, sans-serif', fontWeight: 500,
+                    }}>{mv.body}</p>
+                  </div>
+                </div>
               </div>
             </Reveal>
           ))}
@@ -218,7 +271,7 @@ export default function AboutUsPage() {
 
       <style>{`
         /* Animated gradient glow ring behind each card */
-        .au-mv-card::before {
+        .au-mv-card.has-glow::before {
           content: '';
           position: absolute;
           inset: -2px;
@@ -234,6 +287,16 @@ export default function AboutUsPage() {
           0%, 100% { background-position: 0% 50%; opacity: 0.35; }
           50% { background-position: 100% 50%; opacity: 0.6; }
         }
+        .border-rect {
+          stroke-dasharray: 20 80;
+          stroke-dashoffset: 100;
+          animation: borderTraceLoop 12s linear infinite;
+        }
+        @keyframes borderTraceLoop {
+          to {
+            stroke-dashoffset: 0;
+          }
+        }
         .au-mv-orb { filter: blur(26px); will-change: transform; }
         .au-mv-orb-1 { animation: auMvDrift1 10s ease-in-out infinite; }
         .au-mv-orb-2 { animation: auMvDrift2 13s ease-in-out infinite; }
@@ -255,7 +318,7 @@ export default function AboutUsPage() {
         .au-mv-dot-3 { animation-delay: 1.2s; }
         @keyframes auMvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.9); opacity: 0.2; } }
         @media (prefers-reduced-motion: reduce) {
-          .au-mv-orb-1, .au-mv-orb-2, .au-mv-card::before, .au-mv-gfx, .au-mv-ringspin, .au-mv-ringpulse, .au-mv-dot { animation: none !important; }
+          .au-mv-orb-1, .au-mv-orb-2, .au-mv-card.has-glow::before, .au-mv-gfx, .au-mv-ringspin, .au-mv-ringpulse, .au-mv-dot { animation: none !important; }
         }
         @media (max-width: 860px) {
           .au-story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
@@ -271,201 +334,693 @@ export default function AboutUsPage() {
 /* ── Team Carousel ─────────────────────────────────────────────────────── */
 
 const TEAM_MEMBERS = [
-  { name: 'Coming Soon', role: 'Co-Founder & CEO', gradient: 'linear-gradient(160deg,#1a0a3a 0%,#4a2080 100%)', initials: '?' },
-  { name: 'Coming Soon', role: 'Head of Product', gradient: 'linear-gradient(160deg,#0a1a3a 0%,#1a5080 100%)', initials: '?' },
-  { name: 'Coming Soon', role: 'Lead Engineer', gradient: 'linear-gradient(160deg,#1a1200 0%,#f4be28 100%)', initials: '✦' },
-  { name: 'Coming Soon', role: 'Head of Design', gradient: 'linear-gradient(160deg,#0a2a1a 0%,#1a8050 100%)', initials: '?' },
-  { name: 'Coming Soon', role: 'Growth & Marketing', gradient: 'linear-gradient(160deg,#2a0a1a 0%,#80203a 100%)', initials: '?' },
+  {
+    name: 'Ratan Kumar',
+    role: 'COO & Operational Specialist',
+    description: 'Leads operations, strategy and execution to deliver scale and excellence.',
+    img: '/team/1.png',
+    socials: { linkedin: '#', twitter: '#' }
+  },
+  {
+    name: 'Aravinth',
+    role: 'CFO & Finance Specialist',
+    description: 'Manages financial strategy, capital allocation, and business growth models.',
+    img: '/team/2.png',
+    socials: { linkedin: '#' }
+  },
+  {
+    name: 'Fazul Ilahi',
+    role: 'CTO & Technology Specialist',
+    description: 'Drives technology architecture, infrastructure, and platform engineering.',
+    img: '/team/3.png',
+    socials: { linkedin: '#' }
+  },
+  {
+    name: 'Suriya Kumar',
+    role: 'Engineering Head & AI Specialist',
+    description: 'Heads engineering initiatives and AI research for smart retail.',
+    img: '/team/4.png',
+    socials: { linkedin: '#' }
+  },
 ];
 
 function TeamCarousel() {
-  const [active, setActive] = useState(2);
-
+  const [active, setActive] = useState(0);
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const { ref, visible } = useReveal();
+  const count = TEAM_MEMBERS.length;
+  
+  // Dimensions matching premium layout
   const CARD_W = 320;
   const CARD_GAP = 24;
   const STEP = CARD_W + CARD_GAP;
 
+  const go = (dir: number) => setActive(a => Math.min(count - 1, Math.max(0, a + dir)));
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    const diff = touchStart - touchEnd;
+    if (diff > 50) go(1);
+    if (diff < -50) go(-1);
+    setTouchStart(null);
+    setTouchEnd(null);
+  };
+
+  // Staggered enter transitions
+  const enter = (order: number): React.CSSProperties => ({
+    opacity: visible ? 1 : 0,
+    transform: visible ? 'none' : 'translateY(38px)',
+    transition: `opacity 0.7s cubic-bezier(0.22,1,0.36,1) ${order * 0.09}s, transform 0.7s cubic-bezier(0.22,1,0.36,1) ${order * 0.09}s`,
+  });
+
+  const indexStr = String(active + 1).padStart(2, '0');
+
   return (
-    <section style={{ padding: '100px 0 120px', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
-      {/* Grid bg */}
-      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '60px 60px' }} />
+    <section ref={ref as React.RefObject<HTMLElement>} style={{
+      padding: '110px 0 120px',
+      background: '#07070d',
+      margin: '0 20px 20px',
+      borderRadius: 24,
+      overflow: 'hidden',
+      position: 'relative'
+    }}>
+      {/* Grid background */}
+      <div style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        backgroundImage: 'linear-gradient(rgba(244,190,40,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.02) 1px,transparent 1px)',
+        backgroundSize: '60px 60px'
+      }} />
 
-      {/* Header */}
-      <div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
-        <SectionEyebrow variant="dot" style={{ marginBottom: 16 }}>The Team</SectionEyebrow>
-        <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
-          Builders. Thinkers.<br />Retail obsessives.
-        </h2>
-        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
-          Profiles coming soon. We&apos;re still busy building the future of retail.
-        </p>
+      {/* Ambient glow behind active card */}
+      <div className="team-glow" style={{
+        position: 'absolute',
+        top: '50%',
+        left: '55%',
+        width: 600,
+        height: 600,
+        transform: 'translate(-50%,-50%)',
+        background: 'radial-gradient(circle,rgba(244,190,40,0.12) 0%,transparent 65%)',
+        pointerEvents: 'none',
+        filter: 'blur(30px)'
+      }} />
+
+      {/* Top right Pagination dots */}
+      <div style={{
+        position: 'absolute',
+        top: 50,
+        right: 80,
+        display: 'flex',
+        gap: 8,
+        zIndex: 5,
+        ...enter(3)
+      }} className="team-top-dots">
+        {TEAM_MEMBERS.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setActive(i)}
+            aria-label={`Go to slide ${i + 1}`}
+            style={{
+              width: i === active ? 24 : 8,
+              height: 8,
+              borderRadius: 4,
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              background: i === active ? '#f4be28' : 'rgba(255,255,255,0.2)',
+              transition: 'all 0.4s cubic-bezier(0.22,1,0.36,1)'
+            }}
+          />
+        ))}
       </div>
 
-      {/* Carousel viewport */}
-      <div style={{ position: 'relative', zIndex: 2, height: 'clamp(380px,48vw,560px)', overflow: 'hidden' }}>
-        {/* Sliding track — translate so active card is always centered */}
-        <div style={{
+      <div className="team-wrap" style={{
+        position: 'relative',
+        zIndex: 2,
+        maxWidth: 1280,
+        margin: '0 auto',
+        padding: '0 60px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 64
+      }}>
+        {/* Left Column: Heading, Subtext, Brand Badge */}
+        <div className="team-head" style={{
+          flexShrink: 0,
+          width: 'clamp(280px, 30vw, 360px)',
           display: 'flex',
-          gap: CARD_GAP,
-          alignItems: 'center',
-          height: '100%',
-          position: 'absolute',
-          left: '50%',
-          transform: `translateX(calc(-50% - ${(active - 2) * STEP}px))`,
-          transition: 'transform 0.6s cubic-bezier(0.22,1,0.36,1)',
-          paddingLeft: STEP * 2,
-          paddingRight: STEP * 2,
+          flexDirection: 'column',
+          position: 'relative'
         }}>
-          {TEAM_MEMBERS.map((member, i) => {
-            const dist = Math.abs(i - active);
-            const isActive = i === active;
-            const scale = isActive ? 1 : dist === 1 ? 0.82 : 0.68;
-            const blur = isActive ? 0 : dist === 1 ? 2 : 4;
-            const opacity = isActive ? 1 : dist === 1 ? 0.72 : 0.42;
-            const cardH = isActive ? '100%' : dist === 1 ? '82%' : '68%';
+          {/* Eyebrow */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            marginBottom: 20,
+            ...enter(0)
+          }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#f4be28' }} />
+            <span style={{
+              fontSize: 12,
+              fontWeight: 800,
+              letterSpacing: '0.2em',
+              color: '#f4be28',
+              textTransform: 'uppercase',
+              fontFamily: 'Sora, sans-serif'
+            }}>THE TEAM</span>
+          </div>
 
-            return (
-              <div
-                key={i}
-                onClick={() => setActive(i)}
-                style={{
-                  flexShrink: 0,
-                  width: CARD_W,
-                  height: cardH,
-                  borderRadius: 32,
-                  background: member.gradient,
-                  cursor: isActive ? 'default' : 'pointer',
-                  filter: `blur(${blur}px)`,
-                  transform: `scale(${scale})`,
-                  opacity,
-                  transition: 'all 0.6s cubic-bezier(0.22,1,0.36,1)',
-                  position: 'relative',
-                  overflow: 'hidden',
-                  boxShadow: isActive ? '0 40px 100px rgba(0,0,0,0.75)' : '0 10px 40px rgba(0,0,0,0.35)',
-                  border: isActive ? '1.5px solid rgba(244,190,40,0.4)' : '1px solid rgba(255,255,255,0.07)',
-                  alignSelf: 'center',
-                }}
-              >
-                {/* Dark gradient overlay */}
-                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.8) 100%)', zIndex: 2 }} />
+          {/* Heading */}
+          <h2 style={{
+            fontSize: 'clamp(36px, 4vw, 56px)',
+            fontWeight: 800,
+            letterSpacing: '-0.04em',
+            lineHeight: 1.1,
+            color: '#fff',
+            margin: '0 0 24px',
+            fontFamily: 'Sora, sans-serif',
+            ...enter(1)
+          }}>
+            The people<br />
+            behind{' '}
+            <span style={{ position: 'relative', color: '#f4be28', display: 'inline-block' }}>
+              Lytsup
+              {/* Custom SVG underline */}
+              <svg viewBox="0 0 100 10" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, right: 0, bottom: -6, width: '100%', height: 6, fill: '#f4be28' }}>
+                <path d="M0,5 C30,2 70,8 100,5 L100,7 C70,10 30,4 0,7 Z" />
+              </svg>
+            </span>
+            {/* Sparkle star */}
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ color: '#f4be28', display: 'inline-block', marginLeft: 8, verticalAlign: 'super' }}>
+              <path d="M12 0L14.8 9.2L24 12L14.8 14.8L12 24L9.2 14.8L0 12L9.2 9.2L12 0Z" />
+            </svg>
+          </h2>
 
-                {/* Watermark */}
-                <div style={{
-                  position: 'absolute', top: '40%', left: '50%',
-                  transform: 'translate(-50%,-50%)',
-                  fontSize: 96, fontWeight: 900,
-                  color: 'rgba(255,255,255,0.06)', fontFamily: 'Sora, sans-serif',
-                  userSelect: 'none', pointerEvents: 'none', lineHeight: 1,
-                }}>{member.initials}</div>
+          {/* Subtext */}
+          <p style={{
+            fontSize: 15,
+            color: 'rgba(255,255,255,0.45)',
+            fontFamily: 'Sora, sans-serif',
+            margin: 0,
+            lineHeight: 1.6,
+            ...enter(2)
+          }}>
+            A passionate team building the future of retail loyalty through AI, innovation and purpose.
+          </p>
 
-                {/* Avatar */}
-                <div style={{
-                  position: 'absolute', top: '35%', left: '50%',
-                  transform: 'translate(-50%,-50%)',
-                  width: isActive ? 76 : 52, height: isActive ? 76 : 52,
-                  borderRadius: '50%',
-                  background: 'rgba(255,255,255,0.07)',
-                  border: `2px solid rgba(244,190,40,${isActive ? 0.4 : 0.2})`,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'all 0.6s ease', zIndex: 3,
-                }}>
-                  <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1px solid rgba(244,190,40,0.3)' }} />
-                </div>
+          {/* United by Purpose Badge */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 16,
+            padding: '16px 20px',
+            borderRadius: 16,
+            background: 'rgba(255, 255, 255, 0.02)',
+            border: '1px solid rgba(255, 255, 255, 0.05)',
+            backdropFilter: 'blur(10px)',
+            boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)',
+            alignSelf: 'flex-start',
+            marginTop: 40,
+            position: 'relative',
+            overflow: 'hidden',
+            width: '100%',
+            ...enter(3)
+          }} className="team-purpose-badge">
+            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: 'linear-gradient(to bottom, #f4be28, transparent)' }} />
+            <div style={{
+              width: 44,
+              height: 44,
+              borderRadius: '50%',
+              background: 'rgba(244, 190, 40, 0.1)',
+              border: '1px solid rgba(244, 190, 40, 0.25)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#f4be28',
+              flexShrink: 0
+            }}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
+            </div>
+            <div style={{ fontFamily: 'Sora, sans-serif' }}>
+              <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1.25 }}>United by purpose.</div>
+              <div style={{ fontSize: 12, color: 'rgba(255, 255, 255, 0.45)', marginTop: 2 }}>Driven by innovation.</div>
+            </div>
+          </div>
 
-                {/* Name & role */}
-                <div style={{
-                  position: 'absolute', bottom: 0, left: 0, right: 0,
-                  padding: '20px 22px 26px', zIndex: 4,
-                  opacity: isActive ? 1 : 0,
-                  transition: 'opacity 0.4s ease',
-                }}>
-                  <div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
-                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
-                </div>
-
-                {/* Gold dot */}
-                {isActive && (
-                  <div style={{ position: 'absolute', top: 18, right: 18, zIndex: 4, width: 10, height: 10, borderRadius: '50%', background: '#f4be28', boxShadow: '0 0 14px rgba(244,190,40,0.9)' }} />
-                )}
-              </div>
-            );
-          })}
+          {/* Dotted vector wave line at bottom-left */}
+          <div style={{ position: 'absolute', bottom: -100, left: -40, width: 280, height: 100, pointerEvents: 'none', opacity: 0.5 }}>
+            <svg viewBox="0 0 300 100" style={{ width: '100%', height: '100%' }}>
+              <path d="M0,80 Q75,50 150,80 T300,40" fill="none" stroke="url(#wave-gradient)" strokeWidth="1.5" strokeDasharray="3 6" />
+              <path d="M0,95 Q80,65 160,95 T300,55" fill="none" stroke="url(#wave-gradient)" strokeWidth="1" strokeDasharray="1 5" />
+              <defs>
+                <linearGradient id="wave-gradient" x1="0" y1="0" x2="1" y2="0">
+                  <stop offset="0%" stopColor="#f4be28" stopOpacity="0.8" />
+                  <stop offset="60%" stopColor="#f4be28" stopOpacity="0.3" />
+                  <stop offset="100%" stopColor="#f4be28" stopOpacity="0" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
         </div>
 
-        {/* Edge fade masks */}
-        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(90deg,#07070d 0%,transparent 18%,transparent 82%,#07070d 100%)', zIndex: 10 }} />
-      </div>
-
-      {/* Navigation dots + arrow buttons */}
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 24, marginTop: 44, position: 'relative', zIndex: 2 }}>
-
-        {/* Left arrow */}
-        <button
-          onClick={() => setActive(a => Math.max(0, a - 1))}
-          disabled={active === 0}
-          className="carousel-arrow"
-          style={{
-            width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
-            background: active === 0 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
-            color: active === 0 ? 'rgba(255,255,255,0.2)' : '#f4be28',
-            cursor: active === 0 ? 'default' : 'pointer',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            transition: 'all 0.3s ease',
-            animation: active > 0 ? 'arrowPulse 2s ease-in-out infinite' : 'none',
-          }}
-        >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M19 12H5M12 5l-7 7 7 7"/>
-          </svg>
-        </button>
-
-        {/* Dots */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          {TEAM_MEMBERS.map((_, i) => (
-            <button
-              key={i}
-              onClick={() => setActive(i)}
+        {/* Right Column: Carousel Stage */}
+        <div className="team-stage" style={{ flex: 1, minWidth: 0, position: 'relative' }}>
+          {/* Main viewport */}
+          <div style={{ position: 'relative', height: 510, padding: '20px 10px', margin: '-20px -10px', overflow: 'hidden' }}>
+            <div
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
               style={{
-                width: i === active ? 28 : 8, height: 8,
-                borderRadius: 4, border: 'none', cursor: 'pointer', padding: 0,
-                background: i === active ? '#f4be28' : 'rgba(255,255,255,0.2)',
-                transition: 'all 0.35s ease',
+                display: 'flex',
+                gap: CARD_GAP,
+                alignItems: 'center',
+                height: '100%',
+                transform: `translateX(${-active * STEP}px)`,
+                transition: 'transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1)',
               }}
-            />
-          ))}
-        </div>
+            >
+              {TEAM_MEMBERS.map((member, i) => {
+                const isActive = i === active;
+                const cardIndexStr = String(i + 1).padStart(2, '0');
+                
+                return (
+                  <article
+                    key={i}
+                    onClick={() => setActive(i)}
+                    className={`team-card${isActive ? ' is-active' : ''}`}
+                    style={{
+                      flexShrink: 0,
+                      width: CARD_W,
+                      position: 'relative',
+                      height: isActive ? 470 : 400,
+                      borderRadius: 20,
+                      overflow: 'hidden',
+                      cursor: isActive ? 'default' : 'pointer',
+                      background: '#0b0b10',
+                      border: isActive ? '2px solid #f4be28' : '1px solid rgba(255,255,255,0.06)',
+                      boxShadow: isActive 
+                        ? '0 25px 50px rgba(0,0,0,0.8), 0 0 30px rgba(244,190,40,0.18)' 
+                        : '0 10px 30px rgba(0,0,0,0.4)',
+                      transition: 'all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1)',
+                      opacity: visible ? (isActive ? 1 : 0.45) : 0,
+                      transform: visible 
+                        ? (isActive ? 'scale(1)' : 'scale(0.94)') 
+                        : 'translateY(48px) scale(0.92)',
+                      transitionDelay: visible ? `${0.15 + i * 0.08}s` : '0s',
+                    }}
+                  >
+                    {/* Top Left Number Tag */}
+                    <div style={{
+                      position: 'absolute',
+                      top: 20,
+                      left: 20,
+                      zIndex: 10,
+                      padding: '6px 12px',
+                      borderRadius: 6,
+                      fontSize: 12,
+                      fontWeight: 800,
+                      fontFamily: 'Sora, sans-serif',
+                      background: isActive ? '#f4be28' : 'rgba(255, 255, 255, 0.08)',
+                      color: isActive ? '#07070d' : 'rgba(255, 255, 255, 0.7)',
+                      backdropFilter: isActive ? 'none' : 'blur(4px)',
+                      border: isActive ? 'none' : '1px solid rgba(255,255,255,0.1)',
+                      transition: 'all 0.5s ease'
+                    }}>
+                      {cardIndexStr}
+                    </div>
 
-        {/* Right arrow */}
-        <button
-          onClick={() => setActive(a => Math.min(TEAM_MEMBERS.length - 1, a + 1))}
-          disabled={active === TEAM_MEMBERS.length - 1}
-          className="carousel-arrow"
-          style={{
-            width: 48, height: 48, borderRadius: '50%', border: '1.5px solid rgba(244,190,40,0.35)',
-            background: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.04)' : 'rgba(244,190,40,0.1)',
-            color: active === TEAM_MEMBERS.length - 1 ? 'rgba(255,255,255,0.2)' : '#f4be28',
-            cursor: active === TEAM_MEMBERS.length - 1 ? 'default' : 'pointer',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            transition: 'all 0.3s ease',
-            animation: active < TEAM_MEMBERS.length - 1 ? 'arrowPulse 2s ease-in-out 0.3s infinite' : 'none',
-          }}
-        >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M5 12h14M12 5l7 7-7 7"/>
-          </svg>
-        </button>
+                    {/* Member photo (Ken-Burns zoom on active) */}
+                    <div className={isActive ? 'team-kb' : ''} style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
+                      <Image
+                        src={member.img}
+                        alt={member.name}
+                        fill
+                        quality={95}
+                        sizes="(max-width: 900px) 90vw, 640px"
+                        draggable={false}
+                        style={{
+                          objectFit: 'cover',
+                          objectPosition: 'top center',
+                          filter: isActive ? 'grayscale(0) brightness(1)' : 'grayscale(1) brightness(0.35) contrast(0.95)',
+                          transition: 'filter 0.7s ease, transform 0.7s ease',
+                        }}
+                      />
+                    </div>
+
+                    {/* Dark gradient overlay/scrim */}
+                    <div style={{
+                      position: 'absolute',
+                      inset: 0,
+                      zIndex: 2,
+                      background: 'linear-gradient(180deg, transparent 35%, rgba(7,7,13,0.5) 65%, rgba(7,7,13,0.98) 100%)',
+                      opacity: isActive ? 1 : 0.75,
+                      transition: 'opacity 0.5s ease'
+                    }} />
+
+                    {/* Sheen sweep on activation */}
+                    {isActive && <div key={`sheen-${active}`} className="team-sheen" style={{ position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none' }} />}
+
+                    {/* Details block */}
+                    <div style={{
+                      position: 'absolute',
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      zIndex: 4,
+                      padding: '24px 24px 28px',
+                      fontFamily: 'Sora, sans-serif'
+                    }}>
+                      {/* Short yellow line */}
+                      <div style={{
+                        width: 24,
+                        height: 2.5,
+                        background: '#f4be28',
+                        borderRadius: 2,
+                        marginBottom: 14,
+                        transformOrigin: 'left',
+                        transform: isActive ? 'scaleX(1)' : 'scaleX(0.7)',
+                        opacity: isActive ? 1 : 0.5,
+                        transition: 'all 0.5s ease'
+                      }} />
+
+                      {/* Name */}
+                      <div style={{
+                        fontSize: 24,
+                        fontWeight: 800,
+                        color: '#fff',
+                        letterSpacing: '-0.02em',
+                        lineHeight: 1.1,
+                        marginBottom: 6,
+                        transition: 'color 0.5s ease'
+                      }}>{member.name}</div>
+
+                      {/* Role */}
+                      <div style={{
+                        fontSize: 13,
+                        fontWeight: 600,
+                        color: '#f4be28',
+                        marginBottom: 14
+                      }}>{member.role}</div>
+
+                      {/* Description */}
+                      <p style={{
+                        fontSize: 12.5,
+                        color: 'rgba(255, 255, 255, 0.55)',
+                        lineHeight: 1.55,
+                        margin: 0,
+                        opacity: isActive ? 1 : 0,
+                        maxHeight: isActive ? 100 : 0,
+                        overflow: 'hidden',
+                        transition: 'opacity 0.5s ease 0.15s, maxHeight 0.5s ease 0.1s'
+                      }}>{member.description}</p>
+
+                      {/* Social icons */}
+                      <div style={{
+                        display: 'flex',
+                        gap: 8,
+                        marginTop: 16,
+                        opacity: isActive ? 1 : 0,
+                        maxHeight: isActive ? 50 : 0,
+                        overflow: 'hidden',
+                        transition: 'opacity 0.5s ease 0.25s, maxHeight 0.5s ease 0.2s'
+                      }}>
+                        {member.socials.linkedin && (
+                          <a
+                            href={member.socials.linkedin}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: '50%',
+                              border: '1px solid rgba(255,255,255,0.15)',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              color: 'rgba(255,255,255,0.6)',
+                              transition: 'all 0.3s ease',
+                              textDecoration: 'none'
+                            }}
+                            className="team-social"
+                          >
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                              <path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0zM.25 8h4.5v12h-4.5V8zM8 8h4.3v1.64h.06c.6-1.06 2.06-2.18 4.24-2.18 4.53 0 5.37 2.82 5.37 6.49V20h-4.5v-5.36c0-1.28-.02-2.92-1.78-2.92-1.78 0-2.06 1.39-2.06 2.83V20H8V8z"/>
+                            </svg>
+                          </a>
+                        )}
+                        {member.socials.twitter && (
+                          <a
+                            href={member.socials.twitter}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              width: 32,
+                              height: 32,
+                              borderRadius: '50%',
+                              border: '1px solid rgba(255,255,255,0.15)',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              color: 'rgba(255,255,255,0.6)',
+                              transition: 'all 0.3s ease',
+                              textDecoration: 'none'
+                            }}
+                            className="team-social"
+                          >
+                            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
+                              <path d="M18.9 1.5h3.4l-7.4 8.5 8.7 11.5h-6.8l-5.3-7-6.1 7H1.9l7.9-9.1L1.5 1.5h7l4.8 6.4 5.6-6.4zm-1.2 18h1.9L7.1 3.4H5.1l12.6 16.1z"/>
+                            </svg>
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Overlap Next Chevron Arrow (positioned outside viewport so it's not clipped) */}
+          {active < count - 1 && (
+            <button
+              onClick={() => go(1)}
+              style={{
+                position: 'absolute',
+                right: -12,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                width: 50,
+                height: 50,
+                borderRadius: '50%',
+                background: 'rgba(7, 7, 13, 0.85)',
+                border: '1.5px solid rgba(244, 190, 40, 0.4)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#fff',
+                cursor: 'pointer',
+                zIndex: 20,
+                boxShadow: '0 10px 30px rgba(0,0,0,0.6), 0 0 15px rgba(244,190,40,0.15)',
+                transition: 'all 0.3s ease'
+              }}
+              className="team-next-overlay"
+              aria-label="Scroll to next team member"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+          )}
+
+          {/* Bottom controls: arrows and page counter */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 40, ...enter(4) }}>
+            {/* Prev button */}
+            <button
+              onClick={() => go(-1)}
+              disabled={active === 0}
+              className="team-arrow"
+              aria-label="Previous team member"
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: '50%',
+                border: active === 0 ? '1px solid rgba(255,255,255,0.06)' : '1.5px solid rgba(255,255,255,0.15)',
+                background: active === 0 ? 'transparent' : 'rgba(255,255,255,0.03)',
+                color: active === 0 ? 'rgba(255,255,255,0.15)' : '#fff',
+                cursor: active === 0 ? 'default' : 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)'
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+
+            {/* Next button */}
+            <button
+              onClick={() => go(1)}
+              disabled={active === count - 1}
+              className="team-arrow-next"
+              aria-label="Next team member"
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: '50%',
+                border: active === count - 1 ? '1px solid rgba(255,255,255,0.06)' : 'none',
+                background: active === count - 1 ? 'transparent' : '#f4be28',
+                color: active === count - 1 ? 'rgba(255,255,255,0.15)' : '#07070d',
+                cursor: active === count - 1 ? 'default' : 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxShadow: active === count - 1 ? 'none' : '0 10px 20px rgba(244,190,40,0.22)',
+                transition: 'all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)'
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+
+            {/* Page Index Counter */}
+            <div style={{ marginLeft: 12, fontSize: 14, color: 'rgba(255,255,255,0.3)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>
+              <span style={{ color: '#f4be28', fontWeight: 700 }}>{indexStr}</span> / <span style={{ color: 'rgba(255,255,255,0.6)' }}>{String(count).padStart(2, '0')}</span>
+            </div>
+          </div>
+        </div>
       </div>
 
       <style>{`
-        @keyframes arrowPulse {
-          0%,100% { box-shadow: 0 0 0 0 rgba(244,190,40,0); transform: scale(1); }
-          50% { box-shadow: 0 0 0 8px rgba(244,190,40,0.15); transform: scale(1.08); }
+        .team-arrow:hover:not(:disabled) {
+          border-color: #f4be28 !important;
+          color: #f4be28 !important;
+          background: rgba(244, 190, 40, 0.05) !important;
+          transform: scale(1.05);
         }
-        .carousel-arrow:hover:not(:disabled) {
-          background: rgba(244,190,40,0.22) !important;
-          border-color: rgba(244,190,40,0.7) !important;
-          transform: scale(1.12) !important;
-          box-shadow: 0 0 20px rgba(244,190,40,0.3) !important;
+        .team-arrow:active:not(:disabled) {
+          transform: scale(0.95);
+        }
+        .team-arrow-next:hover:not(:disabled) {
+          background: #ffd043 !important;
+          transform: scale(1.05);
+          box-shadow: 0 10px 25px rgba(244,190,40,0.35) !important;
+        }
+        .team-arrow-next:active:not(:disabled) {
+          transform: scale(0.95);
+        }
+        .team-next-overlay:hover {
+          background: rgba(7, 7, 13, 0.95) !important;
+          border-color: #f4be28 !important;
+          transform: translateY(-50%) scale(1.08) !important;
+          box-shadow: 0 15px 35px rgba(0,0,0,0.7), 0 0 20px rgba(244,190,40,0.3) !important;
+        }
+        .team-social:hover {
+          border-color: #f4be28 !important;
+          color: #f4be28 !important;
+          background: rgba(244, 190, 40, 0.08) !important;
+          transform: translateY(-2px);
+          box-shadow: 0 5px 15px rgba(244,190,40,0.2);
+        }
+        .team-card:not(.is-active):hover {
+          border-color: rgba(255,255,255,0.15) !important;
+          opacity: 0.75 !important;
+          transform: scale(0.96) !important;
+        }
+        .team-card:not(.is-active):hover img {
+          filter: grayscale(0.5) brightness(0.5) contrast(0.95) !important;
+        }
+        .team-glow {
+          animation: teamGlow 8s ease-in-out infinite;
+        }
+        @keyframes teamGlow {
+          0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
+          50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
+        }
+        .team-kb img {
+          animation: teamKenBurns 20s ease-in-out infinite alternate;
+        }
+        @keyframes teamKenBurns {
+          from { transform: scale(1); }
+          to { transform: scale(1.08); }
+        }
+        .team-sheen {
+          background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 48%, transparent 66%);
+          transform: translateX(-120%);
+          animation: teamSheen 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
+        }
+        @keyframes teamSheen {
+          to { transform: translateX(120%); }
+        }
+
+        @media (max-width: 1024px) {
+          .team-wrap {
+            padding: 0 40px !important;
+            gap: 40px !important;
+          }
+          .team-top-dots {
+            right: 40px !important;
+          }
+        }
+
+        @media (max-width: 900px) {
+          .team-wrap {
+            flex-direction: column !important;
+            gap: 48px !important;
+            align-items: stretch !important;
+            padding: 0 32px !important;
+          }
+          .team-head {
+            width: 100% !important;
+            align-items: center !important;
+            text-align: center;
+          }
+          .team-purpose-badge {
+            align-self: center !important;
+            max-width: 320px;
+          }
+          .team-top-dots {
+            display: none !important; /* Hide top-right dots on mobile, they overflow */
+          }
+          .team-stage {
+            width: 100% !important;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          }
+          .team-next-overlay {
+            right: 0px !important;
+          }
+        }
+        @media (max-width: 480px) {
+          .team-wrap {
+            padding: 0 20px !important;
+          }
+          .team-next-overlay {
+            display: none !important; /* Hide overlay button on very small screens */
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .team-glow, .team-kb img, .team-sheen { animation: none !important; }
         }
       `}</style>
     </section>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6eb3d20..8e6543a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,14 +7,14 @@ import BodyClassManager from '@/components/BodyClassManager';
 import Preloader from '@/components/Preloader';
 
 export const metadata: Metadata = {
-  title: 'Loyaly.AI | AI Powered Retail Intelligence',
+  title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
   description:
-    'Loyaly.AI is an AI powered retail intelligence platform that turns every store visit into a loyalty opportunity. Understand customers, drive engagement, and grow revenue.',
+    'Loyaly.AI is an offline shopping, online intelligence platform that turns every store visit into a loyalty opportunity. Understand customers, drive engagement, and grow revenue.',
   icons: {
     icon: '/favicon.ico',
   },
   openGraph: {
-    title: 'Loyaly.AI | AI Powered Retail Intelligence',
+    title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
     description:
       'Turn footfall into insight. Loyaly.AI uses AI to understand customer behaviour, personalise experiences, and maximise retail revenue.',
     url: 'https://loyaly.ai',
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Loyaly.AI | AI Powered Retail Intelligence',
+    title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
     description:
       'Turn footfall into insight. Loyaly.AI uses AI to understand customer behaviour, personalise experiences, and maximise retail revenue.',
   },
diff --git a/src/app/solutions_page/page.tsx b/src/app/solutions_page/page.tsx
index c1da28b..61ba936 100644
--- a/src/app/solutions_page/page.tsx
+++ b/src/app/solutions_page/page.tsx
@@ -102,23 +102,12 @@ export default function MeetTheCrewPage() {
         position: 'relative', overflow: 'hidden',
       }}>
         {/* Background photo */}
-        <Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <Image src="/images/meet_the_agents_bg.png" alt="" fill priority style={{ objectFit: 'fill', opacity: 0.9 }} />
         <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,0.55) 85%)' }} />
         <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
         {/* Accent blobs */}
         <div style={{ position: 'absolute', top: '-12%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
         <div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
-        {/* Big ghost text */}
-        <div style={{
-          position: 'absolute', top: '50%', left: '50%',
-          transform: 'translate(-50%,-50%)',
-          fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
-          fontFamily: 'Sora, sans-serif', color: 'transparent',
-          WebkitTextStroke: '1px rgba(244,190,40,0.08)',
-          letterSpacing: '-0.06em', lineHeight: 1,
-          whiteSpace: 'nowrap', userSelect: 'none',
-          pointerEvents: 'none', zIndex: 0,
-        }}>LOYALY</div>
 
         <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
           <div style={{ maxWidth: 760 }}>
@@ -131,7 +120,7 @@ export default function MeetTheCrewPage() {
               <span style={{ color: '#f4be28' }}>Agents.</span>
             </h1>
             <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto' }}>
-              The builders, thinkers, and retail obsessives behind Loyaly, working every day to make offline shopping as smart as online.
+              Four specialized AI agents working together to understand customers, optimize every interaction, and turn every visit into lasting loyalty.
             </p>
           </div>
         </div>
diff --git a/src/app/use_cases/page.tsx b/src/app/use_cases/page.tsx
index 522265f..8ce9f9a 100644
--- a/src/app/use_cases/page.tsx
+++ b/src/app/use_cases/page.tsx
@@ -17,43 +17,43 @@ const OUTCOMES = [
 
 const CAPS = [
   {
-    title: 'Merchant Campaign Platform', accent: '#7dd957',
+    title: 'Merchant Lyts Platform', accent: '#7dd957',
     bg: 'linear-gradient(140deg, #1d3f2b 0%, #0f2a1c 100%)', image: '/ai_agents/agent-1-c.png',
     icon: (<><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></>),
-    desc: 'Register your store, upload products and inventory, then launch interactive promotional campaigns in minutes. Define maximum discounts per product and track performance in real time.',
+    desc: 'Launch Lyts campaigns in minutes. Add products, assign Lyts, create offers, and track customer engagement with a real-time merchant dashboard.',
     metrics: [
-      { val: '5+', lbl: 'Game formats', icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>) },
-      { val: '1-click', lbl: 'Campaign setup', icon: (<><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /><path d="m13 13 6 6" /></>) },
+      { val: '500+', lbl: 'Partner Stores', icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>) },
+      { val: '2 mins', lbl: 'Campaign Setup', icon: (<><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /><path d="m13 13 6 6" /></>) },
     ],
   },
   {
-    title: 'Game Based Discount Engine', accent: '#a78bfa',
+    title: 'Game Powered Lyts', accent: '#a78bfa',
     bg: 'linear-gradient(140deg, #2a2352 0%, #1a1838 100%)', image: '/ai_agents/agent-2-c.png',
     icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>),
-    desc: 'Select a product, choose a game (Maze, Spin Wheel, Scratch Card, or Match Master) and set a maximum discount. Customers play once and discover their reward only after completing the game.',
+    desc: 'Powers Battery Challenges, Step Tracking, QR Check-ins, Spin Wheel, Scratch Cards, and personalized Lyts missions to increase engagement and customer retention.',
     metrics: [
-      { val: '4×', lbl: 'Engagement lift', icon: (<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>) },
-      { val: '100%', lbl: 'Margin controlled', icon: (<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />) },
+      { val: '6+', lbl: 'Game Formats', icon: (<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>) },
+      { val: '100%', lbl: 'Lyts Distribution', icon: (<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />) },
     ],
   },
   {
-    title: 'Smart Coupon System', accent: '#34d399',
+    title: 'Smart Lyts Engine', accent: '#34d399',
     bg: 'linear-gradient(140deg, #16704a 0%, #0d4d33 100%)', image: '/ai_agents/agent-4-c.png',
     icon: (<path d="M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />),
-    desc: 'Generate daily surprise coupons through the Battery Challenge and other activities. Offer flat discounts, BOGO, percentage-off deals, festival specials, and brand promotions, fresh every day.',
+    desc: 'Automatically generate Lyts-based offers. Create percentage discounts, cashback, BOGO deals, festival campaigns, and personalized promotions that keep customers coming back.',
     metrics: [
-      { val: '6', lbl: 'Coupon types', icon: (<><path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" /><line x1="7" x2="7.01" y1="7" y2="7" /></>) },
-      { val: 'Daily', lbl: 'Fresh surprises', icon: (<><rect width="18" height="18" x="3" y="4" rx="2" /><line x1="16" x2="16" y1="2" y2="6" /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /></>) },
+      { val: '10+', lbl: 'Offer Types', icon: (<><path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" /><line x1="7" x2="7.01" y1="7" y2="7" /></>) },
+      { val: 'Daily', lbl: 'Lyts Campaigns', icon: (<><rect width="18" height="18" x="3" y="4" rx="2" /><line x1="16" x2="16" y1="2" y2="6" /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /></>) },
     ],
   },
   {
-    title: 'Footfall & Campaign Analytics', accent: '#ffd8a8',
+    title: 'AI Retail Intelligence', accent: '#ffd8a8',
     bg: 'linear-gradient(140deg, #ee7420 0%, #d1560a 100%)', image: '/ai_agents/agent-3-c.png',
     icon: (<><line x1="18" x2="18" y1="20" y2="10" /><line x1="12" x2="12" y1="20" y2="4" /><line x1="6" x2="6" y1="20" y2="14" /></>),
-    desc: 'Track which campaigns drove store visits, measure conversion rates, monitor repeat footfall, and optimize your promotional budget with a real-time analytics dashboard.',
+    desc: 'Monitor customer visits, product performance, Lyts activity, and campaign success with real-time AI insights. Turn every interaction into measurable business growth.',
     metrics: [
-      { val: '98%', lbl: 'Count accuracy', icon: (<><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>) },
-      { val: '<9ms', lbl: 'Real-time latency', icon: (<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />) },
+      { val: '98%', lbl: 'Tracking Accuracy', icon: (<><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>) },
+      { val: 'Real-time', lbl: 'AI Insights', icon: (<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />) },
     ],
   },
 ];
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e7790d6..875092b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -128,7 +128,7 @@ export default function Footer() {
               </span>
             </Link>
             <p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
-              AI powered retail intelligence that turns every walk in into a loyal customer.
+              Offline shopping. Online intelligence.
             </p>
             <div style={{ display: 'flex', gap: 10 }}>
               {SOCIALS.map(({ label, href, icon }) => (
@@ -150,9 +150,6 @@ export default function Footer() {
           {/* Nav columns */}
           {NAV.map(col => (
             <nav key={col.title} className="ly-footer-nav" aria-label={col.title}>
-              <h5 style={{ margin: '0 0 20px', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>
-                {col.title}
-              </h5>
               <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                 {col.links.map(({ label, href }) => (
                   <li key={label}>
diff --git a/src/components/home/ProblemSection.tsx b/src/components/home/ProblemSection.tsx
index c20f5b6..3d675f6 100644
--- a/src/components/home/ProblemSection.tsx
+++ b/src/components/home/ProblemSection.tsx
@@ -153,58 +153,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
         </div>
       </div>
 
-      {/* India retail market stats strip */}
-      <div className="relative z-10 mx-auto problem-india-stats" style={{
-        maxWidth: 1200,
-        marginBottom: 'clamp(32px, 4vw, 48px)',
-        display: 'grid',
-        gridTemplateColumns: 'repeat(5, 1fr)',
-        gap: 'clamp(8px, 1.2vw, 14px)',
-      }}>
-        {[
-          {
-            val: '$2 Tn', label: 'Indian retail market by 2032, 26% CAGR',
-            icon: (<><line x1="12" y1="1" x2="12" y2="23" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>),
-          },
-          {
-            val: '5th', label: 'Largest retail destination globally',
-            icon: (<><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>),
-          },
-          {
-            val: '10%', label: "Of India's GDP from retail",
-            icon: (<><path d="M21.21 15.89A10 10 0 1 1 8 2.83" /><path d="M22 12A10 10 0 0 0 12 2v10z" /></>),
-          },
-          {
-            val: '12%', label: 'Of retail is organized, the rest is offline',
-            icon: (<><path d="M3 9l1.5-5h15L21 9" /><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9" /><path d="M9 21v-6h6v6" /></>),
-          },
-          {
-            val: '500M', label: "India's online shoppers by 2030, up from 250M",
-            icon: (<><polyline points="23 6 13.5 16.5 8.5 11.5 1 19" /><polyline points="17 6 23 6 23 12" /></>),
-          },
-        ].map((s, i) => (
-          <div key={i} className="problem-india-stat" style={{
-            padding: 'clamp(14px, 1.8vw, 20px)', borderRadius: 16,
-            background: '#f9f7f2', border: '1px solid rgba(23,21,18,0.08)',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
-              <span style={{
-                width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                background: 'linear-gradient(150deg, #ee3a34 0%, #c81e1e 100%)',
-                boxShadow: '0 6px 14px -6px rgba(200,30,30,0.6)',
-              }}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                  {s.icon}
-                </svg>
-              </span>
-              <div style={{ fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#171512', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.val}</div>
-            </div>
-            <div style={{ fontSize: '0.72rem', color: '#4f463a', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</div>
-          </div>
-        ))}
-      </div>
-
       {/* Grid wrapper */}
       <div className="relative z-10 mx-auto" style={{ maxWidth: 1200 }}>
         {/* Row 1: Red Stat Cards */}
@@ -527,15 +475,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
           box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
         }
 
-        .problem-india-stat {
-          transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
-        }
-        .problem-india-stat:hover {
-          border-color: rgba(239, 68, 68, 0.35);
-          box-shadow: 0 14px 30px -18px rgba(23,21,18,0.28);
-          transform: translateY(-3px);
-        }
-
         .dark-bento-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
@@ -592,7 +531,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
           #problem .problem-stats-row { grid-template-columns: 1fr !important; }
           #problem .dark-bento-grid { grid-template-columns: 1fr !important; }
           #problem .dark-bento-card-4 { grid-column: span 1; }
-          #problem .problem-india-stats { grid-template-columns: repeat(2, 1fr) !important; }
         }
       `}</style>
     </section>
diff --git a/src/components/home/ProductsSection.tsx b/src/components/home/ProductsSection.tsx
index 91bd27f..ebdc07a 100644
--- a/src/components/home/ProductsSection.tsx
+++ b/src/components/home/ProductsSection.tsx
@@ -653,7 +653,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
         }
         .products-card {
           flex: 0 0 auto;
-          width: clamp(320px, 74vw, 880px);
+          width: clamp(320px, 90vw, 1280px);
           /* Fill the band between heading and progress bar, capped on huge screens */
           height: min(740px, calc(100vh - var(--pt) - var(--pb)));
         }
@@ -704,7 +704,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
           }
           .products-track::-webkit-scrollbar { display: none; }
           .products-track { scrollbar-width: none; }
-          .products-card { height: auto; width: min(86vw, 460px); }
+          .products-card { height: auto; width: min(90vw, 520px); }
           .products-card { flex-direction: column !important; }
           .products-card-content { flex: 0 0 auto !important; }
           .products-card-visual {
diff --git a/src/components/home/heroCarouselData.ts b/src/components/home/heroCarouselData.ts
index 43842ff..348fa38 100644
--- a/src/components/home/heroCarouselData.ts
+++ b/src/components/home/heroCarouselData.ts
@@ -16,7 +16,7 @@ export interface HeroSlideData {
 export const HERO_SLIDES: HeroSlideData[] = [
   {
     id: 'intro',
-    badge: 'AI-Powered Retail Intelligence',
+    badge: 'Offline Shopping. Online Intelligence.',
     headline: 'Turn Every Visit Into Loyalty',
     highlightWords: ['Loyalty'],
     description:
diff --git a/src/components/use-cases/ProductsScrollSection.tsx b/src/components/use-cases/ProductsScrollSection.tsx
index 3f23af2..8f77025 100644
--- a/src/components/use-cases/ProductsScrollSection.tsx
+++ b/src/components/use-cases/ProductsScrollSection.tsx
@@ -147,7 +147,7 @@ export default function ProductsScrollSection() {
         <div style={{ position: 'relative', zIndex: 2, marginBottom: 'clamp(56px,8vh,96px)' }}>
           <SectionEyebrow variant="pill" style={{ marginBottom: 16 }}>Our Products</SectionEyebrow>
           <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 64px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif', maxWidth: 640 }}>
-            AI Powered Retail Intelligence.
+            Offline Shopping. Online Intelligence.
           </h2>
         </div>