feat: replace mobile agent card slider with horizontal swipe carousel and improve messaging header responsiveness

src/components/home/FeaturesSection.tsx

@@ -106,18 +106,30 @@ export function FeaturesSection({ content }: { content?: FeaturesContent }) {
             </div>
           )}
 
-          {/* Mobile Agent Cards - Tab style with dots */}
+          {/* Mobile Agent Cards - Horizontal swipe carousel */}
           {agents.length > 0 && (
             <div className="lg:hidden">
-              <div className="flex justify-center">
-                <AgentCard agent={agents[activeCard]} className="shadow-lg" />
+              <div
+                className="flex gap-4 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 -mx-4 px-4"
+                onScroll={(e) => {
+                  const el = e.currentTarget;
+                  const cardWidth = el.children[0]?.clientWidth || 254;
+                  const gap = 16;
+                  const idx = Math.round(el.scrollLeft / (cardWidth + gap));
+                  if (idx !== activeCard) setActiveCard(idx);
+                }}
+              >
+                {agents.map((agent, index) => (
+                  <div key={index} className="snap-center flex-shrink-0">
+                    <AgentCard agent={agent} className="shadow-lg" />
+                  </div>
+                ))}
               </div>
-              {/* Dot indicators */}
+              {/* Dot indicators (visual only — swipe to change) */}
               <div className="flex justify-center gap-2 mt-4">
                 {agents.map((_, index) => (
-                  <button
+                  <span
                     key={index}
-                    onClick={() => setActiveCard(index)}
                     className={`rounded-full transition-all ${
                       index === activeCard
                         ? 'w-[10px] h-[10px] bg-[#00293d]'