(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,48228,e=>{"use strict";let t=[{n:"01",key:"input",kicker:"Input",theme:"#22C55E"},{n:"02",key:"parallel",kicker:"Parallel Execution",theme:"#8B5CF6"},{n:"03",key:"optimize",kicker:"Smart Optimization",theme:"#3B82F6"},{n:"04",key:"grading",kicker:"Performance Grading",theme:"#F59E0B"},{n:"05",key:"winner",kicker:"Strategy Comparison",theme:"#C01227"}],r=t.length;function i(e){return[(e%2==0?-1:1)*1.4,0,-(13*e)]}e.s(["N",0,r,"STAGES",0,t,"cameraFor",0,function(e){let t,a,s,o,n,d,[l,c,p]=(a=Math.floor(t=Math.max(0,Math.min(r-1,e))),s=Math.min(r-1,a+1),o=t-a,n=i(a),d=i(s),[n[0]+(d[0]-n[0])*o,n[1]+(d[1]-n[1])*o,n[2]+(d[2]-n[2])*o]);return{pos:[.7*l,c+4,p+8.2],look:[.55*l,c+1.05,p-1.6]}},"districtPosition",0,i])},56305,e=>{"use strict";var t=e.i(43476),r=e.i(71645),i=e.i(46932),a=e.i(88653),s=e.i(70703),o=e.i(87652),n=e.i(95420),d=e.i(89970),l=e.i(83495),c=e.i(48228);let p=(0,s.default)(()=>e.A(30860),{loadableGenerated:{modules:[20927]},ssr:!1});function m({active:e}){return(0,t.jsx)("div",{className:"dm-st-rail","aria-hidden":!0,children:c.STAGES.map((i,a)=>(0,t.jsxs)(r.default.Fragment,{children:[a>0&&(0,t.jsx)("span",{className:`dm-st-rail__line is-${a<=e?"on":"off"}`}),(0,t.jsxs)("div",{className:`dm-st-rail__step is-${a{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),r=()=>{z(e.matches),E(t.matches)};return r(),e.addEventListener("change",r),t.addEventListener("change",r),()=>{e.removeEventListener("change",r),t.removeEventListener("change",r)}},[]),(0,r.useEffect)(()=>{let e=a.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(_(!0),j(!0),t.disconnect())},{rootMargin:"70% 0px"}),r=new IntersectionObserver(e=>j(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return t.observe(e),r.observe(e),()=>{t.disconnect(),r.disconnect()}},[]),(0,r.useEffect)(()=>{let e=a.current;if(!e)return;d.default.registerPlugin(l.ScrollTrigger);let t="before",r=0,i=l.ScrollTrigger.create({trigger:e,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let i=e.progress;s.current=i,g.set(i);let a=i<=2e-4?"before":i>=.9998?"after":"pinned";a!==t&&(t=a,b(a));let o=Math.round(i*(c.N-1));o!==r&&(r=o,v(o))}}),o=setTimeout(()=>l.ScrollTrigger.refresh(),120);return()=>{clearTimeout(o),i.kill()}},[g]);let C=(0,n.useTransform)(g,[0,.03,.06],[1,1,0]),T=(0,n.useTransform)(g,[.02,.07],[0,1]);return(0,t.jsxs)("section",{ref:a,className:`dm-st is-${u}${e?" is-connected":""}`,"aria-label":"Strategy — Happier Riders. Higher Fulfillment.",children:[(0,t.jsx)("div",{className:"dm-st-sticky",children:(0,t.jsxs)("div",{className:"dm-st-card",children:[k&&(0,t.jsx)("div",{className:"dm-st-canvas",children:(0,t.jsx)(p,{progress:s,reduced:S,isMobile:N,active:y&&"pinned"===u,stage:w})}),"before"!==u&&(0,t.jsxs)("div",{className:"dm-st-ui",children:[(0,t.jsxs)(i.motion.div,{className:"dm-st-top",style:{opacity:T},children:[(0,t.jsxs)("div",{className:"dm-st-eyebrow",children:[(0,t.jsx)("span",{className:"dm-st-dot"})," MileTruth Strategy Engine"]}),(0,t.jsx)(m,{active:w})]}),(0,t.jsxs)(i.motion.div,{className:"dm-st-scrollhint",style:{opacity:C},children:[(0,t.jsx)("span",{children:"Scroll to follow the strategy"}),(0,t.jsx)("span",{className:"dm-st-arrow",children:"↓"})]}),(0,t.jsxs)(x,{i:0,scroll:g,side:"left",active:w,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Orders & riders enter the system"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Orders are uploaded and matched against the available fleet, ready for assignment."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"59 Orders"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"4 Riders"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Fleet ready"})]})]}),(0,t.jsxs)(x,{i:1,scroll:g,side:"right",active:w,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Six strategies, evaluated in parallel"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"The AI runs every routing strategy at the same time — legacy baselines and MileTruth's unified engine."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"EV Aware"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Multi Trip"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"+4 more"})]})]}),(0,t.jsxs)(x,{i:2,scroll:g,side:"left",active:w,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Routes optimized & validated"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Every route is solved for distance, then checked against battery range and delivery SLAs."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Optimize"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Battery"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"SLA"})]})]}),(0,t.jsxs)(x,{i:3,scroll:g,side:"right",active:w,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Every strategy is scored"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Each strategy is graded live on fulfillment, SLA compliance, efficiency and battery feasibility."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Grade A"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"88% Fulfillment"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"95% SLA"})]})]}),(0,t.jsxs)(x,{i:4,scroll:g,side:"right",active:w,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Happier riders. Higher fulfillment."}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"EV Aware wins — the best fulfillment with feasible, battery-safe routes for every rider."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip dm-st-anchor__chip--win",children:"🏆 EV Aware"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"88% Score"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"52/59 Fulfilled"})]})]})]})]})}),(0,t.jsx)("style",{children:f})]})}let f=` /* Scroll length tuned for pacing: ~100vh per stage (was 144vh) so the 5 stages complete in noticeably less scrolling and the workflow feels tighter / faster. Stage cross-fade windows are progress-based (0…1), so they stay aligned. */ .dm-st { position: relative; height: 500vh; background: transparent; } .dm-st-sticky { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .dm-st.is-pinned .dm-st-sticky { position: fixed; top: 0; left: 0; } .dm-st.is-after .dm-st-sticky { position: absolute; top: auto; bottom: 0; } .dm-st-card { position: absolute !important; inset: 20px !important; border-radius: 28px !important; overflow: hidden !important; background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef1f6 60%, #e6eaf2 100%) !important; border: 1px solid rgba(15,23,42,0.08) !important; box-shadow: 0 30px 90px -34px rgba(15,23,42,0.4) !important; box-sizing: border-box !important; } @media (max-width: 767px) { .dm-st-card { inset: 10px !important; border-radius: 20px !important; } } /* Connected mode (inside Workflow 3): flatten the card's bottom so the Strategy content card below butts directly against it — same seam as Workflow 1 & 2. */ .dm-st.is-connected .dm-st-card { top: 20px !important; left: 20px !important; right: 20px !important; bottom: 0 !important; border-radius: 28px 28px 0 0 !important; border-bottom: none !important; /* Flush against the Strategy card below — drop the heavy downward shadow so it doesn't cast a dark band onto that card's top edge (the two read as one container). */ box-shadow: none !important; } @media (max-width: 767px) { .dm-st.is-connected .dm-st-card { top: 10px !important; left: 10px !important; right: 10px !important; bottom: 0 !important; border-radius: 20px 20px 0 0 !important; } } .dm-st-canvas { position: absolute; inset: 0; z-index: 1; } .dm-st-canvas canvas { display: block; } .dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a; } /* ---- Persistent header: title + 5-stage rail ---- */ .dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; } .dm-st-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.35; letter-spacing: 0.28em; text-transform: uppercase; color: #475569; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.72); border: 1px solid rgba(15,23,42,0.08); backdrop-filter: blur(10px); white-space: nowrap; } .dm-st-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 10px #6366f1; } .dm-st-rail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 980px; } .dm-st-rail__step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(15,23,42,0.08); backdrop-filter: blur(8px); transition: all 0.45s cubic-bezier(0.22,1,0.36,1); } .dm-st-rail__num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #64748b; background: rgba(15,23,42,0.06); } .dm-st-rail__title { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #64748b; white-space: nowrap; } .dm-st-rail__step.is-current { background: color-mix(in srgb, var(--c) 16%, white); border-color: var(--c); box-shadow: 0 0 22px -6px var(--c); } .dm-st-rail__step.is-current .dm-st-rail__num { background: var(--c); color: #fff; } .dm-st-rail__step.is-current .dm-st-rail__title { color: #0f172a; } .dm-st-rail__step.is-done .dm-st-rail__num { background: #22C55E; color: #fff; } .dm-st-rail__step.is-done .dm-st-rail__title { color: #334155; } .dm-st-rail__line { width: 14px; height: 1px; background: rgba(15,23,42,0.14); margin: 0 3px; transition: background 0.45s ease; } .dm-st-rail__line.is-on { background: var(--c, #22C55E); } .dm-st-scrollhint { position: absolute; bottom: clamp(26px, 6vh, 60px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; color: #64748b; text-transform: uppercase; text-align: center; } .dm-st-arrow { font-size: 18px; animation: dmStBob 1.8s ease-in-out infinite; } @keyframes dmStBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } } /* ---- Per-stage glass content card ---- */ .dm-st-card-story { position: absolute; bottom: clamp(24px, 6vh, 64px); width: min(484px, 88vw); pointer-events: auto; will-change: opacity, transform; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,0.94); border: 1px solid rgba(15,23,42,0.08); /* backdrop blur removed — card cross-fades/translates per scroll-stage; blur was the heaviest per-frame cost on this section. Near-opaque white keeps the glass look. */ border-top: 3px solid var(--c); box-shadow: 0 28px 70px -34px rgba(15,23,42,0.5); } .dm-st-card-story.is-left { left: clamp(18px, 5vw, 72px); } .dm-st-card-story.is-right { right: clamp(18px, 5vw, 72px); } .dm-st-card-story__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dm-st-pillar__num { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #fff; background: var(--c); border-radius: 7px; padding: 3px 8px; } .dm-st-pillar__kicker { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); } .dm-st .dm-st-pillar__title { margin: 0 0 14px !important; padding: 0 !important; color: #0f172a !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.015em !important; font-size: clamp(18px, 2vw, 26px) !important; line-height: 1.16 !important; } .dm-st .dm-st-pillar__title--hero { font-size: clamp(22px, 2.6vw, 34px) !important; background: linear-gradient(90deg, #C01227, #E2354A) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .dm-st-foot { margin: 12px 0 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.5; color: #475569; display: flex; align-items: center; gap: 8px; } .dm-st-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: dmStPulse 1.8s ease-out infinite; } @keyframes dmStPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } /* In-scene 3D labels (drei ) — crisp glass chips floating in the WebGL scene */ .dm-st3d-file, .dm-st3d-count, .dm-st3d-ai, .dm-st3d-chip { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 0.2s linear; } .dm-st3d-file, .dm-st3d-ai { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f172a; background: rgba(255,255,255,0.88); border: 1px solid rgba(34,197,94,0.4); border-radius: 999px; padding: 6px 13px; box-shadow: 0 8px 22px -12px rgba(34,197,94,0.7); backdrop-filter: blur(8px); } .dm-st3d-count { font-size: 15px; font-weight: 800; color: #0f172a; background: rgba(255,255,255,0.9); border: 1px solid rgba(34,197,94,0.45); border-radius: 12px; padding: 6px 14px; box-shadow: 0 10px 26px -12px rgba(34,197,94,0.8); backdrop-filter: blur(8px); } .dm-st3d-count span { color: #16a34a; font-size: 19px; } .dm-st3d-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92); border: 1px solid rgba(34,197,94,0.4); border-radius: 12px; padding: 6px 11px; box-shadow: 0 10px 26px -14px rgba(15,23,42,0.7); backdrop-filter: blur(8px); } .dm-st3d-chip__ico { font-size: 17px; } .dm-st3d-chip__txt { display: flex; flex-direction: column; line-height: 1.15; } .dm-st3d-chip__txt b { font-size: 12.5px; font-weight: 800; color: #0f172a; } .dm-st3d-chip__txt { font-size: 10.5px; color: #475569; } /* Generic themed 3D chips (stages 02–05) — colour comes from --tc per element */ .dm-st3d-tag, .dm-st3d-score { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 0.2s linear; } .dm-st3d-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #0f172a; background: rgba(255,255,255,0.9); border: 1px solid color-mix(in srgb, var(--tc, #8B5CF6) 55%, white); border-radius: 999px; padding: 5px 11px; box-shadow: 0 8px 20px -12px var(--tc, #8B5CF6); backdrop-filter: blur(8px); } .dm-st3d-tag b { font-weight: 800; color: var(--tc, #0f172a); } .dm-st3d-tag.is-u { background: color-mix(in srgb, var(--tc) 14%, white); border-color: var(--tc); } .dm-st3d-tag.is-muted { opacity: 0.82; border-style: dashed; } .dm-st3d-tag.is-win { border-color: var(--tc); box-shadow: 0 10px 26px -10px var(--tc); } .dm-st3d-score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f172a; background: rgba(255,255,255,0.92); border: 1px solid color-mix(in srgb, var(--tc, #0f172a) 45%, white); border-radius: 12px; padding: 6px 13px; box-shadow: 0 10px 26px -12px var(--tc, #0f172a); backdrop-filter: blur(8px); } .dm-st3d-score b { font-size: 16px; font-weight: 800; color: var(--tc, #0f172a); } .dm-st3d-score.is-win { border-color: var(--tc); } /* Light side-card anchor — the 3D world now carries the detail */ .dm-st-anchor__lead { margin: 0 0 14px; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.55; color: #475569; } .dm-st-anchor__chips { display: flex; flex-wrap: wrap; gap: 8px; } .dm-st-anchor__chip { font-size: 12px; font-weight: 700; color: #334155; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 9%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); } .dm-st-anchor__chip--win { color: #fff; background: linear-gradient(90deg, #C01227, #E2354A); border-color: transparent; } /* In-world Command Center KPI card + Winner card (drei , faded by proximity) */ .dm-st3d-kpi, .dm-st3d-winner3d { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; pointer-events: none; user-select: none; transition: opacity 0.2s linear; } .dm-st3d-kpi { display: flex; flex-direction: column; gap: 5px; width: 132px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.95); border: 1px solid color-mix(in srgb, var(--tc, #F59E0B) 40%, white); box-shadow: 0 10px 26px -14px var(--tc, #F59E0B); backdrop-filter: blur(8px); } .dm-st3d-kpi__n { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; } .dm-st3d-kpi__v { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1; } .dm-st3d-kpi__v i { font-size: 14px; font-weight: 700; color: var(--tc, #F59E0B); font-style: normal; margin-left: 1px; } .dm-st3d-kpi__bar { height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; } .dm-st3d-kpi__bar i { display: block; height: 100%; border-radius: 999px; background: var(--tc, #F59E0B); } .dm-st3d-winner3d { display: flex; flex-direction: column; gap: 3px; width: 184px; padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,0.96); border: 1px solid rgba(192,18,39,0.4); box-shadow: 0 16px 40px -16px rgba(192,18,39,0.6); backdrop-filter: blur(8px); } .dm-st3d-winner3d__top { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C01227; } .dm-st3d-winner3d__name { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 4px; } .dm-st3d-winner3d__row { font-size: 12px; color: #475569; } .dm-st3d-winner3d__row b { color: #C01227; font-weight: 800; margin-right: 4px; } @media (max-width: 1000px) { .dm-st-rail__title { display: none; } .dm-st-rail__step { padding: 5px 7px; } .dm-st-rail__line { width: 9px; } } @media (max-width: 767px) { .dm-st { height: 420vh; } .dm-st-card-story { left: 0 !important; right: 0 !important; margin: 0 auto; width: calc(100% - 28px); bottom: clamp(18px, 4vh, 40px); padding: 15px 16px; } } @media (prefers-reduced-motion: reduce) { .dm-st-arrow { animation: none !important; } } `,g=` /* ============================================================ Workflow 3 = ONE container: ├─ Happier Riders. Higher Fulfillment. (full StrategySection — 3D) └─ Strategy (content card, flush, pulled up) The Strategy card aligns to the 3D card's 20px side insets, butts against its flat bottom and rounds the bottom corners, so the two read as a single continuous container — same technique as Workflow 1 & 2. ============================================================ */ .dm-wf3 { position: relative; margin: 0 auto 0; } /* Cancel the global "section { padding: 6rem 0 }" (consolidated into /public/css/site.css): both this wrapper and the nested .dm-st are sections, so that 96px top+bottom stacked into large empty bands above / between the workflows. These are full-bleed pinned experiences whose cards butt together via their own insets — no section padding. */ .dm-wf3, .dm-wf3 .dm-st { padding-top: 0; padding-bottom: 0; } .dm-wf3-card { position: relative; z-index: 2; margin: 0 20px 0; background: #181818; border: 1px solid rgba(255, 255, 255, 0.06); border-top: none; border-radius: 0 0 28px 28px; /* No shadow: this card is flush under the strategy 3D card and merges with it as one continuous container — a shadow here would re-introduce a dark band at the seam. */ box-shadow: none; padding: 36px 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; box-sizing: border-box; } .dm-workflow-left { flex: 1; display: flex; align-items: center; justify-content: center; max-width: 440px; } .dm-workflow-svg { width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3)); } .dm-workflow-right { flex: 1.2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .dm-workflow-quote { margin-bottom: 5px; } .dm-workflow-title { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; font-size: 38px; font-weight: 700; color: #F8FAFC !important; letter-spacing: -0.015em; margin: 0 !important; padding: 0 !important; text-transform: uppercase; } .dm-workflow-text-container { min-height: 150px; width: 100%; } .dm-workflow-text { font-family: var(--font-manrope), system-ui, sans-serif; font-size: 21px; line-height: 1.75; letter-spacing: 0.01em; color: #A3A3A3; margin: 0 !important; padding: 0 !important; } .dm-workflow-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; align-self: flex-end; margin-top: 10px; } .dm-workflow-counter { font-family: var(--font-space-grotesk), sans-serif; font-size: 13px; font-weight: 700; color: #737373; letter-spacing: 0.08em; } .dm-workflow-bars { display: flex; gap: 8px; } .dm-workflow-bar { width: 40px; height: 3px; border: none; padding: 0; background: rgba(255, 255, 255, 0.15); border-radius: 999px; cursor: pointer; transition: all 0.3s ease; } .dm-workflow-bar.is-active { background: #C01227; } .dm-workflow-bar:hover { background: rgba(255, 255, 255, 0.35); } .dm-workflow-bar.is-active:hover { background: #C01227; } /* ── Responsive — keep insets/radius aligned to the 3D card ── */ @media (max-width: 1024px) { .dm-wf3-card { padding: 44px 44px; gap: 44px; } .dm-workflow-title { font-size: 32px; } .dm-workflow-text { font-size: 19px; } } @media (max-width: 767px) { .dm-wf3-card { margin: 0 10px 0; border-radius: 0 0 20px 20px; padding: 36px 28px; gap: 36px; flex-direction: column; } .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; } } `;e.s(["default",0,function(){let[e,s]=(0,r.useState)(0),[o,n]=(0,r.useState)(!1),[d,l]=(0,r.useState)(!1),c=(0,r.useRef)(null),p=[{title:"STRATEGY",text:"Our grading engine continuously evaluates fulfillment performance, SLA compliance, and route efficiency before every dispatch. By comparing legacy routing methods with unified optimization, the system ensures smarter and more reliable delivery planning. This helps businesses maintain operational consistency while improving overall delivery performance."},{title:"STRATEGY",text:"Every EV route is pre-validated against real battery capacity and charging feasibility before a rider leaves the hub. This reduces the risk of delivery interruptions, charging failures, or delayed orders during operations. The platform ensures reliable route execution while maximizing EV fleet efficiency and rider confidence."},{title:"STRATEGY",text:"The system provides actionable fleet insights and optimized workload distribution to improve both rider experience and operational productivity. Balanced route allocation helps reduce rider fatigue, improve retention, and maintain consistent delivery quality across zones. Managers gain better visibility into fleet performance, enabling faster and more informed decision-making."}];return(0,r.useEffect)(()=>{s(0)},[]),(0,r.useEffect)(()=>{let e=c.current;if(!e)return;let t=new IntersectionObserver(([e])=>l(e.isIntersecting),{threshold:.35});return t.observe(e),()=>t.disconnect()},[]),(0,r.useEffect)(()=>{if(!d||o)return;let e=setTimeout(()=>{s(e=>(e+1)%p.length)},1e4);return()=>clearTimeout(e)},[e,d,o,p.length]),(0,t.jsxs)("section",{className:"dm-wf3","aria-label":"Workflow 3 — Happier Riders. Higher Fulfillment. & Strategy",children:[(0,t.jsx)(h,{connected:!0}),(0,t.jsxs)("div",{className:"dm-wf3-card",ref:c,onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:[(0,t.jsx)("div",{className:"dm-workflow-left",children:(0,t.jsxs)("svg",{viewBox:"0 0 320 280",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-svg",children:[(0,t.jsx)("path",{d:"M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.25"}),(0,t.jsx)("path",{d:"M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",opacity:"0.85"})]})}),(0,t.jsxs)("div",{className:"dm-workflow-right",children:[(0,t.jsxs)("svg",{width:"32",height:"24",viewBox:"0 0 32 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"dm-workflow-quote",children:[(0,t.jsx)("rect",{x:"2",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"}),(0,t.jsx)("rect",{x:"16",y:"2",width:"9",height:"20",rx:"1.5",transform:"skewX(-12)",fill:"#C01227"})]}),(0,t.jsx)("h3",{className:"dm-workflow-title",children:p[e].title}),(0,t.jsx)("div",{className:"dm-workflow-text-container",children:(0,t.jsx)(a.AnimatePresence,{mode:"wait",children:(0,t.jsx)(i.motion.p,{initial:{opacity:0,y:12},animate:{opacity:1,y:0},exit:{opacity:0,y:-12},transition:{duration:.7,ease:"easeInOut"},className:"dm-workflow-text",children:p[e].text},e)})}),(0,t.jsxs)("div",{className:"dm-workflow-nav",children:[(0,t.jsxs)("span",{className:"dm-workflow-counter",children:["0",e+1,"/03"]}),(0,t.jsx)("div",{className:"dm-workflow-bars",children:p.map((r,i)=>(0,t.jsx)("button",{type:"button","aria-label":`Go to slide ${i+1}`,className:`dm-workflow-bar ${i===e?"is-active":""}`,onClick:()=>s(i)},i))})]})]})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:g}})]})}],56305)},55819,e=>{e.n(e.i(56305))},30860,e=>{e.v(t=>Promise.all(["static/chunks/04dzth4udk0lf.js","static/chunks/0a.~l01a83_pb.js","static/chunks/0ovd-l8hud6qg.js"].map(t=>e.l(t))).then(()=>t(20927)))}]);