1293 lines
91 KiB
JavaScript
1293 lines
91 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,58829,e=>{"use strict";var t=e.i(43476),i=e.i(71645);function a({from:e,to:r,duration:n=2e3,decimals:o=0,suffix:s=""}){let[l,d]=(0,i.useState)(e);return(0,i.useEffect)(()=>{let t=null,i=a=>{t||(t=a);let o=Math.min((a-t)/n,1);d(o*(r-e)+e),o<1&&window.requestAnimationFrame(i)};window.requestAnimationFrame(i)},[e,r,n]),(0,t.jsxs)(t.Fragment,{children:[l.toFixed(o),s]})}e.s(["default",0,function(){let[e,r]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{requestAnimationFrame(()=>r(!0))},[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
/* ── Hero wrapper: column layout, zero gap between hero + stats ── */
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
margin: 0;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* ── Hero slider card ── */
|
||
.miletruth-hero-container {
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.3) 100%), url('/images/miletruth-bg.png') !important;
|
||
background-size: cover !important;
|
||
background-position: center !important;
|
||
background-repeat: no-repeat !important;
|
||
/* Match the home page hero card (800px) so MileTruth has the same visual
|
||
presence on large desktop, MacBook M1/Pro, and standard laptops. */
|
||
min-height: 800px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
border-radius: 25px 25px 0 0;
|
||
margin-top: 20px;
|
||
padding: 100px 40px;
|
||
}
|
||
.miletruth-hero-container::before {
|
||
display: none !important;
|
||
}
|
||
.miletruth-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 0 40px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
color: rgba(255, 255, 255, 0.96) !important;
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(34px, 5.5vw, 72px) !important;
|
||
font-weight: 850 !important;
|
||
line-height: 1.05 !important;
|
||
letter-spacing: -1.5px !important;
|
||
text-transform: uppercase !important;
|
||
text-align: center !important;
|
||
display: block;
|
||
}
|
||
.miletruth-hero .content-slider-item-text {
|
||
margin-top: 22px !important;
|
||
text-align: center !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text p {
|
||
color: rgba(255, 255, 255, 0.72) !important;
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(17px, 1.6vw, 23px) !important;
|
||
font-weight: 500 !important;
|
||
line-height: 1.65 !important;
|
||
margin: 0 auto !important;
|
||
max-width: 820px;
|
||
}
|
||
.miletruth-hero .slide-content {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
text-align: center !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
padding: 0 40px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
.miletruth-hero .slide-content-inner {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
text-align: center !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
max-width: 1000px !important;
|
||
width: 100% !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
text-align: center !important;
|
||
display: block !important;
|
||
width: 100% !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
width: 100% !important;
|
||
margin-top: 23px !important;
|
||
text-align: center !important;
|
||
}
|
||
.miletruth-hero .text-content {
|
||
text-align: center !important;
|
||
max-width: 800px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
/* The "logico" slider reveal animation leaves these at opacity:0 until
|
||
its JS runs (absent in this rebuild), hiding the heading + subtitle.
|
||
Force them visible. */
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-text,
|
||
.miletruth-hero .logico-content-wrapper-1,
|
||
.miletruth-hero .logico-content-wrapper-2 {
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
visibility: visible !important;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
Stats bar — dark rounded card overlapping the hero bottom
|
||
══════════════════════════════════════════════════════════════════ */
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: center !important;
|
||
width: 100% !important;
|
||
margin: -25px 0 0 0 !important;
|
||
background-color: #1F1F1F !important;
|
||
border-radius: 25px !important;
|
||
padding: 40px 0 !important;
|
||
position: relative !important;
|
||
z-index: 1 !important;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
|
||
width: 100% !important;
|
||
max-width: 1440px !important;
|
||
height: auto !important;
|
||
margin: 0 auto !important;
|
||
padding: 0 40px !important;
|
||
flex-grow: 0 !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 4-col grid for counter widgets — rows size to content (not 1fr of the
|
||
container) so the counters aren't parked at the top of a tall row. */
|
||
.miletruth-hero .elementor-element-628123a {
|
||
display: grid !important;
|
||
grid-template-columns: repeat(4, 1fr) !important;
|
||
grid-template-rows: auto !important;
|
||
height: auto !important;
|
||
gap: 40px !important;
|
||
width: 100% !important;
|
||
justify-items: start !important;
|
||
align-items: start !important;
|
||
align-content: start !important;
|
||
}
|
||
|
||
/* Counter: title on top, number below, left-aligned */
|
||
.miletruth-hero .elementor-counter {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
/* Counter title — above the number */
|
||
.miletruth-hero .elementor-counter-title {
|
||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: 20px !important;
|
||
font-weight: 600 !important;
|
||
line-height: 1.3em !important;
|
||
color: #FFFFFF !important;
|
||
margin-bottom: 12px !important;
|
||
text-transform: none !important;
|
||
}
|
||
|
||
/* Counter number wrapper — centered */
|
||
.miletruth-hero .elementor-counter-number-wrapper {
|
||
font-family: var(--font-space-grotesk), "Space Grotesk", var(--font-manrope), "Manrope", sans-serif !important;
|
||
font-size: clamp(48px, 6.5vw, 100px) !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1em !important;
|
||
color: #C01227 !important;
|
||
letter-spacing: -0.03em !important;
|
||
display: flex !important;
|
||
align-items: baseline !important;
|
||
justify-content: flex-start !important;
|
||
}
|
||
.miletruth-hero .elementor-counter-number {
|
||
color: #C01227 !important;
|
||
font-size: inherit !important;
|
||
font-weight: inherit !important;
|
||
}
|
||
.miletruth-hero .elementor-counter-number-suffix {
|
||
color: #C01227 !important;
|
||
font-size: inherit !important;
|
||
font-weight: inherit !important;
|
||
letter-spacing: -0.03em !important;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 1200px) {
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 60px !important;
|
||
}
|
||
}
|
||
@media (max-width: 1024px) {
|
||
.miletruth-hero-container {
|
||
min-height: 600px;
|
||
padding: 120px 0;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
padding: 40px 0 !important;
|
||
}
|
||
.miletruth-hero .elementor-element-628123a {
|
||
grid-template-columns: repeat(2, 1fr) !important;
|
||
gap: 50px 40px !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 50px !important;
|
||
line-height: 1.1 !important;
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 40px !important;
|
||
line-height: 1.12 !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-text p {
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
@media (max-width: 580px) {
|
||
.miletruth-hero-container {
|
||
min-height: 500px;
|
||
padding: 100px 0;
|
||
}
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
padding: 0 12px;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
padding: 30px 0 !important;
|
||
border-radius: 20px !important;
|
||
}
|
||
.miletruth-hero .elementor-element-628123a {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 36px !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: 32px !important;
|
||
}
|
||
}
|
||
`}}),(0,t.jsx)("div",{className:"elementor-63 miletruth-hero",children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent","data-id":"86f3204","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)("div",{className:"miletruth-hero-container",children:(0,t.jsx)("div",{className:"e-con-inner miletruth-content",children:(0,t.jsx)("div",{className:"logico-content-slider-widget",children:(0,t.jsx)("div",{className:"content-slider-wrapper",children:(0,t.jsx)("div",{className:"content-slider-container",children:(0,t.jsx)("div",{className:"content-slider owl-carousel owl-theme",children:(0,t.jsx)("div",{className:"content-item slider-item elementor-repeater-item-6867061 slide-style-standard",children:(0,t.jsx)("div",{className:"slide-content",style:{paddingLeft:0,paddingRight:0},children:(0,t.jsxs)("div",{className:"slide-content-inner",children:[(0,t.jsx)("h1",{className:"content-slider-item-heading logico-content-wrapper-1",children:(0,t.jsxs)("span",{className:"heading-content",children:["The Only AI Built",(0,t.jsx)("br",{}),"Exclusively for Logistics"]})}),(0,t.jsx)("div",{className:"content-slider-item-text logico-content-wrapper-2",children:(0,t.jsx)("div",{className:"text-content",children:(0,t.jsx)("p",{children:"Optimizes every stage of the delivery journey for maximum efficiency."})})})]})})})})})})})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-8e5c81e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child","data-id":"8e5c81e","data-element_type":"container","data-e-type":"container","data-settings":'{"background_background":"classic"}',children:(0,t.jsx)("div",{className:"e-con-inner",children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-628123a e-con-full e-grid cut-corner-no sticky-container-off e-con e-child","data-id":"628123a","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"SLA Compliance"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:99.9,decimals:1,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5-2","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Distance Saved"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:42,decimals:0,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter","data-id":"1da88b5-3","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Fewer Vehicles"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:37,decimals:0,suffix:""}):"1"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:" %"})]})]})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-a1cf3d4 elementor-widget elementor-widget-counter","data-id":"a1cf3d4","data-element_type":"widget","data-e-type":"widget","data-widget_type":"counter.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsxs)("div",{className:"elementor-counter",children:[(0,t.jsx)("div",{className:"elementor-counter-title",children:"Dispatch Latency"}),(0,t.jsxs)("div",{className:"elementor-counter-number-wrapper",children:[(0,t.jsx)("span",{className:"elementor-counter-number",children:e?(0,t.jsx)(a,{from:1,to:45,decimals:0,suffix:""}):"45"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:"ms"})]})]})})})]})})})]})})]})}])},76756,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(46932),r=e.i(88653),n=e.i(70703),o=e.i(87652),s=e.i(95420),l=e.i(89970),d=e.i(83495),p=e.i(97202);let m=i.default.memo(function({kpi:e,scroll:r,index:n,jitter:o}){let l=(0,s.useTransform)(r,t=>{let i=Math.min(1,Math.max(0,(t-.7)/.27)),a=e.before+(e.after-e.before)*i;i>.95&&(a*=1+o);let r=i>.5?e.prefixAfter??"":e.prefixBefore??"";return"delayed"===e.key&&0===e.after&&i>.95?"0":`${r}${Math.round(a)}${e.suffix??""}`}),d=(0,s.useTransform)(r,t=>t>.835?e.labelAfter:e.labelBefore),m="orders"===e.key?p.COLORS.cyan:p.COLORS.red,c=p.COLORS.green,x=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,1),(0,p.rgba)(c,1)]),h=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,.28),(0,p.rgba)(c,.32)]),g=(0,s.useTransform)(h,e=>`0 10px 40px -12px ${e}, inset 0 1px 0 rgba(255,255,255,0.06)`),f=(0,s.useTransform)(r,[.7,.97],[(0,p.rgba)(m,.4),(0,p.rgba)(c,.45)]),b=(0,s.useTransform)(r,[.85,.97],[0,1]),u=(0,s.useTransform)(r,[.7,.97],[.12,1]),w=e.goodWhenLower?p.COLORS.green:"orders"===e.key?p.COLORS.cyan:p.COLORS.green,v=i.default.useMemo(()=>{switch(e.key){case"distance":case"vehicles":return"M 0,3 C 16,3 32,17 64,17";case"orders":return"M 0,17 C 16,6 32,19 64,8";case"delayed":case"cost":return"M 0,1 C 16,1 28,19 64,19";default:return"M 0,10 L 64,10"}},[e.key]);return(0,t.jsxs)(a.motion.div,{className:"dm-opt-metric",style:{boxShadow:g,borderColor:f,animationDelay:`${.06*n}s`},children:[(0,t.jsxs)("div",{className:"dm-opt-metric__top",children:[(0,t.jsx)(a.motion.span,{className:"dm-opt-metric__label",children:d}),(0,t.jsx)(a.motion.span,{className:"dm-opt-metric__arrow",style:{opacity:b,color:p.COLORS.green},children:e.goodWhenLower?"▼":"▲"})]}),(0,t.jsx)(a.motion.div,{className:"dm-opt-metric__value",style:{color:x},children:l}),(0,t.jsx)("div",{className:"dm-opt-metric__sparkline",style:{position:"absolute",bottom:8,right:12,opacity:.32,width:64,height:20,pointerEvents:"none"},children:(0,t.jsxs)("svg",{width:"100%",height:"100%",viewBox:"0 0 64 20",fill:"none",children:[(0,t.jsx)("defs",{children:(0,t.jsxs)("linearGradient",{id:`grad-${e.key}`,x1:"0",y1:"0",x2:"0",y2:"20",gradientUnits:"userSpaceOnUse",children:[(0,t.jsx)("stop",{offset:"0%",stopColor:w,stopOpacity:"0.22"}),(0,t.jsx)("stop",{offset:"100%",stopColor:w,stopOpacity:"0.0"})]})}),(0,t.jsx)("path",{d:v,stroke:w,strokeWidth:"1.2",strokeLinecap:"round",strokeLinejoin:"round"}),(0,t.jsx)("path",{d:`${v} L 64,20 L 0,20 Z`,fill:`url(#grad-${e.key})`})]})}),(0,t.jsx)("div",{className:"dm-opt-metric__bar",children:(0,t.jsx)(a.motion.div,{className:"dm-opt-metric__fill",style:{background:x,scaleX:u}})})]})}),c=i.default.memo(function({scroll:e}){let[a,r]=i.default.useState(()=>p.KPIS.map(()=>0));return i.default.useEffect(()=>{if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;let e=setInterval(()=>{document.hidden||r(p.KPIS.map(()=>(Math.random()-.5)*.008))},1100);return()=>clearInterval(e)},[]),(0,t.jsx)("div",{className:"dm-opt-metrics",role:"group","aria-label":"Optimization results",children:p.KPIS.map((i,r)=>(0,t.jsx)(m,{kpi:i,scroll:e,index:r,jitter:a[r]},i.key))})}),x=(0,n.default)(()=>e.A(49712),{loadableGenerated:{modules:[29539]},ssr:!1}),h=["chaos","scan","dissolve","optimize","reorganize","metrics"],g=[{label:"Analyze",icon:"🔍",activateAt:0},{label:"Optimize",icon:"⚡",activateAt:2},{label:"Assign",icon:"🚛",activateAt:3},{label:"Execute",icon:"📡",activateAt:4},{label:"Monitor",icon:"📊",activateAt:5}],f=i.default.memo(function(){let[e,r]=(0,i.useState)(59),[n,o]=(0,i.useState)(98.7),[s,l]=(0,i.useState)(5),[d,p]=(0,i.useState)(-12),[m,c]=(0,i.useState)(99.4);return(0,i.useEffect)(()=>{let e=e=>()=>{document.hidden||e()},t=setInterval(e(()=>{r(e=>e+ +(Math.random()>.4))}),4500),i=setInterval(e(()=>{o(e=>parseFloat(Math.min(99.1,Math.max(98.4,e+(Math.random()-.5)*.15)).toFixed(2)))}),2800),a=setInterval(e(()=>{l(e=>5===e?Math.random()>.5?4:5:Math.random()>.3?5:4)}),3500),n=setInterval(e(()=>{p(e=>parseFloat(Math.min(-11.5,Math.max(-12.8,e+(Math.random()-.5)*.2)).toFixed(1)))}),3200),s=setInterval(e(()=>{c(e=>parseFloat(Math.min(99.9,Math.max(98.8,e+(Math.random()-.5)*.12)).toFixed(2)))}),2500);return()=>{clearInterval(t),clearInterval(i),clearInterval(a),clearInterval(n),clearInterval(s)}},[]),(0,t.jsxs)(a.motion.div,{className:"dm-opt-insight",initial:{opacity:0,y:12},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,delay:.3},children:[(0,t.jsx)("span",{className:"dm-opt-insight__dot"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Live Analytics: ",(0,t.jsxs)("strong",{children:[e," Orders"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["AI Accuracy: ",(0,t.jsxs)("strong",{children:[n,"%"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Fleet: ",(0,t.jsxs)("strong",{children:[s,"/5 EV Active"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Route Health: ",(0,t.jsxs)("strong",{children:[m,"%"]})]}),(0,t.jsx)("span",{className:"dm-opt-insight__sep"}),(0,t.jsxs)("span",{className:"dm-opt-insight__text",children:["Carbon: ",(0,t.jsxs)("strong",{children:[d,"%"]})]})]})});function b(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:"dm-opt-panel__badge",children:[(0,t.jsx)("span",{className:"dm-opt-pulse dm-opt-pulse--red"})," System: Congested"]}),(0,t.jsx)("h3",{children:"Without Optimization"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," Chaotic overlapping routes"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," Duplicate & idle trips"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," 8 vehicles required"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," 23 delivery delays"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--x",children:"✖"})," +18% cost overrun"]})]})]})}function u(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:"dm-opt-panel__badge dm-opt-panel__badge--good",children:[(0,t.jsx)("span",{className:"dm-opt-pulse dm-opt-pulse--green"})," System: Optimized"]}),(0,t.jsx)("h3",{children:"With Doormile AI"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Optimized route clusters"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Intelligent vehicle assignment"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Multi-trip & EV planning"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Zero delivery delays"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," 18% cost saved"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-opt-marker dm-opt-marker--ok",children:"✔"})," Carbon footprint reduced"]})]})]})}function w(){let e=(0,i.useRef)(null),n=(0,i.useRef)(0),m=(0,o.useMotionValue)(0),[w,y]=(0,i.useState)("chaos"),[k,_]=(0,i.useState)("before"),[j,O]=(0,i.useState)(!1),[N,C]=(0,i.useState)(!1),[S,L]=(0,i.useState)(!1),[z,R]=(0,i.useState)(!1),[$,T]=(0,i.useState)(!1),E=(0,o.useMotionValue)(1);(0,i.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(min-width: 768px) and (max-width: 1024px)"),i=window.matchMedia("(prefers-reduced-motion: reduce)"),a=()=>{L(e.matches),R(t.matches),T(i.matches)};return a(),e.addEventListener("change",a),t.addEventListener("change",a),i.addEventListener("change",a),()=>{e.removeEventListener("change",a),t.removeEventListener("change",a),i.removeEventListener("change",a)}},[]),(0,i.useEffect)(()=>{let t=e.current;if(!t)return;let i=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(O(!0),C(!0),i.disconnect())},{rootMargin:"70% 0px"}),a=new IntersectionObserver(e=>C(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return i.observe(t),a.observe(t),()=>{i.disconnect(),a.disconnect()}},[]),(0,i.useEffect)(()=>{let t=e.current;if(!t||S)return;l.default.registerPlugin(d.ScrollTrigger);let i="chaos",a="before",r=d.ScrollTrigger.create({trigger:t,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let t=e.progress;n.current=t,m.set(t);let r=(0,p.phaseFromProgress)(t);r!==i&&(i=r,y(r));let o=t<=2e-4?"before":t>=.9998?"after":"pinned";o!==a&&(a=o,_(o))}}),o=setTimeout(()=>d.ScrollTrigger.refresh(),120);return()=>{clearTimeout(o),r.kill()}},[m,S]),(0,i.useEffect)(()=>{if(!S)return;if($){n.current=.85;return}if(!N)return;let e=0,t=0,i=a=>{t||(t=a),n.current=.76+.16*Math.sin((a-t)/1e3*.5),e=requestAnimationFrame(i)};return e=requestAnimationFrame(i),()=>cancelAnimationFrame(e)},[S,$,N]);let A=(0,s.useTransform)(m,[.3,.55],[1,.32]),I=(0,s.useTransform)(m,[.3,.55],[0,3]),M=(0,s.useTransform)(I,e=>`blur(${e}px)`),F=(0,s.useTransform)(m,[.42,.66],[.36,1]),P=(0,s.useTransform)(m,[0,1],[0,1]),W=(0,s.useTransform)(m,[.2,.42],["8%","92%"]),B=(0,s.useTransform)(m,[.18,.22,.42,.46],[0,1,1,0]),D=(0,s.useTransform)(m,[.45,.6],[.15,.75]),G=h.indexOf(w);return(0,t.jsxs)("section",{ref:e,className:`dm-opt is-${k}${S?" dm-opt--mobile":""}`,"aria-label":"AI Logistics Optimization",children:[S&&(0,t.jsxs)("div",{className:"dm-opt-mobile",children:[(0,t.jsxs)("header",{className:"dm-opt-mhead",children:[(0,t.jsxs)("div",{className:"dm-opt-eyebrow",children:[(0,t.jsx)("span",{className:"dm-opt-dot"})," Doormile AI Control Tower"]}),(0,t.jsx)("h2",{children:"AI Logistics Optimization Engine"}),(0,t.jsx)("p",{children:"Watch Doormile's AI engine transform chaotic logistics into precision-optimized delivery networks — reducing distance, fleet size, delays, and cost."})]}),(0,t.jsx)("aside",{className:"dm-opt-panel dm-opt-panel--bad dm-opt-mpanel",children:(0,t.jsx)(b,{})}),(0,t.jsxs)("div",{className:"dm-opt-mobile__scene",children:[j&&(0,t.jsx)("div",{className:"dm-opt-canvas",children:(0,t.jsx)(x,{progress:n,reduced:$,isMobile:!0,active:N})}),(0,t.jsxs)("span",{className:"dm-opt-mobile__scene-tag",children:[(0,t.jsx)("span",{className:"dm-opt-dot"})," Live AI optimization"]})]}),(0,t.jsx)("aside",{className:"dm-opt-panel dm-opt-panel--good dm-opt-mpanel",children:(0,t.jsx)(u,{})}),(0,t.jsxs)("div",{className:"dm-opt-mfoot",children:[(0,t.jsx)(c,{scroll:E}),(0,t.jsx)(f,{})]})]}),!S&&(0,t.jsx)("div",{className:"dm-opt-sticky",children:(0,t.jsxs)("div",{className:"dm-opt-card",children:[(0,t.jsx)("div",{className:"dm-opt-backdrop","aria-hidden":!0}),j&&(0,t.jsx)("div",{className:"dm-opt-canvas",children:(0,t.jsx)(x,{progress:n,reduced:$,isMobile:S,isTablet:z,active:N&&"pinned"===k})}),(0,t.jsx)("div",{className:"dm-opt-vignette","aria-hidden":!0}),(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:"chaos"!==w&&(0,t.jsx)(a.motion.div,{className:"dm-opt-floating-badge",initial:{scale:.85,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.85,opacity:0},transition:{duration:.28,ease:"easeInOut"},style:{position:"absolute",top:"40%",left:"50%",x:"-50%",y:"-50%",zIndex:10,pointerEvents:"none"},children:(0,t.jsxs)("div",{className:"dm-opt-floating-badge__inner",children:[(0,t.jsx)("span",{className:`dm-opt-floating-badge__dot is-${w}`}),(0,t.jsx)("span",{className:"dm-opt-floating-badge__text",children:p.PHASE_LABELS[w]})]})},w)}),(0,t.jsx)(a.motion.div,{className:"dm-opt-divider",style:{opacity:D},"aria-hidden":!0}),(0,t.jsx)(a.motion.div,{className:"dm-opt-scanline",style:{top:W,opacity:B},"aria-hidden":!0}),(0,t.jsxs)("div",{className:"dm-opt-ui",children:[(0,t.jsxs)("header",{className:"dm-opt-head",children:[(0,t.jsxs)(a.motion.div,{className:"dm-opt-eyebrow",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6},children:[(0,t.jsx)("span",{className:"dm-opt-dot"})," Doormile AI Control Tower"]}),(0,t.jsx)(a.motion.h2,{initial:{opacity:0,y:22},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.05},children:"AI Logistics Optimization Engine"}),(0,t.jsx)(a.motion.p,{initial:{opacity:0,y:22},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.12},children:"Watch Doormile's AI engine transform chaotic logistics into precision-optimized delivery networks — reducing distance, fleet size, delays, and cost in real time."}),(0,t.jsx)(a.motion.div,{className:"dm-opt-steps",initial:{opacity:0,y:14},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.7,delay:.18},children:g.map((e,a)=>{let r=G>=e.activateAt,n=G===e.activateAt;return(0,t.jsxs)(i.default.Fragment,{children:[a>0&&(0,t.jsx)("span",{className:`dm-opt-steps__line ${r?"is-active":""}`}),(0,t.jsxs)("span",{className:`dm-opt-steps__pill ${r?"is-active":""} ${n?"is-current":""}`,children:[(0,t.jsx)("span",{className:"dm-opt-steps__icon",children:e.icon}),(0,t.jsx)("span",{className:"dm-opt-steps__text",children:e.label})]})]},e.label)})}),(0,t.jsx)("div",{className:"dm-opt-progress",children:(0,t.jsx)("div",{className:"dm-opt-progress__track",children:(0,t.jsx)(a.motion.div,{className:"dm-opt-progress__fill",style:{scaleX:P}})})})]}),(0,t.jsxs)("div",{className:"dm-opt-compare",children:[(0,t.jsx)(a.motion.aside,{className:"dm-opt-panel dm-opt-panel--bad",style:{opacity:A,filter:M},children:(0,t.jsx)(b,{})}),(0,t.jsx)(a.motion.aside,{className:"dm-opt-panel dm-opt-panel--good",style:{opacity:F},children:(0,t.jsx)(u,{})})]}),(0,t.jsxs)("div",{className:"dm-opt-foot",children:[(0,t.jsx)(c,{scroll:m}),(0,t.jsx)(f,{})]})]})]})}),(0,t.jsx)("style",{children:v})]})}let v=`
|
||
/* ===== OUTER SECTION: Transparent so the card floats ===== */
|
||
.dm-opt {
|
||
position: relative;
|
||
height: 230vh;
|
||
background: transparent;
|
||
margin-bottom: 0;
|
||
}
|
||
.dm-opt-sticky {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
/* Promote the pinned layer to its own GPU compositing layer so scroll-driven
|
||
pin/scrub updates never trigger main-thread paints of the rest of the page. */
|
||
will-change: transform;
|
||
transform: translateZ(0);
|
||
backface-visibility: hidden;
|
||
}
|
||
.dm-opt.is-pinned .dm-opt-sticky { position: fixed; top: 0; left: 0; }
|
||
.dm-opt.is-after .dm-opt-sticky { position: absolute; top: auto; bottom: 0; }
|
||
|
||
/* ===== FLOATING CARD — the only colored surface ===== */
|
||
.dm-opt-card {
|
||
position: absolute !important;
|
||
/* 20px top inset to match the Workflow 2 / 3 connected cards (.dm-lb-card /
|
||
.dm-st-card), so the gap above Workflow 1 (between the Control Tower stats
|
||
bar and this card) is the same small, consistent seam used at every other
|
||
workflow transition — not the old oversized 96px band. The header below is
|
||
offset on its own to clear the fixed navbar (see .dm-opt-head). */
|
||
top: 20px !important;
|
||
left: 20px !important;
|
||
right: 20px !important;
|
||
bottom: 0 !important;
|
||
/* flat bottom + flush to container so the Performance card butts directly
|
||
against it, reading as one continuous container (home-page technique) */
|
||
border-radius: 28px 28px 0 0 !important;
|
||
overflow: hidden !important;
|
||
// background: linear-gradient(165deg, #06101f 0%, #020617 35%, #040d1c 70%, #030a18 100%) !important;
|
||
// border: 0px solid ${(0,p.rgba)("#ffffff",.08)} !important;
|
||
border-bottom: none !important;
|
||
// box-shadow:
|
||
// 0 0 0 1px ${(0,p.rgba)(p.COLORS.cyan,.04)},
|
||
// 0 4px 30px -4px rgba(0, 0, 0, 0.7),
|
||
// 0 20px 80px -20px rgba(0, 0, 0, 0.6),
|
||
// 0 0 120px -30px ${(0,p.rgba)(p.COLORS.cyan,.08)},
|
||
// inset 0 1px 0 ${(0,p.rgba)("#ffffff",.06)},
|
||
// inset 0 -1px 0 ${(0,p.rgba)("#ffffff",.02)} !important;
|
||
// box-sizing: border-box !important;
|
||
}
|
||
/* Animated subtle grid pattern */
|
||
.dm-opt-card::before {
|
||
/* Expanded one tile beyond the (clipped) card so we can drift it via a GPU
|
||
transform instead of animating background-position (which repaints each frame). */
|
||
content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
|
||
opacity: 0.035;
|
||
background-image:
|
||
linear-gradient(${(0,p.rgba)(p.COLORS.cyan,.5)} 1px, transparent 1px),
|
||
linear-gradient(90deg, ${(0,p.rgba)(p.COLORS.cyan,.5)} 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
animation: dmOptGridDrift 25s linear infinite;
|
||
will-change: transform;
|
||
}
|
||
@keyframes dmOptGridDrift {
|
||
0% { transform: translate3d(0, 0, 0); }
|
||
100% { transform: translate3d(60px, 60px, 0); }
|
||
}
|
||
/* Radial center glow behind 3D scene */
|
||
.dm-opt-card::after {
|
||
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||
background:
|
||
radial-gradient(ellipse 50% 45% at 50% 48%, ${(0,p.rgba)(p.COLORS.cyan,.08)} 0%, transparent 70%),
|
||
radial-gradient(ellipse 60% 40% at 50% 90%, ${(0,p.rgba)(p.COLORS.green,.05)} 0%, transparent 60%),
|
||
radial-gradient(ellipse 80% 50% at 50% 10%, ${(0,p.rgba)(p.COLORS.cyan,.04)} 0%, transparent 50%);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.dm-opt-card {
|
||
top: 20px !important;
|
||
left: 20px !important;
|
||
right: 20px !important;
|
||
bottom: 0 !important;
|
||
border-radius: 28px 28px 0 0 !important;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-opt-card {
|
||
top: 10px !important;
|
||
left: 10px !important;
|
||
right: 10px !important;
|
||
bottom: 0 !important;
|
||
border-radius: 20px 20px 0 0 !important;
|
||
}
|
||
}
|
||
|
||
/* ===== INNER LAYERS ===== */
|
||
.dm-opt-backdrop {
|
||
position: absolute;
|
||
inset: 0; z-index: 0;
|
||
background:
|
||
radial-gradient(100% 70% at 50% 6%, ${(0,p.rgba)(p.COLORS.cyan,.06)} 0%, transparent 55%),
|
||
radial-gradient(80% 60% at 50% 100%, ${(0,p.rgba)(p.COLORS.green,.05)} 0%, transparent 55%);
|
||
}
|
||
.dm-opt-canvas { position: absolute; inset: 0; z-index: 1; }
|
||
.dm-opt-canvas canvas { display: block; }
|
||
.dm-opt-vignette {
|
||
position: absolute; inset: 0; z-index: 2; pointer-events: none;
|
||
background:
|
||
radial-gradient(110% 90% at 50% 50%, transparent 48%, ${(0,p.rgba)("#020617",.88)} 100%),
|
||
linear-gradient(180deg, ${(0,p.rgba)("#020617",.6)} 0%, transparent 20%, transparent 65%, ${(0,p.rgba)("#020617",.92)} 100%);
|
||
}
|
||
.dm-opt-divider {
|
||
position: absolute; left: 50%; top: 14%; bottom: 28%;
|
||
width: 1px; z-index: 3; pointer-events: none; transform: translateX(-0.5px);
|
||
background: linear-gradient(180deg, transparent, ${(0,p.rgba)(p.COLORS.cyan,.6)}, transparent);
|
||
box-shadow: 0 0 16px ${(0,p.rgba)(p.COLORS.cyan,.4)};
|
||
}
|
||
.dm-opt-scanline {
|
||
position: absolute; left: 6%; right: 6%; height: 2px; z-index: 3; pointer-events: none;
|
||
background: linear-gradient(90deg, transparent, ${p.COLORS.cyan}, transparent);
|
||
box-shadow: 0 0 22px ${(0,p.rgba)(p.COLORS.cyan,.8)};
|
||
}
|
||
|
||
/* ===== FLOATING AI STATUS BADGE ===== */
|
||
.dm-opt-floating-badge {
|
||
pointer-events: none;
|
||
}
|
||
.dm-opt-floating-badge__inner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.85)};
|
||
border: 1.5px solid ${(0,p.rgba)(p.COLORS.cyan,.3)};
|
||
box-shadow:
|
||
0 10px 30px -5px rgba(0, 0, 0, 0.65),
|
||
0 0 24px -2px ${(0,p.rgba)(p.COLORS.cyan,.18)},
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
transition: border-color 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
.dm-opt-floating-badge__dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 10px ${p.COLORS.cyan};
|
||
animation: dmOptPulse 1.4s ease-in-out infinite;
|
||
transition: background 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
.dm-opt-floating-badge__dot.is-scan {
|
||
background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 10px ${p.COLORS.cyan};
|
||
}
|
||
.dm-opt-floating-badge__dot.is-dissolve,
|
||
.dm-opt-floating-badge__dot.is-optimize {
|
||
background: ${p.COLORS.amber};
|
||
box-shadow: 0 0 10px ${p.COLORS.amber};
|
||
}
|
||
.dm-opt-floating-badge__dot.is-reorganize {
|
||
background: #C084FC;
|
||
box-shadow: 0 0 10px #C084FC;
|
||
}
|
||
.dm-opt-floating-badge__dot.is-metrics {
|
||
background: ${p.COLORS.green};
|
||
box-shadow: 0 0 10px ${p.COLORS.green};
|
||
}
|
||
.dm-opt-floating-badge__text {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: #F8FAFC;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* ===== UI OVERLAY ===== */
|
||
.dm-opt-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
|
||
.dm-opt-ui h2, .dm-opt-ui h3, .dm-opt-metric__value, .dm-opt-eyebrow, .dm-opt-phase {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
}
|
||
|
||
/* ===== HEADER — compact, no dead space ===== */
|
||
.dm-opt-head {
|
||
/* Offset below the site's fixed navbar (~104px desktop / ~100px mobile when
|
||
.dm-header-scrolled is active). The card now sits at top:20px (was 96px), so
|
||
the navbar clearance lives here on the header itself — mirroring how the
|
||
Workflow 2 / 3 sections offset their inner header while the card stays at 20px.
|
||
This keeps the eyebrow/title clear of the navbar (z-index 10000) without
|
||
re-introducing the oversized top gap above Workflow 1. */
|
||
position: absolute; top: clamp(96px, 12vh, 116px); left: 50%;
|
||
transform: translateX(-50%); width: min(640px, 90vw); text-align: center;
|
||
}
|
||
.dm-opt-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
|
||
color: ${p.COLORS.cyan}; padding: 5px 14px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.06)}; border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.25)};
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.dm-opt-dot { width: 6px; height: 6px; border-radius: 50%; background: ${p.COLORS.cyan}; box-shadow: 0 0 10px ${p.COLORS.cyan}; }
|
||
.dm-opt .dm-opt-head h2 {
|
||
margin: 8px 0 4px !important; padding: 0 !important; color: #F8FAFC !important;
|
||
font-weight: 700 !important; text-transform: none !important;
|
||
font-size: clamp(22px, 2.4vw, 36px) !important; line-height: 1.1 !important;
|
||
letter-spacing: -0.015em !important;
|
||
}
|
||
.dm-opt .dm-opt-head p {
|
||
margin: 0 auto !important; padding: 0 !important; color: ${p.COLORS.textDim} !important;
|
||
max-width: 440px; font-size: clamp(11px, 1vw, 13px) !important; line-height: 1.45 !important;
|
||
}
|
||
|
||
/* ===== WORKFLOW STEPS ===== */
|
||
.dm-opt-steps {
|
||
display: flex; align-items: center; justify-content: center; gap: 0;
|
||
margin-top: 12px; flex-wrap: wrap;
|
||
}
|
||
.dm-opt-steps__pill {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 4px 10px; border-radius: 999px; font-weight: 600;
|
||
letter-spacing: 0.04em; text-transform: uppercase;
|
||
color: ${p.COLORS.slate};
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.5)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.2)};
|
||
backdrop-filter: blur(6px);
|
||
transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
.dm-opt-steps__pill.is-active {
|
||
color: #E2E8F0;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.1)};
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.35)};
|
||
box-shadow: 0 0 18px -6px ${(0,p.rgba)(p.COLORS.cyan,.5)};
|
||
}
|
||
.dm-opt-steps__pill.is-current {
|
||
color: ${p.COLORS.cyan};
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
box-shadow: 0 0 24px -4px ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
}
|
||
.dm-opt-steps__icon { font-size: 11px; }
|
||
.dm-opt-steps__text { font-size: 9.5px; }
|
||
.dm-opt-steps__line {
|
||
display: block; width: 16px; height: 1px; margin: 0 2px;
|
||
background: ${(0,p.rgba)(p.COLORS.slate,.3)};
|
||
transition: background 0.45s ease;
|
||
}
|
||
.dm-opt-steps__line.is-active {
|
||
background: linear-gradient(90deg, ${p.COLORS.cyan}, ${p.COLORS.green});
|
||
box-shadow: 0 0 6px ${(0,p.rgba)(p.COLORS.cyan,.5)};
|
||
}
|
||
|
||
/* ===== PROGRESS BAR ===== */
|
||
.dm-opt-progress { margin-top: 10px; }
|
||
.dm-opt-progress__track {
|
||
height: 2px; border-radius: 999px; overflow: hidden;
|
||
background: ${(0,p.rgba)(p.COLORS.cyan,.1)}; max-width: 420px; margin: 0 auto;
|
||
}
|
||
.dm-opt-progress__fill {
|
||
height: 100%; width: 100%; transform-origin: left center; border-radius: 999px;
|
||
background: linear-gradient(90deg, ${p.COLORS.cyan}, ${p.COLORS.green});
|
||
box-shadow: 0 0 12px ${(0,p.rgba)(p.COLORS.cyan,.6)};
|
||
}
|
||
.dm-opt-status {
|
||
display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
|
||
padding: 4px 11px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.55)}; border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.18)};
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.dm-opt-status__dot {
|
||
width: 5px; height: 5px; border-radius: 50%; background: ${p.COLORS.cyan};
|
||
box-shadow: 0 0 8px ${p.COLORS.cyan}; animation: dmOptPulse 1.4s ease-in-out infinite;
|
||
}
|
||
.dm-opt-status__label {
|
||
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #E2E8F0; font-weight: 600;
|
||
}
|
||
.dm-opt-status__step { font-size: 9.5px; color: ${p.COLORS.cyan}; font-weight: 600; }
|
||
|
||
/* ===== COMPARE PANELS — tighter, stronger ===== */
|
||
.dm-opt-compare {
|
||
position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
gap: 12px; padding: 0 clamp(12px, 2.5vw, 36px);
|
||
}
|
||
.dm-opt-panel {
|
||
pointer-events: auto; width: clamp(230px, 26vw, 340px);
|
||
padding: 18px 20px; border-radius: 20px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.92)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.22)};
|
||
/* backdrop blur removed — panel opacity is scroll-driven, so the blur was
|
||
recomputed every scroll frame; a near-opaque fill reads the same and is free. */
|
||
}
|
||
.dm-opt-panel--bad {
|
||
border-color: ${(0,p.rgba)(p.COLORS.red,.45)};
|
||
box-shadow:
|
||
0 0 30px -8px ${(0,p.rgba)(p.COLORS.red,.35)},
|
||
0 20px 50px -20px ${(0,p.rgba)(p.COLORS.red,.25)},
|
||
inset 0 1px 0 ${(0,p.rgba)(p.COLORS.red,.08)};
|
||
}
|
||
.dm-opt-panel--good {
|
||
border-color: ${(0,p.rgba)(p.COLORS.green,.45)};
|
||
box-shadow:
|
||
0 0 30px -8px ${(0,p.rgba)(p.COLORS.green,.35)},
|
||
0 20px 50px -20px ${(0,p.rgba)(p.COLORS.green,.25)},
|
||
inset 0 1px 0 ${(0,p.rgba)(p.COLORS.green,.08)};
|
||
}
|
||
.dm-opt .dm-opt-panel h3 {
|
||
margin: 10px 0 12px !important; padding: 0 !important; color: #F1F5F9 !important;
|
||
font-size: clamp(15px, 1.4vw, 19px) !important; font-weight: 600 !important;
|
||
line-height: 1.15 !important; text-transform: none !important; letter-spacing: -0.01em !important;
|
||
}
|
||
.dm-opt .dm-opt-panel ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 7px; }
|
||
.dm-opt .dm-opt-panel li {
|
||
position: relative; padding-left: 0 !important; margin: 0 !important;
|
||
color: ${p.COLORS.textDim} !important; font-size: 12.5px !important; line-height: 1.35 !important;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.dm-opt .dm-opt-panel li::marker { content: "" !important; }
|
||
/* Remove old dot pseudo — now using ✖/✔ markers */
|
||
.dm-opt .dm-opt-panel li::before { content: none !important; display: none !important; }
|
||
|
||
/* ✖/✔ markers */
|
||
.dm-opt-marker {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
|
||
font-size: 10px; font-weight: 700; line-height: 1;
|
||
}
|
||
.dm-opt-marker--x {
|
||
background: ${(0,p.rgba)(p.COLORS.red,.15)};
|
||
color: ${p.COLORS.red};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.red,.35)};
|
||
box-shadow: 0 0 8px ${(0,p.rgba)(p.COLORS.red,.3)};
|
||
}
|
||
.dm-opt-marker--ok {
|
||
background: ${(0,p.rgba)(p.COLORS.green,.15)};
|
||
color: ${p.COLORS.green};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.green,.35)};
|
||
box-shadow: 0 0 8px ${(0,p.rgba)(p.COLORS.green,.3)};
|
||
}
|
||
|
||
.dm-opt-panel__badge {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
|
||
color: ${p.COLORS.red}; padding: 5px 10px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.red,.1)}; border: 1px solid ${(0,p.rgba)(p.COLORS.red,.35)};
|
||
}
|
||
.dm-opt-panel__badge--good { color: ${p.COLORS.green}; background: ${(0,p.rgba)(p.COLORS.green,.1)}; border-color: ${(0,p.rgba)(p.COLORS.green,.35)}; }
|
||
.dm-opt-pulse { width: 6px; height: 6px; border-radius: 50%; animation: dmOptPulse 1.4s ease-in-out infinite; }
|
||
.dm-opt-pulse--red { background: ${p.COLORS.red}; box-shadow: 0 0 10px ${p.COLORS.red}; }
|
||
.dm-opt-pulse--green { background: ${p.COLORS.green}; box-shadow: 0 0 10px ${p.COLORS.green}; }
|
||
@keyframes dmOptPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
|
||
|
||
/* ===== METRICS ===== */
|
||
.dm-opt-foot {
|
||
position: absolute; left: 0; right: 0; bottom: clamp(12px, 2.5vh, 28px);
|
||
padding: 0 clamp(12px, 3vw, 36px);
|
||
}
|
||
.dm-opt-metrics {
|
||
pointer-events: auto; display: grid; grid-template-columns: repeat(5, 1fr);
|
||
gap: 10px; max-width: 1100px; margin: 0 auto;
|
||
}
|
||
.dm-opt-metric {
|
||
position: relative; padding: 14px 14px 12px; border-radius: 16px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.92)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.slate,.25)};
|
||
/* backdrop blur removed — 5 metric cards animate on scroll; per-frame blur recompute was a hotspot. */
|
||
overflow: hidden;
|
||
opacity: 0; transform: translateY(22px);
|
||
animation: dmOptCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 ${(0,p.rgba)("#ffffff",.04)};
|
||
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
|
||
cursor: pointer;
|
||
}
|
||
.dm-opt-metric:hover {
|
||
transform: translateY(-5px) scale(1.028) !important;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.9)} !important;
|
||
border-color: ${(0,p.rgba)(p.COLORS.cyan,.52)} !important;
|
||
box-shadow:
|
||
0 18px 48px -8px ${(0,p.rgba)(p.COLORS.cyan,.25)},
|
||
0 4px 12px -2px ${(0,p.rgba)(p.COLORS.cyan,.12)},
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
|
||
}
|
||
.dm-opt-metric:hover .dm-opt-metric__sparkline {
|
||
opacity: 0.72 !important;
|
||
}
|
||
.dm-opt-metric__sparkline {
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
@keyframes dmOptCardIn { to { opacity: 1; transform: translateY(0); } }
|
||
.dm-opt-metric__top { display: flex; align-items: center; justify-content: space-between; }
|
||
.dm-opt-metric__label {
|
||
font-size: 10px; letter-spacing: 0.04em; color: ${p.COLORS.textDim}; text-transform: uppercase;
|
||
}
|
||
.dm-opt-metric__arrow { font-size: 11px; }
|
||
.dm-opt-metric__value { margin-top: 6px; font-size: clamp(20px, 2.8vw, 32px); font-weight: 700; line-height: 1; }
|
||
.dm-opt-metric__bar { margin-top: 10px; height: 3px; border-radius: 999px; background: ${(0,p.rgba)(p.COLORS.slate,.2)}; overflow: hidden; }
|
||
.dm-opt-metric__fill { height: 100%; border-radius: 999px; transform-origin: left center; }
|
||
|
||
/* ===== BOTTOM INSIGHT BAR ===== */
|
||
.dm-opt-insight {
|
||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
max-width: 760px; margin: 10px auto 0;
|
||
padding: 7px 18px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.6)};
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.12)};
|
||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||
pointer-events: auto;
|
||
}
|
||
.dm-opt-insight__dot {
|
||
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
||
background: ${p.COLORS.green};
|
||
box-shadow: 0 0 12px ${p.COLORS.green};
|
||
animation: dmOptPulse 2s ease-in-out infinite;
|
||
}
|
||
.dm-opt-insight__text {
|
||
font-size: 10.5px; color: ${p.COLORS.textDim}; line-height: 1.3;
|
||
letter-spacing: 0.03em; font-weight: 500;
|
||
}
|
||
.dm-opt-insight__text strong {
|
||
color: #E2E8F0; font-weight: 700;
|
||
}
|
||
.dm-opt-insight__sep {
|
||
width: 1px; height: 12px; flex-shrink: 0;
|
||
background: ${(0,p.rgba)(p.COLORS.slate,.35)};
|
||
}
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 1024px) {
|
||
.dm-opt-panel { width: clamp(190px, 30vw, 280px); padding: 14px 16px; }
|
||
.dm-opt-panel li { font-size: 11.5px; }
|
||
.dm-opt-marker { width: 16px; height: 16px; font-size: 9px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-opt { height: 200vh; }
|
||
.dm-opt-card {
|
||
top: 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
|
||
border-radius: 24px !important;
|
||
}
|
||
.dm-opt-compare {
|
||
top: auto; bottom: 148px; transform: none;
|
||
flex-direction: row; align-items: stretch; gap: 6px; padding: 0 10px;
|
||
}
|
||
.dm-opt-panel { width: 50%; padding: 10px 11px; border-radius: 14px; }
|
||
.dm-opt-panel ul { gap: 4px; }
|
||
.dm-opt-panel li { font-size: 10px; }
|
||
.dm-opt-panel li::before { display: none !important; }
|
||
.dm-opt-marker { width: 14px; height: 14px; font-size: 8px; border-radius: 4px; }
|
||
.dm-opt-panel h3 { margin: 6px 0 5px; font-size: 14px; }
|
||
.dm-opt-panel__badge { font-size: 8px; padding: 3px 7px; }
|
||
.dm-opt-metrics { grid-template-columns: repeat(5, 1fr); gap: 4px; }
|
||
.dm-opt-metric { padding: 7px 5px; border-radius: 10px; }
|
||
.dm-opt-metric__label { font-size: 7.5px; letter-spacing: 0; }
|
||
.dm-opt-metric__value { font-size: 14px; }
|
||
.dm-opt-metric__bar { margin-top: 6px; }
|
||
.dm-opt-head h2 { font-size: 22px; margin: 6px 0 4px; }
|
||
.dm-opt-head p { font-size: 10.5px; }
|
||
.dm-opt-phases { display: none; }
|
||
.dm-opt-steps { gap: 0; }
|
||
.dm-opt-steps__pill { padding: 3px 6px; }
|
||
.dm-opt-steps__icon { font-size: 9px; }
|
||
.dm-opt-steps__text { font-size: 7.5px; }
|
||
.dm-opt-steps__line { width: 6px; }
|
||
.dm-opt-insight { padding: 5px 10px; gap: 5px; }
|
||
.dm-opt-insight__text { font-size: 8.5px; }
|
||
.dm-opt-insight__sep { height: 10px; }
|
||
}
|
||
|
||
/* ===== MOBILE STACKED LAYOUT (<=767px) — non-pinned vertical flow =====
|
||
Rendered by the isMobile branch as a normal-flow .dm-opt-mobile container
|
||
(header → Without → 3D → With → metrics). These rules come after the block
|
||
above so they win for the elements that actually exist on mobile. */
|
||
@media (max-width: 767px) {
|
||
/* Un-pin: natural height, no fixed sticky, no 200/230vh scroll runway.
|
||
(.dm-opt--mobile out-specifies the base .dm-opt height rules.) */
|
||
.dm-opt.dm-opt--mobile { height: auto; }
|
||
|
||
.dm-opt-mobile {
|
||
position: relative;
|
||
margin: 0 10px;
|
||
padding: 24px 13px 22px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(180deg, #06101f 0%, #020617 55%, #030a18 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-bottom: none;
|
||
/* Flat bottom + flush so the Performance card (.dm-wf1-card) butts directly
|
||
against it as one continuous container (matches Workflow1 ≤767 styles). */
|
||
border-radius: 20px 20px 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Header */
|
||
.dm-opt-mhead { text-align: center; padding: 0 4px; }
|
||
.dm-opt-mhead .dm-opt-eyebrow { font-size: 10px; }
|
||
.dm-opt-mhead h2 {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
margin: 10px 0 6px !important; padding: 0 !important; color: #F8FAFC !important;
|
||
font-weight: 700 !important; text-transform: none !important;
|
||
font-size: clamp(20px, 6.2vw, 26px) !important; line-height: 1.15 !important;
|
||
letter-spacing: -0.015em !important;
|
||
}
|
||
.dm-opt-mhead p {
|
||
margin: 0 auto !important; padding: 0 !important; color: ${p.COLORS.textDim} !important;
|
||
max-width: 40ch; font-size: 12.5px !important; line-height: 1.5 !important;
|
||
}
|
||
|
||
/* Comparison panels → full-width static cards, fully visible, readable.
|
||
Trim the heavy glow (box-shadow) but keep the colored border for identity. */
|
||
.dm-opt-mobile .dm-opt-panel {
|
||
width: 100%; box-sizing: border-box;
|
||
opacity: 1 !important; filter: none !important;
|
||
padding: 15px 16px; border-radius: 16px; box-shadow: none;
|
||
}
|
||
.dm-opt-mobile .dm-opt-panel h3 {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
font-size: 16px !important; margin: 9px 0 10px !important;
|
||
}
|
||
.dm-opt-mobile .dm-opt-panel ul { gap: 8px; }
|
||
.dm-opt-mobile .dm-opt-panel li { font-size: 12.5px !important; line-height: 1.35 !important; }
|
||
.dm-opt-mobile .dm-opt-marker { width: 18px; height: 18px; font-size: 10px; border-radius: 6px; }
|
||
.dm-opt-mobile .dm-opt-panel__badge { font-size: 9.5px; padding: 4px 9px; }
|
||
|
||
/* 3D visualization block — contained, ~40vh, premium but not dominant. */
|
||
.dm-opt-mobile__scene {
|
||
position: relative; width: 100%; height: 40vh; min-height: 260px; max-height: 360px;
|
||
border-radius: 16px; overflow: hidden;
|
||
background: radial-gradient(120% 90% at 50% 30%, ${(0,p.rgba)(p.COLORS.cyan,.06)} 0%, ${p.COLORS.bg} 70%);
|
||
border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.14)};
|
||
}
|
||
.dm-opt-mobile__scene .dm-opt-canvas { position: absolute; inset: 0; z-index: 0; }
|
||
.dm-opt-mobile__scene-tag {
|
||
position: absolute; left: 10px; top: 10px; z-index: 1;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
|
||
color: #E2E8F0; padding: 4px 9px; border-radius: 999px;
|
||
background: ${(0,p.rgba)(p.COLORS.ink,.72)}; border: 1px solid ${(0,p.rgba)(p.COLORS.cyan,.22)};
|
||
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
|
||
}
|
||
|
||
/* Metrics → 2-col grid (5th card spans full width), final optimized values,
|
||
readable sizing so nothing truncates. */
|
||
.dm-opt-mfoot { padding: 0; }
|
||
.dm-opt-mobile .dm-opt-metrics {
|
||
grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: none;
|
||
}
|
||
.dm-opt-mobile .dm-opt-metric { padding: 12px 13px 11px; border-radius: 12px; }
|
||
.dm-opt-mobile .dm-opt-metric:last-child { grid-column: 1 / -1; }
|
||
.dm-opt-mobile .dm-opt-metric__label { font-size: 10px; letter-spacing: 0.02em; }
|
||
.dm-opt-mobile .dm-opt-metric__value { font-size: clamp(20px, 6.5vw, 26px); }
|
||
|
||
/* Insight bar wraps instead of overflowing. */
|
||
.dm-opt-mobile .dm-opt-insight {
|
||
flex-wrap: wrap; max-width: none; gap: 6px 10px; padding: 8px 14px; margin-top: 4px;
|
||
}
|
||
.dm-opt-mobile .dm-opt-insight__text { font-size: 10px; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dm-opt-pulse { animation: none; }
|
||
.dm-opt-metric { animation: none; opacity: 1; transform: none; }
|
||
.dm-opt-insight__dot { animation: none; }
|
||
.dm-opt-card::before { animation: none; }
|
||
}
|
||
`,y=`
|
||
/* ============================================================
|
||
Workflow 1 = ONE container:
|
||
├─ Impact of Optimisation (full interactive OptimizationSection)
|
||
└─ Performance (content card, flush + colour-matched)
|
||
The Performance card is pulled up to butt against the optimisation
|
||
card's flat bottom and shares its dark-navy surface, so the two
|
||
read as a single continuous container with no gap / no break.
|
||
============================================================ */
|
||
.dm-wf1 {
|
||
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-opt 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-wf1, .dm-wf1 .dm-opt { padding-top: 0; padding-bottom: 0; }
|
||
|
||
/* Performance card — aligned to the optimisation card (20px side insets),
|
||
navy-matched, flat top, rounded bottom, pulled up to close the seam. */
|
||
.dm-wf1-card {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 20px 0;
|
||
background: linear-gradient(180deg, #030a18 0%, #06101f 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-top: none;
|
||
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;
|
||
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 optimisation card ── */
|
||
@media (max-width: 1024px) {
|
||
.dm-wf1-card {
|
||
padding: 44px 44px;
|
||
gap: 44px;
|
||
}
|
||
.dm-workflow-title { font-size: 32px; }
|
||
.dm-workflow-text { font-size: 19px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-wf1-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,n]=(0,i.useState)(0),[o,s]=(0,i.useState)(!1),[l,d]=(0,i.useState)(!1),p=(0,i.useRef)(null),m=[{title:"PERFORMANCE",text:"Our AI-powered routing system reduces unnecessary travel by selecting the most efficient delivery paths across the city. This helps lower fuel and battery consumption while improving delivery speed and operational efficiency. Businesses can complete more deliveries in less time with significantly reduced logistics costs."},{title:"PERFORMANCE",text:"The optimization engine intelligently groups and balances deliveries, allowing the same order volume to be fulfilled with fewer vehicles. This improves fleet utilization, reduces maintenance and staffing costs, and increases overall delivery efficiency. Even with fewer vehicles, the platform maintains smooth and reliable operations."},{title:"PERFORMANCE",text:"Real-time route optimization ensures predictable and on-time deliveries across all delivery zones. By reducing delays and improving route planning, businesses can maintain high customer satisfaction and strong SLA performance. The system delivers lower operational costs while consistently maintaining 100% order fulfillment."}];return(0,i.useEffect)(()=>{n(0)},[]),(0,i.useEffect)(()=>{let e=p.current;if(!e)return;let t=new IntersectionObserver(([e])=>d(e.isIntersecting),{threshold:.35});return t.observe(e),()=>t.disconnect()},[]),(0,i.useEffect)(()=>{if(!l||o)return;let e=setTimeout(()=>{n(e=>(e+1)%m.length)},1e4);return()=>clearTimeout(e)},[e,l,o,m.length]),(0,t.jsxs)("section",{className:"dm-wf1","aria-label":"Workflow 1 — Impact of Optimisation & Performance",children:[(0,t.jsx)(w,{}),(0,t.jsxs)("div",{className:"dm-wf1-card",ref:p,onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!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:m[e].title}),(0,t.jsx)("div",{className:"dm-workflow-text-container",children:(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:(0,t.jsx)(a.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:m[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:m.map((i,a)=>(0,t.jsx)("button",{type:"button","aria-label":`Go to slide ${a+1}`,className:`dm-workflow-bar ${a===e?"is-active":""}`,onClick:()=>n(a)},a))})]})]})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:y}})]})}],76756)},38730,e=>{"use strict";var t=e.i(43476),i=e.i(71645),a=e.i(46932),r=e.i(88653),n=e.i(70703),o=e.i(87652),s=e.i(95420),l=e.i(89970),d=e.i(83495),p=e.i(92695);let m=(0,n.default)(()=>e.A(40999),{loadableGenerated:{modules:[39184]},ssr:!1});function c({mv:e}){let a=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let t=e=>{a.current&&(a.current.textContent=String(Math.round(e)))};return t(e.get()),e.on("change",t)},[e]),(0,t.jsx)("span",{ref:a,children:Math.round(e.get())})}function x({active:e}){return(0,t.jsx)("div",{className:"dm-lb-rail","aria-hidden":!0,children:p.ENGINE_STEPS.map((a,r)=>(0,t.jsxs)(i.default.Fragment,{children:[r>0&&(0,t.jsx)("span",{className:`dm-lb-rail__line is-${r<=e?"on":"off"}`}),(0,t.jsxs)("div",{className:`dm-lb-rail__step is-${r<e?"done":r===e?"current":"todo"}`,children:[(0,t.jsx)("span",{className:"dm-lb-rail__num",children:r<e?"✓":a.n}),(0,t.jsx)("span",{className:"dm-lb-rail__title",children:a.title})]})]},a.n))})}function h({step:e,index:i,pos:r,opacity:n,y:o,x:s,scale:l,num:d,kicker:p,title:m,children:c}){return e!==i?null:(0,t.jsx)("div",{className:`dm-lb-card-anchor is-${r}`,children:(0,t.jsxs)(a.motion.div,{className:"dm-lb-card-story",style:{opacity:n,y:o,x:s,scale:l},children:[(0,t.jsxs)("div",{className:"dm-lb-card-story__head",children:[(0,t.jsx)("span",{className:"dm-lb-pillar__num",children:d}),(0,t.jsx)("span",{className:"dm-lb-pillar__kicker",children:p})]}),(0,t.jsx)("h3",{className:"dm-lb-pillar__title",children:m}),c]})})}function g({connected:e=!1}={}){let r=(0,i.useRef)(null),n=(0,i.useRef)(0),b=(0,o.useMotionValue)(0),[u,w]=(0,i.useState)("before"),[v,y]=(0,i.useState)(-1),[k,_]=(0,i.useState)(!1),[j,O]=(0,i.useState)(!1),[N,C]=(0,i.useState)(!1),[S,L]=(0,i.useState)(!1);(0,i.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),i=()=>{C(e.matches),L(t.matches)};return i(),e.addEventListener("change",i),t.addEventListener("change",i),()=>{e.removeEventListener("change",i),t.removeEventListener("change",i)}},[]),(0,i.useEffect)(()=>{let e=r.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(_(!0),O(!0),t.disconnect())},{rootMargin:"70% 0px"}),i=new IntersectionObserver(e=>O(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return t.observe(e),i.observe(e),()=>{t.disconnect(),i.disconnect()}},[]),(0,i.useEffect)(()=>{let e=r.current;if(!e)return;l.default.registerPlugin(d.ScrollTrigger);let t="before",i=-1,a=d.ScrollTrigger.create({trigger:e,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let a=e.progress;n.current=a,b.set(a);let r=a<=2e-4?"before":a>=.9998?"after":"pinned";r!==t&&(t=r,w(r));let o=function(e){let t=-1;for(let i=0;i<p.ENGINE_STEPS.length;i++)e>=p.ENGINE_STEPS[i].at&&(t=i);return t}(a);o!==i&&(i=o,y(o))}}),o=setTimeout(()=>d.ScrollTrigger.refresh(),120);return()=>{clearTimeout(o),a.kill()}},[b]);let z=(0,s.useTransform)(b,[0,.04,.1],[1,1,0]),R=(0,s.useTransform)(b,[.04,.1,p.P.finale-.04,p.P.finale+.02],[0,1,1,0]),$=(0,s.useTransform)(b,[.135,.165,.255,.275],[0,1,1,0]),T=(0,s.useTransform)(b,[.135,.175],[26,0]),E=(0,s.useTransform)(b,[.29,.32,.415,.435],[0,1,1,0]),A=(0,s.useTransform)(b,[.29,.33],[26,0]),I=(0,s.useTransform)(b,[.45,.48,.575,.595],[0,1,1,0]),M=(0,s.useTransform)(b,[.45,.49],[26,0]),F=(0,s.useTransform)(b,[.61,.64,.715,.735],[0,1,1,0]),P=(0,s.useTransform)(b,[.61,.65],[26,0]),W=(0,s.useTransform)(b,[.75,.78,.855,.875],[0,1,1,0]),B=(0,s.useTransform)(b,[.75,.79],[26,0]),D=(0,s.useTransform)(b,[.135,.165,.255,.275],[-52,0,0,52]),G=(0,s.useTransform)(b,[.135,.165,.255,.275],[.965,1,1,.965]),V=(0,s.useTransform)(b,[.29,.32,.415,.435],[-52,0,0,52]),H=(0,s.useTransform)(b,[.29,.32,.415,.435],[.965,1,1,.965]),U=(0,s.useTransform)(b,[.45,.48,.575,.595],[-52,0,0,-52]),q=(0,s.useTransform)(b,[.45,.48,.575,.595],[.965,1,1,.965]),X=(0,s.useTransform)(b,[.61,.64,.715,.735],[52,0,0,52]),Y=(0,s.useTransform)(b,[.61,.64,.715,.735],[.965,1,1,.965]),K=(0,s.useTransform)(b,[.75,.78,.855,.875],[-52,0,0,0]),Z=(0,s.useTransform)(b,[.75,.78,.855,.875],[.97,1.05,1.05,1]),J=(0,s.useTransform)(b,[p.P.finale-.02,p.P.finale+.04],[0,1]),Q=(0,s.useTransform)(b,[p.P.finale-.02,p.P.finale+.06],[40,0]),ee=(0,s.useTransform)(b,[p.P.finale+.04,p.P.finale+.1],[0,1]),et=(0,s.useTransform)(b,[p.P.finale,.97],[0,59]),ei=(0,s.useTransform)(b,[p.P.finale,.97],[0,18]);return(0,t.jsxs)("section",{ref:r,className:`dm-lb is-${u}${e?" is-connected":""}`,"aria-label":"Logistics Brain — one intelligent system",children:[(0,t.jsx)("div",{className:"dm-lb-sticky",children:(0,t.jsxs)("div",{className:"dm-lb-card",children:[k&&(0,t.jsx)("div",{className:"dm-lb-canvas",children:(0,t.jsx)(m,{progress:n,reduced:S,isMobile:N,active:j&&"pinned"===u})}),"before"!==u&&(0,t.jsxs)("div",{className:"dm-lb-ui",children:[(0,t.jsxs)(a.motion.div,{className:"dm-lb-top",style:{opacity:R},children:[(0,t.jsxs)("div",{className:"dm-lb-eyebrow",children:[(0,t.jsx)("span",{className:"dm-lb-dot"})," MileTruth Routing Engine"]}),(0,t.jsx)(x,{active:v})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-scrollhint",style:{opacity:z},children:[(0,t.jsx)("span",{children:"Scroll to see how every delivery is planned"}),(0,t.jsx)("span",{className:"dm-lb-arrow",children:"↓"})]}),(0,t.jsxs)(h,{step:v,index:0,pos:"left",opacity:$,y:T,x:D,scale:G,num:"01",kicker:"Generate Routes",title:"We create many delivery plans at once",children:[(0,t.jsx)("div",{className:"dm-lb-chips",children:p.STRATEGIES.map((e,i)=>(0,t.jsx)("span",{className:`dm-lb-chip${i===p.WINNER_INDEX?" dm-lb-chip--active":""}`,children:e},e))}),(0,t.jsx)("p",{className:"dm-lb-pillar__foot",children:"6 different ways to deliver all 59 orders — generated in milliseconds."})]}),(0,t.jsxs)(h,{step:v,index:1,pos:"center",opacity:E,y:A,x:V,scale:H,num:"02",kicker:"Check Constraints",title:"Every plan must respect real-world limits",children:[(0,t.jsx)("ul",{className:"dm-lb-constraints",children:p.CONSTRAINT_LIST.map(e=>(0,t.jsxs)("li",{children:[(0,t.jsx)("span",{className:"dm-lb-constraints__icon",children:e.icon}),(0,t.jsx)("span",{className:"dm-lb-constraints__label",children:e.label}),(0,t.jsx)("span",{className:"dm-lb-constraints__note",children:e.note})]},e.label))}),(0,t.jsxs)("p",{className:"dm-lb-pillar__stat",children:[(0,t.jsx)("strong",{children:"59/59"})," delivered ",(0,t.jsx)("em",{children:"vs 34/59 when battery limits are ignored"})]})]}),(0,t.jsx)(h,{step:v,index:2,pos:"right",opacity:I,y:M,x:U,scale:q,num:"03",kicker:"Score & Compare",title:"Each plan is scored by total delivery cost",children:(0,t.jsx)("ul",{className:"dm-lb-board",children:p.STRATEGY_SCORES.map(e=>(0,t.jsxs)("li",{className:e.win?"is-win":"",children:[(0,t.jsxs)("span",{className:"dm-lb-board__name",children:[e.name,e.win&&(0,t.jsx)("span",{className:"dm-lb-board__tag",children:"WINNER"})]}),(0,t.jsx)("span",{className:"dm-lb-board__track",children:(0,t.jsx)("span",{className:"dm-lb-board__fill",style:{width:`${e.score}%`}})}),(0,t.jsx)("span",{className:"dm-lb-board__score",children:e.score})]},e.name))})}),(0,t.jsxs)(h,{step:v,index:3,pos:"left",opacity:F,y:P,x:X,scale:Y,num:"04",kicker:"Guarantee On-Time",title:"Any plan even 1 minute late is rejected",children:[(0,t.jsxs)("div",{className:"dm-lb-sla",children:[(0,t.jsx)("span",{className:"dm-lb-sla__badge",children:"⏱️ On-time only"}),(0,t.jsx)("span",{className:"dm-lb-sla__x",children:"✕ Late plan → dropped"})]}),(0,t.jsx)("p",{className:"dm-lb-pillar__foot",children:"We only keep plans that hit every promised delivery window."})]}),(0,t.jsxs)(h,{step:v,index:4,pos:"hero",opacity:W,y:B,x:K,scale:Z,num:"05",kicker:"Pick & Dispatch",title:"The winning plan is sent to the fleet",children:[(0,t.jsx)("div",{className:"dm-lb-winner",children:"✓ Multi-Trip selected — lowest cost, zero delays"}),(0,t.jsxs)("div",{className:"dm-lb-chips",children:[(0,t.jsx)("span",{className:"dm-lb-chip",children:"EV Bikes"}),(0,t.jsx)("span",{className:"dm-lb-chip",children:"Autos"}),(0,t.jsx)("span",{className:"dm-lb-chip",children:"Cargo Trucks"})]})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-finale",style:{opacity:J},children:[(0,t.jsxs)(a.motion.div,{className:"dm-lb-kpis",style:{y:Q},children:[(0,t.jsxs)("div",{className:"dm-lb-kpi",children:[(0,t.jsxs)("span",{className:"dm-lb-kpi__num",children:[(0,t.jsx)(c,{mv:et}),"/59"]}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"Orders Delivered"})]}),(0,t.jsxs)("div",{className:"dm-lb-kpi dm-lb-kpi--green",children:[(0,t.jsx)("span",{className:"dm-lb-kpi__num",children:"0"}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"SLA Misses"})]}),(0,t.jsxs)("div",{className:"dm-lb-kpi",children:[(0,t.jsxs)("span",{className:"dm-lb-kpi__num",children:[(0,t.jsx)(c,{mv:ei}),"%"]}),(0,t.jsx)("span",{className:"dm-lb-kpi__label",children:"Cost Saved"})]})]}),(0,t.jsxs)(a.motion.div,{className:"dm-lb-logo",style:{opacity:ee},children:[(0,t.jsx)("span",{className:"dm-lb-logo__mark"}),"MileTruth"]})]})]})]})}),(0,t.jsx)("style",{children:f})]})}let f=`
|
||
/* Scroll length tuned for pacing: ~77vh per engine step (was 107vh) so the 6
|
||
beats complete in noticeably less scrolling — closer to Workflow 1's cadence
|
||
and with far less perceived empty space between workflows. Beat windows are
|
||
progress-based (0…1), so they stay correctly aligned at any height. */
|
||
.dm-lb { position: relative; height: 460vh; background: transparent; }
|
||
.dm-lb-sticky { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;
|
||
will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
|
||
.dm-lb.is-pinned .dm-lb-sticky { position: fixed; top: 0; left: 0; }
|
||
.dm-lb.is-after .dm-lb-sticky { position: absolute; top: auto; bottom: 0; }
|
||
|
||
.dm-lb-card {
|
||
position: absolute !important; inset: 20px !important;
|
||
border-radius: 28px !important; overflow: hidden !important;
|
||
background: radial-gradient(120% 100% at 50% 0%, #12090c 0%, #0a070a 55%, #060507 100%) !important;
|
||
border: 1px solid rgba(192,18,39,0.16) !important;
|
||
box-shadow: 0 30px 90px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04) !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
@media (max-width: 767px) { .dm-lb-card { inset: 10px !important; border-radius: 20px !important; } }
|
||
|
||
/* Connected mode (inside Workflow 2): flatten the card's bottom edge and flush it to
|
||
the section's bottom so the Innovation card below butts directly against it, reading
|
||
as one continuous container — mirrors the Optimisation → Performance seam in Workflow 1. */
|
||
.dm-lb.is-connected .dm-lb-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 Innovation 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-lb.is-connected .dm-lb-card {
|
||
top: 10px !important; left: 10px !important; right: 10px !important; bottom: 0 !important;
|
||
border-radius: 20px 20px 0 0 !important;
|
||
}
|
||
}
|
||
|
||
.dm-lb-canvas { position: absolute; inset: 0; z-index: 1; }
|
||
.dm-lb-canvas canvas { display: block; }
|
||
|
||
.dm-lb-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: #eaf2ff; }
|
||
|
||
/* ---- Persistent header: title + 6-step engine rail ----
|
||
Offset the bar below the site's fixed navbar (~104px desktop / ~100px mobile once
|
||
.dm-header-scrolled is active). The section pins full-viewport, so without this the
|
||
eyebrow badge would sit under the navbar (z-index 10000) and get clipped. */
|
||
.dm-lb-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; overflow: visible; }
|
||
.dm-lb-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
|
||
color: #ffffff; padding: 9px 20px; border-radius: 999px; background: rgba(192,18,39,0.16);
|
||
border: 1px solid rgba(226,53,66,0.45); backdrop-filter: blur(8px); white-space: nowrap; overflow: visible; }
|
||
.dm-lb-dot { width: 6px; height: 6px; border-radius: 50%; background: #E2354A; box-shadow: 0 0 10px #E2354A; }
|
||
|
||
.dm-lb-rail { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; max-width: min(1160px, 96vw); }
|
||
.dm-lb-rail__step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; flex-shrink: 0;
|
||
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
|
||
backdrop-filter: blur(6px); transition: all 0.45s cubic-bezier(0.22,1,0.36,1); }
|
||
.dm-lb-rail__num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); }
|
||
.dm-lb-rail__title { font-size: clamp(12.5px, 1.05vw, 14px); font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.95); white-space: nowrap; }
|
||
.dm-lb-rail__step.is-current { background: rgba(192,18,39,0.18); border-color: rgba(226,53,66,0.55); box-shadow: 0 0 22px -6px rgba(226,53,66,0.7); }
|
||
.dm-lb-rail__step.is-current .dm-lb-rail__num { background: linear-gradient(135deg,#E2354A,#C01227); color: #fff; }
|
||
.dm-lb-rail__step.is-current .dm-lb-rail__title { color: #fff; }
|
||
.dm-lb-rail__step.is-done .dm-lb-rail__num { background: #22C55E; color: #04130a; }
|
||
.dm-lb-rail__step.is-done .dm-lb-rail__title { color: rgba(255,255,255,0.92); }
|
||
.dm-lb-rail__line { width: 14px; height: 1px; background: rgba(255,255,255,0.12); margin: 0 3px; transition: background 0.45s ease; }
|
||
.dm-lb-rail__line.is-on { background: linear-gradient(90deg,#22C55E,#E2354A); }
|
||
|
||
.dm-lb-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: rgba(240,228,230,0.72); text-transform: uppercase; text-align: center; }
|
||
.dm-lb-arrow { font-size: 18px; animation: dmLbBob 1.8s ease-in-out infinite; }
|
||
@keyframes dmLbBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
|
||
|
||
/* ---- Story card: a premium light-glass panel that TRAVELS between stage
|
||
anchors. The anchor pins the stage position; the inner card slides/scales into
|
||
it (Left → Center → Right → Left → Center-Hero) in lockstep with scroll. ---- */
|
||
.dm-lb-card-anchor { position: absolute; bottom: clamp(26px, 7vh, 64px); z-index: 6; pointer-events: none; }
|
||
.dm-lb-card-anchor.is-left { left: clamp(18px, 4vw, 56px); }
|
||
.dm-lb-card-anchor.is-right { right: clamp(18px, 4vw, 56px); }
|
||
.dm-lb-card-anchor.is-center,
|
||
.dm-lb-card-anchor.is-hero { left: 50%; transform: translateX(-50%); }
|
||
/* Hero (final selection) sits a little higher + centred so it reads as the payoff. */
|
||
.dm-lb-card-anchor.is-hero { bottom: clamp(40px, 9vh, 92px); }
|
||
|
||
.dm-lb-card-story { position: relative; width: min(440px, 84vw); pointer-events: auto;
|
||
will-change: opacity, transform; transform-origin: bottom center;
|
||
padding: 18px 20px; border-radius: 18px;
|
||
/* Premium light glass — clean SaaS surface, brand red used only as a top accent. */
|
||
background: rgba(255,255,255,0.94);
|
||
border: 1px solid rgba(15,23,42,0.08); border-top: 3px solid #C01227;
|
||
box-shadow: 0 28px 70px -34px rgba(15,23,42,0.45); }
|
||
.dm-lb-card-anchor.is-hero .dm-lb-card-story { width: min(480px, 88vw);
|
||
box-shadow: 0 38px 92px -34px rgba(192,18,39,0.4); }
|
||
.dm-lb-card-story__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||
.dm-lb-pillar__num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #ffffff;
|
||
background: linear-gradient(135deg, #E2354A, #C01227); border-radius: 7px; padding: 3px 8px; }
|
||
.dm-lb-pillar__kicker { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.18em;
|
||
text-transform: uppercase; color: #C01227; }
|
||
.dm-lb .dm-lb-pillar__title { margin: 0 0 12px !important; padding: 0 !important; color: #0f172a !important;
|
||
font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.015em !important;
|
||
font-size: clamp(17px, 1.9vw, 24px) !important; line-height: 1.18 !important; }
|
||
.dm-lb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
|
||
/* Strategy pills — white pills, soft border + light shadow, brand-red active state. */
|
||
.dm-lb-chip { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #334155;
|
||
padding: 5px 12px; border-radius: 999px; background: #ffffff;
|
||
border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 1px 2px rgba(15,23,42,0.06); white-space: nowrap; }
|
||
.dm-lb-chip--active { color: #ffffff; background: linear-gradient(135deg, #E2354A, #C01227);
|
||
border-color: transparent; box-shadow: 0 6px 16px -6px rgba(192,18,39,0.5); }
|
||
.dm-lb-pillar__foot { margin: 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.45; color: #475569; }
|
||
.dm-lb-pillar__stat { margin: 6px 0 0; font-size: clamp(12.5px, 1.2vw, 15px); color: #475569; }
|
||
.dm-lb-pillar__stat strong { color: #16a34a; font-weight: 800; font-size: 1.25em; }
|
||
.dm-lb-pillar__stat em { font-style: normal; color: #94a3b8; }
|
||
|
||
/* Constraints checklist (step 02) */
|
||
.dm-lb-constraints { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
|
||
.dm-lb-constraints li { display: flex; align-items: center; gap: 9px; }
|
||
.dm-lb-constraints__icon { font-size: 14px; width: 20px; text-align: center; }
|
||
.dm-lb-constraints__label { font-size: 13px; font-weight: 700; color: #0f172a; min-width: 84px; }
|
||
.dm-lb-constraints__note { font-size: 12px; color: #64748b; }
|
||
|
||
/* Scored leaderboard (step 03) */
|
||
.dm-lb-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
|
||
.dm-lb-board li { display: grid; grid-template-columns: 104px 1fr 26px; align-items: center; gap: 9px; }
|
||
.dm-lb-board__name { font-size: 11.5px; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.dm-lb-board li.is-win .dm-lb-board__name { color: #0f172a; font-weight: 800; }
|
||
.dm-lb-board__tag { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: #fff;
|
||
background: linear-gradient(135deg,#E2354A,#C01227); padding: 2px 5px; border-radius: 5px; }
|
||
.dm-lb-board__track { height: 7px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; }
|
||
.dm-lb-board__fill { display: block; height: 100%; border-radius: 999px; background: rgba(100,116,139,0.45); }
|
||
.dm-lb-board li.is-win .dm-lb-board__fill { background: linear-gradient(90deg,#E2354A,#C01227); box-shadow: 0 0 12px rgba(226,53,66,0.4); }
|
||
.dm-lb-board__score { font-size: 12px; font-weight: 700; color: #64748b; text-align: right; }
|
||
.dm-lb-board li.is-win .dm-lb-board__score { color: #0f172a; }
|
||
|
||
/* SLA badges (step 04) */
|
||
.dm-lb-sla { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
|
||
.dm-lb-sla__badge { font-size: 12px; font-weight: 700; color: #15803d; background: rgba(34,197,94,0.1);
|
||
border: 1px solid rgba(34,197,94,0.3); padding: 6px 12px; border-radius: 999px; }
|
||
.dm-lb-sla__x { font-size: 12px; font-weight: 700; color: #b91c1c; background: rgba(239,68,68,0.08);
|
||
border: 1px solid rgba(239,68,68,0.28); padding: 6px 12px; border-radius: 999px; }
|
||
|
||
/* Winner banner (step 05) */
|
||
.dm-lb-winner { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 10px; padding: 9px 13px; border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(192,18,39,0.08), rgba(34,197,94,0.08)); border: 1px solid rgba(226,53,66,0.32); }
|
||
|
||
/* ---- Finale: KPI cards ---- */
|
||
.dm-lb-finale { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
|
||
.dm-lb-kpis { display: flex; gap: clamp(14px, 2.4vw, 28px); margin-bottom: clamp(28px, 6vh, 56px); flex-wrap: wrap; justify-content: center; }
|
||
.dm-lb-kpi { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: clamp(150px, 18vw, 210px);
|
||
padding: 22px 26px; border-radius: 18px; background: rgba(16,9,11,0.9); border: 1px solid rgba(226,53,66,0.28);
|
||
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.9); }
|
||
.dm-lb-kpi--green { border-color: rgba(34,197,94,0.4); }
|
||
.dm-lb-kpi__num { font-size: clamp(38px, 5.5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
|
||
color: #fff; text-shadow: 0 0 32px rgba(226,53,66,0.55), 0 0 12px rgba(192,18,39,0.5); }
|
||
.dm-lb-kpi--green .dm-lb-kpi__num { color: #4ade80; text-shadow: 0 0 32px rgba(34,197,94,0.6); }
|
||
.dm-lb-kpi__label { font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,222,224,0.62); }
|
||
|
||
.dm-lb-logo { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(22px, 3vw, 40px); font-weight: 800;
|
||
letter-spacing: -0.01em; color: #fff; margin-bottom: 18px; text-shadow: 0 0 30px rgba(192,18,39,0.55); }
|
||
.dm-lb-logo__mark { width: clamp(20px, 2.4vw, 30px); height: clamp(20px, 2.4vw, 30px); border-radius: 8px;
|
||
background: conic-gradient(from 140deg, #E2354A, #C01227, #8A0E1F, #C8102E, #E2354A);
|
||
box-shadow: 0 0 28px rgba(192,18,39,0.75); }
|
||
|
||
/* Hide the step titles on narrower screens so the rail stays a single tidy row of numbers. */
|
||
@media (max-width: 1000px) {
|
||
.dm-lb-rail__title { display: none; }
|
||
.dm-lb-rail__step { padding: 5px 7px; }
|
||
.dm-lb-rail__line { width: 9px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-lb { height: 400vh; }
|
||
.dm-lb-kpis { gap: 12px; }
|
||
.dm-lb-kpi { min-width: 96px; padding: 14px 14px; }
|
||
/* On phones every stage collapses to one centred, full-width position — the
|
||
horizontal travel only reads on wider screens. */
|
||
.dm-lb-card-anchor,
|
||
.dm-lb-card-anchor.is-left,
|
||
.dm-lb-card-anchor.is-right,
|
||
.dm-lb-card-anchor.is-center,
|
||
.dm-lb-card-anchor.is-hero { left: 50%; right: auto; transform: translateX(-50%); bottom: clamp(20px, 5vh, 44px); }
|
||
.dm-lb-card-story,
|
||
.dm-lb-card-anchor.is-hero .dm-lb-card-story { width: calc(100vw - 28px); padding: 14px 16px; }
|
||
.dm-lb-board li { grid-template-columns: 88px 1fr 24px; }
|
||
.dm-lb-constraints__note { display: none; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dm-lb-arrow { animation: none !important; }
|
||
}
|
||
`,b=`
|
||
/* ============================================================
|
||
Workflow 2 = ONE container:
|
||
├─ How Our Logistics Brain Works (full LogisticsBrainSection)
|
||
└─ Innovation (content card, flush + colour-matched)
|
||
The Innovation card is pulled up to butt against the logistics-brain
|
||
card's flat bottom and shares its dark red/black surface, so the two
|
||
read as a single continuous container with no gap / no break — the
|
||
same connected storytelling structure used in Workflow 1
|
||
(Impact of Optimisation → Performance).
|
||
============================================================ */
|
||
.dm-wf2 {
|
||
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-lb 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-wf2, .dm-wf2 .dm-lb { padding-top: 0; padding-bottom: 0; }
|
||
|
||
/* Innovation card — aligned to the logistics-brain card (20px side insets),
|
||
red/black-matched, flat top, rounded bottom, pulled up to close the seam. */
|
||
.dm-wf2-card {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 20px 0;
|
||
background: radial-gradient(120% 100% at 50% 0%, #12090c 0%, #0a070a 55%, #060507 100%);
|
||
border: 1px solid rgba(192, 18, 39, 0.16);
|
||
border-top: none;
|
||
border-radius: 0 0 28px 28px;
|
||
/* No shadow: this card is flush under the logistics-brain 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 logistics-brain card ── */
|
||
@media (max-width: 1024px) {
|
||
.dm-wf2-card {
|
||
padding: 44px 44px;
|
||
gap: 44px;
|
||
}
|
||
.dm-workflow-title { font-size: 32px; }
|
||
.dm-workflow-text { font-size: 19px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-wf2-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,n]=(0,i.useState)(0),[o,s]=(0,i.useState)(!1),[l,d]=(0,i.useState)(!1),p=(0,i.useRef)(null),m=[{title:"INNOVATION",text:"Our Parallel Universe Engine simultaneously evaluates multiple routing strategies to identify the most efficient delivery plan for every dispatch window. By simulating different route combinations in real time, the system ensures faster, smarter, and more cost-effective logistics decisions. This enables businesses to maintain high operational accuracy while adapting dynamically to changing delivery conditions."},{title:"INNOVATION",text:"The platform solves the EV routing challenge through intelligent battery-aware simulations and advanced optimization logic powered by Google OR-Tools. It balances delivery efficiency, charging constraints, and SLA priorities to maximize fleet performance without compromising reliability. This creates a scalable and future-ready logistics system designed for both traditional and EV fleets."},{title:"INNOVATION",text:"With sub-45ms inference latency and real-time ETA validation, the engine delivers instant routing decisions with exceptional precision. Multiple strategy universes are benchmarked in parallel to consistently select the best-performing route configuration. The result is highly reliable, SLA-first delivery operations with improved customer experience and operational consistency."}];return(0,i.useEffect)(()=>{n(0)},[]),(0,i.useEffect)(()=>{let e=p.current;if(!e)return;let t=new IntersectionObserver(([e])=>d(e.isIntersecting),{threshold:.35});return t.observe(e),()=>t.disconnect()},[]),(0,i.useEffect)(()=>{if(!l||o)return;let e=setTimeout(()=>{n(e=>(e+1)%m.length)},1e4);return()=>clearTimeout(e)},[e,l,o,m.length]),(0,t.jsxs)("section",{className:"dm-wf2","aria-label":"Workflow 2 — How Our Logistics Brain Works & Innovation",children:[(0,t.jsx)(g,{connected:!0}),(0,t.jsxs)("div",{className:"dm-wf2-card",ref:p,onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!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:m[e].title}),(0,t.jsx)("div",{className:"dm-workflow-text-container",children:(0,t.jsx)(r.AnimatePresence,{mode:"wait",children:(0,t.jsx)(a.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:m[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:m.map((i,a)=>(0,t.jsx)("button",{type:"button","aria-label":`Go to slide ${a+1}`,className:`dm-workflow-bar ${a===e?"is-active":""}`,onClick:()=>n(a)},a))})]})]})]}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:b}})]})}],38730)},33016,e=>{"use strict";var t=e.i(43476),i=e.i(71645);let a=(0,e.i(70703).default)(()=>e.A(15756),{loadableGenerated:{modules:[55819]},ssr:!1,loading:()=>null});e.s(["default",0,function(){let e=(0,i.useRef)(null),[r,n]=(0,i.useState)(!1);return((0,i.useEffect)(()=>{let t=e.current;if(!t)return;let i=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(n(!0),i.disconnect())},{rootMargin:"150% 0px"});return i.observe(t),()=>i.disconnect()},[]),r)?(0,t.jsx)("div",{ref:e,style:{display:"contents"},children:(0,t.jsx)(a,{})}):(0,t.jsx)("div",{ref:e,"aria-hidden":!0,style:{minHeight:"100vh"}})}])}]); |