fix intelligence grid

src/components/sections/Workflow1.tsx

@@ -23,13 +23,19 @@ export default function Workflow1() {
     }
   ];
 
-  // Auto-advance the carousel every 5s, infinite loop. Keyed on activeSlide so any
+  // Always begin the storytelling sequence from slide 1 (01/03) on mount — never
+  // preserve a previous slide index across remounts / route changes back to MileTruth.
+  useEffect(() => {
+    setActiveSlide(0);
+  }, []);
+
+  // Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any
   // manual selection resets the timer; pauses while the user hovers the card.
   useEffect(() => {
     if (paused) return;
     const id = setTimeout(() => {
       setActiveSlide((prev) => (prev + 1) % slides.length);
-    }, 5000);
+    }, 4000);
     return () => clearTimeout(id);
   }, [activeSlide, paused, slides.length]);
 
@@ -72,7 +78,7 @@ export default function Workflow1() {
                 initial={{ opacity: 0, y: 12 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -12 }}
-                transition={{ duration: 0.28, ease: "easeInOut" }}
+                transition={{ duration: 0.7, ease: "easeInOut" }}
                 className="dm-workflow-text"
               >
                 {slides[activeSlide].text}
@@ -131,7 +137,7 @@ const styles = `
   background: linear-gradient(180deg, #030a18 0%, #06101f 100%);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-top: none;
-  border-radius: 0 0 42px 42px;
+  border-radius: 0 0 28px 28px;
   /* No shadow: this card is flush under the optimisation card and merges with it as one
      continuous container — a shadow here would re-introduce a dark band at the seam. */
   box-shadow: none;
@@ -177,11 +183,12 @@ const styles = `
   text-transform: uppercase;
 }
 
-.dm-workflow-text-container { min-height: 110px; width: 100%; }
+.dm-workflow-text-container { min-height: 150px; width: 100%; }
 .dm-workflow-text {
   font-family: var(--font-manrope), system-ui, sans-serif;
-  font-size: 16px;
-  line-height: 1.65;
+  font-size: 21px;
+  line-height: 1.75;
+  letter-spacing: 0.01em;
   color: #A3A3A3;
   margin: 0 !important;
   padding: 0 !important;
@@ -220,17 +227,16 @@ const styles = `
 /* ── Responsive — keep insets/radius aligned to the optimisation card ── */
 @media (max-width: 1024px) {
   .dm-wf1-card {
-    margin: 0 20px 0;
-    border-radius: 0 0 42px 42px;
     padding: 44px 44px;
     gap: 44px;
   }
   .dm-workflow-title { font-size: 32px; }
+  .dm-workflow-text { font-size: 19px; }
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .dm-wf1-card {
     margin: 0 10px 0;
-    border-radius: 0 0 28px 28px;
+    border-radius: 0 0 20px 20px;
     padding: 36px 28px;
     gap: 36px;
     flex-direction: column;
@@ -238,6 +244,7 @@ const styles = `
   .dm-workflow-left { max-width: 280px; }
   .dm-workflow-right { width: 100%; }
   .dm-workflow-title { font-size: 28px; }
+  .dm-workflow-text { font-size: 17px; }
   .dm-workflow-text-container { min-height: auto; }
 }
 `;